import { useEffect, useMemo, useState } from "react";
import { ArrowUpDown, ChevronLeft, ChevronRight, Download, FileClock, RotateCcw } from "lucide-react";
import { useNavigate, 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 { FilterSelect, MultiSelectFilter, OperationsPageHeader } from "./OperationsUi";
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "~/components/ui/table";
import { exportRowsToExcel } from "~/lib/exportExcel";
import { type MonitoringReport, type ReportStatus } from "./reportData";
import { useReportStore } from "./reportStore";

type Filters = {
  bank: string[];
  name: string[];
  version: string[];
  modelId: string[];
  month: string[];
  type: string[];
  status: string[];
};
type SortKey = "bank" | "modelId" | "month" | "generatedAt";

function emptyFilters(): Filters {
  return { bank: [], name: [], version: [], modelId: [], month: [], type: [], status: [] };
}

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

function parseValues(params: URLSearchParams, key: string): string[] {
  return [...new Set(params.getAll(key).flatMap((value) => value.split(",")).filter(Boolean))];
}

function statusClass(status: ReportStatus): string {
  if (status === "已发送业务团队") return "bg-success-soft text-success-strong";
  if (status === "编辑中") return "bg-brand-soft text-primary";
  return "bg-warning-soft text-warning";
}

function exportReports(rows: MonitoringReport[]) {
  const header = ["银行", "模型名称", "版本", "模型ID", "月份", "报告类型", "生成时间", "输出日期", "状态"];
  return exportRowsToExcel({
    fileName: "模型历史报告汇总",
    sheetName: "历史报告汇总",
    headers: header,
    rows: rows.map((row) => [row.bank, row.modelName, row.version, row.modelId, row.monitorMonth, row.type, row.generatedAt, row.outputDate, row.status]),
  });
}

function matches(values: string[], value: string): boolean {
  return !values.length || values.includes(value);
}

function SortableHead({ label, sortKey, currentKey, onSort }: { label: string; sortKey: SortKey; currentKey: SortKey; onSort: (key: SortKey) => void }) {
  return <TableHead><button className="inline-flex items-center gap-1.5 font-medium hover:text-primary" type="button" onClick={() => onSort(sortKey)}>{label}<ArrowUpDown className={`size-3.5 ${currentKey === sortKey ? "text-primary" : "text-muted-foreground"}`} /></button></TableHead>;
}

export default function ReportSummaryPage() {
  const navigate = useNavigate();
  const reports = useReportStore((state) => state.reports);
  const [searchParams, setSearchParams] = useSearchParams();
  const [filters, setFilters] = useState<Filters>(() => ({
    bank: parseValues(searchParams, "bank"),
    name: parseValues(searchParams, "name"),
    version: parseValues(searchParams, "version"),
    modelId: parseValues(searchParams, "modelId"),
    month: parseValues(searchParams, "month"),
    type: parseValues(searchParams, "type"),
    status: parseValues(searchParams, "status"),
  }));
  const [sort, setSort] = useState<{ key: SortKey; direction: "asc" | "desc" }>({ key: "month", direction: "desc" });
  const [page, setPage] = useState(1);
  const [pageSize, setPageSize] = useState(10);

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

  const filteredRows = useMemo(() => reports.filter((report) => (
    matches(filters.bank, report.bank)
    && matches(filters.name, report.modelName)
    && matches(filters.version, report.version)
    && matches(filters.modelId, report.modelId)
    && matches(filters.month, report.monitorMonth)
    && matches(filters.type, report.type)
    && matches(filters.status, report.status)
  )), [filters, reports]);

  const rows = useMemo(() => [...filteredRows].sort((left, right) => {
    const pairs: Record<SortKey, [string, string]> = {
      bank: [left.bank, right.bank],
      modelId: [left.modelId, right.modelId],
      month: [left.monitorMonth, right.monitorMonth],
      generatedAt: [left.generatedAt, right.generatedAt],
    };
    const [a, b] = pairs[sort.key];
    const result = a.localeCompare(b, "zh-CN");
    return sort.direction === "asc" ? result : -result;
  }), [filteredRows, sort]);

  useEffect(() => setPage(1), [filters, pageSize, sort]);
  const pageCount = Math.max(1, Math.ceil(rows.length / pageSize));
  const safePage = Math.min(page, pageCount);
  const pageRows = rows.slice((safePage - 1) * pageSize, safePage * pageSize);
  const update = <K extends keyof Filters>(key: K, value: string[]) => setFilters((current) => ({ ...current, [key]: value }));
  const changeSort = (key: SortKey) => setSort((current) => current.key === key ? { key, direction: current.direction === "asc" ? "desc" : "asc" } : { key, direction: "asc" });

  return (
    <section className="h-full overflow-auto bg-bg p-6">
      <div className="flex w-full flex-col gap-6 pb-8">
        <OperationsPageHeader title="历史报告汇总" description="按银行、模型、版本、模型 ID 与月份任意组合多选，查看最新和历史报告。" actions={<Button onClick={() => void exportReports(rows)}><Download />导出 Excel</Button>} />

        <Card className="overflow-visible">
          <CardHeader className="border-b border-border"><CardTitle className="flex items-center gap-2"><FileClock className="size-5 text-primary" />全部报告</CardTitle><CardDescription>共 {rows.length} 份 · 当前第 {safePage} / {pageCount} 页</CardDescription><CardAction className="flex gap-2"><Button variant="outline" size="sm" onClick={() => setFilters(emptyFilters())}><RotateCcw />重置筛选</Button><Button size="sm" onClick={() => void exportReports(rows)}><Download />导出 Excel</Button></CardAction></CardHeader>
          <CardContent className="grid grid-cols-7 gap-3">
            <MultiSelectFilter label="银行" values={filters.bank} options={unique(reports.map((item) => item.bank))} onChange={(value) => update("bank", value)} />
            <MultiSelectFilter label="模型名称" values={filters.name} options={unique(reports.map((item) => item.modelName))} onChange={(value) => update("name", value)} />
            <MultiSelectFilter label="模型版本" values={filters.version} options={unique(reports.map((item) => item.version))} onChange={(value) => update("version", value)} />
            <MultiSelectFilter label="模型 ID" values={filters.modelId} options={unique(reports.map((item) => item.modelId))} onChange={(value) => update("modelId", value)} />
            <MultiSelectFilter label="月份" values={filters.month} options={unique(reports.map((item) => item.monitorMonth))} onChange={(value) => update("month", value)} />
            <MultiSelectFilter label="报告类型" values={filters.type} options={["监控报告", "诊断报告"]} onChange={(value) => update("type", value)} />
            <MultiSelectFilter label="状态" values={filters.status} options={["待模型团队阅读", "编辑中", "已发送业务团队"]} onChange={(value) => update("status", value)} />
          </CardContent>
          <CardContent className="max-h-[40rem] overflow-auto px-0 pt-0">
            <Table>
              <TableHeader className="sticky top-0 z-10 bg-card"><TableRow><SortableHead label="银行" sortKey="bank" currentKey={sort.key} onSort={changeSort} /><TableHead>模型名称</TableHead><TableHead>版本</TableHead><SortableHead label="模型ID" sortKey="modelId" currentKey={sort.key} onSort={changeSort} /><SortableHead label="月份" sortKey="month" currentKey={sort.key} onSort={changeSort} /><TableHead>报告类型</TableHead><SortableHead label="生成时间" sortKey="generatedAt" currentKey={sort.key} onSort={changeSort} /><TableHead>输出日期</TableHead><TableHead>状态</TableHead><TableHead className="text-right">操作</TableHead></TableRow></TableHeader>
              <TableBody>
                {pageRows.length ? pageRows.map((report) => <TableRow key={report.reportId}><TableCell className="font-medium text-foreground">{report.bank}</TableCell><TableCell>{report.modelName}</TableCell><TableCell>{report.version}</TableCell><TableCell className="font-mono text-xs">{report.modelId}</TableCell><TableCell className="font-mono text-xs">{report.monitorMonth}</TableCell><TableCell><span className={report.type === "监控报告" ? "rounded-full bg-success-soft px-2.5 py-1 text-xs font-medium text-success-strong" : "rounded-full bg-warning-soft px-2.5 py-1 text-xs font-medium text-warning"}>{report.type}</span></TableCell><TableCell className="font-mono text-xs">{report.generatedAt}</TableCell><TableCell>{report.outputDate}</TableCell><TableCell><span className={`rounded-full px-2.5 py-1 text-xs font-medium ${statusClass(report.status)}`}>{report.status}</span>{report.unreadDays >= 5 && report.status !== "已发送业务团队" && <span className="ml-2 rounded-full bg-danger-soft px-2.5 py-1 text-xs font-medium text-danger">超 {report.unreadDays} 日</span>}{report.synced && <span className="ml-2 rounded-full bg-brand-soft px-2.5 py-1 text-xs font-medium text-primary">已同步</span>}</TableCell><TableCell className="text-right"><Button variant="link" size="sm" onClick={() => navigate(`/operations/reports?report=${report.reportId}`)}>打开</Button><Button variant="link" size="sm" onClick={() => toast.info("PDF 排版与下载将在报告服务接口接入后启用")}>导出 PDF</Button></TableCell></TableRow>) : <TableRow><TableCell colSpan={10} className="h-32 text-center text-muted-foreground">当前筛选条件下没有报告</TableCell></TableRow>}
              </TableBody>
            </Table>
          </CardContent>
          <CardContent className="flex items-center justify-between border-t border-border py-3"><div className="flex items-center gap-2 text-xs text-muted-foreground"><span>每页</span><FilterSelect className="w-24" label="" value={String(pageSize)} allLabel="请选择" options={["10", "20", "50"]} onChange={(value) => setPageSize(Number(value))} /><span>条</span></div><div className="flex items-center gap-2"><Button variant="outline" size="icon-sm" aria-label="上一页" disabled={safePage <= 1} onClick={() => setPage((value) => Math.max(1, value - 1))}><ChevronLeft /></Button><span className="min-w-20 text-center text-xs text-muted-foreground">{safePage} / {pageCount}</span><Button variant="outline" size="icon-sm" aria-label="下一页" disabled={safePage >= pageCount} onClick={() => setPage((value) => Math.min(pageCount, value + 1))}><ChevronRight /></Button></div></CardContent>
        </Card>
      </div>
    </section>
  );
}