import type { DashboardStats } from "@dci/core";
import Link from "next/link";
import { cn } from "@/components/ui/cn";
import { fmtInt, fmtPct, splitMw } from "@/lib/format";
import { routes } from "@/lib/routes";

interface Cell {
  label: string;
  value: string | null;
  unit?: string;
  caveat: string;
  href: string;
  accent?: boolean;
}

/**
 * Global ticker (§16): FACILITIES · KNOWN OPERATIONAL CAPACITY · UNDER CONSTRUCTION · PROJECTS · COUNTRIES · NEW EVENTS 24 H.
 * Every figure carries its coverage caveat on the line below — totals are lower bounds computed from published figures.
 */
export function GlobalTicker({ stats, className }: { stats: DashboardStats | null; className?: string }) {
  const s = stats;
  const op = splitMw(s?.knownOperationalMw);
  const uc = splitMw(s?.constructionMw);
  const cells: Cell[] = [
    { label: "Facilities", value: s ? fmtInt(s.facilities) : null, caveat: s ? `${fmtInt(s.operational)} operational · ${fmtInt(s.metros)} markets` : "indexed records", href: routes.datacenters() },
    { label: "Known operational capacity", value: op?.value ?? null, unit: op?.unit ?? "MW", caveat: s ? `MW published for ${fmtPct(s.mwCoverage)} of facilities — lower bound` : "published figures only", href: routes.datacenters("has_mw=1&status=operational&sort=mw") },
    { label: "Under construction", value: uc?.value ?? null, unit: uc?.unit ?? "MW", caveat: s ? `${fmtInt(s.underConstruction)} facilities · published MW only` : "published MW only", href: routes.datacenters("status=under_construction"), accent: true },
    { label: "Projects", value: s ? fmtInt(s.projects) : null, caveat: s ? `${fmtInt(s.planned)} planned facilities` : "pipeline records", href: routes.projects() },
    { label: "Countries", value: s ? fmtInt(s.countries) : null, caveat: s ? `${fmtInt(s.operators)} operators` : "with ≥ 1 indexed facility", href: routes.countries() },
    { label: "New events · 24 h", value: s ? fmtInt(s.events24h) : null, caveat: s ? `${fmtInt(s.events7d)} in 7 days · deduplicated` : "detected changes", href: routes.live(), accent: true },
  ];
  return (
    <div className={cn("grid grid-cols-2 border-y border-hair sm:grid-cols-3 xl:grid-cols-6 [&>*]:min-w-0 max-sm:[&>*:nth-child(even)]:border-l max-sm:[&>*:nth-child(n+3)]:border-t sm:max-xl:[&>*:nth-child(n+4)]:border-t sm:max-xl:[&>*:not(:nth-child(3n+1))]:border-l xl:[&>*+*]:border-l [&>*]:border-hair", className)} aria-label="Global ticker">
      {cells.map((c) => (
        <Link key={c.label} href={c.href} className="group block px-3 py-3 hover:bg-surface-2/60 sm:px-4">
          <div className="label-caps mb-1 truncate">{c.label}</div>
          <div className="flex items-baseline gap-1 leading-none">
            <span className={cn("figure text-[22px] font-medium tracking-[-0.03em] sm:text-[26px]", c.value === null ? "text-ink-4" : c.accent ? "text-accent-ink group-hover:text-accent" : "text-ink group-hover:text-accent")}>{c.value ?? "—"}</span>
            {c.unit && c.value !== null && <span className="text-[12px] font-medium text-ink-3">{c.unit}</span>}
          </div>
          <div className="mt-1 truncate text-[11px] leading-tight text-ink-3" title={c.caveat}>
            {c.caveat}
          </div>
        </Link>
      ))}
    </div>
  );
}