import type { CoverageRow, FacilityStatus, GridConstraintDTO, PipelineBreakdown } from "@dci/core";
import { ExternalLink, Info } from "lucide-react";
import Link from "next/link";
import type { ReactNode } from "react";
import { Badge, ConfidenceBadge, EstimateMark, type BadgeTone } from "@/components/ui/badge";
import { cn } from "@/components/ui/cn";
import { CountryFlag } from "@/components/ui/country-flag";
import { fmtDate, fmtInt, fmtMw, fmtPct, splitMw } from "@/lib/format";
import { SOURCE_KIND_LABEL, STATUS_LABEL, statusVar } from "@/lib/labels";
import { routes } from "@/lib/routes";

/* ------------------------------------------------------------------------------------------
   Intelligence primitives (server-safe). Shared by operator / market / country 2.0, the AI index,
   pulse, power, connectivity, coverage, compare and rankings. Everything here is honest by design:
   unknown = "—", estimates carry ≈, coverage is always shown next to a MW figure.
   ------------------------------------------------------------------------------------------ */

/** Inline coverage bar: figure + hairline track. Below 50 % the bar is dimmed (thin data). */
export function CoverageBar({ value, className, width = "w-[120px]", label, showPct = true }: { value: number | null | undefined; className?: string; width?: string; label?: string; showPct?: boolean }) {
  if (value === null || value === undefined || !Number.isFinite(value)) return <span className={cn("text-ink-4", className)}>—</span>;
  const pct = Math.max(0, Math.min(1, value));
  return (
    <span className={cn("inline-flex w-full items-center gap-2", width, className)} title={label ? `${label}: ${fmtPct(pct)}` : fmtPct(pct)} aria-label={`${label ?? "coverage"} ${fmtPct(pct)}`}>
      {showPct && <span className="figure w-10 shrink-0 text-right text-[12px] text-ink-2">{fmtPct(pct)}</span>}
      <span className="h-[3px] min-w-0 flex-1 bg-surface-3" aria-hidden>
        <span className={cn("block h-full", pct < 0.5 ? "bg-ink-4" : "bg-ink-2")} style={{ width: `${Math.max(pct > 0 ? 2 : 0, pct * 100)}%` }} />
      </span>
    </span>
  );
}

/** Sentence-style coverage caption: "12% of 137 facilities publish a MW figure". */
export function CoverageCaption({ coverage, facilities, what = "publish a MW figure", className }: { coverage: number | null | undefined; facilities?: number | null; what?: string; className?: string }) {
  if (coverage === null || coverage === undefined) return null;
  return (
    <p className={cn("text-[11.5px] text-ink-3", className)}>
      <span className="figure">{fmtPct(coverage)}</span>
      {facilities !== null && facilities !== undefined ? ` of ${fmtInt(facilities)} facilities ` : " of facilities "}
      {what} — totals are lower bounds from published figures only.
    </p>
  );
}

/** MW value with unit and optional ≈ mark; "—" when unknown (never 0). */
export function MwFigure({ mw, estimate, className, unitClassName }: { mw: number | null | undefined; estimate?: boolean; className?: string; unitClassName?: string }) {
  const s = splitMw(mw);
  if (!s) return <span className={cn("text-ink-4", className)}>—</span>;
  return (
    <span className={cn("figure", className)}>
      {estimate && <EstimateMark className="mr-0.5 text-[0.7em]" />}
      {s.value}
      <span className={cn("ml-1 text-[0.6em] font-medium text-ink-3", unitClassName)}>{s.unit}</span>
    </span>
  );
}

/** Note rendered verbatim from the API (`note` / `methodology` fields) — never paraphrased. */
export function ApiNote({ note, label = "Note", className, children }: { note?: string | null; label?: string; className?: string; children?: ReactNode }) {
  if (!note && !children) return null;
  return (
    <div className={cn("flex items-start gap-2 rounded-sm border border-dashed border-hair-2 px-3 py-2 text-[12px] leading-relaxed text-ink-2", className)} role="note">
      <Info className="mt-0.5 size-3.5 shrink-0 text-ink-3" strokeWidth={1.75} aria-hidden />
      <div className="min-w-0">
        <span className="label-caps mr-1.5">{label}</span>
        {note}
        {children}
      </div>
    </div>
  );
}

/** "Published figures only" methodology line under MW aggregates. */
export function PublishedOnlyNote({ className, extra }: { className?: string; extra?: ReactNode }) {
  return (
    <p className={cn("text-[11.5px] text-ink-4", className)}>
      Published figures only — nothing is imputed to facilities without a figure; estimates carry ≈. {extra}
      <Link href={`${routes.methodology()}#capacity`} className="underline decoration-hair-2 hover:text-ink">
        How capacity is counted
      </Link>
    </p>
  );
}

/** Honest empty state for a section whose data is not (yet) published or collected. */
export function HonestEmpty({ title, detail, className }: { title: string; detail?: ReactNode; className?: string }) {
  return (
    <div className={cn("rounded-sm border border-dashed border-hair-2 px-3 py-3 text-[12.5px] text-ink-3", className)}>
      <span className="font-medium text-ink-2">{title}</span>
      {detail && <span> — {detail}</span>}
    </div>
  );
}

/* ---------------------------------------------------------------- pipeline (facility lifecycle buckets) */

const PIPE_ROWS: Array<{ key: keyof Pick<PipelineBreakdown, "operational" | "construction" | "approved" | "announced">; label: string; status: FacilityStatus }> = [
  { key: "operational", label: "Operational", status: "operational" },
  { key: "construction", label: "Under construction", status: "under_construction" },
  { key: "approved", label: "Approved / permitting", status: "approved" },
  { key: "announced", label: "Announced / proposed", status: "announced" },
];

/**
 * Pipeline bars: facility counts and known MW by lifecycle bucket (containment-aware, published figures only),
 * then project records by stage. Bars are proportional to counts; MW is printed, never drawn when missing.
 */
export function PipelineBars({ pipeline, className, showProjects = true }: { pipeline: PipelineBreakdown; className?: string; showProjects?: boolean }) {
  const rows = PIPE_ROWS.map((r) => ({ ...r, count: pipeline[r.key].count, mw: pipeline[r.key].mw }));
  const max = Math.max(1, ...rows.map((r) => r.count));
  const projects = [...pipeline.projects].sort((a, b) => b.count - a.count);
  const pMax = Math.max(1, ...projects.map((p) => p.count));
  const total = rows.reduce((a, r) => a + r.count, 0);
  return (
    <div className={className}>
      {total === 0 ? (
        <HonestEmpty title="No facility in any lifecycle bucket" detail="facilities appear as connectors observe them" />
      ) : (
        <ol className="divide-y divide-hair">
          {rows.map((r) => (
            <li key={r.key} className="grid grid-cols-[minmax(0,1fr)_auto] items-center gap-x-3 py-2 sm:grid-cols-[180px_minmax(0,1fr)_90px_110px]">
              <div className="flex items-center gap-2 text-[13px] text-ink">
                <span aria-hidden className="inline-block size-2 rounded-full" style={{ background: statusVar(r.status) }} />
                {r.label}
              </div>
              <div className="order-last col-span-2 mt-1 h-[4px] w-full bg-surface-3 sm:order-none sm:col-span-1 sm:mt-0" aria-hidden>
                <div className="h-full" style={{ width: `${Math.max(r.count > 0 ? 1.5 : 0, (r.count / max) * 100)}%`, background: statusVar(r.status) }} />
              </div>
              <div className="figure text-right text-[12.5px] text-ink-2 sm:w-auto">
                {fmtInt(r.count)} <span className="text-ink-4">{r.count === 1 ? "site" : "sites"}</span>
              </div>
              <div className="figure hidden text-right text-[12.5px] sm:block">{r.mw === null ? <span className="text-ink-4" title="No published MW figure in this bucket">MW —</span> : fmtMw(r.mw)}</div>
            </li>
          ))}
        </ol>
      )}
      <div className="mt-2 flex flex-wrap items-center justify-between gap-x-4 gap-y-1">
        <CoverageCaption coverage={pipeline.mwCoverage} facilities={total} />
      </div>
      {showProjects && projects.length > 0 && (
        <div className="mt-4">
          <div className="label-caps mb-1.5">Project records by stage</div>
          <ol className="divide-y divide-hair">
            {projects.map((p) => (
              <li key={p.status} className="grid grid-cols-[minmax(0,1fr)_auto_auto] items-center gap-x-3 py-1.5 text-[12.5px]">
                <div className="flex min-w-0 items-center gap-2">
                  <span aria-hidden className="inline-block size-2 shrink-0 rounded-full" style={{ background: statusVar(p.status) }} />
                  <span className="truncate text-ink-2">{STATUS_LABEL[p.status]}</span>
                  <span className="hidden h-[3px] min-w-[40px] flex-1 bg-surface-3 sm:block" aria-hidden>
                    <span className="block h-full bg-ink-3" style={{ width: `${(p.count / pMax) * 100}%` }} />
                  </span>
                </div>
                <span className="figure text-ink-2">{fmtInt(p.count)}</span>
                <span className="figure w-[90px] text-right text-ink-2">{p.mw === null ? <span className="text-ink-4">MW —</span> : <>≈ {fmtMw(p.mw)}</>}</span>
              </li>
            ))}
          </ol>
          <p className="mt-1.5 text-[11px] text-ink-4">Project records are announcements, not facilities; their MW are planned figures (≈) and are never added to operational capacity.</p>
        </div>
      )}
    </div>
  );
}

/* ---------------------------------------------------------------- share list (geographic diversity, top operators…) */

export interface ShareItem {
  key: string;
  label: ReactNode;
  href?: string;
  /** primary count (facilities) */
  count: number;
  /** 0..1 share of the total */
  share: number;
  /** optional MW shown at the right */
  mw?: number | null;
  iso2?: string | null;
}

/** Ranked list with share bars — "Equinix · 23 facilities · 16.8 %". */
export function ShareList({ items, unit = "facilities", className, max }: { items: ShareItem[]; unit?: string; className?: string; max?: number }) {
  if (!items.length) return <HonestEmpty title="Nothing to rank yet" />;
  const m = max ?? Math.max(0.01, ...items.map((i) => i.share));
  return (
    <ol className={cn("divide-y divide-hair", className)}>
      {items.map((it, i) => {
        const row = (
          <div className="grid min-h-10 grid-cols-[auto_minmax(0,1fr)_auto] items-center gap-x-2 py-1.5 sm:min-h-0">
            <span className="figure w-5 text-right text-[11px] text-ink-4">{i + 1}</span>
            <div className="min-w-0">
              <div className="flex items-baseline justify-between gap-2">
                <span className="inline-flex min-w-0 items-center gap-1.5 truncate text-[13px] text-ink group-hover:text-accent">
                  {it.iso2 && <CountryFlag iso2={it.iso2} size={12} />}
                  <span className="truncate">{it.label}</span>
                </span>
                <span className="figure shrink-0 text-[11.5px] text-ink-3">
                  {fmtInt(it.count)} {it.count === 1 ? unit.replace(/ies$/, "y").replace(/(?<!ie)s$/, "") : unit}
                  {it.mw !== undefined && it.mw !== null && <span className="hidden sm:inline"> · {fmtMw(it.mw)}</span>}
                </span>
              </div>
              <div className="mt-1 h-[3px] w-full bg-surface-3" aria-hidden>
                <div className="h-full bg-ink-2" style={{ width: `${Math.max(1.5, (it.share / m) * 100)}%` }} />
              </div>
            </div>
            <span className="figure w-[52px] text-right text-[12.5px] text-ink-2">{fmtPct(it.share, it.share < 0.1 ? 1 : 0)}</span>
          </div>
        );
        return (
          <li key={it.key} className="group">
            {it.href ? (
              <Link href={it.href} className="block">
                {row}
              </Link>
            ) : (
              row
            )}
          </li>
        );
      })}
    </ol>
  );
}

/* ---------------------------------------------------------------- grid constraints */

export const GRID_KIND_LABEL: Record<string, string> = {
  moratorium: "Moratorium",
  grid_delay: "Grid delay",
  capacity_restriction: "Capacity restriction",
  load_cap: "Load cap",
  new_transmission: "New transmission",
  new_substation: "New substation",
  regulation: "Regulation",
  large_load_queue: "Large-load queue",
  power_agreement: "Power agreement",
  grid_connection: "Grid connection",
  grid_constraint: "Grid constraint",
  utility_event: "Utility event",
};

const GRID_KIND_TONE: Record<string, BadgeTone> = {
  moratorium: "danger",
  grid_delay: "warn",
  capacity_restriction: "warn",
  load_cap: "warn",
  large_load_queue: "warn",
  new_transmission: "ok",
  new_substation: "ok",
  regulation: "info",
  power_agreement: "accent",
  grid_connection: "info",
  grid_constraint: "warn",
  utility_event: "neutral",
};

export function GridKindBadge({ kind, size = "xs" }: { kind: string; size?: "xs" | "sm" }) {
  return (
    <Badge tone={GRID_KIND_TONE[kind] ?? "outline"} size={size} title={`Kind: ${GRID_KIND_LABEL[kind] ?? kind}`}>
      {GRID_KIND_LABEL[kind] ?? kind.replace(/_/g, " ")}
    </Badge>
  );
}

/** Grid constraint / power event list — each item links to its source; the kind is a badge. */
export function GridConstraintList({ items, className, showPlace = true, emptyTitle = "No grid constraint or power event recorded", emptyDetail = "detected grid, utility and power-agreement events appear here; nothing is inferred" }: { items: GridConstraintDTO[]; className?: string; showPlace?: boolean; emptyTitle?: string; emptyDetail?: ReactNode }) {
  if (!items.length) return <HonestEmpty title={emptyTitle} detail={emptyDetail} className={className} />;
  return (
    <ul className={cn("divide-y divide-hair", className)}>
      {items.map((c) => (
        <li key={c.id} className="py-2.5">
          <div className="flex flex-wrap items-center gap-x-2 gap-y-1">
            <GridKindBadge kind={c.kind} />
            {c.effectiveDate && (
              <time className="figure text-[11.5px] text-ink-3" dateTime={c.effectiveDate}>
                {fmtDate(c.effectiveDate)}
              </time>
            )}
            {showPlace && (c.metro || c.countryIso2) && (
              <span className="inline-flex items-center gap-1 text-[11.5px] text-ink-3">
                {c.countryIso2 && <CountryFlag iso2={c.countryIso2} size={11} />}
                {c.metro ? (
                  <Link href={routes.market(c.metro.slug)} className="hover:text-ink hover:underline">
                    {c.metro.name}
                  </Link>
                ) : null}
              </span>
            )}
            <ConfidenceBadge level={c.confidence} size="xs" className="ml-auto" />
          </div>
          <p className="mt-1 text-[13px] font-medium leading-snug text-ink">{c.title}</p>
          {c.summary && <p className="mt-0.5 line-clamp-2 text-[12.5px] text-ink-2">{c.summary}</p>}
          <a href={c.url} target="_blank" rel="noopener noreferrer" className="mt-1 inline-flex min-h-10 items-center gap-1 text-[11.5px] text-ink-3 hover:text-accent sm:min-h-6">
            {c.sourceName ?? "source"}
            {c.sourceKind && <span className="text-ink-4">· {SOURCE_KIND_LABEL[c.sourceKind]}</span>}
            <ExternalLink className="size-3" />
          </a>
        </li>
      ))}
    </ul>
  );
}

/* ---------------------------------------------------------------- coverage row → cells */

export const COVERAGE_COLUMNS: Array<{ key: keyof CoverageRow; label: string; short: string }> = [
  { key: "capacityCoverage", label: "Capacity (any MW figure)", short: "Capacity" },
  { key: "operatorCoverage", label: "Operator known", short: "Operator" },
  { key: "preciseLocationCoverage", label: "Precise location (exact / parcel / street)", short: "Precise location" },
  { key: "statusCoverage", label: "Lifecycle status known", short: "Status" },
  { key: "openingDateCoverage", label: "Opening date published", short: "Opening date" },
  { key: "multiSourceCoverage", label: "Backed by ≥ 2 sources", short: "Multi-source" },
  { key: "connectivityCoverage", label: "Carriers / IXPs known", short: "Connectivity" },
  { key: "primarySourceShare", label: "Share of fields from primary sources", short: "Primary sources" },
];

/** Compact coverage strip for one entity (operator / market / country page "coverage row"). */
export function CoverageStrip({ row, className }: { row: CoverageRow; className?: string }) {
  return (
    <div className={cn("grid grid-cols-2 gap-x-4 gap-y-3 sm:grid-cols-4", className)}>
      {COVERAGE_COLUMNS.map((c) => (
        <div key={c.key} className="min-w-0">
          <div className="label-caps truncate" title={c.label}>
            {c.short}
          </div>
          <CoverageBar value={row[c.key] as number} width="w-full" label={c.label} className="mt-1" />
        </div>
      ))}
      <div className="col-span-2 text-[11.5px] text-ink-3 sm:col-span-4">
        <span className="figure">{fmtInt(row.facilities)}</span> facilities · <span className="figure">{fmtInt(row.projects)}</span> projects (<span className="figure">{fmtInt(row.projectsWithLocation)}</span> with a location). Coverage says how much is known, not how much exists.
      </div>
    </div>
  );
}

/* ---------------------------------------------------------------- dense counter grid (pulse / momentum) */

export interface CounterItem {
  key: string;
  value: number | null | undefined;
  /** "new projects detected" — rendered as "17 new projects detected" */
  label: string;
  format?: "int" | "mw";
  href?: string;
  note?: ReactNode;
}

/** Dense grid of deterministic counters written as sentences; unknown values read "not published", never 0. */
export function CounterGrid({ items, suffix, className }: { items: CounterItem[]; suffix?: string; className?: string }) {
  return (
    <ul className={cn("grid grid-cols-1 gap-px overflow-hidden rounded-sm border border-hair bg-hair sm:grid-cols-2 lg:grid-cols-3", className)}>
      {items.map((it) => {
        const known = it.value !== null && it.value !== undefined;
        const v = it.format === "mw" ? fmtMw(it.value) : fmtInt(it.value);
        const inner = (
          <>
            <div className="flex items-baseline gap-1.5">
              <span className={cn("figure text-[22px] font-medium leading-none tracking-[-0.03em]", known ? "text-ink" : "text-ink-4")}>{known ? (it.format === "mw" ? v.split(" ")[0] : v) : "—"}</span>
              {known && it.format === "mw" && <span className="text-[11px] font-medium text-ink-3">{v.split(" ")[1]}</span>}
            </div>
            <div className="mt-1 text-[12.5px] leading-snug text-ink-2">
              {known ? it.label : <span className="text-ink-3">{it.label} — not published</span>}
              {suffix && known && <span className="text-ink-3"> {suffix}</span>}
            </div>
            {it.note && <div className="mt-0.5 text-[11px] text-ink-4">{it.note}</div>}
          </>
        );
        return (
          <li key={it.key} className="bg-surface">
            {it.href ? (
              <Link href={it.href} className="block h-full px-3 py-3 hover:bg-surface-2">
                {inner}
              </Link>
            ) : (
              <div className="h-full px-3 py-3">{inner}</div>
            )}
          </li>
        );
      })}
    </ul>
  );
}

/** Small "Compare with…" / cross link pill. */
export function PillLink({ href, children, className }: { href: string; children: ReactNode; className?: string }) {
  return (
    <Link href={href} className={cn("inline-flex h-10 items-center gap-1.5 rounded-sm border border-hair bg-surface px-2.5 text-[12.5px] font-medium text-ink hover:border-hair-2 hover:text-accent sm:h-8", className)}>
      {children}
    </Link>
  );
}