import Link from 'next/link';
import { Bars, StackedBars } from '@/components/charts/charts';
import { fmtInt, num } from '@/lib/format';
import { routes } from '@/lib/site';
import type { StatsSnapshot } from '@/lib/types';
import { ChartBlock, Derived, Note, TwoCol } from './shared';

/** Full-history charts (since 1957) + derived growth-rate table. */
export function StatsHistory({ snapshot }: { snapshot: StatsSnapshot }) {
  const launches = [...snapshot.launches_by_year].sort((a, b) => a.year - b.year);
  const payloads = [...snapshot.payloads_by_launch_year].sort((a, b) => a.year - b.year);
  const decays = [...snapshot.decays_by_year].sort((a, b) => a.year - b.year);
  const first = launches[0]?.year;
  const last = launches[launches.length - 1]?.year;
  const span = first && last ? `${first}–${last}` : undefined;

  const launchSeries = launches.map((r) => ({ x: r.year, y: num(r.launches) ?? 0 }));
  const payloadStack = payloads.map((r) => {
    const p = num(r.payloads) ?? 0;
    const a = num(r.still_active) ?? 0;
    return { x: r.year, still_active: a, retired: Math.max(0, p - a) };
  });
  const decaySeries = decays.map((r) => ({ x: r.year, y: num(r.decayed) ?? 0 }));

  // Derived: year-over-year change of payloads launched (last 10 complete + current year).
  const growth = payloads
    .map((r, i) => {
      const cur = num(r.payloads) ?? 0;
      const prev = i > 0 ? (num(payloads[i - 1]?.payloads) ?? 0) : null;
      const pct = prev && prev > 0 ? ((cur - prev) / prev) * 100 : null;
      return { year: r.year, payloads: cur, prev, pct, active: num(r.still_active) ?? 0 };
    })
    .slice(-10)
    .reverse();
  const currentYear = new Date().getUTCFullYear();

  return (
    <div className="space-y-12">
      <ChartBlock title="Orbital launches per year" hint={span}>
        <Bars data={launchSeries} title="Orbital launches per year" height={190} xTicks={7} color="var(--series-1)" highlightLast />
        <Note className="mt-2">Launches with at least one catalogued object (CelesTrak SATCAT, grouped by COSPAR launch id). The last bar is the current, incomplete year.</Note>
      </ChartBlock>

      <TwoCol>
        <ChartBlock title="Payloads by launch year" hint="Still active vs retired">
          <StackedBars data={payloadStack} keys={['still_active', 'retired']} labels={{ still_active: 'Still active', retired: 'Retired / decayed' }} title="Payloads by launch year, still active vs retired" height={200} xTicks={7} />
          <Note className="mt-2">Retired = payloads catalogued for that launch year − payloads still active today (derived from the two snapshot series).</Note>
        </ChartBlock>
        <ChartBlock title="Decays per year" hint="All object types">
          <Bars data={decaySeries} title="Objects decayed per year" height={200} xTicks={7} color="var(--series-4)" highlightLast />
          <Note className="mt-2">
            Objects with a published decay date in the SATCAT. Debris-only breakdown on <Link href={routes.debris()} className="text-accent hover:underline">/debris</Link>; recent reentries on{' '}
            <Link href={routes.reentries()} className="text-accent hover:underline">/reentries</Link>.
          </Note>
        </ChartBlock>
      </TwoCol>

      <ChartBlock title="Satellite growth rate" hint="Last 10 years" derived>
        <table className="data-table stack text-sm">
          <thead>
            <tr>
              <th>Year</th>
              <th className="num">Payloads launched</th>
              <th className="num">Previous year</th>
              <th className="num">YoY change</th>
              <th className="num">Still active</th>
            </tr>
          </thead>
          <tbody>
            {growth.map((g) => (
              <tr key={g.year}>
                <td className="primary mono" data-label="Year">
                  {g.year}
                  {g.year === currentYear && <span className="ml-2 text-[11px] text-ink-3">year to date</span>}
                </td>
                <td className="num tnum" data-label="Payloads launched">{fmtInt(g.payloads)}</td>
                <td className="num tnum text-ink-3" data-label="Previous year">{g.prev === null ? '—' : fmtInt(g.prev)}</td>
                <td className="num tnum" data-label="YoY change">
                  {g.pct === null ? <span className="text-ink-3">—</span> : <span className={g.pct >= 0 ? 'text-active' : 'text-danger'}>{g.pct >= 0 ? '+' : ''}{g.pct.toFixed(1)}%</span>}
                </td>
                <td className="num tnum" data-label="Still active">{fmtInt(g.active)}</td>
              </tr>
            ))}
          </tbody>
        </table>
        <Note className="mt-3">
          <Derived className="mr-2" /> YoY change = (payloads launched in year − payloads launched the previous year) ÷ previous year, computed from the snapshot series. The current year is partial, so its change is not comparable.
        </Note>
      </ChartBlock>
    </div>
  );
}