{% extends "base.html" %}
{% block title %}Orbital — SignalOps{% endblock %}
{% block extra_style %}
#orb-map{width:100%;height:100%;background:#000}
.layer-row{display:flex;align-items:center;justify-content:space-between;padding:8px 10px;border-radius:6px;background:var(--e);margin-bottom:6px;cursor:pointer;user-select:none;border:1px solid transparent;transition:border-color 0.15s}
.layer-row:hover{border-color:rgba(138, 122, 184,0.25)}
.layer-row.active{border-color:rgba(138, 122, 184,0.4);background:rgba(138, 122, 184,0.06)}
.layer-row span.name{font-family:'Rajdhani',sans-serif;font-weight:600;font-size:12px;letter-spacing:1px;color:var(--t)}
.layer-row span.cnt{font-size:10px;color:var(--tm);font-family:monospace}
.mission-dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px;vertical-align:middle}
.legend-row{display:flex;align-items:center;font-size:10px;color:var(--td);padding:3px 0}

/* ═══ MAP STYLE TOGGLE (base + overlay) ═══ */
#map-style-toggle{
  position:absolute;
  bottom:14px;left:14px;
  background:rgba(11, 11, 15,0.92);
  backdrop-filter:blur(14px) saturate(1.2);
  -webkit-backdrop-filter:blur(14px) saturate(1.2);
  border:1px solid rgba(138, 122, 184,0.28);
  border-radius:10px;
  padding:4px;
  z-index:500;
  display:flex;flex-direction:column;gap:2px;
  box-shadow:0 10px 30px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.04);
  font-family:'Rajdhani',sans-serif;
}
#map-style-toggle .mst-row{display:flex;gap:1px;padding:2px}
#map-style-toggle .mst-sep{
  height:1px;margin:1px 8px;
  background:linear-gradient(to right, transparent, rgba(138, 122, 184,0.25), transparent);
}
#map-style-toggle button{
  background:transparent;border:none;
  color:var(--td);
  font-family:'Rajdhani',sans-serif;font-size:10px;font-weight:700;
  letter-spacing:1.2px;
  padding:6px 10px;border-radius:6px;
  cursor:pointer;transition:all 0.18s ease;
  display:inline-flex;align-items:center;gap:5px;
  position:relative;
}
#map-style-toggle button svg{
  width:13px;height:13px;flex-shrink:0;
  stroke:currentColor;fill:none;
  stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;
  opacity:0.85;transition:opacity 0.15s, transform 0.2s;
}
#map-style-toggle button:hover{color:var(--t);background:rgba(138, 122, 184,0.08)}
#map-style-toggle button:hover svg{opacity:1;transform:scale(1.08)}
#map-style-toggle .mst-base button.active{
  color:#C3B8E2;
  background:linear-gradient(180deg, rgba(138, 122, 184,0.25), rgba(138, 122, 184,0.12));
  box-shadow:inset 0 0 0 1px rgba(180, 168, 214,0.4), 0 0 12px rgba(138, 122, 184,0.2);
}
#map-style-toggle .mst-base button.active svg{opacity:1}
#map-style-toggle .mst-overlay button.active{
  color:#FCD34D;
  background:linear-gradient(180deg, rgba(201, 161, 90,0.2), rgba(201, 161, 90,0.08));
  box-shadow:inset 0 0 0 1px rgba(201, 161, 90,0.45), 0 0 10px rgba(201, 161, 90,0.18);
}
#map-style-toggle .mst-overlay button.active svg{opacity:1}

/* Attribution control styling */
.leaflet-control-attribution{
  background:rgba(8,11,9,0.7) !important;
  color:var(--tm) !important;
  font-size:9px !important;
  padding:2px 6px !important;
  border-radius:4px 0 0 0 !important;
}
.leaflet-control-attribution a{color:var(--td) !important}

/* ═══ MAP HUD OVERLAY (live map-derived values) ═══ */
#drone-hud{
  position:absolute;inset:0;pointer-events:none;z-index:450;
  display:none;
  font-family:'JetBrains Mono',monospace;color:#4ADE80;
  text-shadow:0 0 4px rgba(74,222,128,0.6);
}
#drone-hud.active{display:block}
#drone-hud::before{
  content:'';position:absolute;inset:0;
  background:
    radial-gradient(ellipse at center, transparent 35%, rgba(0,0,0,0.35) 100%),
    linear-gradient(rgba(74,222,128,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(74,222,128,0.04) 1px, transparent 1px);
  background-size:100% 100%, 40px 40px, 40px 40px;
  pointer-events:none;
}
#drone-hud .dh-cross{
  position:absolute;top:50%;left:50%;
  width:80px;height:80px;
  transform:translate(-50%,-50%);
}
#drone-hud .dh-cross::before,
#drone-hud .dh-cross::after{
  content:'';position:absolute;background:#4ADE80;
  box-shadow:0 0 6px rgba(74,222,128,0.8);
}
#drone-hud .dh-cross::before{left:50%;top:0;bottom:0;width:1px;transform:translateX(-0.5px)}
#drone-hud .dh-cross::after{top:50%;left:0;right:0;height:1px;transform:translateY(-0.5px)}
#drone-hud .dh-cross .dh-dot{
  position:absolute;top:50%;left:50%;width:8px;height:8px;
  border:1px solid #4ADE80;border-radius:50%;
  transform:translate(-50%,-50%);
}
#drone-hud .dh-corner{
  position:absolute;width:28px;height:28px;
  border-color:#4ADE80;border-style:solid;
}
#drone-hud .dh-tl{top:16px;left:16px;border-width:2px 0 0 2px}
#drone-hud .dh-tr{top:16px;right:16px;border-width:2px 2px 0 0}
#drone-hud .dh-bl{bottom:16px;left:16px;border-width:0 0 2px 2px}
#drone-hud .dh-br{bottom:16px;right:16px;border-width:0 2px 2px 0}
#drone-hud .dh-telemetry{
  position:absolute;top:20px;left:56px;
  font-size:10px;letter-spacing:1.5px;line-height:1.7;
}
#drone-hud .dh-telemetry .k{color:rgba(74,222,128,0.5);margin-right:6px}
#drone-hud .dh-telemetry .v{color:#4ADE80;font-weight:700}
#drone-hud .dh-status{
  position:absolute;top:20px;right:56px;text-align:right;
  font-size:10px;letter-spacing:2px;
}
#drone-hud .dh-status .rec{
  display:inline-block;width:8px;height:8px;border-radius:50%;
  background:#F87171;margin-right:6px;
  animation:dh-blink 1s infinite;
  box-shadow:0 0 8px rgba(248,113,113,0.8);
}
@keyframes dh-blink{0%,50%{opacity:1}51%,100%{opacity:0.2}}
#drone-hud .dh-altbar{
  position:absolute;right:24px;top:50%;transform:translateY(-50%);
  width:4px;height:180px;background:rgba(74,222,128,0.15);border-radius:2px;
}
#drone-hud .dh-altbar::before{
  content:'';position:absolute;left:-1px;right:-1px;bottom:0;
  height:var(--dh-zoom-pct,60%);background:linear-gradient(to top, #4ADE80, rgba(74,222,128,0.3));
  border-radius:2px;box-shadow:0 0 6px rgba(74,222,128,0.6);
}
#drone-hud .dh-footer{
  position:absolute;bottom:20px;left:56px;right:56px;
  display:flex;justify-content:space-between;font-size:9px;
  letter-spacing:2px;color:rgba(74,222,128,0.7);
}

/* ═══ MGRS GRID LABEL ═══ */
.mgrs-lbl{
  background:rgba(11, 11, 15,0.85);
  color:#C9A15A;
  font-family:'JetBrains Mono',monospace;
  font-size:9px;font-weight:700;
  padding:1px 4px;border:1px solid rgba(201, 161, 90,0.3);
  border-radius:2px;letter-spacing:0.5px;
  white-space:nowrap;pointer-events:none;
}

/* Drone-mode subtle map desaturation for immersion */
.orb-map-drone{filter:contrast(1.15) saturate(0.75) brightness(0.9)}

/* ═══ RESPONSIVE — map toolbar + HUD (desktop >900px unchanged) ═══ */
@media (max-width:900px){
  #map-style-toggle{left:8px;bottom:8px;max-width:calc(100% - 16px)}
  #map-style-toggle .mst-row{flex-wrap:wrap}
  #map-style-toggle button{min-height:36px;padding:6px 9px}
  #drone-hud .dh-corner{width:20px;height:20px}
  #drone-hud .dh-tl{top:10px;left:10px}
  #drone-hud .dh-tr{top:10px;right:10px}
  #drone-hud .dh-bl{bottom:10px;left:10px}
  #drone-hud .dh-br{bottom:10px;right:10px}
  #drone-hud .dh-telemetry{top:14px;left:54px;font-size:9px;letter-spacing:0.5px;line-height:1.6}
  #drone-hud .dh-status{top:14px;right:38px;font-size:9px;letter-spacing:0.5px}
  #drone-hud .dh-altbar{right:14px;height:110px}
  #drone-hud .dh-footer{top:96px;bottom:auto;left:54px;right:38px;font-size:8px;letter-spacing:0.5px;gap:8px;flex-wrap:wrap}
  .leaflet-popup-content{max-width:calc(100vw - 80px)}
}
@media (max-width:600px){
  /* icon-only map toolbar on phones (labels stay in title tooltips) */
  #map-style-toggle button{font-size:0;gap:0;min-width:36px;justify-content:center;padding:6px}
  #map-style-toggle button svg{width:16px;height:16px}
}

/* ═══ RESPONSIVE — page layout ═══ */
@media (max-width:900px){
  .orb-grid{grid-template-columns:minmax(0,1fr) !important;height:auto !important;gap:12px !important}
  .orb-side{display:contents}
  .orb-side > .card{order:2;margin-bottom:0 !important}
  .orb-side > .card:first-child{order:0}
  .orb-map-card{order:1;height:60vh;min-height:360px;margin-bottom:0}
  .orb-side .btn{min-height:40px}
  .layer-row{min-height:40px}
  .layer-row span.cnt{max-width:55%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:right}
}
@media (max-width:600px){
  .orb-side > .card{padding:14px}
}
{% endblock %}
{% block content %}
<div class="section-hdr">Orbital Intelligence</div>
<div class="orb-grid" style="display:grid;grid-template-columns:340px 1fr;gap:16px;height:calc(100vh - 140px)">
  <div class="orb-side" style="overflow-y:auto;padding-right:4px">
    <div class="card" style="margin-bottom:12px">
      <div style="font-size:10px;color:var(--tm);letter-spacing:2px;margin-bottom:10px">Layers</div>
      <div id="layer-sats" class="layer-row active" onclick="toggleLayer('sats')">
        <span class="name"><svg class="so-ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="2.5"/><ellipse cx="12" cy="12" rx="10" ry="4" transform="rotate(-30 12 12)"/></svg> Satellites</span><span class="cnt" id="cnt-sats">—</span>
      </div>
      <div id="layer-stations" class="layer-row" onclick="toggleLayer('stations')">
        <span class="name"><svg class="so-ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 19a10 10 0 0 1 0-14"/><path d="M8.5 15.5a5 5 0 0 1 0-7"/><circle cx="12" cy="12" r="1.5"/><path d="M15.5 8.5a5 5 0 0 1 0 7"/><path d="M19 5a10 10 0 0 1 0 14"/></svg> SatNOGS Stations</span><span class="cnt" id="cnt-stations">—</span>
      </div>
      <div id="layer-jamming" class="layer-row" onclick="toggleLayer('jamming')">
        <span class="name"><svg class="so-ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 3l9.5 17h-19z"/><path d="M12 10v4M12 17.5v.01"/></svg> GPS Jamming</span><span class="cnt" id="cnt-jamming">—</span>
      </div>
      <button class="btn btn-p" onclick="refreshAll()" style="width:100%;margin-top:10px"> Refresh</button>
    </div>

    <div class="card" style="margin-bottom:12px">
      <div style="font-size:10px;color:var(--tm);letter-spacing:2px;margin-bottom:10px">GPS JAMMING — CENTER</div>
      <input id="j-lat" placeholder="Latitude" style="margin-bottom:6px">
      <input id="j-lon" placeholder="Longitude" style="margin-bottom:8px">
      <div style="display:flex;gap:6px">
        <button class="btn btn-outline" onclick="jammingScan()" style="flex:1;padding:6px 10px;font-size:11px">Scan</button>
        <button class="btn btn-g" onclick="jammingGeo()" style="padding:6px 10px;font-size:11px"><svg class="so-ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 21s-7-6.2-7-11a7 7 0 0 1 14 0c0 4.8-7 11-7 11z"/><circle cx="12" cy="10" r="2.5"/></svg></button>
      </div>
      <div style="font-size:10px;color:var(--tm);margin-top:8px;line-height:1.5">Derived from ADS-B NAC-P values. Low accuracy clusters indicate interference.</div>
    </div>

    <div class="card" style="margin-bottom:12px">
      <div style="font-size:10px;color:var(--tm);letter-spacing:2px;margin-bottom:10px">Mission filter</div>
      <div id="mission-filters" style="display:flex;flex-direction:column;gap:4px;font-size:11px"></div>
    </div>

    <div class="card">
      <div style="font-size:10px;color:var(--tm);letter-spacing:2px;margin-bottom:10px">Mission legend</div>
      <div id="legend-box"></div>
    </div>
  </div>

  <div class="card orb-map-card" style="padding:0;overflow:hidden;position:relative">
    <div id="orb-map"></div>

    <!-- Map HUD overlay — live map-derived values only -->
    <div id="drone-hud">
      <div class="dh-corner dh-tl"></div><div class="dh-corner dh-tr"></div>
      <div class="dh-corner dh-bl"></div><div class="dh-corner dh-br"></div>
      <div class="dh-cross"><div class="dh-dot"></div></div>
      <div class="dh-telemetry">
        <div><span class="k">LAT</span><span class="v" id="dh-lat">—</span></div>
        <div><span class="k">LON</span><span class="v" id="dh-lon">—</span></div>
        <div><span class="k">View w</span><span class="v" id="dh-vw">—</span></div>
        <div><span class="k">View h</span><span class="v" id="dh-vh">—</span></div>
      </div>
      <div class="dh-status">
        <div><span class="rec"></span><span id="dh-utc">--:--:--Z</span></div>
        <div style="margin-top:4px;color:rgba(116, 176, 149,0.7)" id="dh-count">—</div>
        <div style="margin-top:2px;color:rgba(116, 176, 149,0.7)" id="dh-count2">—</div>
      </div>
      <div class="dh-altbar" title="Zoom level within the map's zoom range"></div>
      <div class="dh-footer">
        <span id="dh-src">MAP HUD</span>
        <span id="dh-zoom">ZOOM · —</span>
        <span id="dh-date">UTC · —</span>
      </div>
    </div>

    <div id="map-style-toggle">
      <div class="mst-row mst-base">
        <button class="active" data-style="dark" onclick="setMapStyle('dark')" title="Dark — CARTO SIGINT">
          <svg viewBox="0 0 24 24"><path d="M20 15.5A8.38 8.38 0 0 1 12.5 20 8.5 8.5 0 0 1 4 11.5 8.38 8.38 0 0 1 8.5 4a7 7 0 0 0 11.5 11.5z"/></svg>
          Dark
        </button>
        <button data-style="street" onclick="setMapStyle('street')" title="Street — OpenStreetMap">
          <svg viewBox="0 0 24 24"><path d="M4 19h16M4 12h16M4 5h16"/><path d="M8 5v14M14 5v14" stroke-dasharray="2 2"/></svg>
          Street
        </button>
        <button data-style="satellite" onclick="setMapStyle('satellite')" title="Satellite — Esri World Imagery">
          <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="3"/><path d="M4.5 19.5L9 15M15 9l4.5-4.5M7 4.5L4.5 7l3 3M20 17l-2.5 2.5-3-3"/></svg>
          SAT
        </button>
        <button data-style="terrain" onclick="setMapStyle('terrain')" title="Terrain — OpenTopoMap">
          <svg viewBox="0 0 24 24"><path d="M3 20l5.5-9 3.5 5 3-4 6 8z"/><path d="M8 11l-2 3"/></svg>
          Terrain
        </button>
        <button data-style="night" onclick="setMapStyle('night')" title="Night — NASA Black Marble">
          <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="5"/><path d="M12 3v2M12 19v2M3 12h2M19 12h2M5.6 5.6l1.4 1.4M17 17l1.4 1.4M5.6 18.4L7 17M17 7l1.4-1.4"/></svg>
          Night
        </button>
      </div>
      <div class="mst-sep"></div>
      <div class="mst-row mst-overlay">
        <button data-overlay="heatmap" onclick="toggleOverlay('heatmap')" title="Satellite density heatmap">
          <svg viewBox="0 0 24 24"><path d="M12 2s5 5 5 10a5 5 0 0 1-10 0c0-2 1-3 1-5-2 1-4 3-4 6a8 8 0 0 0 16 0c0-6-8-11-8-11z"/></svg>
          Heat
        </button>
        <button data-overlay="mgrs" onclick="toggleOverlay('mgrs')" title="Military Grid Reference System">
          <svg viewBox="0 0 24 24"><path d="M3 9h18M3 15h18M9 3v18M15 3v18"/><path d="M3 3h18v18H3z"/></svg>
          MGRS
        </button>
        <button data-overlay="rf" onclick="toggleOverlay('rf')" title="RF footprint coverage">
          <svg viewBox="0 0 24 24"><path d="M4.93 19.07a10 10 0 0 1 0-14.14M19.07 4.93a10 10 0 0 1 0 14.14M7.76 16.24a6 6 0 0 1 0-8.48M16.24 7.76a6 6 0 0 1 0 8.48"/><circle cx="12" cy="12" r="1.5" fill="currentColor"/></svg>
          RF
        </button>
        <button data-overlay="drone" onclick="toggleOverlay(\'drone\')" title="Map HUD — live center, view size, zoom, UTC clock, on-map counts">
          <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="8"/><path d="M12 2v4M12 18v4M2 12h4M18 12h4"/><circle cx="12" cy="12" r="2"/></svg>
          MAP HUD
        </button>
      </div>
    </div>
  </div>
</div>
{% endblock %}
{% block scripts %}
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"/>
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
<script src="https://unpkg.com/leaflet.heat@0.2.0/dist/leaflet-heat.js"></script>
<script>
// ═══ Mission color palette ═══
const MISSION_COLORS = {
  sigint:        '#FFFFFF',
  isr:           '#F87171',
  early_warning: '#FF2288',
  navigation:    '#60A5FA',
  weather:       '#4ADE80',
  comms:         '#A78BFA',
  imaging:       '#FBBF24',
  sar:           '#22D3EE',
  station:       '#FDE047',
  sarsat:        '#FB923C',
  military:      '#EF4444',
  other:         '#9896AE'
};
const MISSION_LABELS = {
  sigint:'SIGINT', isr:'ISR/RECON', early_warning:'EARLY WARN', navigation:'NAV/GPS',
  weather:'WEATHER', comms:'COMMS', imaging:'IMAGING', sar:'SAR',
  station:'SPACE STN', sarsat:'SAR/RESCUE', military:'MILITARY', other:'OTHER'
};

// ═══ Map init ═══
const orbMap = L.map('orb-map', {worldCopyJump: true}).setView([20, 0], 2);

// ═══════════════════════════════════════════════════════════════
//  BASE MAP STYLES
// ═══════════════════════════════════════════════════════════════
const MAP_STYLES = {
  dark: {
    url: 'https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png',
    attr: '© OpenStreetMap · CARTO',
    subdomains: 'abcd',
    maxZoom: 19
  },
  street: {
    url: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
    attr: '© OpenStreetMap contributors',
    subdomains: 'abc',
    maxZoom: 19
  },
  satellite: {
    url: 'https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}',
    attr: 'Esri · DigitalGlobe · GeoEye',
    subdomains: 'abc',
    maxZoom: 19
  },
  terrain: {
    url: 'https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png',
    attr: '© OpenStreetMap · OpenTopoMap',
    subdomains: 'abc',
    maxZoom: 17
  },
  night: {
    url: 'https://map1.vis.earthdata.nasa.gov/wmts-webmerc/VIIRS_Black_Marble/default/2016-01-01/GoogleMapsCompatible_Level8/{z}/{y}/{x}.jpg',
    attr: 'NASA GIBS · VIIRS Black Marble',
    subdomains: 'abc',
    maxZoom: 8
  }
};

let currentTileLayer = null;
let currentStyle = 'dark';

function setMapStyle(style) {
  const config = MAP_STYLES[style];
  if (!config) return;
  if (currentTileLayer) orbMap.removeLayer(currentTileLayer);
  currentTileLayer = L.tileLayer(config.url, {
    attribution: config.attr,
    maxZoom: config.maxZoom,
    subdomains: config.subdomains
  }).addTo(orbMap);
  currentStyle = style;
  document.querySelectorAll('#map-style-toggle .mst-base button').forEach(btn => {
    btn.classList.toggle('active', btn.dataset.style === style);
  });
  try { localStorage.setItem('sigops_map_style', style); } catch(e){}
}

// Restore saved style (default: dark)
try {
  const saved = localStorage.getItem('sigops_map_style') || 'dark';
  if (MAP_STYLES[saved]) setMapStyle(saved); else setMapStyle('dark');
} catch(e) { setMapStyle('dark'); }

const satLayer     = L.layerGroup().addTo(orbMap);
const stationLayer = L.layerGroup();
const jammingLayer = L.layerGroup();

const layerState = {sats: true, stations: false, jamming: false};
const missionFilter = new Set();  // empty = show all
let allSatellites = [];
let satTruncated = false;

// ═══════════════════════════════════════════════════════════════
//  OVERLAY LAYERS (heatmap, MGRS, RF coverage, drone view)
// ═══════════════════════════════════════════════════════════════
const overlayState = {heatmap:false, mgrs:false, rf:false, drone:false};
let heatLayer  = null;
let mgrsLayer  = L.layerGroup();
let rfLayer    = L.layerGroup();

// Satellite density heatmap
function buildHeatmap() {
  const points = [];
  allSatellites.forEach(s => {
    if (typeof s.lat !== 'number' || typeof s.lon !== 'number') return;
    // Military/SIGINT/ISR missions burn hotter
    const hot = (s.mission === 'sigint' || s.mission === 'military' || s.mission === 'isr' || s.mission === 'early_warning') ? 1.0 : 0.5;
    points.push([s.lat, s.lon, hot]);
  });
  if (heatLayer) { orbMap.removeLayer(heatLayer); heatLayer = null; }
  if (points.length === 0) return;
  heatLayer = L.heatLayer(points, {
    radius: 22, blur: 18, maxZoom: 8,
    gradient: {0.2:'#3B0764', 0.4:'#7C3AED', 0.6:'#A78BFA', 0.8:'#FBBF24', 1.0:'#F87171'}
  });
  if (overlayState.heatmap) heatLayer.addTo(orbMap);
}

// RF coverage footprint per satellite (rough ground-track cone estimate)
function buildRfCoverage() {
  rfLayer.clearLayers();
  allSatellites.forEach(s => {
    if (typeof s.lat !== 'number' || typeof s.lon !== 'number') return;
    // Altitude (km) → ground footprint radius (very rough: r ≈ alt × 1500 in meters)
    const alt = typeof s.alt_km === 'number' ? s.alt_km : 550;
    const radiusM = Math.min(2500000, Math.max(120000, alt * 1500));
    const color = MISSION_COLORS[s.mission] || MISSION_COLORS.other;
    L.circle([s.lat, s.lon], {
      radius: radiusM,
      color: color,
      weight: 0.8,
      opacity: 0.45,
      fillColor: color,
      fillOpacity: 0.04,
      dashArray: '3,4',
      interactive: false
    }).addTo(rfLayer);
  });
}

// MGRS-style grid with Grid Zone Designator labels
function buildMgrsGrid() {
  mgrsLayer.clearLayers();
  const bounds = orbMap.getBounds();
  const zoom = orbMap.getZoom();
  let step;
  if      (zoom >= 13) step = 0.01;
  else if (zoom >= 10) step = 0.05;
  else if (zoom >= 8)  step = 0.25;
  else if (zoom >= 6)  step = 1;
  else if (zoom >= 4)  step = 5;
  else                 step = 10;

  const north = bounds.getNorth(), south = bounds.getSouth();
  const west  = bounds.getWest(),  east  = bounds.getEast();
  const col = 'rgba(251,191,36,0.28)';

  const lonStart = Math.floor(west / step) * step;
  const lonEnd   = Math.ceil(east / step) * step;
  for (let lon = lonStart; lon <= lonEnd + 0.0001; lon += step) {
    L.polyline([[south, lon], [north, lon]], {
      color: col, weight: 0.7, interactive: false, dashArray:'2,3'
    }).addTo(mgrsLayer);
  }
  const latStart = Math.floor(south / step) * step;
  const latEnd   = Math.ceil(north / step) * step;
  for (let lat = latStart; lat <= latEnd + 0.0001; lat += step) {
    L.polyline([[lat, west], [lat, east]], {
      color: col, weight: 0.7, interactive: false, dashArray:'2,3'
    }).addTo(mgrsLayer);
  }

  if (zoom >= 5) {
    for (let lon = lonStart; lon <= lonEnd + 0.0001; lon += step) {
      for (let lat = latStart; lat <= latEnd + 0.0001; lat += step) {
        const utmZone = Math.floor((lon + 180) / 6) + 1;
        const bands = 'CDEFGHJKLMNPQRSTUVWX';
        let bandIdx = Math.floor((lat + 80) / 8);
        bandIdx = Math.max(0, Math.min(bands.length - 1, bandIdx));
        const gzd = utmZone + bands[bandIdx];
        const icon = L.divIcon({
          className: 'mgrs-lbl-icon',
          html: `<div class="mgrs-lbl">${gzd} · ${lat.toFixed(step<1?2:0)},${lon.toFixed(step<1?2:0)}</div>`,
          iconSize: [null, null], iconAnchor: [0, 0]
        });
        L.marker([lat, lon], {icon, interactive:false, keyboard:false}).addTo(mgrsLayer);
      }
    }
  }
}

// ═══ MAP HUD — every value is derived from the live map state (no simulated telemetry) ═══
let _hudClockTimer = null;
let _hudRaf = 0;
function hudCounts() {
  // Real counts of what is drawn on the map right now (hidden layers count as 0)
  const sats = orbMap.hasLayer(satLayer) ? satLayer.getLayers().length : 0;
  const stns = orbMap.hasLayer(stationLayer) ? stationLayer.getLayers().length : 0;
  return ['SATS · ' + sats, 'STNS · ' + stns];
}
function _hudSet(id, txt) { const el = document.getElementById(id); if (el) el.textContent = txt; }
function _hudFmtKm(km) {
  if (!isFinite(km) || km <= 0) return '—';
  if (km >= 1000) return Math.round(km).toLocaleString('en-US') + ' KM';
  if (km >= 10)   return km.toFixed(0) + ' KM';
  if (km >= 1)    return km.toFixed(1) + ' KM';
  return Math.round(km * 1000) + ' M';
}
function _hudTick() {
  const iso = new Date().toISOString();
  _hudSet('dh-utc', iso.slice(11, 19) + 'Z');
  _hudSet('dh-date', 'UTC · ' + iso.slice(0, 10));
  try { const c = hudCounts(); _hudSet('dh-count', c[0]); _hudSet('dh-count2', c[1]); } catch (e) {}
}
// UTC clock runs only while the HUD is visible
function setHudClock(on) {
  if (on && !_hudClockTimer) { _hudTick(); _hudClockTimer = setInterval(_hudTick, 1000); }
  else if (!on && _hudClockTimer) { clearInterval(_hudClockTimer); _hudClockTimer = null; }
}
function updateDroneHud() {
  const m = orbMap;
  const c = m.getCenter().wrap();
  const z = m.getZoom();
  const b = m.getBounds();
  // View extent: lon span × 111.32·cos(lat) km, lat span × 110.574 km
  const lonSpan = Math.min(360, Math.abs(b.getEast() - b.getWest()));
  const latSpan = Math.min(180, Math.abs(Math.min(90, b.getNorth()) - Math.max(-90, b.getSouth())));
  const widthKm  = 111.32 * Math.cos(c.lat * Math.PI / 180) * lonSpan;
  const heightKm = 110.574 * latSpan;
  _hudSet('dh-lat', c.lat.toFixed(5));
  _hudSet('dh-lon', c.lng.toFixed(5));
  _hudSet('dh-vw', _hudFmtKm(widthKm));
  _hudSet('dh-vh', _hudFmtKm(heightKm));
  const maxZ = m.getMaxZoom(), minZ = m.getMinZoom() || 0;
  const zTxt = Number.isInteger(z) ? String(z) : z.toFixed(1);
  _hudSet('dh-zoom', 'ZOOM · ' + zTxt + (isFinite(maxZ) ? ' / ' + maxZ : ''));
  // Side bar shows the real zoom level as a fraction of the layer's zoom range
  const pct = (isFinite(maxZ) && maxZ > minZ) ? Math.max(0, Math.min(100, Math.round(100 * (z - minZ) / (maxZ - minZ)))) : 0;
  const hud = document.getElementById('drone-hud');
  if (hud) hud.style.setProperty('--dh-zoom-pct', pct + '%');
  _hudSet('dh-src', 'MAP HUD · ' + String(typeof currentStyle !== 'undefined' ? currentStyle : '').toUpperCase());
  _hudTick();
}
// Live update while panning/zooming (one update per animation frame)
orbMap.on('move zoom', () => {
  if (!overlayState.drone || _hudRaf) return;
  _hudRaf = requestAnimationFrame(() => { _hudRaf = 0; updateDroneHud(); });
});
// Keep Leaflet in sync with responsive layout changes
(function () {
  let t = null;
  const fix = () => { try { orbMap.invalidateSize(); } catch (e) {} };
  window.addEventListener('resize', () => { clearTimeout(t); t = setTimeout(fix, 150); });
  window.addEventListener('orientationchange', () => { clearTimeout(t); t = setTimeout(fix, 250); });
  window.addEventListener('load', fix);
  setTimeout(fix, 300);
})();

function toggleOverlay(name) {
  overlayState[name] = !overlayState[name];
  const btn = document.querySelector(`#map-style-toggle button[data-overlay="${name}"]`);
  if (btn) btn.classList.toggle('active', overlayState[name]);

  if (name === 'heatmap') {
    if (overlayState.heatmap) { buildHeatmap(); if (heatLayer) heatLayer.addTo(orbMap); }
    else if (heatLayer) { orbMap.removeLayer(heatLayer); }
  }
  if (name === 'mgrs') {
    if (overlayState.mgrs) { buildMgrsGrid(); mgrsLayer.addTo(orbMap); }
    else mgrsLayer.remove();
  }
  if (name === 'rf') {
    if (overlayState.rf) { buildRfCoverage(); rfLayer.addTo(orbMap); }
    else rfLayer.remove();
  }
  if (name === 'drone') {
    const hud = document.getElementById('drone-hud');
    const mapEl = document.getElementById('orb-map');
    hud.classList.toggle('active', overlayState.drone);
    mapEl.classList.toggle('orb-map-drone', overlayState.drone);
    if (overlayState.drone) updateDroneHud();
    setHudClock(overlayState.drone);
  }
  try { localStorage.setItem('sigops_overlay_state', JSON.stringify(overlayState)); } catch(e){}
}

orbMap.on('moveend zoomend', () => {
  if (overlayState.mgrs) buildMgrsGrid();
  if (overlayState.drone) updateDroneHud();
});

// ═══ Legend ═══
function renderLegend() {
  document.getElementById('legend-box').innerHTML = Object.entries(MISSION_LABELS).map(([k, v]) =>
    `<div class="legend-row"><span class="mission-dot" style="background:${MISSION_COLORS[k]}"></span>${v}</div>`
  ).join('');
}
renderLegend();

// ═══ Layer toggle ═══
function toggleLayer(name) {
  layerState[name] = !layerState[name];
  const row = document.getElementById('layer-' + name);
  row.classList.toggle('active', layerState[name]);
  const target = name === 'sats' ? satLayer : name === 'stations' ? stationLayer : jammingLayer;
  if (layerState[name]) target.addTo(orbMap); else orbMap.removeLayer(target);
  if (name === 'stations' && layerState.stations && stationLayer.getLayers().length === 0) loadStations();
}

// ═══ Mission filter ═══
function toggleMission(m) {
  if (missionFilter.has(m)) missionFilter.delete(m); else missionFilter.add(m);
  renderMissionFilters();
  renderSatellites();
}
function renderMissionFilters() {
  const counts = {};
  allSatellites.forEach(s => counts[s.mission] = (counts[s.mission] || 0) + 1);
  document.getElementById('mission-filters').innerHTML = Object.entries(MISSION_LABELS).map(([k, v]) => {
    const c = counts[k] || 0;
    const on = missionFilter.size === 0 || missionFilter.has(k);
    return `<label style="display:flex;align-items:center;gap:6px;cursor:pointer;opacity:${c === 0 ? 0.35 : 1}">
      <input type="checkbox" ${on ? 'checked' : ''} onchange="toggleMission('${k}')" style="width:auto">
      <span class="mission-dot" style="background:${MISSION_COLORS[k]}"></span>
      <span style="flex:1;color:var(--td)">${v}</span>
      <span style="color:var(--tm);font-family:monospace;font-size:10px">${c}</span>
    </label>`;
  }).join('');
}

// ═══ Satellites ═══
function renderSatellites() {
  satLayer.clearLayers();
  const visible = missionFilter.size === 0
    ? allSatellites
    : allSatellites.filter(s => missionFilter.has(s.mission));
  visible.forEach(s => {
    const color = MISSION_COLORS[s.mission] || MISSION_COLORS.other;
    const marker = L.circleMarker([s.lat, s.lon], {
      radius: 2.5, fillColor: color, color: color, fillOpacity: 0.85, weight: 1
    });
    marker.bindPopup(`<div style="font-family:monospace;font-size:11px;min-width:180px">
      <b style="color:${color};font-size:12px">${escapeHtml(s.name)}</b><br>
      <span style="color:#888">NORAD: ${escapeHtml(s.norad_id || '?')}</span><br>
      Mission: <b>${escapeHtml(MISSION_LABELS[s.mission] || s.mission)}</b><br>
      Altitude: ${escapeHtml(s.alt_km)} km<br>
      Velocity: ${escapeHtml(s.velocity_kms)} km/s<br>
      Category: ${escapeHtml(s.category)}
    </div>`);
    marker.addTo(satLayer);
  });
  document.getElementById('cnt-sats').textContent = visible.length + ' / ' + allSatellites.length + (satTruncated ? ' (truncated)' : '');
}

async function loadSatellites() {
  const cntEl = document.getElementById('cnt-sats');
  cntEl.textContent = 'loading…';
  cntEl.title = '';
  try {
    const res = await fetch('/api/satellites');
    let data = {};
    try { data = await res.json(); } catch (_) { data = {}; }
    if (!res.ok || (data && data.error)) {
      // e.g. HTTP 500 "sgp4 package not installed ..." or HTTP 429 rate limit
      const msg = (data && data.error) || ('HTTP ' + res.status);
      cntEl.textContent = 'err: ' + msg;   // textContent → no HTML injection
      cntEl.title = msg;
      console.warn('Satellite load error:', msg);
      return;
    }
    allSatellites = data.satellites || [];
    satTruncated = !!data.truncated;
    renderMissionFilters();
    renderSatellites();
    // Rebuild active overlays that depend on satellite data
    if (overlayState.heatmap) { buildHeatmap(); if (heatLayer) heatLayer.addTo(orbMap); }
    if (overlayState.rf)      { buildRfCoverage(); }
  } catch (e) {
    document.getElementById('cnt-sats').textContent = 'fail';
    console.warn(e);
  }
}

// ═══ SatNOGS Stations ═══
async function loadStations() {
  document.getElementById('cnt-stations').textContent = 'loading…';
  try {
    const res = await fetch('/api/satnogs/stations');
    let data = {};
    try { data = await res.json(); } catch (_) { data = {}; }
    if (!res.ok || (data && data.error && !data.stations)) {
      const msg = (data && data.error) || ('HTTP ' + res.status);
      document.getElementById('cnt-stations').textContent = 'err: ' + msg;
      document.getElementById('cnt-stations').title = msg;
      return;
    }
    stationLayer.clearLayers();
    (data.stations || []).forEach(st => {
      const col = st.status === 'Online' ? '#4ADE80' : st.status === 'Testing' ? '#FBBF24' : '#9896AE';
      L.circleMarker([st.lat, st.lon], {
        radius: 5, fillColor: col, color: col, fillOpacity: 0.6, weight: 1
      }).bindPopup(`<div style="font-family:monospace;font-size:11px;min-width:180px">
        <b>${escapeHtml(st.name)}</b><br>
        Station ID: ${escapeHtml(st.id)}<br>
        Status: <span style="color:${col}">${escapeHtml(st.status)}</span><br>
        Antennas: ${escapeHtml(st.antenna_count)}<br>
        Observations: ${escapeHtml(st.observations)}<br>
        ${st.qthlocator ? 'Grid: ' + escapeHtml(st.qthlocator) + '<br>' : ''}
        ${st.url ? '<a href="' + safeUrl(st.url) + '" target="_blank" rel="noopener noreferrer" style="color:#A78BFA">Open on SatNOGS →</a>' : ''}
      </div>`).addTo(stationLayer);
    });
    document.getElementById('cnt-stations').textContent = (data.stations || []).length;
  } catch (e) {
    document.getElementById('cnt-stations').textContent = 'fail';
    console.warn(e);
  }
}

// ═══ GPS Jamming ═══
function jammingGeo() {
  navigator.geolocation.getCurrentPosition(p => {
    document.getElementById('j-lat').value = p.coords.latitude.toFixed(5);
    document.getElementById('j-lon').value = p.coords.longitude.toFixed(5);
    jammingScan();
  });
}

async function jammingScan() {
  const lat = parseFloat(document.getElementById('j-lat').value);
  const lon = parseFloat(document.getElementById('j-lon').value);
  if (isNaN(lat) || isNaN(lon)) { alert('Enter coordinates for GPS jamming scan'); return; }
  document.getElementById('cnt-jamming').textContent = 'scanning…';
  jammingLayer.clearLayers();
  if (!layerState.jamming) toggleLayer('jamming');
  try {
    const res = await fetch(`/api/gps-jamming?lat=${lat}&lon=${lon}`);
    let data = {};
    try { data = await res.json(); } catch (_) { data = {}; }
    if (!res.ok || (data && data.error)) {
      const msg = (data && data.error) || ('HTTP ' + res.status);
      document.getElementById('cnt-jamming').textContent = 'err: ' + msg;
      document.getElementById('cnt-jamming').title = msg;
      return;
    }
    const cells = data.grid || [];
    cells.forEach(c => {
      const sev = c.severity;
      const col = sev >= 70 ? '#F87171' : sev >= 40 ? '#FBBF24' : '#FDE047';
      const opacity = 0.15 + (sev / 100) * 0.35;
      const half = c.size_deg / 2;
      L.rectangle([[c.lat - half, c.lon - half], [c.lat + half, c.lon + half]], {
        color: col, weight: 1, fillColor: col, fillOpacity: opacity
      }).bindPopup(`<div style="font-family:monospace;font-size:11px">
        <b style="color:${col}">GPS JAM ${escapeHtml(sev)}%</b><br>
        Avg NAC-P: ${escapeHtml(c.avg_nacp)}<br>
        Aircraft sampled: ${escapeHtml(c.aircraft_count)}<br>
        Cell: ${Number(c.lat).toFixed(2)}, ${Number(c.lon).toFixed(2)}
      </div>`).addTo(jammingLayer);
    });
    document.getElementById('cnt-jamming').textContent = cells.length + ' cells';
    // Dashboard threat aggregator
    try {
      const agg = JSON.parse(localStorage.getItem('sigops_threat_agg') || '{}') || {};
      agg.jamming = cells.length;   // current value (replace, not max)
      agg.jamming_ts = Date.now();
      agg.ts = Date.now();
      localStorage.setItem('sigops_threat_agg', JSON.stringify(agg));
    } catch(e){}
    if (cells.length > 0) {
      orbMap.setView([lat, lon], 6);
    } else {
      document.getElementById('cnt-jamming').textContent = 'no jamming detected';
    }
  } catch (e) {
    document.getElementById('cnt-jamming').textContent = 'fail';
    console.warn(e);
  }
}

// ═══ Refresh / Init ═══
function refreshAll() {
  loadSatellites();
  if (layerState.stations) loadStations();
}

loadSatellites();
// Auto-refresh satellite positions every 60 seconds
setInterval(loadSatellites, 60000);

// Restore overlay state after initial map is ready
try {
  const saved = JSON.parse(localStorage.getItem('sigops_overlay_state') || '{}');
  ['heatmap','mgrs','rf','drone'].forEach(k => {
    if (saved[k]) toggleOverlay(k);
  });
} catch(e){}
</script>
{% endblock %}