"use client";

import type { HistoryPoint } from "@dci/core";
import { useMemo } from "react";
import { LineChart, type Series } from "@/components/ui/charts";
import { SourceBadge } from "@/components/ui/source-badge";
import { fieldLabel } from "@/lib/field-labels";
import { fmtDate, fmtMw } from "@/lib/format";
import { Evidence } from "./evidence-context";

const COLORS: Record<string, string> = {
  itCapacityMw: "var(--ink)",
  totalPowerMw: "var(--st-planned)",
  plannedPowerMw: "var(--accent)",
  plannedMw: "var(--accent)",
  utilityCapacityMw: "var(--st-permitting)",
  gridConnectionMw: "var(--st-permitting)",
  ultimateCampusMw: "var(--st-construction)",
};

/**
 * Capacity history: step chart of every observed / changed MW value per field (values hold until the next
 * observation). With fewer than two dated points it degrades to a dated list so nothing is drawn that the data
 * cannot support.
 */
export function CapacityHistoryChart({ points, height = 180 }: { points: HistoryPoint[]; height?: number }) {
  const mw = useMemo(() => points.filter((p) => /Mw$|_mw$/.test(p.field) && typeof p.value === "number").sort((a, b) => (a.date < b.date ? -1 : 1)), [points]);
  const series = useMemo<Series[]>(() => {
    const by = new Map<string, HistoryPoint[]>();
    for (const p of mw) {
      const f = p.field.replace(/_([a-z])/g, (_, c: string) => c.toUpperCase());
      if (!by.has(f)) by.set(f, []);
      by.get(f)!.push(p);
    }
    return Array.from(by.entries()).map(([field, pts]) => ({ name: fieldLabel(field), color: COLORS[field] ?? "var(--ink-3)", step: true, dashed: /planned/i.test(field), data: pts.map((p) => ({ x: p.date.slice(0, 10), y: p.value as number })) }));
  }, [mw]);
  const dates = new Set(mw.map((p) => p.date.slice(0, 10)));

  if (!mw.length) return <p className="rounded-sm border border-dashed border-hair-2 px-3 py-2.5 text-[12.5px] text-ink-3">No MW figure has been observed for this record — no history to chart.</p>;

  return (
    <div className="flex flex-col gap-3">
      {dates.size >= 2 ? (
        <LineChart series={series} height={height} format={(v) => fmtMw(v)} ariaLabel="Capacity history — observed MW values by date" />
      ) : (
        <p className="text-[12px] text-ink-3">One observation date so far — the step chart appears once a second dated value exists.</p>
      )}
      <ul className="divide-y divide-hair text-[12.5px]">
        {[...mw].reverse().slice(0, 12).map((p, i) => (
          <li key={`${p.date}-${p.field}-${i}`} className="grid grid-cols-[minmax(0,1fr)_auto] items-baseline gap-x-3 py-1.5">
            <div className="min-w-0 flex flex-wrap items-center gap-x-2 gap-y-0.5">
              <time className="figure text-ink-3" dateTime={p.date}>
                {fmtDate(p.date)}
              </time>
              <span className="text-ink-2">{fieldLabel(p.field)}</span>
              {p.sourceKind && <SourceBadge kind={p.sourceKind} name={p.sourceName} url={p.url} />}
              <span className="text-[11px] uppercase tracking-[0.06em] text-ink-4">{p.kind}</span>
            </div>
            <Evidence field={p.field} history>
              <span className="figure font-medium text-ink">
                {typeof p.oldValue === "number" && <span className="mr-1 text-ink-3 line-through decoration-ink-4">{fmtMw(p.oldValue)}</span>}
                {fmtMw(p.value as number)}
              </span>
            </Evidence>
          </li>
        ))}
      </ul>
    </div>
  );
}