/**
 * Small, dependency-light SVG charts (server-component friendly, no client JS). One visual system:
 * hairline axes, tabular numbers, series colours from the design tokens, dark surfaces.
 * Every chart accepts `title` (visually hidden <title>) for accessibility and renders an "Unavailable" state for empty data.
 */
import { max as d3max } from 'd3-array';
import { scaleBand, scaleLinear } from 'd3-scale';
import { area as d3area, curveMonotoneX, line as d3line } from 'd3-shape';
import { cn } from '@/lib/cn';
import { fmtCompact, fmtInt } from '@/lib/format';

export const SERIES = ['var(--series-1)', 'var(--series-2)', 'var(--series-3)', 'var(--series-4)', 'var(--series-5)', 'var(--series-6)', 'var(--series-7)', 'var(--series-8)'];

function Empty({ className, h }: { className?: string; h: number }) {
  return (
    <div className={cn('flex items-center justify-center rounded-md border border-dashed border-rule text-xs text-ink-3', className)} style={{ height: h }} role="img" aria-label="Chart unavailable">
      Unavailable
    </div>
  );
}

export interface BarDatum {
  label: string;
  value: number;
  color?: string;
  href?: string;
}

/** Horizontal bars with labels — ranking lists. */
export function HBars({ data, className, max, valueFormat = fmtInt, barHeight = 26, showValue = true }: { data: BarDatum[]; className?: string; max?: number; valueFormat?: (v: number) => string; barHeight?: number; showValue?: boolean }) {
  if (!data.length) return <Empty className={className} h={120} />;
  const m = max ?? d3max(data, (d) => d.value) ?? 1;
  return (
    <ul className={cn('space-y-1.5', className)}>
      {data.map((d, i) => (
        <li key={`${d.label}-${i}`} className="grid grid-cols-[minmax(0,1fr)_auto] items-center gap-3 text-sm" style={{ minHeight: barHeight }}>
          <div className="min-w-0">
            <div className="flex items-baseline justify-between gap-2">
              {d.href ? <a href={d.href} className="truncate text-ink hover:text-accent hover:underline">{d.label}</a> : <span className="truncate text-ink">{d.label}</span>}
              {showValue && <span className="tnum shrink-0 text-xs text-ink-2">{valueFormat(d.value)}</span>}
            </div>
            <div className="mt-1 h-[6px] w-full overflow-hidden rounded-full bg-plane-2">
              <div className="h-full rounded-full" style={{ width: `${Math.max(1, (d.value / m) * 100)}%`, background: d.color ?? 'var(--series-1)' }} />
            </div>
          </div>
        </li>
      ))}
    </ul>
  );
}

export interface SeriesPoint {
  x: number | string;
  y: number;
}

/** Vertical bar chart (time series by year/month). */
export function Bars({ data, className, height = 160, color = 'var(--series-1)', title, xTicks = 6, yFormat = fmtCompact, highlightLast = false }: { data: SeriesPoint[]; className?: string; height?: number; color?: string; title: string; xTicks?: number; yFormat?: (v: number) => string; highlightLast?: boolean }) {
  if (!data.length) return <Empty className={className} h={height} />;
  const W = 640;
  const H = height;
  const pad = { l: 36, r: 8, t: 8, b: 22 };
  const x = scaleBand<string>().domain(data.map((d) => String(d.x))).range([pad.l, W - pad.r]).paddingInner(0.25);
  const ymax = d3max(data, (d) => d.y) ?? 1;
  const y = scaleLinear().domain([0, ymax || 1]).nice().range([H - pad.b, pad.t]);
  const ticks = y.ticks(4);
  const every = Math.max(1, Math.ceil(data.length / xTicks));
  return (
    <svg viewBox={`0 0 ${W} ${H}`} className={cn('h-auto w-full', className)} role="img" aria-label={title} preserveAspectRatio="none">
      <title>{title}</title>
      {ticks.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)">{yFormat(t)}</text>
        </g>
      ))}
      {data.map((d, i) => (
        <rect key={String(d.x)} x={x(String(d.x))} y={y(d.y)} width={x.bandwidth()} height={Math.max(0, H - pad.b - y(d.y))} fill={highlightLast && i === data.length - 1 ? 'var(--accent)' : color} opacity={0.9} rx={1} />
      ))}
      {data.map((d, i) => (i % every === 0 || i === data.length - 1) && (
        <text key={`t${String(d.x)}`} x={(x(String(d.x)) ?? 0) + x.bandwidth() / 2} y={H - 6} textAnchor="middle" fontSize="10" fill="var(--ink-3)" fontFamily="var(--font-mono)">{String(d.x).slice(0, 7)}</text>
      ))}
    </svg>
  );
}

/** Stacked vertical bars (e.g. launches by year by region). `keys` order = stack order; colours from SERIES. */
export function StackedBars({ data, keys, labels, className, height = 200, title, xTicks = 8 }: { data: Record<string, number | string>[]; keys: string[]; labels?: Record<string, string>; className?: string; height?: number; title: string; xTicks?: number }) {
  if (!data.length) return <Empty className={className} h={height} />;
  const W = 640;
  const H = height;
  const pad = { l: 36, r: 8, t: 8, b: 22 };
  const xs = data.map((d) => String(d.x));
  const x = scaleBand<string>().domain(xs).range([pad.l, W - pad.r]).paddingInner(0.2);
  const totals = data.map((d) => keys.reduce((s, k) => s + (Number(d[k]) || 0), 0));
  const y = scaleLinear().domain([0, d3max(totals) || 1]).nice().range([H - pad.b, pad.t]);
  const every = Math.max(1, Math.ceil(data.length / xTicks));
  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(4).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, i) => {
          let acc = 0;
          return keys.map((k, ki) => {
            const v = Number(d[k]) || 0;
            const y0 = y(acc);
            acc += v;
            const y1 = y(acc);
            return <rect key={`${i}-${k}`} x={x(String(d.x))} y={y1} width={x.bandwidth()} height={Math.max(0, y0 - y1)} fill={SERIES[ki % SERIES.length]} opacity={0.9} />;
          });
        })}
        {xs.map((lab, i) => (i % every === 0 || i === xs.length - 1) && (
          <text key={lab} x={(x(lab) ?? 0) + x.bandwidth() / 2} y={H - 6} textAnchor="middle" fontSize="10" fill="var(--ink-3)" fontFamily="var(--font-mono)">{lab.slice(0, 7)}</text>
        ))}
      </svg>
      <ul className="mt-2 flex flex-wrap gap-x-4 gap-y-1 text-xs text-ink-2">
        {keys.map((k, i) => (
          <li key={k} className="inline-flex items-center gap-1.5">
            <span className="inline-block size-2.5 rounded-sm" style={{ background: SERIES[i % SERIES.length] }} /> {labels?.[k] ?? k}
          </li>
        ))}
      </ul>
    </div>
  );
}

/** Area/line chart for continuous series. */
export function AreaChart({ data, className, height = 160, color = 'var(--series-1)', title, yFormat = fmtCompact, xLabel, fill = true, yDomain }: { data: SeriesPoint[]; className?: string; height?: number; color?: string; title: string; yFormat?: (v: number) => string; xLabel?: (x: number | string) => string; fill?: boolean; yDomain?: [number, number] }) {
  if (data.length < 2) return <Empty className={className} h={height} />;
  const W = 640;
  const H = height;
  const pad = { l: 40, r: 8, t: 8, b: 22 };
  const x = scaleLinear().domain([0, data.length - 1]).range([pad.l, W - pad.r]);
  const ys = data.map((d) => d.y);
  const lo = yDomain ? yDomain[0] : Math.min(...ys);
  const hi = yDomain ? yDomain[1] : Math.max(...ys);
  const padY = (hi - lo) * 0.1 || 1;
  const y = scaleLinear().domain([yDomain ? lo : lo - padY, yDomain ? hi : hi + padY]).nice().range([H - pad.b, pad.t]);
  const ln = d3line<SeriesPoint>().x((_, i) => x(i)).y((d) => y(d.y)).curve(curveMonotoneX);
  const ar = d3area<SeriesPoint>().x((_, i) => x(i)).y0(H - pad.b).y1((d) => y(d.y)).curve(curveMonotoneX);
  const every = Math.max(1, Math.ceil(data.length / 6));
  const gid = `g${Math.abs(hashStr(title))}`;
  return (
    <svg viewBox={`0 0 ${W} ${H}`} className={cn('h-auto w-full', className)} role="img" aria-label={title} preserveAspectRatio="none">
      <title>{title}</title>
      <defs>
        <linearGradient id={gid} x1="0" x2="0" y1="0" y2="1">
          <stop offset="0" stopColor={color} stopOpacity="0.35" />
          <stop offset="1" stopColor={color} stopOpacity="0" />
        </linearGradient>
      </defs>
      {y.ticks(4).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)">{yFormat(t)}</text>
        </g>
      ))}
      {fill && <path d={ar(data) ?? ''} fill={`url(#${gid})`} />}
      <path d={ln(data) ?? ''} fill="none" stroke={color} strokeWidth={1.8} />
      {data.map((d, i) => (i % every === 0 || i === data.length - 1) && (
        <text key={i} x={x(i)} y={H - 6} textAnchor={i === data.length - 1 ? 'end' : i === 0 ? 'start' : 'middle'} fontSize="10" fill="var(--ink-3)" fontFamily="var(--font-mono)">{xLabel ? xLabel(d.x) : String(d.x).slice(0, 7)}</text>
      ))}
    </svg>
  );
}

/** Donut with legend — status/orbit distributions. */
export function Donut({ data, className, size = 140, title, total }: { data: BarDatum[]; className?: string; size?: number; title: string; total?: number }) {
  const sum = data.reduce((s, d) => s + d.value, 0);
  if (!sum) return <Empty className={className} h={size} />;
  const r = size / 2;
  const stroke = size * 0.16;
  const c = 2 * Math.PI * (r - stroke / 2);
  let acc = 0;
  return (
    <div className={cn('flex items-center gap-5', className)}>
      <svg width={size} height={size} viewBox={`0 0 ${size} ${size}`} role="img" aria-label={title} className="shrink-0">
        <title>{title}</title>
        <circle cx={r} cy={r} r={r - stroke / 2} fill="none" stroke="var(--plane-2)" strokeWidth={stroke} />
        {data.map((d, i) => {
          const frac = d.value / sum;
          const el = <circle key={i} cx={r} cy={r} r={r - stroke / 2} fill="none" stroke={d.color ?? SERIES[i % SERIES.length]} strokeWidth={stroke} strokeDasharray={`${frac * c} ${c}`} strokeDashoffset={-acc * c} transform={`rotate(-90 ${r} ${r})`} />;
          acc += frac;
          return el;
        })}
        <text x={r} y={r} dy="0.35em" textAnchor="middle" fontSize={size * 0.16} fontWeight={600} fill="var(--ink)" fontFamily="var(--font-mono)">{fmtCompact(total ?? sum)}</text>
      </svg>
      <ul className="min-w-0 flex-1 space-y-1 text-sm">
        {data.map((d, i) => (
          <li key={i} className="flex items-center justify-between gap-3">
            <span className="inline-flex min-w-0 items-center gap-2 text-ink-2"><span className="inline-block size-2.5 shrink-0 rounded-sm" style={{ background: d.color ?? SERIES[i % SERIES.length] }} /><span className="truncate">{d.label}</span></span>
            <span className="tnum shrink-0 text-ink">{fmtInt(d.value)} <span className="text-ink-3">· {((d.value / sum) * 100).toFixed(0)}%</span></span>
          </li>
        ))}
      </ul>
    </div>
  );
}

/** Tiny inline sparkline. */
export function Sparkline({ values, width = 90, height = 24, color = 'var(--accent)' }: { values: number[]; width?: number; height?: number; color?: string }) {
  if (values.length < 2) return <span className="text-xs text-ink-3">—</span>;
  const x = scaleLinear().domain([0, values.length - 1]).range([1, width - 1]);
  const y = scaleLinear().domain([Math.min(...values), Math.max(...values) || 1]).range([height - 2, 2]);
  const d = d3line<number>().x((_, i) => x(i)).y((v) => y(v)).curve(curveMonotoneX)(values) ?? '';
  return (
    <svg width={width} height={height} viewBox={`0 0 ${width} ${height}`} aria-hidden className="inline-block align-middle">
      <path d={d} fill="none" stroke={color} strokeWidth={1.5} />
    </svg>
  );
}

/** Histogram (altitude/inclination profiles): values already bucketed. */
export function Histogram({ data, className, height = 140, color = 'var(--series-1)', title, unit = '', xTicks = 8 }: { data: { bin: number; value: number }[]; className?: string; height?: number; color?: string; title: string; unit?: string; xTicks?: number }) {
  if (!data.length) return <Empty className={className} h={height} />;
  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 y = scaleLinear().domain([0, d3max(data, (d) => d.value) || 1]).nice().range([H - pad.b, pad.t]);
  const bw = Math.max(1, x(step) - x(0) - 1);
  return (
    <svg viewBox={`0 0 ${W} ${H}`} className={cn('h-auto w-full', className)} 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) => (
        <rect key={d.bin} x={x(d.bin)} y={y(d.value)} width={bw} height={Math.max(0, H - pad.b - y(d.value))} fill={color} 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>
  );
}

function hashStr(s: string): number {
  let h = 0;
  for (let i = 0; i < s.length; i++) h = (h * 31 + s.charCodeAt(i)) | 0;
  return h;
}