import Link from 'next/link';
import { TypeBadge } from '@/components/ui/badges';
import { Section } from '@/components/ui/section';
import { Unavailable } from '@/components/ui/unavailable';
import { fmtAgo, fmtDate, fmtInt } from '@/lib/format';
import { EVENT_TYPE_LABELS, routes } from '@/lib/site';
import type { HomePayload } from '@/lib/types';

export function LatestLaunches({ items }: { items: HomePayload['latest_launches'] }) {
  return (
    <Section eyebrow="Launches" title="Latest launches" action={{ href: routes.launches(), label: 'Launch log' }} className="py-0">
      {items.length === 0 ? (
        <Unavailable what="Latest launches" />
      ) : (
        <ul className="divide-y divide-rule border-t border-rule">
          {items.map((l) => (
            <li key={l.id}>
              <Link href={routes.launch(l.cospar_launch_id)} className="group grid min-h-[56px] grid-cols-[5.5rem_minmax(0,1fr)_auto] items-center gap-x-3 py-2.5">
                <span className="mono text-xs text-ink-3">{fmtDate(l.launch_date)}</span>
                <span className="min-w-0">
                  <span className="block truncate text-[15px] text-ink group-hover:text-accent">{l.primary_name ?? l.cospar_launch_id}</span>
                  <span className="block truncate text-2xs text-ink-3">
                    <span className="mono">{l.cospar_launch_id}</span>
                    {l.site_name && <> · {l.site_name}</>}
                    {l.site_country && <> · {l.site_country}</>}
                  </span>
                </span>
                <span className="tnum text-right text-sm text-ink">
                  {fmtInt(l.payload_count)} <span className="text-2xs text-ink-3">payload{(Number(l.payload_count) || 0) === 1 ? '' : 's'}</span>
                </span>
              </Link>
            </li>
          ))}
        </ul>
      )}
    </Section>
  );
}

export function RecentEvents({ items }: { items: HomePayload['events'] }) {
  return (
    <Section eyebrow="Events" title="Recent orbital events" action={{ href: routes.events(), label: 'Event feed' }} className="py-0">
      {items.length === 0 ? (
        <Unavailable what="Events" />
      ) : (
        <ul className="divide-y divide-rule border-t border-rule">
          {items.slice(0, 8).map((e) => {
            const primary = e.entities?.[0];
            const href = primary?.type === 'launch' && primary.slug ? routes.launch(primary.slug) : primary?.type === 'satellite' && primary.slug ? routes.satellite(primary.slug) : routes.events(`type=${e.type}`);
            return (
              <li key={e.id}>
                <Link href={href} className="group flex min-h-[56px] items-start gap-3 py-2.5">
                  <span className="mt-0.5 inline-flex shrink-0 rounded border border-rule px-1.5 py-0.5 text-2xs text-ink-2">{EVENT_TYPE_LABELS[e.type] ?? e.type}</span>
                  <span className="min-w-0 flex-1">
                    <span className="block truncate text-[15px] text-ink group-hover:text-accent">{e.title}</span>
                    {e.summary && <span className="block truncate text-2xs text-ink-3">{e.summary}</span>}
                  </span>
                  <span className="mono shrink-0 pt-0.5 text-2xs text-ink-3">{fmtAgo(e.event_time)}</span>
                </Link>
              </li>
            );
          })}
        </ul>
      )}
    </Section>
  );
}

export function RecentReentries({ items }: { items: HomePayload['reentries'] }) {
  return (
    <Section eyebrow="Reentries" title="Recent reentries" action={{ href: routes.reentries(), label: 'All reentries' }} className="py-0">
      {items.length === 0 ? (
        <Unavailable what="Reentries" />
      ) : (
        <table className="data-table stack">
          <thead>
            <tr>
              <th>Object</th>
              <th>NORAD</th>
              <th>Type</th>
              <th>Decayed</th>
              <th>Country</th>
            </tr>
          </thead>
          <tbody>
            {items.map((r) => (
              <tr key={r.id}>
                <td className="primary">
                  <Link href={routes.satellite(r.slug)} className="link">{r.name}</Link>
                </td>
                <td data-label="NORAD" className="mono text-xs text-ink-2">{r.norad_id ?? '—'}</td>
                <td data-label="Type">
                  <TypeBadge type={r.object_type} />
                </td>
                <td data-label="Decayed" className="mono text-xs text-ink-2">{fmtDate(r.decay_date)}</td>
                <td data-label="Country" className="text-sm text-ink-2">{r.country_name ?? r.country_code ?? '—'}</td>
              </tr>
            ))}
          </tbody>
        </table>
      )}
      <p className="mt-3 text-2xs text-ink-3">Decay dates come from the public catalogue; SatelliteIndex does not predict reentry locations.</p>
    </Section>
  );
}