import type { Metadata } from 'next';
import Link from 'next/link';
import { HBars, StackedBars } from '@/components/charts/charts';
import { ChartBlock, Disclaimer, InlineRank, Note, StatGrid, TwoCol } from '@/components/stats/shared';
import { TypeBadge } from '@/components/ui/badges';
import { Container, PageHeader, Section, Stat } from '@/components/ui/section';
import { Unavailable } from '@/components/ui/unavailable';
import { api, safe } from '@/lib/api';
import { fmt2, fmtAgo, fmtDate, fmtInt, fmtKm, num } from '@/lib/format';
import { routes, SITE_NAME, SITE_URL } from '@/lib/site';

export const revalidate = 900;

const TITLE = 'Space debris — catalogued fragments, rocket bodies and their sources';
const DESC = 'Tracked space debris on orbit: totals, debris by country, altitude distribution, fragmentation events with the most fragments still on orbit, debris growth by launch year and the largest tracked objects. Catalogued object counts only.';

export async function generateMetadata(): Promise<Metadata> {
  const url = `${SITE_URL}${routes.debris()}`;
  return {
    title: TITLE,
    description: DESC,
    alternates: { canonical: url },
    openGraph: { title: `${TITLE} | ${SITE_NAME}`, description: DESC, url, type: 'website', siteName: SITE_NAME },
    twitter: { card: 'summary_large_image', title: `${TITLE} | ${SITE_NAME}`, description: DESC },
  };
}

export default async function DebrisPage() {
  const res = await safe(api.debris());
  const d = res?.data ?? null;

  const byCountry = d ? [...d.by_country].sort((a, b) => (num(b.debris) ?? 0) - (num(a.debris) ?? 0)) : [];
  const debrisBars = byCountry.filter((c) => (num(c.debris) ?? 0) > 0).slice(0, 12).map((c) => ({ label: c.name, value: num(c.debris) ?? 0, color: 'var(--series-4)' }));
  const rbBars = [...byCountry].sort((a, b) => (num(b.rocket_bodies) ?? 0) - (num(a.rocket_bodies) ?? 0)).filter((c) => (num(c.rocket_bodies) ?? 0) > 0).slice(0, 12).map((c) => ({ label: c.name, value: num(c.rocket_bodies) ?? 0, color: 'var(--series-2)' }));

  const byAlt = d ? [...d.by_altitude].sort((a, b) => (num(a.alt_km) ?? 0) - (num(b.alt_km) ?? 0)).map((r) => ({ x: String(num(r.alt_km) ?? 0), debris: num(r.debris) ?? 0, rocket_bodies: num(r.rocket_bodies) ?? 0 })) : [];
  const growth = d ? [...d.debris_growth].sort((a, b) => a.year - b.year).map((r) => {
    const cat = num(r.debris_catalogued) ?? 0;
    const still = num(r.debris_still_on_orbit) ?? 0;
    return { x: r.year, still_on_orbit: still, decayed: Math.max(0, cat - still) };
  }) : [];
  const decays = d ? [...d.decays_by_year].sort((a, b) => a.year - b.year).map((r) => ({ x: r.year, payloads: num(r.payloads) ?? 0, debris: num(r.debris) ?? 0, rocket_bodies: num(r.rocket_bodies) ?? 0 })) : [];
  const largest = d ? [...d.largest_objects].sort((a, b) => (num(b.rcs_m2) ?? 0) - (num(a.rcs_m2) ?? 0)) : [];

  return (
    <Container>
      <PageHeader eyebrow="Debris" title="Space debris on orbit" lede="Catalogued fragments and spent rocket bodies currently tracked, where they come from and how the population has evolved since 1957. Counts come from the SATCAT as normalised by SatelliteIndex.">
        {res && <p className="mono mt-4 text-xs text-ink-3">Generated {fmtAgo(res.meta.generated_at)}</p>}
      </PageHeader>

      {!d ? (
        <div className="py-6">
          <Unavailable what="Debris statistics" />
        </div>
      ) : (
        <>
          <div className="pb-8">
            <Disclaimer text={d.disclaimer} />
          </div>

          <Section eyebrow="Totals" title="Non-operational objects on orbit" className="pt-0 md:pt-0">
            <StatGrid cols={4}>
              <Stat label="Debris" value={fmtInt(d.totals.debris)} accent hint="Catalogued fragments on orbit" />
              <Stat label="Rocket bodies" value={fmtInt(d.totals.rocket_bodies)} hint="Spent stages on orbit" />
              <Stat label="Unknown type" value={fmtInt(d.totals.unknown)} hint="Unclassified objects on orbit" />
              <Stat label="Inactive payloads" value={fmtInt(d.totals.inactive_payloads)} hint="Non-operational satellites on orbit" />
            </StatGrid>
          </Section>

          <Section eyebrow="By country" title="Who the debris is attributed to" action={{ href: routes.rankings('countries-debris'), label: 'Full ranking' }}>
            <TwoCol>
              <ChartBlock title="Debris on orbit by country" hint="SATCAT owner code → country">
                {debrisBars.length ? <HBars data={debrisBars} /> : <Unavailable what="Debris by country" />}
                <ul className="mt-3 flex flex-wrap gap-x-4 gap-y-1 text-xs">
                  {byCountry.slice(0, 12).map((c) => (
                    <li key={c.code}>
                      <Link href={routes.country(c.slug)} className="link">{c.name}</Link>
                    </li>
                  ))}
                </ul>
              </ChartBlock>
              <ChartBlock title="Rocket bodies on orbit by country">{rbBars.length ? <HBars data={rbBars} /> : <Unavailable what="Rocket bodies by country" />}</ChartBlock>
            </TwoCol>
          </Section>

          <Section eyebrow="Altitude" title="Where debris and rocket bodies orbit">
            <ChartBlock title="Debris and rocket bodies by perigee altitude" hint="50 km bins" derived>
              <StackedBars data={byAlt} keys={['debris', 'rocket_bodies']} labels={{ debris: 'Debris', rocket_bodies: 'Rocket bodies' }} title="Debris and rocket bodies on orbit by perigee altitude, 50 km bins (km)" height={220} xTicks={10} />
              <Note className="mt-2">x-axis = lower edge of each 50 km perigee bin (km). Objects without a current element set are not placed. Informational density only.</Note>
            </ChartBlock>
          </Section>

          <Section eyebrow="Sources" title="Launches with the most fragments still on orbit" action={{ href: routes.launches(), label: 'All launches' }}>
            {d.by_launch.length === 0 ? (
              <Unavailable what="Fragmentation sources" />
            ) : (
              <table className="data-table stack text-sm">
                <thead>
                  <tr>
                    <th>Launch</th>
                    <th>Date</th>
                    <th>Site</th>
                    <th>Owners</th>
                    <th className="num">Debris on orbit</th>
                  </tr>
                </thead>
                <tbody>
                  {d.by_launch.map((l, i) => (
                    <tr key={l.cospar_launch_id}>
                      <td className="primary">
                        <InlineRank n={i + 1} />
                        <Link href={routes.launch(l.cospar_launch_id)} className="link font-medium">{l.primary_name ?? l.cospar_launch_id}</Link>
                        <span className="mono ml-2 text-xs text-ink-3">{l.cospar_launch_id}</span>
                      </td>
                      <td data-label="Date" className="mono text-xs">{fmtDate(l.launch_date)}</td>
                      <td data-label="Site" className="text-ink-2">{l.site_name ?? '—'}</td>
                      <td data-label="Owners" className="mono text-xs">{l.owner_codes?.join(', ') || '—'}</td>
                      <td data-label="Debris on orbit" className="num tnum font-medium">{fmtInt(l.debris_on_orbit)}</td>
                    </tr>
                  ))}
                </tbody>
              </table>
            )}
            <Note className="mt-3">Fragments are attributed to the COSPAR launch of their parent object. Owner codes are SATCAT designators (e.g. PRC, CIS, US).</Note>
          </Section>

          <Section eyebrow="History" title="Debris growth and decay">
            <TwoCol>
              <ChartBlock title="Debris catalogued by launch year" hint="Still on orbit vs decayed">
                <StackedBars data={growth} keys={['still_on_orbit', 'decayed']} labels={{ still_on_orbit: 'Still on orbit', decayed: 'Decayed' }} title="Debris catalogued by launch year of the parent object: still on orbit vs decayed" height={220} xTicks={7} />
                <Note className="mt-2">Decayed = catalogued − still on orbit (derived from the two published series). Year = launch year of the parent object, not the fragmentation date.</Note>
              </ChartBlock>
              <ChartBlock title="Decays per year by object type">
                <StackedBars data={decays} keys={['payloads', 'debris', 'rocket_bodies']} labels={{ payloads: 'Payloads', debris: 'Debris', rocket_bodies: 'Rocket bodies' }} title="Objects decayed per year by type" height={220} xTicks={7} />
                <Note className="mt-2">
                  Published SATCAT decay dates. Recent reentries are listed on <Link href={routes.reentries()} className="text-accent hover:underline">/reentries</Link>.
                </Note>
              </ChartBlock>
            </TwoCol>
          </Section>

          <Section eyebrow="Largest" title="Largest tracked debris and rocket bodies" action={{ href: routes.satellites('object_type=DEBRIS,ROCKET_BODY&on_orbit=true'), label: 'Browse all' }}>
            {largest.length === 0 ? (
              <Unavailable what="Largest objects" />
            ) : (
              <table className="data-table stack text-sm">
                <thead>
                  <tr>
                    <th>Object</th>
                    <th>Type</th>
                    <th className="num">RCS (m²)</th>
                    <th className="num">Perigee</th>
                    <th className="num">Apogee</th>
                    <th>Launched</th>
                    <th>Country</th>
                  </tr>
                </thead>
                <tbody>
                  {largest.map((o, i) => (
                    <tr key={o.id}>
                      <td className="primary">
                        <InlineRank n={i + 1} />
                        <Link href={routes.satellite(o.slug)} className="link font-medium">{o.name}</Link>
                        {o.norad_id && <span className="mono ml-2 text-xs text-ink-3">#{o.norad_id}</span>}
                      </td>
                      <td data-label="Type"><TypeBadge type={o.object_type} /></td>
                      <td data-label="RCS (m²)" className="num tnum">{fmt2(o.rcs_m2)}</td>
                      <td data-label="Perigee" className="num tnum">{fmtKm(o.perigee_km)}</td>
                      <td data-label="Apogee" className="num tnum">{fmtKm(o.apogee_km)}</td>
                      <td data-label="Launched" className="mono text-xs">{fmtDate(o.launch_date)}</td>
                      <td data-label="Country" className="mono text-xs">{o.country_code ?? '—'}</td>
                    </tr>
                  ))}
                </tbody>
              </table>
            )}
            <Note className="mt-3">RCS = radar cross-section as published in the SATCAT (m²); it is a size proxy, not mass. {d.disclaimer}</Note>
          </Section>
        </>
      )}
    </Container>
  );
}