import type { EnergyContext } from "@dci/core";
import { ExternalLink } from "lucide-react";
import { ApiNote } from "@/components/intelligence/shared";
import { fmtInt, fmtPct } from "@/lib/format";

function Cell({ label, value, note }: { label: string; value: string; note?: string }) {
  return (
    <div className="min-w-0 border-b border-hair py-2 pr-3 sm:border-b-0 sm:border-r sm:last:border-r-0">
      <div className="figure text-[18px] font-medium leading-none text-ink">{value}</div>
      <div className="label-caps mt-1 truncate">{label}</div>
      {note && <div className="text-[11px] text-ink-4">{note}</div>}
    </div>
  );
}

/**
 * POWER / ENERGY CONTEXT for a country — national grid indicators as published (World Bank), the year they
 * describe, and the API note reminding that a national mix is not a facility's contracted electricity.
 * `gridCarbonIntensity` reads "not available" when the API has no reliable public source.
 */
export function EnergyContextPanel({ e, knownMw }: { e: EnergyContext; knownMw: number | null }) {
  const year = e.statsYear ? String(e.statsYear) : null;
  const load = knownMw && e.electricityTwh ? (knownMw * 8.76) / 1000 / e.electricityTwh : null;
  return (
    <div className="flex flex-col gap-3">
      <div className="grid grid-cols-2 gap-x-3 sm:grid-cols-4">
        <Cell label="Renewable share" value={e.renewableShare === null ? "—" : fmtPct(e.renewableShare / 100, 1)} note={e.renewableShare === null ? "not published" : `of electricity output${year ? ` · ${year}` : ""}`} />
        <Cell label="Electricity output" value={e.electricityTwh === null ? "—" : `${fmtInt(e.electricityTwh)} TWh`} note={e.electricityTwh === null ? "not published" : `per year${year ? ` · ${year}` : ""}`} />
        <Cell label="Grid carbon intensity" value={e.gridCarbonIntensity === null ? "not available" : `${fmtInt(e.gridCarbonIntensity)} gCO₂/kWh`} note={e.gridCarbonIntensity === null ? "no reliable public source connected" : year ?? undefined} />
        <Cell label="Known DC load, upper bound" value={load === null ? "—" : `≤ ${fmtPct(load, 2)}`} note={load === null ? "needs known MW and output" : "known MW × 8 760 h ÷ output, at full utilisation"} />
      </div>
      <ApiNote note={e.note} label="Reading" />
      <p className="text-[11.5px] text-ink-4">
        Source: {e.sourceName ?? "not recorded"}
        {e.sourceUrl && (
          <>
            {" "}
            <a href={e.sourceUrl} target="_blank" rel="noopener noreferrer" className="inline-flex items-center gap-1 underline decoration-hair-2 hover:text-ink">
              dataset <ExternalLink className="size-3" />
            </a>
          </>
        )}
        {year && <> · statistics year {year}</>} · World Bank indicators are CC BY 4.0.
      </p>
    </div>
  );
}