{% extends "base.html" %}
{% block title %}ADS-B — SignalOps{% endblock %}
{% block extra_style %}
/* ── Map ── */
#adsb-map { width:100%; height:100%; min-height:100% }
.map-card { height:100% !important }

/* ── Left panel ── */
.mode-item {
  display:flex; align-items:center; gap:8px; padding:7px 10px;
  border-radius:6px; cursor:pointer; font-family:'Rajdhani',sans-serif;
  font-size:13px; font-weight:600; letter-spacing:0.5px; color:var(--td);
  border:1px solid transparent; transition:all 0.18s; user-select:none;
}
.mode-item:hover { color:var(--t); background:rgba(138, 122, 184,0.08) }
.mode-item.active { color:var(--pl); background:rgba(138, 122, 184,0.12); border-color:rgba(138, 122, 184,0.25) }
.mode-dot { width:7px; height:7px; border-radius:50%; background:var(--tm); flex-shrink:0; transition:background 0.18s }
.mode-item.active .mode-dot { background:var(--pl); box-shadow:0 0 6px var(--pl) }
.mode-sub { padding:4px 10px 8px 25px; display:none }
.mode-sub.open { display:block }
.lp-hdr { font-size:9px; letter-spacing:2px; color:var(--tm); padding:10px 10px 4px; text-transform:uppercase }
.lp-sep { height:1px; background:var(--b); margin:6px 0 }
.toggle-row { display:flex; gap:4px; padding:0 6px }
.tgl-btn {
  flex:1; padding:5px 4px; border-radius:4px; font-family:'Rajdhani',sans-serif;
  font-size:10px; font-weight:700; letter-spacing:0.5px; cursor:pointer;
  border:1px solid rgba(255,255,255,0.08); background:transparent; color:var(--tm); transition:all 0.18s;
}
.tgl-btn.active { background:rgba(138, 122, 184,0.15); color:var(--pl); border-color:rgba(138, 122, 184,0.3) }
.tgl-btn:hover:not(.active) { color:var(--t) }

/* ── Callsign label ── */
.cs-label {
  background:rgba(10, 10, 14,0.82); border:1px solid rgba(255,255,255,0.1);
  border-radius:3px; padding:1px 5px; font-family:'JetBrains Mono',monospace;
  font-size:9px; white-space:nowrap; pointer-events:none; color:#E2E2EC;
}
.cs-label.mil { border-color:rgba(255,149,0,0.5); color:#FF9500 }
.cs-label.emg { border-color:rgba(199, 123, 123,0.5); color:#C77B7B }

/* ── Military flagged ── */
.flagged-row td { background:rgba(199, 123, 123,0.05)!important }
.flag-tag { display:inline-block; padding:1px 5px; border-radius:3px; font-size:9px;
  font-family:'Rajdhani',sans-serif; font-weight:700; letter-spacing:1px;
  background:rgba(255,149,0,0.12); color:#FF9500; border:1px solid rgba(255,149,0,0.3) }

/* ── Dark Ops theme ── */
body.theme-darkops { background:#000 }
body.theme-darkops .topnav { opacity:0.12; transition:opacity 0.3s; background:rgba(0,0,0,0.98) }
body.theme-darkops .topnav:hover { opacity:1 }
body.theme-darkops .card { background:#050505; border-color:rgba(116, 176, 149,0.12) }
body.theme-darkops #darkops-overlay { display:block }

/* ── Misc ── */
.ac-row { cursor:pointer; transition:background 0.15s }
.ac-row:hover td { background:rgba(138, 122, 184,0.08)!important }
.ac-row.selected td { background:rgba(138, 122, 184,0.14)!important }
.squawk-emergency { animation:sq-flash 1s infinite }
@keyframes sq-flash { 0%,100%{background:rgba(199, 123, 123,0.1)} 50%{background:rgba(199, 123, 123,0.25)} }
.squawk-pill { display:inline-block; padding:2px 7px; border-radius:4px;
  font-family:'JetBrains Mono',monospace; font-size:10px; font-weight:600;
  background:rgba(255,255,255,0.05); color:var(--td) }
.squawk-7500 { background:rgba(199, 123, 123,0.2)!important; color:#C77B7B!important; border:1px solid rgba(199, 123, 123,0.4) }
.squawk-7600 { background:rgba(201, 161, 90,0.2)!important; color:#C9A15A!important; border:1px solid rgba(201, 161, 90,0.4) }
.squawk-7700 { background:rgba(255,107,38,0.2)!important; color:#FF6B26!important; border:1px solid rgba(255,107,38,0.4) }
.alt-bar { height:3px; border-radius:2px; margin-top:3px; background:rgba(255,255,255,0.05) }
.alt-fill { height:4px; border-radius:2px }
#emergency-banner { display:none; background:rgba(199, 123, 123,0.1); border:1px solid rgba(199, 123, 123,0.4);
  border-radius:8px; padding:12px 16px; margin-bottom:10px; animation:sq-flash 1.5s infinite }
.detail-panel { background:var(--s); border:1px solid rgba(138, 122, 184,0.3); border-radius:8px;
  padding:16px; display:none; margin-top:12px }
.detail-grid { display:grid; grid-template-columns:auto 1fr; gap:5px 12px; font-size:11px; align-items:baseline }
.detail-grid .dk { color:var(--tm); letter-spacing:1px; font-size:10px; text-transform:uppercase; white-space:nowrap }
.detail-grid .dv { color:var(--t); font-weight:600; word-break:break-word }
.detail-section-hdr { font-size:9px; color:var(--tm); letter-spacing:2.5px; margin-bottom:10px; text-transform:uppercase; font-family:'Rajdhani',sans-serif; font-weight:700; padding-bottom:4px; border-bottom:1px solid rgba(138, 122, 184,0.15) }

/* Status value color accents */
.dv-warn { color:#C9A15A !important }
.dv-danger { color:#C77B7B !important }
.dv-ok { color:#74B095 !important }
.dv-info { color:#7C9BC9 !important }
.dv-mono { font-family:'JetBrains Mono',monospace; font-size:10.5px }
.dv-small { font-size:10px; color:var(--td) !important; font-weight:500 }

/* Tiny trend arrow for climb/descent */
.trend-up::before   { content:'▲ '; color:#74B095 }
.trend-down::before { content:'▼ '; color:#7C9BC9 }
.trend-level::before{ content:'◆ '; color:var(--td) }

/* Phase badge colors */
.phase-taxi     { background:rgba(156,163,175,0.15); color:#9CA3AF; border:1px solid rgba(156,163,175,0.3) }
.phase-climb    { background:rgba(116, 176, 149,0.15); color:#74B095; border:1px solid rgba(116, 176, 149,0.3) }
.phase-cruise   { background:rgba(96,165,250,0.15); color:#7C9BC9; border:1px solid rgba(96,165,250,0.3) }
.phase-descent  { background:rgba(180, 168, 214,0.15); color:#B4A8D6; border:1px solid rgba(180, 168, 214,0.3) }
.phase-approach { background:rgba(201, 161, 90,0.15); color:#C9A15A; border:1px solid rgba(201, 161, 90,0.3) }
.phase-ground   { background:rgba(107,114,128,0.15); color:#6B7280; border:1px solid rgba(107,114,128,0.3) }
.stat-box { background:var(--s); border:1px solid var(--b); border-radius:8px; padding:10px 14px; text-align:center }
.stat-box .val { font-family:'Rajdhani',sans-serif; font-size:24px; font-weight:700; line-height:1 }
.stat-box .lbl { font-size:9px; letter-spacing:2px; color:var(--tm); margin-top:3px; text-transform:uppercase }
.refresh-ring { width:16px; height:16px; border-radius:50%; border:2px solid rgba(138, 122, 184,0.2);
  border-top-color:var(--p); animation:spin 1s linear infinite; display:inline-block; vertical-align:middle }
.threat-row { display:flex; align-items:center; gap:8px; margin-bottom:6px; font-size:10px }
.threat-lbl { color:var(--tm); width:110px; flex-shrink:0 }
.threat-track { flex:1; height:4px; background:rgba(255,255,255,0.06); border-radius:2px }
.threat-fill { height:4px; border-radius:2px; transition:width 0.4s }
.threat-val { color:var(--t); font-weight:700; width:30px; text-align:right; flex-shrink:0 }
#detail-photo { width:100%; height:110px; object-fit:cover; border-radius:6px;
  background:rgba(255,255,255,0.03); border:1px solid var(--b); display:none; margin-bottom:10px }
#detail-photo-wrap { margin-bottom:10px; display:none }
#darkops-overlay { display:none; position:absolute; bottom:16px; left:16px; z-index:600;
  background:rgba(0,0,0,0.85); border:1px solid rgba(116, 176, 149,0.35); border-radius:6px;
  padding:12px 14px; font-size:10px; pointer-events:none; min-width:160px }

/* ═══ 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;
}
/* Artificial horizon line across the whole view */
#drone-hud::after{
  content:'';position:absolute;
  left:80px;right:80px;top:50%;height:1px;
  background:linear-gradient(to right, transparent, rgba(74,222,128,0.4) 15%, rgba(74,222,128,0.4) 85%, transparent);
  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:10px;height:10px;
  border:1px solid #4ADE80;border-radius:50%;
  transform:translate(-50%,-50%);
}
/* Pitch ladder marks either side of crosshair */
#drone-hud .dh-pitch{
  position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%);
  width:260px;height:1px;pointer-events:none;
}
#drone-hud .dh-pitch::before,
#drone-hud .dh-pitch::after{
  content:'';position:absolute;top:-30px;width:30px;height:1px;
  background:#4ADE80;box-shadow:0 0 4px rgba(74,222,128,0.6);
}
#drone-hud .dh-pitch::before{left:20px}
#drone-hud .dh-pitch::after{right:20px}
#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;
}

/* Cockpit-mode subtle map desaturation for immersion */
.adsb-map-cockpit{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){
  #drone-hud .dh-pitch{width:180px}
  #drone-hud::after{left:40px;right:40px}
  .adsb-head{flex-wrap:wrap;gap:10px}
  .adsb-head > div:last-child{flex-wrap:wrap}
  .adsb-ctl-row{flex-wrap:wrap}
  .adsb-ctl-row > div{flex:1 1 100%;min-width:0}
  .adsb-coords{width:100%}
  .adsb-coords input{flex:1;width:auto !important;min-width:0}
  #radius-slider{width:100% !important}
  #type-filter{width:100% !important}
  .adsb-ctl-row .btn{min-height:40px;flex:1}
  .adsb-coords .btn{flex:0 0 auto;min-width:44px}
  .adsb-map-card{margin-bottom:0}
  #stats-row{grid-template-columns:repeat(3,1fr) !important}
  #main-layout{grid-template-columns:minmax(0,1fr) !important;height:auto !important;min-height:0 !important}
  .adsb-map-card,.map-card{order:0;height:60vh !important;min-height:360px}
  .adsb-left{order:1;max-height:none}
  .adsb-right{order:2;overflow:visible !important}
  .adsb-right #ac-list{max-height:420px}
  .mode-item{min-height:38px}
  .tgl-btn{min-height:34px}
  .dp-grid3,.dp-grid2{grid-template-columns:1fr !important}
  .dp-head{flex-wrap:wrap}
  #detail-panel a.btn,#detail-panel button.btn{min-height:36px;display:inline-flex;align-items:center}
}
@media (max-width:600px){
  #stats-row{grid-template-columns:repeat(2,1fr) !important}
  .stat-box{padding:8px 10px}
  .stat-box .val{font-size:20px}
  .detail-panel{padding:12px}
  #detail-title{font-size:16px !important}
}
{% endblock %}
{% block content %}
<div class="adsb-head" style="display:flex;justify-content:space-between;align-items:center;margin-bottom:14px">
  <div class="section-hdr" style="margin:0">ADS-B Aircraft Intelligence</div>
  <div style="display:flex;align-items:center;gap:10px">
    <span id="refresh-status" style="font-size:11px;color:var(--tm)"></span>
    <label style="display:flex;align-items:center;gap:7px;font-size:11px;color:var(--td);cursor:pointer">
      <input type="checkbox" id="auto-refresh" style="width:auto" onchange="toggleAutoRefresh()">
      Auto-refresh
    </label>
    <select id="refresh-interval" style="width:90px;padding:5px 8px;font-size:11px">
      <option value="10">10s</option>
      <option value="20" selected>20s</option>
      <option value="30">30s</option>
      <option value="60">60s</option>
    </select>
  </div>
</div>

<!-- Emergency Banner -->
<div id="emergency-banner">
  <span style="color:#C77B7B;font-family:'Rajdhani',sans-serif;font-weight:700;font-size:14px;letter-spacing:2px">
    <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> Emergency squawk detected
  </span>
  <div id="emergency-detail" style="font-size:11px;color:var(--td);margin-top:4px"></div>
</div>

<!-- Controls -->
<div class="card" style="padding:14px;margin-bottom:12px">
  <div class="adsb-ctl-row" style="display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap">
    <div>
      <div style="font-size:10px;color:var(--tm);letter-spacing:2px;margin-bottom:6px">Center coordinates</div>
      <div class="adsb-coords" style="display:flex;gap:8px">
        <input id="a-lat" placeholder="Latitude" style="width:140px">
        <input id="a-lon" placeholder="Longitude" style="width:140px">
        <button class="btn btn-g" onclick="useMyLoc()" style="padding:8px 12px"><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>
    <div>
      <div style="font-size:10px;color:var(--tm);letter-spacing:2px;margin-bottom:6px">Radius: <span id="radius-label">100</span> km</div>
      <input type="range" id="radius-slider" min="25" max="250" value="100" step="25"
        style="width:160px;accent-color:var(--p)" oninput="document.getElementById('radius-label').textContent=this.value">
    </div>
    <div>
      <div style="font-size:10px;color:var(--tm);letter-spacing:2px;margin-bottom:6px">Filter</div>
      <select id="type-filter" style="width:130px;padding:8px 10px;font-size:11px" onchange="renderTable()">
        <option value="">All types</option>
        <option value="aircraft">Aircraft</option>
        <option value="drone">Drone / UAV</option>
        <option value="emergency">Emergency</option>
      </select>
    </div>
    <div style="display:flex;gap:8px;padding-bottom:0">
      <button class="btn btn-p" onclick="doScan()" id="scan-btn"> Scan</button>
      <button class="btn btn-outline" onclick="exportData()" style="padding:8px 14px;font-size:12px"><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 4v12M7 11l5 5 5-5M5 20h14"/></svg> JSON</button>
      <span id="so-case-bar" style="display:inline-flex;align-items:center"></span>
    </div>
  </div>
</div>

<!-- Stats Row -->
<div id="stats-row" style="display:none;grid-template-columns:repeat(5,1fr);gap:10px;margin-bottom:12px">
  <div class="stat-box"><div class="val" id="st-total" style="color:var(--pl)">0</div><div class="lbl">Total Aircraft</div></div>
  <div class="stat-box"><div class="val" id="st-drone" style="color:#C27F92">0</div><div class="lbl">Drones / UAV</div></div>
  <div class="stat-box"><div class="val" id="st-emergency" style="color:#C77B7B">0</div><div class="lbl">Emergency Squawk</div></div>
  <div class="stat-box"><div class="val" id="st-max-alt" style="color:var(--g)">—</div><div class="lbl">Max Altitude (ft)</div></div>
  <div class="stat-box"><div class="val" id="st-sources" style="color:var(--warn)">0</div><div class="lbl">Data Sources</div></div>
</div>

<!-- Main 3-column Layout -->
<div id="main-layout" style="display:grid;grid-template-columns:175px 1fr 300px;gap:10px;height:calc(100vh - 280px);min-height:450px">

  <!-- LEFT PANEL: Mode / Theme / Layer -->
  <div class="adsb-left" style="background:var(--s);border:1px solid var(--b);border-radius:8px;overflow-y:auto;display:flex;flex-direction:column">

    <div class="lp-hdr">Map mode</div>
    <div onclick="setMode('live')"     id="mode-live"     class="mode-item active"><span class="mode-dot"></span>Live Tracking</div>
    <div onclick="setMode('heatmap')"  id="mode-heatmap"  class="mode-item"><span class="mode-dot"></span>Heatmap</div>
    <div id="sub-heatmap" class="mode-sub">
      <div style="font-size:9px;color:var(--tm);margin-bottom:5px">Time window</div>
      <div class="toggle-row">
        <button class="tgl-btn active" id="hm-1h"  onclick="setHeatmapTime(1)">1h</button>
        <button class="tgl-btn"        id="hm-6h"  onclick="setHeatmapTime(6)">6h</button>
        <button class="tgl-btn"        id="hm-24h" onclick="setHeatmapTime(24)">24h</button>
      </div>
    </div>
    <div onclick="setMode('military')" id="mode-military" class="mode-item"><span class="mode-dot"></span>Military</div>
    <div id="sub-military" class="mode-sub">
      <div style="font-size:9px;color:var(--tm);margin-bottom:5px">Callsign filter</div>
      <div style="display:flex;flex-wrap:wrap;gap:3px">
        <span class="mil-tag active" onclick="toggleMilTag(this,'RCH')">RCH</span>
        <span class="mil-tag active" onclick="toggleMilTag(this,'NATO')">Nato</span>
        <span class="mil-tag active" onclick="toggleMilTag(this,'QID')">QID</span>
        <span class="mil-tag active" onclick="toggleMilTag(this,'JAKE')">Jake</span>
        <span class="mil-tag active" onclick="toggleMilTag(this,'MAGMA')">Magma</span>
        <span class="mil-tag active" onclick="toggleMilTag(this,'REACH')">Reach</span>
      </div>
    </div>
    <div onclick="setMode('airport')"  id="mode-airport"  class="mode-item"><span class="mode-dot"></span>Airport Focus</div>
    <div id="sub-airport" class="mode-sub">
      <input id="ap-icao" placeholder="LTFM, EGLL..." style="font-size:11px;padding:5px 8px;margin-bottom:6px" oninput="this.value=this.value.toUpperCase()">
      <button class="btn btn-g" onclick="applyAirportFocus()" style="width:100%;padding:5px;font-size:11px">Focus</button>
      <div id="ap-name" style="font-size:9px;color:var(--pl);margin-top:6px"></div>
      <div style="margin-top:6px;display:flex;flex-direction:column;gap:3px">
        <label style="font-size:10px;color:var(--td);cursor:pointer;display:flex;align-items:center;gap:4px"><input type="checkbox" id="ap-incoming" checked style="width:auto"> Incoming</label>
        <label style="font-size:10px;color:var(--td);cursor:pointer;display:flex;align-items:center;gap:4px"><input type="checkbox" id="ap-outgoing" checked style="width:auto"> Outgoing</label>
        <label style="font-size:10px;color:var(--td);cursor:pointer;display:flex;align-items:center;gap:4px"><input type="checkbox" id="ap-holding"  checked style="width:auto"> Holding</label>
      </div>
      <div id="ap-stats" style="margin-top:6px;font-size:9px;color:var(--td)"></div>
    </div>

    <div class="lp-sep"></div>
    <div class="lp-hdr">Visual</div>
    <div class="mode-item" onclick="toggleTheme()" id="theme-darkops"><span class="mode-dot"></span>Dark Ops</div>

    <div class="lp-sep"></div>
    <div class="lp-hdr">Overlays</div>
    <label class="mode-item" style="cursor:pointer"><input type="checkbox" id="show-trails" style="width:auto;margin-right:4px" onchange="updateMap(lastLat,lastLon,lastRadius)"> Trails</label>
    <label class="mode-item" style="cursor:pointer"><input type="checkbox" id="show-rings" style="width:auto;margin-right:4px" checked onchange="updateMap(lastLat,lastLon,lastRadius)"> Range Rings</label>
    <label class="mode-item" style="cursor:pointer"><input type="checkbox" id="show-labels" style="width:auto;margin-right:4px" checked onchange="updateMap(lastLat,lastLon,lastRadius)"> Callsign Labels</label>
  </div>

  <!-- MAP -->
  <div class="card map-card adsb-map-card" style="padding:0;overflow:hidden;position:relative">
    <div id="adsb-map" style="width:100%;height:100%"></div>
    <div id="darkops-overlay"></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-pitch"></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="Aircraft 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="trails" onclick="toggleOverlay('trails')" title="Aircraft position trails">
          <svg viewBox="0 0 24 24"><path d="M21 12l-6-3 2-5-10 10 5-2 3 6 6-6z"/><path d="M3 21l4-4" stroke-dasharray="1 2"/></svg>
          Trails
        </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>

  <!-- RIGHT PANEL -->
  <div class="adsb-right" style="display:flex;flex-direction:column;gap:8px;overflow:hidden">
    <!-- Squawk Decoder -->
    <div class="card" style="padding:12px;flex-shrink:0">
      <div style="font-size:9px;color:var(--tm);letter-spacing:2px;margin-bottom:8px">Squawk codes</div>
      <div style="display:flex;flex-direction:column;gap:5px;font-size:10px">
        <div style="display:flex;justify-content:space-between;align-items:center"><span class="squawk-pill squawk-7500">7500</span><span style="color:var(--td)">Hijacking</span></div>
        <div style="display:flex;justify-content:space-between;align-items:center"><span class="squawk-pill squawk-7600">7600</span><span style="color:var(--td)">Radio Failure</span></div>
        <div style="display:flex;justify-content:space-between;align-items:center"><span class="squawk-pill squawk-7700">7700</span><span style="color:var(--td)">Emergency</span></div>
        <div style="display:flex;justify-content:space-between;align-items:center"><span class="squawk-pill">1200</span><span style="color:var(--td)">VFR</span></div>
        <div style="display:flex;justify-content:space-between;align-items:center"><span class="squawk-pill">7777</span><span style="color:#FF9500">Military Intercept</span></div>
      </div>
    </div>
    <!-- Aircraft List -->
    <div class="card" style="padding:0;flex:1;overflow:hidden;display:flex;flex-direction:column">
      <div style="padding:8px 12px;border-bottom:1px solid var(--b);font-family:'Rajdhani',sans-serif;font-size:11px;font-weight:700;letter-spacing:2px;color:var(--t)">Nearby aircraft</div>
      <div id="ac-list" style="overflow-y:auto;flex:1">
        <div style="text-align:center;padding:30px 16px;color:var(--tm)">
          <div style="font-size:24px;opacity:0.15;margin-bottom:6px"><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="M21 15.5l-8-4.5V5a1.5 1.5 0 0 0-3 0v6l-8 4.5V17l8-2.5V19l-2 1.5V22l3.5-1 3.5 1v-1.5L13 19v-4.5l8 2.5z"/></svg></div>
          <div style="font-family:'Rajdhani',sans-serif;letter-spacing:2px;font-size:11px">Scan to populate</div>
        </div>
      </div>
    </div>
  </div>

</div><!-- /#main-layout -->

<!-- Detail Panel -->
<div id="detail-panel" class="detail-panel" style="margin-top:12px">
  <div class="dp-head" style="display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:14px;gap:12px">
    <div style="flex:1;min-width:0">
      <div id="detail-title" style="font-family:'Rajdhani',sans-serif;font-weight:700;font-size:18px;letter-spacing:2px;color:var(--t);margin-bottom:4px"></div>
      <div id="detail-subtitle" style="font-size:11px;color:var(--tm);font-family:'JetBrains Mono',monospace;letter-spacing:0.5px"></div>
    </div>
    <div style="display:flex;gap:8px;align-items:center;flex-shrink:0">
      <span id="detail-phase-badge" class="badge" style="display:none"></span>
      <span id="detail-type-badge" class="badge"></span>
      <button onclick="closeDetail()" style="background:none;border:none;color:var(--tm);cursor:pointer;font-size:16px">✕</button>
    </div>
  </div>

  <!-- Photo -->
  <div id="detail-photo-wrap">
    <img id="detail-photo" alt="aircraft photo">
    <div id="detail-photo-credit" style="font-size:9px;color:var(--tm);margin-top:4px"></div>
  </div>

  <!-- ── THREE-COLUMN TOP GRID ─────────────────────── -->
  <div class="dp-grid3" style="display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px">
    <!-- Column 1: Identification -->
    <div>
      <div class="detail-section-hdr">Identification</div>
      <div id="detail-body" class="detail-grid"></div>
    </div>

    <!-- Column 2: Flight Data -->
    <div>
      <div class="detail-section-hdr">Flight data</div>
      <div id="detail-flight" class="detail-grid"></div>
    </div>

    <!-- Column 3: Threat Breakdown -->
    <div>
      <div class="detail-section-hdr">Threat breakdown</div>
      <div id="detail-threats"></div>
    </div>
  </div>

  <!-- ── TWO-COLUMN BOTTOM: Navigation + Telemetry ── -->
  <div class="dp-grid2" style="display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:14px">
    <div>
      <div class="detail-section-hdr">Navigation</div>
      <div id="detail-nav" class="detail-grid"></div>
    </div>
    <div>
      <div class="detail-section-hdr">Telemetry & signal</div>
      <div id="detail-telemetry" class="detail-grid"></div>
    </div>
  </div>

  <!-- Assessment -->
  <div style="margin-top:14px;padding:10px 12px;background:rgba(0,0,0,0.25);border-radius:6px;border-left:2px solid rgba(138, 122, 184,0.4)">
    <div class="detail-section-hdr" style="margin-bottom:6px">Operational assessment</div>
    <div id="detail-assessment" style="font-size:11px;color:var(--td);line-height:1.7"></div>
  </div>

  <!-- Action buttons -->
  <div style="margin-top:12px;display:flex;gap:8px;flex-wrap:wrap">
    <button id="detail-wl-btn" class="btn btn-outline" style="font-size:11px;padding:6px 12px" onclick="addToWatchlist()">+ Watchlist</button>
    <a id="detail-fr24-link" href="#" target="_blank" class="btn btn-outline" style="font-size:11px;padding:6px 12px;text-decoration:none">FlightRadar24 →</a>
    <a id="detail-ads-link" href="#" target="_blank" class="btn btn-outline" style="font-size:11px;padding:6px 12px;text-decoration:none">ADSBexchange →</a>
    <a id="detail-fa-link" href="#" target="_blank" class="btn btn-outline" style="font-size:11px;padding:6px 12px;text-decoration:none">FlightAware →</a>
    <a id="detail-pf-link" href="#" target="_blank" class="btn btn-outline" style="font-size:11px;padding:6px 12px;text-decoration:none">PlaneFinder →</a>
    <a id="detail-jt-link" href="#" target="_blank" class="btn btn-outline" style="font-size:11px;padding:6px 12px;text-decoration:none">JetPhotos →</a>
  </div>
</div>

<!-- Full Table (below) -->
<div id="ac-table-wrap" class="card" style="padding:0;overflow:hidden;margin-top:12px">
  <div style="padding:12px 16px;border-bottom:1px solid var(--b);display:flex;justify-content:space-between;align-items:center">
    <span style="font-family:'Rajdhani',sans-serif;font-size:13px;font-weight:700;letter-spacing:2px">Full aircraft table</span>
    <span id="table-count" style="font-size:10px;color:var(--tm)"></span>
  </div>
  <div style="overflow-x:auto">
    <table id="ac-table" style="display:none">
      <thead><tr>
        <th>Callsign</th><th>ICAO Hex</th><th>Type</th>
        <th>Altitude (ft)</th><th>Speed (kts)</th><th>Heading</th>
        <th>Squawk</th><th>Country</th><th>Source</th><th>Risk</th>
      </tr></thead>
      <tbody id="ac-tbody"></tbody>
    </table>
    <div id="table-empty" style="text-align:center;padding:40px;color:var(--tm)">
      <div style="font-family:'Rajdhani',sans-serif;letter-spacing:2px;font-size:12px;opacity:0.4">NO DATA — SCAN AN AREA</div>
    </div>
  </div>
</div>

{% endblock %}
{% block scripts %}
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"/>
<style>
.dark-popup .leaflet-popup-content-wrapper {
  background:#0F140F; color:#E2E2EC; border:1px solid rgba(139,92,246,0.3);
  border-radius:8px; box-shadow:0 4px 20px rgba(0,0,0,0.6);
}
.dark-popup .leaflet-popup-tip { background:#0F140F }
.dark-popup .leaflet-popup-close-button { color:#9896AE }
</style>
<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 src="/static/js/so-cases.js" defer></script>
<script>
// ── State ──────────────────────────────────────────
let allAircraft = [];
let selectedIcao = null;
let refreshTimer = null;
let countdownInterval = null;
let currentDetail = null;
let lastLat = 0, lastLon = 0, lastRadius = 100;
// Vaka araç çubuğu (Save to case / Export)
document.addEventListener('DOMContentLoaded', () => {
  if (window.SignalOpsCase) SignalOpsCase.attach(document.getElementById('so-case-bar'), {
    kind: 'adsb', title: 'ADS-B Aircraft',
    getDevices: () => allAircraft,
    getCenter: () => (lastLat || lastLon) ? {lat: lastLat, lon: lastLon} : null,
  });
});
let trailData = {};
let trailLayer = null;
let ringLayers = [];
let currentMapMode = 'split';
let heatLayer = null;
let routeLayer = null;
let militaryLayer = null;
let airportLayer = null;
let currentAirport = null;
let militaryLegend = null;   // single legend control for renderMilitary()
let darkopsInterval = null;  // single dark-ops overlay refresh timer

// ── Map ────────────────────────────────────────────
const map = L.map('adsb-map', {zoomControl:true}).setView([39.9, 32.8], 6);

// ═══════════════════════════════════════════════════════════════
//  BASE MAP STYLES
// ═══════════════════════════════════════════════════════════════
const MAP_STYLES = {
  dark: {
    url: 'https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.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) map.removeLayer(currentTileLayer);
  currentTileLayer = L.tileLayer(config.url, {
    attribution: config.attr,
    maxZoom: config.maxZoom,
    subdomains: config.subdomains
  }).addTo(map);
  currentTileLayer.bringToBack();
  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'); }

// Backward-compat shim — other code (or removed sidebar buttons) may still call setLayer()
function setLayer(name) {
  // Map legacy names to new style names
  const legacyMap = { standard: 'dark', satellite: 'satellite', topo: 'terrain' };
  setMapStyle(legacyMap[name] || name);
}

// ── Current mode & theme state ──
let currentMode  = 'live';   // live | heatmap | military | airport
let darkopsOn    = false;
let heatmapHours = 1;
let milTags = new Set(['RCH','NATO','QID','JAKE','MAGMA','REACH']);

// ── mil-tag CSS (inject once) ──
const milTagStyle = document.createElement('style');
milTagStyle.textContent = '.mil-tag{display:inline-block;padding:2px 6px;border-radius:3px;font-size:9px;font-family:"Rajdhani",sans-serif;font-weight:700;letter-spacing:1px;cursor:pointer;background:rgba(255,255,255,0.05);color:var(--tm);border:1px solid rgba(255,255,255,0.08);transition:all 0.15s}.mil-tag.active{background:rgba(255,149,0,0.15);color:#FF9500;border-color:rgba(255,149,0,0.35)}';
document.head.appendChild(milTagStyle);

function setMode(name) {
  currentMode = name;
  document.querySelectorAll('[id^=mode-]').forEach(el => el.classList.remove('active'));
  const el = document.getElementById('mode-'+name);
  if (el) el.classList.add('active');
  // Show/hide sub-panels
  ['heatmap','military','airport'].forEach(m => {
    const sub = document.getElementById('sub-'+m);
    if (sub) sub.classList.toggle('open', m === name);
  });
  clearModeLayers();
  if (lastLat) updateMap(lastLat, lastLon, lastRadius);
}

// Remove layers that belong to modes other than the current one
function clearModeLayers() {
  if (militaryLayer) militaryLayer.clearLayers();
  if (militaryLegend) { map.removeControl(militaryLegend); militaryLegend = null; }
  if (heatLayer) { map.removeLayer(heatLayer); heatLayer = null; }
  if (currentMode !== 'airport' && airportLayer) airportLayer.clearLayers();
}

function toggleTheme() {
  darkopsOn = !darkopsOn;
  document.body.classList.toggle('theme-darkops', darkopsOn);
  document.getElementById('theme-darkops').classList.toggle('active', darkopsOn);
  document.getElementById('darkops-overlay').style.display = darkopsOn ? 'block' : 'none';
  if (darkopsOn) renderDarkOps();
  else if (darkopsInterval) { clearInterval(darkopsInterval); darkopsInterval = null; }
}

function setHeatmapTime(h) {
  heatmapHours = h;
  document.querySelectorAll('[id^=hm-]').forEach(el => el.classList.remove('active'));
  document.getElementById('hm-'+h+'h').classList.add('active');
  if (currentMode === 'heatmap' && lastLat) updateMap(lastLat, lastLon, lastRadius);
}

function toggleMilTag(el, tag) {
  if (milTags.has(tag)) { milTags.delete(tag); el.classList.remove('active'); }
  else { milTags.add(tag); el.classList.add('active'); }
  if (currentMode === 'military' && lastLat) updateMap(lastLat, lastLon, lastRadius);
}

const acLayer = L.layerGroup().addTo(map);
trailLayer   = L.layerGroup().addTo(map);
routeLayer   = L.layerGroup().addTo(map);
militaryLayer= L.layerGroup().addTo(map);
airportLayer = L.layerGroup().addTo(map);
let scanCircle = null;

// ═══════════════════════════════════════════════════════════════
//  OVERLAY LAYERS (heatmap, MGRS, trails, cockpit HUD)
// ═══════════════════════════════════════════════════════════════
const overlayState = {heatmap:false, mgrs:false, trails:false, drone:false};
let aviationHeatLayer = null;
let mgrsLayer = L.layerGroup();

// Aircraft density heatmap (position-based, derived from allAircraft)
function buildAviationHeatmap() {
  const points = [];
  allAircraft.forEach(a => {
    if (typeof a.lat !== 'number' || typeof a.lon !== 'number') return;
    // Lower altitude → hotter (more congested airspace)
    const alt = a.altitude != null ? a.altitude : 20000;
    const intensity = Math.max(0.3, Math.min(1.0, (40000 - alt) / 40000));
    // Emergencies and drones burn hotter
    const boost = (isEmergency(a.squawk) || a.type === 'drone') ? 1.0 : intensity;
    points.push([a.lat, a.lon, boost]);
  });
  if (aviationHeatLayer) { map.removeLayer(aviationHeatLayer); aviationHeatLayer = null; }
  if (points.length === 0) return;
  aviationHeatLayer = L.heatLayer(points, {
    radius: 28, blur: 22, maxZoom: 10,
    gradient: {0.2:'#1E3A8A', 0.4:'#7C3AED', 0.6:'#A78BFA', 0.8:'#FBBF24', 1.0:'#F87171'}
  });
  if (overlayState.heatmap) aviationHeatLayer.addTo(map);
}

// MGRS-style grid with GZD labels (matches geo/orbital/sdr pattern)
function buildMgrsGrid() {
  mgrsLayer.clearLayers();
  const bounds = map.getBounds();
  const zoom = map.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 from the current scan (aircraft passing the active filter / emergency squawks)
  let shown = 0;
  try { shown = getFiltered().length; } catch (e) { shown = (allAircraft || []).length; }
  const emg = (allAircraft || []).filter(a => isEmergency(a.squawk)).length;
  return ['AC · ' + shown, 'EMRG · ' + emg];
}
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 = map;
  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)
map.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 { map.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) { buildAviationHeatmap(); if (aviationHeatLayer) aviationHeatLayer.addTo(map); }
    else if (aviationHeatLayer) { map.removeLayer(aviationHeatLayer); }
  }
  if (name === 'mgrs') {
    if (overlayState.mgrs) { buildMgrsGrid(); mgrsLayer.addTo(map); }
    else mgrsLayer.remove();
  }
  if (name === 'trails') {
    // Sync with the existing sidebar "Trails" checkbox so there's one source of truth
    const cb = document.getElementById('show-trails');
    if (cb) {
      cb.checked = overlayState.trails;
      try {
        if (typeof updateMap === 'function' && typeof lastLat !== 'undefined' && lastLat) {
          updateMap(lastLat, lastLon, lastRadius);
        }
      } catch(e) { console.warn('trail sync:', e); }
    }
  }
  if (name === 'drone') {
    const hud = document.getElementById('drone-hud');
    const mapEl = document.getElementById('adsb-map');
    hud.classList.toggle('active', overlayState.drone);
    mapEl.classList.toggle('adsb-map-cockpit', overlayState.drone);
    if (overlayState.drone) updateDroneHud();
    setHudClock(overlayState.drone);
  }
  try { localStorage.setItem('sigops_overlay_state', JSON.stringify(overlayState)); } catch(e){}
}

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

// ── Squawk helpers ────────────────────────────────
const SQUAWK_DECODE = {
  '7500': { label:'HIJACK', color:'#F87171', cls:'squawk-7500' },
  '7600': { label:'RADIO FAIL', color:'#FBBF24', cls:'squawk-7600' },
  '7700': { label:'MAYDAY', color:'#FF6B26', cls:'squawk-7700' },
  '1200': { label:'VFR', color:'#60A5FA', cls:'' },
  '2000': { label:'IFR-ENTER', color:'#A78BFA', cls:'' },
};
function isEmergency(sq) { return ['7500','7600','7700'].includes(String(sq)); }
function squawkPill(sq) {
  if (!sq) return '<span style="color:var(--tm)">—</span>';
  const info = SQUAWK_DECODE[String(sq)];
  const cls = info ? info.cls : '';
  const label = info ? info.label : sq;
  return `<span class="squawk-pill ${cls}">${escapeHtml(sq)}</span><span style="font-size:9px;color:var(--tm);margin-left:4px">${info?info.label:''}</span>`;
}

// ── Risk scoring ──────────────────────────────────
function scoreAc(ac) {
  let s = 0;
  if (isEmergency(ac.squawk))       s += 70;
  if (ac.type === 'drone')          s += 40;
  if (ac.altitude !== null && ac.altitude < 300)  s += 20;
  if (ac.velocity !== null && ac.velocity < 30)   s += 10;
  if (!ac.callsign || ac.callsign === ac.icao)    s += 10; // unidentified
  return Math.min(s, 100);
}

// ── Aircraft SVG icon factory ─────────────────────
function makeAcIcon(ac) {
  const heading = ac.heading || 0;
  const isDrone = ac.type === 'drone';
  const isEmerg = isEmergency(ac.squawk);
  const color = isEmerg ? '#F87171' : isDrone ? '#FF2288' : '#88AAFF';
  const size = isDrone ? 20 : 28;

  const svg = isDrone
    ? `<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
        <circle cx="10" cy="10" r="4" fill="${color}" opacity="0.9"/>
        <circle cx="3" cy="3" r="2.5" fill="${color}" opacity="0.6"/>
        <circle cx="17" cy="3" r="2.5" fill="${color}" opacity="0.6"/>
        <circle cx="3" cy="17" r="2.5" fill="${color}" opacity="0.6"/>
        <circle cx="17" cy="17" r="2.5" fill="${color}" opacity="0.6"/>
        <line x1="5" y1="5" x2="8.5" y2="8.5" stroke="${color}" stroke-width="1.2" opacity="0.7"/>
        <line x1="15" y1="5" x2="11.5" y2="8.5" stroke="${color}" stroke-width="1.2" opacity="0.7"/>
        <line x1="5" y1="15" x2="8.5" y2="11.5" stroke="${color}" stroke-width="1.2" opacity="0.7"/>
        <line x1="15" y1="15" x2="11.5" y2="11.5" stroke="${color}" stroke-width="1.2" opacity="0.7"/>
      </svg>`
    : `<svg width="28" height="28" viewBox="0 0 28 28" xmlns="http://www.w3.org/2000/svg"
         style="transform:rotate(${Number(heading)||0}deg);transform-origin:center">
        <polygon points="14,2 18,18 14,15 10,18" fill="${color}" opacity="0.92"/>
        <line x1="7" y1="12" x2="21" y2="12" stroke="${color}" stroke-width="1.5" opacity="0.6"/>
        <line x1="11" y1="16" x2="17" y2="16" stroke="${color}" stroke-width="1" opacity="0.4"/>
      </svg>`;

  return L.divIcon({
    html: svg,
    className: '',
    iconSize: [size, size],
    iconAnchor: [size/2, size/2],
  });
}

// ── Location helper ───────────────────────────────
function useMyLoc() {
  if (!navigator.geolocation) { 
    alert('Geolocation not supported by this browser.'); 
    return; 
  }
  
  const btn = document.querySelector('button[onclick="useMyLoc()"]');
  if (btn) { btn.textContent = '…'; btn.disabled = true; }
  
  navigator.geolocation.getCurrentPosition(
    p => {
      document.getElementById('a-lat').value = p.coords.latitude.toFixed(5);
      document.getElementById('a-lon').value = p.coords.longitude.toFixed(5);
      if (btn) { btn.innerHTML = window.SO_PIN; btn.disabled = false; }
      // Auto SCAN after getting location (wait for doScan to be defined)
      setTimeout(() => doScan(), 100);
    },
    err => {
      if (btn) { btn.innerHTML = window.SO_PIN; btn.disabled = false; }
      const msgs = {
        1: 'Permission denied. Try: http://localhost:8080 instead of LAN IP.',
        2: 'Location unavailable (GPS / network issue).',
        3: 'Geolocation timeout. Try again.'
      };
      alert(msgs[err.code] || 'Geolocation error: ' + err.message);
    },
    { enableHighAccuracy: false, timeout: 8000, maximumAge: 60000 }
  );
}

// ── Same function with different name for compatibility ──
function geoMe() {
  if (!navigator.geolocation) { 
    alert('Geolocation not supported.'); 
    return; 
  }
  
  const btn = document.querySelector('button[onclick="geoMe()"]');
  if (btn) { btn.textContent = '…'; btn.disabled = true; }
  
  navigator.geolocation.getCurrentPosition(
    p => {
      document.getElementById('a-lat').value = p.coords.latitude.toFixed(5);
      document.getElementById('a-lon').value = p.coords.longitude.toFixed(5);
      if (btn) { btn.innerHTML = window.SO_PIN; btn.disabled = false; }
      // Auto scan after location
      setTimeout(() => doScan(), 100);
    },
    err => {
      if (btn) { btn.innerHTML = window.SO_PIN; btn.disabled = false; }
      alert('Geolocation failed: ' + (err.message || 'Try localhost instead of LAN IP'));
    },
    { timeout: 8000 }
  );
}
// ── Main scan ─────────────────────────────────────
async function doScan() {
  const lat = parseFloat(document.getElementById('a-lat').value);
  const lon = parseFloat(document.getElementById('a-lon').value);
  const radius = parseInt(document.getElementById('radius-slider').value);
  if (isNaN(lat) || isNaN(lon)) {
    alert('Enter valid coordinates (or press to use your location).');
    return;
  }
  lastLat = lat; lastLon = lon; lastRadius = radius;

  const btn = document.getElementById('scan-btn');
  btn.textContent = '◌ SCANNING...';
  btn.disabled = true;

  const list = document.getElementById('ac-list');
  list.innerHTML = '<div style="text-align:center;padding:30px;color:var(--tm);font-size:11px"><span class="refresh-ring"></span> scanning airspace...</div>';

  try {
    const res = await fetch(`/api/adsb?lat=${lat}&lon=${lon}&radius=${radius}`);
    if (!res.ok) {
      let msg = `HTTP ${res.status}`;
      try { const j = await res.json(); if (j.error) msg = j.error; } catch(_){}
      throw new Error(msg);
    }
    const data = await res.json();
    // Update trails before replacing allAircraft.
    // Include altitude + heading so the detail panel can derive vertical rate and turn-rate.
    (data.aircraft || []).forEach(ac => {
      if (!ac.icao || !ac.lat || !ac.lon) return;
      if (!trailData[ac.icao]) trailData[ac.icao] = [];
      trailData[ac.icao].push({
        lat: ac.lat, lon: ac.lon, ts: Date.now(),
        alt: ac.altitude != null ? ac.altitude : null,
        hdg: ac.heading  != null ? ac.heading  : null,
      });
      if (trailData[ac.icao].length > 8) trailData[ac.icao].shift();
    });
    allAircraft = data.aircraft || [];
    allAircraft.forEach(ac => { if (!ac.risk) ac.risk = scoreAc(ac); });
    // Recenter map on scan location for nicer UX
    try { map.setView([lat, lon], Math.max(7, map.getZoom())); } catch(_){}
    renderAll(lat, lon, radius, data);
    console.log(`[ADS-B] scan OK — ${allAircraft.length} aircraft, sources:`, data.sources);
  } catch(e) {
    console.error('[ADS-B] scan failed:', e);
    list.innerHTML = `<div style="color:var(--danger);padding:20px;text-align:center;font-size:11px">
      ✖ Scan failed<br><span style="color:var(--tm);font-size:10px">${escapeHtml((e && e.message) || 'Connection error')}</span>
    </div>`;
  } finally {
    btn.textContent = 'SCAN';
    btn.disabled = false;
  }
}

function renderAll(lat, lon, radius, data) {
  updateStats(data);
  updateMap(lat, lon, radius);
  renderList();
  renderTable();
  checkEmergencies();
  checkWatchlist(allAircraft);
  if (darkopsOn) renderDarkOps();
  // Refresh overlays that depend on aircraft data
  if (overlayState.heatmap) { buildAviationHeatmap(); if (aviationHeatLayer) aviationHeatLayer.addTo(map); }
  if (overlayState.drone)   updateDroneHud();
}

// ── Stats ─────────────────────────────────────────
function updateStats(data) {
  const total = allAircraft.length;
  const drones = allAircraft.filter(a => a.type === 'drone').length;
  const emergencies = allAircraft.filter(a => isEmergency(a.squawk)).length;
  const altitudes = allAircraft.map(a => a.altitude).filter(a => a !== null && a !== undefined);
  const maxAlt = altitudes.length ? Math.max(...altitudes) : null;
  const sources = [...new Set(allAircraft.map(a => a.source).filter(Boolean))].length;

  document.getElementById('st-total').textContent = total;
  document.getElementById('st-drone').textContent = drones;
  document.getElementById('st-emergency').textContent = emergencies;
  document.getElementById('st-max-alt').textContent = maxAlt !== null ? maxAlt.toLocaleString() : '—';
  document.getElementById('st-sources').textContent = sources;

  const row = document.getElementById('stats-row');
  row.style.display = total > 0 ? 'grid' : 'none';
}

// ── Color helper (mode + theme aware) ────────────────
function getAcColor(ac) {
  if (currentMode === 'military') {
    if (isMilitary(ac)) return '#FF9500';
    if (isSuspicious(ac)) return '#FBBF24';
    return 'rgba(255,255,255,0.12)';
  }
  if (darkopsOn) {
    return isEmergency(ac.squawk) ? '#ff4466' : ac.type==='drone' ? '#ff00aa' : '#00ff88';
  }
  return isEmergency(ac.squawk) ? '#F87171' : ac.type==='drone' ? '#FF2288' : '#88AAFF';
}

// ── Icon factory (color + glow aware) ────────────────
function makeAcIconColored(ac, color) {
  const heading = ac.heading || 0;
  const isDrone = ac.type === 'drone';
  const size = isDrone ? 20 : 26;
  const glow = darkopsOn ? `filter:drop-shadow(0 0 5px ${color})` : '';
  const svg = isDrone
    ? `<svg width="20" height="20" viewBox="0 0 20 20" style="${glow}" xmlns="http://www.w3.org/2000/svg">
        <circle cx="10" cy="10" r="3.5" fill="${color}" opacity="0.9"/>
        <circle cx="3" cy="3" r="2.2" fill="${color}" opacity="0.6"/>
        <circle cx="17" cy="3" r="2.2" fill="${color}" opacity="0.6"/>
        <circle cx="3" cy="17" r="2.2" fill="${color}" opacity="0.6"/>
        <circle cx="17" cy="17" r="2.2" fill="${color}" opacity="0.6"/>
        <line x1="5" y1="5" x2="8.5" y2="8.5" stroke="${color}" stroke-width="1" opacity="0.6"/>
        <line x1="15" y1="5" x2="11.5" y2="8.5" stroke="${color}" stroke-width="1" opacity="0.6"/>
        <line x1="5" y1="15" x2="8.5" y2="11.5" stroke="${color}" stroke-width="1" opacity="0.6"/>
        <line x1="15" y1="15" x2="11.5" y2="11.5" stroke="${color}" stroke-width="1" opacity="0.6"/>
      </svg>`
    : `<svg width="${size}" height="${size}" viewBox="0 0 26 26"
        style="${glow};transform:rotate(${Number(heading)||0}deg);transform-origin:center"
        xmlns="http://www.w3.org/2000/svg">
        <polygon points="13,2 17,17 13,14 9,17" fill="${color}" opacity="0.95"/>
        <line x1="6" y1="12" x2="20" y2="12" stroke="${color}" stroke-width="1.5" opacity="0.55"/>
        <line x1="10" y1="15.5" x2="16" y2="15.5" stroke="${color}" stroke-width="1" opacity="0.35"/>
      </svg>`;
  return L.divIcon({ html:svg, className:'', iconSize:[size,size], iconAnchor:[size/2,size/2] });
}

// ── Map rendering ──────────────────────────────────
function updateMap(lat, lon, radius) {
  if (!lat || !lon) return;
  acLayer.clearLayers();
  trailLayer.clearLayers();
  clearModeLayers();
  ringLayers.forEach(l => map.removeLayer(l));
  ringLayers = [];
  if (scanCircle) { map.removeLayer(scanCircle); }

  // Main scan circle
  scanCircle = L.circle([lat, lon], {
    radius: radius * 1000,
    color: 'rgba(139,92,246,0.35)', fillColor: 'rgba(139,92,246,0.03)', weight: 1
  }).addTo(map);

  // Range rings
  if (document.getElementById('show-rings')?.checked) {
    [0.25, 0.5, 0.75].forEach(f => {
      const r = radius * f;
      const ring = L.circle([lat, lon], {
        radius: r * 1000,
        color: 'rgba(139,92,246,0.15)', fill: false, weight: 1,
        dashArray: '4,8'
      }).addTo(map);
      // Label
      const labelIcon = L.divIcon({
        html: `<span style="font-size:9px;color:rgba(139,92,246,0.5);font-family:monospace;white-space:nowrap">${Math.round(r)}km</span>`,
        className: '', iconAnchor: [0, 0]
      });
      const ringLabel = L.marker([lat + (r/111), lon], { icon: labelIcon }).addTo(map);
      ringLayers.push(ring, ringLabel);
    });
  }

  // Center marker
  L.circleMarker([lat, lon], {
    radius: 6, color: '#4ADE80', fillColor: '#4ADE80', fillOpacity: 1, weight: 2
  }).bindPopup('<b style="font-family:monospace;color:#4ADE80">⊕ SCAN ORIGIN</b>').addTo(acLayer);

  // Trails
  if (document.getElementById('show-trails')?.checked) {
    Object.entries(trailData).forEach(([icao, pts]) => {
      if (pts.length < 2) return;
      const ac = allAircraft.find(a => a.icao === icao);
      const color = ac ? (isEmergency(ac.squawk) ? '#F87171' : ac.type === 'drone' ? '#FF2288' : '#88AAFF') : '#555';
      L.polyline(pts.map(p => [p.lat, p.lon]), {
        color, weight: 1.5, opacity: 0.4, dashArray: '4,6'
      }).addTo(trailLayer);
    });
  }

  // Mode: heatmap
  if (currentMode === 'heatmap') { renderHeatmap(); return; }
  // Mode: airport
  if (currentMode === 'airport' && currentAirport) renderAirportFocus(currentAirport);

  // Aircraft markers
  const filtered = getFiltered();
  filtered.forEach(ac => {
    if (!ac.lat || !ac.lon) return;
    const color = isEmergency(ac.squawk) ? '#F87171' : ac.type === 'drone' ? '#FF2288' : '#88AAFF';
    const marker = L.marker([ac.lat, ac.lon], { icon: makeAcIconColored(ac, color) });
    const altStr = ac.altitude != null ? `${ac.altitude.toLocaleString()} ft` : '—';
    const spdStr = ac.velocity != null ? `${ac.velocity} kts` : '—';
    const hdgStr = ac.heading != null ? `${ac.heading}°` : '—';
    const sqInfo = SQUAWK_DECODE[String(ac.squawk||'')];
    const rColor = (ac.risk||0)>=70?'#F87171':(ac.risk||0)>=40?'#FBBF24':'#4ADE80';
    const altTier = ac.altitude == null ? 'UNKNOWN' : ac.altitude < 1000 ? 'VERY LOW' : ac.altitude < 10000 ? 'LOW' : ac.altitude < 30000 ? 'MEDIUM' : 'HIGH';

    marker.bindPopup(`
      <div style="font-family:'JetBrains Mono',monospace;font-size:11px;min-width:200px;background:#0F140F;color:#E2E2EC;padding:2px">
        <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;padding-bottom:6px;border-bottom:1px solid rgba(255,255,255,0.08)">
          <span style="color:${color};font-family:'Rajdhani',sans-serif;font-weight:700;font-size:15px">${escapeHtml(ac.callsign||'UNKNOWN')}</span>
          <span style="color:#9896AE;font-size:10px">${escapeHtml(ac.icao||'')}</span>
        </div>
        <div style="display:grid;grid-template-columns:1fr 1fr;gap:4px 12px;font-size:10px">
          <span style="color:#9896AE">TYPE</span><span style="color:${color}">${escapeHtml((ac.type||'?').toUpperCase())}</span>
          <span style="color:#9896AE">ALTITUDE</span><span style="color:${ac.altitude<1000?'#FBBF24':'#E2E2EC'}">${escapeHtml(altStr)} <span style="color:#9896AE;font-size:9px">(${altTier})</span></span>
          <span style="color:#9896AE">SPEED</span><span>${escapeHtml(spdStr)}</span>
          <span style="color:#9896AE">HEADING</span><span>${escapeHtml(hdgStr)}</span>
          <span style="color:#9896AE">SQUAWK</span><span style="color:${sqInfo?.color||'#9896AE'}">${escapeHtml(ac.squawk||'—')} ${sqInfo?`(${sqInfo.label})`:''}${isEmergency(ac.squawk)?'':''}</span>
          <span style="color:#9896AE">COUNTRY</span><span>${escapeHtml(ac.country||'—')}</span>
          <span style="color:#9896AE">RISK</span><span style="color:${rColor};font-weight:700">${escapeHtml(ac.risk||0)}/100</span>
          <span style="color:#9896AE">SOURCE</span><span style="color:#A78BFA">${escapeHtml(ac.source||'—')}</span>
        </div>
        <div style="margin-top:8px;padding-top:6px;border-top:1px solid rgba(255,255,255,0.06);text-align:center">
          <span onclick="selectAircraft(${escapeHtml(JSON.stringify(ac))})"
            style="color:#A78BFA;cursor:pointer;font-size:10px;letter-spacing:1px">▸ FULL DETAILS</span>
        </div>
      </div>
    `, { className: 'dark-popup', maxWidth: 240 });
    marker.on('click', () => selectAircraft(ac));

    // Callsign label
    if (document.getElementById('show-labels')?.checked && (ac.callsign||ac.icao)) {
      const cs = ac.callsign || ac.icao || '';
      const labelCls = isEmergency(ac.squawk) ? 'cs-label emg' : isMilitary(ac) ? 'cs-label mil' : 'cs-label';
      L.marker([ac.lat, ac.lon], {
        icon: L.divIcon({ html:`<div class="${labelCls}">${escapeHtml(cs)}</div>`, className:'', iconAnchor:[-14, 8] }),
        interactive: false
      }).addTo(acLayer);
    }

    // Mode-specific extras
    if (currentMode === 'military' && (isMilitary(ac) || isSuspicious(ac))) {
      L.circle([ac.lat,ac.lon], { radius:12000, color, fill:false, weight:1, opacity:0.2, dashArray:'5,8' }).addTo(acLayer);
      marker.addTo(militaryLayer);
    } else {
      marker.addTo(acLayer);
    }
  });

  if (filtered.length > 0) {
    map.setView([lat, lon], Math.max(5, 10 - Math.floor(radius/50)));
  }
}

// ── Aircraft List ─────────────────────────────────
function renderList() {
  const list = document.getElementById('ac-list');
  const filtered = getFiltered();
  if (!filtered.length) {
    list.innerHTML = '<div style="text-align:center;padding:30px;color:var(--tm);font-size:11px">No aircraft found</div>';
    return;
  }
  list.innerHTML = filtered.map(ac => {
    const isDrone = ac.type === 'drone';
    const isEmerg = isEmergency(ac.squawk);
    const color = isEmerg ? '#F87171' : isDrone ? '#FF2288' : '#88AAFF';
    const altStr = ac.altitude !== null && ac.altitude !== undefined ? `${ac.altitude.toLocaleString()}ft` : '—';
    const spdStr = ac.velocity !== null && ac.velocity !== undefined ? `${ac.velocity}kts` : '—';
    const rColor = ac.risk >= 70 ? '#F87171' : ac.risk >= 40 ? '#FBBF24' : '#4ADE80';
    return `<div class="ac-row ${selectedIcao === ac.icao ? 'selected' : ''}"
        onclick="selectAircraft(${escapeHtml(JSON.stringify(ac))})"
        style="padding:10px 14px;border-bottom:1px solid var(--b)">
      <div style="display:flex;justify-content:space-between;align-items:center">
        <span style="font-family:'Rajdhani',sans-serif;font-weight:700;color:${color};font-size:13px">
          ${escapeHtml(ac.callsign || '?????')}
        </span>
        <span style="font-size:9px;color:var(--tm);font-family:monospace">${escapeHtml(ac.icao||'')}</span>
      </div>
      <div style="display:flex;gap:12px;margin-top:4px;font-size:10px;color:var(--td)">
        <span>↑ ${escapeHtml(altStr)}</span>
        <span>⊙ ${escapeHtml(spdStr)}</span>
        ${ac.squawk ? `<span class="squawk-pill ${SQUAWK_DECODE[ac.squawk]?.cls||''}" style="font-size:9px">${escapeHtml(ac.squawk)}</span>` : ''}
      </div>
      <div class="alt-bar"><div class="alt-fill" style="width:${Math.min((ac.altitude||0)/450,100)}%;background:${color};opacity:0.5"></div></div>
    </div>`;
  }).join('');
}

// ── Full Table ─────────────────────────────────────
function renderTable() {
  const filtered = getFiltered();
  document.getElementById('table-count').textContent = `${filtered.length} aircraft`;
  if (!filtered.length) {
    document.getElementById('ac-table').style.display = 'none';
    document.getElementById('table-empty').style.display = 'block';
    return;
  }
  document.getElementById('table-empty').style.display = 'none';
  document.getElementById('ac-table').style.display = 'table';
  const riskColor = r => r>=70?'#F87171':r>=40?'#FBBF24':'#4ADE80';
  const typeColor = { aircraft:'#88AAFF', drone:'#FF2288' };

  document.getElementById('ac-tbody').innerHTML = filtered.map(ac => {
    const isDrone = ac.type === 'drone';
    const isEmerg = isEmergency(ac.squawk);
    const rowClass = isEmerg ? 'squawk-emergency' : '';
    return `<tr class="ac-row ${rowClass}" onclick="selectAircraft(${escapeHtml(JSON.stringify(ac))})">
      <td style="color:${isEmerg?'#F87171':'var(--t)'};font-family:'Rajdhani',sans-serif;font-weight:700">
        ${escapeHtml(ac.callsign || '?????')}
        ${!ac.callsign || ac.callsign===ac.icao ? '<span class="badge badge-warn" style="margin-left:4px;font-size:8px">UNID</span>' : ''}
      </td>
      <td style="font-family:monospace;font-size:10px;color:var(--td)">${escapeHtml(ac.icao||'—')}</td>
      <td><span style="color:${typeColor[ac.type]||'#9896AE'};font-family:'Rajdhani',sans-serif;font-weight:600">
        ${escapeHtml((ac.type||'?').toUpperCase())}</span></td>
      <td style="color:${(ac.altitude||0)<1000?'#FBBF24':'var(--td)'}">
        ${ac.altitude!==null&&ac.altitude!==undefined ? escapeHtml(ac.altitude.toLocaleString())+' ft' : '—'}
      </td>
      <td>${ac.velocity!==null&&ac.velocity!==undefined ? escapeHtml(ac.velocity)+' kts' : '—'}</td>
      <td style="font-size:10px">${ac.heading!==null&&ac.heading!==undefined ? escapeHtml(ac.heading)+'°' : '—'}</td>
      <td>${squawkPill(ac.squawk)}</td>
      <td style="font-size:10px">${escapeHtml(ac.country||'—')}</td>
      <td><span class="badge badge-info" style="font-size:9px">${escapeHtml(ac.source||'—')}</span></td>
      <td>
        <span style="color:${riskColor(ac.risk||0)};font-weight:600">${ac.risk||0}</span>
        <div class="alt-bar"><div class="alt-fill" style="width:${ac.risk||0}%;background:${riskColor(ac.risk||0)}"></div></div>
      </td>
    </tr>`;
  }).join('');
}

// ── Filter ────────────────────────────────────────
function getFiltered() {
  const tf = document.getElementById('type-filter').value;
  if (tf === 'emergency') return allAircraft.filter(a => isEmergency(a.squawk));
  if (tf) return allAircraft.filter(a => a.type === tf);
  return allAircraft;
}

// ── Detail Panel ──────────────────────────────────
// ═══════════════════════════════════════════════════════════════
//  DETAIL PANEL HELPERS — rich aircraft data extraction
// ═══════════════════════════════════════════════════════════════

// Cardinal direction from bearing
function bearingToCardinal(deg) {
  if (deg == null) return '—';
  const dirs = ['N','NNE','NE','ENE','E','ESE','SE','SSE','S','SSW','SW','WSW','W','WNW','NW','NNW'];
  return dirs[Math.round(((deg % 360) / 22.5)) % 16];
}

// Seconds → "Xs / Xm Ys / Xh Ym"
function fmtDuration(secs) {
  if (secs == null || secs < 0) return '—';
  if (secs < 60)  return Math.round(secs) + 's';
  if (secs < 3600) return Math.floor(secs/60) + 'm ' + Math.round(secs%60) + 's';
  const h = Math.floor(secs/3600); const m = Math.floor((secs%3600)/60);
  return h + 'h ' + m + 'm';
}

// Value → "Xs ago". Handles:
//  - small integers (seconds since last seen, e.g. 2 → "2s ago")
//  - epoch seconds (e.g. 1712345678 → calculated)
//  - epoch milliseconds (e.g. 1712345678000 → calculated)
function fmtAgo(ts) {
  if (ts == null) return '—';
  if (ts < 86400) {  // assume "seconds since last seen" if under 1 day
    const secs = Number(ts);
    if (secs < 60)  return Math.round(secs) + 's ago';
    if (secs < 3600) return Math.floor(secs/60) + 'm ago';
    return Math.floor(secs/3600) + 'h ago';
  }
  const t = ts > 2e12 ? ts : ts * 1000;  // normalise to ms
  const diff = (Date.now() - t) / 1000;
  if (diff < 0)   return 'just now';
  if (diff < 60)  return Math.round(diff) + 's ago';
  if (diff < 3600) return Math.floor(diff/60) + 'm ago';
  return Math.floor(diff/3600) + 'h ago';
}

// Derive flight phase from altitude + vertical rate + speed + on-ground flag
function derivePhase(ac, verticalRate) {
  if (ac.on_ground || ac.ground === true) return {name:'GROUND', cls:'phase-ground'};
  const alt = ac.altitude;
  const spd = ac.velocity;
  if (alt != null && alt < 100 && (spd == null || spd < 80)) return {name:'TAXI', cls:'phase-taxi'};
  if (verticalRate != null && verticalRate > 500)  return {name:'CLIMB',   cls:'phase-climb'};
  if (verticalRate != null && verticalRate < -500) return {name:'DESCENT', cls:'phase-descent'};
  if (alt != null && alt < 10000 && spd != null && spd < 250) return {name:'APPROACH', cls:'phase-approach'};
  if (alt != null && alt > 20000) return {name:'CRUISE', cls:'phase-cruise'};
  return {name:'EN-ROUTE', cls:'phase-cruise'};
}

// ICAO emitter category (A0-A7, B0-B7, C0-C7) human label
const ICAO_CATEGORY_LABELS = {
  'A0':'No info','A1':'Light (<7t)','A2':'Small (7-34t)','A3':'Large (34-136t)',
  'A4':'High-vortex','A5':'Heavy (>136t)','A6':'High-performance','A7':'Rotorcraft',
  'B0':'No info','B1':'Glider','B2':'Lighter-than-air','B3':'Parachutist',
  'B4':'Ultralight','B6':'UAV/Drone','B7':'Space vehicle',
  'C0':'No info','C1':'Emergency vehicle','C2':'Service vehicle','C3':'Point obstacle'
};

// From trail history, derive: vertical rate (ft/min), avg speed (kts), track distance (km), turning
function deriveFromTrail(ac, trail) {
  if (!trail || trail.length < 2) return {};
  const first = trail[0];
  const last  = trail[trail.length - 1];
  const dtSec = Math.max(1, (last.ts - first.ts) / 1000);
  const out = { trail_points: trail.length, trail_duration_s: dtSec };

  // Distance travelled along the trail
  let totalKm = 0;
  for (let i = 1; i < trail.length; i++) {
    totalKm += distKm(trail[i-1].lat, trail[i-1].lon, trail[i].lat, trail[i].lon);
  }
  out.trail_km = totalKm;
  out.trail_avg_kts = (totalKm * 0.539957) / (dtSec / 3600);  // km → nm → kts

  // Vertical rate from first vs last altitude (if trail has altitude recorded, else skip)
  if (first.alt != null && last.alt != null) {
    out.vertical_rate_fpm = Math.round((last.alt - first.alt) / (dtSec / 60));
  }

  // Heading change (turning indicator)
  if (trail.length >= 3) {
    const a = trail[trail.length - 2];
    const b = trail[trail.length - 1];
    if (a.hdg != null && b.hdg != null) {
      let diff = b.hdg - a.hdg;
      while (diff > 180)  diff -= 360;
      while (diff < -180) diff += 360;
      out.turn_deg = Math.round(diff);
    }
  }
  return out;
}

// Detect closing vs opening relative to observer (lastLat/lastLon)
function closingAnalysis(ac, obsLat, obsLon) {
  if (ac.lat == null || ac.lon == null || ac.heading == null) return null;
  const bearingFromObs = bearingBetween(obsLat, obsLon, ac.lat, ac.lon);
  const bearingToObs = (bearingFromObs + 180) % 360;
  const delta = angleDiff(ac.heading, bearingToObs);
  if (delta < 30)  return {type:'CLOSING', angle: Math.round(delta)};
  if (delta > 150) return {type:'OPENING', angle: Math.round(180 - delta)};
  return {type:'CROSSING', angle: Math.round(delta)};
}

function selectAircraft(ac) {
  if (typeof ac === 'string') ac = JSON.parse(ac);
  selectedIcao = ac.icao;
  currentDetail = ac;
  renderList();

  if (ac.lat && ac.lon) { map.setView([ac.lat, ac.lon], 10); }

  const panel = document.getElementById('detail-panel');

  // ═══ HEADER: title + subtitle ═══
  const registration = ac.registration || ac.reg || ac.tail || '';
  const model = ac.model || ac.type_designator || ac.aircraft_type || '';
  const operator = ac.operator || ac.airline || ac.owner || '';
  const headerMain = (ac.callsign || 'UNIDENTIFIED') + ' / ' + (ac.icao || '—').toUpperCase();
  document.getElementById('detail-title').textContent = headerMain;

  const subBits = [];
  if (registration) subBits.push(registration);
  if (model) subBits.push(model);
  if (operator) subBits.push(operator);
  if (ac.country) subBits.push('' + ac.country);
  document.getElementById('detail-subtitle').textContent = subBits.length ? subBits.join(' · ') : 'No registry / operator data';

  // ═══ Trail-derived values ═══
  const trail = trailData[ac.icao] || [];
  // Inject altitude + heading into trail points for derivation (backward-compat)
  if (trail.length > 0) {
    const lastPt = trail[trail.length - 1];
    if (lastPt && lastPt.alt == null && ac.altitude != null) lastPt.alt = ac.altitude;
    if (lastPt && lastPt.hdg == null && ac.heading != null)  lastPt.hdg = ac.heading;
  }
  const trailDer = deriveFromTrail(ac, trail);

  // Prefer backend-supplied vertical_rate if present, else trail-derived
  const verticalRate = (ac.vertical_rate != null || ac.vertical_speed != null)
    ? (ac.vertical_rate ?? ac.vertical_speed)
    : trailDer.vertical_rate_fpm;

  // ═══ Flight phase ═══
  const phase = derivePhase(ac, verticalRate);
  const phaseBadge = document.getElementById('detail-phase-badge');
  phaseBadge.textContent = phase.name;
  phaseBadge.className = 'badge ' + phase.cls;
  phaseBadge.style.display = 'inline-block';

  // ═══ Type badge ═══
  const tb = document.getElementById('detail-type-badge');
  tb.textContent = (ac.type||'AIRCRAFT').toUpperCase();
  tb.className = 'badge ' + (ac.type==='drone'?'badge-err': isEmergency(ac.squawk)?'badge-warn':'badge-info');

  // ═══ Formatting helpers ═══
  const altStr = ac.altitude != null ? ac.altitude.toLocaleString() + ' ft' : '—';
  const altM   = ac.altitude != null ? '(' + Math.round(ac.altitude * 0.3048).toLocaleString() + ' m)' : '';
  const spdStr = ac.velocity != null ? ac.velocity + ' kts' : '—';
  const spdKmh = ac.velocity != null ? '(' + Math.round(ac.velocity * 1.852) + ' km/h)' : '';
  const hdgStr = ac.heading != null ? ac.heading + '° ' + bearingToCardinal(ac.heading) : '—';
  const sq = ac.squawk || '—';
  const sqInfo = SQUAWK_DECODE[String(sq)];

  // Altitude tier
  const altTier = ac.altitude == null ? '—'
    : ac.altitude < 500   ? 'VERY LOW'
    : ac.altitude < 3000  ? 'LOW'
    : ac.altitude < 15000 ? 'MEDIUM'
    : ac.altitude < 30000 ? 'HIGH'
    : 'CRUISE LEVEL';

  // Speed category
  const spdCat = ac.velocity == null ? '—'
    : ac.velocity < 30  ? 'HOVER'
    : ac.velocity < 100 ? 'SLOW'
    : ac.velocity < 250 ? 'MODERATE'
    : ac.velocity < 500 ? 'HIGH'
    : 'VERY HIGH';

  // ICAO category label
  const icaoCat = ac.category ? (ICAO_CATEGORY_LABELS[ac.category] || ac.category) : null;

  // ═══ COLUMN 1: IDENTIFICATION ═══
  document.getElementById('detail-body').innerHTML = `
    <div class="dk">ICAO Hex</div><div class="dv dv-mono" style="color:var(--pl)">${escapeHtml((ac.icao||'—').toUpperCase())}</div>
    <div class="dk">Callsign</div><div class="dv">${ac.callsign ? escapeHtml(ac.callsign) : '<span class="dv-warn">UNIDENTIFIED</span>'}</div>
    <div class="dk">Registration</div><div class="dv">${registration ? '<span class="dv-mono">' + escapeHtml(registration) + '</span>' : '<span class="dv-small">—</span>'}</div>
    <div class="dk">Model</div><div class="dv">${model ? escapeHtml(model) : '<span class="dv-small">—</span>'}</div>
    <div class="dk">Operator</div><div class="dv dv-small">${escapeHtml(operator || '—')}</div>
    <div class="dk">Country</div><div class="dv">${ac.country ? escapeHtml(ac.country) : '<span class="dv-small">—</span>'}</div>
    <div class="dk">Category</div><div class="dv dv-small">${escapeHtml(icaoCat || '—')}${ac.category ? ' <span style="color:var(--tm)">(' + escapeHtml(ac.category) + ')</span>' : ''}</div>
    <div class="dk">Type</div><div class="dv">${escapeHtml((ac.type||'aircraft').toUpperCase())}</div>
  `;
  document.getElementById('detail-body').dataset.soHex = '';
  soEnrichAircraft(ac, !!registration, !!model, !!operator);

  // ═══ COLUMN 2: FLIGHT DATA ═══
  // Trend class for altitude
  let altTrend = 'trend-level';
  if (verticalRate != null) {
    if (verticalRate > 200)  altTrend = 'trend-up';
    else if (verticalRate < -200) altTrend = 'trend-down';
  }

  const vRateDisplay = verticalRate != null
    ? `<span class="${altTrend}">${Math.abs(verticalRate).toLocaleString()} ft/min</span>`
    : '<span class="dv-small">—</span>';

  const groundStr = (ac.on_ground || ac.ground === true)
    ? '<span class="dv-warn">ON GROUND</span>'
    : '<span class="dv-ok">AIRBORNE</span>';

  document.getElementById('detail-flight').innerHTML = `
    <div class="dk">Altitude</div><div class="dv ${ac.altitude!=null && ac.altitude<1000?'dv-warn':''}">${escapeHtml(altStr)} <span class="dv-small">${altM}</span></div>
    <div class="dk">Alt Tier</div><div class="dv dv-small">${altTier}</div>
    <div class="dk">V/S (climb)</div><div class="dv">${vRateDisplay}</div>
    <div class="dk">Speed</div><div class="dv">${escapeHtml(spdStr)} <span class="dv-small">${spdKmh}</span></div>
    <div class="dk">Spd Class</div><div class="dv dv-small">${spdCat}</div>
    <div class="dk">Heading</div><div class="dv">${escapeHtml(hdgStr)}</div>
    <div class="dk">Turning</div><div class="dv dv-small">${trailDer.turn_deg != null ? (Math.abs(trailDer.turn_deg) < 3 ? 'STRAIGHT' : (trailDer.turn_deg > 0 ? 'R ' + trailDer.turn_deg + '°' : 'L ' + Math.abs(trailDer.turn_deg) + '°')) : '—'}</div>
    <div class="dk">Squawk</div><div class="dv"><span class="squawk-pill ${sqInfo?.cls||''}">${escapeHtml(sq)}</span>${sqInfo ? ' <span class="dv-small" style="margin-left:4px">' + sqInfo.label + '</span>' : ''}</div>
    <div class="dk">Status</div><div class="dv">${groundStr}</div>
  `;

  // ═══ COLUMN 4 (BOTTOM-LEFT): NAVIGATION ═══
  const coordStr = (ac.lat != null && ac.lon != null)
    ? ac.lat.toFixed(5) + ', ' + ac.lon.toFixed(5)
    : '—';

  // Distance + bearing from scan center
  let obsBlock = '';
  if (ac.lat != null && ac.lon != null && lastLat && lastLon) {
    const dKm = distKm(lastLat, lastLon, ac.lat, ac.lon);
    const dNm = dKm * 0.539957;
    const bFromObs = bearingBetween(lastLat, lastLon, ac.lat, ac.lon);
    const closing = closingAnalysis(ac, lastLat, lastLon);
    const etaMin = (ac.velocity != null && ac.velocity > 0 && closing && closing.type === 'CLOSING')
      ? Math.round((dNm / ac.velocity) * 60) : null;
    obsBlock = `
      <div class="dk">Dist → Obs</div><div class="dv">${dKm.toFixed(1)} km <span class="dv-small">(${dNm.toFixed(1)} nm)</span></div>
      <div class="dk">Bearing</div><div class="dv">${Math.round(bFromObs)}° ${bearingToCardinal(bFromObs)}</div>
      <div class="dk">Relative</div><div class="dv ${closing?.type==='CLOSING'?'dv-warn':''}">${closing ? closing.type + ' @ ' + closing.angle + '°' : '—'}</div>
      ${etaMin != null && etaMin < 600 ? `<div class="dk">ETA → Obs</div><div class="dv dv-info">${etaMin} min</div>` : ''}
    `;
  }

  document.getElementById('detail-nav').innerHTML = `
    <div class="dk">Position</div><div class="dv dv-mono">${escapeHtml(coordStr)}</div>
    ${obsBlock}
    <div class="dk">Trail Pts</div><div class="dv dv-small">${trailDer.trail_points != null ? trailDer.trail_points + ' samples' : (trail.length > 0 ? trail.length + ' samples' : '<span style="color:var(--tm)">none</span>')}</div>
    <div class="dk">Trail Dist</div><div class="dv dv-small">${trailDer.trail_km != null ? trailDer.trail_km.toFixed(1) + ' km' : '—'}</div>
    <div class="dk">Tracked</div><div class="dv dv-small">${trailDer.trail_duration_s != null ? fmtDuration(trailDer.trail_duration_s) : '—'}</div>
    <div class="dk">Avg Speed</div><div class="dv dv-small">${trailDer.trail_avg_kts != null ? Math.round(trailDer.trail_avg_kts) + ' kts' : '—'}</div>
  `;

  // ═══ COLUMN 5 (BOTTOM-RIGHT): TELEMETRY & SIGNAL ═══
  const rssi = ac.rssi != null ? ac.rssi : ac.signal;
  const messages = ac.messages || ac.msg_count || ac.total_messages;
  const lastSeen = ac.seen != null ? ac.seen : (ac.last_seen || ac.lastseen);
  const nacp = ac.nacp != null ? ac.nacp : ac.nac_p;
  const nacv = ac.nacv != null ? ac.nacv : ac.nac_v;

  // Signal strength bar
  let rssiBar = '';
  if (rssi != null) {
    // RSSI typically -50 (strong) to -30 (weak), or 0-100 in some APIs
    const r = rssi < 0 ? Math.max(0, Math.min(100, (rssi + 50) * 5)) : rssi;
    const col = r > 60 ? '#4ADE80' : r > 30 ? '#FBBF24' : '#F87171';
    rssiBar = `<div style="height:3px;background:rgba(255,255,255,0.08);border-radius:2px;margin-top:3px"><div style="height:3px;width:${r}%;background:${col};border-radius:2px"></div></div>`;
  }

  // NAC-P interpretation (0=unknown, 11=best; <7 = degraded, possible GPS jamming)
  let nacpLabel = '';
  if (nacp != null) {
    if (nacp >= 9)       nacpLabel = ' <span class="dv-ok dv-small">HIGH</span>';
    else if (nacp >= 7)  nacpLabel = ' <span class="dv-small" style="color:var(--td)">OK</span>';
    else if (nacp >= 4)  nacpLabel = ' <span class="dv-warn dv-small">DEGRADED</span>';
    else                 nacpLabel = ' <span class="dv-danger dv-small">JAMMED?</span>';
  }

  document.getElementById('detail-telemetry').innerHTML = `
    <div class="dk">Source</div><div class="dv"><span class="badge badge-info" style="font-size:9px">${escapeHtml(ac.source||'—')}</span></div>
    <div class="dk">Signal (RSSI)</div><div class="dv">${rssi != null ? escapeHtml(rssi) + ' dBm' + rssiBar : '<span class="dv-small">—</span>'}</div>
    <div class="dk">Messages</div><div class="dv dv-small">${messages != null ? escapeHtml(messages.toLocaleString()) : '—'}</div>
    <div class="dk">Last Seen</div><div class="dv dv-small">${lastSeen != null ? escapeHtml(fmtAgo(lastSeen)) : '—'}</div>
    <div class="dk">NAC-P</div><div class="dv">${nacp != null ? escapeHtml(nacp) + '/11' + nacpLabel : '<span class="dv-small">—</span>'}</div>
    <div class="dk">NAC-V</div><div class="dv dv-small">${nacv != null ? escapeHtml(nacv) + '/4' : '—'}</div>
    <div class="dk">Total Risk</div><div class="dv" style="color:${(ac.risk||0)>=70?'#F87171':(ac.risk||0)>=40?'#FBBF24':'#4ADE80'};font-family:'Rajdhani',sans-serif;font-size:14px;font-weight:700">${ac.risk||0}<span style="font-size:10px;color:var(--tm)">/100</span></div>
  `;

  // ═══ THREAT BREAKDOWN (middle column) ═══
  const threats = [
    { lbl:'Emergency Squawk', val: isEmergency(ac.squawk) ? 70 : 0, max:70 },
    { lbl:'Drone Pattern',    val: ac.type==='drone' ? 40 : 0, max:40 },
    { lbl:'Low Altitude',     val: ac.altitude!=null ? Math.max(0, Math.min(30, (1000-(ac.altitude||9999))/1000*30)) : 0, max:30 },
    { lbl:'Slow Speed',       val: ac.velocity!=null && ac.velocity<60 ? Math.min(20, (60-(ac.velocity||99))/60*20) : 0, max:20 },
    { lbl:'Unidentified',     val: (!ac.callsign || ac.callsign===ac.icao) ? 10 : 0, max:10 },
    { lbl:'GPS Degraded',     val: nacp != null && nacp < 7 ? Math.min(25, (7-nacp)*5) : 0, max:25 },
  ];
  const tColor = v => v>=20?'#F87171':v>=8?'#FBBF24':'#4ADE80';
  document.getElementById('detail-threats').innerHTML = threats.map(t => {
    const pct = t.max > 0 ? Math.round((t.val/t.max)*100) : 0;
    return `<div class="threat-row">
      <span class="threat-lbl">${t.lbl}</span>
      <div class="threat-track"><div class="threat-fill" style="width:${pct}%;background:${tColor(t.val)}"></div></div>
      <span class="threat-val" style="color:${tColor(t.val)}">${Math.round(t.val)}</span>
    </div>`;
  }).join('') + `
    <div style="margin-top:10px;padding-top:8px;border-top:1px solid var(--b);display:flex;justify-content:space-between;align-items:center">
      <span style="font-size:10px;color:var(--tm);letter-spacing:1.5px">COMPUTED RISK</span>
      <span style="font-family:'Rajdhani',sans-serif;font-size:24px;font-weight:700;color:${(ac.risk||0)>=70?'#F87171':(ac.risk||0)>=40?'#FBBF24':'#4ADE80'}">${ac.risk||0}<span style="font-size:12px;color:var(--tm)">/100</span></span>
    </div>`;

  // ═══ OPERATIONAL ASSESSMENT ═══
  const assessments = [];
  if (isEmergency(ac.squawk)) assessments.push(`<span class="dv-danger">EMERGENCY — Squawk ${escapeHtml(ac.squawk)} (${sqInfo?.label}). Immediate attention required.</span>`);
  if (ac.type === 'drone') assessments.push(`<span class="dv-warn">Drone/UAV profile detected</span> — low altitude + slow speed signature.`);
  if (ac.altitude != null && ac.altitude < 500 && !(ac.on_ground || ac.ground === true)) assessments.push(`<span class="dv-warn">Extremely low altitude (${escapeHtml(ac.altitude)} ft)</span> — landing, takeoff, or unauthorized operation possible.`);
  if (verticalRate != null && verticalRate < -2000) assessments.push(`<span class="dv-warn">Rapid descent (${Math.abs(verticalRate).toLocaleString()} ft/min)</span> — emergency descent or TCAS RA possible.`);
  if (verticalRate != null && verticalRate > 3000) assessments.push(`<span class="dv-info">↑ Aggressive climb (${verticalRate.toLocaleString()} ft/min)</span> — fighter profile or initial climbout.`);
  if (nacp != null && nacp < 5) assessments.push(`<span class="dv-danger">GPS accuracy severely degraded (NAC-P ${escapeHtml(nacp)}/11)</span> — possible GNSS jamming in the area.`);
  if (!ac.callsign || ac.callsign === ac.icao) assessments.push(`<span class="dv-small">ℹ No callsign advertised — private, military, or transponder-only operation.</span>`);
  if (ac.on_ground || ac.ground === true) assessments.push(`<span class="dv-small">ℹ Aircraft on ground (taxi or parked).</span>`);
  if (trailDer.turn_deg != null && Math.abs(trailDer.turn_deg) > 15) assessments.push(`<span class="dv-small">↻ Sharp turn detected (${Math.abs(trailDer.turn_deg)}° in last track sample).</span>`);
  if (!assessments.length) assessments.push(`<span class="dv-ok">✓ No immediate threat indicators. Normal flight profile.</span>`);
  document.getElementById('detail-assessment').innerHTML = assessments.join('<br>');

  // ═══ External links ═══
  const cs = ac.callsign || ac.icao || '';
  document.getElementById('detail-fr24-link').href = `https://www.flightradar24.com/${encodeURIComponent(cs)}`;
  document.getElementById('detail-ads-link').href  = `https://globe.adsbexchange.com/?icao=${encodeURIComponent(ac.icao||'')}`;
  document.getElementById('detail-fa-link').href   = `https://www.flightaware.com/live/flight/${encodeURIComponent(cs)}`;
  document.getElementById('detail-pf-link').href   = `https://planefinder.net/flight/${encodeURIComponent(cs)}`;
  document.getElementById('detail-jt-link').href   = registration
    ? `https://www.jetphotos.com/photo/keyword/${encodeURIComponent(registration)}`
    : `https://www.jetphotos.com/photo/keyword/${encodeURIComponent(ac.icao||cs)}`;

  panel.style.display = 'block';
  panel.scrollIntoView({ behavior:'smooth', block:'nearest' });

  // Load aircraft photo async
  loadAircraftPhoto(ac.icao, ac.callsign);
}

function closeDetail() {
  document.getElementById('detail-panel').style.display = 'none';
  selectedIcao = null;
  currentDetail = null;
  renderList();
}

// ── hexdb.io enrichment: route + registration/type when the feed lacks them (cached server-side) ──
function soEnrichAircraft(ac, hasReg, hasModel, hasOp) {
  const hex = (ac.icao || '').toUpperCase(), cs = (ac.callsign || '').trim();
  if (!hex && !cs) return;
  const qs = new URLSearchParams();
  if (/^[0-9A-F]{6}$/.test(hex)) qs.set('hex', hex);
  if (cs) qs.set('callsign', cs);
  fetch('/api/aircraft/info?' + qs.toString()).then(r => r.json()).then(info => {
    const body = document.getElementById('detail-body');
    if (!body || !info || info.error || body.dataset.soHex === hex + cs) return;
    if (!body.innerHTML.includes(escapeHtml(hex || cs))) return;            // panel moved on to another aircraft
    body.dataset.soHex = hex + cs;
    let rows = '';
    if (info.route && info.route.length > 1) rows += `<div class="dk">Route</div><div class="dv dv-mono">${info.route.map(escapeHtml).join(' → ')}</div>`;
    if (!hasReg && info.registration) rows += `<div class="dk">Reg (hexdb)</div><div class="dv dv-mono">${escapeHtml(info.registration)}</div>`;
    if (!hasModel && (info.type || info.type_code)) rows += `<div class="dk">Model (hexdb)</div><div class="dv">${escapeHtml(info.type || info.type_code)}</div>`;
    if (!hasOp && info.owner) rows += `<div class="dk">Owner (hexdb)</div><div class="dv dv-small">${escapeHtml(info.owner)}</div>`;
    if (rows) body.insertAdjacentHTML('beforeend', rows);
  }).catch(() => {});
}

// ── Aircraft photo (planespotters.net free API) ────
async function loadAircraftPhoto(icao, callsign) {
  const wrap = document.getElementById('detail-photo-wrap');
  const img  = document.getElementById('detail-photo');
  const credit = document.getElementById('detail-photo-credit');
  wrap.style.display = 'none';
  img.style.display = 'none';
  if (!icao) return;
  try {
    const res = await fetch(`https://api.planespotters.net/pub/photos/hex/${encodeURIComponent(icao)}`);
    if (!res.ok) return;
    const data = await res.json();
    const photo = (data.photos || [])[0];
    if (!photo) return;
    const url = photo.thumbnail_large?.src || photo.thumbnail?.src;
    if (!url || safeUrl(url) === '#') return;
    img.src = url;
    img.style.display = 'block';
    wrap.style.display = 'block';
    const ph = photo.photographer || '';
    const link = safeUrl(photo.link) || '#';
    credit.innerHTML = `<a href="${link}" target="_blank" rel="noopener noreferrer" style="color:var(--pl);text-decoration:none">${escapeHtml(ph)}</a> — via Planespotters.net`;
  } catch(e) { /* no photo available */ }
}

// ── Airport database ──────────────────────────────
const AIRPORTS = {
  'LTFM':{'name':'Istanbul IST','lat':41.2646,'lon':28.7428,'rwy':[35,17]},
  'LTBA':{'name':'Istanbul SAW','lat':40.9769,'lon':28.8146,'rwy':[6,24]},
  'LTAC':{'name':'Ankara ESB',  'lat':40.1281,'lon':32.9951,'rwy':[3,21]},
  'LTAI':{'name':'Antalya AYT', 'lat':36.8988,'lon':30.7992,'rwy':[18,36]},
  'EGLL':{'name':'London LHR',  'lat':51.4775,'lon':-0.4614,'rwy':[9,27]},
  'LFPG':{'name':'Paris CDG',   'lat':49.0097,'lon':2.5479, 'rwy':[9,27]},
  'EDDF':{'name':'Frankfurt FRA','lat':50.0333,'lon':8.5706,'rwy':[7,25]},
  'EHAM':{'name':'Amsterdam AMS','lat':52.3086,'lon':4.7639,'rwy':[6,24]},
  'LEMD':{'name':'Madrid MAD',  'lat':40.4936,'lon':-3.5668,'rwy':[14,32]},
  'LIRF':{'name':'Rome FCO',    'lat':41.7999,'lon':12.2462,'rwy':[7,25]},
  'LSZH':{'name':'Zurich ZRH',  'lat':47.4647,'lon':8.5492, 'rwy':[10,28]},
  'OMDB':{'name':'Dubai DXB',   'lat':25.2532,'lon':55.3657,'rwy':[12,30]},
  'KJFK':{'name':'New York JFK','lat':40.6413,'lon':-73.7781,'rwy':[4,22]},
  'KLAX':{'name':'Los Angeles LAX','lat':33.9425,'lon':-118.408,'rwy':[6,24]},
  'UUEE':{'name':'Moscow SVO',  'lat':55.9726,'lon':37.4146, 'rwy':[7,25]},
  'ZBAA':{'name':'Beijing PEK', 'lat':40.0799,'lon':116.6031,'rwy':[1,19]},
  'RJTT':{'name':'Tokyo HND',   'lat':35.5494,'lon':139.7798,'rwy':[4,22]},
  'WSSS':{'name':'Singapore SIN','lat':1.3644, 'lon':103.9915,'rwy':[2,20]},
};

// ── Helpers ───────────────────────────────────────
function bearingBetween(lat1,lon1,lat2,lon2) {
  const dLon=(lon2-lon1)*Math.PI/180;
  const y=Math.sin(dLon)*Math.cos(lat2*Math.PI/180);
  const x=Math.cos(lat1*Math.PI/180)*Math.sin(lat2*Math.PI/180)
          -Math.sin(lat1*Math.PI/180)*Math.cos(lat2*Math.PI/180)*Math.cos(dLon);
  return (Math.atan2(y,x)*180/Math.PI+360)%360;
}
function distKm(lat1,lon1,lat2,lon2) {
  const R=6371, dLat=(lat2-lat1)*Math.PI/180, dLon=(lon2-lon1)*Math.PI/180;
  const a=Math.sin(dLat/2)**2+Math.cos(lat1*Math.PI/180)*Math.cos(lat2*Math.PI/180)*Math.sin(dLon/2)**2;
  return R*2*Math.atan2(Math.sqrt(a),Math.sqrt(1-a));
}
function destPoint(lat,lon,bearingDeg,distKm) {
  const R=6371, d=distKm/R, b=bearingDeg*Math.PI/180;
  const lat1=lat*Math.PI/180, lon1=lon*Math.PI/180;
  const lat2=Math.asin(Math.sin(lat1)*Math.cos(d)+Math.cos(lat1)*Math.sin(d)*Math.cos(b));
  const lon2=lon1+Math.atan2(Math.sin(b)*Math.sin(d)*Math.cos(lat1),Math.cos(d)-Math.sin(lat1)*Math.sin(lat2));
  return [lat2*180/Math.PI, lon2*180/Math.PI];
}
function angleDiff(a,b) { return Math.abs(((a-b)+540)%360-180); }
function isSuspicious(ac) {
  return (ac.risk||0)>=50 || isEmergency(ac.squawk) || ac.type==='drone'
    || (!ac.callsign && ac.altitude!=null && ac.altitude<5000)
    || ['7777','7400','5000','5400'].includes(String(ac.squawk||''));
}
function isMilitary(ac) {
  const cs=(ac.callsign||'').toUpperCase();
  const milPrefixes=['REACH','RCH','MAGMA','JAKE','SWIFT','DUKE','HAVOC',
    'VIPER','EAGLE','FALCON','COBRA','RAPTOR','GHOST','SHADOW','TALON','IRON'];
  return milPrefixes.some(p=>cs.startsWith(p))
    || ['7777','7400','6001','6002','6003','6004'].includes(String(ac.squawk||''));
}
function isHolding(ac) {
  return ac.altitude!=null && ac.altitude>=3000 && ac.altitude<=12000
    && ac.velocity!=null && ac.velocity>=160 && ac.velocity<=280;
}

// setMapMode removed — use setMode()/setLayer()/toggleTheme()

// ── MILITARY / SUSPICIOUS mode ────────────────────
function renderMilitary() {
  militaryLayer.clearLayers();
  if (!allAircraft.length) return;

  const suspects = allAircraft.filter(isSuspicious);
  const military = allAircraft.filter(isMilitary);

  allAircraft.forEach(ac => {
    if (!ac.lat||!ac.lon) return;
    const isMil = isMilitary(ac);
    const isSus = isSuspicious(ac);
    if (!isMil && !isSus) {
      // Dim normal aircraft
      L.circleMarker([ac.lat,ac.lon],{radius:3,color:'rgba(255,255,255,0.1)',fillColor:'rgba(255,255,255,0.05)',weight:1,fillOpacity:1})
       .addTo(militaryLayer);
      return;
    }
    const color = isMil ? '#FF9500' : isEmergency(ac.squawk) ? '#F87171' : '#FBBF24';
    const label = isMil ? 'MIL' : 'SUS';
    const m = L.marker([ac.lat,ac.lon],{icon:makeAcIcon({...ac,type:isMil?'aircraft':'drone'})});
    m.bindPopup(`<div style="font-family:monospace;font-size:11px;background:#0F140F;color:#E2E2EC;padding:4px">
      <div style="color:${color};font-weight:700;margin-bottom:4px">${label} — ${escapeHtml(ac.callsign||ac.icao||'?')}</div>
      <div>Squawk: <b style="color:${color}">${escapeHtml(ac.squawk||'—')}</b></div>
      <div>Alt: ${ac.altitude!=null?escapeHtml(ac.altitude.toLocaleString())+' ft':'—'} | Spd: ${escapeHtml(ac.velocity||'—')} kts</div>
      <div>Risk: <b style="color:#F87171">${ac.risk||0}/100</b></div>
    </div>`,{className:'dark-popup'});
    m.on('click',()=>selectAircraft(ac));
    // Pulsing ring for high risk
    L.circle([ac.lat,ac.lon],{radius:15000,color:color,fillColor:color,fillOpacity:0.04,weight:1,dashArray:'6,6'}).addTo(militaryLayer);
    m.addTo(militaryLayer);
  });

  // Legend (single instance — remove the previous one before adding)
  if (militaryLegend) { map.removeControl(militaryLegend); militaryLegend = null; }
  const legend = L.control({position:'bottomleft'});
  legend.onAdd=()=>{
    const d=L.DomUtil.create('div');
    d.style.cssText='background:rgba(8,14,8,0.9);border:1px solid rgba(255,255,255,0.1);border-radius:6px;padding:10px 14px;font-size:10px;color:#9896AE;font-family:monospace';
    d.innerHTML=`<div style="color:#FF9500;margin-bottom:4px">Military pattern: ${military.length}</div>
      <div style="color:#FBBF24;margin-bottom:4px">Suspicious: ${suspects.length}</div>
      <div>Total tracked: ${allAircraft.length}</div>`;
    return d;
  };
  legend.addTo(map);
  militaryLegend = legend;
}

// ── HEATMAP mode ──────────────────────────────────
function renderHeatmap() {
  if (heatLayer) { map.removeLayer(heatLayer); heatLayer = null; }
  if (!allAircraft.length) return;
  const points = allAircraft
    .filter(a=>a.lat&&a.lon)
    .map(a=>[a.lat, a.lon, Math.min(1, (a.risk||10)/100 + 0.1)]);
  if (window.L.heatLayer) {
    heatLayer = L.heatLayer(points, {
      radius:35, blur:25, maxZoom:10,
      gradient:{0.0:'#0a1628',0.3:'#1a3a6b',0.5:'#2563eb',0.7:'#7c3aed',0.85:'#f59e0b',1.0:'#ef4444'}
    }).addTo(map);
  }
}

// ── ROUTE VISUALIZATION mode ──────────────────────
function renderRouteViz() {
  routeLayer.clearLayers();
  if (!allAircraft.length) return;

  allAircraft.forEach(ac => {
    if (!ac.lat||!ac.lon||ac.heading==null||ac.velocity==null) return;
    // Project position 8 minutes ahead
    const distAhead = (ac.velocity * 8 / 60) * 1.852; // kts→km
    const endPt = destPoint(ac.lat, ac.lon, ac.heading, distAhead);
    const color = isEmergency(ac.squawk)?'#F87171':ac.type==='drone'?'#FF2288':'#60A5FA';

    // Route line
    L.polyline([[ac.lat,ac.lon],endPt],{
      color, weight:1.5, opacity:0.6, dashArray:'6,4'
    }).addTo(routeLayer);

    // Arrowhead at end
    L.circleMarker(endPt,{radius:3,color,fillColor:color,fillOpacity:0.8,weight:1}).addTo(routeLayer);

    // Aircraft marker
    const m = L.marker([ac.lat,ac.lon],{icon:makeAcIcon(ac)});
    m.on('click',()=>selectAircraft(ac));
    m.addTo(routeLayer);

    // Holding pattern detection — draw circle
    if (isHolding(ac)) {
      L.circle([ac.lat,ac.lon],{
        radius:9000, color:'#A78BFA', fill:false, weight:1, dashArray:'4,8', opacity:0.5
      }).bindTooltip('HOLDING PATTERN', {
        permanent:false, direction:'top',
        className:'',
        offset:[0,-10]
      }).addTo(routeLayer);
    }
  });
}

// ── DARK OPS mode ──────────────────────────────────
function renderDarkOps() {
  const overlay = document.getElementById('darkops-overlay');
  overlay.style.display='block';

  function refreshOverlay() {
    const emerg = allAircraft.filter(a=>isEmergency(a.squawk));
    const drones = allAircraft.filter(a=>a.type==='drone');
    const highRisk = allAircraft.filter(a=>(a.risk||0)>=70);
    overlay.innerHTML = `
      <div style="color:#9896AE;letter-spacing:2px;font-size:9px;margin-bottom:6px">DARK OPS — SIGINT</div>
      <div style="color:#E2E2EC">${allAircraft.length} <span style="color:#9896AE">tracked</span></div>
      ${emerg.length?`<div style="color:#F87171;margin-top:4px">${emerg.length} emergency</div>`:''}
      ${drones.length?`<div style="color:#FF2288">${drones.length} drone/UAV</div>`:''}
      ${highRisk.length?`<div style="color:#FBBF24">${highRisk.length} high risk</div>`:''}
      <div style="color:#9896AE;font-size:9px;margin-top:6px">${new Date().toLocaleTimeString()}</div>
    `;
  }
  refreshOverlay();
  // Refresh clock — single timer; stops when Dark Ops is switched off
  if (darkopsInterval) clearInterval(darkopsInterval);
  darkopsInterval = setInterval(()=>{
    if (!darkopsOn) { clearInterval(darkopsInterval); darkopsInterval = null; return; }
    refreshOverlay();
  }, 5000);
}

// ── AIRPORT FOCUS mode ────────────────────────────
function applyAirportFocus() {
  const icao = document.getElementById('ap-icao').value.trim().toUpperCase();
  const ap = AIRPORTS[icao];
  if (!ap) {
    document.getElementById('ap-name').textContent = `Unknown airport: ${icao}. Try LTFM, EGLL, EDDF...`;
    return;
  }
  currentAirport = {...ap, icao};
  document.getElementById('ap-name').textContent = `▸ ${ap.name} (${icao}) — lat ${ap.lat.toFixed(4)}, lon ${ap.lon.toFixed(4)}`;
  renderAirportFocus(currentAirport);
}

function renderAirportFocus(ap) {
  airportLayer.clearLayers();
  if (!ap||!allAircraft.length) return;

  const showIn   = document.getElementById('ap-incoming')?.checked ?? true;
  const showOut  = document.getElementById('ap-outgoing')?.checked ?? true;
  const showHold = document.getElementById('ap-holding')?.checked  ?? true;

  // Airport marker
  L.circleMarker([ap.lat,ap.lon],{radius:8,color:'#4ADE80',fillColor:'#4ADE80',fillOpacity:0.9,weight:2})
   .bindPopup(`<b style="font-family:monospace;color:#4ADE80">${ap.name}</b>`)
   .addTo(airportLayer);

  // Approach corridors — cone 40km, ±15° each runway end
  (ap.rwy||[]).forEach(hdg=>{
    [hdg, (hdg+180)%360].forEach(approach=>{
      const tipPt = destPoint(ap.lat,ap.lon,approach,40);
      const leftPt  = destPoint(ap.lat,ap.lon,(approach-15+360)%360,40);
      const rightPt = destPoint(ap.lat,ap.lon,(approach+15)%360,40);
      L.polygon([[ap.lat,ap.lon],leftPt,rightPt],{
        color:'rgba(74,222,128,0.3)',fillColor:'rgba(74,222,128,0.04)',weight:1,dashArray:'6,8'
      }).addTo(airportLayer);
    });
  });

  // Holding stack circle (10nm radius around airport)
  L.circle([ap.lat,ap.lon],{
    radius:18520, color:'rgba(167,139,250,0.25)', fill:false, weight:1, dashArray:'4,8'
  }).bindTooltip('HOLDING STACK',{direction:'top'}).addTo(airportLayer);

  // Classify and render aircraft
  let inCount=0, outCount=0, holdCount=0;

  allAircraft.forEach(ac => {
    if (!ac.lat||!ac.lon) return;
    const dist = distKm(ap.lat,ap.lon,ac.lat,ac.lon);
    if (dist > 250) return; // too far

    const brg = bearingBetween(ac.lat,ac.lon,ap.lat,ap.lon);
    const hdgToAp = ac.heading!=null ? angleDiff(ac.heading,brg) : 999;
    const hdgFromAp = ac.heading!=null ? angleDiff(ac.heading,(brg+180)%360) : 999;

    const isIn   = hdgToAp < 25 && (ac.altitude==null || ac.altitude<12000);
    const isOut  = hdgFromAp < 25;
    const isHold = isHolding(ac) && dist < 80;

    let color='rgba(255,255,255,0.2)', label='', show=true;
    if (isHold && showHold) { color='#A78BFA'; label='HOLD'; holdCount++; }
    else if (isIn && showIn) { color='#4ADE80'; label='IN'; inCount++; }
    else if (isOut && showOut) { color='#60A5FA'; label='OUT'; outCount++; }
    else show = false;

    if (!show) {
      L.circleMarker([ac.lat,ac.lon],{radius:2,color:'rgba(255,255,255,0.08)',fillColor:'rgba(255,255,255,0.05)',fillOpacity:1,weight:0}).addTo(airportLayer);
      return;
    }

    const m = L.marker([ac.lat,ac.lon],{icon:makeAcIcon(ac)});
    m.bindPopup(`<div style="font-family:monospace;font-size:11px;background:#0F140F;color:#E2E2EC;padding:4px;min-width:160px">
      <div style="color:${color};font-weight:700;margin-bottom:4px">[${label}] ${escapeHtml(ac.callsign||ac.icao||'?')}</div>
      <div>Alt: ${ac.altitude!=null?escapeHtml(ac.altitude.toLocaleString())+' ft':'—'}</div>
      <div>Spd: ${escapeHtml(ac.velocity||'—')} kts | Hdg: ${escapeHtml(ac.heading||'—')}°</div>
      <div>Dist to airport: ${Math.round(dist)} km</div>
    </div>`,{className:'dark-popup'});
    m.on('click',()=>selectAircraft(ac));
    m.addTo(airportLayer);

    // Approach line to airport for incoming
    if (isIn) {
      L.polyline([[ac.lat,ac.lon],[ap.lat,ap.lon]],{color:'rgba(74,222,128,0.2)',weight:1,dashArray:'4,6'}).addTo(airportLayer);
    }
  });

  // Stats
  document.getElementById('ap-stats').innerHTML = [
    `<span class="ap-stat" style="background:rgba(74,222,128,0.1);color:#4ADE80;border:1px solid rgba(74,222,128,0.2)">▼ INCOMING: ${inCount}</span>`,
    `<span class="ap-stat" style="background:rgba(96,165,250,0.1);color:#60A5FA;border:1px solid rgba(96,165,250,0.2)">▲ OUTGOING: ${outCount}</span>`,
    `<span class="ap-stat" style="background:rgba(167,139,250,0.1);color:#A78BFA;border:1px solid rgba(167,139,250,0.2)">⟳ HOLDING: ${holdCount}</span>`,
  ].join('');

  map.setView([ap.lat,ap.lon],8);
}

// ── Emergency detection ───────────────────────────
function checkEmergencies() {
  const emergencies = allAircraft.filter(a => isEmergency(a.squawk));
  const banner = document.getElementById('emergency-banner');
  if (emergencies.length > 0) {
    banner.style.display = 'block';
    document.getElementById('emergency-detail').innerHTML = emergencies.map(a =>
      `<span style="color:#F87171;font-family:monospace">${escapeHtml(a.callsign||a.icao||'?')}</span>
       <span style="color:var(--td)"> SQUAWK ${escapeHtml(a.squawk)} — ${escapeHtml(SQUAWK_DECODE[a.squawk]?.label||'EMERGENCY')}</span>`
    ).join(' &nbsp;|&nbsp; ');
  } else {
    banner.style.display = 'none';
  }
}

// ── Watchlist check ───────────────────────────────
async function checkWatchlist(aircraft) {
  if (!aircraft.length) return;
  try {
    const res = await fetch('/api/watchlist/check', {
      method:'POST', headers:{'Content-Type':'application/json'},
      body: JSON.stringify({ devices: aircraft.map(a => ({...a, type:'aircraft', icao:a.icao})), scan_source:'adsb' })
    });
    const data = await res.json();
    if (data.hits?.length > 0) {
      const statsDiv = document.getElementById('stats-row');
      // Show alert badge
      console.warn('[ADS-B] Watchlist hit:', data.hits);
    }
  } catch(e) {}
}

// ── Watchlist add ─────────────────────────────────
async function addToWatchlist() {
  if (!currentDetail) return;
  const icao = currentDetail.icao;
  if (!icao) { alert('No ICAO hex for this aircraft'); return; }
  try {
    const res = await fetch('/api/watchlist', {
      method:'POST', headers:{'Content-Type':'application/json'},
      body: JSON.stringify({ type:'icao', value:icao, note:`Callsign: ${currentDetail.callsign||'?'}`, priority:'high' })
    });
    const d = await res.json();
    alert(d.ok ? `Added ${icao} to watchlist` : `Error: ${d.error}`);
  } catch(e) { alert('Watchlist error'); }
}

// ── Auto-refresh ──────────────────────────────────
function toggleAutoRefresh() {
  const on = document.getElementById('auto-refresh').checked;
  if (on) startAutoRefresh();
  else stopAutoRefresh();
}

function startAutoRefresh() {
  stopAutoRefresh();
  const secs = parseInt(document.getElementById('refresh-interval').value);
  let remaining = secs;
  const status = document.getElementById('refresh-status');
  countdownInterval = setInterval(() => {
    remaining--;
    if (remaining <= 0) {
      remaining = secs;
      const lat = parseFloat(document.getElementById('a-lat').value);
      const lon = parseFloat(document.getElementById('a-lon').value);
      if (!isNaN(lat) && !isNaN(lon)) doScan();
    }
    status.innerHTML = `<span class="refresh-ring"></span> refresh in ${remaining}s`;
  }, 1000);
}

function stopAutoRefresh() {
  clearInterval(countdownInterval);
  clearTimeout(refreshTimer);
  document.getElementById('refresh-status').textContent = '';
}

// ── Export ────────────────────────────────────────
function exportData() {
  if (!allAircraft.length) return;
  const blob = new Blob([JSON.stringify(allAircraft, null, 2)], {type:'application/json'});
  const a = document.createElement('a');
  a.href = URL.createObjectURL(blob);
  a.download = `signalops_adsb_${Date.now()}.json`;
  a.click();
}

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