import { scaleLinear } from 'd3-scale';
import { curveMonotoneX, line as d3line } from 'd3-shape';
import { fmtDate, fmtInt, num } from '@/lib/format';
import type { SatelliteHistory } from '@/lib/types';

/**
 * Perigee / apogee over time (dual-line, SVG, server-safe). Local variant of the shared AreaChart which is single-series.
 * Renders only with ≥ 2 daily points — the caller shows an honest note otherwise.
 */
export function AltitudeChart({ series, height = 180 }: { series: SatelliteHistory['altitude_series']; height?: number }) {
  const rows = series
    .map((r) => ({ day: r.day, perigee: num(r.perigee_km), apogee: num(r.apogee_km) }))
    .filter((r): r is { day: string; perigee: number; apogee: number } => r.perigee !== null && r.apogee !== null);
  if (rows.length < 2) return null;
  const W = 640;
  const H = height;
  const pad = { l: 44, r: 10, t: 10, b: 24 };
  const x = scaleLinear().domain([0, rows.length - 1]).range([pad.l, W - pad.r]);
  const lo = Math.min(...rows.map((r) => r.perigee));
  const hi = Math.max(...rows.map((r) => r.apogee));
  const padY = (hi - lo) * 0.15 || 2;
  const y = scaleLinear().domain([lo - padY, hi + padY]).nice().range([H - pad.b, pad.t]);
  const mk = (key: 'perigee' | 'apogee') => d3line<(typeof rows)[number]>().x((_, i) => x(i)).y((d) => y(d[key])).curve(curveMonotoneX)(rows) ?? '';
  const every = Math.max(1, Math.ceil(rows.length / 6));
  return (
    <div>
      <svg viewBox={`0 0 ${W} ${H}`} className="h-auto w-full" role="img" aria-label="Perigee and apogee altitude over time" preserveAspectRatio="none">
        <title>Perigee and apogee altitude over time</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)">{fmtInt(t)}</text>
          </g>
        ))}
        <path d={mk('apogee')} fill="none" stroke="var(--series-2)" strokeWidth={1.6} />
        <path d={mk('perigee')} fill="none" stroke="var(--series-1)" strokeWidth={1.6} />
        {rows.map((r, i) => (i % every === 0 || i === rows.length - 1) && (
          <text key={r.day} x={x(i)} y={H - 6} textAnchor={i === rows.length - 1 ? 'end' : i === 0 ? 'start' : 'middle'} fontSize="10" fill="var(--ink-3)" fontFamily="var(--font-mono)">{r.day.slice(0, 10)}</text>
        ))}
      </svg>
      <ul className="mt-2 flex flex-wrap gap-x-4 gap-y-1 text-xs text-ink-2">
        <li className="inline-flex items-center gap-1.5"><span className="inline-block h-0.5 w-4" style={{ background: 'var(--series-2)' }} /> Apogee (km)</li>
        <li className="inline-flex items-center gap-1.5"><span className="inline-block h-0.5 w-4" style={{ background: 'var(--series-1)' }} /> Perigee (km)</li>
        <li className="text-ink-3">{rows.length} daily points · {fmtDate(rows[0]!.day)} → {fmtDate(rows[rows.length - 1]!.day)}</li>
      </ul>
    </div>
  );
}