"use client";

import { useEffect, useState } from "react";

import { api, SatelliteCam } from "@/lib/api";

export default function SatellitesPage() {

  const [sats, setSats] = useState<SatelliteCam[]>([]);

  const [err, setErr] = useState<string | null>(null);

  const [tick, setTick] = useState(0);

  function load() { api.satellites().then((r) => setSats(r.satellites)).catch((e) =>

    setErr(e.status === 401 ? "Sign in to view satellite cameras." : "Load failed.")); }

  useEffect(() => { load(); const t = setInterval(() => { load(); setTick((x) => x + 1); }, 15000); return () => clearInterval(t); }, []);

  const byConst: Record<string, number> = {};

  sats.forEach((s) => { const k = s.constellation || "other"; byConst[k] = (byConst[k] || 0) + 1; });

  return (

    <div>

      <h1>Satellite Cameras <span className="badge ok"><span className="live-dot" /> tracking</span></h1>

      <p className="sub">Real imaging / Earth-observation satellites (Planet SkySat &amp; Dove, Earth-resources).

        Positions propagated live via SGP4 - refreshes every 15s.</p>

      <div className="row" style={{ margin: "10px 0" }}>

        {Object.entries(byConst).map(([k, v]) => <span key={k} className="badge amber">{k}: {v}</span>)}

        <span className="muted">{sats.length} satellites tracked · update #{tick}</span>

      </div>

      {err && <div className="badge danger">{err}</div>}

      <div className="card scroll" style={{ maxHeight: "70vh" }}>

        <table>

          <thead><tr><th>Satellite</th><th>Constellation</th><th>Lat</th><th>Lon</th><th>Alt (km)</th><th>Period</th></tr></thead>

          <tbody>

            {sats.map((s) => (

              <tr key={s.identifier}>

                <td>🛰 {s.label}</td>

                <td><span className="badge amber">{s.constellation}</span></td>

                <td className="mono">{s.lat?.toFixed(2)}</td>

                <td className="mono">{s.lon?.toFixed(2)}</td>

                <td className="mono">{s.altitude_km}</td>

                <td className="muted">{s.period_min ? Math.round(s.period_min) + " min" : "-"}</td>

              </tr>

            ))}

            {!sats.length && !err && <tr><td colSpan={6} className="muted">No satellites loaded yet.</td></tr>}

          </tbody>

        </table>

      </div>

    </div>

  );

}