import Link from 'next/link';
import { Donut, HBars, SERIES } from '@/components/charts/charts';
import { fmtInt, num, titleCase } from '@/lib/format';
import { MISSION_LABELS, OBJECT_TYPE_LABELS, ORBIT_CLASS_COLORS, routes } from '@/lib/site';
import type { StatsSnapshot } from '@/lib/types';
import { Legend } from './local-charts';
import { ChartBlock, Note } from './shared';

const ORBIT_ORDER = ['LEO', 'MEO', 'GEO', 'HEO', 'OTHER', 'UNKNOWN'];

/** Composition of the catalogue: orbit class (two donuts), object type, mission type, constellation shares. */
export function StatsComposition({ snapshot }: { snapshot: StatsSnapshot }) {
  const byOrbit = [...snapshot.by_orbit_class].sort((a, b) => ORBIT_ORDER.indexOf(a.orbit_class) - ORBIT_ORDER.indexOf(b.orbit_class));
  const activeDonut = byOrbit.map((r) => ({ label: r.orbit_class === 'UNKNOWN' ? 'Unclassified' : r.orbit_class, value: num(r.active) ?? 0, color: ORBIT_CLASS_COLORS[r.orbit_class] ?? 'var(--other)' })).filter((d) => d.value > 0);
  const onOrbitDonut = byOrbit.map((r) => ({ label: r.orbit_class === 'UNKNOWN' ? 'Unclassified' : r.orbit_class, value: num(r.on_orbit) ?? 0, color: ORBIT_CLASS_COLORS[r.orbit_class] ?? 'var(--other)' })).filter((d) => d.value > 0);

  const byType = [...snapshot.by_object_type].sort((a, b) => (num(b.on_orbit) ?? 0) - (num(a.on_orbit) ?? 0));
  const typeBars = byType.map((r, i) => ({ label: OBJECT_TYPE_LABELS[r.object_type] ?? titleCase(r.object_type), value: num(r.on_orbit) ?? 0, color: SERIES[i % SERIES.length] }));

  const byMission = [...snapshot.by_mission_type].sort((a, b) => (num(b.active) ?? 0) - (num(a.active) ?? 0));
  const missionBars = byMission.map((r) => ({ label: MISSION_LABELS[r.mission_type] ?? titleCase(r.mission_type), value: num(r.active) ?? 0, color: 'var(--series-3)' }));

  const totalActive = num(snapshot.global.active_satellites) ?? 0;
  const constellations = [...snapshot.top_constellations].sort((a, b) => (num(b.active) ?? 0) - (num(a.active) ?? 0)).slice(0, 12);
  const constellationActive = constellations.reduce((s, c) => s + (num(c.active) ?? 0), 0);

  return (
    <div className="space-y-12">
      <div className="grid gap-10 lg:grid-cols-2 lg:gap-12">
        <ChartBlock title="Active satellites by orbit class" hint={`${fmtInt(snapshot.global.active_satellites)} active`} derived>
          <Donut data={activeDonut} title="Active satellites by orbit class" size={150} />
        </ChartBlock>
        <ChartBlock title="Objects on orbit by orbit class" hint={`${fmtInt(snapshot.global.objects_on_orbit)} objects`} derived>
          <Donut data={onOrbitDonut} title="Objects on orbit by orbit class" size={150} />
        </ChartBlock>
      </div>
      <Legend items={ORBIT_ORDER.filter((c) => byOrbit.some((r) => r.orbit_class === c)).map((c) => ({ label: c === 'UNKNOWN' ? 'Unclassified (no element set)' : c, color: ORBIT_CLASS_COLORS[c] ?? 'var(--other)' }))} className="-mt-6" />

      <div className="grid gap-10 lg:grid-cols-2 lg:gap-12">
        <ChartBlock title="Objects on orbit by type" hint="SATCAT object type">
          <HBars data={typeBars} />
          <table className="data-table mt-5 text-sm">
            <thead>
              <tr>
                <th>Type</th>
                <th className="num">On orbit</th>
                <th className="num">Catalogued</th>
                <th className="num">Decayed</th>
              </tr>
            </thead>
            <tbody>
              {byType.map((r) => {
                const total = num(r.total) ?? 0;
                const on = num(r.on_orbit) ?? 0;
                return (
                  <tr key={r.object_type}>
                    <td>{OBJECT_TYPE_LABELS[r.object_type] ?? titleCase(r.object_type)}</td>
                    <td className="num tnum">{fmtInt(on)}</td>
                    <td className="num tnum">{fmtInt(total)}</td>
                    <td className="num tnum text-ink-3">{fmtInt(total - on)}</td>
                  </tr>
                );
              })}
            </tbody>
          </table>
        </ChartBlock>
        <ChartBlock title="Active satellites by mission type" hint="Active payloads" derived note="Mission type is classified by SatelliteIndex from names, constellation registry and CelesTrak groups.">
          <HBars data={missionBars} />
        </ChartBlock>
      </div>

      <ChartBlock title="Constellation shares" hint={`Top ${constellations.length} · ${totalActive ? ((constellationActive / totalActive) * 100).toFixed(1) : '—'}% of active satellites`} derived>
        <ul className="space-y-1.5">
          {constellations.map((c, i) => {
            const active = num(c.active) ?? 0;
            const pct = totalActive ? (active / totalActive) * 100 : 0;
            const maxActive = num(constellations[0]?.active) ?? 1;
            return (
              <li key={c.id} className="text-sm">
                <div className="flex items-baseline justify-between gap-3">
                  <Link href={routes.constellation(c.slug)} className="link min-w-0 truncate">
                    <span className="mono mr-2 text-[11px] text-ink-3">{String(i + 1).padStart(2, '0')}</span>
                    {c.name}
                  </Link>
                  <span className="tnum shrink-0 text-xs text-ink-2">
                    {fmtInt(active)} <span className="text-ink-3">· {pct < 0.1 ? '<0.1' : pct.toFixed(1)}%</span>
                  </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, (active / maxActive) * 100)}%`, background: ORBIT_CLASS_COLORS[c.orbit_class ?? ''] ?? 'var(--series-1)' }} />
                </div>
              </li>
            );
          })}
        </ul>
        <Note className="mt-3">
          Share = active satellites in the constellation ÷ all active satellites. Bar colour = orbit class. Constellation membership is derived from the SatelliteIndex registry —{' '}
          <Link href={routes.rankings('constellations')} className="text-accent hover:underline">full ranking</Link>.
        </Note>
      </ChartBlock>
    </div>
  );
}