/** Reusable data tables for entity detail pages — all `.data-table.stack` (stacked cards under 768 px). */
import Link from 'next/link';
import { OrbitBadge, StatusBadge, TypeBadge } from '@/components/ui/badges';
import { MissionLabel } from '@/components/ui/badges';
import { fmtDate, fmtInt, fmtKm, fmtDeg, titleCase } from '@/lib/format';
import { routes } from '@/lib/site';
import type { Num } from '@/lib/types';
import { EmptyRow, ScrollTable } from './shared';

// ---------------------------------------------------------------------------------------------------- launches
export interface LaunchLike {
  id: string;
  cospar_launch_id: string;
  launch_date: string | null;
  site_name: string | null;
  site_slug: string | null;
  satellites?: Num;
  payload_count?: Num;
  active?: Num;
  primary_name?: string | null;
}

export function LaunchesTable({ rows, showActive = false, showPrimary = false }: { rows: LaunchLike[]; showActive?: boolean; showPrimary?: boolean }) {
  const cols = 4 + (showActive ? 1 : 0) + (showPrimary ? 1 : 0);
  return (
    <ScrollTable>
      <table className="data-table stack">
        <thead>
          <tr>
            <th>Launch</th>
            <th>Date</th>
            {showPrimary && <th>Primary payload</th>}
            <th>Site</th>
            <th className="num">{showPrimary ? 'Payloads' : 'Satellites'}</th>
            {showActive && <th className="num">Active</th>}
          </tr>
        </thead>
        <tbody>
          {rows.length === 0 && <EmptyRow colSpan={cols}>No launches recorded.</EmptyRow>}
          {rows.map((l) => (
            <tr key={l.id}>
              <td className="primary" data-label="Launch">
                <Link href={routes.launch(l.cospar_launch_id)} className="link mono">{l.cospar_launch_id}</Link>
              </td>
              <td data-label="Date" className="tnum text-ink-2">{fmtDate(l.launch_date)}</td>
              {showPrimary && <td data-label="Primary payload" className="text-ink-2">{l.primary_name ?? '—'}</td>}
              <td data-label="Site" className="max-w-[360px] text-ink-2">
                {l.site_slug ? <Link href={routes.launchSite(l.site_slug)} className="link">{l.site_name ?? l.site_slug}</Link> : l.site_name ?? '—'}
              </td>
              <td data-label={showPrimary ? 'Payloads' : 'Satellites'} className="num tnum">{fmtInt(l.satellites ?? l.payload_count)}</td>
              {showActive && <td data-label="Active" className="num tnum text-active">{fmtInt(l.active)}</td>}
            </tr>
          ))}
        </tbody>
      </table>
    </ScrollTable>
  );
}

// ------------------------------------------------------------------------------------------------ launch sites
export interface SiteLike {
  code: string;
  name: string;
  slug: string;
  country_code?: string | null;
  launches: Num;
  satellites?: Num;
  last_launch?: string | null;
}

export function SitesTable({ rows, showSatellites = false, showLast = false }: { rows: SiteLike[]; showSatellites?: boolean; showLast?: boolean }) {
  const cols = 3 + (showSatellites ? 1 : 0) + (showLast ? 1 : 0);
  return (
    <ScrollTable>
      <table className="data-table stack">
        <thead>
          <tr>
            <th>Site</th>
            <th>Code</th>
            <th className="num">Launches</th>
            {showSatellites && <th className="num">Satellites</th>}
            {showLast && <th>Last launch</th>}
          </tr>
        </thead>
        <tbody>
          {rows.length === 0 && <EmptyRow colSpan={cols}>No launch sites recorded.</EmptyRow>}
          {rows.map((s) => (
            <tr key={s.code}>
              <td className="primary" data-label="Site">
                <Link href={routes.launchSite(s.slug)} className="link">{s.name}</Link>
                {s.country_code && <span className="mono ml-2 text-xs text-ink-3">{s.country_code}</span>}
              </td>
              <td data-label="Code" className="mono text-xs text-ink-2">{s.code}</td>
              <td data-label="Launches" className="num tnum">{fmtInt(s.launches)}</td>
              {showSatellites && <td data-label="Satellites" className="num tnum">{fmtInt(s.satellites)}</td>}
              {showLast && <td data-label="Last launch" className="tnum text-ink-2">{fmtDate(s.last_launch)}</td>}
            </tr>
          ))}
        </tbody>
      </table>
    </ScrollTable>
  );
}

// -------------------------------------------------------------------------------------------------- satellites
export interface SatLike {
  id: string;
  slug: string;
  name: string;
  norad_id: number | null;
  status: string;
  object_type?: string;
  orbit_class?: string | null;
  mission_type?: string | null;
  launch_date: string | null;
  perigee_km?: Num;
  apogee_km?: Num;
  inclination_deg?: Num;
}

export function SatellitesTable({ rows, columns }: { rows: SatLike[]; columns: ('type' | 'orbit' | 'mission' | 'perigee' | 'apogee' | 'inclination')[] }) {
  const has = (c: (typeof columns)[number]) => columns.includes(c);
  const cols = 4 + columns.length;
  return (
    <ScrollTable>
      <table className="data-table stack">
        <thead>
          <tr>
            <th>Satellite</th>
            <th>NORAD</th>
            <th>Status</th>
            {has('type') && <th>Type</th>}
            {has('orbit') && <th>Orbit</th>}
            {has('mission') && <th>Mission</th>}
            <th>Launched</th>
            {has('perigee') && <th className="num">Perigee</th>}
            {has('apogee') && <th className="num">Apogee</th>}
            {has('inclination') && <th className="num">Incl.</th>}
          </tr>
        </thead>
        <tbody>
          {rows.length === 0 && <EmptyRow colSpan={cols}>No satellites recorded.</EmptyRow>}
          {rows.map((s) => (
            <tr key={s.id}>
              <td className="primary" data-label="Satellite">
                <Link href={routes.satellite(s.slug)} className="link font-medium">{s.name}</Link>
              </td>
              <td data-label="NORAD" className="mono text-xs text-ink-2">{s.norad_id ?? '—'}</td>
              <td data-label="Status"><StatusBadge status={s.status} /></td>
              {has('type') && <td data-label="Type"><TypeBadge type={s.object_type} /></td>}
              {has('orbit') && <td data-label="Orbit"><OrbitBadge orbitClass={s.orbit_class} /></td>}
              {has('mission') && <td data-label="Mission" className="text-ink-2"><MissionLabel mission={s.mission_type} /></td>}
              <td data-label="Launched" className="tnum text-ink-2">{fmtDate(s.launch_date)}</td>
              {has('perigee') && <td data-label="Perigee" className="num tnum">{fmtKm(s.perigee_km)}</td>}
              {has('apogee') && <td data-label="Apogee" className="num tnum">{fmtKm(s.apogee_km)}</td>}
              {has('inclination') && <td data-label="Incl." className="num tnum">{fmtDeg(s.inclination_deg)}</td>}
            </tr>
          ))}
        </tbody>
      </table>
    </ScrollTable>
  );
}

// ------------------------------------------------------------------------------------------ constellation lists
export interface ConstellationLike {
  id: string;
  slug: string;
  name: string;
  service_type: string | null;
  orbit_class: string | null;
  active: Num;
  total: Num;
  launched_last_365d?: Num;
}

export function ConstellationsMiniTable({ rows }: { rows: ConstellationLike[] }) {
  const showGrowth = rows.some((r) => r.launched_last_365d !== undefined);
  return (
    <ScrollTable>
      <table className="data-table stack">
        <thead>
          <tr>
            <th>Constellation</th>
            <th>Service</th>
            <th>Orbit</th>
            <th className="num">Active</th>
            <th className="num">Total</th>
            {showGrowth && <th className="num">365 d</th>}
          </tr>
        </thead>
        <tbody>
          {rows.length === 0 && <EmptyRow colSpan={showGrowth ? 6 : 5}>No constellations linked.</EmptyRow>}
          {rows.map((c) => (
            <tr key={c.id}>
              <td className="primary" data-label="Constellation"><Link href={routes.constellation(c.slug)} className="link font-medium">{c.name}</Link></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 text-active">{fmtInt(c.active)}</td>
              <td data-label="Total" className="num tnum">{fmtInt(c.total)}</td>
              {showGrowth && <td data-label="Launched 365 d" className="num tnum">{fmtInt(c.launched_last_365d)}</td>}
            </tr>
          ))}
        </tbody>
      </table>
    </ScrollTable>
  );
}

// ----------------------------------------------------------------------------------------------- operator lists
export interface OperatorLike {
  id: string;
  slug: string;
  name: string;
  kind: string;
  active_payloads: Num;
  total_payloads: Num;
  payloads_last_365d: Num;
}

export function OperatorsMiniTable({ rows }: { rows: OperatorLike[] }) {
  return (
    <ScrollTable>
      <table className="data-table stack">
        <thead>
          <tr>
            <th>Operator</th>
            <th>Kind</th>
            <th className="num">Active</th>
            <th className="num">Total</th>
            <th className="num">365 d</th>
          </tr>
        </thead>
        <tbody>
          {rows.length === 0 && <EmptyRow colSpan={5}>No operators linked.</EmptyRow>}
          {rows.map((o) => (
            <tr key={o.id}>
              <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="Active" className="num tnum text-active">{fmtInt(o.active_payloads)}</td>
              <td data-label="Total" className="num tnum">{fmtInt(o.total_payloads)}</td>
              <td data-label="Launched 365 d" className="num tnum">{fmtInt(o.payloads_last_365d)}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </ScrollTable>
  );
}