"use client";

import { trpc } from "@/trpc/client";
import { useRouter } from "next/navigation";
import { FileText } from "lucide-react";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";
import { Badge } from "@/components/ui/badge";
import { PageHeader } from "@/components/layouts/page-header";
import { StateWrapper } from "@/components/shared/state-wrapper";

const STATUS_VARIANT: Record<string, "default" | "secondary" | "outline"> = {
  SUBMISSIONS_RECEIVED: "secondary",
  UNDER_ANALYSIS: "outline",
  BOARD_REVIEW: "default",
};

export default function AnalysisIndexPage() {
  const router = useRouter();
  const { data: tendersData, isLoading, refetch } = trpc.tender.list.useQuery({
    status: "SUBMISSIONS_RECEIVED",
  });
  const { data: underAnalysisData } = trpc.tender.list.useQuery({
    status: "UNDER_ANALYSIS",
  });
  const { data: boardReviewData } = trpc.tender.list.useQuery({
    status: "BOARD_REVIEW",
  });

  const tenders = tendersData?.tenders ?? [];
  const underAnalysis = underAnalysisData?.tenders ?? [];
  const boardReview = boardReviewData?.tenders ?? [];

  const rows = [...tenders, ...underAnalysis, ...boardReview];

  return (
    <div className="space-y-6">
      <PageHeader title="Comparative Analysis" />
      <StateWrapper
        data={rows}
        isLoading={isLoading}
        error={null}
        onRetry={refetch}
        loadingMessage="Loading tenders..."
        empty={{ icon: FileText, title: "No tenders awaiting analysis", description: "Close submissions on a tender to begin analysis." }}
      >
        {(items) => (
          <Table>
            <TableHeader>
              <TableRow>
                <TableHead>Reference</TableHead>
                <TableHead>Title</TableHead>
                <TableHead>Project</TableHead>
                <TableHead>Bids</TableHead>
                <TableHead>Deadline</TableHead>
                <TableHead>Status</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {items.map((tender) => (
                <TableRow
                  key={tender.id}
                  className="cursor-pointer"
                  onClick={() => router.push(`/analysis/${tender.id}`)}
                >
                  <TableCell className="font-mono font-medium">
                    {tender.referenceNo}
                  </TableCell>
                  <TableCell>{tender.title}</TableCell>
                  <TableCell>{tender.bundle?.project?.name || "—"}</TableCell>
                  <TableCell>{tender._count.bidSubmissions}</TableCell>
                  <TableCell>
                    {new Date(tender.submissionDeadline).toLocaleDateString()}
                  </TableCell>
                  <TableCell>
                    <Badge variant={STATUS_VARIANT[tender.status] ?? "outline"}>
                      {tender.status.replace(/_/g, " ")}
                    </Badge>
                  </TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>
        )}
      </StateWrapper>
    </div>
  );
}