'use client';
/**
 * Selected-satellite panel: bottom sheet on mobile, right column on desktop. Metadata from `/satellites/{norad}`,
 * live altitude/velocity polled from `/satellites/{norad}/live` every 5 s while open.
 */
import { ArrowUpRight, X } from 'lucide-react';
import Link from 'next/link';
import { useEffect, useState } from 'react';
import { OrbitBadge, StatusBadge, TypeBadge } from '@/components/ui/badges';
import { clientApi } from '@/lib/client-api';
import { cn } from '@/lib/cn';
import { fmt2, fmtAgo, fmtKm, fmtMinutes } from '@/lib/format';
import { MISSION_LABELS, routes } from '@/lib/site';
import type { LivePosition, SatelliteRow } from '@/lib/types';

const LIVE_MS = 5_000;

export interface PanelSnapshot {
  altitudeKm: number | null;
  velocityKmS: number | null;
  orbitClass: string | null;
  active: boolean | null;
}

function Row({ label, children }: { label: string; children: React.ReactNode }) {
  return (
    <div className="flex items-baseline justify-between gap-3 border-b border-rule py-1.5 text-sm last:border-0">
      <span className="text-ink-3">{label}</span>
      <span className="tnum min-w-0 truncate text-right text-ink">{children}</span>
    </div>
  );
}

export function SatPanel({ norad, snapshot, onClose, className }: { norad: number; snapshot: PanelSnapshot; onClose: () => void; className?: string }) {
  const [sat, setSat] = useState<SatelliteRow | null>(null);
  const [live, setLive] = useState<LivePosition | null>(null);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    setSat(null);
    setLive(null);
    setError(null);
    const ctrl = new AbortController();
    clientApi
      .satellite(String(norad), ctrl.signal)
      .then((r) => setSat(r.data))
      .catch((e: Error) => {
        if (e.name !== 'AbortError') setError('Metadata unavailable');
      });
    let timer: ReturnType<typeof setTimeout> | null = null;
    const poll = async () => {
      try {
        const r = await clientApi.live(String(norad), ctrl.signal);
        setLive(r.data);
      } catch {
        /* keep last */
      } finally {
        if (!ctrl.signal.aborted) timer = setTimeout(poll, LIVE_MS);
      }
    };
    void poll();
    return () => {
      ctrl.abort();
      if (timer) clearTimeout(timer);
    };
  }, [norad]);

  const alt = live?.altitude_km ?? snapshot.altitudeKm;
  const vel = live?.velocity_km_s ?? snapshot.velocityKmS;
  const name = sat?.name ?? (error ? `NORAD ${norad}` : null);

  return (
    <aside className={cn('panel flex max-h-[60%] flex-col overflow-hidden md:max-h-none', className)} aria-label="Selected satellite" aria-live="polite">
      <div className="flex items-start gap-3 border-b border-rule px-4 py-3">
        <div className="min-w-0 flex-1">
          <p className="eyebrow">Selected object</p>
          {name ? (
            <h3 className="mt-0.5 truncate text-base font-semibold leading-tight text-ink">{name}</h3>
          ) : (
            <div className="mt-1 h-5 w-40 animate-pulse rounded bg-plane-2" aria-hidden />
          )}
          <p className="mono mt-1 flex flex-wrap items-center gap-x-2 text-2xs text-ink-3">
            <span>NORAD {norad}</span>
            {sat?.cospar_id && <span>{sat.cospar_id}</span>}
          </p>
        </div>
        <button type="button" onClick={onClose} className="-mr-1 -mt-1 flex size-11 shrink-0 items-center justify-center rounded-md text-ink-3 hover:bg-plane-2 hover:text-ink" aria-label="Close panel">
          <X className="size-5" aria-hidden />
        </button>
      </div>
      <div className="scrollbar-thin min-h-0 flex-1 overflow-y-auto px-4 py-3">
        <div className="flex flex-wrap items-center gap-1.5">
          <StatusBadge status={sat?.status ?? (snapshot.active === null ? undefined : snapshot.active ? 'ACTIVE' : 'INACTIVE')} />
          <OrbitBadge orbitClass={sat?.orbit_class ?? snapshot.orbitClass} />
          {sat && <TypeBadge type={sat.object_type} />}
        </div>
        <div className="mt-3 grid grid-cols-2 gap-3">
          <div>
            <p className="eyebrow">Altitude</p>
            <p className="tnum mt-0.5 text-xl font-semibold text-ink">{alt === null ? '—' : fmtKm(alt)}</p>
          </div>
          <div>
            <p className="eyebrow">Velocity</p>
            <p className="tnum mt-0.5 text-xl font-semibold text-ink">{vel === null ? '—' : `${fmt2(vel)} km/s`}</p>
          </div>
        </div>
        <p className="mono mt-1 text-2xs text-ink-3">{live ? `live · lat ${fmt2(live.lat)}° lon ${fmt2(live.lon)}° · epoch ${fmtAgo(live.source_epoch)}` : 'from snapshot · live position loading…'}</p>
        <div className="mt-3">
          {sat ? (
            <>
              <Row label="Operator">{sat.operator_slug ? <Link href={routes.operator(sat.operator_slug)} className="link">{sat.operator_name}</Link> : sat.operator_name ?? sat.owner_name ?? '—'}</Row>
              <Row label="Constellation">{sat.constellation_slug ? <Link href={routes.constellation(sat.constellation_slug)} className="link">{sat.constellation_name}</Link> : '—'}</Row>
              <Row label="Country">{sat.country_slug ? <Link href={routes.country(sat.country_slug)} className="link">{sat.country_name}</Link> : sat.country_name ?? '—'}</Row>
              <Row label="Mission (derived)">{MISSION_LABELS[sat.mission_type ?? 'unknown'] ?? sat.mission_type ?? '—'}</Row>
              <Row label="Perigee / apogee">{fmtKm(sat.perigee_km)} / {fmtKm(sat.apogee_km)}</Row>
              <Row label="Period">{fmtMinutes(sat.period_minutes)}</Row>
              <Row label="Launched">{sat.launch_date ?? '—'}</Row>
            </>
          ) : error ? (
            <p className="text-sm text-ink-3">{error}</p>
          ) : (
            <div className="space-y-2" aria-hidden>
              {[0, 1, 2, 3].map((i) => <div key={i} className="h-4 animate-pulse rounded bg-plane-2" />)}
            </div>
          )}
        </div>
      </div>
      <div className="border-t border-rule px-4 py-3">
        <Link href={sat ? routes.satellite(sat.slug) : routes.satellite(String(norad))} className="inline-flex h-11 w-full items-center justify-center gap-1.5 rounded-md bg-accent text-sm font-medium text-accent-ink hover:brightness-110">
          Open satellite page <ArrowUpRight className="size-4" aria-hidden />
        </Link>
      </div>
    </aside>
  );
}