import { useEffect, useMemo, useState } from "react";
import { Download, FolderArchive, RotateCcw } from "lucide-react";
import { useSearchParams } from "react-router";
import { toast } from "sonner";

import { Button } from "~/components/ui/button";
import { Card, CardAction, CardContent, CardDescription, CardHeader, CardTitle } from "~/components/ui/card";
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "~/components/ui/table";
import { exportRowsToExcel } from "~/lib/exportExcel";
import { FilterSelect, OperationsPageHeader } from "./OperationsUi";
import { workflowDocuments, type KnowledgeDocument } from "./workflowData";

type Filters = { bank: string; modelName: string; modelId: string; stage: string };
const EMPTY_FILTERS: Filters = { bank: "", modelName: "", modelId: "", stage: "" };

function unique(values: string[]): string[] {
  return [...new Set(values)].sort((left, right) => left.localeCompare(right, "zh-CN"));
}

function exportDocuments(rows: KnowledgeDocument[]) {
  const header = ["流程", "银行", "模型名称", "模型版本", "模型ID", "环节", "材料名称", "上传人", "上传时间", "确认状态"];
  return exportRowsToExcel({ fileName: "文档知识库", sheetName: "文档知识库", headers: header, rows: rows.map((row) => [row.workflowTitle, row.bank, row.modelName, row.modelVersion, row.modelId, row.stage, row.name, row.uploadedBy, row.uploadedAt, row.confirmed ? "已确认" : "待确认"]) });
}

export default function KnowledgeBasePage() {
  const documents = useMemo(() => workflowDocuments(), []);
  const [searchParams, setSearchParams] = useSearchParams();
  const [filters, setFilters] = useState<Filters>(() => ({
    ...EMPTY_FILTERS,
    bank: searchParams.get("bank") ?? "",
    modelName: searchParams.get("modelName") ?? "",
    modelId: searchParams.get("modelId") ?? "",
    stage: searchParams.get("stage") ?? "",
  }));
  const rows = useMemo(() => documents.filter((document) => (
    (!filters.bank || document.bank === filters.bank)
    && (!filters.modelName || document.modelName === filters.modelName)
    && (!filters.modelId || document.modelId === filters.modelId)
    && (!filters.stage || document.stage === filters.stage)
  )), [documents, filters]);
  const update = <K extends keyof Filters>(key: K, value: Filters[K]) => setFilters((current) => ({ ...current, [key]: value }));

  useEffect(() => {
    const params = new URLSearchParams();
    (Object.keys(filters) as Array<keyof Filters>).forEach((key) => { if (filters[key]) params.set(key, filters[key]); });
    setSearchParams(params, { replace: true });
  }, [filters, setSearchParams]);

  return (
    <section className="h-full overflow-auto bg-bg p-6">
      <div className="mx-auto flex max-w-screen-2xl flex-col gap-6 pb-8">
        <OperationsPageHeader
          title="文档知识库"
          description="汇总开发、迭代、评审、测试和部署各环节材料，按模型、名称和环节检索。"
          actions={<Button onClick={() => void exportDocuments(rows)}><Download />导出 Excel</Button>}
        />
        <Card>
          <CardHeader className="border-b border-border"><CardTitle className="flex items-center gap-2"><FolderArchive className="size-5 text-primary" />流程材料</CardTitle><CardDescription>共 {rows.length} 份材料</CardDescription><CardAction><Button variant="outline" size="sm" onClick={() => setFilters(EMPTY_FILTERS)}><RotateCcw />重置筛选</Button></CardAction></CardHeader>
          <CardContent className="grid grid-cols-4 gap-3">
            <FilterSelect label="银行" value={filters.bank} options={unique(documents.map((item) => item.bank))} onChange={(value) => update("bank", value)} />
            <FilterSelect label="模型名称" value={filters.modelName} options={unique(documents.map((item) => item.modelName))} onChange={(value) => update("modelName", value)} />
            <FilterSelect label="模型 ID" value={filters.modelId} options={unique(documents.map((item) => item.modelId))} onChange={(value) => update("modelId", value)} />
            <FilterSelect label="环节" value={filters.stage} options={unique(documents.map((item) => item.stage))} onChange={(value) => update("stage", value)} />
          </CardContent>
          <CardContent className="px-0 pt-0">
            <Table>
              <TableHeader><TableRow><TableHead>流程</TableHead><TableHead>银行</TableHead><TableHead>模型名称</TableHead><TableHead>模型版本</TableHead><TableHead>模型ID</TableHead><TableHead>环节</TableHead><TableHead>材料名称</TableHead><TableHead>上传人</TableHead><TableHead>上传时间</TableHead><TableHead>确认状态</TableHead><TableHead className="text-right">操作</TableHead></TableRow></TableHeader>
              <TableBody>{rows.length ? rows.map((document) => <TableRow key={`${document.workflowId}-${document.stage}-${document.name}`}><TableCell className="min-w-48 whitespace-normal font-medium text-foreground">{document.workflowTitle}</TableCell><TableCell>{document.bank}</TableCell><TableCell>{document.modelName}</TableCell><TableCell>{document.modelVersion}{document.commonModel && <span className="ml-2 rounded-full bg-brand-soft px-2 py-0.5 text-2xs text-primary">通用</span>}</TableCell><TableCell className="font-mono text-xs">{document.modelId}</TableCell><TableCell>{document.stage}</TableCell><TableCell className="min-w-56 whitespace-normal font-mono text-xs">{document.name}</TableCell><TableCell>{document.uploadedBy}</TableCell><TableCell>{document.uploadedAt}</TableCell><TableCell>{document.confirmed ? <span className="rounded-full bg-success-soft px-2.5 py-1 text-xs text-success-strong">已确认</span> : <span className="rounded-full bg-warning-soft px-2.5 py-1 text-xs text-warning">待确认</span>}</TableCell><TableCell className="text-right"><Button variant="link" size="sm" onClick={() => toast.info("文件下载待文件服务接入")}>下载</Button></TableCell></TableRow>) : <TableRow><TableCell colSpan={11} className="h-32 text-center text-muted-foreground">当前筛选条件下暂无材料</TableCell></TableRow>}</TableBody>
            </Table>
          </CardContent>
        </Card>
      </div>
    </section>
  );
}