import type { CloudRegionSummary } from "@dci/core";
import type { Metadata } from "next";
import Link from "next/link";
import { SectionNav } from "@/components/entity/section-nav";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Page, PageHeader, Section } from "@/components/ui/card";
import { CountryFlag } from "@/components/ui/country-flag";
import { FilterChips, type Chip } from "@/components/ui/filter-chips";
import { Metric, MetricCell, MetricRow } from "@/components/ui/metric";
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, fmtDate, fmtInt } from "@/lib/format";
import { routes } from "@/lib/routes";
import { pageMetadata } from "@/lib/seo";
import { compareBy, hrefWith, parseSort, sortTh, spGet, type SearchParams, type SortState } from "@/lib/sort";
import { CLOUD_STATUSES, CLOUD_STATUS_LABEL, CloudStatusBadge, type CloudStatus } from "../cloud-format";

export const revalidate = 120;

export const metadata: Metadata = pageMetadata({
  title: "Cloud regions",
  description: "Public cloud regions by provider — code, location, availability zones, launch date, status and sovereignty, each linked to the provider's published source.",
  path: routes.cloudRegions(),
});

const SORT_KEYS = ["provider", "code", "name", "city", "country", "azs", "launched", "status"] as const;
type SortKey = (typeof SORT_KEYS)[number];

const BASE = routes.cloudRegions();

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

function RegionTable({ items, showProvider, sp, sort }: { items: CloudRegionSummary[]; showProvider: boolean; sp: SearchParams; sort: SortState<SortKey> | null }) {
  const th = (key: SortKey) => (sort ? sortTh(BASE, sp, sort, key) : {});
  return (
    <Table dense mobileCollapse={{ total: items.length, label: "regions" }}>
      <THead>
        <tr>
          {showProvider && <Th {...th("provider")}>Provider</Th>}
          <Th {...th("code")}>Code</Th>
          <Th {...th("name")}>Region</Th>
          <Th className="hidden sm:table-cell" {...th("city")}>
            City
          </Th>
          <Th {...th("country")}>Country</Th>
          <Th numeric {...th("azs")}>
            AZs
          </Th>
          <Th className="hidden lg:table-cell" {...th("launched")}>
            Launched
          </Th>
          <Th {...th("status")}>Status</Th>
          <Th className="hidden lg:table-cell">Sovereign</Th>
        </tr>
      </THead>
      <TBody>
        {items.map((r) => (
          <Tr key={r.id}>
            {showProvider && (
              <Td label="Provider">
                <Link href={routes.operator(r.provider.slug)} className="text-ink-2 hover:text-ink hover:underline">
                  {r.provider.name}
                </Link>
              </Td>
            )}
            <Td primary>
              <RowLink href={routes.cloudRegion(r.slug)} className="figure text-[12.5px]">
                {r.code}
              </RowLink>
              <div className="text-[11.5px] text-ink-3 sm:hidden">
                {r.name}
                {r.city ? ` · ${r.city}` : ""}
              </div>
            </Td>
            <Td label="Region" className="hidden max-w-[220px] truncate text-ink-2 sm:table-cell">
              {r.name}
            </Td>
            <Td label="City" className="hidden max-w-[140px] truncate text-ink-3 sm:table-cell">
              {r.city ?? "—"}
            </Td>
            <Td label="Country">
              <CountryFlag iso2={r.countryIso2} withName className="max-w-[120px] text-ink-2 lg:max-w-[160px]" />
            </Td>
            <Td label="AZs" numeric>
              {r.availabilityZones ?? <span className="text-ink-4">—</span>}
            </Td>
            <Td label="Launched" className="figure hidden text-[12px] text-ink-3 lg:table-cell">
              {fmtDate(r.launchedOn)}
            </Td>
            <Td label="Status">
              <CloudStatusBadge status={r.status} />
            </Td>
            <Td label="Sovereign" className="hidden lg:table-cell">
              {r.isSovereign ? (
                <Badge tone="accent" size="xs">
                  Sovereign
                </Badge>
              ) : (
                <span className="text-ink-4">—</span>
              )}
            </Td>
          </Tr>
        ))}
      </TBody>
    </Table>
  );
}

export default async function CloudRegionsPage({ searchParams }: { searchParams: Promise<SearchParams> }) {
  const sp = await searchParams;
  const provider = spGet(sp, "provider");
  const country = spGet(sp, "country")?.toUpperCase();
  const statusRaw = spGet(sp, "status");
  const status = (CLOUD_STATUSES as string[]).includes(statusRaw ?? "") ? (statusRaw as CloudStatus) : undefined;
  const sorted = spGet(sp, "sort") !== undefined;

  // Unfiltered list for facets + metrics; filtered list for the table (the API filters server-side).
  const [all, filtered] = await Promise.all([api.cloudRegions({ per_page: 400 }), provider || country || status ? api.cloudRegions({ per_page: 400, provider, country, status }) : null]);
  const ok = all.items.length > 0;
  const items = filtered ? filtered.items : all.items;

  const providers = Array.from(new Map(all.items.map((r) => [r.provider.slug, { slug: r.provider.slug, name: r.provider.name, n: 0 }])).values());
  for (const r of all.items) providers.find((p) => p.slug === r.provider.slug)!.n++;
  providers.sort((a, b) => b.n - a.n || a.name.localeCompare(b.name));
  const countries = Array.from(new Set(all.items.map((r) => r.countryIso2).filter((x): x is string => !!x))).sort((a, b) => countryName(a).localeCompare(countryName(b)));
  const operational = all.items.filter((r) => r.status === "operational").length;
  const announced = all.items.filter((r) => r.status === "announced").length;

  const chips: Chip[] = [];
  if (provider) chips.push({ key: "provider", label: "Provider", value: providers.find((p) => p.slug === provider)?.name ?? provider, removeHref: hrefWith(BASE, sp, { provider: undefined }) });
  if (country) chips.push({ key: "country", label: "Country", value: countryName(country), removeHref: hrefWith(BASE, sp, { country: undefined }) });
  if (status) chips.push({ key: "status", label: "Status", value: CLOUD_STATUS_LABEL[status], removeHref: hrefWith(BASE, sp, { status: undefined }) });

  const sort = sorted ? parseSort<SortKey>(sp, SORT_KEYS, { key: "provider", order: "asc" }) : null;
  let flat: CloudRegionSummary[] = items;
  if (sort) {
    const get = (r: CloudRegionSummary): string | number | null => {
      switch (sort.key) {
        case "provider":
          return r.provider.name;
        case "code":
          return r.code;
        case "name":
          return r.name;
        case "city":
          return r.city;
        case "country":
          return r.countryIso2 ? countryName(r.countryIso2) : null;
        case "azs":
          return r.availabilityZones;
        case "launched":
          return r.launchedOn;
        case "status":
          return r.status;
      }
    };
    flat = [...items].sort(compareBy(get, sort.order));
  }
  const groups = sorted
    ? []
    : providers
        .map((p) => ({ ...p, items: items.filter((r) => r.provider.slug === p.slug).sort((a, b) => a.code.localeCompare(b.code)) }))
        .filter((g) => g.items.length);

  return (
    <Page>
      <PageHeader
        eyebrow="Index"
        title="Cloud regions"
        description={ok ? `${fmtInt(all.total)} public cloud regions across ${providers.length} providers — code, location, availability zones, launch date, status and sovereignty, each linked to the provider's published source.` : "Public cloud regions by provider: code, location, availability zones, launch date, status and sovereignty."}
        aside={
          <Button href={routes.map("cr=1")} size="sm">
            Show on map
          </Button>
        }
      />
      {!ok && <OfflineNotice detail={all.total === 0 ? "no cloud regions returned" : undefined} className="mb-3" />}
      <p className="-mt-3 mb-4 text-[12px] text-ink-3">Coordinates are city-level (the published location), never the physical data center.</p>

      {ok && (
        <MetricRow cols={5} className="mb-5">
          <MetricCell>
            <Metric value={fmtInt(all.total)} label="Regions" size="sm" />
          </MetricCell>
          <MetricCell>
            <Metric value={fmtInt(providers.length)} label="Providers" size="sm" />
          </MetricCell>
          <MetricCell>
            <Metric value={fmtInt(countries.length)} label="Countries" size="sm" />
          </MetricCell>
          <MetricCell>
            <Metric value={fmtInt(operational)} label="Operational" size="sm" />
          </MetricCell>
          <MetricCell>
            <Metric value={fmtInt(announced)} label="Announced" size="sm" />
          </MetricCell>
        </MetricRow>
      )}

      <form method="get" action={BASE} className="flex flex-wrap items-center gap-2">
        <label className="sr-only" htmlFor="cr-provider">
          Provider
        </label>
        <select id="cr-provider" name="provider" defaultValue={provider ?? ""} className={`${sel} max-w-[46vw] sm:max-w-none`}>
          <option value="">All providers</option>
          {providers.map((p) => (
            <option key={p.slug} value={p.slug}>
              {p.name} ({p.n})
            </option>
          ))}
        </select>
        <label className="sr-only" htmlFor="cr-country">
          Country
        </label>
        <select id="cr-country" name="country" defaultValue={country ?? ""} className={`${sel} max-w-[46vw] sm:max-w-none`}>
          <option value="">All countries</option>
          {countries.map((c) => (
            <option key={c} value={c}>
              {countryName(c)}
            </option>
          ))}
        </select>
        <label className="sr-only" htmlFor="cr-status">
          Status
        </label>
        <select id="cr-status" name="status" defaultValue={status ?? ""} className={sel}>
          <option value="">Any status</option>
          {CLOUD_STATUSES.map((s) => (
            <option key={s} value={s}>
              {CLOUD_STATUS_LABEL[s]}
            </option>
          ))}
        </select>
        {sort && <input type="hidden" name="sort" value={sort.key} />}
        {sort && <input type="hidden" name="order" value={sort.order} />}
        <Button type="submit" size="sm" variant="primary">
          Apply
        </Button>
        <Link href={sorted ? hrefWith(BASE, sp, { sort: undefined, order: undefined }) : hrefWith(BASE, sp, { sort: "provider", order: "asc" })} className="ml-auto text-[12.5px] text-ink-3 hover:text-ink">
          {sorted ? "Group by provider" : "Flat sortable table"}
        </Link>
      </form>
      <FilterChips chips={chips} resetHref={BASE} className="mt-2" />

      {ok && items.length === 0 && <EmptyState className="mt-4" title="No cloud region matches these filters" description="Loosen a filter or clear them all." />}

      {!sorted && groups.length > 0 && <SectionNav items={groups.map((g) => ({ id: g.slug, label: g.name, count: g.items.length }))} className="mt-3" />}

      {sorted ? (
        <div className="mt-4">
          <RegionTable items={flat} showProvider sp={sp} sort={sort} />
        </div>
      ) : (
        <div className="mt-2 flex flex-col gap-8">
          {groups.map((g) => (
            <Section
              key={g.slug}
              id={g.slug}
              title={
                <Link href={routes.operator(g.slug)} className="hover:text-accent hover:underline">
                  {g.name}
                </Link>
              }
              description={`${g.items.length} ${g.items.length === 1 ? "region" : "regions"} · ${g.items.filter((r) => r.status === "operational").length} operational`}
              className="scroll-mt-28"
              aside={
                <Link href={hrefWith(BASE, sp, { provider: g.slug })} className="text-[12px] text-ink-3 hover:text-ink">
                  Only {g.name}
                </Link>
              }
            >
              <RegionTable items={g.items} showProvider={false} sp={sp} sort={null} />
            </Section>
          ))}
        </div>
      )}
    </Page>
  );
}