import type { CountrySummary } from "@dci/core";
import type { Metadata } from "next";
import Link from "next/link";
import { EstimateMark } from "@/components/ui/badge";
import { Page, PageHeader } from "@/components/ui/card";
import { cn } from "@/components/ui/cn";
import { CountryFlag } from "@/components/ui/country-flag";
import { EmptyState, OfflineNotice } from "@/components/ui/states";
import { RowLink, TBody, THead, Table, Td, Th, Tr } from "@/components/ui/table";
import { api } from "@/lib/api";
import { fmtInt, fmtMw, fmtPct, pluralize } from "@/lib/format";
import { routes } from "@/lib/routes";
import { compareBy, hrefWith, parseSort, sortTh, spGet, type SearchParams, type SortState } from "@/lib/sort";

export const revalidate = 120;

export const metadata: Metadata = {
  title: "Countries",
  description: "Data center facilities, known and pipeline capacity, operators and cloud regions by country, grouped by world region.",
  alternates: { canonical: "/countries" },
};

const SORTS = ["name", "facilities", "mw", "pipeline", "cloud", "operators", "per_million", "hyperscale"] as const;
type SortKey = (typeof SORTS)[number];
const REGION_ORDER = ["Americas", "Europe", "Asia", "Oceania", "Africa"];

const pipelineMw = (c: CountrySummary): number | null => (c.constructionMw === null && c.plannedMw === null ? null : (c.constructionMw ?? 0) + (c.plannedMw ?? 0));
const perMillion = (c: CountrySummary): number | null => (c.population && c.facilityCount >= 5 ? c.facilityCount / (c.population / 1_000_000) : null);

function sorter(s: SortState<SortKey>) {
  switch (s.key) {
    case "name":
      return compareBy<CountrySummary>((c) => c.name, s.order);
    case "mw":
      return compareBy<CountrySummary>((c) => c.knownMw, s.order);
    case "pipeline":
      return compareBy<CountrySummary>(pipelineMw, s.order);
    case "cloud":
      return compareBy<CountrySummary>((c) => c.cloudRegionCount, s.order);
    case "operators":
      return compareBy<CountrySummary>((c) => c.operatorCount, s.order);
    case "per_million":
      return compareBy<CountrySummary>(perMillion, s.order);
    case "hyperscale":
      return compareBy<CountrySummary>((c) => c.hyperscaleCount + c.aiCount, s.order);
    default:
      return compareBy<CountrySummary>((c) => c.facilityCount, s.order);
  }
}

function CountryTable({ rows, base, sp, sort }: { rows: CountrySummary[]; base: string; sp: SearchParams; sort: SortState<SortKey> }) {
  const th = (key: SortKey) => sortTh(base, sp, sort, key);
  return (
    <Table mobileCollapse={{ total: rows.length, label: "countries" }}>
      <THead>
        <tr>
          <Th {...th("name")}>Country</Th>
          <Th numeric {...th("facilities")}>
            Facilities
          </Th>
          <Th numeric {...th("mw")}>
            Known MW
          </Th>
          <Th numeric {...th("pipeline")}>
            Pipeline
          </Th>
          <Th numeric {...th("cloud")}>
            Cloud regions
          </Th>
          <Th numeric className="hidden md:table-cell" {...th("operators")}>
            Operators
          </Th>
          <Th numeric className="hidden lg:table-cell" {...th("per_million")}>
            Per million
          </Th>
          <Th numeric className="hidden lg:table-cell" {...th("hyperscale")}>
            Hyperscale · AI
          </Th>
        </tr>
      </THead>
      <TBody>
        {rows.map((c) => {
          const pipe = pipelineMw(c);
          const pm = perMillion(c);
          return (
            <Tr key={c.iso2}>
              <Td primary>
                <RowLink href={routes.country(c.slug)} className="inline-flex items-center gap-2">
                  <CountryFlag iso2={c.iso2} size={14} />
                  {c.name}
                </RowLink>
                <div className="text-[11.5px] text-ink-3 sm:hidden">{c.subregion ?? c.region ?? ""}</div>
              </Td>
              <Td label="Facilities" numeric lead>
                {fmtInt(c.facilityCount)}
              </Td>
              <Td label="Known MW" numeric>
                {c.knownMw === null ? (
                  <span className="text-ink-4" title={`No published MW figure · coverage ${fmtPct(c.mwCoverage)}`}>
                    —
                  </span>
                ) : (
                  <span>
                    {fmtMw(c.knownMw)}
                    <span className="hidden text-[10.5px] text-ink-4 sm:block" title="Share of facilities with a published MW figure">
                      {fmtPct(c.mwCoverage)} coverage
                    </span>
                  </span>
                )}
              </Td>
              <Td label="Pipeline" numeric>
                {pipe === null ? (
                  <span className="text-ink-4">—</span>
                ) : (
                  <span title="Under construction + planned power (lower bound)">
                    <EstimateMark className="mr-0.5" />
                    {fmtMw(pipe)}
                  </span>
                )}
              </Td>
              <Td label="Cloud regions" numeric>
                {fmtInt(c.cloudRegionCount)}
              </Td>
              <Td label="Operators" numeric className="hidden md:table-cell">
                {fmtInt(c.operatorCount)}
              </Td>
              <Td label="Per million" numeric className="hidden lg:table-cell">
                {pm === null ? <span className="text-ink-4" title="Needs ≥ 5 facilities and a population figure">—</span> : pm.toFixed(2)}
              </Td>
              <Td label="Hyperscale · AI" numeric className="hidden lg:table-cell">
                {fmtInt(c.hyperscaleCount)} · {fmtInt(c.aiCount)}
              </Td>
            </Tr>
          );
        })}
      </TBody>
    </Table>
  );
}

export default async function CountriesPage({ searchParams }: { searchParams: Promise<SearchParams> }) {
  const sp = await searchParams;
  const base = routes.countries();
  const region = spGet(sp, "region");
  const hasSort = Boolean(spGet(sp, "sort"));
  const sort = parseSort(sp, SORTS, { key: "facilities", order: "desc" });

  const res = await api.countries();
  const ok = res.items.length > 0 || (await api.health()).ok;
  const all = res.items.filter((c) => c.facilityCount > 0 || c.cloudRegionCount > 0);
  const regions = Array.from(new Set(all.map((c) => c.region).filter((x): x is string => Boolean(x)))).sort((a, b) => {
    const ia = REGION_ORDER.indexOf(a);
    const ib = REGION_ORDER.indexOf(b);
    return (ia === -1 ? 99 : ia) - (ib === -1 ? 99 : ib) || a.localeCompare(b);
  });
  const filtered = (region ? all.filter((c) => c.region === region) : all).sort(sorter(sort));
  const totals = filtered.reduce((a, c) => ({ f: a.f + c.facilityCount, cr: a.cr + c.cloudRegionCount, mw: a.mw + (c.knownMw ?? 0), cov: a.cov + (c.knownMw !== null ? 1 : 0) }), { f: 0, cr: 0, mw: 0, cov: 0 });

  const chipCls = (active: boolean) => cn("inline-flex h-7 shrink-0 items-center whitespace-nowrap rounded-sm border px-2 text-[12px]", active ? "border-ink bg-ink text-paper" : "border-hair-2 bg-surface text-ink hover:bg-surface-2");

  return (
    <Page>
      <PageHeader
        eyebrow="Index"
        title="Countries"
        description={
          ok
            ? `${fmtInt(filtered.length)} ${pluralize(filtered.length, "country", "countries")} with indexed infrastructure${region ? ` in ${region}` : ""} — ${fmtInt(totals.f)} facilities, ${fmtInt(totals.cr)} cloud regions${totals.mw ? `, ${fmtMw(totals.mw)} known operational capacity` : ""}. MW totals are lower bounds from published figures; coverage is shown per country.`
            : "Data center facilities, capacity and cloud regions by country."
        }
      />
      {!ok && <OfflineNotice className="mb-3" />}

      <nav aria-label="Region" className="-mx-3 mb-3 flex items-center gap-1.5 overflow-x-auto px-3 no-scrollbar sm:mx-0 sm:flex-wrap sm:px-0">
        <Link href={hrefWith(base, sp, { region: undefined })} scroll={false} className={chipCls(!region)} aria-current={!region ? "page" : undefined}>
          All regions
        </Link>
        {regions.map((rg) => (
          <Link key={rg} href={hrefWith(base, sp, { region: rg })} scroll={false} className={chipCls(region === rg)} aria-current={region === rg ? "page" : undefined}>
            {rg}
            <span className="figure ml-1.5 text-[11px] opacity-70">{all.filter((c) => c.region === rg).length}</span>
          </Link>
        ))}
        {hasSort && (
          <Link href={hrefWith(base, sp, { sort: undefined, order: undefined })} scroll={false} className="shrink-0 px-1 text-[12px] text-ink-3 hover:text-ink">
            Group by region
          </Link>
        )}
      </nav>

      {filtered.length === 0 ? (
        <EmptyState title={ok ? "No countries match" : "Countries unavailable"} description={ok ? "Pick another region." : "The index API is not reachable right now."} compact />
      ) : hasSort || region ? (
        <CountryTable rows={filtered} base={base} sp={sp} sort={sort} />
      ) : (
        <div className="flex flex-col gap-8">
          {regions.map((rg) => {
            const rows = filtered.filter((c) => c.region === rg);
            if (!rows.length) return null;
            const f = rows.reduce((a, c) => a + c.facilityCount, 0);
            return (
              <section key={rg} aria-labelledby={`region-${rg}`}>
                <div className="mb-2 flex items-baseline justify-between gap-3 border-t border-hair pt-4">
                  <h2 id={`region-${rg}`} className="text-[15px] font-semibold text-ink">
                    {rg}
                  </h2>
                  <span className="figure text-[12px] text-ink-3">
                    {fmtInt(rows.length)} {pluralize(rows.length, "country", "countries")} · {fmtInt(f)} facilities
                  </span>
                </div>
                <CountryTable rows={rows} base={base} sp={sp} sort={sort} />
              </section>
            );
          })}
          {filtered.some((c) => !c.region) && (
            <section>
              <div className="mb-2 border-t border-hair pt-4">
                <h2 className="text-[15px] font-semibold text-ink">Other</h2>
              </div>
              <CountryTable rows={filtered.filter((c) => !c.region)} base={base} sp={sp} sort={sort} />
            </section>
          )}
        </div>
      )}
      <p className="mt-6 text-[11.5px] text-ink-4">
        Per-million uses the latest World Bank population vintage and requires at least 5 facilities. Known MW = IT capacity, or total power when only that is published, over operational facilities. See the{" "}
        <Link href={routes.methodology()} className="underline decoration-hair-2 hover:text-ink">
          methodology
        </Link>
        .
      </p>
    </Page>
  );
}