"use client";

import type { Dashboard } from "@dci/core";
import { AreaChart, ColumnChart } from "@/components/ui/charts";
import { EmptyState } from "@/components/ui/states";
import { fmtCompact, fmtMw } from "@/lib/format";

export function CapacityOverTime({ data }: { data: Dashboard["capacityOverTime"] }) {
  const pts = data.filter((d) => d.cumulativeMw !== null || d.knownMw !== null);
  if (pts.length < 2) return <EmptyState compact title="Not enough history yet" description="Capacity over time appears once several years of openings are indexed." />;
  return (
    <AreaChart
      series={[
        { name: "Cumulative known MW", data: pts.map((d) => ({ x: d.year, y: d.cumulativeMw })), color: "var(--ink)" },
      ]}
      height={200}
      format={(v) => fmtMw(v)}
      ariaLabel="Cumulative known operational capacity by opening year"
    />
  );
}

export function PipelineByYear({ data }: { data: Dashboard["pipelineByYear"] }) {
  if (!data.length) return <EmptyState compact title="No dated pipeline" description="Expected-opening years will chart here." />;
  const hasMw = data.some((d) => d.mw !== null && d.mw > 0);
  return (
    <ColumnChart
      data={data.map((d) => ({ label: d.year, value: hasMw ? d.mw : d.count }))}
      height={150}
      format={hasMw ? (v) => fmtMw(v) : (v) => fmtCompact(v, 0)}
      ariaLabel={hasMw ? "Pipeline MW by expected opening year" : "Pipeline projects by expected opening year"}
    />
  );
}