'use client';
import { useEffect, useRef, useState } from 'react';
import { WorldMap, type MapPoint } from '@/components/map/world-map';
import { clientApi } from '@/lib/client-api';
import { fmtDateTime } from '@/lib/format';
import type { LivePosition, TrackPoint } from '@/lib/types';

const POLL_MS = 5000;

interface Props {
  ident: string;
  name: string;
  initial: LivePosition | null;
  sourceEpoch: string | null;
}

function fmtCoord(v: number, pos: string, neg: string): string {
  return `${Math.abs(v).toFixed(3)}° ${v >= 0 ? pos : neg}`;
}

/**
 * Live ground track + current position. Server passes the first fix (from the detail payload) so the panel is
 * meaningful before hydration; the client then loads the ±track once and polls `/live` every 5 s while visible.
 */
export function LiveMap({ ident, name, initial, sourceEpoch }: Props) {
  const [live, setLive] = useState<LivePosition | null>(initial);
  const [track, setTrack] = useState<TrackPoint[] | null>(null);
  const [trackError, setTrackError] = useState(false);
  const [tick, setTick] = useState<number | null>(null);
  const [failures, setFailures] = useState(0);
  const timer = useRef<ReturnType<typeof setInterval> | null>(null);

  useEffect(() => {
    const ctrl = new AbortController();
    clientApi
      .track(ident, ctrl.signal)
      .then((r) => setTrack(r.data.points))
      .catch(() => {
        if (!ctrl.signal.aborted) setTrackError(true);
      });
    return () => ctrl.abort();
  }, [ident]);

  useEffect(() => {
    let ctrl: AbortController | null = null;
    const poll = async () => {
      ctrl?.abort();
      ctrl = new AbortController();
      try {
        const r = await clientApi.live(ident, ctrl.signal);
        if (r.data && r.data.error == null && Number.isFinite(r.data.lat)) {
          setLive(r.data);
          setTick(Date.now());
          setFailures(0);
        } else setFailures((f) => f + 1);
      } catch {
        if (!ctrl?.signal.aborted) setFailures((f) => f + 1);
      }
    };
    const start = () => {
      if (timer.current) clearInterval(timer.current);
      void poll();
      timer.current = setInterval(poll, POLL_MS);
    };
    const stop = () => {
      if (timer.current) clearInterval(timer.current);
      timer.current = null;
    };
    const onVis = () => (document.hidden ? stop() : start());
    start();
    document.addEventListener('visibilitychange', onVis);
    return () => {
      stop();
      ctrl?.abort();
      document.removeEventListener('visibilitychange', onVis);
    };
  }, [ident]);

  const past: MapPoint[] = track ? track.filter((p) => !p.future).map((p) => ({ lat: p.lat, lon: p.lon })) : [];
  const future: MapPoint[] = track ? track.filter((p) => p.future).map((p) => ({ lat: p.lat, lon: p.lon })) : [];
  // join the two segments at the present so the line is continuous
  const lastPast = past[past.length - 1];
  if (lastPast && future.length) future.unshift(lastPast);

  const tracks = [
    { points: past, color: 'var(--ink-3)', dashed: true, width: 1.2 },
    { points: future, color: 'var(--accent)', width: 1.8 },
  ];
  const markers = live ? [{ lat: live.lat, lon: live.lon, color: 'var(--accent)', size: 5, pulse: true, label: name }] : [];

  return (
    <div>
      <div className="relative overflow-hidden rounded-lg border border-rule">
        <WorldMap tracks={tracks} markers={markers} title={`Ground track of ${name}`} />
        <div className="pointer-events-none absolute left-3 top-3 flex items-center gap-2 rounded-md bg-space/70 px-2 py-1 text-2xs backdrop-blur">
          <span className={live && failures < 3 ? 'dot pulse text-active' : 'dot text-warn'} aria-hidden />
          <span className="mono text-ink-2">{failures >= 3 ? 'LIVE FEED INTERRUPTED' : 'LIVE · SGP4'}</span>
        </div>
        {trackError && <p className="absolute bottom-3 left-3 rounded-md bg-space/70 px-2 py-1 text-2xs text-warn backdrop-blur">Ground track unavailable</p>}
        {!track && !trackError && <p className="absolute bottom-3 left-3 rounded-md bg-space/70 px-2 py-1 text-2xs text-ink-3 backdrop-blur">Loading ground track…</p>}
      </div>

      <dl className="mt-4 grid grid-cols-2 gap-x-6 gap-y-3 text-sm md:grid-cols-4">
        <Tele label="Latitude" value={live ? fmtCoord(live.lat, 'N', 'S') : '—'} />
        <Tele label="Longitude" value={live ? fmtCoord(live.lon, 'E', 'W') : '—'} />
        <Tele label="Altitude" value={live ? `${live.altitude_km.toFixed(1)} km` : '—'} />
        <Tele label="Velocity" value={live ? `${live.velocity_km_s.toFixed(3)} km/s` : '—'} />
      </dl>
      <ul className="mt-3 flex flex-wrap items-center gap-x-4 gap-y-1 text-2xs text-ink-3">
        <li className="inline-flex items-center gap-1.5"><span className="inline-block h-0 w-5 border-t border-dashed border-ink-3" aria-hidden /> past 45 min</li>
        <li className="inline-flex items-center gap-1.5"><span className="inline-block h-0 w-5 border-t-2 border-accent" aria-hidden /> next 90 min</li>
        <li className="mono">
          {tick ? `fix ${new Date(tick).toISOString().slice(11, 19)} UTC` : 'first fix from server render'} · element epoch {fmtDateTime(sourceEpoch ?? live?.source_epoch ?? null)}
        </li>
      </ul>
    </div>
  );
}

function Tele({ label, value }: { label: string; value: string }) {
  return (
    <div className="min-w-0">
      <dt className="eyebrow">{label}</dt>
      <dd className="mono tnum mt-0.5 truncate text-base text-ink md:text-lg">{value}</dd>
    </div>
  );
}