import type { OperatorComparison } from "@dci/core";
import type { Metadata } from "next";
import Link from "next/link";
import type { ReactNode } from "react";
import { Breadcrumbs } from "@/components/entity/breadcrumbs";
import { SourcesFooter } from "@/components/entity/sources-footer";
import { OperatorPicker } from "@/components/intelligence/compare/operator-picker";
import { CoverageBar, HonestEmpty, PublishedOnlyNote } from "@/components/intelligence/shared";
import { Badge } from "@/components/ui/badge";
import { Page, PageHeader, Section } from "@/components/ui/card";
import { CountryFlag } from "@/components/ui/country-flag";
import { EmptyState, OfflineNotice } from "@/components/ui/states";
import { api } from "@/lib/api";
import { fmtInt, fmtMw, fmtPct } from "@/lib/format";
import { OPERATOR_KIND_LABEL } from "@/lib/labels";
import { routes } from "@/lib/routes";
import { pageMetadata } from "@/lib/seo";
import type { SearchParams } from "@/lib/sort";

export const revalidate = 120;

const MAX = 5;

export const metadata: Metadata = pageMetadata({
  title: "Compare operators",
  description: "Side-by-side comparison of 2–5 data center operators: facilities, countries, markets, known MW with its coverage, pipeline, AI facilities, new markets entered and recent projects — published figures only.",
  path: routes.compareOperators(),
});

/* Presets verified against the index (top operators by facility count on 2026-09-12). */
const PRESETS: Array<{ label: string; slugs: string[] }> = [
  { label: "Equinix vs Digital Realty", slugs: ["equinix", "digital-realty"] },
  { label: "US wholesale: STACK · CyrusOne · Vantage · QTS", slugs: ["stack-infrastructure", "cyrusone", "vantage-data-centers", "qts"] },
  { label: "DataBank vs EdgeConneX", slugs: ["databank", "edgeconnex"] },
];

type Op = OperatorComparison["operators"][number];

function parseSlugs(sp: SearchParams): string[] {
  const raw = sp.slugs;
  const s = Array.isArray(raw) ? raw.join(",") : (raw ?? "");
  const out: string[] = [];
  for (const part of s.split(",")) {
    const v = part.trim().toLowerCase();
    if (v && /^[a-z0-9][a-z0-9-]*$/.test(v) && !out.includes(v)) out.push(v);
  }
  return out.slice(0, MAX);
}

const dash = <span className="text-ink-4">—</span>;
const mw = (v: number | null | undefined, est?: boolean) => (v === null || v === undefined ? dash : <span className="figure">{est ? "≈ " : ""}{fmtMw(v)}</span>);
const int = (v: number | null | undefined) => (v === null || v === undefined ? dash : <span className="figure">{fmtInt(v)}</span>);

interface RowDef {
  key: string;
  label: string;
  hint?: string;
  cell: (o: Op) => ReactNode;
  /** row belongs to a group header */
  group?: string;
}

function rows(): RowDef[] {
  const win = (o: Op, label: "12m" | "3y" | "5y") => o.velocity.windows.find((w) => w.label === label);
  return [
    { key: "kind", label: "Kind", cell: (o) => (o.kind ? OPERATOR_KIND_LABEL[o.kind] : dash) },
    { key: "hq", label: "Headquarters", cell: (o) => (o.hqCountryIso2 ? <CountryFlag iso2={o.hqCountryIso2} withName /> : dash) },
    { key: "facilities", label: "Facilities", group: "Footprint", cell: (o) => int(o.facilityCount) },
    { key: "countries", label: "Countries", cell: (o) => int(o.countryCount) },
    { key: "metros", label: "Markets", cell: (o) => int(o.metroCount) },
    { key: "known", label: "Known operational MW", group: "Capacity (published figures only)", hint: "Σ IT / total power over operational facilities", cell: (o) => mw(o.knownMw) },
    { key: "coverage", label: "Capacity coverage", hint: "share of facilities with any MW figure", cell: (o) => <CoverageBar value={o.coverage ?? o.mwCoverage ?? o.pipeline.mwCoverage} width="w-full max-w-[160px]" label="Capacity coverage" /> },
    { key: "construction", label: "Under construction MW", cell: (o) => mw(o.constructionMw ?? o.pipeline.construction.mw, true) },
    { key: "planned", label: "Planned MW", cell: (o) => mw(o.plannedMw ?? (o.pipeline.approved.mw === null && o.pipeline.announced.mw === null ? null : (o.pipeline.approved.mw ?? 0) + (o.pipeline.announced.mw ?? 0)), true) },
    { key: "p-op", label: "Operational sites", group: "Pipeline buckets", cell: (o) => int(o.pipeline.operational.count) },
    { key: "p-con", label: "Under construction sites", cell: (o) => int(o.pipeline.construction.count) },
    { key: "p-app", label: "Approved / permitting sites", cell: (o) => int(o.pipeline.approved.count) },
    { key: "p-ann", label: "Announced / proposed sites", cell: (o) => int(o.pipeline.announced.count) },
    { key: "projects", label: "Project records", cell: (o) => int(o.projectCount ?? o.pipeline.projects.reduce((a, p) => a + p.count, 0)) },
    { key: "pmw", label: "Project planned MW", cell: (o) => mw(o.projectPlannedMw, true) },
    { key: "ai", label: "AI facilities", group: "AI & cloud", hint: "confirmed + likely evidence", cell: (o) => int(o.aiCount) },
    { key: "cloud", label: "Cloud regions", cell: (o) => int(o.cloudRegionCount) },
    {
      key: "newmarkets",
      label: "New markets entered (12 m)",
      group: "Expansion",
      cell: (o) =>
        o.newMarkets12m.length ? (
          <span className="flex flex-wrap gap-1">
            {o.newMarkets12m.slice(0, 8).map((m) => (
              <Link key={m.id} href={routes.market(m.slug)} className="inline-flex h-10 items-center rounded-xs border border-hair bg-surface px-2 text-[11.5px] text-ink hover:text-accent sm:h-6 sm:px-1.5">
                {m.name}
              </Link>
            ))}
            {o.newMarkets12m.length > 8 && <span className="text-[11.5px] text-ink-4">+{o.newMarkets12m.length - 8}</span>}
          </span>
        ) : (
          <span className="text-ink-4">none</span>
        ),
    },
    { key: "v12", label: "New facilities · 12 m", cell: (o) => int(win(o, "12m")?.newFacilities) },
    { key: "v3", label: "New facilities · 3 y", cell: (o) => int(win(o, "3y")?.newFacilities) },
    { key: "v5", label: "New facilities · 5 y", cell: (o) => int(win(o, "5y")?.newFacilities) },
    { key: "c12", label: "New countries · 12 m", cell: (o) => int(win(o, "12m")?.newCountries) },
    { key: "np12", label: "New projects · 12 m", cell: (o) => int(win(o, "12m")?.newProjects) },
    {
      key: "recent",
      label: "Recent projects",
      group: "Projects",
      cell: (o) =>
        o.recentProjects.length ? (
          <ul className="flex flex-col gap-1">
            {o.recentProjects.slice(0, 3).map((p) => (
              <li key={p.id} className="min-w-0">
                <Link href={routes.project(p.slug)} className="block truncate text-[12.5px] text-ink hover:text-accent hover:underline" title={p.name}>
                  {p.name}
                </Link>
                <span className="figure text-[11px] text-ink-3">
                  {p.plannedMw !== null ? `≈ ${fmtMw(p.plannedMw)}` : "MW —"}
                  {p.countryIso2 ? ` · ${p.countryIso2}` : ""}
                </span>
              </li>
            ))}
          </ul>
        ) : (
          <span className="text-ink-4">none</span>
        ),
    },
  ];
}

function ComparisonGrid({ ops }: { ops: Op[] }) {
  const defs = rows();
  const cols = `minmax(150px,200px) repeat(${ops.length}, minmax(150px, 1fr))`;
  return (
    <>
      {/* ≥ 640 px: one column per operator (scrolls horizontally inside its own container for 4–5 operators) */}
      <div className="hidden overflow-x-auto rounded-sm border border-hair sm:block">
        <div role="table" aria-label="Operator comparison" className="min-w-[640px] text-[13px]" style={{ display: "grid", gridTemplateColumns: cols }}>
          <div role="row" className="contents">
            <div role="columnheader" className="label-caps sticky left-0 z-[1] border-b border-hair bg-surface px-3 py-2.5">
              Metric
            </div>
            {ops.map((o) => (
              <div key={o.id} role="columnheader" className="border-b border-l border-hair bg-surface px-3 py-2.5">
                <Link href={routes.operator(o.slug)} className="block truncate text-[13.5px] font-semibold text-ink hover:text-accent hover:underline" title={o.name}>
                  {o.name}
                </Link>
                <div className="mt-0.5 flex items-center gap-1.5 text-[11px] text-ink-3">
                  {o.kind && (
                    <Badge tone={o.kind === "hyperscaler" ? "accent" : "outline"} size="xs">
                      {OPERATOR_KIND_LABEL[o.kind]}
                    </Badge>
                  )}
                  {o.hqCountryIso2 && <CountryFlag iso2={o.hqCountryIso2} size={11} />}
                </div>
              </div>
            ))}
          </div>
          {defs.map((d) => (
            <div key={d.key} role="row" className="contents">
              {d.group && (
                <div role="rowheader" className="label-caps border-b border-hair bg-surface-2 px-3 py-1.5 text-ink-3" style={{ gridColumn: `1 / span ${ops.length + 1}` }}>
                  {d.group}
                </div>
              )}
              <div role="rowheader" className="sticky left-0 z-[1] border-b border-hair bg-paper px-3 py-2 text-ink-2">
                {d.label}
                {d.hint && <div className="text-[11px] text-ink-4">{d.hint}</div>}
              </div>
              {ops.map((o) => (
                <div key={o.id} role="cell" className="min-w-0 border-b border-l border-hair px-3 py-2 text-ink">
                  {d.cell(o)}
                </div>
              ))}
            </div>
          ))}
        </div>
      </div>
      {/* < 640 px: stacked per-operator cards */}
      <div className="flex flex-col gap-4 sm:hidden">
        {ops.map((o) => (
          <section key={o.id} className="rounded-sm border border-hair bg-surface" aria-label={o.name}>
            <div className="border-b border-hair px-3 py-2.5">
              <Link href={routes.operator(o.slug)} className="text-[14px] font-semibold text-ink hover:text-accent">
                {o.name}
              </Link>
              <div className="mt-0.5 flex items-center gap-1.5 text-[11px] text-ink-3">
                {o.kind && (
                  <Badge tone="outline" size="xs">
                    {OPERATOR_KIND_LABEL[o.kind]}
                  </Badge>
                )}
                {o.hqCountryIso2 && <CountryFlag iso2={o.hqCountryIso2} withName />}
              </div>
            </div>
            <dl className="divide-y divide-hair px-3">
              {defs
                .filter((d) => d.key !== "kind" && d.key !== "hq")
                .map((d) => (
                  <div key={d.key} className="grid grid-cols-[minmax(0,1fr)_minmax(0,1.2fr)] gap-x-3 py-2 text-[12.5px]">
                    <dt className="text-ink-3">{d.label}</dt>
                    <dd className="min-w-0 text-right text-ink [&_.flex-wrap]:justify-end">{d.cell(o)}</dd>
                  </div>
                ))}
            </dl>
          </section>
        ))}
      </div>
    </>
  );
}

export default async function CompareOperatorsPage({ searchParams }: { searchParams: Promise<SearchParams> }) {
  const sp = await searchParams;
  const slugs = parseSlugs(sp);
  const r = slugs.length >= 2 ? await api.compareOperators(slugs) : null;
  const ops = r?.ok ? r.data.operators : [];
  const names: Record<string, string> = {};
  for (const o of ops) names[o.slug] = o.name;
  const missing = slugs.filter((s) => !names[s]);
  // slugs picked but not yet resolved (< 2 selected): resolve names for the chips
  if (slugs.length === 1) {
    const one = await api.operator(slugs[0]!);
    if (one.ok) names[slugs[0]!] = one.data.name;
  }

  return (
    <Page>
      <Breadcrumbs items={[{ name: "Operators", href: routes.operators() }, { name: "Compare", href: routes.compareOperators() }]} className="pt-3" />
      <PageHeader eyebrow="Compare" title="Compare operators" description="Two to five operators side by side. Capacity figures are published values only and every operator carries its capacity coverage — a low coverage means the MW column understates reality." />

      <OperatorPicker slugs={slugs} names={names} />

      <div className="mt-6">
        {slugs.length < 2 ? (
          <EmptyState
            title={slugs.length === 1 ? "Add a second operator to compare" : "Pick two or more operators"}
            description="Use the search box above, or start from a preset."
            action={
              <ul className="flex flex-wrap justify-center gap-1.5">
                {PRESETS.map((p) => (
                  <li key={p.label}>
                    <Link href={routes.compareOperators(p.slugs)} className="inline-flex h-10 items-center rounded-sm border border-hair bg-surface px-2.5 text-[12.5px] text-ink hover:border-hair-2 hover:text-accent sm:h-8">
                      {p.label}
                    </Link>
                  </li>
                ))}
              </ul>
            }
          />
        ) : r && !r.ok ? (
          <>
            <OfflineNotice detail={r.error} className="mb-3" />
            <HonestEmpty title="Comparison unavailable" detail="the index API did not answer; the selection is kept in the URL" />
          </>
        ) : (
          <>
            {missing.length > 0 && <HonestEmpty className="mb-3" title={`Unknown operator ${missing.length === 1 ? "slug" : "slugs"}: ${missing.join(", ")}`} detail="not in the index — remove the chip or search again" />}
            {ops.length >= 2 ? (
              <Section title="Side by side" description={`${ops.length} operators · ${r?.data.generatedAt ? `computed ${new Date(r.data.generatedAt).toISOString().slice(0, 10)} UTC` : ""}`}>
                <ComparisonGrid ops={ops} />
                <PublishedOnlyNote className="mt-3" extra={<>Capacity coverage = facilities with any MW figure ÷ facilities ({ops.map((o) => `${o.name} ${fmtPct(o.coverage ?? o.mwCoverage ?? 0)}`).join(" · ")}). </>} />
              </Section>
            ) : (
              <HonestEmpty title="Fewer than two operators could be resolved" detail="check the slugs in the URL" />
            )}
          </>
        )}
      </div>

      <SourcesFooter sources={r?.ok ? r.sources : undefined} note="Comparison rows are read from each operator's record: counts are exact, MW figures are lower bounds from published values, and 'new facilities' rely on opening dates or first observation (see each operator's velocity section)." />
    </Page>
  );
}