{% extends "base.html" %}
{% block title %}SDR — SignalOps{% endblock %}
{% block extra_style %}
#sdr-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}
.node-row{background:var(--s);border:1px solid var(--b);border-radius:6px;padding:9px 11px;cursor:pointer;transition:border-color 0.15s}
.node-row:hover{border-color:rgba(138, 122, 184,0.35)}
#tuner-panel{position:fixed;right:20px;bottom:20px;width:560px;height:480px;background:var(--s);border:1px solid rgba(138, 122, 184,0.3);border-radius:10px;box-shadow:0 12px 40px rgba(0,0,0,0.6);z-index:2000;display:none;overflow:hidden;flex-direction:column}
#tuner-panel.open{display:flex}
#tuner-hdr{padding:10px 14px;background:rgba(138, 122, 184,0.08);border-bottom:1px solid rgba(138, 122, 184,0.2);display:flex;align-items:center;justify-content:space-between}
#tuner-hdr .ttl{font-family:'Rajdhani',sans-serif;font-size:13px;font-weight:700;letter-spacing:2px;color:var(--pl)}
#tuner-hdr .x{background:none;border:none;color:var(--td);cursor:pointer;font-size:18px;padding:0 4px}
#tuner-freqbar{padding:10px 12px;background:rgba(0,0,0,0.25);border-bottom:1px solid rgba(138, 122, 184,0.15)}
#tuner-freq{font-family:'JetBrains Mono',monospace;font-size:14px;color:#B4A8D6;text-align:center;letter-spacing:2px;margin-bottom:8px;font-weight:600}
#tuner-presets{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:6px}
#tuner-presets button{flex:1;min-width:54px;padding:4px 6px;background:rgba(138, 122, 184,0.1);color:#B4A8D6;border:1px solid rgba(138, 122, 184,0.3);border-radius:3px;cursor:pointer;font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:600}
#tuner-presets button:hover{background:rgba(138, 122, 184,0.25);border-color:rgba(138, 122, 184,0.6)}
#tuner-custom{display:flex;gap:4px}
#tuner-custom input{flex:1;padding:4px 8px;background:rgba(0,0,0,0.3);color:var(--t);border:1px solid rgba(138, 122, 184,0.25);border-radius:3px;font-family:'JetBrains Mono',monospace;font-size:11px}
#tuner-custom select{padding:4px 6px;background:rgba(0,0,0,0.3);color:var(--t);border:1px solid rgba(138, 122, 184,0.25);border-radius:3px;font-family:'JetBrains Mono',monospace;font-size:11px}
#tuner-custom button{padding:4px 12px;background:rgba(138, 122, 184,0.2);color:#B4A8D6;border:1px solid rgba(138, 122, 184,0.4);border-radius:3px;cursor:pointer;font-family:'Rajdhani',sans-serif;font-size:11px;font-weight:700;letter-spacing:1px}
#tuner-iframe-wrap{flex:1;position:relative;background:#000;display:flex}
#tuner-iframe{flex:1;border:0;background:#000;width:100%;height:100%}
#tuner-overlay{position:absolute;inset:0;display:none;align-items:center;justify-content:center;background:rgba(11, 11, 15,0.92);flex-direction:column;padding:24px;text-align:center;pointer-events:none}
#tuner-overlay.show{display:flex;pointer-events:auto}
#tuner-overlay .ic{font-size:36px;margin-bottom:12px}
#tuner-overlay .msg{font-family:'Rajdhani',sans-serif;font-size:14px;color:var(--t);font-weight:600;letter-spacing:1px;margin-bottom:6px}
#tuner-overlay .sub{font-family:monospace;font-size:11px;color:var(--tm);max-width:400px;line-height:1.5}
#tuner-overlay .spinner{width:30px;height:30px;border:3px solid rgba(138, 122, 184,0.2);border-top-color:#B4A8D6;border-radius:50%;animation:spin 0.8s linear infinite;margin-bottom:12px}
@keyframes spin{to{transform:rotate(360deg)}}
#tuner-hint{position:absolute;top:10px;right:10px;width:260px;background:linear-gradient(135deg,rgba(138, 122, 184,0.96),rgba(76,29,149,0.96));border:1px solid rgba(180, 168, 214,0.6);border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,0.5);padding:0;display:none;flex-direction:column;z-index:10;opacity:0;transform:translateX(8px);transition:opacity 0.3s ease, transform 0.3s ease;backdrop-filter:blur(6px)}
#tuner-hint.show{display:flex;opacity:1;transform:translateX(0)}
#tuner-hint .h-hdr{display:flex;justify-content:space-between;align-items:center;padding:8px 10px;border-bottom:1px solid rgba(255,255,255,0.15)}
#tuner-hint .h-title{font-family:'Rajdhani',sans-serif;font-size:11px;font-weight:700;color:#fff;letter-spacing:2px}
#tuner-hint .h-x{background:none;border:none;color:rgba(255,255,255,0.7);cursor:pointer;font-size:14px;padding:0 4px;line-height:1}
#tuner-hint .h-x:hover{color:#fff}
#tuner-hint .h-body{padding:10px;font-size:11px;color:#fff;line-height:1.5;font-family:'JetBrains Mono',monospace}
#tuner-hint .h-kbd{display:inline-block;background:rgba(255,255,255,0.2);border:1px solid rgba(255,255,255,0.35);border-radius:3px;padding:1px 6px;margin:0 2px;font-weight:700;color:#fff}
#tuner-hint .h-ok{margin:0 10px 10px;background:rgba(0,0,0,0.3);color:#fff;border:1px solid rgba(255,255,255,0.3);border-radius:4px;padding:6px 8px;cursor:pointer;font-family:'Rajdhani',sans-serif;font-size:10px;font-weight:700;letter-spacing:1.2px}
#tuner-hint .h-ok:hover{background:rgba(0,0,0,0.5);border-color:rgba(255,255,255,0.5)}
#aprs-panel{position:fixed;left:20px;bottom:20px;width:420px;max-height:75vh;background:var(--s);border:1px solid rgba(201, 161, 90,0.35);border-radius:10px;box-shadow:0 12px 40px rgba(0,0,0,0.6);z-index:2000;display:none;overflow:hidden;flex-direction:column}
#aprs-panel.open{display:flex}
#aprs-hdr{padding:10px 14px;background:rgba(201, 161, 90,0.08);border-bottom:1px solid rgba(201, 161, 90,0.2);display:flex;align-items:center;justify-content:space-between}
#aprs-hdr .ttl{font-family:'Rajdhani',sans-serif;font-size:13px;font-weight:700;letter-spacing:2px;color:#C9A15A}
#aprs-hdr .x{background:none;border:none;color:var(--td);cursor:pointer;font-size:18px;padding:0 4px}
#aprs-body{padding:12px 14px;overflow-y:auto;font-size:11px;color:var(--td);line-height:1.5}
#aprs-body .sec{display:flex;align-items:center;font-family:'Rajdhani',sans-serif;font-size:10px;font-weight:700;color:#C9A15A;letter-spacing:2px;text-transform:uppercase;margin-top:10px;margin-bottom:4px;padding-bottom:3px;border-bottom:1px solid rgba(201, 161, 90,0.2)}
#aprs-body .sec:first-child{margin-top:0}
#aprs-body .row{display:flex;padding:4px 0;gap:10px}
#aprs-body .lbl{color:var(--tm);min-width:95px;font-size:10px;letter-spacing:0.5px;text-transform:uppercase}
#aprs-body .val{color:var(--t);flex:1;word-break:break-all;font-family:'JetBrains Mono',monospace}
#aprs-body .pkts{max-height:220px;overflow-y:auto;margin-top:4px;padding-right:4px}
#aprs-body .pkt{background:rgba(0,0,0,0.25);border-left:2px solid rgba(201, 161, 90,0.3);padding:5px 8px;margin-bottom:4px;border-radius:0 3px 3px 0;font-family:'JetBrains Mono',monospace;font-size:10px}
#aprs-body .pkt-ts{color:#C9A15A;margin-right:6px}
#aprs-body .pkt-cmt{color:var(--t);margin-top:3px;word-break:break-word}
#aprs-body .pkt-data{color:var(--tm);margin-top:2px;font-size:9px}

/* ═══ 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 */
.sdr-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){
  .sdr-grid{grid-template-columns:minmax(0,1fr) !important;height:auto !important;gap:12px !important}
  .sdr-side{display:contents}
  .sdr-side > .card{order:2;margin-bottom:0 !important}
  .sdr-side > .card:first-child{order:0}
  .sdr-map-card{order:1;height:60vh;min-height:360px;margin-bottom:0}
  .sdr-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}
  .node-row{overflow-wrap:anywhere}
  #tuner-panel{left:8px;right:8px;bottom:8px;width:auto;height:min(480px,calc(100vh - var(--so-nav-h,62px) - 16px))}
  #tuner-presets button{min-height:34px}
  #tuner-custom input,#tuner-custom select,#tuner-custom button{min-height:36px}
  #tuner-custom input{min-width:90px}
  #tuner-custom select{flex:0 0 auto;width:auto}
  #tuner-hint{width:auto;left:10px}
  #aprs-panel{left:8px;right:8px;bottom:8px;width:auto;max-height:70vh}
  #aprs-body .lbl{min-width:80px}
}
@media (max-width:600px){
  .sdr-side > .card{padding:14px}
}
{% endblock %}
{% block content %}
<div class="section-hdr">Software-Defined Radio Network</div>
<div class="sdr-grid" style="display:grid;grid-template-columns:360px 1fr;gap:16px;height:calc(100vh - 140px)">
  <div class="sdr-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-kiwi" class="layer-row active" onclick="toggleLayer('kiwi')">
        <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"/><circle cx="12" cy="12" r="1.5"/><path d="M19 5a10 10 0 0 1 0 14"/></svg> KiwiSDR Nodes</span><span class="cnt" id="cnt-kiwi">—</span>
      </div>
      <div id="layer-aprs" class="layer-row" onclick="toggleLayer('aprs')">
        <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> APRS Stations</span><span class="cnt" id="cnt-aprs">—</span>
      </div>
      <button class="btn btn-p" onclick="loadKiwi()" style="width:100%;margin-top:10px"> Refresh nodes</button>
      <button class="btn btn-outline" onclick="tuneNearestKiwi()" style="width:100%;margin-top:6px;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"><circle cx="12" cy="12" r="9"/><circle cx="12" cy="12" r="4"/><path d="M12 2v3M12 19v3M2 12h3M19 12h3"/></svg> Tune nearest active</button>
    </div>

    <div class="card" style="margin-bottom:12px">
      <div style="font-size:10px;color:var(--tm);letter-spacing:2px;margin-bottom:10px">APRS — CENTER</div>
      <input id="a-lat" placeholder="Latitude" style="margin-bottom:6px">
      <input id="a-lon" placeholder="Longitude" style="margin-bottom:8px">
      <div style="display:flex;gap:6px">
        <button class="btn btn-outline" onclick="loadAprs()" style="flex:1;padding:6px 10px;font-size:11px">Load</button>
        <button class="btn btn-g" onclick="aprsGeo()" 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">Stations within ~280 km of center point. Uses known digipeater seed list.</div>
    </div>

    <div class="card" style="margin-bottom:12px">
      <div style="font-size:10px;color:var(--tm);letter-spacing:2px;margin-bottom:10px">APRS — CALLSIGN LOOKUP</div>
      <input id="a-callsign" placeholder="TA1OS, JA1YCA, W1AW..." style="margin-bottom:8px;text-transform:uppercase">
      <button class="btn btn-p" onclick="searchCallsign()" style="width:100%;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"><circle cx="11" cy="11" r="7"/><path d="M20 20l-4-4"/></svg> Search</button>
      <div style="font-size:10px;color:var(--tm);margin-top:8px;line-height:1.5">Up to 20 callsigns, comma-separated. Shows live APRS position anywhere on Earth.</div>
      <div id="callsign-result" style="margin-top:10px;font-size:11px;color:var(--td);display:none"></div>
    </div>

    <div class="card" style="margin-bottom:12px">
      <div style="font-size:10px;color:var(--tm);letter-spacing:2px;margin-bottom:10px">Filter nodes</div>
      <input id="node-filter" placeholder="callsign, location, band..." style="margin-bottom:8px">
      <select id="node-country" style="width:100%;margin-bottom:8px">
        <option value="">All countries</option>
      </select>
      <select id="node-sort" style="width:100%">
        <option value="users">Sort: Active users</option>
        <option value="name">Sort: Name</option>
        <option value="loc">Sort: Location</option>
        <option value="country">Sort: Country</option>
      </select>
    </div>

    <div class="card" style="padding:12px">
      <div style="font-size:10px;color:var(--tm);letter-spacing:2px;margin-bottom:10px">Node list</div>
      <div id="node-list" style="display:flex;flex-direction:column;gap:6px;max-height:340px;overflow-y:auto">
        <div style="color:var(--tm);font-size:11px;text-align:center;padding:16px">Loading…</div>
      </div>
    </div>
  </div>

  <div class="card sdr-map-card" style="padding:0;overflow:hidden;position:relative">
    <div id="sdr-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="SDR node 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 reception 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>

<!-- Floating tuner panel -->
<div id="tuner-panel">
  <div id="tuner-hdr">
    <div class="ttl" id="tuner-title">Radio tuner</div>
    <button class="x" onclick="closeTuner()">✕</button>
  </div>
  <div id="tuner-freqbar">
    <div id="tuner-freq">— set frequency below —</div>
    <div id="tuner-presets">
      <button onclick="retune(5000,'am')"   title="WWV 5 MHz">WWV 5</button>
      <button onclick="retune(10000,'am')"  title="WWV 10 MHz">WWV 10</button>
      <button onclick="retune(15000,'am')"  title="WWV 15 MHz">WWV 15</button>
      <button onclick="retune(7200,'lsb')"  title="40m LSB">40m</button>
      <button onclick="retune(14200,'usb')" title="20m USB">20m</button>
      <button onclick="retune(12095,'am')"  title="BBC World Service">BBC</button>
      <button onclick="retune(8891,'usb')"  title="Aircraft HF">AIR</button>
      <button onclick="retune(4625,'usb')"  title="The Buzzer UVB-76">UVB-76</button>
    </div>
    <div id="tuner-custom">
      <input type="number" id="tuner-custom-f" placeholder="kHz" step="1">
      <select id="tuner-custom-m">
        <option value="am">AM</option>
        <option value="lsb">LSB</option>
        <option value="usb">USB</option>
        <option value="cw">CW</option>
        <option value="fm">FM</option>
      </select>
      <button onclick="retuneCustom()">Tune</button>
    </div>
  </div>
  <div id="tuner-iframe-wrap">
    <iframe id="tuner-iframe" src="about:blank" allow="autoplay" sandbox="allow-scripts allow-same-origin allow-forms allow-popups"></iframe>
    <div id="tuner-overlay"></div>
    <div id="tuner-hint">
      <div class="h-hdr">
        <span class="h-title"><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="M4 15v-3a8 8 0 0 1 16 0v3"/><rect x="3" y="14" width="4" height="6" rx="1"/><rect x="17" y="14" width="4" height="6" rx="1"/></svg> Audio start</span>
        <button class="h-x" onclick="dismissAudioHint(false)">✕</button>
      </div>
      <div class="h-body">
        <div style="margin-bottom:8px"><b>1.</b> Close the <span class="h-kbd">Welcome</span> panel if it appears (top-right <span class="h-kbd">✕</span>).</div>
        <div><b>2.</b> Press the <span class="h-kbd">▶</span> audio button in the control panel to start sound. Browser security requires this first click.</div>
      </div>
      <button class="h-ok" onclick="dismissAudioHint(true)">GOT IT — DON'T SHOW AGAIN</button>
    </div>
  </div>
</div>

<!-- Floating APRS detail panel -->
<div id="aprs-panel">
  <div id="aprs-hdr">
    <div class="ttl" id="aprs-title">APRS station</div>
    <button class="x" onclick="closeAprsDetail()">✕</button>
  </div>
  <div id="aprs-body"></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>
// ═══ Map init ═══
const sdrMap = L.map('sdr-map', {worldCopyJump: true}).setView([25, 10], 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) sdrMap.removeLayer(currentTileLayer);
  currentTileLayer = L.tileLayer(config.url, {
    attribution: config.attr,
    maxZoom: config.maxZoom,
    subdomains: config.subdomains
  }).addTo(sdrMap);
  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 kiwiLayer = L.layerGroup().addTo(sdrMap);
const aprsLayer = L.layerGroup();
const layerState = {kiwi: true, aprs: false};

let allNodes = [];
let allAprs  = [];

// ═══════════════════════════════════════════════════════════════
//  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();

// Heatmap across KiwiSDR + APRS nodes
function buildHeatmap() {
  const points = [];
  allNodes.forEach(n => {
    if (typeof n.lat !== 'number' || typeof n.lon !== 'number') return;
    // Active receivers (users > 0) glow hotter
    const intensity = n.users > 0 ? 1.0 : 0.4;
    points.push([n.lat, n.lon, intensity]);
  });
  allAprs.forEach(s => {
    if (typeof s.lat !== 'number' || typeof s.lon !== 'number') return;
    points.push([s.lat, s.lon, 0.6]);
  });
  if (heatLayer) { sdrMap.removeLayer(heatLayer); heatLayer = null; }
  if (points.length === 0) return;
  heatLayer = L.heatLayer(points, {
    radius: 26, blur: 20, maxZoom: 10,
    gradient: {0.2:'#3B0764', 0.4:'#7C3AED', 0.6:'#A78BFA', 0.8:'#FBBF24', 1.0:'#F87171'}
  });
  if (overlayState.heatmap) heatLayer.addTo(sdrMap);
}

// RF coverage: propagation rings around active receivers
function buildRfCoverage() {
  rfLayer.clearLayers();
  allNodes.forEach(n => {
    if (typeof n.lat !== 'number' || typeof n.lon !== 'number') return;
    // KiwiSDR HF receivers have massive reception footprints (skywave propagation)
    // Active nodes: ~500 km circle; idle: ~250 km circle
    const radiusM = n.users > 0 ? 500000 : 250000;
    const col = n.users > 0 ? '#FBBF24' : '#A78BFA';
    L.circle([n.lat, n.lon], {
      radius: radiusM,
      color: col,
      weight: 0.8,
      opacity: 0.4,
      fillColor: col,
      fillOpacity: 0.05,
      dashArray: '3,4',
      interactive: false
    }).addTo(rfLayer);
  });
  allAprs.forEach(s => {
    if (typeof s.lat !== 'number' || typeof s.lon !== 'number') return;
    // APRS VHF range ~ 50-80 km for fixed, up to 200 km for high digipeaters
    L.circle([s.lat, s.lon], {
      radius: 60000,
      color: '#4ADE80',
      weight: 0.6,
      opacity: 0.35,
      fillColor: '#4ADE80',
      fillOpacity: 0.04,
      dashArray: '2,3',
      interactive: false
    }).addTo(rfLayer);
  });
}

// MGRS-style grid with GZD labels
function buildMgrsGrid() {
  mgrsLayer.clearLayers();
  const bounds = sdrMap.getBounds();
  const zoom = sdrMap.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 kiwi = sdrMap.hasLayer(kiwiLayer) ? kiwiLayer.getLayers().length : 0;
  const aprs = sdrMap.hasLayer(aprsLayer) ? aprsLayer.getLayers().length : 0;
  return ['KIWI · ' + kiwi, 'APRS · ' + aprs];
}
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 = sdrMap;
  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)
sdrMap.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 { sdrMap.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(sdrMap); }
    else if (heatLayer) { sdrMap.removeLayer(heatLayer); }
  }
  if (name === 'mgrs') {
    if (overlayState.mgrs) { buildMgrsGrid(); mgrsLayer.addTo(sdrMap); }
    else mgrsLayer.remove();
  }
  if (name === 'rf') {
    if (overlayState.rf) { buildRfCoverage(); rfLayer.addTo(sdrMap); }
    else rfLayer.remove();
  }
  if (name === 'drone') {
    const hud = document.getElementById('drone-hud');
    const mapEl = document.getElementById('sdr-map');
    hud.classList.toggle('active', overlayState.drone);
    mapEl.classList.toggle('sdr-map-drone', overlayState.drone);
    if (overlayState.drone) updateDroneHud();
    setHudClock(overlayState.drone);
  }
  try { localStorage.setItem('sigops_overlay_state', JSON.stringify(overlayState)); } catch(e){}
}

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

// ═══ Layer toggle ═══
function toggleLayer(name) {
  layerState[name] = !layerState[name];
  document.getElementById('layer-' + name).classList.toggle('active', layerState[name]);
  const target = name === 'kiwi' ? kiwiLayer : aprsLayer;
  if (layerState[name]) target.addTo(sdrMap); else sdrMap.removeLayer(target);
  if (name === 'aprs' && layerState.aprs && aprsLayer.getLayers().length === 0) {
    // If user hasn't entered coords, prompt via geolocation
    if (!document.getElementById('a-lat').value) aprsGeo();
    else loadAprs();
  }
}

// ═══ KiwiSDR ═══
function kiwiIcon(users) {
  const activeCol = users > 0 ? '#FBBF24' : '#A78BFA';
  return {
    radius: users > 0 ? 7 : 5,
    fillColor: activeCol,
    color: activeCol,
    fillOpacity: 0.75,
    weight: 1.5
  };
}

// Nodes rendered on the map — popup buttons reference them by index only
// (never inline attacker-controlled names/URLs into onclick JS strings).
let _kiwiMapNodes = [];
function openTunerIdx(i, freqKHz, mode) {
  const n = _kiwiMapNodes[i];
  if (!n) return;
  if (freqKHz) openTuner(encodeURIComponent(n.url || ''), n.name || '', freqKHz, mode);
  else         openTuner(encodeURIComponent(n.url || ''), n.name || '');
}

function renderKiwiMap(nodes) {
  kiwiLayer.clearLayers();
  _kiwiMapNodes = nodes.slice();
  nodes.forEach((n, i) => {
    const mk = L.circleMarker([n.lat, n.lon], kiwiIcon(n.users));
    // Build a mini quick-tune bar for the popup
    const qt = (label, f, mode) =>
      `<button onclick="openTunerIdx(${i}, ${f}, '${mode}')" title="${f/1000} kHz ${mode.toUpperCase()}"
        style="flex:1;min-width:0;padding:3px 4px;background:rgba(139,92,246,0.1);color:#A78BFA;border:1px solid rgba(139,92,246,0.3);border-radius:3px;cursor:pointer;font-family:monospace;font-size:10px">${label}</button>`;
    const presets = `
      <div style="margin-top:8px;display:flex;gap:3px;flex-wrap:wrap">
        ${qt('WWV 10',  10000, 'am')}
        ${qt('BBC 12',  12095, 'am')}
        ${qt('40m',     7200,  'lsb')}
        ${qt('20m',     14200, 'usb')}
        ${qt('AIR',     8891,  'usb')}
      </div>`;
    mk.bindPopup(`<div style="font-family:monospace;font-size:11px;min-width:240px">
      <b style="color:#A78BFA;font-size:12px">${escapeHtml(n.name)}</b><br>
      ${n.loc ? '' + escapeHtml(n.loc) + '<br>' : ''}
      ${n.antenna ? '' + escapeHtml(n.antenna) + '<br>' : ''}
      ${n.bands ? 'Bands: ' + escapeHtml(n.bands) + '<br>' : ''}
      Users: ${escapeHtml(n.users)}/${escapeHtml(n.users_max || '?')}<br>
      ${n.grid ? 'Grid: ' + escapeHtml(n.grid) + '<br>' : ''}
      <button onclick="openTunerIdx(${i})"
              style="width:100%;margin-top:8px;background:rgba(139,92,246,0.15);color:#A78BFA;border:1px solid rgba(139,92,246,0.4);border-radius:4px;padding:6px 10px;cursor:pointer;font-family:Rajdhani,sans-serif;font-weight:700;letter-spacing:1.5px;font-size:11px">▶ TUNE IN</button>
      <div style="font-size:9px;color:var(--tm);margin-top:6px;letter-spacing:1px">QUICK TUNE →</div>
      ${presets}
    </div>`);
    mk.addTo(kiwiLayer);
  });
  document.getElementById('cnt-kiwi').textContent = nodes.length;
}

function renderNodeList() {
  const q = (document.getElementById('node-filter').value || '').toLowerCase();
  const sortMode = document.getElementById('node-sort').value;
  const countryFilter = document.getElementById('node-country').value;
  let list = allNodes.filter(n => {
    if (countryFilter && n.country !== countryFilter) return false;
    if (!q) return true;
    return (n.name + ' ' + n.loc + ' ' + n.bands + ' ' + n.antenna + ' ' + (n.country || '')).toLowerCase().includes(q);
  });
  list.sort((a, b) => {
    if (sortMode === 'users') return (b.users || 0) - (a.users || 0);
    if (sortMode === 'name') return (a.name || '').localeCompare(b.name || '');
    if (sortMode === 'country') return (a.country || '').localeCompare(b.country || '');
    return (a.loc || '').localeCompare(b.loc || '');
  });
  const el = document.getElementById('node-list');
  if (list.length === 0) {
    el.innerHTML = '<div style="color:var(--tm);font-size:11px;text-align:center;padding:16px">No matching nodes</div>';
    return;
  }
  el.innerHTML = list.slice(0, 200).map((n, idx) => {
    const realIdx = allNodes.indexOf(n);
    const usersCol = n.users > 0 ? '#FBBF24' : 'var(--tm)';
    return `<div class="node-row" onclick="focusNode(${realIdx})">
      <div style="display:flex;justify-content:space-between;margin-bottom:4px">
        <span style="font-family:'Rajdhani',sans-serif;font-weight:700;color:var(--t);font-size:12px;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">${escapeHtml(n.name)}</span>
        <span style="color:${usersCol};font-size:10px;font-family:monospace">${escapeHtml(n.users || 0)}</span>
      </div>
      ${n.loc ? `<div style="font-size:10px;color:var(--td);overflow:hidden;text-overflow:ellipsis;white-space:nowrap">${escapeHtml(n.loc)}</div>` : ''}
      ${n.bands ? `<div style="font-size:10px;color:var(--tm);margin-top:2px">${escapeHtml(n.bands)}</div>` : ''}
    </div>`;
  }).join('');
}

function populateCountryDropdown() {
  const countries = {};
  allNodes.forEach(n => {
    if (n.country) countries[n.country] = (countries[n.country] || 0) + 1;
  });
  const sorted = Object.entries(countries).sort((a, b) => b[1] - a[1]);
  const sel = document.getElementById('node-country');
  // Preserve current selection
  const current = sel.value;
  sel.innerHTML = `<option value="">All countries (${allNodes.length})</option>` +
    sorted.map(([c, n]) => `<option value="${escapeHtml(c)}" ${c === current ? 'selected' : ''}>${escapeHtml(c)} (${n})</option>`).join('');
}

function focusNode(idx) {
  const n = allNodes[idx];
  if (!n) return;
  sdrMap.setView([n.lat, n.lon], 10);
  kiwiLayer.eachLayer(l => {
    const ll = l.getLatLng();
    if (Math.abs(ll.lat - n.lat) < 0.0001 && Math.abs(ll.lng - n.lon) < 0.0001) l.openPopup();
  });
}

async function loadKiwi() {
  const cntEl = document.getElementById('cnt-kiwi');
  const listEl = document.getElementById('node-list');
  cntEl.textContent = 'loading…';
  listEl.innerHTML = '<div style="color:#A78BFA;font-size:11px;text-align:center;padding:16px;font-family:Rajdhani,sans-serif;letter-spacing:2px">◌ FETCHING KIWISDR.COM/PUBLIC/</div>';
  try {
    const res = await fetch('/api/sdr/kiwisdr');
    let data = {};
    try { data = await res.json(); } catch (_) { data = {}; }

    // Backend may return {error, nodes:[]} with 502 when scraping fails
    if (!res.ok || data.error) {
      console.error('[KiwiSDR] backend error:', data.error || ('HTTP ' + res.status));
      cntEl.textContent = 'error';
      listEl.innerHTML = `<div style="color:#F87171;font-size:11px;padding:16px;line-height:1.7">
        <div style="font-family:'Rajdhani',sans-serif;letter-spacing:2px;font-weight:700;margin-bottom:6px">KIWISDR FEED UNAVAILABLE</div>
        <div style="color:var(--tm);font-size:10px;margin-bottom:6px">${escapeHtml(data.error || ('HTTP ' + res.status))}</div>
        <div style="color:var(--td);font-size:10px">
          The public KiwiSDR directory (kiwisdr.com/public/) may be:
          <ul style="margin:6px 0 0;padding-left:16px">
            <li>Temporarily down or rate-limiting the server</li>
            <li>Blocked by the hosting network (DPI / firewall)</li>
            <li>Returning unexpected HTML (parser mismatch)</li>
          </ul>
        </div>
      </div>`;
      return;
    }

    allNodes = Array.isArray(data.nodes) ? data.nodes : [];
    cntEl.textContent = allNodes.length;

    if (allNodes.length === 0) {
      listEl.innerHTML = `<div style="color:var(--tm);font-size:11px;padding:16px;text-align:center;line-height:1.7">
        <div style="font-size:22px;opacity:0.2;margin-bottom:8px"></div>
        <div style="font-family:'Rajdhani',sans-serif;letter-spacing:2px">NO NODES PARSED</div>
        <div style="font-size:10px;margin-top:6px">The HTML was received but no receivers could be extracted. The page layout may have changed.</div>
      </div>`;
      return;
    }

    renderKiwiMap(allNodes);
    populateCountryDropdown();
    renderNodeList();
    // Rebuild overlays that depend on node data
    if (overlayState.heatmap) { buildHeatmap(); if (heatLayer) heatLayer.addTo(sdrMap); }
    if (overlayState.rf)      { buildRfCoverage(); }
  } catch (e) {
    console.error('[KiwiSDR] fetch exception:', e);
    cntEl.textContent = 'fail';
    listEl.innerHTML = `<div style="color:#F87171;font-size:11px;padding:16px">
      <div style="font-family:'Rajdhani',sans-serif;letter-spacing:2px;font-weight:700">✗ CONNECTION ERROR</div>
      <div style="color:var(--tm);font-size:10px;margin-top:4px">${escapeHtml(e.message || e)}</div>
    </div>`;
  }
}

// ═══ APRS ═══
function aprsGeo() {
  if (!navigator.geolocation) return;
  navigator.geolocation.getCurrentPosition(p => {
    document.getElementById('a-lat').value = p.coords.latitude.toFixed(5);
    document.getElementById('a-lon').value = p.coords.longitude.toFixed(5);
    loadAprs();
  });
}

async function loadAprs() {
  const latEl = document.getElementById('a-lat');
  const lonEl = document.getElementById('a-lon');
  const lat = parseFloat(latEl.value);
  const lon = parseFloat(lonEl.value);
  if (isNaN(lat) || isNaN(lon)) {
    // Highlight empty input(s)
    [latEl, lonEl].forEach(el => {
      if (isNaN(parseFloat(el.value))) {
        el.style.borderColor = '#F87171';
        setTimeout(() => { el.style.borderColor = ''; }, 1200);
      }
    });
    (isNaN(lat) ? latEl : lonEl).focus();
    return;
  }
  document.getElementById('cnt-aprs').textContent = 'loading…';
  aprsLayer.clearLayers();
  if (!layerState.aprs) toggleLayer('aprs');
  try {
    const res = await fetch(`/api/aprs/stations?lat=${lat}&lon=${lon}`);
    if (!res.ok) throw new Error('HTTP ' + res.status);
    const data = await res.json();
    allAprs = Array.isArray(data.stations) ? data.stations : [];
    allAprs.forEach(s => {
      // Classify by type/symbol prefix
      const isMobile = s.speed && s.speed > 1;
      const col = isMobile ? '#22D3EE' : '#4ADE80';
      L.circleMarker([s.lat, s.lon], {
        radius: isMobile ? 5 : 4,
        fillColor: col, color: col, fillOpacity: 0.6, weight: 1
      }).bindPopup(`<div style="font-family:monospace;font-size:11px;min-width:180px">
        <b style="color:${col};font-size:12px">${escapeHtml(s.callsign)}</b><br>
        ${s.comment ? escapeHtml(s.comment) + '<br>' : ''}
        ${s.speed ? 'Speed: ' + escapeHtml(s.speed) + ' km/h<br>' : ''}
        ${s.altitude ? 'Alt: ' + escapeHtml(s.altitude) + ' m<br>' : ''}
        ${s.course != null ? 'Course: ' + escapeHtml(s.course) + '°<br>' : ''}
        ${s.path ? '<span style="color:#888">Path: ' + escapeHtml(s.path) + '</span>' : ''}
      </div>`).addTo(aprsLayer);
    });
    document.getElementById('cnt-aprs').textContent = allAprs.length;
    if (allAprs.length > 0) sdrMap.setView([lat, lon], 7);
    // Rebuild overlays that include APRS data
    if (overlayState.heatmap) { buildHeatmap(); if (heatLayer) heatLayer.addTo(sdrMap); }
    if (overlayState.rf)      { buildRfCoverage(); }
  } catch (e) {
    document.getElementById('cnt-aprs').textContent = 'fail';
  }
}

// ═══ APRS Callsign Lookup ═══
async function searchCallsign() {
  const input = document.getElementById('a-callsign');
  const name = (input.value || '').trim().toUpperCase();
  if (!name) {
    input.style.borderColor = '#F87171';
    input.focus();
    setTimeout(() => { input.style.borderColor = ''; }, 1200);
    return;
  }
  const resultEl = document.getElementById('callsign-result');
  resultEl.style.display = 'block';
  resultEl.innerHTML = '<span style="color:var(--p)">searching…</span>';

  try {
    const res = await fetch(`/api/aprs/callsign?name=${encodeURIComponent(name)}`);
    let data = {};
    try { data = await res.json(); } catch (_) { data = {}; }

    if (data.error || !res.ok) {
      resultEl.innerHTML = `<span style="color:var(--danger)">✗ ${escapeHtml(data.error || ('HTTP ' + res.status))}</span>`;
      return;
    }

    const found    = Array.isArray(data.stations) ? data.stations : [];
    const notFound = Array.isArray(data.not_found) ? data.not_found : [];

    if (found.length === 0) {
      resultEl.innerHTML = `<span style="color:var(--tm)">No results. Tried: ${notFound.map(escapeHtml).join(', ')}</span>`;
      return;
    }

    // Activate APRS layer on map
    if (!layerState.aprs) {
      layerState.aprs = true;
      aprsLayer.addTo(sdrMap);
      document.getElementById('layer-aprs').classList.add('active');
    }

    // Drop markers for each found station
    found.forEach(s => {
      const isMobile = s.speed && s.speed > 1;
      const col = isMobile ? '#22D3EE' : '#FBBF24';
      const sIdx = _aprsResults.length;
      _aprsResults.push(s);
      const marker = L.circleMarker([s.lat, s.lon], {
        radius: 7, fillColor: col, color: col, fillOpacity: 0.85, weight: 2
      }).bindPopup(`<div style="font-family:monospace;font-size:11px;min-width:200px">
        <b style="color:${col};font-size:13px">${escapeHtml(s.callsign)}</b><br>
        ${s.comment ? escapeHtml(s.comment) + '<br>' : ''}
        Coords: ${s.lat.toFixed(4)}, ${s.lon.toFixed(4)}<br>
        ${s.speed ? 'Speed: ' + escapeHtml(s.speed) + ' km/h<br>' : ''}
        ${s.altitude ? 'Alt: ' + escapeHtml(s.altitude) + ' m<br>' : ''}
        ${s.course != null ? 'Course: ' + escapeHtml(s.course) + '°<br>' : ''}
        <button onclick="openAprsDetail(${sIdx})"
                style="width:100%;margin-top:8px;background:rgba(251,191,36,0.15);color:#FBBF24;border:1px solid rgba(251,191,36,0.4);border-radius:4px;padding:6px 10px;cursor:pointer;font-family:Rajdhani,sans-serif;font-weight:700;letter-spacing:1.5px;font-size:11px">DETAILS</button>
      </div>`);
      _aprsResultMarkers[sIdx] = marker;
      marker.addTo(aprsLayer);
    });

    // Focus map on first result
    const first = found[0];
    sdrMap.setView([first.lat, first.lon], 10);

    // Update result panel
    let html = `<span style="color:#4ADE80">✓ Found ${found.length}:</span><br>`;
    html += found.map(s =>
      `<div style="margin-top:4px"><b style="color:var(--t)">${escapeHtml(s.callsign)}</b>
       <span style="color:var(--tm)"> @ ${s.lat.toFixed(3)}, ${s.lon.toFixed(3)}</span></div>`
    ).join('');
    if (notFound.length > 0) {
      html += `<br><span style="color:var(--tm)">Not found: ${notFound.map(escapeHtml).join(', ')}</span>`;
    }
    resultEl.innerHTML = html;

  } catch (e) {
    resultEl.innerHTML = `<span style="color:var(--danger)">Request failed: ${escapeHtml(String(e))}</span>`;
  }
}

// Enter key support
document.getElementById('a-callsign').addEventListener('keydown', e => {
  if (e.key === 'Enter') searchCallsign();
});

// ═══ Tuner ═══
// Remember the last tuner URL so the mini-bar can re-tune without re-opening
let _tunerBaseUrl = null;
let _tunerName    = '';
let _tunerLoadTimer = null;
let _tunerHintTimer = null;

function _showTunerOverlay(state, msg, sub) {
  const ov = document.getElementById('tuner-overlay');
  const tryBtn = (state === 'error')
    ? `<button onclick="tryNextActiveNode()" style="margin-top:14px;background:rgba(139,92,246,0.2);color:#A78BFA;border:1px solid rgba(139,92,246,0.5);border-radius:4px;padding:6px 14px;cursor:pointer;font-family:Rajdhani,sans-serif;font-size:11px;font-weight:700;letter-spacing:1.5px">⟳ TRY ANOTHER NODE</button>`
    : '';
  const states = {
    loading: `<div class="spinner"></div><div class="msg">${escapeHtml(msg || 'Loading…')}</div><div class="sub">${escapeHtml(sub || '')}</div>`,
    error:   `<div class="ic"></div><div class="msg">${escapeHtml(msg || 'Connection failed')}</div><div class="sub">${escapeHtml(sub || '')}</div>${tryBtn}`,
    info:    `<div class="ic">ℹ</div><div class="msg">${escapeHtml(msg || '')}</div><div class="sub">${escapeHtml(sub || '')}</div>`,
  };
  ov.innerHTML = states[state] || states.info;
  ov.classList.add('show');
}

function tryNextActiveNode() {
  // Pick a different node with active users (more likely to be online)
  if (!allNodes || allNodes.length === 0) {
    _showTunerOverlay('info', 'No nodes loaded', 'Wait for the node list to load first.');
    return;
  }
  const currentUrl = _tunerBaseUrl;
  // Prefer nodes with active users AND free slots AND different URL
  const candidates = allNodes.filter(n =>
    n.url !== currentUrl &&
    n.users >= 1 &&                          // somebody is connected → it's alive
    (n.users_max || 4) - n.users >= 1       // has room for one more
  );
  if (candidates.length === 0) {
    _showTunerOverlay('info', 'No alternative nodes available',
      'All other nodes are full or unreachable. Try loading the list again.');
    return;
  }
  // Pick randomly from top 10 by activity
  candidates.sort((a, b) => (b.users || 0) - (a.users || 0));
  const pick = candidates[Math.floor(Math.random() * Math.min(10, candidates.length))];
  openTuner(encodeURIComponent(pick.url), pick.name);
}

// Find the nearest active KiwiSDR to the user's location and tune it.
// Uses the user's saved coords (sigops_last_coords from localStorage) if available,
// otherwise prompts for browser geolocation.
function tuneNearestKiwi() {
  if (!allNodes || allNodes.length === 0) {
    // Load first then retry
    loadKiwi().then(() => { if (allNodes && allNodes.length) tuneNearestKiwi(); });
    return;
  }

  const doPick = (userLat, userLon) => {
    // Haversine distance
    const dist = (la1, lo1, la2, lo2) => {
      const R = 6371, toRad = d => d * Math.PI / 180;
      const dLa = toRad(la2 - la1), dLo = toRad(lo2 - lo1);
      const a = Math.sin(dLa/2)**2 + Math.cos(toRad(la1))*Math.cos(toRad(la2))*Math.sin(dLo/2)**2;
      return 2 * R * Math.asin(Math.sqrt(a));
    };
    // Filter: has free slot, not full
    const viable = allNodes
      .filter(n => (n.users_max || 4) - (n.users || 0) >= 1)
      .map(n => ({...n, d: dist(userLat, userLon, n.lat, n.lon)}))
      .sort((a, b) => a.d - b.d);
    if (viable.length === 0) {
      _showTunerOverlay('info', 'No available nodes', 'All KiwiSDR nodes are currently full.');
      document.getElementById('tuner-panel').classList.add('open');
      return;
    }
    // Prefer nodes with at least 1 user (= likely online) if one is within top 5 nearest
    const nearest5 = viable.slice(0, 5);
    const active = nearest5.filter(n => n.users >= 1);
    const pick = active.length ? active[0] : viable[0];
    console.log(`[KiwiSDR] Nearest active: ${pick.name} @ ${pick.d.toFixed(0)}km (users=${pick.users}/${pick.users_max})`);
    sdrMap.setView([pick.lat, pick.lon], 6);
    openTuner(encodeURIComponent(pick.url), pick.name);
  };

  // Try saved coords first
  try {
    const saved = JSON.parse(localStorage.getItem('sigops_last_coords') || 'null');
    if (saved && saved.lat != null && saved.lon != null) {
      doPick(saved.lat, saved.lon);
      return;
    }
  } catch (e) {}

  // Fall back to browser geolocation
  if (!navigator.geolocation) {
    _showTunerOverlay('info', 'Location unavailable', 'Your browser does not support geolocation. Pick a node manually from the map.');
    document.getElementById('tuner-panel').classList.add('open');
    return;
  }
  navigator.geolocation.getCurrentPosition(
    p => {
      // Save for next time
      try { localStorage.setItem('sigops_last_coords', JSON.stringify({lat: p.coords.latitude, lon: p.coords.longitude})); } catch (e) {}
      doPick(p.coords.latitude, p.coords.longitude);
    },
    err => {
      _showTunerOverlay('info', 'Location denied', 'Allow location access or click a node on the map.');
      document.getElementById('tuner-panel').classList.add('open');
    },
    {timeout: 5000}
  );
}

function _hideTunerOverlay() {
  document.getElementById('tuner-overlay').classList.remove('show');
}

function _loadIframe(url, nodeName) {
  const iframe = document.getElementById('tuner-iframe');
  _showTunerOverlay('loading', 'Connecting to ' + nodeName, url);

  // Clear previous timer
  if (_tunerLoadTimer) clearTimeout(_tunerLoadTimer);
  if (_tunerHintTimer) clearTimeout(_tunerHintTimer);

  // iframe.onload fires whether content loaded OR blocked — we can't tell the difference
  // directly due to cross-origin restrictions. But ERR_CONNECTION_RESET fires NO onload at all.
  // So we use a timeout: if onload doesn't fire in 12s, assume the node is unreachable.
  let loaded = false;
  iframe.onload = () => {
    loaded = true;
    if (_tunerLoadTimer) clearTimeout(_tunerLoadTimer);
    _hideTunerOverlay();
    // Show the audio start hint 3 seconds after the iframe finishes loading —
    // but only if the user hasn't dismissed it in a previous session.
    if (!localStorage.getItem('sigops_kiwi_hint_seen')) {
      _tunerHintTimer = setTimeout(_showAudioHint, 3000);
    }
  };
  iframe.onerror = () => {
    if (_tunerLoadTimer) clearTimeout(_tunerLoadTimer);
    _showTunerOverlay('error',
      'Could not connect to this node',
      'The KiwiSDR appears offline or unreachable. Try another node from the map.'
    );
  };
  _tunerLoadTimer = setTimeout(() => {
    if (!loaded) {
      _showTunerOverlay('error',
        'Connection timed out',
        'The KiwiSDR at ' + nodeName + ' did not respond within 12 seconds. It may be offline, overloaded, or blocking iframe embedding. Pick another node from the map.'
      );
    }
  }, 12000);

  iframe.src = url;
}

function _showAudioHint() {
  const hint = document.getElementById('tuner-hint');
  if (!hint) return;
  hint.classList.add('show');
  // Auto-dismiss after 8 seconds
  setTimeout(() => {
    if (hint.classList.contains('show')) hint.classList.remove('show');
  }, 8000);
}

function dismissAudioHint(remember) {
  const hint = document.getElementById('tuner-hint');
  if (hint) hint.classList.remove('show');
  if (remember) localStorage.setItem('sigops_kiwi_hint_seen', '1');
  if (_tunerHintTimer) { clearTimeout(_tunerHintTimer); _tunerHintTimer = null; }
}

// Build a KiwiSDR URL with frequency/mode + UI keyboard shortcuts.
// KiwiSDR URL params documented at kiwisdr.com: `f=` for frequency/mode/zoom,
// `keys=` (since v1.274) sends keystrokes on load. Key 'x' hides the main
// control panel — nice for a cleaner iframe. We DO NOT hide it here because
// the user needs the ▶ audio start button which is inside that panel.
function _buildKiwiUrl(baseUrl, freqKHz, mode) {
  const params = [];
  if (freqKHz && mode) params.push('f=' + freqKHz + mode + 'z8');
  if (params.length === 0) return baseUrl;
  const sep = baseUrl.includes('?') ? '&' : '?';
  return baseUrl + sep + params.join('&');
}

function openTuner(encUrl, name, freqKHz, mode) {
  let baseUrl = '';
  try { baseUrl = String(decodeURIComponent(encUrl || '')).trim(); } catch (_) { baseUrl = ''; }
  // Only absolute http(s) receiver URLs from the backend node list may reach the iframe
  // (KiwiSDR receivers are usually plain http://). Blocks javascript:/data: etc.
  if (!/^https?:\/\//i.test(baseUrl) || safeUrl(baseUrl) === '#') {
    document.getElementById('tuner-panel').classList.add('open');
    _showTunerOverlay('error', 'Invalid receiver URL', 'This node does not have a valid http(s) address.');
    return;
  }
  name = String(name == null ? '' : name);
  _tunerBaseUrl = baseUrl;
  _tunerName    = name;
  const targetUrl = _buildKiwiUrl(baseUrl, freqKHz, mode);
  document.getElementById('tuner-title').textContent = '' + name;
  document.getElementById('tuner-panel').classList.add('open');
  if (freqKHz) {
    document.getElementById('tuner-freq').textContent =
      (freqKHz >= 1000 ? (freqKHz/1000).toFixed(3) + ' MHz' : freqKHz + ' kHz') + ' ' + mode.toUpperCase();
  } else {
    document.getElementById('tuner-freq').textContent = '— set frequency below —';
  }
  _loadIframe(targetUrl, name);
}

function closeTuner() {
  document.getElementById('tuner-panel').classList.remove('open');
  const iframe = document.getElementById('tuner-iframe');
  iframe.onload = null;
  iframe.onerror = null;
  iframe.src = 'about:blank';
  if (_tunerLoadTimer) { clearTimeout(_tunerLoadTimer); _tunerLoadTimer = null; }
  if (_tunerHintTimer) { clearTimeout(_tunerHintTimer); _tunerHintTimer = null; }
  const hint = document.getElementById('tuner-hint');
  if (hint) hint.classList.remove('show');
  _hideTunerOverlay();
  _tunerBaseUrl = null;
  _tunerName = '';
}

function retune(freqKHz, mode) {
  if (!_tunerBaseUrl) return;
  const target = _buildKiwiUrl(_tunerBaseUrl, freqKHz, mode);
  document.getElementById('tuner-freq').textContent =
    (freqKHz >= 1000 ? (freqKHz/1000).toFixed(3) + ' MHz' : freqKHz + ' kHz') + ' ' + mode.toUpperCase();
  _loadIframe(target, _tunerName || 'node');
}

function retuneCustom() {
  const input = document.getElementById('tuner-custom-f');
  const f = parseFloat(input.value);
  const m = document.getElementById('tuner-custom-m').value;
  if (isNaN(f) || f <= 0) {
    // Shake + highlight the input instead of an alert
    input.style.borderColor = '#F87171';
    input.focus();
    setTimeout(() => { input.style.borderColor = ''; }, 1200);
    return;
  }
  retune(f, m);
}

// ═══ APRS Station Detail Panel ═══
let _aprsLive = {callsign: null, interval: null, lastSeen: null, packetCount: 0, log: [], marker: null, station: null};
// Callsign-search results; popup buttons reference them by index only.
const _aprsResults = [];
const _aprsResultMarkers = [];

function openAprsDetail(ref) {
  let s, marker = null;
  if (typeof ref === 'number') {
    s = _aprsResults[ref];
    marker = _aprsResultMarkers[ref] || null;
    if (!s) return;
  } else {
    try { s = JSON.parse(decodeURIComponent(ref)); }
    catch (e) { return; }
  }

  // Stop any previous live monitoring
  _stopAprsLiveTimer();

  // Save context for live mode
  _aprsLive.marker = marker;
  _aprsLive.station = s;
  _aprsLive.callsign = s.callsign;
  _aprsLive.lastSeen = s.lasttime;
  _aprsLive.packetCount = 0;
  _aprsLive.log = [{
    ts: s.lasttime ? parseInt(s.lasttime) * 1000 : Date.now(),
    comment: s.comment || '',
    lat: s.lat, lon: s.lon,
    speed: s.speed, course: s.course, altitude: s.altitude,
    path: s.path || '',
    initial: true,
  }];

  document.getElementById('aprs-title').textContent = '' + (s.callsign || 'UNKNOWN');
  renderAprsDetail(s, []);
  document.getElementById('aprs-panel').classList.add('open');
}

function renderAprsDetail(s, extraLog) {
  const rows = [];
  const addRow = (lbl, val) => {
    if (val === null || val === undefined || val === '') return;
    rows.push(`<div class="row"><div class="lbl">${lbl}</div><div class="val">${escapeHtml(String(val))}</div></div>`);
  };

  const typeMap = {l: 'APRS Station', a: 'AIS Vessel', i: 'Object', o: 'Object', w: 'Weather Station'};

  // Section 1 — Station metadata
  rows.push('<div class="sec">STATION</div>');
  addRow('Callsign', s.callsign);
  if (s.type) addRow('Type', typeMap[s.type] || s.type);
  addRow('Comment', s.comment);
  addRow('Symbol', s.symbol);
  addRow('Src Call', s.srccall);

  // Section 2 — Position & movement
  rows.push('<div class="sec">POSITION</div>');
  addRow('Coords', s.lat.toFixed(5) + ', ' + s.lon.toFixed(5));
  if (s.speed != null)    addRow('Speed', s.speed + ' km/h');
  if (s.course != null) {
    const compass = ['N','NE','E','SE','S','SW','W','NW','N'][Math.round(s.course / 45)];
    addRow('Course', s.course + '° (' + compass + ')');
  }
  if (s.altitude != null) addRow('Altitude', s.altitude + ' m');

  // Distance & bearing from user
  let userCoords = null;
  try { userCoords = JSON.parse(localStorage.getItem('sigops_last_coords') || 'null'); } catch (_) { userCoords = null; }
  if (userCoords && userCoords.lat != null && userCoords.lon != null) {
    const R = 6371;
    const dLat = (s.lat - userCoords.lat) * Math.PI / 180;
    const dLon = (s.lon - userCoords.lon) * Math.PI / 180;
    const a = Math.sin(dLat/2)**2 +
              Math.cos(userCoords.lat * Math.PI / 180) *
              Math.cos(s.lat * Math.PI / 180) *
              Math.sin(dLon/2)**2;
    const dist = 2 * R * Math.asin(Math.sqrt(a));
    const y = Math.sin(dLon) * Math.cos(s.lat * Math.PI / 180);
    const x = Math.cos(userCoords.lat * Math.PI / 180) * Math.sin(s.lat * Math.PI / 180) -
              Math.sin(userCoords.lat * Math.PI / 180) * Math.cos(s.lat * Math.PI / 180) * Math.cos(dLon);
    const brng = ((Math.atan2(y, x) * 180 / Math.PI) + 360) % 360;
    const compass = ['N','NE','E','SE','S','SW','W','NW','N'][Math.round(brng / 45)];
    addRow('Dist from you', dist.toFixed(1) + ' km @ ' + brng.toFixed(0) + '° ' + compass);
  }

  // Section 3 — Routing
  rows.push('<div class="sec">ROUTING</div>');
  addRow('Path', s.path);
  // Parse path to extract igate + digipeaters
  if (s.path) {
    const hops = s.path.split(',').map(h => h.trim()).filter(h => h);
    const igate = hops.find(h => /q[ACRSUOX]/i.test(h));
    const digis = hops.filter(h => !/^(TCPIP|TCPXX|qA|q[ACRSUOX])/i.test(h));
    if (digis.length > 0) addRow('Digipeaters', digis.join(' → '));
    if (igate) {
      const igateName = s.path.split(igate + ',').pop().split(',')[0] || '';
      if (igateName) addRow('iGate', igateName);
    }
  }

  // Section 4 — Timing
  rows.push('<div class="sec">TIMING</div>');
  if (s.time) {
    const d = new Date(parseInt(s.time) * 1000);
    addRow('First Seen', d.toISOString().replace('T', ' ').slice(0, 19) + ' UTC');
  }
  if (s.lasttime) {
    const d = new Date(parseInt(s.lasttime) * 1000);
    const ago = Math.floor((Date.now() - d.getTime()) / 1000);
    let agoStr;
    if (ago < 60)         agoStr = ago + 's ago';
    else if (ago < 3600)  agoStr = Math.floor(ago/60) + 'm ago';
    else if (ago < 86400) agoStr = Math.floor(ago/3600) + 'h ago';
    else                  agoStr = Math.floor(ago/86400) + 'd ago';
    addRow('Last Heard', d.toISOString().replace('T', ' ').slice(0, 19) + ' UTC');
    addRow('', agoStr);
  }
  // Track age of the station
  if (s.time && s.lasttime) {
    const span = parseInt(s.lasttime) - parseInt(s.time);
    let spanStr;
    if (span < 3600)      spanStr = Math.floor(span/60) + ' min';
    else if (span < 86400) spanStr = Math.floor(span/3600) + ' hr';
    else                   spanStr = Math.floor(span/86400) + ' days';
    addRow('Tracked for', spanStr);
  }

  // Section 5 — Live packet log (if monitoring active or initial packet exists)
  const logEntries = [...(_aprsLive.log || []), ...(extraLog || [])];
  if (logEntries.length > 0) {
    rows.push(`<div class="sec">PACKET LOG (${logEntries.length})<span id="aprs-live-badge" style="margin-left:auto;font-size:9px;color:${_aprsLive.interval ? '#4ADE80' : 'var(--tm)'}">${_aprsLive.interval ? '● LIVE' : '○ IDLE'}</span></div>`);
    const logHtml = logEntries.slice(-15).reverse().map(p => {
      const d = new Date(p.ts);
      const ts = d.toISOString().slice(11, 19);
      const tag = p.initial ? '<span style="color:var(--tm)">[initial]</span>' : '<span style="color:#4ADE80">[new]</span>';
      const parts = [];
      if (p.lat != null && p.lon != null) parts.push(`pos=${p.lat.toFixed(3)},${p.lon.toFixed(3)}`);
      if (p.speed != null && p.speed > 0) parts.push(`spd=${p.speed}km/h`);
      if (p.altitude != null) parts.push(`alt=${p.altitude}m`);
      const summary = escapeHtml(parts.join(' '));
      return `<div class="pkt">
        <span class="pkt-ts">${ts}</span> ${tag}
        ${p.comment ? '<div class="pkt-cmt">' + escapeHtml(p.comment) + '</div>' : ''}
        ${summary ? '<div class="pkt-data">' + summary + '</div>' : ''}
      </div>`;
    }).join('');
    rows.push(`<div class="pkts">${logHtml}</div>`);
  }

  // Action buttons at bottom
  const liveBtn = _aprsLive.interval
    ? `<button onclick="stopAprsLive()" style="background:rgba(239,68,68,0.15);color:#F87171;border:1px solid rgba(239,68,68,0.4);border-radius:4px;padding:6px 10px;cursor:pointer;font-family:Rajdhani,sans-serif;font-size:11px;font-weight:700;letter-spacing:1px;flex:1">STOP LIVE</button>`
    : `<button onclick="startAprsLive()" style="background:rgba(74,222,128,0.15);color:#4ADE80;border:1px solid rgba(74,222,128,0.4);border-radius:4px;padding:6px 10px;cursor:pointer;font-family:Rajdhani,sans-serif;font-size:11px;font-weight:700;letter-spacing:1px;flex:1">▶ LIVE MONITOR</button>`;
  rows.push(`<div style="display:flex;gap:6px;margin-top:12px">
    ${liveBtn}
    <button onclick="refreshAprsDetail()" style="background:rgba(139,92,246,0.15);color:#A78BFA;border:1px solid rgba(139,92,246,0.4);border-radius:4px;padding:6px 10px;cursor:pointer;font-family:Rajdhani,sans-serif;font-size:11px;font-weight:700;letter-spacing:1px"></button>
  </div>`);

  document.getElementById('aprs-body').innerHTML = rows.join('');
}

async function refreshAprsDetail() {
  if (!_aprsLive.callsign) return;
  try {
    const res = await fetch(`/api/aprs/callsign?name=${encodeURIComponent(_aprsLive.callsign)}`);
    if (!res.ok) return;
    const data = await res.json();
    const st = (Array.isArray(data.stations) ? data.stations : [])[0];
    if (!st) return;

    // Did we get a new packet?
    if (st.lasttime && st.lasttime !== _aprsLive.lastSeen) {
      _aprsLive.log.push({
        ts: parseInt(st.lasttime) * 1000,
        comment: st.comment || '',
        lat: st.lat, lon: st.lon,
        speed: st.speed, course: st.course, altitude: st.altitude,
        path: st.path || '',
        initial: false,
      });
      _aprsLive.lastSeen = st.lasttime;
      _aprsLive.packetCount += 1;

      // Move only the tracked station's own marker (if it is still on the map)
      const mk = _aprsLive.marker;
      if (mk && aprsLayer.hasLayer(mk) && st.lat != null && st.lon != null) {
        const ll = mk.getLatLng();
        if (Math.abs(ll.lat - st.lat) > 0.0001 || Math.abs(ll.lng - st.lon) > 0.0001) {
          mk.setLatLng([st.lat, st.lon]);
        }
      }
    }

    _aprsLive.station = st;
    renderAprsDetail(st, []);
  } catch (e) {
    console.error('APRS refresh failed', e);
  }
}

function startAprsLive() {
  if (_aprsLive.interval) return;
  _aprsLive.interval = setInterval(refreshAprsDetail, 15000); // poll every 15s
  if (_aprsLive.station) renderAprsDetail(_aprsLive.station, []); // show STOP LIVE / ● LIVE now
  refreshAprsDetail(); // immediate refresh
}

function _stopAprsLiveTimer() {
  if (_aprsLive.interval) {
    clearInterval(_aprsLive.interval);
    _aprsLive.interval = null;
  }
}

function stopAprsLive() {
  _stopAprsLiveTimer();
  // Re-render so the button flips back to "LIVE MONITOR" and badge to IDLE
  if (_aprsLive.station && document.getElementById('aprs-panel').classList.contains('open')) {
    renderAprsDetail(_aprsLive.station, []);
  }
}

function closeAprsDetail() {
  _stopAprsLiveTimer();
  document.getElementById('aprs-panel').classList.remove('open');
}

// ═══ Helpers ═══
function escapeHtml(s) {
  if (s == null) return '';
  return String(s).replace(/[&<>"']/g, c => ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[c]));
}

document.getElementById('node-filter').addEventListener('input', renderNodeList);
document.getElementById('node-sort').addEventListener('change', renderNodeList);
document.getElementById('node-country').addEventListener('change', renderNodeList);

loadKiwi();

// Restore overlay state (heatmap/MGRS/RF/drone)
try {
  const saved = JSON.parse(localStorage.getItem('sigops_overlay_state') || '{}');
  ['heatmap','mgrs','rf','drone'].forEach(k => {
    if (saved[k]) toggleOverlay(k);
  });
} catch(e){}

// ══════════════════════════════════════════════
// Expose functions to global scope so inline onclick="" handlers resolve
// Otherwise the Jinja template + script load order can fire onclick before
// function definitions are in window scope → "fn is not defined"
// ══════════════════════════════════════════════
window.setMapStyle      = setMapStyle;
window.toggleOverlay    = toggleOverlay;
window.toggleLayer      = toggleLayer;
window.loadKiwi         = loadKiwi;
window.tuneNearestKiwi  = tuneNearestKiwi;
window.loadAprs         = loadAprs;
window.aprsGeo          = aprsGeo;
window.searchCallsign   = searchCallsign;
window.closeTuner       = closeTuner;
window.retune           = retune;
window.retuneCustom     = retuneCustom;
window.openTuner        = openTuner;
window.openTunerIdx     = openTunerIdx;
window.dismissAudioHint = dismissAudioHint;
window.openAprsDetail   = openAprsDetail;
window.focusNode        = focusNode;
window.populateCountryDropdown = populateCountryDropdown;

console.log('[SDR] global handlers exposed — map styles, overlays, KiwiSDR, APRS all bindable');
</script>
{% endblock %}