import { useEffect, useRef, useState } from 'react';
import { Drawer, Button, Space, Tag, Popconfirm, Modal, Form, Input, InputNumber, Radio } from 'antd';
import { PlusOutlined } from '@ant-design/icons';
import { ProTable } from '@ant-design/pro-components';
import type { ActionType, ProColumns } from '@ant-design/pro-components';
import { useTranslation } from 'react-i18next';
import { App } from 'antd';
import { Access } from '@/components/Access';
import {
  getDictDataPage,
  getDictData,
  createDictData,
  updateDictData,
  deleteDictData,
} from '@/api/system/dict-data';
import type { DictData } from '@/api/system/dict-data';

const DEFAULT_FORM = { sort: 0, status: 0 };

interface DictDataDrawerProps {
  open: boolean;
  dictType: string;
  onClose: () => void;
}

const DictDataDrawer: React.FC<DictDataDrawerProps> = ({ open, dictType, onClose }) => {
  const { t } = useTranslation('system/dict');
  const { t: tc } = useTranslation('common');
  const { message } = App.useApp();
  const actionRef = useRef<ActionType>(null);
  const [modalOpen, setModalOpen] = useState(false);
  const [editId, setEditId] = useState<number | null>(null);
  const [form] = Form.useForm();
  const [confirmLoading, setConfirmLoading] = useState(false);
  // 保留服务端原始字段，避免编辑时丢掉未在表单里出现的字段
  const originData = useRef<Partial<DictData>>({});

  // Reset form when modal opens
  useEffect(() => {
    if (modalOpen) {
      form.resetFields();
      originData.current = {};
      if (editId) {
        getDictData(editId).then(({ data }) => {
          originData.current = { ...data };
          form.setFieldsValue(data);
        }).catch(() => { });
      } else {
        form.setFieldsValue(DEFAULT_FORM);
      }
    }
  }, [modalOpen, editId, form]);

  const handleDelete = (id: number) => async () => {
    try {
      await deleteDictData(id);
      message.success(tc('success'));
      actionRef.current?.reload();
    } catch { /* request 拦截器已弹出错误提示 */ }
  };

  const handleFormOk = async () => {
    let values: DictData;
    try { values = await form.validateFields(); } catch { return; }
    setConfirmLoading(true);
    try {
      const payload = { ...originData.current, ...values, dictType };
      if (editId) {
        await updateDictData({ ...payload, id: editId } as DictData);
        message.success(tc('success'));
      } else {
        await createDictData(payload as DictData);
        message.success(tc('success'));
      }
      setModalOpen(false);
      actionRef.current?.reload();
    } finally {
      setConfirmLoading(false);
    }
  };

  const columns: ProColumns<DictData>[] = [
    {
      title: t('dataLabel'),
      dataIndex: 'label',
      ellipsis: true,
      width: 150,
    },
    {
      title: t('dataValue'),
      dataIndex: 'value',
      search: false,
      width: 120,
    },
    {
      title: t('dataSort'),
      dataIndex: 'sort',
      search: false,
      width: 80,
    },
    {
      title: t('colorType'),
      dataIndex: 'colorType',
      search: false,
      width: 100,
    },
    {
      title: t('dataStatus'),
      dataIndex: 'status',
      search: false,
      width: 100,
      render: (_, record) => (
        <Tag color={record.status === 0 ? 'success' : 'error'}>
          {record.status === 0 ? tc('enable') : tc('disable')}
        </Tag>
      ),
    },
    {
      title: tc('operation'),
      key: 'action',
      fixed: 'right',
      search: false,
      width: 150,
      render: (_, record) => (
        <Space>
          <Access code="system:dict:update">
            <a
              onClick={() => {
                setEditId(record.id!);
                setModalOpen(true);
              }}
            >
              {tc('edit')}
            </a>
          </Access>
          <Access code="system:dict:delete">
            <Popconfirm title={t('deleteDataConfirm')} onConfirm={handleDelete(record.id!)}>
              <a style={{ color: '#ff4d4f' }}>{tc('delete')}</a>
            </Popconfirm>
          </Access>
        </Space>
      ),
    },
  ];

  return (
    <Drawer
      title={`${t('dataTitle')} - ${dictType}`}
      size={1157}
      open={open}
      onClose={onClose}
      destroyOnHidden={true}
      mask={{ closable: false }}
      styles={{ body: { background: '#f5f5f5' } }}
    >
      <ProTable<DictData>
        columns={columns}
        actionRef={actionRef}
        rowKey="id"
        search={false}
        params={{ dictType }}
        request={async (params) => {
          const { current, pageSize, ...rest } = params;
          const { data } = await getDictDataPage({
            pageNo: current!,
            pageSize: pageSize!,
            ...rest,
          });
          return { data: data.list, total: data.total, success: true };
        }}
        pagination={{ defaultPageSize: 10, showSizeChanger: true }}
        scroll={{ x: 700 }}
        toolBarRender={() => [
          <Access code="system:dict:create" key="add">
            <Button
              type="primary"
              icon={<PlusOutlined />}
              onClick={() => {
                setEditId(null);
                setModalOpen(true);
              }}
            >
              {tc('create')}
            </Button>
          </Access>,
        ]}
      />

      {/* Dict Data Form Modal */}
      <Modal
        title={editId ? t('editDataTitle') : t('addDataTitle')}
        open={modalOpen}
        onOk={handleFormOk}
        confirmLoading={confirmLoading}
        onCancel={() => setModalOpen(false)}
        destroyOnHidden
      >
        <Form form={form} layout="vertical" initialValues={DEFAULT_FORM} autoComplete="off">
          <Form.Item
            name="label"
            label={t('dataLabel')}
            rules={[{ required: true, message: t('dataLabelPlaceholder') }]}
          >
            <Input placeholder={t('dataLabelPlaceholder')} />
          </Form.Item>

          <Form.Item
            name="value"
            label={t('dataValue')}
            rules={[{ required: true, message: t('dataValuePlaceholder') }]}
          >
            <Input placeholder={t('dataValuePlaceholder')} />
          </Form.Item>

          <Form.Item name="sort" label={t('dataSort')}>
            <InputNumber min={0} style={{ width: '100%' }} />
          </Form.Item>

          <Form.Item name="colorType" label={t('colorType')}>
            <Input placeholder={t('colorTypePlaceholder')} />
          </Form.Item>

          <Form.Item name="cssClass" label={t('cssClass')}>
            <Input />
          </Form.Item>

          <Form.Item name="status" label={t('dataStatus')}>
            <Radio.Group>
              <Radio value={0}>{tc('enable')}</Radio>
              <Radio value={1}>{tc('disable')}</Radio>
            </Radio.Group>
          </Form.Item>

          <Form.Item name="remark" label={t('dataRemark')}>
            <Input.TextArea rows={3} placeholder={t('dataRemarkPlaceholder')} />
          </Form.Item>
        </Form>
      </Modal>
    </Drawer>
  );
};

export default DictDataDrawer;