import type { OperatorKind } from "@dci/core";
import { OPERATOR_KINDS } from "@dci/core";
import type { Metadata } from "next";
import { Search } from "lucide-react";
import { Badge, EstimateMark } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Page, PageHeader } from "@/components/ui/card";
import { CountryFlag } from "@/components/ui/country-flag";
import { FilterChips, type Chip } from "@/components/ui/filter-chips";
import { Pagination } from "@/components/ui/pagination";
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 { countryName, fmtInt, fmtMw } from "@/lib/format";
import { OPERATOR_KIND_LABEL } from "@/lib/labels";
import { routes } from "@/lib/routes";
import { hrefWith, parseSort, sortTh, spGet, spInt, type SearchParams } from "@/lib/sort";

export const revalidate = 120;

export const metadata: Metadata = {
  title: "Operators",
  description: "Data center operators, hyperscalers, carriers and developers indexed worldwide: facilities, country footprint, known and pipeline capacity.",
  alternates: { canonical: "/operators" },
};

const PER_PAGE = 50;
const SORTS = ["facilities", "name", "mw"] as const;
const KIND_SET = new Set<string>(OPERATOR_KINDS);

const selectCls = "h-9 min-w-0 rounded-sm border border-hair-2 bg-surface px-2 text-[13px] text-ink focus:outline-none focus-visible:ring-2 focus-visible:ring-accent";

export default async function OperatorsPage({ searchParams }: { searchParams: Promise<SearchParams> }) {
  const sp = await searchParams;
  const base = routes.operators();
  const q = spGet(sp, "q");
  const kindRaw = spGet(sp, "kind");
  const kind = kindRaw && KIND_SET.has(kindRaw) ? (kindRaw as OperatorKind) : undefined;
  const country = spGet(sp, "country")?.toUpperCase();
  const page = spInt(sp, "page", 1);
  const sort = parseSort(sp, SORTS, { key: "facilities", order: "desc" });

  const [res, countriesRes] = await Promise.all([
    api.operators({ q, kind, country, sort: sort.key, order: sort.order, page, per_page: PER_PAGE }),
    api.countries(),
  ]);
  const ok = res.total > 0 || res.items.length > 0 || (await api.health()).ok;
  const countries = countriesRes.items.filter((c) => c.facilityCount > 0).sort((a, b) => a.name.localeCompare(b.name));

  const chips: Chip[] = [];
  if (q) chips.push({ key: "q", label: "Search", value: q, removeHref: hrefWith(base, sp, { q: undefined }) });
  if (kind) chips.push({ key: "kind", label: "Kind", value: OPERATOR_KIND_LABEL[kind], removeHref: hrefWith(base, sp, { kind: undefined }) });
  if (country) chips.push({ key: "country", label: "HQ", value: countryName(country), removeHref: hrefWith(base, sp, { country: undefined }) });

  const th = (key: (typeof SORTS)[number]) => sortTh(base, sp, sort, key);

  return (
    <Page>
      <PageHeader eyebrow="Index" title="Operators" description={ok ? `${fmtInt(res.total)} operators indexed — colocation providers, hyperscalers, carriers, developers and enterprises. Capacity figures are lower bounds from published values.` : "Operators, their facilities, country footprint and known capacity."} />
      {!ok && <OfflineNotice className="mb-3" />}

      <form method="get" action={base} className="mb-3 flex flex-wrap items-center gap-2" role="search">
        <label className="relative min-w-0 flex-1 basis-[200px]">
          <span className="sr-only">Search operators</span>
          <Search className="pointer-events-none absolute left-2.5 top-1/2 size-4 -translate-y-1/2 text-ink-4" strokeWidth={1.75} />
          <input type="search" name="q" defaultValue={q ?? ""} placeholder="Search operators…" className={`${selectCls} w-full pl-8`} />
        </label>
        <select name="kind" defaultValue={kind ?? ""} aria-label="Kind" className={`${selectCls} basis-[140px]`}>
          <option value="">All kinds</option>
          {OPERATOR_KINDS.map((k) => (
            <option key={k} value={k}>
              {OPERATOR_KIND_LABEL[k]}
            </option>
          ))}
        </select>
        <select name="country" defaultValue={country ?? ""} aria-label="Headquarters country" className={`${selectCls} basis-[160px]`}>
          <option value="">Any HQ country</option>
          {countries.map((c) => (
            <option key={c.iso2} value={c.iso2}>
              {c.name}
            </option>
          ))}
        </select>
        {sort.key !== "facilities" && <input type="hidden" name="sort" value={sort.key} />}
        {sort.key !== "facilities" && <input type="hidden" name="order" value={sort.order} />}
        <Button type="submit" size="md" variant="primary">
          Filter
        </Button>
      </form>
      <FilterChips chips={chips} resetHref={base} className="mb-2" />

      {res.items.length === 0 ? (
        <EmptyState title={ok ? "No operators match" : "Operators unavailable"} description={ok ? "Loosen a filter or clear them all." : "The index API is not reachable right now."} compact />
      ) : (
        <Table>
          <THead>
            <tr>
              <Th {...th("name")}>Operator</Th>
              <Th className="hidden sm:table-cell">Kind</Th>
              <Th>HQ</Th>
              <Th numeric {...th("facilities")}>
                Facilities
              </Th>
              <Th numeric>Countries</Th>
              <Th numeric className="hidden md:table-cell">
                Metros
              </Th>
              <Th numeric {...th("mw")}>
                Known MW
              </Th>
              <Th numeric>Pipeline</Th>
              <Th numeric className="hidden lg:table-cell">
                Projects
              </Th>
            </tr>
          </THead>
          <TBody>
            {res.items.map((o) => (
              <Tr key={o.id}>
                <Td primary>
                  <div className="flex flex-wrap items-center gap-2">
                    <RowLink href={routes.operator(o.slug)}>{o.name}</RowLink>
                    {o.kind && (
                      <Badge tone="outline" size="xs" className="sm:hidden">
                        {OPERATOR_KIND_LABEL[o.kind]}
                      </Badge>
                    )}
                  </div>
                </Td>
                <Td label="Kind" className="hidden sm:table-cell">
                  {o.kind ? <Badge tone="outline" size="xs">{OPERATOR_KIND_LABEL[o.kind]}</Badge> : <span className="text-ink-4">—</span>}
                </Td>
                <Td label="HQ">
                  <CountryFlag iso2={o.hqCountryIso2} withName className="max-w-[160px] text-ink-2" />
                </Td>
                <Td label="Facilities" numeric lead>
                  {fmtInt(o.facilityCount)}
                </Td>
                <Td label="Countries" numeric>
                  {fmtInt(o.countryCount)}
                </Td>
                <Td label="Metros" numeric className="hidden md:table-cell">
                  {o.metroCount === undefined ? <span className="text-ink-4">—</span> : fmtInt(o.metroCount)}
                </Td>
                <Td label="Known MW" numeric>
                  {o.knownMw === null || o.knownMw === undefined ? <span className="text-ink-4">—</span> : fmtMw(o.knownMw)}
                </Td>
                <Td label="Pipeline" numeric>
                  {o.plannedMw === null || o.plannedMw === undefined ? (
                    <span className="text-ink-4">—</span>
                  ) : (
                    <span title="Planned + under-construction power (lower bound)">
                      <EstimateMark className="mr-0.5" />
                      {fmtMw(o.plannedMw)}
                    </span>
                  )}
                </Td>
                <Td label="Projects" numeric className="hidden lg:table-cell">
                  {o.projectCount === undefined ? <span className="text-ink-4">—</span> : fmtInt(o.projectCount)}
                </Td>
              </Tr>
            ))}
          </TBody>
        </Table>
      )}
      <Pagination page={page} perPage={PER_PAGE} total={res.total} hrefFor={(p) => hrefWith(base, sp, { page: p > 1 ? p : undefined })} label="operators" />
    </Page>
  );
}