import { useCallback, useEffect, useState } from 'react';
import {
  Card,
  Table,
  Button,
  Space,
  Modal,
  Form,
  Input,
  Select,
  Switch,
  message,
  Popconfirm,
  Tag,
  Upload,
  Progress,
  Drawer,
  List,
  Empty,
} from 'antd';
import {
  PlusOutlined,
  DeleteOutlined,
  UploadOutlined,
  SearchOutlined,
  FileTextOutlined,
  DatabaseOutlined,
} from '@ant-design/icons';
import type { UploadFile } from 'antd/es/upload/interface';
import {
  knowledgeV2Api,
  type KnowledgeBase,
  type KnowledgeDocument,
  type SearchHit,
  type CreateKnowledgeBaseReq,
} from '../../api/ai/knowledgeV2';

const KB_TYPES = [
  { label: '临床指南', value: 'clinical_guide' },
  { label: '操作规程', value: 'sop' },
  { label: 'FAQ', value: 'faq' },
  { label: '产品知识', value: 'product' },
  { label: '通用', value: 'general' },
];

export default function KnowledgeV2Page() {
  const [kbs, setKbs] = useState<KnowledgeBase[]>([]);
  const [total, setTotal] = useState(0);
  const [page, setPage] = useState(1);
  const [loading, setLoading] = useState(false);
  const [createModalOpen, setCreateModalOpen] = useState(false);
  const [editKb, setEditKb] = useState<KnowledgeBase | null>(null);
  const [form] = Form.useForm();

  // Document drawer state
  const [docDrawerKb, setDocDrawerKb] = useState<KnowledgeBase | null>(null);
  const [docs, setDocs] = useState<KnowledgeDocument[]>([]);
  const [docsLoading, setDocsLoading] = useState(false);
  const [uploadModalOpen, setUploadModalOpen] = useState(false);
  const [uploadKbId, setUploadKbId] = useState<string>('');
  const [fileList, setFileList] = useState<UploadFile[]>([]);

  // Hit test state
  const [hitTestKb, setHitTestKb] = useState<KnowledgeBase | null>(null);
  const [hitTestQuery, setHitTestQuery] = useState('');
  const [hitResults, setHitResults] = useState<SearchHit[]>([]);
  const [hitTestLoading, setHitTestLoading] = useState(false);

  const loadKbs = useCallback(async () => {
    setLoading(true);
    try {
      const res = await knowledgeV2Api.listKnowledgeBases({
        page,
        page_size: 20,
      });
      setKbs(res.data);
      setTotal(res.total);
    } catch {
      message.error('加载知识库列表失败');
    } finally {
      setLoading(false);
    }
  }, [page]);

  useEffect(() => {
    loadKbs();
  }, [loadKbs]);

  const handleCreate = async () => {
    try {
      const values = await form.validateFields();
      const req: CreateKnowledgeBaseReq = {
        name: values.name,
        kb_type: values.kb_type,
        description: values.description,
        is_enabled: values.is_enabled ?? true,
      };
      await knowledgeV2Api.createKnowledgeBase(req);
      message.success('知识库创建成功');
      setCreateModalOpen(false);
      form.resetFields();
      loadKbs();
    } catch {
      // validation error
    }
  };

  const handleUpdate = async () => {
    if (!editKb) return;
    try {
      const values = await form.validateFields();
      await knowledgeV2Api.updateKnowledgeBase(editKb.id, {
        name: values.name,
        kb_type: values.kb_type,
        description: values.description,
        is_enabled: values.is_enabled,
      });
      message.success('知识库更新成功');
      setEditKb(null);
      form.resetFields();
      loadKbs();
    } catch {
      // validation error
    }
  };

  const handleDelete = async (id: string) => {
    try {
      await knowledgeV2Api.deleteKnowledgeBase(id);
      message.success('知识库已删除');
      loadKbs();
    } catch {
      message.error('删除失败');
    }
  };

  const loadDocuments = async (kb: KnowledgeBase) => {
    setDocDrawerKb(kb);
    setDocsLoading(true);
    try {
      const res = await knowledgeV2Api.listDocuments(kb.id, {
        page: 1,
        page_size: 50,
      });
      setDocs(res.data);
    } catch {
      message.error('加载文档列表失败');
    } finally {
      setDocsLoading(false);
    }
  };

  const handleUpload = async () => {
    if (!uploadKbId || fileList.length === 0) return;
    try {
      const file = fileList[0].originFileObj;
      if (!file) return;
      await knowledgeV2Api.uploadDocument(uploadKbId, file);
      message.success('文档上传成功，正在处理...');
      setUploadModalOpen(false);
      setFileList([]);
      if (docDrawerKb) {
        loadDocuments(docDrawerKb);
      }
    } catch {
      message.error('上传失败');
    }
  };

  const handleDeleteDoc = async (kbId: string, docId: string) => {
    try {
      await knowledgeV2Api.deleteDocument(kbId, docId);
      message.success('文档已删除');
      if (docDrawerKb) {
        loadDocuments(docDrawerKb);
      }
    } catch {
      message.error('删除失败');
    }
  };

  const handleHitTest = async () => {
    if (!hitTestKb || !hitTestQuery.trim()) return;
    setHitTestLoading(true);
    try {
      const res = await knowledgeV2Api.hitTest(hitTestKb.id, hitTestQuery, 5);
      setHitResults(res.hits);
    } catch {
      message.error('搜索失败');
      setHitResults([]);
    } finally {
      setHitTestLoading(false);
    }
  };

  const statusTag = (status: string) => {
    const map: Record<string, { color: string; label: string }> = {
      pending: { color: 'default', label: '待处理' },
      processing: { color: 'processing', label: '处理中' },
      completed: { color: 'success', label: '已完成' },
      failed: { color: 'error', label: '失败' },
    };
    const info = map[status] || { color: 'default', label: status };
    return <Tag color={info.color}>{info.label}</Tag>;
  };

  const kbColumns = [
    {
      title: '名称',
      dataIndex: 'name',
      key: 'name',
      render: (name: string, record: KnowledgeBase) => (
        <Button type="link" onClick={() => loadDocuments(record)}>
          {name}
        </Button>
      ),
    },
    {
      title: '类型',
      dataIndex: 'kb_type',
      key: 'kb_type',
      render: (type: string) => {
        const found = KB_TYPES.find((t) => t.value === type);
        return found?.label || type;
      },
    },
    {
      title: '文档数',
      dataIndex: 'document_count',
      key: 'document_count',
      width: 90,
    },
    {
      title: '切片数',
      dataIndex: 'chunk_count',
      key: 'chunk_count',
      width: 90,
    },
    {
      title: '状态',
      dataIndex: 'is_enabled',
      key: 'is_enabled',
      width: 80,
      render: (v: boolean) => (
        <Tag color={v ? 'green' : 'red'}>{v ? '启用' : '禁用'}</Tag>
      ),
    },
    {
      title: '创建时间',
      dataIndex: 'created_at',
      key: 'created_at',
      width: 170,
      render: (v: string) => new Date(v).toLocaleString('zh-CN'),
    },
    {
      title: '操作',
      key: 'actions',
      width: 240,
      render: (_: unknown, record: KnowledgeBase) => (
        <Space size="small">
          <Button
            size="small"
            icon={<UploadOutlined />}
            onClick={() => {
              setUploadKbId(record.id);
              setUploadModalOpen(true);
            }}
          >
            上传
          </Button>
          <Button
            size="small"
            icon={<SearchOutlined />}
            onClick={() => {
              setHitTestKb(record);
              setHitResults([]);
              setHitTestQuery('');
            }}
          >
            搜索测试
          </Button>
          <Button
            size="small"
            onClick={() => {
              setEditKb(record);
              form.setFieldsValue({
                name: record.name,
                kb_type: record.kb_type,
                description: record.description,
                is_enabled: record.is_enabled,
              });
            }}
          >
            编辑
          </Button>
          <Popconfirm
            title="确定删除此知识库？"
            onConfirm={() => handleDelete(record.id)}
          >
            <Button size="small" danger icon={<DeleteOutlined />} />
          </Popconfirm>
        </Space>
      ),
    },
  ];

  const kbFormContent = (
    <Form form={form} layout="vertical">
      <Form.Item
        name="name"
        label="知识库名称"
        rules={[{ required: true, message: '请输入知识库名称' }]}
      >
        <Input placeholder="例：高血压临床指南" />
      </Form.Item>
      <Form.Item
        name="kb_type"
        label="知识库类型"
        rules={[{ required: true, message: '请选择类型' }]}
      >
        <Select options={KB_TYPES} placeholder="选择类型" />
      </Form.Item>
      <Form.Item name="description" label="描述">
        <Input.TextArea rows={3} placeholder="知识库描述（可选）" />
      </Form.Item>
      <Form.Item name="is_enabled" label="启用" valuePropName="checked">
        <Switch defaultChecked />
      </Form.Item>
    </Form>
  );

  const docColumns = [
    {
      title: '标题',
      dataIndex: 'title',
      key: 'title',
      ellipsis: true,
    },
    {
      title: '类型',
      dataIndex: 'doc_type',
      key: 'doc_type',
      width: 80,
    },
    {
      title: '来源',
      dataIndex: 'source_type',
      key: 'source_type',
      width: 80,
      render: (v: string) => <Tag>{v === 'upload' ? '上传' : '手动'}</Tag>,
    },
    {
      title: '状态',
      dataIndex: 'status',
      key: 'status',
      width: 90,
      render: statusTag,
    },
    {
      title: '切片/嵌入',
      key: 'progress',
      width: 130,
      render: (_: unknown, record: KnowledgeDocument) => {
        if (record.chunk_count === 0) return '-';
        const pct = Math.round(
          (record.embedded_count / record.chunk_count) * 100,
        );
        return <Progress percent={pct} size="small" />;
      },
    },
    {
      title: '操作',
      key: 'actions',
      width: 70,
      render: (_: unknown, record: KnowledgeDocument) => (
        <Popconfirm
          title="确定删除此文档？"
          onConfirm={() =>
            handleDeleteDoc(record.knowledge_base_id, record.id)
          }
        >
          <Button size="small" danger icon={<DeleteOutlined />} />
        </Popconfirm>
      ),
    },
  ];

  return (
    <div style={{ padding: 24 }}>
      <Card
        title={
          <Space>
            <DatabaseOutlined />
            知识库管理 V2
          </Space>
        }
        extra={
          <Button
            type="primary"
            icon={<PlusOutlined />}
            onClick={() => {
              form.resetFields();
              setCreateModalOpen(true);
            }}
          >
            新建知识库
          </Button>
        }
      >
        <Table
          rowKey="id"
          columns={kbColumns}
          dataSource={kbs}
          loading={loading}
          pagination={{
            current: page,
            total,
            pageSize: 20,
            onChange: setPage,
            showTotal: (t) => `共 ${t} 条`,
          }}
        />
      </Card>

      {/* 创建知识库 Modal */}
      <Modal
        title="新建知识库"
        open={createModalOpen}
        onOk={handleCreate}
        onCancel={() => {
          setCreateModalOpen(false);
          form.resetFields();
        }}
        okText="创建"
      >
        {kbFormContent}
      </Modal>

      {/* 编辑知识库 Modal */}
      <Modal
        title="编辑知识库"
        open={!!editKb}
        onOk={handleUpdate}
        onCancel={() => {
          setEditKb(null);
          form.resetFields();
        }}
        okText="保存"
      >
        {kbFormContent}
      </Modal>

      {/* 文档列表 Drawer */}
      <Drawer
        title={
          docDrawerKb
            ? `${docDrawerKb.name} — 文档列表`
            : '文档列表'
        }
        open={!!docDrawerKb}
        onClose={() => setDocDrawerKb(null)}
        width={720}
      >
        <Table
          rowKey="id"
          columns={docColumns}
          dataSource={docs}
          loading={docsLoading}
          pagination={false}
          size="small"
          locale={{ emptyText: <Empty description="暂无文档" /> }}
        />
      </Drawer>

      {/* 上传文档 Modal */}
      <Modal
        title="上传文档"
        open={uploadModalOpen}
        onOk={handleUpload}
        onCancel={() => {
          setUploadModalOpen(false);
          setFileList([]);
        }}
        okText="上传"
      >
        <Upload
          beforeUpload={() => false}
          maxCount={1}
          fileList={fileList}
          onChange={({ fileList: fl }) => setFileList(fl)}
          accept=".pdf,.txt,.md,.docx,.xlsx"
        >
          <Button icon={<UploadOutlined />}>选择文件</Button>
        </Upload>
        <div style={{ marginTop: 8, color: '#999', fontSize: 12 }}>
          支持 PDF、TXT、Markdown、DOCX、XLSX，最大 20MB
        </div>
      </Modal>

      {/* Hit Test Drawer */}
      <Drawer
        title={
          hitTestKb ? `${hitTestKb.name} — 向量搜索测试` : '搜索测试'
        }
        open={!!hitTestKb}
        onClose={() => {
          setHitTestKb(null);
          setHitResults([]);
        }}
        width={600}
      >
        <Space.Compact style={{ width: '100%', marginBottom: 16 }}>
          <Input
            placeholder="输入搜索文本..."
            value={hitTestQuery}
            onChange={(e) => setHitTestQuery(e.target.value)}
            onPressEnter={handleHitTest}
          />
          <Button
            type="primary"
            icon={<SearchOutlined />}
            loading={hitTestLoading}
            onClick={handleHitTest}
          >
            搜索
          </Button>
        </Space.Compact>

        <List
          dataSource={hitResults}
          locale={{ emptyText: <Empty description="输入查询后点击搜索" /> }}
          renderItem={(item) => (
            <List.Item key={item.chunk_id}>
              <List.Item.Meta
                avatar={
                  <FileTextOutlined style={{ fontSize: 20, color: '#1890ff' }} />
                }
                title={
                  <Space>
                    <span>{item.doc_title}</span>
                    <Tag color="blue">切片 #{item.chunk_index}</Tag>
                    <Tag color="green">
                      相似度 {(item.similarity * 100).toFixed(1)}%
                    </Tag>
                  </Space>
                }
                description={
                  <div
                    style={{
                      maxHeight: 120,
                      overflow: 'hidden',
                      textOverflow: 'ellipsis',
                      color: '#666',
                    }}
                  >
                    {item.content}
                  </div>
                }
              />
            </List.Item>
          )}
        />
      </Drawer>
    </div>
  );
}