trx-rs/src/trx-client/trx-frontend/trx-frontend-http/frontend/src/plugins/satellite-predictions.ts

// SPDX-FileCopyrightText: 2026 Stan Grams <sjg@haxx.space>
//
// SPDX-License-Identifier: GPL-2.0-or-later

import type { SatellitePass, SatellitePassResponse } from "./satellite-types";

// --- Satellite pass predictions ---
//
// Its own page rather than a third view inside the weather-satellite decoder:
// when a bird comes over is a planning question, and it was buried under
// Digital modes beside decoders it has nothing to do with.

interface PredictionsBridge {
  clearSatPredictionDom?: () => void;
  refreshSatPredictions?: () => void;
}
const predWindow = window as unknown as PredictionsBridge;

// ── DOM references (cached once) ───────────────────────────────────
const dom = {
  page:            document.getElementById("tab-satellites"),
  filter:          document.getElementById("sat-pred-filter") as HTMLInputElement | null,
  minElevation:    document.getElementById("sat-pred-min-el") as HTMLSelectElement | null,
  category:        document.getElementById("sat-pred-category") as HTMLSelectElement | null,
  currentList:     document.getElementById("sat-pred-current-list"),
  upcomingList:    document.getElementById("sat-pred-list"),
  currentSection:  document.getElementById("sat-pred-current-section"),
  upcomingSection: document.getElementById("sat-pred-upcoming-section"),
  status:          document.getElementById("sat-pred-status"),
};

// ── State ───────────────────────────────────────────────────────────
const PAGE_SIZE = 50;
let predShowAll = false;
let predData: SatellitePass[] = [];
let predFilterText = "";
let predMinEl = 0;
let predCategory = "all";
let predSatCount = 0;
let predCountdownTimer: ReturnType<typeof setInterval> | null = null;

/** The countdowns tick once a second, so they stop when nobody is looking. */
function isPageVisible(): boolean {
  return !!dom.page && dom.page.style.display !== "none";
}

// ── Predictions: helpers ────────────────────────────────────────────
function azToCardinal(deg: number): string {
  const dirs = ["N", "NE", "E", "SE", "S", "SW", "W", "NW"];
  return dirs[Math.round(deg / 45) % 8] ?? "N";
}

function formatPredTime(ms: number): string {
  const d = new Date(ms);
  const now = new Date();
  const dayNames = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
  const day = d.getUTCDay() !== now.getUTCDay() ? `${dayNames[d.getUTCDay()] ?? ""} ` : "";
  const hh = String(d.getUTCHours()).padStart(2, "0");
  const mm = String(d.getUTCMinutes()).padStart(2, "0");
  return `${day}${hh}:${mm}`;
}

function formatPredDuration(s: number): string {
  if (s >= 60) return `${Math.round(s / 60)} min`;
  return `${s}s`;
}

function formatCountdown(ms: number): string {
  const totalSec = Math.max(0, Math.floor(ms / 1000));
  const m = Math.floor(totalSec / 60);
  const s = totalSec % 60;
  return `${m}:${String(s).padStart(2, "0")}`;
}

function elevationClass(deg: number): string {
  if (deg >= 45) return "sat-pred-el-high";
  if (deg >= 10) return "sat-pred-el-mid";
  return "sat-pred-el-low";
}

// ── Predictions: countdown timer management ─────────────────────────
function stopCountdownTimer() {
  if (predCountdownTimer) {
    clearInterval(predCountdownTimer);
    predCountdownTimer = null;
  }
}

function startCountdownTimer(container: HTMLElement | null): void {
  const countdownEls = container?.querySelectorAll<HTMLElement>(".sat-pred-col-countdown") ?? [];
  if (countdownEls.length === 0) return;

  predCountdownTimer = setInterval(() => {
    if (!isPageVisible()) {
      stopCountdownTimer();
      return;
    }
    const n = Date.now();
    let anyActive = false;
    for (const el of countdownEls) {
      const los = Number.parseInt(el.dataset.los ?? "0", 10);
      const rem = los - n;
      if (rem > 0) {
        el.textContent = formatCountdown(rem);
        anyActive = true;
      } else {
        el.textContent = "0:00";
      }
    }
    if (!anyActive) {
      stopCountdownTimer();
      render(filtered());
    }
  }, 1000);
}

// ── Predictions: row builders ───────────────────────────────────────
function buildCurrentPassRow(pass: SatellitePass, now: number): HTMLElement {
  const row = document.createElement("div");
  row.className = "sat-pred-row-current";
  const dir = `${azToCardinal(pass.azimuth_aos_deg)} \u2192 ${azToCardinal(pass.azimuth_los_deg)}`;
  const remaining = Math.max(0, pass.los_ms - now);
  row.innerHTML = [
    `<span class="sat-pred-col-sat">${pass.satellite}</span>`,
    `<span class="sat-pred-col-el ${elevationClass(pass.max_elevation_deg)}">${pass.max_elevation_deg.toFixed(1)}\u00B0</span>`,
    `<span class="sat-pred-col-time">${formatPredTime(pass.aos_ms)}</span>`,
    `<span class="sat-pred-col-time">${formatPredTime(pass.los_ms)}</span>`,
    `<span class="sat-pred-col-countdown" data-los="${pass.los_ms}">${formatCountdown(remaining)}</span>`,
    `<span class="sat-pred-col-dir">${dir}</span>`,
  ].join("");
  return row;
}

function buildUpcomingPassRow(pass: SatellitePass): HTMLElement {
  const row = document.createElement("div");
  row.className = "sat-pred-row";
  const dir = `${azToCardinal(pass.azimuth_aos_deg)} \u2192 ${azToCardinal(pass.azimuth_los_deg)}`;
  row.innerHTML = [
    `<span class="sat-pred-col-time">${formatPredTime(pass.aos_ms)}</span>`,
    `<span class="sat-pred-col-sat">${pass.satellite}</span>`,
    `<span class="sat-pred-col-el ${elevationClass(pass.max_elevation_deg)}">${pass.max_elevation_deg.toFixed(1)}\u00B0</span>`,
    `<span class="sat-pred-col-dur">${formatPredDuration(pass.duration_s)}</span>`,
    `<span class="sat-pred-col-dir">${dir}</span>`,
  ].join("");
  return row;
}

// ── Predictions: filter state ───────────────────────────────────────
function filtered(): SatellitePass[] {
  let items = predData;
  if (predCategory !== "all") items = items.filter((p) => p.category === predCategory);
  if (predMinEl > 0) items = items.filter((p) => p.max_elevation_deg >= predMinEl);
  if (predFilterText) items = items.filter((p) => p.satellite.toUpperCase().includes(predFilterText));
  return items;
}

function applyFilters() {
  render(filtered());
}

const filterInput = dom.filter;
filterInput?.addEventListener("input", () => {
  predFilterText = filterInput.value.trim().toUpperCase();
  applyFilters();
});

const minElevationSelect = dom.minElevation;
minElevationSelect?.addEventListener("change", () => {
  predMinEl = Number.parseInt(minElevationSelect.value, 10) || 0;
  applyFilters();
});

const categorySelect = dom.category;
categorySelect?.addEventListener("change", () => {
  predCategory = categorySelect.value;
  applyFilters();
});

// ── Predictions: main render ────────────────────────────────────────
function render(passes: SatellitePass[], error?: string): void {
  stopCountdownTimer();

  if (error) {
    if (dom.currentList)  dom.currentList.innerHTML = "";
    if (dom.upcomingList) dom.upcomingList.innerHTML = "";
    if (dom.currentSection)   dom.currentSection.style.display = "none";
    if (dom.upcomingSection)  dom.upcomingSection.style.display = "none";
    if (dom.status)       dom.status.textContent = error;
    return;
  }

  if (!Array.isArray(passes) || passes.length === 0) {
    if (dom.currentList)  dom.currentList.innerHTML = "";
    if (dom.upcomingList) dom.upcomingList.innerHTML = "";
    if (dom.currentSection)   dom.currentSection.style.display = "none";
    if (dom.upcomingSection)  dom.upcomingSection.style.display = "none";
    if (dom.status)       dom.status.textContent = "No passes found in the next 24 hours.";
    return;
  }

  const now = Date.now();
  const current = passes.filter((p) => p.aos_ms <= now && p.los_ms > now);
  const upcoming = passes.filter((p) => p.aos_ms > now);

  // ── Current passes ──
  if (dom.currentSection) dom.currentSection.style.display = current.length > 0 ? "" : "none";
  if (dom.currentList) {
    if (current.length === 0) {
      dom.currentList.innerHTML = "";
    } else {
      const frag = document.createDocumentFragment();
      for (const pass of current) frag.appendChild(buildCurrentPassRow(pass, now));
      dom.currentList.replaceChildren(frag);
    }
  }

  // ── Upcoming passes ──
  const upcomingLimit = predShowAll ? upcoming.length : PAGE_SIZE;
  const visibleUpcoming = upcoming.slice(0, upcomingLimit);
  const hiddenCount = upcoming.length - visibleUpcoming.length;
  if (dom.upcomingSection) dom.upcomingSection.style.display = upcoming.length > 0 ? "" : "none";
  if (dom.upcomingList) {
    const frag = document.createDocumentFragment();
    for (const pass of visibleUpcoming) frag.appendChild(buildUpcomingPassRow(pass));
    if (hiddenCount > 0) {
      const moreRow = document.createElement("div");
      moreRow.className = "sat-pred-row";
      moreRow.style.cursor = "pointer";
      moreRow.style.textAlign = "center";
      moreRow.innerHTML = `<span style="grid-column:1/-1;color:var(--accent);font-size:0.82rem;">Show ${hiddenCount} more passes\u2026</span>`;
      moreRow.addEventListener("click", () => {
        predShowAll = true;
        render(filtered());
      });
      frag.appendChild(moreRow);
    }
    dom.upcomingList.replaceChildren(frag);
  }

  // ── Status ──
  if (dom.status) {
    let text = `${current.length} active \u00B7 ${upcoming.length} upcoming \u00B7 times in UTC`;
    if (predSatCount > 0) text += ` \u00B7 ${predSatCount} satellites tracked`;
    dom.status.textContent = text;
  }

  // ── Countdown timer ──
  if (current.length > 0 && isPageVisible()) {
    startCountdownTimer(dom.currentList);
  }
}

// ── Predictions: data loading ───────────────────────────────────────
async function load(): Promise<void> {
  if (dom.status)       dom.status.textContent = "Loading predictions\u2026";
  if (dom.currentList)  dom.currentList.innerHTML = "";
  if (dom.upcomingList) dom.upcomingList.innerHTML = "";
  try {
    const resp = await fetch("/sat_passes");
    if (!resp.ok) throw new Error(`HTTP ${resp.status}`);
    const data = await resp.json() as SatellitePassResponse;
    predSatCount = data.satellite_count || 0;
    if (data.error) {
      predData = [];
      render([], data.error);
    } else {
      predData = data.passes || [];
      render(filtered());
    }
  } catch (error: unknown) {
    render([], `Failed to load predictions: ${error instanceof Error ? error.message : String(error)}`);
  }
}

// ── Page lifecycle ──────────────────────────────────────────────────
function clearPredictionDom(): void {
  stopCountdownTimer();
  if (dom.currentList)  dom.currentList.innerHTML = "";
  if (dom.upcomingList) dom.upcomingList.innerHTML = "";
}
predWindow.clearSatPredictionDom = clearPredictionDom;

/**
 * Called by the router each time the Satellites page is opened, including the
 * visit that imports this module — so loading is driven from one place only.
 */
predWindow.refreshSatPredictions = function () {
  predShowAll = false;
  void load();
};