import type { FacilitySummary } from "@dci/core";
import Link from "next/link";
import { AiMark, EstimateMark, StatusBadge } from "@/components/ui/badge";
import { CountryFlag } from "@/components/ui/country-flag";
import { RowLink, TBody, THead, Table, Td, Th, Tr } from "@/components/ui/table";
import { HonestEmpty } from "@/components/intelligence/shared";
import { bestMw, fmtMw } from "@/lib/format";
import { AI_EVIDENCE_LABEL } from "@/lib/labels";
import { routes } from "@/lib/routes";

/** AI / HPC facilities with the evidence level per row (confirmed / likely / associated / unknown). */
export function AiFacilitiesTable({ items }: { items: FacilitySummary[] }) {
  if (!items.length) return <HonestEmpty title="No facility with AI evidence yet" detail="a site is listed only when a source describes it as AI / HPC / GPU infrastructure (confirmed or likely)" />;
  return (
    <Table dense mobileCollapse={{ total: items.length, label: "facilities" }}>
      <THead>
        <tr>
          <Th>Facility</Th>
          <Th className="hidden sm:table-cell">Operator</Th>
          <Th className="hidden md:table-cell">Market</Th>
          <Th>Country</Th>
          <Th>Status</Th>
          <Th numeric>Capacity</Th>
          <Th>Evidence</Th>
        </tr>
      </THead>
      <TBody>
        {items.map((f) => {
          const { mw, kind } = bestMw(f);
          const ev = f.aiEvidence ?? "unknown";
          return (
            <Tr key={f.id}>
              <Td primary>
                <RowLink href={routes.facility(f.slug)}>{f.name}</RowLink>
                <div className="text-[11.5px] text-ink-3 sm:hidden">{f.operator?.name ?? "Operator unknown"}</div>
              </Td>
              <Td label="Operator" className="hidden sm:table-cell">
                {f.operator ? (
                  <Link href={routes.operator(f.operator.slug)} className="text-ink-2 hover:text-ink hover:underline">
                    {f.operator.name}
                  </Link>
                ) : (
                  <span className="text-ink-4">—</span>
                )}
              </Td>
              <Td label="Market" className="hidden md:table-cell" muted>
                {f.metro ? (
                  <Link href={routes.market(f.metro.slug)} className="hover:text-ink hover:underline">
                    {f.metro.name}
                  </Link>
                ) : (
                  (f.city ?? "—")
                )}
              </Td>
              <Td label="Country">
                <CountryFlag iso2={f.countryIso2} withName className="max-w-[140px] text-ink-2" />
              </Td>
              <Td label="Status">
                <StatusBadge status={f.status} short size="xs" />
              </Td>
              <Td label="Capacity" numeric lead>
                {mw === null ? (
                  <span className="text-ink-4">—</span>
                ) : (
                  <span title={kind === "it" ? "IT capacity" : kind === "total" ? "Total power" : "Planned power"}>
                    {(f.mwIsEstimate || kind === "planned") && <EstimateMark className="mr-0.5" />}
                    {fmtMw(mw)}
                  </span>
                )}
              </Td>
              <Td label="Evidence">
                {ev === "unknown" ? (
                  <span className="text-[11.5px] text-ink-4" title={AI_EVIDENCE_LABEL.unknown}>
                    flagged AI · evidence level unknown
                  </span>
                ) : (
                  <AiMark evidence={ev} />
                )}
              </Td>
            </Tr>
          );
        })}
      </TBody>
    </Table>
  );
}