// 修改后的组件文件：src/pages/home/components/RagApplicationsTable.tsx
import React,{useState,useEffect} from 'react';
import { Table } from 'antd';
import {fetchOverviewAppData,fetchOverviewKnowledgeData} from '@/apis/index';
interface RagApplication {
    name: string;
    department: string;
    callCount: number;
    avgResponseTime: number;
}

interface KnowledgeBaseUsage {
    department: string;
    used: string;
    capacity: string;
    updatedAt: string;
    warning?: string;
}

const RagApplicationsTable: React.FC<{
    applications?: RagApplication[];
    knowledgeBaseUsage?: KnowledgeBaseUsage[],
    onOpenApp: () => void;
    onOpenKnow: () => void;
}> = (props) => {
    const {onOpenApp,onOpenKnow} = props
    const [applicationsData, setApplicationsData] = useState<RagApplication[]>([]);
    const [knowledgeBaseUsage, setKnowledgeBaseUsage] = useState<KnowledgeBaseUsage[]>([]);
    const onFetchOverviewAppData = async () => {
        const res:any = await fetchOverviewAppData({});
        if(res?.code === 200){
            setApplicationsData(res.data||[]);
        }
    }

    const onFetchOverviewKnowledgeData = async () => {
        const res:any = await fetchOverviewKnowledgeData({
            pageNum: 1,
            pageSize: 5,
        });
        if(res?.code === 200){
            setKnowledgeBaseUsage(res.rows||[]);
        }
    }


    useEffect(()=>{
        onFetchOverviewAppData()
        onFetchOverviewKnowledgeData()
    },[])






    const columns = [
        {
            title: '应用名称',
            dataIndex: 'appName',
            key: 'appId',
        },
        {
            title: '调用次数',
            dataIndex: 'totalNum',
            key: 'appId',
            render: (text: number) => text.toLocaleString(),
        },
        {
            title: '平均响应时间',
            dataIndex: 'costTime',
            key: 'costTime',
            render: (text: number) => text?`${text}ms`:'-',
        },
        {
            title: '输入token',
            key: 'inputTokenCount',
            dataIndex: 'inputTokenCount',
        },
        {
            title: '输出token',
            key: 'outputTokenCount',
            dataIndex: 'outputTokenCount',
        },
    ];

    const knowledgeBaseColumns = [
        {
            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 '--'
                }
            }
        },
    ];

    return (
        <div className="bg-white rounded-lg shadow-sm border p-2">
            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                {/* RAG应用列表表格 */}
                <div className="pr-2">
                    <div className="flex justify-between items-center mb-4">
                        <p className="text-[14px] font-semibold">RAG应用列表表格</p>
                        <p className="text-blue-600 cursor-pointer hover:text-blue-800 text-sm" onClick={()=>{
                            onOpenApp()
                        }}>所有</p>
                    </div>
                    <Table dataSource={applicationsData} rowKey="appId" columns={columns} pagination={false} />
                </div>
                {/* 知识库用量统计表格 */}
                <div className="pl-2">
                    <div className="flex justify-between items-center mb-4">
                        <p className="text-[14px] font-semibold">知识库用量统计</p>
                        <p className="text-blue-600 cursor-pointer hover:text-blue-800 text-sm" onClick={()=>{
                            onOpenKnow()
                        }}>所有</p>
                    </div>
                    <Table dataSource={knowledgeBaseUsage} rowKey="knowledgeId" columns={knowledgeBaseColumns} pagination={false} />
                </div>
            </div>
        </div>
    );
};

export default RagApplicationsTable;