import type { Metadata } from 'next';
import Link from 'next/link';
import { HBars } from '@/components/charts/charts';
import { ChipRow, EmptyRow, ScrollTable, entityMetadata, first, type Params } from '@/components/entities/shared';
import { Container, PageHeader } from '@/components/ui/section';
import { Unavailable } from '@/components/ui/unavailable';
import { api, safe } from '@/lib/api';
import { fmtInt, num } from '@/lib/format';
import { routes } from '@/lib/site';
import type { CountryRow } from '@/lib/types';

type SearchParams = Record<string, string | string[] | undefined>;

const SORTS: { value: string | undefined; label: string; key: keyof CountryRow; noun: string }[] = [
  { value: undefined, label: 'Active payloads', key: 'active_payloads', noun: 'active payloads' },
  { value: 'objects', label: 'Objects on orbit', key: 'objects_on_orbit', noun: 'objects on orbit' },
  { value: 'debris', label: 'Debris', key: 'debris_on_orbit', noun: 'debris fragments on orbit' },
  { value: 'launches', label: 'Launches', key: 'launches', noun: 'launches' },
  { value: 'name', label: 'Name', key: 'name', noun: 'name' },
];

export async function generateMetadata({ searchParams }: { searchParams: Promise<SearchParams> }): Promise<Metadata> {
  const sort = first((await searchParams).sort);
  const s = SORTS.find((x) => (x.value ?? '') === (sort ?? '')) ?? SORTS[0]!;
  return entityMetadata({
    title: `Countries in orbit — ranked by ${s.noun}`,
    description: 'Every country with catalogued objects in Earth orbit, ranked by active payloads, objects on orbit, debris, rocket bodies, launches and operators — with regional breakdown.',
    path: routes.countries(),
  });
}

export default async function CountriesPage({ searchParams }: { searchParams: Promise<SearchParams> }) {
  const sp = await searchParams;
  const params: Params = { sort: first(sp.sort) };
  const sortDef = SORTS.find((x) => (x.value ?? '') === (params.sort ?? '')) ?? SORTS[0]!;
  const res = await safe(api.countries(params.sort ?? 'active'));
  const rows = res?.data ?? [];
  const base = routes.countries();

  const metricKey = sortDef.key === 'name' ? 'active_payloads' : sortDef.key;
  const metricNoun = sortDef.key === 'name' ? 'active payloads' : sortDef.noun;
  const top10 = rows.length ? [...rows].sort((a, b) => (num(b[metricKey] as never) ?? 0) - (num(a[metricKey] as never) ?? 0)).slice(0, 10).map((c) => ({ label: c.name, value: num(c[metricKey] as never) ?? 0, href: routes.country(c.slug) })) : [];
  const byRegion = new Map<string, number>();
  for (const c of rows) byRegion.set(c.region ?? 'Unattributed', (byRegion.get(c.region ?? 'Unattributed') ?? 0) + (num(c[metricKey] as never) ?? 0));
  const regionData = [...byRegion.entries()].map(([label, value], i) => ({ label, value, color: `var(--series-${(i % 8) + 1})` })).sort((a, b) => b.value - a.value);

  const totals = rows.reduce(
    (t, c) => ({ active: t.active + (num(c.active_payloads) ?? 0), objects: t.objects + (num(c.objects_on_orbit) ?? 0), debris: t.debris + (num(c.debris_on_orbit) ?? 0) }),
    { active: 0, objects: 0, debris: 0 },
  );

  return (
    <Container wide>
      <PageHeader
        eyebrow="Countries"
        title="Countries in orbit"
        lede={
          res ? (
            <>
              {fmtInt(rows.length)} countries and jurisdictions hold catalogued objects in orbit — together {fmtInt(totals.active)} active payloads, {fmtInt(totals.objects)} objects on orbit and {fmtInt(totals.debris)} tracked debris fragments. Attribution follows SATCAT owner codes mapped to ISO 3166 (joint programmes are listed under their lead entry); see the{' '}
              <Link href={routes.methodology()} className="text-accent hover:underline">methodology</Link>.
            </>
          ) : (
            'Country rankings are temporarily unavailable.'
          )
        }
      />

      <div className="border-y border-rule py-2">
        <ChipRow label="Rank by" paramKey="sort" base={base} params={params} current={params.sort} options={SORTS.map((s) => ({ value: s.value, label: s.label }))} />
      </div>

      {res && rows.length > 0 && (
        <div className="grid gap-8 border-b border-rule py-8 lg:grid-cols-2">
          <div>
            <p className="eyebrow mb-3">Top 10 · {metricNoun}</p>
            <HBars data={top10} barHeight={30} />
          </div>
          <div>
            <p className="eyebrow mb-3">By region · {metricNoun}</p>
            <HBars data={regionData} barHeight={30} />
            <p className="mt-3 text-xs text-ink-3">Regions aggregate the countries listed below; multinational organisations (e.g. ESA, Intelsat) appear as their own entry.</p>
          </div>
        </div>
      )}

      <div className="py-6">{!res ? <Unavailable what="Country rankings" /> : <CountryTable rows={rows} />}</div>
    </Container>
  );
}

function CountryTable({ rows }: { rows: CountryRow[] }) {
  return (
    <ScrollTable>
      <table className="data-table stack">
        <thead>
          <tr>
            <th className="num">#</th>
            <th>Country</th>
            <th>Region</th>
            <th className="num">Active payloads</th>
            <th className="num max-md:hidden!">Payloads on orbit</th>
            <th className="num">Objects on orbit</th>
            <th className="num">Debris</th>
            <th className="num max-md:hidden!">Rocket bodies</th>
            <th className="num">Launches</th>
            <th className="num max-md:hidden!">Operators</th>
            <th className="num">Payloads 365 d</th>
          </tr>
        </thead>
        <tbody>
          {rows.length === 0 && <EmptyRow colSpan={11}>No countries returned.</EmptyRow>}
          {rows.map((c, i) => (
            <tr key={c.code}>
              <td data-label="Rank" className="num mono text-xs text-ink-3">{i + 1}</td>
              <td className="primary" data-label="Country">
                <Link href={routes.country(c.slug)} className="link font-medium">{c.name}</Link>
                <span className="mono ml-2 text-xs text-ink-3">{c.iso3 ?? c.code}</span>
              </td>
              <td data-label="Region" className="text-ink-2">{c.region ?? '—'}</td>
              <td data-label="Active payloads" className="num tnum font-medium text-active">{fmtInt(c.active_payloads)}</td>
              <td data-label="Payloads on orbit" className="num tnum max-md:hidden!">{fmtInt(c.on_orbit_payloads)}</td>
              <td data-label="Objects on orbit" className="num tnum">{fmtInt(c.objects_on_orbit)}</td>
              <td data-label="Debris" className="num tnum text-warn">{fmtInt(c.debris_on_orbit)}</td>
              <td data-label="Rocket bodies" className="num tnum max-md:hidden!">{fmtInt(c.rocket_bodies_on_orbit)}</td>
              <td data-label="Launches" className="num tnum">{fmtInt(c.launches)}</td>
              <td data-label="Operators" className="num tnum max-md:hidden!">{fmtInt(c.operators)}</td>
              <td data-label="Payloads 365 d" className="num tnum">{fmtInt(c.payloads_last_365d)}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </ScrollTable>
  );
}