import { App as AntApp, DatePicker, Form, Input, Modal, Select } from "antd";
import dayjs from "dayjs";
import { useEffect, useState } from "react";

import type { CreateMaterialRequest, Material, MaterialType } from "../types";

interface AddMaterialModalProps {
  onAdd: (body: CreateMaterialRequest) => Promise<Material>;
  onOpenChange: (open: boolean) => void;
  open: boolean;
}

interface FormValues {
  associatedDate: dayjs.Dayjs;
  description: string;
  materialType: MaterialType;
}

const MATERIAL_TYPE_OPTIONS = [
  { label: "通用", value: "general" },
  { label: "会议", value: "meeting" },
];

export function AddMaterialModal({ onAdd, onOpenChange, open }: AddMaterialModalProps) {
  const { message } = AntApp.useApp();
  const [form] = Form.useForm<FormValues>();
  const [submitting, setSubmitting] = useState(false);

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

  const handleFinish = async (values: FormValues) => {
    const body: CreateMaterialRequest = {
      associatedDate: values.associatedDate.format("YYYY-MM-DD"),
      description: values.description,
      materialType: values.materialType,
    };

    setSubmitting(true);
    try {
      await onAdd(body);
      message.success("素材已添加");
      onOpenChange(false);
    } catch (e: unknown) {
      message.error(`添加失败：${e instanceof Error ? e.message : "未知错误"}`);
    } finally {
      setSubmitting(false);
    }
  };

  return (
    <Modal
      confirmLoading={submitting}
      destroyOnHidden
      okText="确定"
      onCancel={() => onOpenChange(false)}
      onOk={() => void form.submit()}
      open={open}
      title="新增素材"
    >
      <Form
        form={form}
        initialValues={{ associatedDate: dayjs(), materialType: "general" as MaterialType }}
        layout="vertical"
        onFinish={(values) => void handleFinish(values)}
      >
        <Form.Item
          label="描述"
          name="description"
          rules={[{ message: "请输入描述", required: true, whitespace: true }]}
        >
          <Input.TextArea maxLength={500} placeholder="请输入素材描述" />
        </Form.Item>
        <Form.Item label="关联时间" name="associatedDate" rules={[{ message: "请选择关联时间", required: true }]}>
          <DatePicker className="app-inbox-datepicker" />
        </Form.Item>
        <Form.Item label="素材类型" name="materialType" rules={[{ message: "请选择素材类型", required: true }]}>
          <Select options={MATERIAL_TYPE_OPTIONS} />
        </Form.Item>
      </Form>
    </Modal>
  );
}