import type { FacilityStatus } from "@dci/core";
import Link from "next/link";
import { cn } from "@/components/ui/cn";
import { StatusDot } from "@/components/ui/status-dot";
import { fmtInt, splitMw } from "@/lib/format";
import { routes } from "@/lib/routes";

export interface FunnelInput {
  /** project counts + published MW by status */
  byStatus: Array<{ status: FacilityStatus; count: number; mw: number | null }>;
  /** facilities opened in the last 12 months (from a pulse / velocity window) — null when the API does not expose it */
  openedLast12m?: { count: number; mw: number | null } | null;
}

const STEPS: Array<{ key: string; label: string; statuses: FacilityStatus[]; tone: FacilityStatus }> = [
  { key: "announced", label: "Announced", statuses: ["rumored", "proposed", "announced", "expansion"], tone: "announced" },
  { key: "permitting", label: "Permitting", statuses: ["permitting"], tone: "permitting" },
  { key: "approved", label: "Approved", statuses: ["approved"], tone: "approved" },
  { key: "construction", label: "Construction", statuses: ["under_construction", "partially_operational"], tone: "under_construction" },
];

/**
 * Construction pipeline funnel (§33): ANNOUNCED → PERMITTING → APPROVED → CONSTRUCTION → OPENED, each with project
 * count and the sum of published MW (GW when ≥ 1 000). Bars are proportional to the count; MW are labelled
 * "known published MW only" because most projects do not publish a figure.
 */
export function PipelineFunnel({ data, className, compact }: { data: FunnelInput; className?: string; compact?: boolean }) {
  const agg = STEPS.map((s) => {
    const rows = data.byStatus.filter((r) => s.statuses.includes(r.status));
    return { ...s, count: rows.reduce((a, r) => a + r.count, 0), mw: rows.some((r) => r.mw !== null) ? rows.reduce((a, r) => a + (r.mw ?? 0), 0) : null };
  });
  const opened = data.openedLast12m ?? null;
  const delayed = data.byStatus.filter((r) => r.status === "delayed" || r.status === "cancelled");
  const max = Math.max(1, ...agg.map((a) => a.count), opened?.count ?? 0);
  const cells = [...agg.map((a) => ({ key: a.key, label: a.label, count: a.count, mw: a.mw, tone: a.tone as FacilityStatus, href: routes.projects(`status=${a.statuses.join(",")}`) })), { key: "opened", label: "Opened · 12 m", count: opened?.count ?? null, mw: opened?.mw ?? null, tone: "operational" as FacilityStatus, href: routes.datacenters("status=operational&sort=opened") }];
  return (
    <div className={className}>
      <ol className={cn("grid gap-x-3 gap-y-3", compact ? "grid-cols-2 sm:grid-cols-3 lg:grid-cols-5" : "grid-cols-2 sm:grid-cols-5")}>
        {cells.map((c) => {
          const s = splitMw(c.mw);
          const pct = c.count === null ? 0 : Math.max(2, (c.count / max) * 100);
          return (
            <li key={c.key} className="min-w-0">
              <Link href={c.href} className="group block">
                <div className="label-caps mb-1 flex min-w-0 items-center gap-1.5">
                  <StatusDot status={c.tone} size={7} /> <span className="truncate">{c.label}</span>
                </div>
                <div className={cn("figure font-medium leading-none tracking-[-0.02em] text-ink group-hover:text-accent", compact ? "text-[18px]" : "text-[22px] sm:text-[26px]")}>{c.count === null ? <span className="text-ink-4">—</span> : fmtInt(c.count)}</div>
                <div className="mt-1.5 h-[3px] w-full bg-surface-3">
                  <div className="h-full" style={{ width: `${pct}%`, background: `var(--st-${c.tone === "under_construction" ? "construction" : c.tone === "announced" ? "planned" : c.tone === "approved" || c.tone === "permitting" ? "permitting" : "operational"})` }} />
                </div>
                <div className="figure mt-1 text-[11.5px] text-ink-3">{c.count === null ? "not tracked as projects" : s ? `${s.value} ${s.unit}` : c.count > 0 ? "no MW published" : "—"}</div>
              </Link>
            </li>
          );
        })}
      </ol>
      <div className="mt-2 flex flex-wrap items-center justify-between gap-x-4 gap-y-1 text-[11px] text-ink-4">
        <span className="label-caps text-ink-4">Known published MW only</span>
        {delayed.length > 0 && (
          <span>
            {delayed.map((d, i) => (
              <span key={d.status}>
                {i > 0 && " · "}
                <Link href={routes.projects(`status=${d.status}`)} className="hover:text-ink">
                  {fmtInt(d.count)} {d.status}
                </Link>
              </span>
            ))}
          </span>
        )}
      </div>
    </div>
  );
}