import Link from 'next/link';
import { fmtDate, fmtInt, num } from '@/lib/format';
import { routes } from '@/lib/site';
import type { LaunchRow } from '@/lib/types';

/** Launch rows (list page, site detail, launch detail siblings). `ownerHref` lets the caller scope owner chips to its context. */
export function LaunchesTable({ rows, ownerHref = (code) => routes.launches(`owner=${encodeURIComponent(code)}`), showSite = true }: { rows: LaunchRow[]; ownerHref?: (code: string) => string; showSite?: boolean }) {
  return (
    <div className="overflow-x-auto scrollbar-thin">
      <table className="data-table stack">
        <thead>
          <tr>
            <th>Date</th>
            <th>COSPAR</th>
            <th>Primary payload</th>
            <th className="num">Payloads</th>
            <th className="num">Objects</th>
            <th className="num">On orbit</th>
            {showSite && <th>Site</th>}
            <th>Owners</th>
          </tr>
        </thead>
        <tbody>
          {rows.map((l) => {
            const owners = l.owner_codes ?? [];
            const onOrbit = num(l.on_orbit_count);
            const objects = num(l.object_count);
            return (
              <tr key={l.id}>
                <td data-label="Date" className="mono text-xs">{fmtDate(l.launch_date)}</td>
                <td data-label="COSPAR"><Link href={routes.launch(l.cospar_launch_id)} className="link mono text-xs">{l.cospar_launch_id}</Link></td>
                <td data-label="Primary payload" className="primary"><Link href={routes.launch(l.cospar_launch_id)} className="link font-medium">{l.primary_name ?? <span className="text-ink-3">unnamed</span>}</Link></td>
                <td data-label="Payloads" className="num mono text-xs">{fmtInt(l.payload_count)}</td>
                <td data-label="Objects" className="num mono text-xs">{fmtInt(l.object_count)}</td>
                <td data-label="On orbit" className={`num mono text-xs ${onOrbit === 0 && objects ? 'text-ink-3' : ''}`}>{fmtInt(l.on_orbit_count)}</td>
                {showSite && <td data-label="Site" className="text-xs">{l.site_slug ? <Link href={routes.launchSite(l.site_slug)} className="link">{l.site_name}</Link> : l.site_name ?? '—'}</td>}
                <td data-label="Owners" className="text-xs">
                  {owners.length ? (
                    <span className="flex flex-wrap gap-1">
                      {owners.slice(0, 4).map((c) => (
                        <Link key={c} href={ownerHref(c)} className="mono rounded border border-rule px-1.5 py-px text-[11px] text-ink-2 hover:border-rule-strong hover:text-ink">{c}</Link>
                      ))}
                      {owners.length > 4 && <span className="text-ink-3">+{owners.length - 4}</span>}
                    </span>
                  ) : (
                    '—'
                  )}
                </td>
              </tr>
            );
          })}
        </tbody>
      </table>
    </div>
  );
}