TERES_web_frontend/src/pages/knowledge/detail.tsx

import React, { useState, useEffect, useRef } from 'react';
import { useParams, useNavigate } from 'react-router-dom';
import {
  Box,
  Typography,
  LinearProgress,
  Alert,
  Dialog,
  DialogTitle,
  DialogContent,
  DialogActions,
  Button,
  TextField,
  Breadcrumbs,
  Link,
  Stack,
  Card,
  CardContent,
  Divider,
  Chip,
  Tabs,
  Tab,
} from '@mui/material';
import { type GridRowSelectionModel } from '@mui/x-data-grid';
import type { IKnowledge, IKnowledgeFile } from '@/interfaces/database/knowledge';
import type { IDocumentInfoFilter } from '@/interfaces/database/document';
import FileUploadDialog from '@/components/FileUploadDialog';
import KnowledgeInfoCard from './components/KnowledgeInfoCard';
import DocumentListComponent from './components/DocumentListComponent';
import FloatingActionButtons from './components/FloatingActionButtons';
import KnowledgeBreadcrumbs from './components/KnowledgeBreadcrumbs';
import KnowledgeGraphView from './components/KnowledgeGraphView';
import { useDocumentList, useDocumentOperations } from '@/hooks/document-hooks';
import { RUNNING_STATUS_KEYS } from '@/constants/knowledge';
import { useKnowledgeDetail } from '@/hooks/knowledge-hooks';
import logger from '@/utils/logger';

function KnowledgeBaseDetail() {
  const { id } = useParams<{ id: string }>();
  const navigate = useNavigate();

  // 状态管理
  const [error, setError] = useState<string | null>(null);
  const [searchKeyword, setSearchKeyword] = useState('');
  const [rowSelectionModel, setRowSelectionModel] = useState<GridRowSelectionModel>({
    type: 'include',
    ids: new Set()
  });
  const [uploadDialogOpen, setUploadDialogOpen] = useState(false);
  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);

  const [processDetailsDialogOpen, setProcessDetailsDialogOpen] = useState(false);
  const [selectedFileDetails, setSelectedFileDetails] = useState<IKnowledgeFile | null>(null);

  // 标签页状态
  const [currentTab, setCurrentTab] = useState(0);

  // 轮询相关状态
  const pollingIntervalRef = useRef<any>(null);
  const [isPolling, setIsPolling] = useState(false);

  // documents filter 
  const [documentsFilter, setDocumentsFilter] = useState<IDocumentInfoFilter | undefined>(undefined);

  const {
    knowledge: knowledgeBase,
    refresh: fetchKnowledgeDetail,
    loading, showKnowledgeGraph,
    knowledgeGraph
  } = useKnowledgeDetail(id || '');

  // 使用新的document hooks
  const {
    documents: files,
    total,
    loading: filesLoading,
    error: filesError,
    currentPage,
    pageSize,
    refresh: refreshFiles,
    setKeywords,
    setCurrentPage,
    setPageSize,
    fetchDocuments,
    fetchDocumentsFilter,
  } = useDocumentList(id || '');

  const {
    uploadDocuments,
    deleteDocuments,
    runDocuments,
    renameDocument,
    changeDocumentStatus,
    cancelRunDocuments,
    error: operationError,
  } = useDocumentOperations();

  console.log('showKnowledgeGraph:', showKnowledgeGraph, knowledgeGraph);

  const refreshDetailData = async () => {
    await fetchKnowledgeDetail();
    await refreshFiles();
  };

  // 删除文件
  const handleDeleteFiles = async () => {
    try {
      await deleteDocuments(Array.from(rowSelectionModel.ids) as string[]);
      setDeleteDialogOpen(false);
      setRowSelectionModel({
        type: 'include',
        ids: new Set()
      });
      refreshFiles();
      fetchKnowledgeDetail();
    } catch (err: any) {
      setError(err.response?.data?.message || err.message || '删除文件失败');
    }
  };

  // 上传文件处理
  const handleUploadFiles = async (uploadFiles: File[]) => {
    console.log('上传文件:', uploadFiles);
    const kb_id = knowledgeBase?.id || '';
    try {
      await uploadDocuments(kb_id, uploadFiles);
      refreshFiles();
      fetchKnowledgeDetail();
    } catch (err: any) {
      throw new Error(err.response?.data?.message || err.message || '上传文件失败');
    }
  };

  // 重新解析文件
  const handleReparse = async (docIds: string[]) => {
    try {
      await runDocuments(docIds);
      refreshFiles(); // 刷新列表
      startPolling(); // 开始轮询
    } catch (err: any) {
      setError(err.response?.data?.message || err.message || '重新解析失败');
    }
  };

  // 重命名文件
  const handleRename = async (fileId: string, newName: string) => {
    try {
      await renameDocument(fileId, newName);
      refreshFiles();
    } catch (err: any) {
      setError(err.response?.data?.message || err.message || '重命名失败');
    }
  };

  // 更改文件状态
  const handleChangeStatus = async (fileIds: string[], status: string) => {
    try {
      await changeDocumentStatus(fileIds, status);
      refreshFiles();
    } catch (err: any) {
      setError(err.response?.data?.message || err.message || '更改状态失败');
    }
  };

  // 取消运行
  const handleCancelRun = async (fileIds: string[]) => {
    try {
      await cancelRunDocuments(fileIds);
      refreshFiles();
    } catch (err: any) {
      setError(err.response?.data?.message || err.message || '取消运行失败');
    }
  };

  // 查看详情
  const handleViewDetails = (file: IKnowledgeFile) => {
    console.log("查看详情:", file);

    navigate(`/chunk/parsed-result?kb_id=${id}&doc_id=${file.id}`);
  };

  // 查看解析详情
  const handleViewProcessDetails = (file: IKnowledgeFile) => {
    console.log("查看解析详情:", file);
    setSelectedFileDetails(file);
    setProcessDetailsDialogOpen(true);
  };

  // 开始轮询
  const startPolling = () => {
    if (pollingIntervalRef.current) {
      clearInterval(pollingIntervalRef.current);
    }

    setIsPolling(true);
    pollingIntervalRef.current = setInterval(() => {
      refreshFiles();
    }, 3000); // 每3秒轮询一次
  };

  // 停止轮询
  const stopPolling = () => {
    if (pollingIntervalRef.current) {
      clearInterval(pollingIntervalRef.current);
      pollingIntervalRef.current = null;
    }
    setIsPolling(false);
  };

  // 检查是否有运行中的文档
  const hasRunningDocuments = files.some(file => file.run === RUNNING_STATUS_KEYS.RUNNING);

  // 根据运行状态自动管理轮询
  useEffect(() => {
    if (hasRunningDocuments && !isPolling) {
      startPolling();
    } else if (!hasRunningDocuments && isPolling) {
      stopPolling();
    }
  }, [hasRunningDocuments, isPolling]);

  // 组件卸载时清理轮询
  useEffect(() => {
    return () => {
      if (pollingIntervalRef.current) {
        clearInterval(pollingIntervalRef.current);
      }
    };
  }, []);

  // 初始化数据
  useEffect(() => {
    fetchDocumentsFilter().then(filterData => {
      if (filterData?.filter) {
        // setKeywords(filter.keywords || '');
        logger.debug('filter:', filterData.filter);
        const filter = filterData.filter || {};
        const showFilter = Object.keys(filter.run_status || {}).length > 0 || Object.keys(filter.suffix || {}).length > 0;
        if (showFilter) {
          setDocumentsFilter({
            run_status: filterData.filter?.run_status || {},
            suffix: filterData.filter?.suffix || {},
          });
        }
      }
    });
  }, [id]);

  // 搜索文件
  useEffect(() => {
    const timer = setTimeout(() => {
      setKeywords(searchKeyword);
    }, 500);

    return () => clearTimeout(timer);
  }, [searchKeyword, setKeywords]);

  // 合并错误状态
  const combinedError = error || filesError || operationError;

  if (loading || !knowledgeBase) {
    return (
      <Box sx={{ p: 3 }}>
        <LinearProgress />
        <Typography sx={{ mt: 2 }}>加载中...</Typography>
      </Box>
    );
  }

  if (combinedError) {
    return (
      <Box sx={{ p: 3 }}>
        <Alert severity="error">{combinedError}</Alert>
      </Box>
    );
  }

  return (
    <Box sx={{ p: 3 }}>
      {/* 面包屑导航 */}
      <KnowledgeBreadcrumbs
        kbItems={[
          {
            label: '知识库',
            path: '/knowledge'
          },
          {
            label: knowledgeBase?.name || '知识库详情',
            path: `/knowledge/${id}`
          }
        ]}
      />

      {/* 知识库信息卡片 */}
      <KnowledgeInfoCard knowledgeBase={knowledgeBase} />

      {/* 标签页组件 - 仅在showKnowledgeGraph为true时显示 */}
      {showKnowledgeGraph ? (
        <Box sx={{ mt: 3 }}>
          <Tabs
            value={currentTab}
            onChange={(event, newValue) => setCurrentTab(newValue)}
            sx={{ borderBottom: 1, borderColor: 'divider' }}
          >
            <Tab label="Documents" />
            <Tab label="Graph" />
          </Tabs>

          {/* Document List 标签页内容 */}
          {currentTab === 0 && (
            <Box sx={{ mt: 2 }}>
              <DocumentListComponent
                files={files}
                loading={filesLoading}
                searchKeyword={searchKeyword}
                onSearchChange={setSearchKeyword}
                onReparse={(fileIds) => handleReparse(fileIds)}
                onDelete={(fileIds) => {
                  setRowSelectionModel({
                    type: 'include',
                    ids: new Set(fileIds)
                  });
                  setDeleteDialogOpen(true);
                }}
                onUpload={() => setUploadDialogOpen(true)}
                onRefresh={() => {
                  refreshFiles();
                  fetchKnowledgeDetail();
                }}
                rowSelectionModel={rowSelectionModel}
                onRowSelectionModelChange={(newModel) => {
                  setRowSelectionModel(newModel);
                }}
                total={total}
                page={currentPage}
                pageSize={pageSize}
                documentFilter={documentsFilter}
                onSelectedFilterChange={(filterBody) => {
                  fetchDocuments({}, filterBody);
                }}
                onPageChange={setCurrentPage}
                onPageSizeChange={setPageSize}
                onRename={handleRename}
                onChangeStatus={handleChangeStatus}
                onCancelRun={handleCancelRun}
                onViewDetails={handleViewDetails}
                onViewProcessDetails={handleViewProcessDetails}
              />
            </Box>
          )}

          {/* Graph 标签页内容 */}
          {currentTab === 1 && (
            <Box sx={{ mt: 2 }}>
              <KnowledgeGraphView knowledgeGraph={knowledgeGraph} />
            </Box>
          )}
        </Box>
      ) : (
        /* 原有的文件列表组件 - 当showKnowledgeGraph为false时显示 */
        <DocumentListComponent
          files={files}
          loading={filesLoading}
          searchKeyword={searchKeyword}
          onSearchChange={setSearchKeyword}
          onReparse={(fileIds) => handleReparse(fileIds)}
          onDelete={(fileIds) => {
            console.log('删除文件:', fileIds);
            setRowSelectionModel({
              type: 'include',
              ids: new Set(fileIds)
            });
            setDeleteDialogOpen(true);
          }}
          onUpload={() => setUploadDialogOpen(true)}
          onRefresh={() => {
            refreshFiles();
            fetchKnowledgeDetail();
          }}
          rowSelectionModel={rowSelectionModel}
          onRowSelectionModelChange={(newModel) => {
            console.log('新的选择模型:', newModel);
            setRowSelectionModel(newModel);
          }}
          total={total}
          page={currentPage}
          pageSize={pageSize}
          documentFilter={documentsFilter}
          onSelectedFilterChange={(filterBody) => {
            fetchDocuments({}, filterBody);
          }}
          onPageChange={setCurrentPage}
          onPageSizeChange={setPageSize}
          onRename={handleRename}
          onChangeStatus={handleChangeStatus}
          onCancelRun={handleCancelRun}
          onViewDetails={handleViewDetails}
          onViewProcessDetails={handleViewProcessDetails}
        />
      )}

      {/* 浮动操作按钮 */}
      <FloatingActionButtons
        onTestClick={() => navigate(`/knowledge/${id}/testing`)}
        onConfigClick={() => navigate(`/knowledge/${id}/setting`)}
      />

      {/* 上传文件对话框 */}
      <FileUploadDialog
        open={uploadDialogOpen}
        onClose={() => setUploadDialogOpen(false)}
        onUpload={handleUploadFiles}
        title="上传文件到知识库"
        acceptedFileTypes={['.pdf', '.docx', '.txt', '.md', '.png', '.jpg', '.jpeg', '.mp4', '.wav']}
        maxFileSize={100}
        maxFiles={10}
      />

      {/* 删除确认对话框 */}
      <Dialog open={deleteDialogOpen} onClose={() => setDeleteDialogOpen(false)}>
        <DialogTitle>确认删除</DialogTitle>
        <DialogContent>
          <Typography>
            确定要删除选中的 {rowSelectionModel.ids.size} 个文件吗？此操作不可撤销。
          </Typography>
        </DialogContent>
        <DialogActions>
          <Button onClick={() => setDeleteDialogOpen(false)}>取消</Button>
          <Button color="error" onClick={handleDeleteFiles}>删除</Button>
        </DialogActions>
      </Dialog>

      {/* 文档详情对话框 */}
      <Dialog
        open={processDetailsDialogOpen}
        onClose={() => setProcessDetailsDialogOpen(false)}
        maxWidth="md"
        fullWidth
      >
        <DialogTitle>文档处理详情</DialogTitle>
        <DialogContent sx={{ p: 3 }}>
          {selectedFileDetails && (
            <Stack spacing={3}>
              {/* 基本信息卡片 */}
              <Card variant="outlined">
                <CardContent>
                  <Typography variant="h6" gutterBottom color="primary">
                    基本信息
                  </Typography>
                  <Stack spacing={2}>
                    <Box>
                      <Typography variant="subtitle2" color="text.secondary" gutterBottom>
                        文件名
                      </Typography>
                      <Typography variant="body1" sx={{ fontWeight: 500 }}>
                        {selectedFileDetails.name}
                      </Typography>
                    </Box>
                    <Divider />
                    <Box>
                      <Typography variant="subtitle2" color="text.secondary" gutterBottom>
                        解析器ID
                      </Typography>
                      <Typography variant="body1">
                        {selectedFileDetails.parser_id || '未指定'}
                      </Typography>
                    </Box>
                  </Stack>
                </CardContent>
              </Card>

              {/* 处理状态卡片 */}
              <Card variant="outlined">
                <CardContent>
                  <Typography variant="h6" gutterBottom color="primary">
                    处理状态
                  </Typography>
                  <Stack spacing={2}>
                    <Box>
                      <Typography variant="subtitle2" color="text.secondary" gutterBottom>
                        开始时间
                      </Typography>
                      <Typography variant="body1">
                        {selectedFileDetails.process_begin_at || '未开始'}
                      </Typography>
                    </Box>
                    <Divider />
                    <Box>
                      <Typography variant="subtitle2" color="text.secondary" gutterBottom>
                        处理时长
                      </Typography>
                      <Typography variant="body1">
                        {selectedFileDetails.process_duration ? `${selectedFileDetails.process_duration}秒` : '未完成'}
                      </Typography>
                    </Box>
                    <Divider />
                    <Box>
                      <Typography variant="subtitle2" color="text.secondary" gutterBottom>
                        进度
                      </Typography>
                      <Box sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>
                        <Chip
                          label={`${(100 * (selectedFileDetails.progress || 0)).toFixed(2)}%`}
                          color="primary"
                          size="small"
                        />
                        <LinearProgress
                          variant="determinate"
                          value={100 * (selectedFileDetails.progress || 0)}
                          sx={{ flexGrow: 1, height: 8, borderRadius: 4 }}
                        />
                      </Box>
                    </Box>
                  </Stack>
                </CardContent>
              </Card>

              {/* 处理详情卡片 */}
              {selectedFileDetails.progress_msg && (
                <Card variant="outlined">
                  <CardContent>
                    <Typography variant="h6" gutterBottom color="primary">
                      处理详情
                    </Typography>
                    <Box
                      sx={{
                        maxHeight: 300,
                        overflow: 'auto',
                        backgroundColor: 'grey.50',
                        borderRadius: 1,
                        p: 2,
                        border: '1px solid',
                        borderColor: 'grey.200',
                      }}
                    >
                      <Typography
                        variant="body2"
                        component="pre"
                        sx={{
                          fontFamily: 'monospace',
                          fontSize: '0.875rem',
                          whiteSpace: 'pre-wrap',
                          wordBreak: 'break-word',
                          margin: 0,
                          color: 'text.primary',
                        }}
                      >
                        {selectedFileDetails.progress_msg}
                      </Typography>
                    </Box>
                  </CardContent>
                </Card>
              )}
            </Stack>
          )}
        </DialogContent>
        <DialogActions sx={{ p: 3, pt: 0 }}>
          <Button onClick={() => setProcessDetailsDialogOpen(false)} variant="contained">
            关闭
          </Button>
        </DialogActions>
      </Dialog>
    </Box>
  );
}

export default KnowledgeBaseDetail;