"use client";

import type { ExploreResponse, FacilityStatus } from "@dci/core";
import { BarList, ColumnChart } from "@/components/ui/charts";
import { HonestEmpty } from "@/components/intelligence/shared";
import { fmtInt, fmtMw } from "@/lib/format";
import { STATUS_SHORT } from "@/lib/labels";

/** byStatus / byCountry / byYear charts over the whole filtered set (not the current page). */
export function ExploreCharts({ charts, entity, countryHrefBase }: { charts: ExploreResponse["charts"]; entity: "facilities" | "projects"; /** href prefix the iso2 is appended to (function props cannot cross the RSC boundary) */ countryHrefBase: string }) {
  const countryHref = (iso2: string) => `${countryHrefBase}${encodeURIComponent(iso2)}`;
  const byStatus = charts.byStatus.map((s) => ({ label: STATUS_SHORT[s.key as FacilityStatus] ?? s.key, value: s.count, secondary: s.mw }));
  const byYear = charts.byYear.filter((y) => y.year >= 1990 && y.year <= 2100).map((y) => ({ label: String(y.year), value: y.count, secondary: y.mw }));
  const byCountry = charts.byCountry.slice(0, 15);
  const mwTotal = charts.byStatus.reduce((a, s) => a + (s.mw ?? 0), 0);
  return (
    <div className="grid gap-8 lg:grid-cols-2">
      <div>
        <div className="mb-2 flex items-baseline justify-between">
          <h2 className="text-[13.5px] font-semibold text-ink">By status</h2>
          <span className="figure text-[11.5px] text-ink-3">records{mwTotal > 0 ? ` · ${fmtMw(mwTotal)} published` : ""}</span>
        </div>
        {byStatus.length ? (
          <div className="pt-8">
            <ColumnChart data={byStatus} format={(v) => fmtInt(v)} height={160} ariaLabel="Records by lifecycle status" />
          </div>
        ) : (
          <HonestEmpty title="No status distribution" />
        )}
        {byStatus.length > 0 && (
          <ul className="mt-2 grid grid-cols-2 gap-x-4 gap-y-0.5 text-[11.5px] text-ink-3 sm:grid-cols-3">
            {charts.byStatus.map((s) => (
              <li key={s.key} className="flex justify-between gap-2">
                <span>{STATUS_SHORT[s.key as FacilityStatus] ?? s.key}</span>
                <span className="figure">
                  {fmtInt(s.count)} · {s.mw === null ? "MW —" : fmtMw(s.mw)}
                </span>
              </li>
            ))}
          </ul>
        )}
      </div>
      <div>
        <div className="mb-2 flex items-baseline justify-between">
          <h2 className="text-[13.5px] font-semibold text-ink">{entity === "projects" ? "By expected opening year" : "By opening year"}</h2>
          <span className="figure text-[11.5px] text-ink-3">records</span>
        </div>
        {byYear.length ? (
          <div className="pt-8">
            <ColumnChart data={byYear} format={(v) => fmtInt(v)} height={160} color="var(--ink-2)" ariaLabel="Records by year" />
          </div>
        ) : (
          <HonestEmpty title="No dated records" detail={entity === "projects" ? "no expected opening published" : "no opening date published in this set"} />
        )}
        <p className="mt-1.5 text-[11px] text-ink-4">Records without a published date are not charted.</p>
      </div>
      <div className="lg:col-span-2">
        <div className="mb-2 flex items-baseline justify-between">
          <h2 className="text-[13.5px] font-semibold text-ink">By country</h2>
          <span className="figure text-[11.5px] text-ink-3">top {byCountry.length} · records · published MW</span>
        </div>
        {byCountry.length ? <BarList items={byCountry.map((c) => ({ label: c.name, value: c.count, href: countryHref(c.key), secondary: c.mw === null ? "MW —" : fmtMw(c.mw) }))} format={(v) => fmtInt(v)} /> : <HonestEmpty title="No country distribution" />}
      </div>
    </div>
  );
}