import Link from 'next/link';
import { OrbitBadge, StatusBadge, TypeBadge } from '@/components/ui/badges';
import { fmtDate, fmtDeg, fmtInt } from '@/lib/format';
import { routes } from '@/lib/site';
import type { SatelliteRow } from '@/lib/types';

export function ResultsTable({ rows }: { rows: SatelliteRow[] }) {
  return (
    <div className="overflow-x-auto scrollbar-thin">
      <table className="data-table stack">
        <thead>
          <tr>
            <th>Name</th>
            <th>NORAD</th>
            <th>COSPAR</th>
            <th>Type</th>
            <th>Status</th>
            <th>Orbit</th>
            <th className="num">Perigee / apogee</th>
            <th className="num">Incl.</th>
            <th>Launched</th>
            <th>Operator</th>
            <th>Country</th>
          </tr>
        </thead>
        <tbody>
          {rows.map((s) => (
            <tr key={s.id}>
              <td data-label="Name" className="primary">
                <Link href={routes.satellite(s.slug)} prefetch={false} className="link font-medium">{s.name}</Link>
                {s.constellation_name && <span className="ml-2 text-2xs text-ink-3">{s.constellation_name}</span>}
              </td>
              <td data-label="NORAD" className="mono text-xs text-ink-2">{s.norad_id ?? '—'}</td>
              <td data-label="COSPAR" className="mono text-xs text-ink-2">{s.cospar_id ?? '—'}</td>
              <td data-label="Type"><TypeBadge type={s.object_type} /></td>
              <td data-label="Status"><StatusBadge status={s.status} /></td>
              <td data-label="Orbit"><OrbitBadge orbitClass={s.orbit_class} /></td>
              <td data-label="Perigee / apogee" className="num mono text-xs">{s.perigee_km !== null ? `${fmtInt(s.perigee_km)} / ${fmtInt(s.apogee_km)} km` : '—'}</td>
              <td data-label="Inclination" className="num mono text-xs">{fmtDeg(s.inclination_deg)}</td>
              <td data-label="Launched" className="mono text-xs">{fmtDate(s.launch_date)}{s.decay_date && <span className="block text-ink-3">↓ {fmtDate(s.decay_date)}</span>}</td>
              <td data-label="Operator" className="text-xs">{s.operator_slug ? <Link className="link" href={routes.operator(s.operator_slug)}>{s.operator_name}</Link> : s.owner_name ?? s.owner_code ?? '—'}</td>
              <td data-label="Country" className="text-xs">{s.country_slug ? <Link className="link" href={routes.country(s.country_slug)}>{s.country_name}</Link> : '—'}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}