import type { FacilityFilters, FacilitySummary } from "@dci/core";
import Link from "next/link";
import { ConfidenceBadge, EstimateMark, FlagBadges, StatusBadge, TypeBadge } from "@/components/ui/badge";
import { CountryFlag } from "@/components/ui/country-flag";
import { EmptyState } from "@/components/ui/states";
import { RowLink, TBody, THead, Table, Td, Th, Tr } from "@/components/ui/table";
import { bestMw, fmtMw } from "@/lib/format";
import { filtersToQuery } from "@/lib/query";
import { routes } from "@/lib/routes";

export interface FacilityTableProps {
  items: FacilitySummary[];
  /** current filters → sort links */
  filters?: FacilityFilters;
  basePath?: string;
  /** hide columns for compact embeds */
  columns?: Array<"operator" | "market" | "country" | "status" | "mw" | "type" | "confidence">;
  emptyTitle?: string;
  emptyDescription?: string;
}

const ALL: NonNullable<FacilityTableProps["columns"]> = ["operator", "market", "country", "status", "mw", "type", "confidence"];

/**
 * Facility index table. Sortable headers link to ?sort=&order= (server-side). Under 640 px, rows
 * become stacked cards (data-label). Reused by /datacenters, /search and the entity pages.
 */
export function FacilityTable({ items, filters = {}, basePath = routes.datacenters(), columns = ALL, emptyTitle = "No facilities match these filters", emptyDescription = "Loosen a filter or clear them all." }: FacilityTableProps) {
  const has = (c: (typeof ALL)[number]) => columns.includes(c);
  const sortHref = (key: NonNullable<FacilityFilters["sort"]>) => {
    const dir = filters.sort === key ? (filters.order === "asc" ? "desc" : "asc") : key === "name" ? "asc" : "desc";
    const q = filtersToQuery({ ...filters, sort: key, order: dir, page: undefined });
    return `${basePath}${q ? `?${q}` : ""}`;
  };
  const sortState = (key: NonNullable<FacilityFilters["sort"]>) => (filters.sort === key ? (filters.order ?? "desc") : null);

  if (!items.length) return <EmptyState title={emptyTitle} description={emptyDescription} compact />;

  return (
    <Table mobileCollapse={{ total: items.length, label: "facilities" }}>
      <THead>
        <tr>
          <Th sort={sortState("name")} sortHref={sortHref("name")}>
            Facility
          </Th>
          {has("operator") && <Th>Operator</Th>}
          {has("market") && <Th className="hidden lg:table-cell">Market</Th>}
          {has("country") && <Th>Country</Th>}
          {has("status") && <Th>Status</Th>}
          {has("mw") && (
            <Th numeric sort={sortState("mw")} sortHref={sortHref("mw")}>
              Capacity
            </Th>
          )}
          {has("type") && <Th className="hidden md:table-cell">Type</Th>}
          {has("confidence") && (
            <Th className="hidden md:table-cell" sort={sortState("completeness")} sortHref={sortHref("completeness")}>
              Confidence
            </Th>
          )}
        </tr>
      </THead>
      <TBody>
        {items.map((f) => {
          const { mw, kind } = bestMw(f);
          return (
            <Tr key={f.id}>
              <Td primary>
                <div className="flex items-center gap-2">
                  <RowLink href={routes.facility(f.slug)}>{f.name}</RowLink>
                  <FlagBadges isAi={f.isAi} isHyperscale={f.isHyperscale} />
                </div>
                <div className="text-[11.5px] text-ink-3 sm:hidden">
                  {f.operator?.name ?? "Operator unknown"}
                  {f.city ? ` · ${f.city}` : ""}
                </div>
              </Td>
              {has("operator") && (
                <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>
              )}
              {has("market") && (
                <Td label="Market" className="hidden lg: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>
              )}
              {has("country") && (
                <Td label="Country">
                  <CountryFlag iso2={f.countryIso2} withName className="max-w-[160px] text-ink-2" />
                </Td>
              )}
              {has("status") && (
                <Td label="Status">
                  <StatusBadge status={f.status} short size="xs" />
                </Td>
              )}
              {has("mw") && (
                <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"}>
                      {kind === "planned" && <EstimateMark className="mr-0.5" />}
                      {fmtMw(mw)}
                    </span>
                  )}
                </Td>
              )}
              {has("type") && (
                <Td label="Type" className="hidden md:table-cell">
                  <TypeBadge type={f.facilityType} size="xs" />
                </Td>
              )}
              {has("confidence") && (
                <Td label="Confidence" className="hidden md:table-cell">
                  <ConfidenceBadge level={f.confidence} size="xs" />
                </Td>
              )}
            </Tr>
          );
        })}
      </TBody>
    </Table>
  );
}