import type { MetroSummary } from "@dci/core";
import type { Metadata } from "next";
import Link from "next/link";
import { Breadcrumbs } from "@/components/entity/breadcrumbs";
import { 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 } from "@/components/ui/states";
import { RowLink, TBody, THead, Table, Td, Th, Tr } from "@/components/ui/table";
import { api } from "@/lib/api";
import { fmtInt, fmtMw } from "@/lib/format";
import { routes } from "@/lib/routes";
import { pageMetadata } from "@/lib/seo";
import { compareBy, hrefWith, paginate, parseSort, sortTh, spGet, spInt, type SearchParams } from "@/lib/sort";
import { countryHref, countrySlugMap, pipelineMw } from "../country-links";

export const revalidate = 120;

export const metadata: Metadata = pageMetadata({
  title: "Data center markets",
  description: "Metro markets ranked by facilities, known capacity and pipeline — operators, cloud regions and internet exchanges per market.",
  path: routes.markets(),
});

const SORT_KEYS = ["facilities", "mw", "pipeline", "operators", "cloud", "name"] as const;
type SortKey = (typeof SORT_KEYS)[number];
const PER_PAGE = 50;
const BASE = routes.markets();

const getter: Record<SortKey, (m: MetroSummary) => number | string | null> = {
  facilities: (m) => m.facilityCount,
  mw: (m) => m.knownMw,
  pipeline: (m) => pipelineMw(m),
  operators: (m) => m.operatorCount,
  cloud: (m) => m.cloudRegionCount,
  name: (m) => m.name,
};

export default async function MarketsPage({ searchParams }: { searchParams: Promise<SearchParams> }) {
  const sp = await searchParams;
  const q = spGet(sp, "q");
  const country = spGet(sp, "country")?.toUpperCase();
  const sort = parseSort<SortKey>(sp, SORT_KEYS, { key: "facilities", order: "desc" });
  const [res, { map, countries }] = await Promise.all([api.metros({ q, country }), countrySlugMap()]);
  const ok = res.items.length > 0;

  const sorted = [...res.items].sort((a, b) => compareBy(getter[sort.key], sort.order)(a, b) || a.name.localeCompare(b.name));
  const { items, page } = paginate(sorted, spInt(sp, "page"), PER_PAGE);
  const th = (key: SortKey) => sortTh(BASE, sp, sort, key);

  const chips: Chip[] = [];
  if (q) chips.push({ key: "q", label: "Search", value: q, removeHref: hrefWith(BASE, sp, { q: undefined }) });
  if (country) chips.push({ key: "country", label: "Country", value: countries.find((c) => c.iso2 === country)?.name ?? country, removeHref: hrefWith(BASE, sp, { country: undefined }) });

  return (
    <Page>
      <Breadcrumbs items={[{ name: "Data centers", href: routes.datacenters() }, { name: "Markets", href: BASE }]} className="pt-3" />
      <PageHeader
        eyebrow="Index"
        title="Data center markets"
        description={ok ? `${fmtInt(sorted.length)} metro markets. Ranked by facilities, known capacity and pipeline; MW figures are lower bounds from published values only.` : "Metro markets ranked by facilities, known capacity and pipeline."}
        aside={
          <Button href={routes.map()} size="sm">
            Open map
          </Button>
        }
      />
      <form method="get" action={BASE} className="flex flex-col gap-2 border-y border-hair py-3 sm:flex-row sm:items-center">
        <input type="search" name="q" defaultValue={q ?? ""} placeholder="Search markets or sub-markets" aria-label="Search markets" className="h-9 min-w-0 flex-1 rounded-sm border border-hair-2 bg-surface px-3 text-[13px] text-ink outline-none placeholder:text-ink-4 focus-visible:ring-2 focus-visible:ring-accent" />
        <div className="flex gap-2">
          <select name="country" defaultValue={country ?? ""} aria-label="Country" className="h-9 min-w-0 flex-1 rounded-sm border border-hair-2 bg-surface px-2 text-[13px] text-ink outline-none focus-visible:ring-2 focus-visible:ring-accent sm:w-[200px] sm:flex-none">
            <option value="">All countries</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" variant="primary" size="md">
            Filter
          </Button>
        </div>
      </form>
      <FilterChips chips={chips} resetHref={BASE} className="py-2" />

      <div className="pt-1">
        {items.length === 0 ? (
          <EmptyState compact title={ok ? "No markets match" : "Markets unavailable"} description={ok ? "Try a different search or country." : "The index API is not reachable right now."} />
        ) : (
          <Table>
            <THead>
              <tr>
                <Th {...th("name")}>Market</Th>
                <Th className="hidden sm:table-cell">Country</Th>
                <Th numeric {...th("facilities")}>
                  Facilities
                </Th>
                <Th className="hidden lg:table-cell" title="operational · construction · planned">
                  Op · Con · Plan
                </Th>
                <Th numeric {...th("mw")}>
                  Known MW
                </Th>
                <Th numeric {...th("pipeline")}>
                  Pipeline
                </Th>
                <Th numeric className="hidden md:table-cell" {...th("operators")}>
                  Operators
                </Th>
                <Th numeric className="hidden md:table-cell" {...th("cloud")}>
                  Cloud regions
                </Th>
                <Th numeric className="hidden lg:table-cell">
                  IXPs
                </Th>
                <Th numeric className="hidden lg:table-cell">
                  Projects
                </Th>
              </tr>
            </THead>
            <TBody>
              {items.map((m) => {
                const pipe = pipelineMw(m);
                const cHref = countryHref(map, m.countryIso2);
                return (
                  <Tr key={m.id}>
                    <Td primary>
                      <RowLink href={routes.market(m.slug)}>{m.name}</RowLink>
                      <div className="text-[11.5px] text-ink-3 sm:hidden">
                        {m.countryName ?? m.countryIso2}
                        {m.regionName && m.regionName !== m.name ? ` · ${m.regionName}` : ""}
                      </div>
                    </Td>
                    <Td label="Country" className="hidden sm:table-cell">
                      {cHref ? (
                        <Link href={cHref} className="text-ink-2 hover:text-ink hover:underline">
                          <CountryFlag iso2={m.countryIso2} withName className="max-w-[180px]" />
                        </Link>
                      ) : (
                        <CountryFlag iso2={m.countryIso2} withName />
                      )}
                    </Td>
                    <Td label="Facilities" numeric lead>
                      {fmtInt(m.facilityCount)}
                    </Td>
                    <Td label="Op · Con · Plan" className="figure hidden text-[12px] text-ink-3 lg:table-cell" title="operational · under construction · planned">
                      {fmtInt(m.operationalCount)} · {fmtInt(m.constructionCount)} · {fmtInt(m.plannedCount)}
                    </Td>
                    <Td label="Known MW" numeric>
                      {m.knownMw === null ? <span className="text-ink-4">—</span> : fmtMw(m.knownMw)}
                    </Td>
                    <Td label="Pipeline" numeric>
                      {pipe === null ? (
                        <span className="text-ink-4">—</span>
                      ) : (
                        <span title="Under construction + planned power (published figures only)">
                          <EstimateMark className="mr-0.5" />
                          {fmtMw(pipe)}
                        </span>
                      )}
                    </Td>
                    <Td label="Operators" numeric className="hidden md:table-cell">
                      {fmtInt(m.operatorCount)}
                    </Td>
                    <Td label="Cloud regions" numeric className="hidden md:table-cell">
                      {m.cloudRegionCount ? fmtInt(m.cloudRegionCount) : <span className="text-ink-4">—</span>}
                    </Td>
                    <Td label="IXPs" numeric className="hidden lg:table-cell">
                      {m.ixpCount ? fmtInt(m.ixpCount) : <span className="text-ink-4">—</span>}
                    </Td>
                    <Td label="Projects" numeric className="hidden lg:table-cell">
                      {m.projectCount ? fmtInt(m.projectCount) : <span className="text-ink-4">—</span>}
                    </Td>
                  </Tr>
                );
              })}
            </TBody>
          </Table>
        )}
      </div>
      <Pagination page={page} perPage={PER_PAGE} total={sorted.length} hrefFor={(p) => hrefWith(BASE, sp, { page: p > 1 ? p : undefined })} label="markets" className="mt-3" />
      <p className="mt-6 text-[11.5px] text-ink-4">
        Facilities are assigned to a market when they lie within its radius or their city matches one of its sub-markets; markets never span borders.{" "}
        <Link href={routes.methodology()} className="underline decoration-hair-2 hover:text-ink">
          Methodology
        </Link>
      </p>
    </Page>
  );
}