import Link from 'next/link';
import { FreshnessBadge, MissionLabel, OrbitBadge, StatusBadge, TypeBadge } from '@/components/ui/badges';
import { fmt1, fmtAgo, fmtDate, fmtDateTime, fmtDeg, fmtInt, fmtKm, fmtMinutes, num } from '@/lib/format';
import { routes } from '@/lib/site';
import type { SatelliteDetail } from '@/lib/types';
import { DL, Derived, Row } from './primitives';

export const OPS_STATUS: Record<string, string> = {
  '+': 'Operational',
  '-': 'Non-operational',
  P: 'Partially operational',
  B: 'Backup / standby',
  S: 'Spare',
  X: 'Extended mission',
  D: 'Decayed',
  '?': 'Unknown',
};

function KeyStat({ label, value, unit, hint }: { label: string; value: string; unit?: string; hint?: string }) {
  return (
    <div className="min-w-0 border-l border-rule pl-3">
      <p className="eyebrow">{label}</p>
      <p className="mono tnum mt-1 truncate text-lg font-medium text-ink md:text-2xl">
        {value}
        {unit && value !== '—' && <span className="ml-1 text-xs text-ink-3 md:text-sm">{unit}</span>}
      </p>
      {hint && <p className="mt-0.5 truncate text-2xs text-ink-3">{hint}</p>}
    </div>
  );
}

export function Hero({ d }: { d: SatelliteDetail }) {
  const os = d.orbital_state;
  const live = d.live && d.live.error == null ? d.live : null;
  const epochAge = live?.epoch_age_hours ?? (os ? (Date.now() - new Date(os.epoch).getTime()) / 3.6e6 : null);
  return (
    <header className="pb-6 pt-6 md:pb-8 md:pt-10">
      <p className="eyebrow mono">
        {d.object_type === 'PAYLOAD' || d.object_type === 'STATION' || d.object_type === 'CREWED' ? 'Satellite' : d.object_type === 'ROCKET_BODY' ? 'Rocket body' : d.object_type === 'DEBRIS' ? 'Debris object' : 'Catalogued object'}
        {d.norad_id !== null && <> · NORAD {d.norad_id}</>}
        {d.cospar_id && <> · COSPAR {d.cospar_id}</>}
      </p>
      <h1 className="display mt-2 break-words text-3xl md:text-5xl">{d.name}</h1>

      <div className="mt-4 flex flex-wrap items-center gap-2">
        <StatusBadge status={d.status} size="md" />
        <TypeBadge type={d.object_type} />
        <OrbitBadge orbitClass={d.orbit_class} />
        <span className="inline-flex items-center gap-1.5 text-xs text-ink-2">
          <MissionLabel mission={d.mission_type} /> <Derived />
        </span>
      </div>

      <ul className="mt-4 flex flex-wrap gap-x-5 gap-y-1.5 text-sm">
        <li>
          <span className="text-ink-3">Operator </span>
          {d.operator_slug ? <Link className="link" href={routes.operator(d.operator_slug)}>{d.operator_name}</Link> : <span className="text-ink-2">{d.owner_name ?? d.owner_code ?? '—'}</span>}
        </li>
        <li>
          <span className="text-ink-3">Constellation </span>
          {d.constellation_slug ? <Link className="link" href={routes.constellation(d.constellation_slug)}>{d.constellation_name}</Link> : <span className="text-ink-2">—</span>}
        </li>
        <li>
          <span className="text-ink-3">Country </span>
          {d.country_slug ? <Link className="link" href={routes.country(d.country_slug)}>{d.country_name}</Link> : <span className="text-ink-2">{d.owner_code === 'ISS' ? 'International' : '—'}</span>}
        </li>
      </ul>

      <dl className="mt-7 grid grid-cols-2 gap-x-3 gap-y-5 sm:grid-cols-3 lg:grid-cols-6">
        <KeyStat label="Altitude now" value={live ? fmt1(live.altitude_km) : '—'} unit="km" hint={live ? 'SGP4 propagation' : d.status === 'DECAYED' ? 'object decayed' : 'no element set'} />
        <KeyStat label="Velocity" value={live ? live.velocity_km_s.toFixed(2) : '—'} unit="km/s" />
        <KeyStat label="Inclination" value={os ? fmtDeg(os.inclination) : fmtDeg(d.inclination_deg)} />
        <KeyStat label="Period" value={fmtMinutes(os?.period_minutes ?? d.period_minutes)} hint={num(os?.period_minutes ?? d.period_minutes) !== null ? `${fmt1(os?.period_minutes ?? d.period_minutes)} min` : undefined} />
        <KeyStat label="Perigee" value={fmtInt(os?.perigee_km ?? d.perigee_km)} unit="km" />
        <KeyStat label="Apogee" value={fmtInt(os?.apogee_km ?? d.apogee_km)} unit="km" />
      </dl>

      <p className="mt-5 flex flex-wrap items-center gap-x-3 gap-y-1 text-xs text-ink-3">
        <FreshnessBadge status={d.freshness.orbit.status} label={`orbit ${d.freshness.orbit.status}`} />
        {os ? (
          <span>
            Orbit updated {fmtAgo(os.updated_at)} · element epoch <span className="mono text-ink-2">{fmtDateTime(os.epoch)}</span>
            {epochAge !== null && <> ({fmt1(epochAge)} h old)</>}
          </span>
        ) : (
          <span>No orbital element set on file{d.decay_date ? ` — decayed ${fmtDate(d.decay_date)}` : ''}.</span>
        )}
        <span>· Metadata updated {fmtAgo(d.freshness.metadata.updated_at)}</span>
      </p>
    </header>
  );
}

/** Right-hand "terminal" panel: a compact readout of the object's state. Sticky on desktop. */
export function TelemetryPanel({ d }: { d: SatelliteDetail }) {
  const os = d.orbital_state;
  const live = d.live && d.live.error == null ? d.live : null;
  return (
    <div className="panel p-4 md:p-5">
      <div className="flex items-center justify-between gap-3 border-b border-rule pb-3">
        <p className="eyebrow">Telemetry readout</p>
        <FreshnessBadge status={d.freshness.orbit.status} />
      </div>
      <DL>
        <Row label="Status" mono={false} value={<span className="inline-flex flex-wrap justify-end gap-1.5"><StatusBadge status={d.status} />{d.ops_status_code && <span className="text-xs text-ink-3" title="SATCAT operational status code">{OPS_STATUS[d.ops_status_code] ?? d.ops_status_code}</span>}</span>} />
        <Row label="Object type" mono={false} value={<TypeBadge type={d.object_type} />} />
        <Row label={<>Orbit class <Derived /></>} mono={false} value={<OrbitBadge orbitClass={d.orbit_class} />} />
        {live && <Row label="Altitude" value={fmtKm(live.altitude_km, 1)} />}
        {live && <Row label="Velocity" value={`${live.velocity_km_s.toFixed(3)} km/s`} />}
        <Row label="Perigee × apogee" value={os ? `${fmtInt(os.perigee_km)} × ${fmtInt(os.apogee_km)} km` : d.perigee_km !== null ? `${fmtInt(d.perigee_km)} × ${fmtInt(d.apogee_km)} km` : '—'} />
        <Row label="Inclination" value={fmtDeg(os?.inclination ?? d.inclination_deg)} />
        <Row label="Period" value={fmtMinutes(os?.period_minutes ?? d.period_minutes)} />
        <Row label="Eccentricity" value={os ? os.eccentricity.toFixed(6) : '—'} />
        <Row label="Element epoch" value={os ? fmtDateTime(os.epoch) : '—'} />
        {d.rcs_m2 !== null && <Row label="Radar cross-section" value={`${fmt1(d.rcs_m2)} m²`} />}
        <Row label="Launched" value={fmtDate(d.launch_date)} />
        {d.decay_date && <Row label="Decayed" value={fmtDate(d.decay_date)} />}
        <Row label="First indexed" value={fmtDate(d.first_seen_at)} />
        <Row label="Last seen in sources" value={fmtAgo(d.last_seen_at)} />
      </DL>
      <div className="mt-4 border-t border-rule pt-3 text-2xs text-ink-3">
        <p className="mono">NORAD {d.norad_id ?? '—'} · {d.cospar_id ?? 'no COSPAR id'}</p>
        <p className="mt-1">
          Sources: {Array.from(new Set(d.sources.map((s) => s.name))).join(', ') || 'none linked to this record'} · <Link href={routes.methodology()} className="hover:text-accent">methodology</Link>
        </p>
      </div>
    </div>
  );
}