import type { Ranking } 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 { Card, CardBody, CardHeader, Page, PageHeader, Section } from "@/components/ui/card";
import { BarList } from "@/components/ui/charts";
import { EmptyState, OfflineNotice } from "@/components/ui/states";
import { api } from "@/lib/api";
import { fmtDate, fmtInt } from "@/lib/format";
import { routes } from "@/lib/routes";
import { pageMetadata } from "@/lib/seo";
import { SCOPE_LABEL, SCOPE_ORDER, firstSentence, fmtRankValue, rowHref } from "../ranking-format";

export const revalidate = 120;

export const metadata: Metadata = pageMetadata({
  title: "Rankings",
  description: "Countries, markets and operators ranked by facilities, known capacity and pipeline. Every MW-based ranking carries its coverage; entities below the coverage gate are excluded, not estimated.",
  path: routes.rankings(),
});

/* Verbatim from docs/RANKINGS.md — “Definitions shared by all rankings”. */
const DEFINITIONS: Array<{ term: string; text: string }> = [
  { term: "Known MW", text: "Σ over operational facilities of IT capacity, or total power when the operator publishes only that. Figures marked as estimates count only when no measured figure exists for the facility, and the facility is flagged mw_is_estimate. We never impute MW to facilities without a published or filed figure." },
  { term: "Pipeline MW", text: "Σ over facilities not yet operational of planned power (or IT/total power when no planned figure is published), split into planned MW (planning statuses) and construction MW (under construction)." },
  { term: "Coverage", text: "Facilities with any MW figure ÷ facilities." },
  { term: "Coverage gate", text: "MW-based and per-capita rankings exclude entities with fewer than 5 facilities or coverage below 35 % (minCoverage), so that thin data does not produce spurious leaders. Count-based rankings have no gate." },
  { term: "Delta", text: "Rank change versus the previous snapshot of the same ranking (positive = moved up)." },
];

function RankingCard({ r }: { r: Ranking }) {
  const top = (r.rows ?? []).slice(0, 3);
  return (
    <li className="py-4 first:pt-0 last:pb-0">
      <div className="grid gap-3 md:grid-cols-[minmax(0,1fr)_280px] md:gap-6">
        <div className="min-w-0">
          <div className="flex flex-wrap items-center gap-2">
            <Link href={routes.ranking(r.key)} className="text-[14.5px] font-semibold text-ink hover:text-accent hover:underline">
              {r.label}
            </Link>
            <Badge tone="outline" size="xs" mono>
              {r.unit}
            </Badge>
          </div>
          <p className="mt-1 line-clamp-2 text-[12.5px] text-ink-2">{firstSentence(r.methodology ?? "")}</p>
          <div className="mt-1.5 flex flex-wrap items-center gap-x-3 gap-y-0.5 text-[11.5px] text-ink-3">
            {r.total > 0 ? (
              <span className="figure">
                {fmtInt(r.total)} {r.total === 1 ? "entity" : "entities"} ranked
              </span>
            ) : (
              <span className="text-ink-4">{/mw|per/i.test(r.unit) ? "No entity meets the coverage gate yet" : "No rows computed yet"}</span>
            )}
            <span className="figure">Computed {fmtDate(r.computedAt)}</span>
            <Link href={routes.ranking(r.key)} className="text-ink-2 hover:text-accent">
              Full ranking →
            </Link>
          </div>
        </div>
        {top.length > 0 && (
          <div className="min-w-0">
            <BarList items={top.map((row) => ({ label: row.name, value: row.value, href: rowHref(row, r.scope), rank: row.rank, coverage: row.coverage, display: fmtRankValue(row.value, r.unit) }))} showRank />
          </div>
        )}
      </div>
    </li>
  );
}

export default async function RankingsPage() {
  const list = await api.rankings();
  const ok = list.length > 0;
  const groups = SCOPE_ORDER.map((scope) => ({ scope, items: list.filter((r) => r.scope === scope).sort((a, b) => a.label.localeCompare(b.label)) })).filter((g) => g.items.length);

  return (
    <Page>
      <PageHeader
        eyebrow="Rankings"
        title="Rankings"
        description="Countries, markets and operators ranked by facilities, known capacity and pipeline. Every MW-based ranking carries its coverage; entities below the coverage gate are excluded, not estimated."
      />
      {!ok && <OfflineNotice detail="rankings unavailable" className="mb-3" />}
      {ok && <SectionNav items={groups.map((g) => ({ id: g.scope, label: SCOPE_LABEL[g.scope], count: g.items.length }))} className="mb-4" />}
      {!ok && <EmptyState title="Rankings unavailable" description="The index API did not return any ranking. They are recomputed by the worker after each crawl." />}
      <p className="mb-6 rounded-sm border border-dashed border-hair-2 px-3 py-2 text-[12.5px] leading-relaxed text-ink-2">
        <span className="label-caps mr-1.5">Method</span>
        Known / published figures only — every MW value is the sum of figures a source published or filed (containment-aware: a campus and its buildings are never both counted); entities without a figure are absent, not estimated. MW-based rankings apply a coverage gate (≥ 5 facilities and ≥ 35 % of them with a figure), so a short list means thin disclosure, not few players. Count-based rankings have no gate. AI, project and IXP rankings appear here as soon as the worker computes them.
      </p>

      <div className="flex flex-col gap-8">
        {groups.map((g) => (
          <Section key={g.scope} id={g.scope} title={SCOPE_LABEL[g.scope]} description={`${g.items.length} ${g.items.length === 1 ? "ranking" : "rankings"}`} className="scroll-mt-28">
            <ul className="divide-y divide-hair">
              {g.items.map((r) => (
                <RankingCard key={r.key} r={r} />
              ))}
            </ul>
          </Section>
        ))}
      </div>

      <Card className="mt-10">
        <CardHeader title="Definitions shared by all rankings" description="Verbatim from the ranking methodology." />
        <CardBody>
          <dl className="grid gap-3 text-[13px] text-ink-2 sm:grid-cols-[140px_minmax(0,1fr)] sm:gap-x-6 sm:gap-y-2">
            {DEFINITIONS.map((d) => (
              <div key={d.term} className="contents">
                <dt className="font-medium text-ink">{d.term}</dt>
                <dd className="mb-2 sm:mb-0">{d.text}</dd>
              </div>
            ))}
          </dl>
          <p className="mt-4 text-[12.5px] text-ink-3">
            Facility = a live record (merged duplicates excluded), any status. Operational = operational, partially operational or expansion. Under construction = under_construction. Planned = rumored, proposed, announced, permitting, approved or delayed.{" "}
            <Link href={`${routes.methodology()}#rankings`} className="text-ink underline decoration-hair-2 hover:text-accent">
              Full methodology
            </Link>
          </p>
        </CardBody>
      </Card>
    </Page>
  );
}