import { Form, Input, Modal, Select } from 'antd';
import type { FormInstance } from 'antd';
import type { PromptTemplate } from '../../../api';
import { CATEGORIES } from '../constants';

export default function PromptTemplateEditorModal(props: {
  open: boolean;
  editing: PromptTemplate | null;
  form: FormInstance;
  onCancel: () => void;
  onOk: () => void;
}) {
  const { open, editing, form, onCancel, onOk } = props;

  return (
    <Modal
      open={open}
      title={editing ? '编辑模板' : '新建模板'}
      onCancel={onCancel}
      onOk={onOk}
      width={680}
      okText="保存"
      cancelText="取消"
      destroyOnHidden
    >
      <Form form={form} layout="vertical">
        <Form.Item name="title" label="标题" rules={[{ required: true, max: 60 }]}>
          <Input placeholder="例如：技术博客润色助手" />
        </Form.Item>
        <Form.Item name="category" label="分类">
          <Select>
            {CATEGORIES.map((c) => (
              <Select.Option key={c} value={c}>
                {c}
              </Select.Option>
            ))}
          </Select>
        </Form.Item>
        <Form.Item
          name="body"
          label="模板正文（支持 {{变量名}} 占位符）"
          rules={[{ required: true }]}
          tooltip="使用时会以此内容作为消息输入；目前为简单复制，后续可加变量填充表单"
        >
          <Input.TextArea rows={10} placeholder={'你是一个 {{role}}，请帮我...'} />
        </Form.Item>
        <Form.Item name="visibility" label="可见性">
          <Select>
            <Select.Option value="private">仅自己（默认）</Select.Option>
            <Select.Option value="public">公开（所有用户可见）</Select.Option>
          </Select>
        </Form.Item>
      </Form>
    </Modal>
  );
}

