/**
 * 线索编辑表单 — Modal 内的 Form。
 *
 * - category Select（6 值枚举）
 * - summary Input（必填，最长 200 字符，showCount）
 * - detail TextArea（可选）
 * - Props: visible, clue（编辑时传入现有数据）, onSubmit, onCancel
 */

import React, { useEffect } from "react";
import { Modal, Form, Select, Input } from "antd";

/* ------------------------------------------------------------------ */
/*  线索大类枚举                                                       */
/* ------------------------------------------------------------------ */

export const CLUE_CATEGORY_OPTIONS = [
  { label: "客户基础", value: "customer_basic" },
  { label: "消费习惯", value: "consumption_habit" },
  { label: "玩法偏好", value: "play_preference" },
  { label: "促销偏好", value: "promotion_preference" },
  { label: "社交关系", value: "social_relation" },
  { label: "重要反馈", value: "important_feedback" },
];

export const CATEGORY_LABEL: Record<string, string> = {
  customer_basic: "客户基础",
  consumption_habit: "消费习惯",
  play_preference: "玩法偏好",
  promotion_preference: "促销偏好",
  social_relation: "社交关系",
  important_feedback: "重要反馈",
};

/* ------------------------------------------------------------------ */
/*  类型                                                               */
/* ------------------------------------------------------------------ */

export interface ClueFormValues {
  category: string;
  summary: string;
  detail?: string;
}

export interface ClueData {
  id: number;
  category: string;
  summary: string;
  detail?: string | null;
}

interface ClueEditorProps {
  visible: boolean;
  clue: ClueData | null;
  onSubmit: (values: ClueFormValues) => Promise<void>;
  onCancel: () => void;
}

/* ------------------------------------------------------------------ */
/*  组件                                                               */
/* ------------------------------------------------------------------ */

const ClueEditor: React.FC<ClueEditorProps> = ({ visible, clue, onSubmit, onCancel }) => {
  const [form] = Form.useForm<ClueFormValues>();
  const [submitting, setSubmitting] = React.useState(false);

  useEffect(() => {
    if (visible && clue) {
      form.setFieldsValue({
        category: clue.category,
        summary: clue.summary,
        detail: clue.detail ?? undefined,
      });
    } else if (visible) {
      form.resetFields();
    }
  }, [visible, clue, form]);

  const handleOk = async () => {
    try {
      const values = await form.validateFields();
      setSubmitting(true);
      await onSubmit(values);
      form.resetFields();
    } catch {
      // validateFields 失败，不需要额外处理
    } finally {
      setSubmitting(false);
    }
  };

  return (
    <Modal
      title={clue ? "编辑线索" : "新建线索"}
      open={visible}
      onCancel={onCancel}
      onOk={handleOk}
      confirmLoading={submitting}
      okText="保存"
      cancelText="取消"
      destroyOnClose
      width={520}
    >
      <Form form={form} layout="vertical">
        <Form.Item
          name="category"
          label="大类标签"
          rules={[{ required: true, message: "请选择大类标签" }]}
        >
          <Select placeholder="选择大类标签" options={CLUE_CATEGORY_OPTIONS} />
        </Form.Item>
        <Form.Item
          name="summary"
          label="摘要"
          rules={[
            { required: true, message: "请输入摘要" },
            { max: 200, message: "摘要不能超过 200 字符" },
          ]}
        >
          <Input placeholder="请输入摘要" maxLength={200} showCount />
        </Form.Item>
        <Form.Item name="detail" label="详情">
          <Input.TextArea rows={4} placeholder="请输入详情（可选）" />
        </Form.Item>
      </Form>
    </Modal>
  );
};

export default ClueEditor;
