import React, { useState } from 'react';
import { Modal, Form, Input, message } from 'antd';

const { TextArea } = Input;

interface CreateKBDialogProps {
  open: boolean;
  onCancel: () => void;
  onCreate: (name: string, description?: string) => Promise<void>;
}

const CreateKBDialog: React.FC<CreateKBDialogProps> = ({
  open,
  onCancel,
  onCreate,
}) => {
  const [form] = Form.useForm();
  const [loading, setLoading] = useState(false);

  const handleOk = async () => {
    try {
      const values = await form.validateFields();
      setLoading(true);
      
      await onCreate(values.name, values.description);
      
      message.success('知识库创建成功！');
      form.resetFields();
      onCancel();
    } catch (error: any) {
      if (error.errorFields) {
        // 表单验证错误
        return;
      }
      message.error(error.message || '创建失败');
    } finally {
      setLoading(false);
    }
  };

  const handleCancel = () => {
    form.resetFields();
    onCancel();
  };

  return (
    <Modal
      title="创建知识库"
      open={open}
      onOk={handleOk}
      onCancel={handleCancel}
      okText="创建"
      cancelText="取消"
      confirmLoading={loading}
      destroyOnClose
    >
      <Form
        form={form}
        layout="vertical"
        autoComplete="off"
      >
        <Form.Item
          name="name"
          label="知识库名称"
          rules={[
            { required: true, message: '请输入知识库名称' },
            { max: 50, message: '名称不能超过50个字符' },
          ]}
        >
          <Input 
            placeholder="例如：文献综述资料" 
            maxLength={50}
            showCount
          />
        </Form.Item>

        <Form.Item
          name="description"
          label="描述（选填）"
          rules={[
            { max: 200, message: '描述不能超过200个字符' },
          ]}
        >
          <TextArea
            placeholder="简要描述该知识库的用途..."
            rows={4}
            maxLength={200}
            showCount
          />
        </Form.Item>

        <div style={{ 
          padding: 12, 
          background: '#f0f5ff', 
          borderRadius: 4,
          fontSize: 13,
          color: '#595959'
        }}>
          <p style={{ margin: 0, marginBottom: 8 }}>
            📌 <strong>提示</strong>
          </p>
          <ul style={{ margin: 0, paddingLeft: 20 }}>
            <li>每个用户最多创建 3 个知识库</li>
            <li>每个知识库最多上传 50 个文档</li>
            <li>支持的文件格式：PDF、DOC、DOCX、TXT、MD</li>
            <li>单个文件最大10MB</li>
          </ul>
        </div>
      </Form>
    </Modal>
  );
};

export default CreateKBDialog;