// 修改后的组件文件：src/pages/home/components/RagApplicationsTable.tsx
import React, { useState, useEffect } from 'react';
import { Table, Modal, Button } from 'antd';
import { 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 [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);

  // 获取知识库用量数据
  const onFetchOverviewKnowledgeData = async () => {
    try {
      const res: any = await fetchOverviewKnowledgeData({
        pageNum: currentPage,
        pageSize,
      });
      setLoading(false)
      if (res?.code === 200) {
        setKnowledgeBaseUsage(res.rows || []);
        setTotal(res.total || 0);
      }
    } catch (error) {
      console.error('获取知识库数据失败:', error);
    }
  };

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

  // 表格列定义 - RAG 应用列表
  const applicationColumns = [
        {
            title: '名称',
            dataIndex: 'knowledgeName',
            key: 'knowledgeName',
        },
        {
            title: '已使用',
            dataIndex: 'total',
            key: 'total',
            render: (text:any) => {
                if (text) {
                    const size = (text / 1024 / 1024).toFixed(2);
                    return `${size}M`;
                } else {
                    return '--'
                }
            }
        },

  ];
  // 打开详情弹窗
  const handleDetail = (appId: string) => {
    // setVisible(true);
  };

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

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

  return (
      <Modal
        title="知识库用量统计"
        open={visible}
        onCancel={handleCancel}
        footer={null}
        width={1200}
      >
        <div className="overflow-x-auto">
          <Table
            dataSource={knowledgeBaseUsage}
            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;