import { desc, eq } from "drizzle-orm";
import { getLocale, getTranslations } from "next-intl/server";

import { Badge } from "@/components/ui/badge";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";
import { db } from "@/lib/db";
import { siteTests, sites } from "@/lib/db/schema";

function statusVariant(status: string): "default" | "secondary" | "destructive" {
  if (status === "completed") return "default";
  if (status === "failed") return "destructive";
  return "secondary";
}

export default async function AdminTestsPage() {
  const t = await getTranslations("Admin.tests");
  const locale = await getLocale();
  const dateLocale = locale === "fr" ? "fr-FR" : locale === "es" ? "es-ES" : "en-US";
  const fmt = new Intl.DateTimeFormat(dateLocale, { dateStyle: "short", timeStyle: "short" });
  const rows = await db
    .select({
      id: siteTests.id,
      hostname: sites.hostname,
      device: siteTests.device,
      status: siteTests.status,
      performanceScore: siteTests.performanceScore,
      lighthousePerf: siteTests.lighthousePerf,
      createdAt: siteTests.createdAt,
      completedAt: siteTests.completedAt,
    })
    .from(siteTests)
    .leftJoin(sites, eq(siteTests.siteId, sites.id))
    .orderBy(desc(siteTests.createdAt))
    .limit(100);

  return (
    <div className="space-y-6">
      <h1 className="text-2xl font-semibold tracking-tight">{t("title")}</h1>
      <Table>
        <TableHeader>
          <TableRow>
            <TableHead>{t("columns.hostname")}</TableHead>
            <TableHead>{t("columns.device")}</TableHead>
            <TableHead>{t("columns.status")}</TableHead>
            <TableHead className="text-right">{t("columns.perf")}</TableHead>
            <TableHead>{t("columns.created")}</TableHead>
            <TableHead>{t("columns.completed")}</TableHead>
          </TableRow>
        </TableHeader>
        <TableBody>
          {rows.map((r) => (
            <TableRow key={r.id}>
              <TableCell className="font-medium">{r.hostname ?? "—"}</TableCell>
              <TableCell className="text-muted-foreground">{r.device ?? "—"}</TableCell>
              <TableCell>
                <Badge variant={statusVariant(r.status)}>
                  {t(`status.${r.status as "queued" | "running" | "completed" | "failed"}`)}
                </Badge>
              </TableCell>
              <TableCell className="text-right tabular-nums">
                {r.performanceScore ?? r.lighthousePerf ?? "—"}
              </TableCell>
              <TableCell className="text-muted-foreground">
                {fmt.format(new Date(r.createdAt))}
              </TableCell>
              <TableCell className="text-muted-foreground">
                {r.completedAt ? fmt.format(new Date(r.completedAt)) : "—"}
              </TableCell>
            </TableRow>
          ))}
        </TableBody>
      </Table>
    </div>
  );
}