import { useEffect, useRef, useState } from 'react';
import { Drawer, Form, Input, Button, Space, Card, App } from 'antd';
import { useTranslation } from 'react-i18next';
import { saveVariableDict } from '@/api/mdm/coding-system';
import type { VariableDictVO } from '@/types/mdm/coding-system';

interface VariableDictDrawerProps {
  open: boolean;
  id: number | null;
  onSuccess: () => void;
  onClose: () => void;
}

const VariableDictDrawer: React.FC<VariableDictDrawerProps> = ({ open, id, onSuccess, onClose }) => {
  const { t } = useTranslation('mdm/coding-system');
  const { t: tc } = useTranslation('common');
  const { message } = App.useApp();
  const [form] = Form.useForm();
  const [confirmLoading, setConfirmLoading] = useState(false);
  const isEdit = id != null;
  const originData = useRef<Partial<VariableDictVO>>({});

  useEffect(() => {
    if (!open) return;
    form.resetFields();
    originData.current = {};
    if (id != null) {
      getVariableDictPage({ pageNo: 1, pageSize: 999 }).then(({ data }) => {
        const item = data.list.find((v) => v.id === id);
        if (item) {
          originData.current = { ...item };
          form.setFieldsValue(item);
        }
      });
    }
  }, [open, id, form]);

  const handleOk = async () => {
    let values;
    try {
      values = await form.validateFields();
    } catch {
      return;
    }
    setConfirmLoading(true);
    try {
      const params = { ...originData.current, ...values, id: id ?? undefined };
      await saveVariableDict(params);
      message.success(t('saveSuccess'));
      onSuccess();
    } catch (err) {
      message.error((err as Error).message || tc('fail'));
    } finally {
      setConfirmLoading(false);
    }
  };

  return (
    <Drawer
      title={isEdit ? tc('edit') : tc('create')}
      open={open}
      onClose={onClose}
      size={'15%'}
      closable={{ placement: 'end' }}
      destroyOnHidden={true}
      mask={{ closable: false }}
      styles={{ body: { background: '#f5f5f5' } }}
      footer={
        <Space style={{ float: 'right' }}>
          <Button onClick={onClose}>{tc('cancel')}</Button>
          <Button type="primary" loading={confirmLoading} onClick={handleOk}>
            {tc('confirm')}
          </Button>
        </Space>
      }
    >
      <Card style={{ border: 'none' }}>
        <Form form={form} layout="vertical">
          <Form.Item
            name="key"
            label={t('variableKey')}
            rules={[{ required: true, message: tc('required') }]}
          >
            <Input placeholder="如 {变量名}" disabled={isEdit} />
          </Form.Item>
          <Form.Item
            name="name"
            label={t('variableName')}
            rules={[{ required: true, message: tc('required') }]}
          >
            <Input placeholder="如 合金牌号" />
          </Form.Item>
          <Form.Item name="scope" label={t('variableScope')}>
            <Input placeholder="如 物料/合金（多个用/分隔）" />
          </Form.Item>
          <Form.Item name="example" label={t('variableExample')}>
            <Input placeholder="如 3003" />
          </Form.Item>
          <Form.Item name="desc" label={t('variableDesc')}>
            <Input.TextArea rows={2} placeholder="变量说明" />
          </Form.Item>
        </Form>
      </Card>
    </Drawer>
  );
};

export default VariableDictDrawer;