import { useEffect, useState } from "react";
import {
  Drawer,
  Form,
  Input,
  DatePicker,
  Select,
  Button,
  Space,
  Card,
  App,
} from "antd";
import { useTranslation } from "react-i18next";
import { createCodeMapping } from "@/api/mdm/coding-system";
import { CODING_SCOPE_OPTIONS } from "@/types/mdm/coding-system";

interface CodeMappingDrawerProps {
  open: boolean;
  onSuccess: () => void;
  onClose: () => void;
}

const CodeMappingDrawer: React.FC<CodeMappingDrawerProps> = ({ open, 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);

  useEffect(() => {
    if (open) form.resetFields();
  }, [open, form]);

  const handleOk = async () => {
    let values;
    try {
      values = await form.validateFields();
    } catch {
      return;
    }
    setConfirmLoading(true);
    try {
      await createCodeMapping({
        ...values,
        effectDate: values.effectDate.format("YYYY-MM-DD"),
        expireDate: values.expireDate ? values.expireDate.format("YYYY-MM-DD") : undefined,
      });
      message.success(t("saveSuccess"));
      onSuccess();
    } catch (err) {
      message.error((err as Error).message || tc("fail"));
    } finally {
      setConfirmLoading(false);
    }
  };

  return (
    <Drawer
      title={t("mappingCreate")}
      open={open}
      onClose={onClose}
      destroyOnHidden={true}
      size={'15%'}
      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">
          <Form.Item
            name="oldCode"
            label={t("oldCode")}
            rules={[{ required: true, message: tc("required") }]}
          >
            <Input placeholder="如 OLD-AL-3003-001" />
          </Form.Item>
          <Form.Item
            name="newCode"
            label={t("newCode")}
            rules={[{ required: true, message: tc("required") }]}
          >
            <Input placeholder="如 MAT-3003-H14-0.4x1200-T" />
          </Form.Item>
          <Form.Item
            name="entityType"
            label={t("entityType")}
            rules={[{ required: true, message: tc("required") }]}
          >
            <Select
              options={CODING_SCOPE_OPTIONS.map((s) => ({ label: s, value: s }))}
            />
          </Form.Item>
          <Form.Item
            name="effectDate"
            label={t("effectDate")}
            rules={[{ required: true, message: tc("required") }]}
          >
            <DatePicker style={{ width: "100%" }} />
          </Form.Item>
          <Form.Item name="expireDate" label={t("expireDate")}>
            <DatePicker style={{ width: "100%" }} />
          </Form.Item>
          <Form.Item name="reason" label={t("reason")}>
            <Input placeholder="如 编码体系升级迁移" />
          </Form.Item>
        </Form>
      </Card>
    </Drawer>
  );
};

export default CodeMappingDrawer;