import type { DashboardStats } from "@dci/core";
import { Metric, MetricCell, MetricRow } from "@/components/ui/metric";
import { fmtInt, fmtPct, splitMw } from "@/lib/format";

function MwMetric({ mw, label, note, loading }: { mw: number | null | undefined; label: string; note?: string; loading?: boolean }) {
  const s = splitMw(mw);
  return <Metric value={s?.value ?? "—"} unit={s?.unit ?? "MW"} label={label} note={note} loading={loading} />;
}

export function DashboardMetrics({ stats, loading }: { stats: DashboardStats | null; loading?: boolean }) {
  const s = stats;
  const coverage = s ? fmtPct(s.mwCoverage) : null;
  return (
    <MetricRow cols={7}>
      <MetricCell>
        <Metric value={s ? fmtInt(s.facilities) : "—"} label="Indexed facilities" loading={loading} />
      </MetricCell>
      <MetricCell>
        <MwMetric mw={s?.knownOperationalMw} label="Operational (known)" note={coverage ? `MW known for ${coverage} of facilities` : undefined} loading={loading} />
      </MetricCell>
      <MetricCell>
        <MwMetric mw={s?.constructionMw} label="Under construction" loading={loading} />
      </MetricCell>
      <MetricCell>
        <MwMetric mw={s?.plannedMw} label="Planned / announced" loading={loading} />
      </MetricCell>
      <MetricCell>
        <Metric value={s ? fmtInt(s.countries) : "—"} label="Countries" loading={loading} />
      </MetricCell>
      <MetricCell>
        <Metric value={s ? fmtInt(s.operators) : "—"} label="Operators" loading={loading} />
      </MetricCell>
      <MetricCell>
        <Metric value={s ? fmtInt(s.events24h) : "—"} label="Updates · 24 h" note={s ? `${fmtInt(s.events7d)} in 7 days` : undefined} loading={loading} />
      </MetricCell>
    </MetricRow>
  );
}