import type { Metadata } from 'next';
import { Search } from 'lucide-react';
import Link from 'next/link';
import { ChipRow, EmptyRow, ScrollTable, entityMetadata, first, type Params } from '@/components/entities/shared';
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 { fmtDate, fmtInt, num, titleCase } from '@/lib/format';
import { routes } from '@/lib/site';
import type { OperatorRow } from '@/lib/types';

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

const SORTS: { value: string | undefined; label: string }[] = [
  { value: undefined, label: 'Active payloads' },
  { value: 'total', label: 'Total payloads' },
  { value: 'growth', label: 'Growth 365 d' },
  { value: 'name', label: 'Name' },
];
const SORT_NOUN: Record<string, string> = { '': 'active payloads', total: 'total payloads launched', growth: 'payloads launched in the last 365 days', name: 'name' };
const KINDS = ['operator', 'agency', 'military', 'manufacturer', 'launch_provider'];

function parse(sp: SearchParams): Params {
  return { sort: first(sp.sort), kind: first(sp.kind), country: first(sp.country), q: first(sp.q)?.trim() || undefined, page: first(sp.page) };
}

export async function generateMetadata({ searchParams }: { searchParams: Promise<SearchParams> }): Promise<Metadata> {
  const p = parse(await searchParams);
  const bits = [p.kind && titleCase(p.kind), p.country && titleCase(p.country), p.q && `“${p.q}”`].filter(Boolean).join(' · ');
  return entityMetadata({
    title: bits ? `Satellite operators — ${bits}` : 'Satellite operators, agencies and military programmes — ranked',
    description: 'Every organisation operating satellites, ranked by active payloads: commercial operators, space agencies and military programmes with fleet size, constellations, launches and 365-day growth.',
    path: routes.operators(),
  });
}

export default async function OperatorsPage({ searchParams }: { searchParams: Promise<SearchParams> }) {
  const params = parse(await searchParams);
  const page = Math.max(1, Number(params.page) || 1);
  const res = await safe(api.operators({ sort: params.sort, kind: params.kind, country: params.country, q: params.q, page }));
  const rows = res?.data ?? [];
  const total = res?.pagination.total ?? null;
  const base = routes.operators();
  const activeSum = rows.reduce((s, r) => s + (num(r.active_payloads) ?? 0), 0);

  return (
    <Container wide>
      <PageHeader
        eyebrow="Operators"
        title="Satellite operators"
        lede={
          total !== null ? (
            <>
              {fmtInt(total)} organisations{params.q ? ` matching “${params.q}”` : params.kind || params.country ? ' in this selection' : ''} — commercial operators, agencies and military programmes — ranked by {SORT_NOUN[params.sort ?? ''] ?? 'active payloads'}.
              {rows.length > 0 && <> The {fmtInt(rows.length)} shown here operate {fmtInt(activeSum)} active payloads.</>}
            </>
          ) : (
            'Operator rankings are temporarily unavailable.'
          )
        }
      >
        <form action={base} method="get" role="search" className="mt-6 flex max-w-lg items-stretch gap-2">
          {params.sort && <input type="hidden" name="sort" value={params.sort} />}
          {params.kind && <input type="hidden" name="kind" value={params.kind} />}
          {params.country && <input type="hidden" name="country" value={params.country} />}
          <label className="relative flex-1">
            <span className="sr-only">Search operators</span>
            <Search className="pointer-events-none absolute left-3 top-1/2 size-4 -translate-y-1/2 text-ink-3" aria-hidden />
            <input type="search" name="q" defaultValue={params.q ?? ''} placeholder="Search operators, agencies, aliases…" className="h-11 w-full rounded-md border border-rule bg-plane-2 pl-9 pr-3 text-sm text-ink placeholder:text-ink-3" />
          </label>
          <button type="submit" className="h-11 rounded-md bg-accent px-4 text-sm font-medium text-accent-ink">Search</button>
          {params.q && (
            <Link href={base} className="inline-flex h-11 items-center rounded-md border border-rule px-3 text-sm text-ink-2 hover:bg-plane-2">Clear</Link>
          )}
        </form>
      </PageHeader>

      <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="Kind" paramKey="kind" base={base} params={params} current={params.kind} options={[{ value: undefined, label: 'All' }, ...KINDS.map((k) => ({ value: k, label: titleCase(k) }))]} />
        {params.country && <ChipRow label="Country" paramKey="country" base={base} params={params} current={params.country} options={[{ value: undefined, label: 'All countries' }, { value: params.country, label: titleCase(params.country) }]} />}
      </div>

      <div className="py-6">
        {!res ? <Unavailable what="Operator rankings" /> : <OperatorTable 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 OperatorTable({ rows, offset }: { rows: OperatorRow[]; offset: number }) {
  return (
    <ScrollTable>
      <table className="data-table stack">
        <thead>
          <tr>
            <th className="num max-md:hidden!">#</th>
            <th>Operator</th>
            <th>Kind</th>
            <th>Country</th>
            <th className="num">Active</th>
            <th className="num max-md:hidden!">On orbit</th>
            <th className="num">Total</th>
            <th className="num">Constellations</th>
            <th className="num">Launches</th>
            <th className="num">365 d</th>
            <th className="max-md:hidden!">First launch</th>
            <th>Last launch</th>
          </tr>
        </thead>
        <tbody>
          {rows.length === 0 && <EmptyRow colSpan={12}>No operator matches this query.</EmptyRow>}
          {rows.map((o, i) => (
            <tr key={o.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="Operator"><Link href={routes.operator(o.slug)} className="link font-medium">{o.name}</Link></td>
              <td data-label="Kind" className="text-ink-2">{titleCase(o.kind)}</td>
              <td data-label="Country" className="text-ink-2">{o.country_slug ? <Link href={routes.country(o.country_slug)} className="link">{o.country_name}</Link> : o.country_name ?? '—'}</td>
              <td data-label="Active payloads" className="num tnum font-medium text-active">{fmtInt(o.active_payloads)}</td>
              <td data-label="On orbit" className="num tnum max-md:hidden!">{fmtInt(o.on_orbit_payloads)}</td>
              <td data-label="Total" className="num tnum">{fmtInt(o.total_payloads)}</td>
              <td data-label="Constellations" className="num tnum">{fmtInt(o.constellations)}</td>
              <td data-label="Launches" className="num tnum">{fmtInt(o.launches)}</td>
              <td data-label="Launched 365 d" className="num tnum">{fmtInt(o.payloads_last_365d)}</td>
              <td data-label="First launch" className="tnum text-ink-2 max-md:hidden!">{fmtDate(o.first_launch)}</td>
              <td data-label="Last launch" className="tnum text-ink-2">{fmtDate(o.last_launch)}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </ScrollTable>
  );
}