/** Visualisation panels for /constellation/[slug]. Server components, pure SVG charts. */
import Link from 'next/link';
import { AreaChart, Bars, Donut, Histogram } from '@/components/charts/charts';
import { Unavailable } from '@/components/ui/unavailable';
import { fmtDeg, fmtInt, fmtKm, num, titleCase } from '@/lib/format';
import { STATUS_COLORS, routes } from '@/lib/site';
import type { ConstellationDetail } from '@/lib/types';
import { Derived, ScrollTable } from './shared';

export function DeploymentTimeline({ growth }: { growth: ConstellationDetail['growth'] }) {
  const monthly = growth.map((g) => ({ x: g.month.slice(0, 7), y: num(g.launched) ?? 0 }));
  const cumulative = growth.map((g) => ({ x: g.month.slice(0, 7), y: num(g.cumulative) ?? 0 }));
  if (!growth.length) return <Unavailable what="Deployment timeline" />;
  return (
    <div className="grid gap-6 lg:grid-cols-2">
      <div>
        <p className="eyebrow mb-2">Cumulative satellites launched</p>
        <AreaChart data={cumulative} title="Cumulative satellites launched by month" height={180} xLabel={(x) => String(x).slice(0, 4)} />
      </div>
      <div>
        <p className="eyebrow mb-2">Launched per month</p>
        <Bars data={monthly} title="Satellites launched per month" height={180} color="var(--series-2)" highlightLast />
      </div>
    </div>
  );
}

export function StatusDonut({ dist, total }: { dist: ConstellationDetail['status_distribution']; total: number | null }) {
  const data = dist.map((d) => ({ label: titleCase(d.status.toLowerCase()), value: num(d.count) ?? 0, color: STATUS_COLORS[d.status] ?? 'var(--other)' })).filter((d) => d.value > 0).sort((a, b) => b.value - a.value);
  return <Donut data={data} title="Satellites by status" total={total ?? undefined} size={150} />;
}

export function OrbitalShells({ d }: { d: ConstellationDetail }) {
  const alt = d.altitude_histogram.map((h) => ({ bin: num(h.alt_km) ?? 0, value: num(h.satellites) ?? 0 })).filter((h) => h.bin >= 0);
  const incl = d.inclination_histogram.map((h) => ({ bin: num(h.incl_deg) ?? 0, value: num(h.satellites) ?? 0 }));
  const shells = [...d.shells].sort((a, b) => (num(b.satellites) ?? 0) - (num(a.satellites) ?? 0)).slice(0, 10);
  const nothing = !alt.length && !incl.length && !shells.length;
  if (nothing) return <Unavailable what="Orbital shell data (no current orbital elements for this constellation)" />;
  return (
    <div className="grid gap-6 lg:grid-cols-[minmax(0,3fr)_minmax(0,2fr)]">
      <div className="space-y-6">
        <div>
          <p className="eyebrow mb-2">Perigee altitude · satellites per 25 km</p>
          <Histogram data={alt} title="Perigee altitude histogram" unit=" km" height={150} xTicks={6} />
        </div>
        <div>
          <p className="eyebrow mb-2">Inclination · satellites per 5°</p>
          <Histogram data={incl} title="Inclination histogram" unit="°" height={130} color="var(--series-2)" xTicks={6} />
        </div>
      </div>
      <div>
        <p className="eyebrow mb-2">Largest shells (perigee × inclination)</p>
        {shells.length === 0 ? (
          <Unavailable what="Shell table" compact />
        ) : (
          <ScrollTable>
            <table className="data-table">
              <thead>
                <tr>
                  <th className="num">Perigee</th>
                  <th className="num">Inclination</th>
                  <th className="num">Satellites</th>
                </tr>
              </thead>
              <tbody>
                {shells.map((s, i) => (
                  <tr key={i}>
                    <td className="num tnum">{fmtKm(s.perigee_km)}</td>
                    <td className="num tnum">{fmtDeg(s.inclination_deg)}</td>
                    <td className="num tnum font-medium">{fmtInt(s.satellites)}</td>
                  </tr>
                ))}
              </tbody>
            </table>
          </ScrollTable>
        )}
        <p className="mt-2 text-xs text-ink-3">Shells bucket current elements to 20 km × 1°. Orbit classes are <Link href={routes.methodology()} className="text-accent hover:underline">derived</Link>.</p>
      </div>
    </div>
  );
}

export function DecaysByMonth({ rows }: { rows: ConstellationDetail['decays_by_month'] }) {
  const data = rows.map((r) => ({ x: r.month.slice(0, 7), y: num(r.decayed) ?? 0 }));
  const total = data.reduce((s, d) => s + d.y, 0);
  if (!data.length) return null;
  return (
    <div>
      <p className="eyebrow mb-2">{fmtInt(total)} decays recorded · per month</p>
      <Bars data={data} title="Decayed satellites per month" height={150} color="var(--series-8)" />
    </div>
  );
}

export function MembershipNote({ d }: { d: ConstellationDetail }) {
  const methods = d.membership_methods ?? [];
  return (
    <div className="space-y-3 text-sm text-ink-2">
      <p className="flex flex-wrap items-center gap-2">
        <span>Constellation membership is</span> <Derived /> <span>from curated rules, never from a single upstream field. Rules for this constellation:</span>
      </p>
      <dl className="grid gap-3 sm:grid-cols-2">
        <div>
          <dt className="eyebrow">Name patterns</dt>
          <dd className="mt-1 flex flex-wrap gap-1.5">{d.match_patterns.length ? d.match_patterns.map((p) => <code key={p} className="mono rounded bg-plane-2 px-1.5 py-0.5 text-xs text-ink">{p}</code>) : <span className="text-ink-3">none</span>}</dd>
        </div>
        <div>
          <dt className="eyebrow">CelesTrak groups</dt>
          <dd className="mt-1 flex flex-wrap gap-1.5">{d.celestrak_groups.length ? d.celestrak_groups.map((g) => <code key={g} className="mono rounded bg-plane-2 px-1.5 py-0.5 text-xs text-ink">{g}</code>) : <span className="text-ink-3">none</span>}</dd>
        </div>
      </dl>
      <div>
        <p className="eyebrow">Members by method</p>
        {methods.length ? (
          <ul className="mt-1 flex flex-wrap gap-x-4 gap-y-1">
            {methods.map((m) => (
              <li key={m.method} className="tnum"><code className="mono text-xs text-ink">{m.method}</code> · {fmtInt(m.satellites)}</li>
            ))}
          </ul>
        ) : (
          <p className="mt-1 text-xs text-ink-3">Per-method breakdown unavailable for this constellation.</p>
        )}
      </div>
      <p className="text-xs text-ink-3">
        Full rule set and metric versions on the <Link href={routes.methodology()} className="text-accent hover:underline">methodology page</Link>. Activity score is a derived index of recent launch cadence, not a safety metric.
      </p>
    </div>
  );
}