/**
 * Local chart variants for the stats/debris/reentries pages (pure SVG, server-safe).
 * Same visual system as `@/components/charts/charts` — hairline axes, mono tick labels, token colours.
 */
import { max as d3max } from 'd3-array';
import { scaleLinear } from 'd3-scale';
import { cn } from '@/lib/cn';
import { fmtCompact } from '@/lib/format';

export interface MultiBin {
  bin: number;
  values: number[];
}

/**
 * Grouped histogram: several series drawn side-by-side inside each bin (e.g. active payloads vs debris per 25 km).
 * `series` = labels + colours in the same order as `values`.
 */
export function GroupedHistogram({ data, series, className, height = 170, title, unit = '', xTicks = 8 }: { data: MultiBin[]; series: { label: string; color: string }[]; className?: string; height?: number; title: string; unit?: string; xTicks?: number }) {
  if (!data.length || !series.length) {
    return (
      <div className={cn('flex items-center justify-center rounded-md border border-dashed border-rule text-xs text-ink-3', className)} style={{ height }} role="img" aria-label="Chart unavailable">
        Unavailable
      </div>
    );
  }
  const W = 640;
  const H = height;
  const pad = { l: 36, r: 8, t: 6, b: 22 };
  const bins = data.map((d) => d.bin);
  const step = bins.length > 1 ? Math.min(...bins.slice(1).map((b, i) => b - (bins[i] ?? 0)).filter((v) => v > 0)) || 1 : 1;
  const x = scaleLinear().domain([Math.min(...bins), Math.max(...bins) + step]).range([pad.l, W - pad.r]);
  const ymaxRaw = d3max(data, (d) => Math.max(...d.values)) || 1;
  const y = scaleLinear().domain([0, ymaxRaw]).nice().range([H - pad.b, pad.t]);
  const slot = Math.max(1, x(step) - x(0) - 1);
  const bw = Math.max(0.8, slot / series.length);
  return (
    <div className={className}>
      <svg viewBox={`0 0 ${W} ${H}`} className="h-auto w-full" role="img" aria-label={title} preserveAspectRatio="none">
        <title>{title}</title>
        {y.ticks(3).map((t) => (
          <g key={t}>
            <line x1={pad.l} x2={W - pad.r} y1={y(t)} y2={y(t)} stroke="var(--rule)" />
            <text x={pad.l - 6} y={y(t)} dy="0.32em" textAnchor="end" fontSize="10" fill="var(--ink-3)" fontFamily="var(--font-mono)">{fmtCompact(t)}</text>
          </g>
        ))}
        {data.map((d) =>
          d.values.map((v, si) => (
            <rect key={`${d.bin}-${si}`} x={x(d.bin) + si * bw} y={y(v)} width={bw} height={Math.max(0, H - pad.b - y(v))} fill={series[si]?.color ?? 'var(--series-1)'} opacity={0.9} />
          )),
        )}
        {x.ticks(xTicks).map((t) => (
          <text key={t} x={x(t)} y={H - 6} textAnchor="middle" fontSize="10" fill="var(--ink-3)" fontFamily="var(--font-mono)">{fmtCompact(t)}{unit}</text>
        ))}
      </svg>
      <ul className="mt-2 flex flex-wrap gap-x-4 gap-y-1 text-xs text-ink-2">
        {series.map((s) => (
          <li key={s.label} className="inline-flex items-center gap-1.5">
            <span className="inline-block size-2.5 rounded-sm" style={{ background: s.color }} /> {s.label}
          </li>
        ))}
      </ul>
    </div>
  );
}

/** Legend-only helper for charts that need an external key (e.g. two donuts sharing colours). */
export function Legend({ items, className }: { items: { label: string; color: string }[]; className?: string }) {
  return (
    <ul className={cn('flex flex-wrap gap-x-4 gap-y-1 text-xs text-ink-2', className)}>
      {items.map((s) => (
        <li key={s.label} className="inline-flex items-center gap-1.5">
          <span className="inline-block size-2.5 rounded-sm" style={{ background: s.color }} /> {s.label}
        </li>
      ))}
    </ul>
  );
}