import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
import L from 'leaflet';
import 'leaflet/dist/leaflet.css';
import { Satellite as SatIcon, Radio, ArrowUp, ArrowDown, PanelRightClose, PanelRightOpen, Radar, Compass,
  ChevronDown, Clock, Crosshair, SlidersHorizontal, ListOrdered } from 'lucide-react';
import {
  GetSatelliteBirds, GetSatellitePositions, GetSatellitePasses, GetSatelliteTuning,
  GetSatelliteGroundTrack, GetSatelliteTLEInfo, GetSatelliteNextPass, GetSatelliteSkyTrack,
  StartSatelliteTracking, StopSatelliteTracking, GetSatelliteTracking, RetargetSatelliteTracking,
} from '../../wailsjs/go/main/App';
import { EventsOn } from '../../wailsjs/runtime/runtime';
import { Button } from '@/components/ui/button';
import { gridToLatLon, splitAtAntimeridian } from '@/lib/maidenhead';
import { BASEMAPS, type BasemapKey } from '@/components/MainMap';
import { loadMapView, saveMapView } from '@/lib/mapView';
import { loadMapBase, saveMapBase, MAP_BASE_SAT } from '@/lib/mapBase';
import { writeUiPref } from '@/lib/uiPref';
import { SkyPlot, type SkyPoint } from '@/components/SkyPlot';
import { cn } from '@/lib/utils';
import { useI18n } from '@/lib/i18n';

// Satellites — where the birds are, and what to do with the radio.
//
// The tab answers the three questions a pass poses, and answers them where they
// are asked: how long have I got (the countdown), where is it (the map), what
// do I tune (the readout). Everything else — which satellites to follow, where
// the elements come from, the rotator — is maintenance and lives in Settings.
// During a pass there is no time to configure anything.

type Bird = {
  name: string; norad: number; geostationary: boolean; favorite: boolean;
  has_elements: boolean; element_name: string; epoch_age_h: number;
  transponders?: {
    label: string; mode: string; down_lo: number; down_hi: number;
    up_lo: number; up_hi: number; inverting: boolean; ctcss: number; linear: boolean;
  }[];
};
type Position = {
  name: string; lat: number; lon: number; alt_km: number; footprint_km: number;
  az: number; el: number; range_km: number; range_rate: number;
};
type Pass = {
  name: string; aos: string; los: string; aos_az: number; los_az: number;
  max_el: number; max_el_az: number; max_el_at: string; duration_s: number;
};
type PassInfo = {
  name: string; has_pass: boolean; in_pass: boolean;
  aos: string; los: string; aos_az: number; los_az: number;
  max_el: number; max_el_az: number; max_el_at: string; duration_s: number;
};
type Tuning = {
  name: string; transponder: string; mode: string;
  nominal_down: number; nominal_up: number; down_hz: number; up_hz: number;
  ctcss: number; inverting: boolean;
  az: number; el: number; range_km: number; range_rate: number; visible: boolean;
  lat: number; lon: number; alt_km: number; footprint_km: number;
};
type Track = {
  on: boolean; name: string; transponder: string; mode: string;
  nominal_down: number; nominal_up: number; down_hz: number; up_hz: number;
  az: number; el: number; visible: boolean; range_km: number; alt_km: number;
  radio: string; // "sat" | "downlink-only" | ""
  error: string;
  rot_on: boolean; rot_az: number; rot_el: number; rot_live: boolean; rot_az_only: boolean;
};

const MAP_VIEW_SAT = 'opslog.satMapView';

// The readout column. Wide enough by default to hold a frequency to the hertz
// without wrapping, and adjustable because how much map an operator wants
// against how much detail is theirs to decide — a station watching a footprint
// cross an ocean wants the map, one working a pass wants the numbers.
const SIDE_W_KEY = 'opslog.satSideWidth';
const SIDE_SHOWN_KEY = 'opslog.satSideShown';
const SIDE_W_DEFAULT = 336, SIDE_W_MIN = 240, SIDE_W_MAX = 720;
const SKY_SHOWN_KEY = 'opslog.satSkyShown';
// The sky plot's column, to the LEFT of the map.
//
// It used to sit in the readout column, where it competed for width with the
// numbers and pushed the pass table off the bottom of the screen. There was
// an empty margin on the other side of the map the whole time, and a plot
// that wants to be square is exactly what belongs in a column of its own.
const SKY_W_KEY = 'opslog.satSkyWidth';
const SKY_W_DEFAULT = 260, SKY_W_MIN = 180, SKY_W_MAX = 480;

// Each block of the readout column, open or shut, remembered separately: an
// operator working FM birds never looks at the linear passband and one
// chasing a schedule never looks at the range rate.
const SEC_KEYS = {
  pass: 'opslog.satSecPass',
  where: 'opslog.satSecWhere',
  tune: 'opslog.satSecTune',
  passes: 'opslog.satSecPasses',
} as const;
type SecId = keyof typeof SEC_KEYS;

// The ground track, drawn canvas-safe.
//
// It was `var(--info)`, and this map renders with preferCanvas: a CSS
// variable handed to a canvas strokeStyle is not a colour, so the browser
// kept whatever was set last and the track came out a pale near-white that
// vanished over the imagery and the deserts alike. Every other map in this
// app passes hex for the same reason.
//
// Drawn twice: a dark casing underneath, then the bright line on top. That is
// how a road is drawn on a map, and for the same reason — one colour cannot
// hold up over both a pale sea and a dark continent, but a colour with an
// outline can.
const TRACK_INK = '#38bdf8';
const TRACK_CASING = '#0b1220';

// Four decimals — a hundred hertz, which is what a linear transponder is
// actually tuned to.
//
// It used to be six, and the last two digits changed every tick: the Doppler
// moves about sixty hertz a second on 70 cm, so the display was a blur of
// numbers nobody could read and nobody needed. The RADIO still gets the whole
// figure — the correction is computed and sent to the hertz — this is only how
// much of it is worth putting in front of an operator. The shift beside it, in
// kilohertz, is where the fine movement shows.
const fmtHz = (hz: number) => {
  if (!hz) return '—';
  return (hz / 1e6).toFixed(4).replace(/(\d)(?=(\d{3})+\.)/g, '$1 ');
};

// The Doppler shift, as an operator would say it: hertz while it is small
// enough to say in hertz, kilohertz once it is not. "+9741 Hz" is four digits
// of precision on a number that is only ever read as "about ten kilohertz".
const fmtShift = (hz: number) => {
  const sign = hz > 0 ? '+' : '−';
  const a = Math.abs(hz);
  if (a < 1000) return `${sign}${Math.round(a)} Hz`;
  return `${sign}${(a / 1000).toFixed(1)} kHz`;
};
const fmtDeg = (d: number) => `${d.toFixed(1)}°`;
const fmtKm = (km: number) => `${Math.round(km).toLocaleString()} km`;
const hhmm = (iso: string) => {
  const d = new Date(iso);
  return Number.isNaN(d.getTime()) ? '—' : d.toISOString().slice(11, 16);
};
const hhmmss = (iso: string) => {
  const d = new Date(iso);
  return Number.isNaN(d.getTime()) ? '—' : d.toISOString().slice(11, 19);
};
const inMin = (iso: string) => Math.round((Date.parse(iso) - Date.now()) / 60000);

// A countdown an operator can act on. Seconds while they matter, then minutes,
// then hours — nobody needs "1h 04m 37s", and nobody wants "0m" for the last
// fifty seconds before a satellite rises.
function fmtCountdown(ms: number): string {
  const s = Math.max(0, Math.round(ms / 1000));
  if (s < 60) return `${s}s`;
  if (s < 3600) return `${Math.floor(s / 60)}m ${String(s % 60).padStart(2, '0')}s`;
  const h = Math.floor(s / 3600);
  return `${h}h ${String(Math.floor((s % 3600) / 60)).padStart(2, '0')}m`;
}

// The eight points of the compass, for an azimuth an operator reads rather than
// computes. "rises at 213°" is a number; "rises SW" is a direction to look in.
const COMPASS = ['N', 'NE', 'E', 'SE', 'S', 'SW', 'W', 'NW'];
const compass = (deg: number) => COMPASS[Math.round(((deg % 360) + 360) % 360 / 45) % 8];

// How good a pass is, as a colour. A bird 70° overhead and one scraping 12°
// along the horizon are not the same evening, and the table should say so
// without the operator reading every number.
function elClass(el: number): string {
  if (el >= 50) return 'text-success';
  if (el >= 25) return 'text-foreground';
  if (el >= 15) return 'text-caution';
  return 'text-muted-foreground';
}

// The mode a satellite is worked in, as a dot: FM and SSB call for a completely
// different set-up, and which of the two the next pass is decides whether the
// operator reaches for a handheld or the whole station.
const MODE_COLOUR: Record<string, string> = {
  FM: 'var(--info)',
  SSB: 'var(--success)',
  CW: 'var(--caution)',
  DATA: 'var(--warning)',
};

// escapeHtml, because a satellite name comes from data/satellites.json, which
// the operator edits by hand. A stray "<" there must not be able to break the
// tooltip it lands in.
const escapeHtml = (s: string) =>
  s.replace(/[&<>"']/g, (c) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }[c] as string));

// satTip is what hovering a satellite on the map says.
//
// The dot alone answered "there it is" and nothing else — the name, an
// elevation and an altitude, none of which decides anything. What decides
// whether to reach for the radio is how long is left, how high it will get and
// where to point: so the pass is here, and reading it costs a hover instead of
// selecting the bird and looking somewhere else on the screen.
function satTip(p: Position, pass: Pass | undefined, t: (k: string) => string): string {
  const row = (label: string, value: string) =>
    `<div class="sat-tip-row"><span>${label}</span><span>${value}</span></div>`;
  const out: string[] = [`<div class="sat-tip-name">${escapeHtml(p.name)}</div>`];

  if (p.el > 0) {
    out.push(row(t('sat.tipEl'), `${fmtDeg(p.el)}`));
    out.push(row(t('sat.tipAz'), `${fmtDeg(p.az)} ${compass(p.az)}`));
  } else {
    out.push(`<div class="sat-tip-note">${t('sat.tipBelow')}</div>`);
  }
  // Closing or opening: the sign of the range rate is the difference between a
  // pass about to start being useful and one already going away.
  const trend = p.range_rate < -0.05 ? ' ↓' : p.range_rate > 0.05 ? ' ↑' : '';
  out.push(row(t('sat.tipRange'), fmtKm(p.range_km) + trend));
  out.push(row(t('sat.tipAlt'), fmtKm(p.alt_km)));

  if (pass) {
    const aos = Date.parse(pass.aos), los = Date.parse(pass.los), now = Date.now();
    if (now >= aos && now < los) {
      out.push(row(t('sat.tipLos'), `${hhmm(pass.los)} · ${fmtCountdown(los - now)}`));
    } else {
      out.push(row(t('sat.tipAos'), `${hhmm(pass.aos)} · ${fmtCountdown(aos - now)} · ${compass(pass.aos_az)}`));
      out.push(row(t('sat.tipLos'), `${hhmm(pass.los)} · ${compass(pass.los_az)}`));
    }
    out.push(row(t('sat.tipMaxEl'), `${fmtDeg(pass.max_el)} ${compass(pass.max_el_az)}`));
  } else {
    // No pass inside the prediction window. Worth saying: an empty space here
    // reads as a bug, and "nothing in the next 24 hours" is an answer.
    out.push(`<div class="sat-tip-note">${t('sat.tipNoPass')}</div>`);
  }
  return out.join('');
}

// ModeBadge says FM or SSB where it cannot be missed.
//
// The mode used to be one word in a grey 11-pixel footnote under the
// frequencies, and it is not a footnote: FM and SSB are two different evenings.
// One is a channel, a tone and a handheld; the other is a passband, a beam and a
// VFO that has to be walked as the Doppler moves. An operator who reads the
// wrong one calls into silence.
function ModeBadge({ mode, className }: { mode?: string; className?: string }) {
  if (!mode) return null;
  const colour = MODE_COLOUR[mode] ?? 'var(--muted-foreground)';
  return (
    <span
      className={cn('shrink-0 rounded px-1.5 py-0.5 text-[10px] font-semibold uppercase tracking-wide border', className)}
      style={{ color: colour, borderColor: `color-mix(in srgb, ${colour} 45%, transparent)`, background: `color-mix(in srgb, ${colour} 14%, transparent)` }}
    >
      {mode}
    </span>
  );
}

function ModeDot({ mode }: { mode: string }) {
  const colour = MODE_COLOUR[mode];
  if (!colour) return null;
  return (
    <span
      title={mode}
      className="ml-1.5 inline-block size-1.5 rounded-full align-middle"
      style={{ backgroundColor: colour }}
    />
  );
}

export function SatellitePanel({ myGrid }: { myGrid: string }) {
  const { t } = useI18n();
  const [birds, setBirds] = useState<Bird[]>([]);
  const [sel, setSel] = useState<string>(() => localStorage.getItem('opslog.satSelected') || '');
  const [tpIdx, setTpIdx] = useState(0);
  const [positions, setPositions] = useState<Position[]>([]);
  const [passes, setPasses] = useState<Pass[]>([]);
  // The next pass per satellite, for the map tooltips. The list is already
  // ordered by AOS across every bird, so the first entry for a name is its next
  // one — no second prediction run for what is already on screen.
  const nextPassOf = useMemo(() => {
    const m = new Map<string, Pass>();
    for (const p of passes) if (!m.has(p.name)) m.set(p.name, p);
    return m;
  }, [passes]);
  const [tuning, setTuning] = useState<Tuning | null>(null);
  const [pass, setPass] = useState<PassInfo | null>(null);
  const [tle, setTle] = useState<{ count: number; age_h: number; stale: boolean; custom: number } | null>(null);
  const [tracking, setTracking] = useState<Track | null>(null);
  const [sky, setSky] = useState<SkyPoint[]>([]);
  const [skyShown, setSkyShown] = useState(() => localStorage.getItem(SKY_SHOWN_KEY) !== '0');
  const [err, setErr] = useState('');
  // A clock of its own, so every countdown on the panel ticks from one instant
  // and none of them needs a round trip to Go to lose a second.
  const [now, setNow] = useState(() => Date.now());
  useEffect(() => {
    const id = window.setInterval(() => setNow(Date.now()), 1000);
    return () => window.clearInterval(id);
  }, []);

  // What the operator follows. Chosen in Settings; following nothing means
  // every satellite we can both find and tune, which is what somebody who has
  // not chosen yet should see.
  const shown = useMemo(() => {
    const favs = birds.filter((b) => b.favorite);
    if (favs.length > 0) return favs;
    return birds.filter((b) => b.has_elements && (b.transponders?.length ?? 0) > 0);
  }, [birds]);
  const bird = useMemo(() => birds.find((b) => b.name === sel) ?? null, [birds, sel]);

  // The satellites you follow that have NO pass in the table.
  //
  // They are the reason the table was not the whole list: QO-100 never has a
  // pass because it never sets, a bird whose elements have not arrived cannot
  // be predicted at all, and one whose next pass falls outside the prediction
  // window is simply beyond it. Left out, those three looked like satellites
  // OpsLog had lost — so they are listed at the end, each saying which of the
  // three it is, and clicking one selects it exactly like a pass row.
  const idle = useMemo(() => {
    const withPass = new Set(passes.map((p) => p.name));
    return shown.filter((b) => !withPass.has(b.name));
  }, [shown, passes]);
  const tp = bird?.transponders?.[tpIdx] ?? null;
  // The mode each satellite is worked in, for the pass table's dot. Its first
  // transponder: on a bird that has two, the first is the one it is known for.
  const modeOf = useMemo(() => {
    const m = new Map(birds.map((b) => [b.name, b.transponders?.[0]?.mode ?? ''] as const));
    return (name: string) => m.get(name) ?? '';
  }, [birds]);

  // ── Data ─────────────────────────────────────────────────────────────────

  const loadBirds = useCallback(async () => {
    try {
      const list: Bird[] = (await GetSatelliteBirds()) as any;
      setBirds(list ?? []);
    } catch (e: any) { setErr(String(e?.message ?? e)); }
  }, []);

  const loadTle = useCallback(async () => {
    try { setTle((await GetSatelliteTLEInfo()) as any); } catch { /* shown as unknown */ }
  }, []);

  const loadPasses = useCallback(async () => {
    try {
      setPasses(((await GetSatellitePasses([], 0)) as any) ?? []);
      setErr('');
    } catch (e: any) { setErr(String(e?.message ?? e)); }
  }, []);

  useEffect(() => { loadBirds(); loadTle(); loadPasses(); }, [loadBirds, loadTle, loadPasses]);
  useEffect(() => EventsOn('sat:tle', () => { loadTle(); loadBirds(); loadPasses(); }), [loadTle, loadBirds, loadPasses]);
  // Saving the satellite settings. The followed list, the lowest pass and the
  // locator all change what belongs here, and this tab is normally open behind
  // the settings window while they are edited. The selection repairs itself:
  // a satellite that is no longer followed drops out of the dropdown, and the
  // effect below moves to the first one that is.
  useEffect(() => EventsOn('sat:settings', () => { loadBirds(); loadPasses(); }), [loadBirds, loadPasses]);
  useEffect(() => { if (sel) localStorage.setItem('opslog.satSelected', sel); }, [sel]);
  useEffect(() => { setTpIdx(0); }, [sel]);

  // Keep the selection inside what is followed: an operator who narrows the list
  // in Settings must not be left looking at a satellite that is no longer there.
  useEffect(() => {
    if (shown.length === 0) return;
    if (!sel || !shown.some((b) => b.name === sel)) setSel(shown[0].name);
  }, [shown, sel]);

  // The map's satellites, every five seconds: a low orbit moves about a third of
  // a degree of longitude in that time, which is a pixel or two at this zoom.
  useEffect(() => {
    let live = true;
    const tick = async () => {
      try {
        const p: Position[] = ((await GetSatellitePositions([])) as any) ?? [];
        if (live) setPositions(p);
      } catch { /* a missing locator is already reported by the passes call */ }
    };
    tick();
    const id = window.setInterval(tick, 5000);
    return () => { live = false; window.clearInterval(id); };
  }, []);

  // The readout, every second: this is the number an operator types into a
  // radio, and a Doppler correction on 70 cm moves by a few tens of hertz a
  // second at the middle of a pass.
  useEffect(() => {
    if (!sel) { setTuning(null); return; }
    let live = true;
    const tick = async () => {
      try {
        const tn: Tuning = (await GetSatelliteTuning(sel, tpIdx, 0)) as any;
        if (live) setTuning(tn);
      } catch { if (live) setTuning(null); }
    };
    tick();
    const id = window.setInterval(tick, 1000);
    return () => { live = false; window.clearInterval(id); };
  }, [sel, tpIdx]);

  // The pass, every twenty seconds. Predicting one steps the orbit across hours;
  // the countdown itself is two timestamps and a clock, which the browser runs.
  useEffect(() => {
    if (!sel) { setPass(null); return; }
    let live = true;
    const tick = async () => {
      try {
        const p: PassInfo = (await GetSatelliteNextPass(sel)) as any;
        if (live) setPass(p);
      } catch { if (live) setPass(null); }
    };
    tick();
    const id = window.setInterval(tick, 20_000);
    return () => { live = false; window.clearInterval(id); };
  }, [sel]);

  // The pass drawn across the sky. Once a minute is plenty: the SHAPE of a
  // pass does not change while it happens — only the marker on it moves, and
  // that comes from the tuning poll a second at a time.
  useEffect(() => {
    if (!sel || !skyShown) { setSky([]); return; }
    let live = true;
    const load = async () => {
      try {
        const pts: SkyPoint[] = ((await GetSatelliteSkyTrack(sel, 120)) as any) ?? [];
        if (live) setSky(pts);
      } catch { if (live) setSky([]); }
    };
    load();
    const id = window.setInterval(load, 60_000);
    return () => { live = false; window.clearInterval(id); };
  }, [sel, skyShown]);
  useEffect(() => { writeUiPref(SKY_SHOWN_KEY, skyShown ? '1' : '0'); }, [skyShown]);

  // Passes are cheap but not free, and they change slowly.
  useEffect(() => {
    const id = window.setInterval(loadPasses, 5 * 60_000);
    return () => window.clearInterval(id);
  }, [loadPasses]);

  // The tracker's own state, pushed as it moves. Polled as well, at a lazy
  // rate, so a panel opened while tracking is already running is not blank
  // until the next tick.
  useEffect(() => {
    const read = async () => {
      try { setTracking((await GetSatelliteTracking()) as any); } catch { /* not tracking */ }
    };
    read();
    const off = EventsOn('sat:track', (s: any) => setTracking(s ?? null));
    const id = window.setInterval(read, 10_000);
    return () => { off(); window.clearInterval(id); };
  }, []);

  const toggleTracking = async () => {
    setErr('');
    try {
      if (tracking?.on) {
        await StopSatelliteTracking();
        setTracking(null);
      } else {
        await StartSatelliteTracking(sel, tpIdx);
        setTracking((await GetSatelliteTracking()) as any);
      }
    } catch (e: any) { setErr(String(e?.message ?? e)); }
  };

  // Changing satellite WHILE tracking moves the radio to the new one at once.
  //
  // The selection here is the display's; the tracker held its own and went on
  // following what it was started with, so two birds up at the same time meant
  // switching between them and watching the frequencies stay on the first.
  // Stopping and restarting worked, and is also how a Flex throws away and
  // rebuilds both its slices for nothing.
  //
  // Guarded on tracking being on, so selecting a satellite with the radio idle
  // stays what it has always been: a look, not a command.
  const trackingOn = !!tracking?.on;
  useEffect(() => {
    if (!trackingOn || !sel) return;
    RetargetSatelliteTracking(sel, tpIdx)
      .then(async () => setTracking((await GetSatelliteTracking()) as any))
      .catch((e: any) => setErr(String(e?.message ?? e)));
  }, [sel, tpIdx, trackingOn]);

  // ── Map ──────────────────────────────────────────────────────────────────

  const divRef = useRef<HTMLDivElement>(null);
  const mapRef = useRef<L.Map | null>(null);
  const layerRef = useRef<L.LayerGroup | null>(null);
  const baseRef = useRef<L.TileLayer | null>(null);
  // Where the pointer is over the map, in container pixels.
  //
  // The satellite layer is rebuilt every five seconds as the birds move, and a
  // rebuilt marker is a new marker: the tooltip the operator was reading closed
  // itself, over and over, which made the hover detail useless exactly when it
  // was being used. Knowing where the pointer is lets the redraw reopen the
  // tooltip of the dot it is still on — and only that one, so nothing is left
  // hanging open once the mouse has moved away.
  const mouseRef = useRef<L.Point | null>(null);
  const labelsRef = useRef<L.TileLayer | null>(null);
  const [basemap, setBasemap] = useState<BasemapKey>(() => loadMapBase(MAP_BASE_SAT, 'light'));
  const saved = useRef(loadMapView(MAP_VIEW_SAT));
  const [track, setTrack] = useState<Position[]>([]);

  const home = useMemo(() => gridToLatLon(myGrid), [myGrid]);

  // ── The readout column ───────────────────────────────────────────────────

  const [sideW, setSideW] = useState<number>(() => {
    const n = parseFloat(localStorage.getItem(SIDE_W_KEY) || '');
    return Number.isFinite(n) && n >= SIDE_W_MIN && n <= SIDE_W_MAX ? n : SIDE_W_DEFAULT;
  });
  const [sideShown, setSideShown] = useState(() => localStorage.getItem(SIDE_SHOWN_KEY) !== '0');
  useEffect(() => { writeUiPref(SIDE_W_KEY, String(Math.round(sideW))); }, [sideW]);
  useEffect(() => { writeUiPref(SIDE_SHOWN_KEY, sideShown ? '1' : '0'); }, [sideShown]);
  const [skyW, setSkyW] = useState(() => {
    const n = parseFloat(localStorage.getItem(SKY_W_KEY) || '');
    return Number.isFinite(n) && n >= SKY_W_MIN && n <= SKY_W_MAX ? n : SKY_W_DEFAULT;
  });
  useEffect(() => { writeUiPref(SKY_W_KEY, String(Math.round(skyW))); }, [skyW]);
  // Open by default, every one of them: a panel that starts shut is a feature
  // nobody finds. Shutting one is a decision, and it is remembered.
  const [secOpen, setSecOpen] = useState<Record<SecId, boolean>>(() => ({
    pass: localStorage.getItem(SEC_KEYS.pass) !== '0',
    where: localStorage.getItem(SEC_KEYS.where) !== '0',
    tune: localStorage.getItem(SEC_KEYS.tune) !== '0',
    passes: localStorage.getItem(SEC_KEYS.passes) !== '0',
  }));
  const toggleSec = (id: SecId) => setSecOpen((m) => {
    const next = { ...m, [id]: !m[id] };
    writeUiPref(SEC_KEYS[id], next[id] ? '1' : '0');
    return next;
  });

  // Dragging the grip. Measured from where the pointer STARTED rather than from
  // the container, and with the pointer captured — without the capture the map
  // underneath swallows the moves the instant the cursor crosses it.
  const startSkyDrag = (e: React.PointerEvent) => {
    e.preventDefault();
    (e.currentTarget as HTMLElement).setPointerCapture(e.pointerId);
    const x0 = e.clientX;
    const w0 = skyW;
    const onMove = (ev: PointerEvent) => {
      // Plus, not minus: this handle is on the right of what it resizes.
      setSkyW(Math.min(SKY_W_MAX, Math.max(SKY_W_MIN, Math.round(w0 + (ev.clientX - x0)))));
    };
    const onUp = () => {
      window.removeEventListener('pointermove', onMove);
      window.removeEventListener('pointerup', onUp);
    };
    window.addEventListener('pointermove', onMove);
    window.addEventListener('pointerup', onUp);
  };

  const startSideDrag = (e: React.PointerEvent) => {
    e.preventDefault();
    (e.currentTarget as HTMLElement).setPointerCapture(e.pointerId);
    const x0 = e.clientX;
    const w0 = sideW;
    const onMove = (ev: PointerEvent) => {
      setSideW(Math.min(SIDE_W_MAX, Math.max(SIDE_W_MIN, Math.round(w0 + (x0 - ev.clientX)))));
    };
    const onUp = () => {
      window.removeEventListener('pointermove', onMove);
      window.removeEventListener('pointerup', onUp);
    };
    window.addEventListener('pointermove', onMove);
    window.addEventListener('pointerup', onUp);
  };

  useEffect(() => {
    if (!divRef.current || mapRef.current) return;
    const m = L.map(divRef.current, {
      zoomControl: true, attributionControl: true,
      worldCopyJump: false, preferCanvas: true,
      // Opened on the station, not on the Atlantic: the passes that matter are
      // the ones over the operator's own head.
      center: saved.current ? [saved.current.lat, saved.current.lon] : [home?.lat ?? 25, home?.lon ?? 0],
      zoom: saved.current ? saved.current.zoom : 3,
      minZoom: 2,
    });
    m.on('moveend', () => {
      const c = m.getCenter();
      saveMapView(MAP_VIEW_SAT, c.lat, c.lng, m.getZoom());
    });
    m.on('mousemove', (e: L.LeafletMouseEvent) => { mouseRef.current = e.containerPoint; });
    m.on('mouseout', () => { mouseRef.current = null; });
    mapRef.current = m;
    layerRef.current = L.layerGroup().addTo(m);
    const ro = new ResizeObserver(() => m.invalidateSize({ animate: false }));
    ro.observe(divRef.current);
    const settle = window.setTimeout(() => m.invalidateSize({ animate: false }), 100);
    return () => {
      window.clearTimeout(settle);
      ro.disconnect();
      m.remove();
      mapRef.current = null;
      layerRef.current = null;
    };
  }, [home?.lat, home?.lon]);

  useEffect(() => {
    const m = mapRef.current;
    if (!m) return;
    baseRef.current?.remove(); labelsRef.current?.remove();
    const bm = BASEMAPS[basemap];
    const opts: L.TileLayerOptions = {
      maxNativeZoom: bm.maxNativeZoom, noWrap: true,
      bounds: L.latLngBounds(L.latLng(-85.0511, -180), L.latLng(85.0511, 180)),
    };
    baseRef.current = L.tileLayer(bm.url, { ...opts, attribution: bm.attr, subdomains: bm.subdomains ?? 'abc' }).addTo(m);
    if (bm.labelsUrl) labelsRef.current = L.tileLayer(bm.labelsUrl, opts).addTo(m);
    saveMapBase(MAP_BASE_SAT, basemap);
  }, [basemap]);

  // The selected bird's path over the ground, redrawn when the selection
  // changes and every couple of minutes as it walks off the front of it.
  useEffect(() => {
    if (!sel) { setTrack([]); return; }
    let live = true;
    const load = async () => {
      try {
        const pts: Position[] = ((await GetSatelliteGroundTrack(sel, 100)) as any) ?? [];
        if (live) setTrack(pts);
      } catch { if (live) setTrack([]); }
    };
    load();
    const id = window.setInterval(load, 120_000);
    return () => { live = false; window.clearInterval(id); };
  }, [sel]);

  useEffect(() => {
    const layer = layerRef.current;
    if (!layer) return;
    layer.clearLayers();
    if (home) {
      L.circleMarker([home.lat, home.lon], {
        radius: 5, color: '#fff', weight: 2, fillColor: '#e11d48', fillOpacity: 1,
      }).bindTooltip(myGrid, { direction: 'top' }).addTo(layer);
    }
    if (track.length > 1) {
      const pts = splitAtAntimeridian(track.map((p) => [p.lat, p.lon] as [number, number]));
      L.polyline(pts as L.LatLngExpression[][], {
        color: TRACK_CASING, weight: 4, opacity: 0.4, smoothFactor: 0, interactive: false,
      }).addTo(layer);
      L.polyline(pts as L.LatLngExpression[][], {
        color: TRACK_INK, weight: 1.8, opacity: 0.95, dashArray: '5 4', smoothFactor: 0, interactive: false,
      }).addTo(layer);
    }
    const wanted = new Set(shown.map((b) => b.name));
    for (const p of positions) {
      if (!wanted.has(p.name) && p.name !== sel) continue;
      const chosen = p.name === sel;
      const up = p.el > 0;
      const colour = chosen ? '#22c55e' : up ? '#f59e0b' : '#94a3b8';
      // The footprint is the honest answer to "can I hear it": everything inside
      // the circle has the satellite above its horizon.
      //
      // Drawn for the SELECTED bird only. A footprint is thousands of kilometres
      // across, so a dozen of them overlap into a wash of circles that hides the
      // coastline, the ground track and the satellites themselves — and the
      // question it answers is only ever asked about the one being worked.
      if (chosen) {
        L.circle([p.lat, p.lon], {
          radius: p.footprint_km * 1000,
          color: colour, weight: 1.2, opacity: 0.7,
          fillColor: colour, fillOpacity: 0.1,
        }).addTo(layer);
      }

      // Two rings and not one. The map is a street map on one station and a
      // dark satellite image on the next, and a single-stroke dot disappears
      // into one of them — a pale marker on pale terrain, a grey one on a black
      // ocean. A dark halo under a white ring reads on both, which is what an
      // unselected satellite needs: it is precisely the one nobody is looking
      // straight at.
      const r = chosen ? 7 : up ? 6 : 5;
      L.circleMarker([p.lat, p.lon], {
        radius: r + 1.5, color: '#000', weight: 2, opacity: 0.45,
        fill: false, interactive: false,
      }).addTo(layer);

      const dot = L.circleMarker([p.lat, p.lon], {
        radius: r, color: '#fff', weight: 2,
        fillColor: colour, fillOpacity: 1,
      })
        .bindTooltip(satTip(p, nextPassOf.get(p.name), t), {
          direction: 'top', className: 'sat-tip', offset: [0, -6],
        })
        .on('click', () => setSel(p.name))
        .addTo(layer);

      // Was the pointer on this dot before the redraw replaced it? Then put the
      // tooltip back, with the numbers it has just refreshed.
      const map = mapRef.current;
      if (map && mouseRef.current) {
        const at = map.latLngToContainerPoint([p.lat, p.lon]);
        if (at.distanceTo(mouseRef.current) <= r + 3) dot.openTooltip();
      }

      // A name beside the ones that are UP. The map can carry a dozen birds and
      // labelling them all is a map nobody can read; the two or three above the
      // horizon are the ones an operator is choosing between right now, and
      // hovering each grey dot in turn to find them is the work this saves.
      //
      // Its own non-interactive marker rather than a permanent tooltip on the
      // dot: Leaflet keeps ONE tooltip per layer, so a permanent label would
      // take the place of the hover detail — and the detail is the point.
      if (up || chosen) {
        L.marker([p.lat, p.lon], {
          icon: L.divIcon({
            className: 'sat-name-label',
            html: `<span>${escapeHtml(p.name)}</span>`,
            iconSize: [0, 0],
            iconAnchor: [-(r + 5), 6],
          }),
          interactive: false, keyboard: false,
        }).addTo(layer);
      }
    }
  }, [positions, track, home?.lat, home?.lon, myGrid, sel, shown, nextPassOf, t]);

  // ── Render ───────────────────────────────────────────────────────────────

  // The pass, as a countdown and a bar. Both derived here from two timestamps,
  // so they move every second without asking Go anything.
  // Is the antenna still on its way? The rotator is asked where it is every
  // three seconds and a mast takes tens of seconds to cross a pass, so a
  // difference between where it is and where the satellite is means it is
  // moving — which is exactly what a number alone cannot show, and the
  // difference between "on its way" and "stuck" is the whole reason to look.
  const antennaMoving = !!tracking?.rot_on && !!tracking.rot_live &&
    Math.abs(((tracking.az - tracking.rot_az + 540) % 360) - 180) > 3;

  const aosMs = pass?.has_pass ? Date.parse(pass.aos) : 0;
  const losMs = pass?.has_pass ? Date.parse(pass.los) : 0;
  const inPass = !!pass?.has_pass && now >= aosMs && now < losMs;
  const progress = inPass && losMs > aosMs ? (now - aosMs) / (losMs - aosMs) : 0;

  return (
    <div className="flex flex-col h-full min-h-0 gap-1 p-1">
      {/* Header: what to work, and the one button that touches the radio.
          Everything else about satellites — which ones, where the elements come
          from, the rotator — is in Settings, because none of it is something to
          do while a bird is going over. */}
      <div className="flex items-center gap-2 flex-wrap px-1 shrink-0">
        <SatIcon className="size-4 text-muted-foreground" />
        <select
          className="h-7 rounded-md border border-border bg-background px-2 text-xs min-w-[12rem]"
          value={sel}
          onChange={(e) => setSel(e.target.value)}
        >
          {shown.length === 0 && <option value="">{t('sat.noneFollowed')}</option>}
          {shown.map((b) => (
            <option key={b.name} value={b.name} disabled={!b.has_elements && !b.geostationary}>
              {b.name}{b.has_elements || b.geostationary ? '' : ` — ${t('sat.noElements')}`}
            </option>
          ))}
        </select>
        {(bird?.transponders?.length ?? 0) > 1 && (
          <select
            className="h-7 rounded-md border border-border bg-background px-2 text-xs"
            value={tpIdx}
            onChange={(e) => setTpIdx(Number(e.target.value))}
          >
            {/* The mode belongs in the choice itself. A satellite with an FM
                repeater and a linear transponder offers two labels that both
                read like a name, and picking the wrong one is a whole pass
                spent on the wrong kind of radio. */}
            {bird!.transponders!.map((x, i) => (
              <option key={i} value={i}>
                {x.label} — {x.mode}{x.ctcss ? ` ${x.ctcss.toFixed(1)}` : ''}
              </option>
            ))}
          </select>
        )}
        {/* Also in the header, so the mode and the tone survive hiding the
            readout column — which is exactly what an operator does when they
            want the map full width during a pass. */}
        <ModeBadge mode={tp?.mode} />
        {tp?.mode === 'FM' && !!tp.ctcss && (
          <span className="shrink-0 rounded px-1.5 py-0.5 text-[10px] font-semibold tabular-nums border border-caution/45 bg-caution/10 text-caution"
            title={t('sat.toneHint')}>
            {tp.ctcss.toFixed(1)}
          </span>
        )}
        <Button
          size="sm"
          variant={tracking?.on ? 'default' : 'outline'}
          className={cn('h-7 px-2 gap-1.5', tracking?.on && 'bg-success text-background hover:bg-success/90')}
          onClick={toggleTracking}
          disabled={!bird?.transponders?.length}
          title={tracking?.on
            ? (tracking.radio === 'sat' ? t('sat.trackingFull') : t('sat.trackingDown'))
            : t('sat.trackTip')}
        >
          <Radio className="size-3.5" />
          {tracking?.on ? t('sat.tracking') : t('sat.track')}
        </Button>
        {tracking?.on && tracking.radio === 'downlink-only' && (
          <span className="text-[11px] text-warning">{t('sat.downlinkOnly')}</span>
        )}

        {/* What the station is actually doing, beside the button that started
            it. During a pass an operator watches the radio and the antenna, not
            a column on the far side of the window — and that column is the
            first thing they hide to get the map full width. */}
        {tracking?.on && (
          <div className="flex items-center gap-2.5 rounded-md border border-border bg-card/60 px-2 py-0.5 text-xs tabular-nums">
            {/* Where the bird IS, which is not where the antenna is pointing:
                these three say whether the pass is worth calling on, and the
                rotator group further along says whether the mast has caught up
                with them. Elevation goes dim below the horizon, so a satellite
                still being tracked on its way up cannot be read as workable. */}
            <span className="flex items-center gap-1.5" title={`${t('sat.tipAz')} / ${t('sat.tipEl')}`}>
              <Radar className="size-3 text-muted-foreground" />
              <span className={cn('font-medium', !tracking.visible && 'text-muted-foreground')}>
                {Math.round(tracking.az)}° / {tracking.el.toFixed(1)}°
              </span>
            </span>
            {tracking.range_km > 0 && (
              <span className="text-muted-foreground" title={t('sat.range')}>
                {Math.round(tracking.range_km).toLocaleString()} km
              </span>
            )}
            {tracking.alt_km > 0 && (
              <span className="text-muted-foreground" title={t('sat.altitude')}>
                ↑{Math.round(tracking.alt_km).toLocaleString()} km
              </span>
            )}
            <span className="flex items-center gap-1 border-l border-border pl-2.5" title={t('sat.down')}>
              <ArrowDown className="size-3 text-muted-foreground" />
              <span className="font-medium">{fmtHz(tracking.down_hz)}</span>
            </span>
            {!!tracking.up_hz && (
              <span className="flex items-center gap-1" title={t('sat.up')}>
                <ArrowUp className="size-3 text-muted-foreground" />
                <span className="font-medium">{fmtHz(tracking.up_hz)}</span>
              </span>
            )}
            {tracking.rot_on && (
              <span className={cn('flex items-center gap-1 border-l border-border pl-2.5',
                antennaMoving && 'text-caution')} title={t('sat.antenna')}>
                {/* The needle spins while the antenna is slewing. A rotator
                    takes tens of seconds to cross a pass, and the difference
                    between "on its way" and "stuck" is the whole reason to look
                    at it — a number alone cannot show movement. */}
                <Compass className={cn('size-3', antennaMoving ? 'animate-spin' : 'text-muted-foreground')}
                  style={antennaMoving ? { animationDuration: '3s' } : undefined} />
                <span className="font-medium">
                  {Math.round(tracking.rot_az)}°
                  {!tracking.rot_az_only && ` / ${Math.round(tracking.rot_el)}°`}
                </span>
              </span>
            )}
          </div>
        )}
        <div className="flex-1" />
        {/* Elements are maintenance, so only their AGE is here — and only when
            it has become a reason the panel might be wrong. */}
        {tle?.stale && <span className="text-[11px] text-warning">{t('sat.tleStale')}</span>}
        <select
          className="h-7 rounded-md border border-border bg-background px-2 text-xs"
          value={basemap}
          onChange={(e) => setBasemap(e.target.value as BasemapKey)}
        >
          {Object.entries(BASEMAPS).map(([k, v]) => <option key={k} value={k}>{v.label}</option>)}
        </select>
        <Button
          variant="ghost" size="sm"
          className={cn('h-7 px-1.5', skyShown && 'text-success')}
          onClick={() => setSkyShown((v) => !v)}
          title={skyShown ? t('sat.hideSky') : t('sat.showSky')}
        >
          <Radar className="size-3.5" />
        </Button>
        {/* Put the whole window on the map. On a laptop the readout takes a
            third of the screen, and there are moments — watching a footprint
            cross an ocean — when the map IS the answer. */}
        <Button
          variant="ghost" size="sm" className="h-7 px-1.5"
          onClick={() => setSideShown((v) => !v)}
          title={sideShown ? t('sat.hideSide') : t('sat.showSide')}
        >
          {sideShown ? <PanelRightClose className="size-3.5" /> : <PanelRightOpen className="size-3.5" />}
        </Button>
      </div>

      {err && <div className="px-2 text-[11px] text-danger shrink-0">{err}</div>}

      <div className="flex gap-1 flex-1 min-h-0">
        {/* The sky, seen from underneath it: the centre is straight up, the
            rim is the horizon, north is at the top. One glance says whether
            the pass comes over the roof or along the treeline.

            To the LEFT of the map, in a column of its own. It was stacked in
            the readout column, where a plot that wants to be square competed
            for width with the numbers and pushed the pass table off the
            bottom of the screen — while the margin on this side of the map
            sat empty the whole time. */}
        {skyShown && (
          <div className="shrink-0 flex flex-col gap-1 min-h-0" style={{ width: skyW }}>
            <div className="rounded-lg border border-border bg-card p-2">
              <SkyPlot
                track={sky}
                az={tuning?.az ?? null}
                el={tuning?.el ?? null}
                name={bird?.name}
                visible={!!tuning?.visible}
              />
            </div>
          </div>
        )}
        {skyShown && (
          <div
            role="separator"
            aria-orientation="vertical"
            title={t('sat.skyWidthTip')}
            onPointerDown={startSkyDrag}
            onDoubleClick={() => setSkyW(SKY_W_DEFAULT)}
            className="group relative shrink-0 w-2 cursor-col-resize flex items-center justify-center"
          >
            <span className="h-10 w-[3px] rounded-full bg-border group-hover:bg-primary transition-colors" />
          </div>
        )}
        {/* The map. isolate is load-bearing, not tidiness: Leaflet stacks its
            own panes and controls up to z-index 1000, which without a stacking
            context of their own float over Preferences and every dialog in the
            app — the map ends up on top of the very buttons that would close
            it. */}
        <div className="relative isolate z-0 flex-1 min-w-0 rounded-lg overflow-hidden border border-border">
          <div ref={divRef} className="h-full w-full" />
        </div>

        {sideShown && (
          <div
            role="separator"
            aria-orientation="vertical"
            title={t('sat.sideWidthTip')}
            onPointerDown={startSideDrag}
            onDoubleClick={() => setSideW(SIDE_W_DEFAULT)}
            className="group relative shrink-0 w-2 cursor-col-resize flex items-center justify-center"
          >
            <span className="h-10 w-[3px] rounded-full bg-border group-hover:bg-primary transition-colors" />
          </div>
        )}

        <div className={cn('shrink-0 flex flex-col gap-1 min-h-0', !sideShown && 'hidden')}
          style={{ width: sideW }}>
          {/* The pass. The first thing an operator looks at and the reason they
              sit down: how long have I got, and how high does it get.

              The countdown is repeated in the heading, so shutting this block
              still leaves the one number it exists for. */}
          <Section
            title={bird?.name ?? '—'}
            icon={Clock}
            open={secOpen.pass}
            onToggle={() => toggleSec('pass')}
            right={(
              <div className="flex items-center gap-1">
                <ModeBadge mode={tp?.mode} />
                {/* Only while it is SHUT. Open, the countdown is already
                    there in full a line below, and a heading that repeats
                    the body is just noise. */}
                {!secOpen.pass && !bird?.geostationary && pass?.has_pass && (
                  <Pill tone={inPass ? 'success' : 'muted'}>
                    {inPass ? t('sat.los') : t('sat.aos')} {fmtCountdown((inPass ? losMs : aosMs) - now)}
                  </Pill>
                )}
              </div>
            )}
          >

            {bird?.geostationary ? (
              <div className="mt-1 text-[11px] text-muted-foreground">{t('sat.geoHint')}</div>
            ) : !pass?.has_pass ? (
              <div className="mt-1 text-[11px] text-muted-foreground">{t('sat.noPassSoon')}</div>
            ) : (
              <>
                <div className="mt-1 flex items-baseline gap-2">
                  <span className={cn('text-[10px] uppercase tracking-wide',
                    inPass ? 'text-success' : 'text-muted-foreground')}>
                    {inPass ? t('sat.los') : t('sat.aos')}
                  </span>
                  <span className={cn('text-xl font-semibold tabular-nums leading-none',
                    inPass && 'text-success')}>
                    {fmtCountdown((inPass ? losMs : aosMs) - now)}
                  </span>
                  <span className="text-[11px] text-muted-foreground tabular-nums ml-auto">
                    {hhmmss(inPass ? pass.los : pass.aos)}Z
                  </span>
                </div>

                {/* Where in the pass we are. A bar because the useful question
                    mid-pass is not the clock but "am I past the peak". */}
                <div className="mt-1.5 h-1 rounded-full bg-muted overflow-hidden">
                  <div className="h-full bg-success transition-[width] duration-1000 ease-linear"
                    style={{ width: `${Math.round(progress * 100)}%` }} />
                </div>

                <div className="mt-1.5 grid grid-cols-3 gap-1 text-[11px] tabular-nums">
                  <PassBit label={t('sat.rise')} value={`${hhmm(pass.aos)} ${compass(pass.aos_az)}`} />
                  {/* The one number that decides whether the pass is worth
                      sitting down for, coloured like the pass table colours
                      it: a 70° pass overhead and a 12° scrape are not the
                      same evening. */}
                  <PassBit label={t('sat.peak')} value={`${Math.round(pass.max_el)}° ${compass(pass.max_el_az)}`}
                    strong valueClass={elClass(pass.max_el)} />
                  <PassBit label={t('sat.set')} value={`${hhmm(pass.los)} ${compass(pass.los_az)}`} />
                </div>
              </>
            )}
          </Section>

          {/* Where it is, right now. Its elevation goes in the heading: above
              or below the horizon is the one thing worth knowing with the
              block shut. */}
          <Section
            title={t('sat.secWhere')}
            icon={Crosshair}
            open={secOpen.where}
            onToggle={() => toggleSec('where')}
            right={tuning && !secOpen.where ? (
              <Pill tone={tuning.visible ? 'success' : 'muted'}>
                {fmtDeg(tuning.el)} {tuning.visible ? t('sat.up') : t('sat.below')}
              </Pill>
            ) : undefined}
          >
            <div className="grid grid-cols-2 gap-2">
              <Readout label={t('sat.az')} value={tuning ? fmtDeg(tuning.az) : '—'}
                sub={tuning ? compass(tuning.az) : ''} />
              <Readout label={t('sat.el')} value={tuning ? fmtDeg(tuning.el) : '—'}
                colour={tuning?.visible ? 'var(--success)' : 'var(--muted-foreground)'}
                sub={tuning ? (tuning.visible ? t('sat.up') : t('sat.below')) : ''} />
            </div>

            <div className="mt-2 grid grid-cols-3 gap-1 text-[11px] tabular-nums">
              <PassBit label={t('sat.range')} value={tuning?.range_km ? fmtKm(tuning.range_km) : '—'} />
              <PassBit label={t('sat.altitude')} value={tuning?.alt_km ? fmtKm(tuning.alt_km) : '—'} />
              <PassBit label={t('sat.footprint')} value={tuning?.footprint_km ? fmtKm(tuning.footprint_km) : '—'} />
            </div>

            {/* Approaching or receding, which is the sign of the whole Doppler
                correction and the one number that explains why the frequencies
                are moving the way they are. */}
            {!!tuning && !bird?.geostationary && (
              <div className="mt-1.5 flex items-center gap-1.5 text-[11px] text-muted-foreground tabular-nums">
                {tuning.range_rate < 0
                  ? <ArrowUp className="size-3 text-success" />
                  : <ArrowDown className="size-3 text-warning" />}
                <span>{tuning.range_rate < 0 ? t('sat.approaching') : t('sat.receding')}</span>
                <span>{Math.abs(tuning.range_rate).toFixed(2)} km/s</span>
              </div>
            )}

            {/* Where the antenna is, beside where the satellite is. The two
                differing is a rotator still slewing; the two differing for a
                long time is a rotator that is stuck, and that is worth being
                able to see without walking outside. */}
            {tracking?.rot_on && (
              <div className="mt-1.5 pt-1.5 border-t border-border/60 flex items-baseline gap-2 text-[11px] tabular-nums">
                <span className="text-muted-foreground uppercase tracking-wide text-[10px]">{t('sat.antenna')}</span>
                {/* No elevation when none is being driven: an undriven zero
                    draws an antenna lying on the horizon, which is a bearing
                    and not the absence of one. */}
                <span className="font-medium">
                  {tracking.rot_az_only
                    ? fmtDeg(tracking.rot_az)
                    : `${fmtDeg(tracking.rot_az)} / ${fmtDeg(tracking.rot_el)}`}
                </span>
                {tracking.rot_az_only && <span className="text-muted-foreground">{t('sat.rotAzOnly')}</span>}
                {!tracking.rot_live && <span className="text-muted-foreground">{t('sat.rotCommanded')}</span>}
              </div>
            )}
          </Section>

          {/* What to tune. */}
          <Section
            title={t('sat.secTune')}
            icon={SlidersHorizontal}
            open={secOpen.tune}
            onToggle={() => toggleSec('tune')}
            right={<ModeBadge mode={tp?.mode} />}
          >
            {/* What KIND of transponder, as badges rather than a row of grey
                words: inverting decides which sideband to answer on, and a
                passband width decides whether there is room to move. */}
            <div className="flex items-center gap-1.5 mb-1.5">
              <span className="text-[11px] text-muted-foreground truncate">{tp?.label ?? '—'}</span>
              <div className="flex-1" />
              {tp?.inverting && <Pill tone="warning" title={t('sat.invertingHint')}>{t('sat.inverting')}</Pill>}
              {tp?.linear && <Pill tone="info">{Math.round((tp.down_hi - tp.down_lo) / 1000)} kHz</Pill>}
              {bird?.geostationary && <Pill>{t('sat.geo')}</Pill>}
            </div>

            <div className="space-y-1">
              <FreqRow label={t('sat.down')} hz={tuning?.down_hz ?? 0} nominal={tuning?.nominal_down ?? 0} />
              <FreqRow label={t('sat.up')} hz={tuning?.up_hz ?? 0} nominal={tuning?.nominal_up ?? 0} />
            </div>

            {/* The tone, on the FM birds, with the same weight as a frequency.
                It IS one, as far as the outcome goes: a repeater called without
                its tone does not answer, and the operator hears an empty
                channel and concludes the satellite is not up. Said explicitly
                when there is none, too — a blank line cannot tell "no tone"
                from "OpsLog does not know". */}
            {tp?.mode === 'FM' && (
              <div className="mt-1.5 pt-1.5 border-t border-border/60 flex items-baseline gap-2">
                <span className="w-10 text-[10px] uppercase tracking-wide text-muted-foreground">
                  {t('sat.tone')}
                </span>
                {tp.ctcss ? (
                  <>
                    <span className="text-base font-semibold tabular-nums text-caution">
                      {tp.ctcss.toFixed(1)} Hz
                    </span>
                    <span className="text-[10px] text-muted-foreground">{t('sat.toneHint')}</span>
                  </>
                ) : (
                  <span className="text-[11px] text-muted-foreground">{t('sat.toneNone')}</span>
                )}
              </div>
            )}
          </Section>

          {/* What is coming. */}
          <Section
            title={t('sat.nextPasses')}
            icon={ListOrdered}
            open={secOpen.passes}
            onToggle={() => toggleSec('passes')}
            grow
            right={passes.length > 0 ? <Pill>{passes.length}</Pill> : undefined}
          >
            <div className="min-h-0">
              {passes.length === 0 && idle.length === 0 && (
                <div className="p-2 text-[11px] text-muted-foreground">{t('sat.noPasses')}</div>
              )}
              {(passes.length > 0 || idle.length > 0) && (
                // A real table, so the name column takes the width the longest
                // name needs — "ZHUHAI-1 OVS-1A" was cut to eight characters in
                // a fixed one — and the rest keeps its columns lined up under
                // headings that say what the numbers are.
                <table className="w-full text-[11px] tabular-nums">
                  <thead className="sticky top-0 z-10 bg-card">
                    <tr className="text-[10px] uppercase tracking-wide text-muted-foreground">
                      <th className="text-left font-medium px-2 py-1">{t('sat.thSat')}</th>
                      <th className="text-left font-medium py-1">{t('sat.thAos')}</th>
                      <th className="text-left font-medium py-1">{t('sat.thLos')}</th>
                      <th className="text-right font-medium py-1">{t('sat.thMaxEl')}</th>
                      <th className="text-right font-medium px-2 py-1">{t('sat.thIn')}</th>
                    </tr>
                  </thead>
                  <tbody>
                    {passes.map((p, i) => {
                      const aos = Date.parse(p.aos);
                      const running = aos <= now && Date.parse(p.los) > now;
                      const soon = !running && aos - now < 5 * 60_000;
                      return (
                        <tr
                          key={`${p.name}-${p.aos}-${i}`}
                          onClick={() => setSel(p.name)}
                          className={cn(
                            'cursor-pointer hover:bg-accent/50 border-t border-border/40',
                            p.name === sel && 'bg-accent/40',
                            running && 'bg-success/10',
                          )}
                        >
                          <td className="px-2 py-1 whitespace-nowrap">
                            <span className={cn('font-medium', running && 'text-success')}>{p.name}</span>
                            <ModeDot mode={modeOf(p.name)} />
                          </td>
                          <td className="py-1 whitespace-nowrap">{hhmm(p.aos)}</td>
                          <td className="py-1 whitespace-nowrap text-muted-foreground">{hhmm(p.los)}</td>
                          {/* The elevation is the quality of the pass, so it is
                              coloured like one: a 70° pass overhead and a 12°
                              scrape along the horizon are not the same evening. */}
                          <td className={cn('py-1 text-right font-medium', elClass(p.max_el))}>
                            {Math.round(p.max_el)}°
                          </td>
                          <td className={cn('px-2 py-1 text-right whitespace-nowrap',
                            running ? 'text-success font-medium' : soon ? 'text-warning' : 'text-muted-foreground')}>
                            {running ? t('sat.now') : fmtCountdown(aos - now)}
                          </td>
                        </tr>
                      );
                    })}
                    {/* The rest of what you follow, so the table IS the list:
                        nothing you can select is missing from it. */}
                    {idle.map((b) => {
                      const why = b.geostationary ? t('sat.alwaysUp')
                        : !b.has_elements ? t('sat.noElements')
                        : t('sat.noPassWindow');
                      return (
                        <tr
                          key={`idle-${b.name}`}
                          onClick={() => setSel(b.name)}
                          className={cn('cursor-pointer hover:bg-accent/50 border-t border-border/40',
                            b.name === sel && 'bg-accent/40')}
                        >
                          <td className="px-2 py-1 whitespace-nowrap">
                            <span className={cn('font-medium', !b.has_elements && 'text-muted-foreground')}>{b.name}</span>
                            <ModeDot mode={modeOf(b.name)} />
                          </td>
                          <td colSpan={4} className="px-2 py-1 text-right text-muted-foreground whitespace-nowrap">
                            {why}
                          </td>
                        </tr>
                      );
                    })}
                  </tbody>
                </table>
              )}
            </div>
          </Section>
        </div>
      </div>
    </div>
  );
}

function Readout({ label, value, colour, sub }: { label: string; value: string; colour?: string; sub?: string }) {
  return (
    <div className="rounded-md bg-muted/40 px-2 py-1">
      <div className="text-[10px] uppercase tracking-wide text-muted-foreground">{label}</div>
      <div className="flex items-baseline gap-1.5">
        <span className="text-lg font-semibold tabular-nums leading-tight" style={colour ? { color: colour } : undefined}>
          {value}
        </span>
        {!!sub && <span className="text-[10px] text-muted-foreground">{sub}</span>}
      </div>
    </div>
  );
}

// Pill is a small semantic badge. The tones are the app's own status tokens,
// so a warning here is the same colour as a warning everywhere else — the
// point of having them is that an operator learns one vocabulary, not one per
// panel.
const PILL_TONE: Record<string, string> = {
  muted: 'text-muted-foreground border-border bg-muted/40',
  success: 'text-success border-success/45 bg-success/10',
  warning: 'text-warning border-warning/45 bg-warning/10',
  caution: 'text-caution border-caution/45 bg-caution/10',
  danger: 'text-danger border-danger/45 bg-danger/10',
  info: 'text-info border-info/45 bg-info/10',
};
function Pill({ tone = 'muted', title, className, children }:
  { tone?: keyof typeof PILL_TONE | string; title?: string; className?: string; children: React.ReactNode }) {
  return (
    <span title={title}
      className={cn('shrink-0 rounded px-1.5 py-0.5 text-[10px] font-semibold uppercase tracking-wide border tabular-nums',
        PILL_TONE[tone] ?? PILL_TONE.muted, className)}>
      {children}
    </span>
  );
}

// Section is one collapsible block of the readout column.
//
// The blocks had no headings at all, which cost twice: nothing said what a
// group of numbers was, and there was nowhere to put the control that shuts
// it. An operator working FM birds never looks at the linear passband and one
// watching a schedule never looks at the range rate, so each one shuts on its
// own and stays shut.
//
// `right` is for a badge that must stay readable with the block CLOSED — the
// state of a pass, the mode being tuned. A heading that still answers the
// question is why shutting a block is worth doing.
function Section({ title, icon: Icon, open, onToggle, right, grow, children }: {
  title: string;
  icon: any;
  open: boolean;
  onToggle: () => void;
  right?: React.ReactNode;
  grow?: boolean;
  children: React.ReactNode;
}) {
  return (
    <div className={cn('rounded-lg border border-border bg-card flex flex-col overflow-hidden',
      grow && open && 'flex-1 min-h-0')}>
      <button type="button" onClick={onToggle}
        className="shrink-0 flex items-center gap-1.5 px-2 py-1 text-left hover:bg-accent/40 transition-colors">
        <Icon className="size-3 shrink-0 text-muted-foreground" />
        <span className="text-[10px] font-semibold uppercase tracking-wider text-muted-foreground truncate">{title}</span>
        <div className="flex-1" />
        {right}
        <ChevronDown className={cn('size-3 shrink-0 text-muted-foreground transition-transform', !open && '-rotate-90')} />
      </button>
      {open && (
        <div className={cn('border-t border-border/60', grow ? 'flex-1 min-h-0 overflow-auto' : 'px-2 py-2')}>
          {children}
        </div>
      )}
    </div>
  );
}

function PassBit({ label, value, strong, valueClass }:
  { label: string; value: string; strong?: boolean; valueClass?: string }) {
  return (
    <div className="min-w-0">
      <div className="text-[10px] uppercase tracking-wide text-muted-foreground truncate">{label}</div>
      <div className={cn('truncate', strong && 'font-semibold', valueClass ?? (strong ? 'text-foreground' : undefined))}>{value}</div>
    </div>
  );
}

// The corrected frequency large, the nominal one small beside it. Showing only
// one of them leaves an operator unable to tell a Doppler correction from a
// mistuned transponder.
// satBand names the band a satellite frequency is in, for the badge.
//
// Only the bands satellites actually use, and by inspection rather than by
// asking the backend: it is a label beside a number that is already on
// screen, not a fact anything depends on.
function satBand(hz: number): string {
  const mhz = hz / 1e6;
  if (mhz >= 28 && mhz < 30) return '10m';
  if (mhz >= 144 && mhz < 148) return '2m';
  if (mhz >= 420 && mhz < 450) return '70cm';
  if (mhz >= 1240 && mhz < 1300) return '23cm';
  if (mhz >= 2300 && mhz < 2450) return '13cm';
  if (mhz >= 10450 && mhz < 10500) return '3cm';
  return '';
}

// FreqRow is the frequency to TUNE TO — the centre of the passband, not the
// Doppler-corrected one.
//
// It used to lead with the corrected figure, which is the wrong number to
// put in a reference panel: it moves every second, it is different for
// every operator, and it is not what the frequency plan, the AMSAT tables
// or anybody on the air calls the satellite's frequency. What the radio is
// actually on belongs beside Tracking, where the radio is, and that is
// where it now lives. The correction is still shown here, as the OFFSET
// that explains the difference between the two.
function FreqRow({ label, hz, nominal }: { label: string; hz: number; nominal: number }) {
  const { t } = useI18n();
  const shift = hz && nominal ? hz - nominal : 0;
  const centre = nominal || hz;
  const band = satBand(centre);
  return (
    <div className="flex items-baseline gap-2">
      <span className="w-10 text-[10px] uppercase tracking-wide text-muted-foreground">{label}</span>
      <span className="text-base font-semibold tabular-nums">{fmtHz(centre)}</span>
      {!!band && <Pill className="self-center">{band}</Pill>}
      <div className="flex-1" />
      {!!shift && (
        <Pill tone={shift > 0 ? 'success' : 'caution'} className="self-center" title={t('sat.shiftHint')}>
          {fmtShift(shift)}
        </Pill>
      )}
    </div>
  );
}