// 修改后的组件文件：src/pages/home/components/RagApplicationsTable.tsx
import React, { useState, useEffect } from 'react';
import { Table, Modal, Button } from 'antd';
import { fetchOverviewAppDetailData, fetchOverviewKnowledgeData } from '@/apis/index';

interface RagApplication {
  appId: string;
  appName: string;
  department: string;
  totalNum: number;
  costTime: number;
  tokenCount: number;
  loyalty: number;
  answerAccuracy: number;
  answerRelevance: number;
  contextPrecision: number;
  contextRecall: number;
}

interface KnowledgeBaseUsage {
  knowledgeId: string;
  knowledgeName: string;
  used: string;
  capacity: string;
  updatedAt: string;
  warning?: string;
}
interface RagApplicationsModelProps {
  visible: boolean;
  onCancel: () => void;
}
const RagApplicationsModel: React.FC<RagApplicationsModelProps> = (props) => {
  
  const { visible, onCancel } = props;
    
  const [applicationsData, setApplicationsData] = useState<RagApplication[]>([]);
  const [knowledgeBaseUsage, setKnowledgeBaseUsage] = useState<KnowledgeBaseUsage[]>([]);
  const [loading, setLoading] = useState<boolean>(true);
//   const [visible, setVisible] = useState<boolean>(true);
  const [currentPage, setCurrentPage] = useState<number>(1);
  const [pageSize, setPageSize] = useState<number>(8);
  const [total, setTotal] = useState<number>(0);

  // 获取 RAG 应用数据
  const onFetchOverviewAppData = async () => {
    try {
      setLoading(true);
      const res: any = await fetchOverviewAppDetailData({
        pageNum: currentPage,
        pageSize,
      });
      if (res?.code === 200) {
        setApplicationsData([])
        setApplicationsData(res.rows || []);
        setTotal(res.total || 0);
      }
    } catch (error) {
      console.error('获取应用数据失败:', error);
    } finally {
      setLoading(false);
    }
  };

  // 分页变化时重新获取数据
  useEffect(() => {
    onFetchOverviewAppData();
  }, [currentPage, pageSize]);

  // 表格列定义 - RAG 应用列表
  const applicationColumns = [
    {
      title: '应用名称',
      dataIndex: 'appName',
      key: 'appName',
      render: (text: string, record: RagApplication) => (
        <div className="flex items-center">
          <span>{text}</span>
        </div>
      ),
    },
    {
      title: '调用次数/天',
      dataIndex: 'totalNum',
      key: 'totalNum',
      render: (text: number) => text.toLocaleString(),
    },
    {
      title: '平均检索时长',
      dataIndex: 'costTime',
      key: 'costTime',
    },
    {
      title: '忠诚度',
      dataIndex: 'answerLoyalty',
      key: 'answerLoyalty',
    },
    {
      title: '答案正确的',
      dataIndex: 'correctAnswer',
      key: 'correctAnswer',
    },
    {
      title: '答案相关性',
      dataIndex: 'answerRelevance',
      key: 'answerRelevance',
    },
    {
      title: '噪声敏感度',
      dataIndex: 'noiseSensitivity',
      key: 'noiseSensitivity',
    },
    {
      title: '上下文召回度',
      dataIndex: 'contextRecall',
      key: 'contextRecall',
    },
    {
      title: '上下文相关性',
      dataIndex: 'contextRelevance',
      key: 'contextRelevance',
    },
  ];
  // 打开详情弹窗
  const handleDetail = (appId: string) => {
    // setVisible(true);
  };

  // 关闭详情弹窗
  const handleCancel = () => {
    onCancel()
  };

  // 分页变更处理
  const handleTableChange = (pagination: any) => {
    setCurrentPage(pagination.current);
    setPageSize(pagination.pageSize);
  };

  return (
      <Modal
        title="RAG应用列表"
        open={visible}
        onCancel={handleCancel}
        footer={null}
        width={1200}
      >
        <div className="overflow-x-auto">
          <Table
            dataSource={applicationsData}
            columns={applicationColumns}
            rowKey="appId"
            pagination={{
              current: currentPage,
              pageSize,
              total,
              showSizeChanger: true,
              showTotal: (total) => `共 ${total} 条记录`,
              onChange: (page, pageSize) => {
                setCurrentPage(page);
                setPageSize(pageSize);
              },
            }}
            loading={loading}
            scroll={{ x: 'max-content' }}
          />
        </div>
      </Modal>
  );
};

export default RagApplicationsModel;