import type { Metadata } from 'next';
import Link from 'next/link';
import { ChipRow, Derived, entityMetadata, first, ScrollTable, EmptyRow, type Params } from '@/components/entities/shared';
import { OrbitBadge } from '@/components/ui/badges';
import { Pagination } from '@/components/ui/pagination';
import { Container, PageHeader } from '@/components/ui/section';
import { Unavailable } from '@/components/ui/unavailable';
import { api, safe } from '@/lib/api';
import { fmt1, fmtDate, fmtInt, fmtKm, num, titleCase } from '@/lib/format';
import { routes } from '@/lib/site';
import type { ConstellationRow } from '@/lib/types';

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

const SORTS: { value: string | undefined; label: string }[] = [
  { value: undefined, label: 'Active' },
  { value: 'total', label: 'Total' },
  { value: 'growth', label: 'Growth 365 d' },
  { value: 'activity', label: 'Activity' },
  { value: 'name', label: 'Name' },
];
const SORT_NOUN: Record<string, string> = { '': 'active satellites', total: 'total satellites launched', growth: 'satellites launched in the last 365 days', activity: 'activity score', name: 'name' };
const SERVICES = ['communications', 'earth-observation', 'navigation', 'iot', 'weather', 'military', 'technology', 'station', 'science'];
const ORBITS = ['LEO', 'MEO', 'GEO', 'HEO', 'MIXED'];

function parse(sp: Search): Params {
  return { sort: first(sp.sort), service: first(sp.service), orbit: first(sp.orbit), page: first(sp.page) };
}

export async function generateMetadata({ searchParams }: { searchParams: Promise<Search> }): Promise<Metadata> {
  const p = parse(await searchParams);
  const bits = [p.service && titleCase(p.service), p.orbit].filter(Boolean).join(' · ');
  return entityMetadata({
    title: bits ? `${bits} satellite constellations` : 'Satellite constellations — ranked by active satellites',
    description: 'Every tracked satellite constellation ranked by active satellites, fleet size, 365-day growth and activity score, with orbit class, operator, median altitude and launch history.',
    path: routes.constellations(),
  });
}

export default async function ConstellationsPage({ searchParams }: { searchParams: Promise<Search> }) {
  const params = parse(await searchParams);
  const page = Math.max(1, Number(params.page) || 1);
  const res = await safe(api.constellations({ sort: params.sort, service: params.service, orbit: params.orbit, page }));
  const rows = res?.data ?? [];
  const total = res?.pagination.total ?? null;
  const base = routes.constellations();
  const activeSum = rows.reduce((s, r) => s + (num(r.active) ?? 0), 0);

  return (
    <Container wide>
      <PageHeader
        eyebrow="Constellations"
        title="Satellite constellations"
        lede={
          total !== null ? (
            <>
              {fmtInt(total)} constellations tracked{params.service || params.orbit ? ' in this selection' : ''}, ranked by {SORT_NOUN[params.sort ?? ''] ?? 'active satellites'}.
              {rows.length > 0 && <> The {fmtInt(rows.length)} shown on this page account for {fmtInt(activeSum)} active satellites.</>} Membership is derived from curated name patterns and CelesTrak groups — see the <Link href={routes.methodology()} className="text-accent hover:underline">methodology</Link>.
            </>
          ) : (
            'Constellation rankings are temporarily unavailable.'
          )
        }
      />

      <div className="flex flex-col gap-2 border-y border-rule py-2">
        <ChipRow label="Sort" paramKey="sort" base={base} params={params} current={params.sort} options={SORTS} />
        <ChipRow label="Service" paramKey="service" base={base} params={params} current={params.service} options={[{ value: undefined, label: 'All' }, ...SERVICES.map((s) => ({ value: s, label: titleCase(s) }))]} />
        <ChipRow label="Orbit" paramKey="orbit" base={base} params={params} current={params.orbit} options={[{ value: undefined, label: 'All' }, ...ORBITS.map((o) => ({ value: o, label: o }))]} />
      </div>

      <div className="py-6">
        {!res ? <Unavailable what="Constellation rankings" /> : <ConstellationTable rows={rows} offset={(page - 1) * (res.pagination.page_size || 100)} />}
        {res && (
          <Pagination
            className="mt-4"
            page={res.pagination.page}
            pages={res.pagination.pages}
            total={res.pagination.total}
            pageSize={res.pagination.page_size}
            makeHref={(p) => {
              const q = new URLSearchParams();
              for (const [k, v] of Object.entries(params)) if (v && k !== 'page') q.set(k, v);
              if (p > 1) q.set('page', String(p));
              const s = q.toString();
              return s ? `${base}?${s}` : base;
            }}
          />
        )}
      </div>
    </Container>
  );
}

function ConstellationTable({ rows, offset }: { rows: ConstellationRow[]; offset: number }) {
  return (
    <ScrollTable>
      <table className="data-table stack">
        <thead>
          <tr>
            <th className="num max-md:hidden!">#</th>
            <th>Constellation</th>
            <th>Operator</th>
            <th>Service</th>
            <th>Orbit</th>
            <th className="num">Active</th>
            <th className="num max-md:hidden!">On orbit</th>
            <th className="num">Total</th>
            <th className="num">365 d</th>
            <th className="num max-md:hidden!">30 d</th>
            <th className="num">
              <span className="inline-flex items-center gap-1">Activity <Derived /></span>
            </th>
            <th className="num max-md:hidden!">Median perigee</th>
            <th className="max-md:hidden!">First launch</th>
            <th>Last launch</th>
          </tr>
        </thead>
        <tbody>
          {rows.length === 0 && <EmptyRow colSpan={14}>No constellation matches these filters.</EmptyRow>}
          {rows.map((c, i) => (
            <tr key={c.id}>
              <td data-label="Rank" className="num mono text-xs text-ink-3 max-md:hidden!">{offset + i + 1}</td>
              <td className="primary" data-label="Constellation">
                <Link href={routes.constellation(c.slug)} className="link font-medium">{c.name}</Link>
                {c.country_code && <span className="mono ml-2 text-xs text-ink-3">{c.country_code}</span>}
              </td>
              <td data-label="Operator" className="text-ink-2">{c.operator_slug ? <Link href={routes.operator(c.operator_slug)} className="link">{c.operator_name}</Link> : c.operator_name ?? '—'}</td>
              <td data-label="Service" className="text-ink-2">{titleCase(c.service_type)}</td>
              <td data-label="Orbit"><OrbitBadge orbitClass={c.orbit_class} /></td>
              <td data-label="Active" className="num tnum font-medium text-active">{fmtInt(c.active)}</td>
              <td data-label="On orbit" className="num tnum max-md:hidden!">{fmtInt(c.on_orbit)}</td>
              <td data-label="Total" className="num tnum">{fmtInt(c.total)}</td>
              <td data-label="Launched 365 d" className="num tnum">{fmtInt(c.launched_last_365d)}</td>
              <td data-label="Launched 30 d" className="num tnum max-md:hidden!">{fmtInt(c.launched_last_30d)}</td>
              <td data-label="Activity score" className="num tnum text-accent-2">{fmt1(c.activity_score)}</td>
              <td data-label="Median perigee" className="num tnum max-md:hidden!">{fmtKm(c.median_perigee_km)}</td>
              <td data-label="First launch" className="tnum text-ink-2 max-md:hidden!">{fmtDate(c.first_launch)}</td>
              <td data-label="Last launch" className="tnum text-ink-2">{fmtDate(c.last_launch)}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </ScrollTable>
  );
}