"use client";

import { ColumnChart } from "@/components/ui/charts";
import { fmtInt, fmtMw } from "@/lib/format";

/** Facilities opened per published opening year; MW in the tooltip only when published for that year. */
export function OpeningTimeline({ data }: { data: Array<{ year: number; opened: number; openedMw: number | null }> }) {
  const rows = [...data].filter((d) => Number.isFinite(d.year)).sort((a, b) => a.year - b.year);
  const first = rows[0]!.year;
  const last = Math.max(rows[rows.length - 1]!.year, new Date().getUTCFullYear());
  const byYear = new Map(rows.map((r) => [r.year, r]));
  const span = last - first + 1;
  const filled: Array<{ label: string; value: number; secondary: number | null }> = [];
  for (let y = first; y <= last; y++) {
    const r = byYear.get(y);
    filled.push({ label: String(y), value: r?.opened ?? 0, secondary: r?.openedMw ?? null });
  }
  const data2 = span > 30 ? rows.map((r) => ({ label: String(r.year), value: r.opened, secondary: r.openedMw })) : filled;
  const mwYears = rows.filter((r) => r.openedMw !== null).length;
  return (
    <div>
      <ColumnChart data={data2} height={150} format={(v) => fmtInt(v)} color="var(--st-operational)" ariaLabel="Facilities opened per year" />
      <ul className="mt-2 flex flex-wrap gap-x-3 gap-y-1 text-[11.5px] text-ink-3">
        {rows.slice(-6).map((r) => (
          <li key={r.year} className="figure">
            {r.year}: {fmtInt(r.opened)} opened{r.openedMw !== null ? ` · ${fmtMw(r.openedMw)}` : ""}
          </li>
        ))}
      </ul>
      <p className="mt-1.5 text-[11px] text-ink-4">{mwYears ? `${mwYears} of ${rows.length} years carry a published MW figure.` : "No opening year carries a published MW figure."} Facilities without a published opening date are not charted.</p>
    </div>
  );
}