import { useQuery } from "@tanstack/react-query";
import { History } from "lucide-react";

import { taskBriefApi } from "@/api/taskBriefs";
import { ConfigSubpageHeader } from "@/components/ai-config/ConfigSubpageHeader";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";

export default function TaskBriefRunsPage() {
  const runsQuery = useQuery({
    queryKey: ["task-brief-runs"],
    queryFn: () => taskBriefApi.listRuns(),
  });
  const runs = runsQuery.data || [];
  const errorText = runsQuery.error instanceof Error ? runsQuery.error.message : "请检查后端服务。";

  return (
    <div className="space-y-6">
      <ConfigSubpageHeader
        title="任务包生成记录"
        description="跟踪任务包生成流水，快速回溯模板与范围。"
        icon={<History className="h-5 w-5" />}
        tone="slate"
        meta={<span>{runsQuery.isError ? "读取失败" : `记录总数 ${runs.length}`}</span>}
      />

      <Card className="border-slate-200/80 bg-white/90 shadow-sm backdrop-blur-sm dark:border-slate-800 dark:bg-slate-900/85">
        <CardHeader>
          <CardTitle className="text-base">运行列表</CardTitle>
        </CardHeader>
        <CardContent>
          {runsQuery.isLoading ? (
            <p className="text-sm text-slate-500 dark:text-slate-400">加载中...</p>
          ) : runsQuery.isError ? (
            <div className="rounded-xl border border-rose-200/70 bg-rose-50/80 p-4 dark:border-rose-900/40 dark:bg-rose-950/30">
              <p className="text-sm font-medium text-rose-700 dark:text-rose-200">记录读取失败：{errorText}</p>
              <Button
                className="mt-3"
                variant="outline"
                size="sm"
                onClick={() => void runsQuery.refetch()}
                disabled={runsQuery.isFetching}
              >
                {runsQuery.isFetching ? "重试中..." : "重试"}
              </Button>
            </div>
          ) : runs.length === 0 ? (
            <p className="text-sm text-slate-500 dark:text-slate-400">暂无生成记录。</p>
          ) : (
            <div className="overflow-x-auto rounded-xl border border-slate-200/90 dark:border-slate-700">
              <Table>
                <TableHeader>
                  <TableRow>
                    <TableHead>标题</TableHead>
                    <TableHead>模板</TableHead>
                    <TableHead>状态</TableHead>
                    <TableHead>变更文件数</TableHead>
                    <TableHead>范围摘要</TableHead>
                    <TableHead>生成时间</TableHead>
                  </TableRow>
                </TableHeader>
                <TableBody>
                  {runs.map((run) => (
                    <TableRow key={run.id} className="hover:bg-slate-50/70 dark:hover:bg-slate-800/60">
                      <TableCell className="font-medium">{run.title}</TableCell>
                      <TableCell>{run.template_name || "-"}</TableCell>
                      <TableCell>{run.status}</TableCell>
                      <TableCell>{run.changed_files?.length || 0}</TableCell>
                      <TableCell className="max-w-[420px] truncate">{run.scope_summary || "-"}</TableCell>
                      <TableCell>{run.generated_at || "-"}</TableCell>
                    </TableRow>
                  ))}
                </TableBody>
              </Table>
            </div>
          )}
        </CardContent>
      </Card>
    </div>
  );
}