import type { Metadata } from 'next';
import Link from 'next/link';
import { SitesMap } from '@/components/launches/sites-map';
import { Container, PageHeader } from '@/components/ui/section';
import { Unavailable } from '@/components/ui/unavailable';
import { api, safe } from '@/lib/api';
import { fmtDate, fmtInt, num } from '@/lib/format';
import { routes, SITE_URL } from '@/lib/site';

export const metadata: Metadata = {
  title: 'Launch sites — every spaceport that put an object in orbit',
  description: 'World map and table of launch sites: total launches, activity over the last 365 days, payloads and most recent launch, derived from SATCAT launch-site codes.',
  alternates: { canonical: routes.launchSites() },
  openGraph: { title: 'Launch sites of the world', description: 'Spaceports ranked by orbital launches, with recent activity and last launch.', url: `${SITE_URL}${routes.launchSites()}` },
  twitter: { card: 'summary_large_image', title: 'Launch sites of the world', description: 'Spaceports ranked by orbital launches, with recent activity and last launch.' },
};

export default async function LaunchSitesPage() {
  const res = await safe(api.launchSites());
  const sites = res ? [...res.data].sort((a, b) => (num(b.launches) ?? 0) - (num(a.launches) ?? 0)) : null;
  const active365 = sites?.filter((s) => (num(s.launches_last_365d) ?? 0) > 0).length ?? null;

  return (
    <Container wide>
      <PageHeader
        eyebrow={<>Infrastructure · {sites ? <span className="tnum">{fmtInt(sites.length)} sites · {fmtInt(active365)} active in the last 365 days</span> : 'count unavailable'}</>}
        title="Launch sites"
        lede="Every launch site referenced by a catalogued object, from Baikonur in 1957 to today's commercial pads. Marker area is proportional to the number of orbital launches attributed to the site."
      />

      {sites === null ? (
        <Unavailable what="Launch sites" />
      ) : (
        <>
          <section className="pb-8" aria-label="Map of launch sites">
            <SitesMap sites={sites} labelTop={5} />
          </section>

          <section className="pb-10" aria-label="Launch sites table">
            <div className="overflow-x-auto scrollbar-thin">
              <table className="data-table stack">
                <thead>
                  <tr>
                    <th>Site</th>
                    <th>Code</th>
                    <th>Country</th>
                    <th className="num">Launches</th>
                    <th className="num">Last 365 d</th>
                    <th className="num">Payloads</th>
                    <th>First launch</th>
                    <th>Last launch</th>
                  </tr>
                </thead>
                <tbody>
                  {sites.map((s) => {
                    const recent = num(s.launches_last_365d) ?? 0;
                    return (
                      <tr key={s.code}>
                        <td data-label="Site" className="primary">
                          <Link href={routes.launchSite(s.slug)} className="link font-medium">{s.name}</Link>
                          {s.latitude === null && <span className="ml-2 text-2xs text-ink-3">no coordinates</span>}
                        </td>
                        <td data-label="Code" className="mono text-xs text-ink-2">{s.code}</td>
                        <td data-label="Country" className="text-xs">{s.country_code ? <Link href={routes.country(s.country_code)} className="link">{s.country_name ?? s.country_code}</Link> : '—'}</td>
                        <td data-label="Launches" className="num mono text-xs">{fmtInt(s.launches)}</td>
                        <td data-label="Last 365 d" className={`num mono text-xs ${recent ? 'text-active' : 'text-ink-3'}`}>{fmtInt(s.launches_last_365d)}</td>
                        <td data-label="Payloads" className="num mono text-xs">{fmtInt(s.payloads)}</td>
                        <td data-label="First launch" className="mono text-xs">{fmtDate(s.first_launch)}</td>
                        <td data-label="Last launch" className="mono text-xs">{fmtDate(s.last_launch)}</td>
                      </tr>
                    );
                  })}
                </tbody>
              </table>
            </div>
          </section>
        </>
      )}

      <p className="pb-10 text-2xs text-ink-3">
        Sites and coordinates come from the SATCAT launch-site code table; launches are derived from international designators (see <Link href={routes.methodology()} className="hover:text-accent">methodology</Link>). Sea launches and air launches are attributed to their reference site.
      </p>
    </Container>
  );
}