import React, { useState } from 'react';
import { Modal, Table, Button, Space, message, Tag, ConfigProvider } from 'antd';
import { PlusOutlined, EditOutlined, DeleteOutlined, EyeOutlined } from '@ant-design/icons';
import { NotifConfirmDialog, NotifOk, NotifAlert } from '../../../../components/Global/ToastNotif';

const ErrorCodeListModal = ({
    visible,
    onClose,
    errorCodes,
    loading,
    onPreview,
    onEdit,
    onDelete,
    onAddNew,
}) => {
    const [confirmLoading, setConfirmLoading] = useState(false);

    const columns = [
        {
            title: 'No',
            key: 'no',
            width: '5%',
            align: 'center',
            render: (_, __, index) => index + 1,
        },
        {
            title: 'Error Code',
            dataIndex: 'error_code',
            key: 'error_code',
            width: '15%',
        },
        {
            title: 'Error Name',
            dataIndex: 'error_code_name',
            key: 'error_code_name',
            width: '30%',
            render: (text) => text || '-',
        },
        {
            title: 'Description',
            dataIndex: 'error_code_description',
            key: 'error_code_description',
            width: '25%',
            render: (text) => text || '-',
            ellipsis: true,
        },
        {
            title: 'Solutions',
            key: 'solutions',
            width: '10%',
            align: 'center',
            render: (_, record) => {
                const solutionCount = record.solution ? record.solution.length : 0;
                return <Tag color={solutionCount > 0 ? 'green' : 'red'}>{solutionCount} Sol</Tag>;
            },
        },
        {
            title: 'Status',
            dataIndex: 'status',
            key: 'status',
            width: '10%',
            align: 'center',
            render: (_, { status }) => (
                <Tag color={status ? 'green' : 'red'}>{status ? 'Active' : 'Inactive'}</Tag>
            ),
        },
        {
            title: 'Action',
            key: 'action',
            align: 'center',
            width: '15%',
            render: (_, record) => (
                <Space>
                    <Button
                        type="text"
                        icon={<EyeOutlined />}
                        onClick={() => onPreview(record)}
                        style={{
                            color: '#23A55A',
                            borderColor: '#23A55A',
                        }}
                        size="small"
                    />
                    <Button
                        type="text"
                        icon={<EditOutlined />}
                        onClick={() => onEdit(record)}
                        style={{
                            color: '#faad14',
                            borderColor: '#faad14',
                        }}
                        size="small"
                    />
                    <Button
                        type="text"
                        danger
                        icon={<DeleteOutlined />}
                        onClick={() => handleDelete(record)}
                        style={{
                            borderColor: '#ff4d4f',
                            color: '#ff4d4f',
                        }}
                        size="small"
                    />
                </Space>
            ),
        },
    ];

    const handleDelete = (record) => {
        if (errorCodes.length <= 1) {
            NotifAlert({
                icon: 'warning',
                title: 'Perhatian',
                message: 'Setiap brand harus memiliki minimal 1 error code!',
            });
            return;
        }

        NotifConfirmDialog({
            icon: 'question',
            title: 'Konfirmasi',
            message: `Apakah anda yakin hapus error code "${
                record.error_code_name || record.error_code
            }" ?`,
            onConfirm: () => {
                setConfirmLoading(true);
                onDelete(record.key);
                setConfirmLoading(false);
            },
            onCancel: () => {},
        });
    };

    return (
        <Modal
            title={
                <div
                    style={{
                        display: 'flex',
                        justifyContent: 'space-between',
                        alignItems: 'center',
                    }}
                >
                    <span>Daftar Error Codes</span>
                    <ConfigProvider
                        theme={{
                            token: { colorBgContainer: '#23a55ade' },
                            components: {
                                Button: {
                                    defaultBg: '#23a55a',
                                    defaultColor: '#FFFFFF',
                                    defaultBorderColor: '#23a55a',
                                    defaultHoverBg: '#209652',
                                    defaultHoverColor: '#FFFFFF',
                                    defaultHoverBorderColor: '#23a55a',
                                },
                            },
                        }}
                    >
                        <Button
                            type="primary"
                            icon={<PlusOutlined />}
                            onClick={onAddNew}
                        >
                            Add New Error Code
                        </Button>
                    </ConfigProvider>
                </div>
            }
            open={visible}
            onCancel={onClose}
            closable={false}
            maskClosable={false}
            width={1200}
            footer={[
                <Button key="close" onClick={onClose}>
                    Close
                </Button>,
            ]}
        >
            <Table
                columns={columns}
                dataSource={errorCodes}
                loading={loading || confirmLoading}
                rowKey="key"
                pagination={{
                    pageSize: 10,
                    showSizeChanger: true,
                    showQuickJumper: true,
                    showTotal: (total, range) => `${range[0]}-${range[1]} of ${total} items`,
                }}
                scroll={{ x: 1000 }}
                size="small"
            />
        </Modal>
    );
};

export default ErrorCodeListModal;
