import { useEffect, useRef, useState } from 'react';
import {
  Drawer,
  Form,
  Input,
  InputNumber,
  Select,
  Button,
  Space,
  Row,
  Col,
  Tag,
  Card,
  App,
} from 'antd';
import { useTranslation } from 'react-i18next';
import { getCodeRule, createCodeRule, updateCodeRule } from '@/api/mdm/coding-system';
import type { CodeRuleVO, CodeRuleSaveParams } from '@/types/mdm/coding-system';
import { CODING_SCOPE_OPTIONS } from '@/types/mdm/coding-system';

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

const VARIABLE_TAGS = [
  '{PREFIX}', '{YYYY}', '{YY}', '{MM}', '{DD}', '{长度:N}',
  '{合金牌号}', '{状态代号}', '{厚度}', '{宽度}', '{用途}',
  '{基地}', '{车间}', '{Region}', '{合金系数字}', '{业务码}',
];

const CodeRuleDrawer: React.FC<CodeRuleDrawerProps> = ({ 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<CodeRuleVO>>({});

  useEffect(() => {
    if (!open) return;
    form.resetFields();
    originData.current = {};
    if (id != null) {
      getCodeRule(id).then(({ data }) => {
        originData.current = { ...data };
        form.setFieldsValue(data);
      });
    } else {
      form.setFieldsValue({ separator: '-', resetCycle: '永不', maxSeq: 999999, length: 20 });
    }
  }, [open, id, form]);

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

  const insertVariable = (v: string) => {
    const current = form.getFieldValue('pattern') || '';
    form.setFieldsValue({ pattern: current + v });
  };

  return (
    <Drawer
      title={isEdit ? tc('edit') : tc('create')}
      open={open}
      onClose={onClose}
      destroyOnHidden={true}
      size={'30%'}
      closable={{ placement: 'end' }}
      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">
          <Row gutter={16}>
            <Col span={12}>
              <Form.Item
                name="ruleCode"
                label={t('ruleCode')}
                rules={[{ required: true, message: tc('required') }]}
              >
                <Input placeholder={t('ruleCodePlaceholder')} disabled={isEdit} />
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item
                name="ruleName"
                label={t('ruleName')}
                rules={[{ required: true, message: tc('required') }]}
              >
                <Input placeholder={t('ruleNamePlaceholder')} />
              </Form.Item>
            </Col>
          </Row>
          <Row gutter={16}>
            <Col span={12}>
              <Form.Item
                name="scope"
                label={t('scope')}
                rules={[{ required: true, message: tc('required') }]}
              >
                <Select
                  placeholder={t('scopePlaceholder')}
                  disabled={isEdit}
                  options={CODING_SCOPE_OPTIONS.map((s) => ({ label: s, value: s }))}
                />
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item
                name="prefix"
                label={t('prefix')}
                rules={[{ required: true, message: tc('required') }]}
              >
                <Input placeholder={t('prefixPlaceholder')} />
              </Form.Item>
            </Col>
          </Row>
          <Row gutter={16}>
            <Col span={24}>
              <Form.Item
                name="pattern"
                label={t('formatPattern')}
                rules={[{ required: true, message: tc('required') }]}
              >
                <Input placeholder={t('formatPatternPlaceholder')} />
              </Form.Item>
            </Col>
          </Row>
          <div style={{ padding: '8px 12px', marginBottom: 16, background: '#f5f5f5', borderRadius: 6 }}>
            <Space wrap>
              {VARIABLE_TAGS.map((v) => (
                <Tag
                  key={v}
                  color="blue"
                  style={{ cursor: 'pointer' }}
                  onClick={() => insertVariable(v)}
                >
                  {v}
                </Tag>
              ))}
            </Space>
          </div>
          <Row gutter={16}>
            <Col span={12}>
              <Form.Item name="separator" label={t('separator')}>
                <Input placeholder={t('separatorPlaceholder')} />
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item
                name="length"
                label={t('length')}
                rules={[{ required: true, message: tc('required') }]}
              >
                <InputNumber min={1} max={100} style={{ width: '100%' }} />
              </Form.Item>
            </Col>
          </Row>
          <Row gutter={16}>
            <Col span={12}>
              <Form.Item
                name="maxSeq"
                label={t('maxSeq')}
                rules={[{ required: true, message: tc('required') }]}
              >
                <InputNumber min={1} style={{ width: '100%' }} />
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item
                name="resetCycle"
                label={t('resetCycle')}
                rules={[{ required: true, message: tc('required') }]}
              >
                <Select
                  options={['按日', '按月', '按年', '永不'].map((s) => ({
                    label: (t('seqCycle') as unknown as Record<string, string>)[s] || s,
                    value: s,
                  }))}
                />
              </Form.Item>
            </Col>
          </Row>
          <Row gutter={16}>
            <Col span={24}>
              <Form.Item name="description" label={t('description')}>
                <Input.TextArea rows={2} placeholder={t('descriptionPlaceholder')} maxLength={500} showCount />
              </Form.Item>
            </Col>
          </Row>
        </Form>
      </Card>
    </Drawer>
  );
};

export default CodeRuleDrawer;