import { Bars, StackedBars } from '@/components/charts/charts';
import { fmtInt, num } from '@/lib/format';
import type { LaunchTimeline } from '@/lib/types';

const REGION_LABELS = { us: 'United States', russia_cis: 'Russia / Kazakhstan', china: 'China', other: 'Other / unknown site' };

/** Launches per year by launch-site region + monthly cadence for the last 36 months. Server-rendered SVG. */
export function LaunchTimelineCharts({ timeline }: { timeline: LaunchTimeline }) {
  const years = timeline.years.map((y) => ({ x: String(y.year), us: num(y.us) ?? 0, russia_cis: num(y.russia_cis) ?? 0, china: num(y.china) ?? 0, other: num(y.other) ?? 0 }));
  const months = timeline.months.map((m) => ({ x: m.month.slice(0, 7), y: num(m.launches) ?? 0 }));
  const lastYear = timeline.years[timeline.years.length - 1];
  const totalLaunches = timeline.years.reduce((s, y) => s + (num(y.launches) ?? 0), 0);
  const totalPayloads = timeline.years.reduce((s, y) => s + (num(y.payloads) ?? 0), 0);
  return (
    <div className="grid gap-8 lg:grid-cols-[minmax(0,3fr)_minmax(0,2fr)]">
      <div className="min-w-0">
        <div className="mb-2 flex items-baseline justify-between gap-3">
          <p className="eyebrow">Launches per year by launch-site region</p>
          <p className="tnum text-xs text-ink-3">{fmtInt(totalLaunches)} launches · {fmtInt(totalPayloads)} payloads since {timeline.years[0]?.year ?? '—'}</p>
        </div>
        <StackedBars data={years} keys={['us', 'russia_cis', 'china', 'other']} labels={REGION_LABELS} title="Orbital launches per year by launch-site region" height={220} xTicks={10} />
      </div>
      <div className="min-w-0">
        <div className="mb-2 flex items-baseline justify-between gap-3">
          <p className="eyebrow">Monthly cadence · last 36 months</p>
          {lastYear && <p className="tnum text-xs text-ink-3">{fmtInt(lastYear.launches)} launches in {lastYear.year}</p>}
        </div>
        <Bars data={months} title="Launches per month over the last 36 months" height={220} xTicks={6} highlightLast color="var(--series-2)" />
        <p className="mt-1 text-2xs text-ink-3">The last bar is the current month (partial).</p>
      </div>
    </div>
  );
}