import type { FacilityStatus, ProjectSummary } from "@dci/core";
import { partialDateSortKey } from "@dci/core";
import Link from "next/link";
import { AiMark, EstimateMark, PrecisionBadge, ScopeBadge, StatusBadge } from "@/components/ui/badge";
import { cn } from "@/components/ui/cn";
import { CountryFlag } from "@/components/ui/country-flag";
import { EmptyState } from "@/components/ui/states";
import { StatusDot } from "@/components/ui/status-dot";
import { fmtInt, fmtMw, fmtUsd, placeLine } from "@/lib/format";
import { fmtPartialDateSafe } from "@/lib/format-project";
import { STATUS_SHORT, isSiteScopeLabel } from "@/lib/labels";
import { routes } from "@/lib/routes";

/* ------------------------------------------------------------------ shared dense card */

function mwCell(p: ProjectSummary) {
  if (p.plannedMw === null) return <span className="text-ink-4">—</span>;
  const site = p.capacityScope === null || p.capacityScope === undefined || isSiteScopeLabel(p.capacityScope);
  if (!site) return <span className="text-ink-4" title={`${fmtMw(p.plannedMw)} is a ${p.capacityScope}-level figure, not this site's`}>— <ScopeBadge scope={p.capacityScope} className="align-middle" /></span>;
  return (
    <span>
      <EstimateMark className="mr-0.5" />
      {fmtMw(p.plannedMw)}
    </span>
  );
}

export function ProjectCard({ p, showStatus = true, className }: { p: ProjectSummary; showStatus?: boolean; className?: string }) {
  return (
    <article className={cn("relative rounded-sm border border-hair bg-surface px-2.5 py-2 text-[12.5px]", className)}>
      <div className="flex items-start justify-between gap-2">
        <Link href={routes.project(p.slug)} className="min-w-0 font-medium leading-snug text-ink hover:text-accent after:absolute after:inset-0 after:content-['']">
          <span className="line-clamp-2">{p.name}</span>
        </Link>
        <span className="figure shrink-0 text-[13px] font-medium text-ink">{mwCell(p)}</span>
      </div>
      <div className="mt-1 flex flex-wrap items-center gap-x-1.5 gap-y-1 text-[11.5px] text-ink-3">
        {p.operator ? <span className="truncate text-ink-2">{p.operator.name}</span> : <span>Operator unknown</span>}
        <span aria-hidden>·</span>
        <CountryFlag iso2={p.countryIso2} size={11} />
        <span className="truncate">{p.metro?.name ?? placeLine(p)}</span>
      </div>
      <div className="mt-1.5 flex flex-wrap items-center gap-1">
        {showStatus && <StatusBadge status={p.status} short size="xs" />}
        {p.isAi && <AiMark evidence={p.aiEvidence} />}
        {p.geoPrecision && p.geoPrecision !== "unknown" && p.geoPrecision !== "exact" && <PrecisionBadge precision={p.geoPrecision} size="xs" />}
        <span className="figure ml-auto text-[11px] text-ink-3" title="Expected opening">
          {p.expectedOpening ? fmtPartialDateSafe(p.expectedOpening) : "TBD"}
        </span>
      </div>
    </article>
  );
}

/* ------------------------------------------------------------------ TIMELINE */

/** Projects grouped by expected opening year (undated last), each year with its published-MW sum. */
export function ProjectsTimeline({ items }: { items: ProjectSummary[] }) {
  if (!items.length) return <EmptyState compact title="No projects match these filters" />;
  const groups = new Map<string, ProjectSummary[]>();
  for (const p of items) {
    const k = p.expectedOpening ? p.expectedOpening.slice(0, 4) : "TBD";
    if (!groups.has(k)) groups.set(k, []);
    groups.get(k)!.push(p);
  }
  const keys = Array.from(groups.keys()).sort((a, b) => (a === "TBD" ? 1 : b === "TBD" ? -1 : a.localeCompare(b)));
  return (
    <ol className="relative ml-2 border-l border-hair">
      {keys.map((k) => {
        const list = groups.get(k)!.sort((a, b) => partialDateSortKey((a.expectedOpening ?? "9999").slice(0, 10)) - partialDateSortKey((b.expectedOpening ?? "9999").slice(0, 10)));
        const mw = list.filter((p) => p.plannedMw !== null && (p.capacityScope == null || isSiteScopeLabel(p.capacityScope))).reduce((a, p) => a + (p.plannedMw ?? 0), 0);
        const withMw = list.filter((p) => p.plannedMw !== null).length;
        return (
          <li key={k} className="relative pb-6 pl-5 last:pb-0">
            <span aria-hidden className={cn("absolute -left-[5px] top-[7px] size-[9px] rounded-full ring-2 ring-paper", k === "TBD" ? "border border-hair-2 bg-paper" : "bg-ink")} />
            <div className="mb-2 flex flex-wrap items-baseline gap-x-3 gap-y-0.5">
              <h3 className="figure text-[16px] font-semibold text-ink">{k === "TBD" ? "Expected opening not published" : k}</h3>
              <span className="figure text-[12px] text-ink-3">
                {fmtInt(list.length)} {list.length === 1 ? "project" : "projects"}
                {mw > 0 && <> · ≈ {fmtMw(mw)} published ({fmtInt(withMw)} of {fmtInt(list.length)} with a figure)</>}
              </span>
            </div>
            <div className="grid gap-2 sm:grid-cols-2 lg:grid-cols-3">
              {list.map((p) => (
                <ProjectCard key={p.id} p={p} />
              ))}
            </div>
          </li>
        );
      })}
    </ol>
  );
}

/* ------------------------------------------------------------------ KANBAN */

const KANBAN: FacilityStatus[] = ["rumored", "proposed", "announced", "permitting", "approved", "under_construction", "partially_operational", "delayed", "cancelled"];

export function ProjectsKanban({ items, counts }: { items: ProjectSummary[]; counts?: Partial<Record<FacilityStatus, number>> }) {
  if (!items.length) return <EmptyState compact title="No projects match these filters" />;
  const cols = KANBAN.map((s) => ({ s, list: items.filter((p) => p.status === s || (s === "announced" && p.status === "expansion")) })).filter((c) => c.list.length || (counts?.[c.s] ?? 0) > 0);
  return (
    <div className="-mx-3 overflow-x-auto px-3 pb-2 no-scrollbar sm:mx-0 sm:px-0">
      <ol className="flex min-w-max gap-3" aria-label="Projects by stage">
        {cols.map((c) => {
          const mw = c.list.filter((p) => p.plannedMw !== null && (p.capacityScope == null || isSiteScopeLabel(p.capacityScope))).reduce((a, p) => a + (p.plannedMw ?? 0), 0);
          return (
            <li key={c.s} className="w-[260px] shrink-0 sm:w-[280px]">
              <div className="mb-2 flex items-baseline gap-2 border-b-2 pb-1.5" style={{ borderColor: `var(--st-${c.s === "under_construction" ? "construction" : c.s === "announced" || c.s === "proposed" ? "planned" : c.s === "approved" || c.s === "permitting" ? "permitting" : c.s === "partially_operational" ? "operational" : c.s === "delayed" ? "delayed" : c.s === "cancelled" ? "closed" : "rumored"})` }}>
                <StatusDot status={c.s} size={7} />
                <h3 className="text-[12.5px] font-semibold uppercase tracking-[0.06em] text-ink">{STATUS_SHORT[c.s]}</h3>
                <span className="figure text-[11.5px] text-ink-3">
                  {fmtInt(counts?.[c.s] ?? c.list.length)}
                  {mw > 0 && ` · ≈ ${fmtMw(mw)}`}
                </span>
              </div>
              <div className="flex flex-col gap-2">
                {c.list.length ? c.list.map((p) => <ProjectCard key={p.id} p={p} showStatus={false} />) : <p className="rounded-sm border border-dashed border-hair-2 px-2.5 py-3 text-[12px] text-ink-4">None on this page — {fmtInt(counts?.[c.s] ?? 0)} in total.</p>}
              </div>
            </li>
          );
        })}
      </ol>
    </div>
  );
}

/* ------------------------------------------------------------------ helper used by the map view list */
export function investmentCell(p: ProjectSummary) {
  if (p.investmentUsd === null) return "—";
  const site = p.investmentScope == null || isSiteScopeLabel(p.investmentScope);
  return site ? fmtUsd(p.investmentUsd) : "—";
}