{% extends "base.html" %}
{% set active = "strategos" %}
{% block title %}Multi-Domain Airspace COP — Strategos{% endblock %}

{% block extra_css %}
<link rel="stylesheet" href="{{ url_for('static', filename='vendor/leaflet/leaflet.css') }}"/>
<style>
:root {
  --sg-void:    #060d0d;
  --sg-bg:      #0a1410;
  --sg-surface: #111e18;
  --sg-card:    #172418;
  --sg-border:  #253428;
  --sg-amber:   #f59e0b;
  --sg-green:   #22c55e;
  --sg-red:     #ef4444;
  --sg-cyan:    #22d3ee;
  --sg-blue:    #3b82f6;
  --sg-purple:  #a855f7;
  --sg-orange:  #fb923c;
  --sg-grey:    #6b7280;
  --sg-text:    #d1fae5;
  --sg-dim:     #6b9e7a;
}
.nav-dropdown-menu { z-index: 1100 !important; }
.navbar { z-index: 1050 !important; }

.mdo-page {
  background: var(--sg-void);
  display: flex;
  flex-direction: column;
  height: calc(100vh - 48px);
  overflow: hidden;
}
#mdo-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px;
  background: var(--sg-bg);
  border-bottom: 1px solid var(--sg-border);
  font-size: 12px;
  flex-shrink: 0;
  flex-wrap: wrap;
}
.mdo-title {
  font-size: 13px; font-weight: 700;
  color: var(--sg-cyan);
  text-transform: uppercase;
  letter-spacing: .1em;
}
.mdo-badge {
  font-size: 10px; font-weight: 700;
  padding: 2px 7px; border-radius: 2px; border: 1px solid;
}
.mdo-badge.aircraft  { color: var(--sg-blue);   border-color: var(--sg-blue);   background: #1e3a6e22; }
.mdo-badge.uas       { color: var(--sg-orange);  border-color: var(--sg-orange); background: #7c2d1222; }
.mdo-badge.satellite { color: var(--sg-purple);  border-color: var(--sg-purple); background: #5b21b622; }
.mdo-badge.vehicle   { color: var(--sg-red);     border-color: var(--sg-red);    background: #7f1d1d22; }
.mdo-sep { width: 1px; height: 20px; background: var(--sg-border); flex-shrink: 0; }
.mdo-btn {
  background: var(--sg-surface);
  border: 1px solid var(--sg-border);
  color: var(--sg-text);
  padding: 3px 10px; border-radius: 3px;
  font-size: 11px; font-weight: 600; cursor: pointer;
  transition: background .15s, border-color .15s;
}
.mdo-btn:hover         { background: #1e3a2e; border-color: var(--sg-dim); }
.mdo-btn.active        { border-color: var(--sg-green); color: var(--sg-green); }
.mdo-btn.domain-ac     { border-color: var(--sg-blue);   color: var(--sg-blue);   }
.mdo-btn.domain-uas    { border-color: var(--sg-orange);  color: var(--sg-orange);  }
.mdo-btn.domain-sat    { border-color: var(--sg-purple);  color: var(--sg-purple);  }
.mdo-btn.domain-gv     { border-color: var(--sg-red);     color: var(--sg-red);     }
.mdo-btn.domain-off    { border-color: var(--sg-border);  color: var(--sg-grey);    background: var(--sg-void); }
.mdo-select {
  background: var(--sg-surface); border: 1px solid var(--sg-border);
  color: var(--sg-text); padding: 3px 6px; font-size: 11px; border-radius: 3px;
}
#mdo-clock { font-family: monospace; font-size: 11px; color: var(--sg-amber); min-width: 155px; }

/* Scrubber */
#mdo-progress-wrap {
  padding: 3px 12px;
  background: var(--sg-bg);
  border-bottom: 1px solid var(--sg-border);
  flex-shrink: 0;
}
#mdo-progress {
  width: 100%; height: 4px;
  -webkit-appearance: none; appearance: none;
  background: var(--sg-surface); border-radius: 2px; cursor: pointer;
}
#mdo-progress::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--sg-cyan); cursor: pointer;
}

#mdo-body { display: flex; flex: 1; overflow: hidden; }

/* Sidebar */
#mdo-sidebar {
  width: 220px; min-width: 220px;
  background: var(--sg-bg);
  border-right: 1px solid var(--sg-border);
  display: flex; flex-direction: column; overflow: hidden;
}
#mdo-tabs {
  display: flex;
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  border-bottom: 1px solid var(--sg-border);
  flex-shrink: 0;
}
.mdo-tab {
  flex: 1; padding: 6px 2px; text-align: center; cursor: pointer;
  color: var(--sg-dim); border-bottom: 2px solid transparent;
  transition: all .15s;
}
.mdo-tab:hover { color: var(--sg-text); }
.mdo-tab.active { color: var(--sg-cyan); border-bottom-color: var(--sg-cyan); }
.mdo-tab.ac-tab.active  { color: var(--sg-blue);   border-bottom-color: var(--sg-blue); }
.mdo-tab.uas-tab.active { color: var(--sg-orange);  border-bottom-color: var(--sg-orange); }
.mdo-tab.sat-tab.active { color: var(--sg-purple);  border-bottom-color: var(--sg-purple); }
.mdo-tab.gv-tab.active  { color: var(--sg-red);     border-bottom-color: var(--sg-red); }

#mdo-entity-list { overflow-y: auto; flex: 1; }
.mdo-entity-item {
  padding: 7px 12px;
  border-bottom: 1px solid var(--sg-border);
  cursor: pointer; transition: background .1s;
}
.mdo-entity-item:hover { background: var(--sg-surface); }
.mdo-entity-name { font-size: 11px; font-weight: 600; color: var(--sg-text); }
.mdo-entity-meta { font-size: 10px; color: var(--sg-dim); margin-top: 2px; }
.mdo-entity-badge {
  display: inline-block; font-size: 9px; font-weight: 700;
  padding: 1px 5px; border-radius: 2px; margin-top: 3px;
}
.mdo-entity-pos { font-size: 10px; color: var(--sg-amber); font-family: monospace; margin-top: 2px; }

#mdo-map { flex: 1; background: #071010; }
.leaflet-container { background: #071010; }
.leaflet-control-zoom a {
  background: var(--sg-surface) !important;
  color: var(--sg-text) !important;
  border-color: var(--sg-border) !important;
}
.leaflet-control-attribution {
  background: rgba(6,13,13,.75) !important;
  color: var(--sg-dim) !important; font-size: 9px !important;
}
.leaflet-tile { filter: brightness(0.85); }
.mdo-tooltip {
  background: var(--sg-card) !important;
  border: 1px solid var(--sg-border) !important;
  color: var(--sg-text) !important;
  font-size: 11px !important;
  padding: 6px 10px !important;
  border-radius: 4px !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.6) !important;
  white-space: nowrap;
}
.mdo-tooltip::before { display: none !important; }
</style>
{% endblock %}

{% block content %}
<div class="mdo-page">
  <!-- Toolbar -->
  <div id="mdo-toolbar">
    <span class="mdo-title">&#9670; Multi-Domain COP</span>
    <div class="mdo-sep"></div>

    <!-- Domain toggles -->
    <button id="btn-ac"  class="mdo-btn domain-ac"  onclick="toggleDomain('ac')"  title="ADS-B Aircraft">
      &#9992; AIRCRAFT</button>
    <button id="btn-uas" class="mdo-btn domain-uas" onclick="toggleDomain('uas')" title="UAS/Drones">
      &#11044; UAS</button>
    <button id="btn-sat" class="mdo-btn domain-sat" onclick="toggleDomain('sat')" title="Satellites">
      &#9711; SAT</button>
    <button id="btn-gv"  class="mdo-btn domain-gv"  onclick="toggleDomain('gv')"  title="Ground Vehicles">
      &#9632; GVE</button>
    <div class="mdo-sep"></div>

    <!-- Playback -->
    <button id="btn-play"  class="mdo-btn active" onclick="togglePlay()">&#9646;&#9646; Pause</button>
    <button id="btn-reset" class="mdo-btn" style="border-color:var(--sg-red);color:var(--sg-red)"
            onclick="resetAnim()">&#9632; Reset</button>
    <label style="font-size:11px;color:var(--sg-dim)">Speed</label>
    <select id="mdo-speed" class="mdo-select" onchange="setDuration(+this.value)">
      <option value="60000">Slow</option>
      <option value="30000" selected>Normal</option>
      <option value="15000">Fast</option>
    </select>
    <div class="mdo-sep"></div>

    <!-- Domain counts -->
    <span class="mdo-badge aircraft">&#9992; <span id="cnt-ac">0</span></span>
    <span class="mdo-badge uas">&#11044; <span id="cnt-uas">0</span></span>
    <span class="mdo-badge satellite">&#9711; <span id="cnt-sat">0</span></span>
    <span class="mdo-badge vehicle">&#9632; <span id="cnt-gv">0</span></span>
    <div class="mdo-sep"></div>

    <span id="mdo-clock">—</span>
    <div style="margin-left:auto;display:flex;gap:8px;align-items:center">
      <button class="mdo-btn" onclick="syncData()" style="font-size:10px" title="Seed demo data">
        &#8635; Sync</button>
      <a href="/strategos" style="font-size:11px;color:var(--sg-dim);text-decoration:none">&larr; Strategos</a>
    </div>
  </div>

  <!-- Scrubber -->
  <div id="mdo-progress-wrap">
    <input type="range" id="mdo-progress" min="0" max="10000" value="0"
           oninput="scrub(+this.value / 10000)">
  </div>

  <!-- Body -->
  <div id="mdo-body">
    <div id="mdo-sidebar">
      <div id="mdo-tabs">
        <div class="mdo-tab active" onclick="setTab('all')">ALL</div>
        <div class="mdo-tab ac-tab"  onclick="setTab('ac')">&#9992;</div>
        <div class="mdo-tab uas-tab" onclick="setTab('uas')">&#11044;</div>
        <div class="mdo-tab sat-tab" onclick="setTab('sat')">&#9711;</div>
        <div class="mdo-tab gv-tab"  onclick="setTab('gv')">&#9632;</div>
      </div>
      <div id="mdo-entity-list"></div>
    </div>
    <div id="mdo-map"></div>
  </div>
</div>
{% endblock %}

{% block scripts %}
<script src="{{ url_for('static', filename='vendor/leaflet/leaflet.js') }}"></script>
<script>
// ── Color palette ──────────────────────────────────────────────────────────
const DOMAIN_COLORS = {
  aircraft:       '#3b82f6',
  fighter:        '#ef4444',
  military:       '#ef4444',
  transport:      '#3b82f6',
  commercial:     '#22d3ee',
  helicopter:     '#22c55e',
  maritime_patrol:'#a855f7',
  aew:            '#f59e0b',
  recon:          '#f59e0b',
  bomber:         '#ef4444',
  uav_large:      '#fb923c',
  uas_fixed_wing: '#fb923c',
  uas_rotary:     '#fb923c',
  uas_loitering:  '#ef4444',
  uas_kamikaze:   '#ef4444',
  uas_surveillance:'#fb923c',
  satellite_mil:  '#a855f7',
  satellite_other:'#7c3aed',
  vehicle_critical:'#ef4444',
  vehicle_high:   '#f59e0b',
  vehicle_medium: '#22c55e',
  vehicle_low:    '#6b7280',
};
const THREAT_COLORS = { critical:'#ef4444', high:'#f59e0b', medium:'#22c55e', low:'#6b7280' };

const WAKE_LEN = 15;

// ── Map setup ──────────────────────────────────────────────────────────────
const map = L.map('mdo-map', { center: [25, 100], zoom: 4 });
const baseLayers = {
  'Ocean (ESRI)': L.tileLayer(
    'https://server.arcgisonline.com/ArcGIS/rest/services/Ocean/World_Ocean_Base/MapServer/tile/{z}/{y}/{x}',
    { attribution: 'Tiles © Esri', maxZoom: 13 }
  ),
  'Dark': L.tileLayer(
    'https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png',
    { attribution: '© OpenStreetMap © CARTO', maxZoom: 19 }
  ),
};
baseLayers['Dark'].addTo(map);

// Domain layer groups
const layerGroups = {
  ac:  L.layerGroup().addTo(map),
  uas: L.layerGroup().addTo(map),
  sat: L.layerGroup().addTo(map),
  gv:  L.layerGroup().addTo(map),
};
const domainVisible = { ac: true, uas: true, sat: true, gv: true };

const overlayLayers = {
  '✈ Aircraft':         layerGroups.ac,
  '⬡ UAS / Drones':     layerGroups.uas,
  '◎ Satellites':       layerGroups.sat,
  '■ Ground Vehicles':  layerGroups.gv,
};
L.control.layers(baseLayers, overlayLayers, { position: 'topright', collapsed: true }).addTo(map);

// ── Animation state ────────────────────────────────────────────────────────
let allAircraft   = [];
let allUAS        = [];
let allSatellites = [];
let allGVEvents   = [];

let acState  = {};   // icao24 → { marker, wakeLine, wake[] }
let uasState = {};   // uas_id → { marker, wakeLine, wake[] }

let playing  = true;
let animDuration   = 30000;
let animProgress   = 0;
let rafId          = null;
let rafStart       = null;
let progressAtSegStart = 0;
let simStart = 0, simEnd = 0;

let activeTab = 'all';

// ── SVG icons ──────────────────────────────────────────────────────────────
function aircraftIcon(color, heading, isMil) {
  const shape = isMil
    ? `<polygon points="12,2 22,25 12,20 2,25" fill="${color}" stroke="#000" stroke-width="1.2" opacity="0.95"/>
       <rect x="10" y="14" width="4" height="8" fill="${color}" opacity="0.6"/>`
    : `<ellipse cx="12" cy="13" rx="10" ry="4" fill="${color}" opacity="0.85" stroke="#000" stroke-width="1"/>
       <polygon points="12,2 15,13 12,11 9,13" fill="${color}" stroke="#000" stroke-width="1"/>
       <polygon points="4,18 12,14 20,18" fill="${color}" opacity="0.7" stroke="#000" stroke-width="0.8"/>`;
  const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="26" height="28" viewBox="0 0 26 28">${shape}</svg>`;
  return L.divIcon({
    html: `<div style="transform:rotate(${heading}deg);transform-origin:50% 50%;width:26px;height:28px">${svg}</div>`,
    className: '', iconSize: [26, 28], iconAnchor: [13, 14],
  });
}

function uasIcon(color, threat) {
  const sz = threat === 'critical' ? 18 : 14;
  const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="${sz}" height="${sz}" viewBox="0 0 16 16">
    <circle cx="8" cy="8" r="4" fill="${color}" opacity="0.9"/>
    <line x1="0" y1="8" x2="5" y2="8" stroke="${color}" stroke-width="1.5"/>
    <line x1="11" y1="8" x2="16" y2="8" stroke="${color}" stroke-width="1.5"/>
    <line x1="8" y1="0" x2="8" y2="5" stroke="${color}" stroke-width="1.5"/>
    <line x1="8" y1="11" x2="8" y2="16" stroke="${color}" stroke-width="1.5"/>
    ${threat === 'critical' || threat === 'high'
      ? `<circle cx="8" cy="8" r="7" fill="none" stroke="${color}" stroke-width="1" stroke-dasharray="3 2"/>`
      : ''}
  </svg>`;
  return L.divIcon({ html: svg, className: '', iconSize: [sz, sz], iconAnchor: [sz/2, sz/2] });
}

function satIcon(color, isMil) {
  const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18">
    <rect x="7" y="7" width="4" height="4" fill="${color}" opacity="0.9"/>
    <rect x="1" y="8" width="5" height="2" fill="${color}" opacity="0.7"/>
    <rect x="12" y="8" width="5" height="2" fill="${color}" opacity="0.7"/>
    <line x1="9" y1="0" x2="9" y2="6" stroke="${color}" stroke-width="1.5"/>
    <line x1="9" y1="12" x2="9" y2="18" stroke="${color}" stroke-width="1.5"/>
    ${isMil ? `<circle cx="9" cy="9" r="8" fill="none" stroke="${color}" stroke-width="0.8" stroke-dasharray="2 2"/>` : ''}
  </svg>`;
  return L.divIcon({ html: svg, className: '', iconSize: [18, 18], iconAnchor: [9, 9] });
}

function vehicleIcon(threat) {
  const c = THREAT_COLORS[threat] || '#6b7280';
  const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14">
    <rect x="1" y="3" width="12" height="7" rx="1" fill="${c}" opacity="0.9"/>
    <circle cx="3" cy="11" r="2" fill="#111" stroke="${c}" stroke-width="1"/>
    <circle cx="11" cy="11" r="2" fill="#111" stroke="${c}" stroke-width="1"/>
    <rect x="4" y="1" width="6" height="4" rx="1" fill="${c}" opacity="0.6"/>
  </svg>`;
  return L.divIcon({ html: svg, className: '', iconSize: [14, 14], iconAnchor: [7, 7] });
}

// ── Domain toggle ──────────────────────────────────────────────────────────
function toggleDomain(d) {
  domainVisible[d] = !domainVisible[d];
  const btn = document.getElementById('btn-' + d);
  if (domainVisible[d]) {
    layerGroups[d].addTo(map);
    btn.classList.remove('domain-off');
    const cls = { ac:'domain-ac', uas:'domain-uas', sat:'domain-sat', gv:'domain-gv' }[d];
    btn.classList.add(cls);
  } else {
    map.removeLayer(layerGroups[d]);
    btn.classList.remove('domain-ac','domain-uas','domain-sat','domain-gv');
    btn.classList.add('domain-off');
  }
  renderSidebar();
}

// ── Sidebar tabs ───────────────────────────────────────────────────────────
function setTab(t) {
  activeTab = t;
  document.querySelectorAll('.mdo-tab').forEach((el, i) => {
    const tabs = ['all','ac','uas','sat','gv'];
    el.classList.toggle('active', tabs[i] === t);
  });
  renderSidebar();
}

function renderSidebar() {
  const list = document.getElementById('mdo-entity-list');
  list.innerHTML = '';

  if (activeTab === 'all' || activeTab === 'ac') {
    allAircraft.forEach(a => appendEntityItem(list, {
      id: a.icao24, name: a.callsign,
      meta: `${a.origin_country} · ${a.aircraft_type}`,
      badge: a.military_flag ? 'MILITARY' : 'CIVIL',
      badgeColor: a.military_flag ? '#ef4444' : '#22d3ee',
      posId: 'acpos-' + a.icao24,
      domain: 'ac',
      onClick: () => { const vs = acState[a.icao24]; if (vs?.marker) map.setView(vs.marker.getLatLng(), 7); },
    }));
  }
  if (activeTab === 'all' || activeTab === 'uas') {
    allUAS.forEach(u => appendEntityItem(list, {
      id: u.uas_id, name: u.uas_id,
      meta: `${u.operator} · ${u.operator_country}`,
      badge: u.threat_level.toUpperCase(),
      badgeColor: THREAT_COLORS[u.threat_level] || '#6b7280',
      posId: 'uaspos-' + u.uas_id,
      domain: 'uas',
      onClick: () => { const vs = uasState[u.uas_id]; if (vs?.marker) map.setView(vs.marker.getLatLng(), 8); },
    }));
  }
  if (activeTab === 'all' || activeTab === 'sat') {
    allSatellites.forEach(s => appendEntityItem(list, {
      id: s.norad_id, name: s.sat_name,
      meta: `NORAD ${s.norad_id} · ${s.sat_type}`,
      badge: s.military_flag ? 'MILITARY' : 'CIVIL',
      badgeColor: s.military_flag ? '#ef4444' : '#a855f7',
      posId: null, domain: 'sat',
      onClick: () => {},
    }));
  }
  if (activeTab === 'all' || activeTab === 'gv') {
    allGVEvents.forEach(g => appendEntityItem(list, {
      id: g.event_id || g.id, name: g.vehicle_type.replace('_',' ').toUpperCase(),
      meta: `${g.actor} · ${g.country}`,
      badge: g.threat_level.toUpperCase(),
      badgeColor: THREAT_COLORS[g.threat_level] || '#6b7280',
      posId: null, domain: 'gv',
      onClick: () => { if (g.lat && g.lon) map.setView([g.lat, g.lon], 9); },
    }));
  }
}

function appendEntityItem(list, cfg) {
  const div = document.createElement('div');
  div.className = 'mdo-entity-item';
  div.innerHTML = `
    <div class="mdo-entity-name">${cfg.name}</div>
    <div class="mdo-entity-meta">${cfg.meta}</div>
    <span class="mdo-entity-badge"
          style="background:${cfg.badgeColor}22;color:${cfg.badgeColor};border:1px solid ${cfg.badgeColor}44">
      ${cfg.badge}
    </span>
    ${cfg.posId ? `<div class="mdo-entity-pos" id="${cfg.posId}">—</div>` : ''}`;
  div.onclick = cfg.onClick;
  list.appendChild(div);
}

// ── Interpolation helpers ─────────────────────────────────────────────────
function lerp(a, b, f) {
  return {
    lat:     a.lat     + (b.lat     - a.lat)     * f,
    lon:     a.lon     + (b.lon     - a.lon)     * f,
    speed:   (a.speed || 0)   + ((b.speed || 0)   - (a.speed || 0))   * f,
    heading: b.heading || a.heading || 0,
    altitude:a.altitude,
    ts:      a.ts,
  };
}

function posAtProgress(entity, p) {
  const t = simStart + p * (simEnd - simStart);
  const track = entity.track;
  if (!track || track.length === 0) return null;
  if (track.length === 1) return { ...track[0] };
  if (t <= track[0].ms) return { ...track[0] };
  if (t >= track[track.length - 1].ms) return { ...track[track.length - 1] };
  for (let i = 1; i < track.length; i++) {
    if (track[i].ms >= t) {
      const f = (t - track[i-1].ms) / (track[i].ms - track[i-1].ms);
      return lerp(track[i-1], track[i], f);
    }
  }
  return { ...track[track.length - 1] };
}

function pushWake(vs, lat, lon) {
  vs.wake.push([lat, lon]);
  if (vs.wake.length > WAKE_LEN) vs.wake.shift();
  vs.wakeLine.setLatLngs(vs.wake);
}

// ── Tick (per-frame update) ────────────────────────────────────────────────
function tick() {
  document.getElementById('mdo-progress').value = Math.round(animProgress * 10000);
  const simMs = simStart + animProgress * (simEnd - simStart);
  const d = new Date(simMs);
  document.getElementById('mdo-clock').textContent =
    d.toISOString().replace('T',' ').slice(0, 16) + ' UTC';

  // Aircraft
  allAircraft.forEach(a => {
    const vs = acState[a.icao24];
    if (!vs) return;
    const pos = posAtProgress(a, animProgress);
    if (!pos) return;
    const ll = [pos.lat, pos.lon];
    vs.marker.setLatLng(ll);
    vs.marker.setIcon(aircraftIcon(vs.color, pos.heading, a.military_flag));
    pushWake(vs, pos.lat, pos.lon);
    vs.marker.setTooltipContent(
      `<b style="color:${vs.color}">${a.callsign}</b><br>` +
      `${a.origin_country} · ${a.aircraft_type}<br>` +
      `${pos.lat.toFixed(3)}°N ${pos.lon.toFixed(3)}°E<br>` +
      `Alt: ${pos.altitude ? Math.round(pos.altitude) + ' ft' : '?'}  Spd: ${pos.speed ? Math.round(pos.speed) + ' kts' : '?'}<br>` +
      `${a.military_flag ? '⚠ MILITARY' : 'CIVIL'}`
    );
    const posEl = document.getElementById('acpos-' + a.icao24);
    if (posEl) posEl.textContent = pos.lat.toFixed(3) + '°N  ' + pos.lon.toFixed(3) + '°E';
  });

  // UAS
  allUAS.forEach(u => {
    const vs = uasState[u.uas_id];
    if (!vs) return;
    const pos = posAtProgress(u, animProgress);
    if (!pos) return;
    vs.marker.setLatLng([pos.lat, pos.lon]);
    pushWake(vs, pos.lat, pos.lon);
    vs.marker.setTooltipContent(
      `<b style="color:${vs.color}">${u.uas_id}</b><br>` +
      `${u.operator} (${u.operator_country})<br>` +
      `Type: ${u.uas_type}<br>` +
      `Threat: <b style="color:${THREAT_COLORS[u.threat_level]}">${u.threat_level.toUpperCase()}</b>`
    );
    const posEl = document.getElementById('uaspos-' + u.uas_id);
    if (posEl) posEl.textContent = pos.lat.toFixed(3) + '°N  ' + pos.lon.toFixed(3) + '°E';
  });
}

// ── Animation loop ─────────────────────────────────────────────────────────
function animLoop(now) {
  if (!playing) return;
  if (rafStart === null) rafStart = now;
  const wallElapsed = now - rafStart;
  animProgress = Math.min(progressAtSegStart + wallElapsed / animDuration, 1.0);
  tick();
  if (animProgress >= 1.0) {
    playing = false;
    updatePlayBtn();
    return;
  }
  rafId = requestAnimationFrame(animLoop);
}

function startLoop() {
  if (rafId) cancelAnimationFrame(rafId);
  rafStart = null;
  progressAtSegStart = animProgress;
  rafId = requestAnimationFrame(animLoop);
}

function togglePlay() {
  playing = !playing;
  updatePlayBtn();
  if (playing) startLoop();
}

function updatePlayBtn() {
  const btn = document.getElementById('btn-play');
  btn.textContent = playing ? '⏸ Pause' : '▶ Play';
  btn.classList.toggle('active', playing);
}

function resetAnim() {
  if (rafId) cancelAnimationFrame(rafId);
  animProgress = 0;
  Object.values(acState).forEach(vs => { vs.wake = []; vs.wakeLine.setLatLngs([]); });
  Object.values(uasState).forEach(vs => { vs.wake = []; vs.wakeLine.setLatLngs([]); });
  playing = true;
  updatePlayBtn();
  startLoop();
}

function setDuration(ms) { animDuration = ms; if (playing) startLoop(); }

function scrub(p) {
  animProgress = Math.max(0, Math.min(1, p));
  progressAtSegStart = animProgress;
  rafStart = null;
  tick();
  if (playing) startLoop();
}

// ── Build Leaflet objects ─────────────────────────────────────────────────
function buildAircraftObjects() {
  allAircraft.forEach(a => {
    if (!a.track || a.track.length === 0) return;
    const pt0 = a.track[0];
    const c = a.military_flag
      ? '#ef4444'
      : (DOMAIN_COLORS[a.aircraft_type] || DOMAIN_COLORS.aircraft);

    const marker = L.marker([pt0.lat, pt0.lon], {
      icon: aircraftIcon(c, pt0.heading || 0, a.military_flag),
      zIndexOffset: 2000,
    }).addTo(layerGroups.ac);
    marker.bindTooltip('', { className: 'mdo-tooltip', permanent: false, direction: 'right', offset: [16, 0] });

    const wakeLine = L.polyline([], {
      color: c, weight: 2, opacity: 0.4, dashArray: '4 4',
    }).addTo(layerGroups.ac);

    acState[a.icao24] = { marker, wakeLine, wake: [], color: c };

    // Right-click → STRATEGOS Chat
    marker.on('contextmenu', function(e) {
      L.DomEvent.stop(e);
      if (typeof window.sgChat === 'undefined') return;
      const pos = posAtProgress(a, animProgress);
      window.sgChat.showMenu(e.originalEvent.clientX, e.originalEvent.clientY, {
        type: 'aircraft',
        label: a.callsign,
        icao24: a.icao24,
        origin_country: a.origin_country,
        aircraft_type: a.aircraft_type,
        lat: pos ? pos.lat : pt0.lat,
        lon: pos ? pos.lon : pt0.lon,
        baro_altitude: pos ? (pos.altitude || 'N/A') : 'N/A',
        velocity: pos ? (pos.speed || 'N/A') : 'N/A',
        true_track: pos ? (pos.heading || 'N/A') : 'N/A',
        military_flag: a.military_flag ? 'YES' : 'NO',
      });
    });
  });
}

function buildUASObjects() {
  allUAS.forEach(u => {
    if (!u.track || u.track.length === 0) return;
    const pt0 = u.track[0];
    const c = u.threat_level === 'critical' ? '#ef4444'
            : u.threat_level === 'high'     ? '#f59e0b'
            : '#fb923c';

    const marker = L.marker([pt0.lat, pt0.lon], {
      icon: uasIcon(c, u.threat_level),
      zIndexOffset: 1500,
    }).addTo(layerGroups.uas);
    marker.bindTooltip('', { className: 'mdo-tooltip', permanent: false, direction: 'right', offset: [12, 0] });

    const wakeLine = L.polyline([], {
      color: c, weight: 1.5, opacity: 0.4, dashArray: '3 3',
    }).addTo(layerGroups.uas);

    uasState[u.uas_id] = { marker, wakeLine, wake: [], color: c };

    marker.on('contextmenu', function(e) {
      L.DomEvent.stop(e);
      if (typeof window.sgChat === 'undefined') return;
      const pos = posAtProgress(u, animProgress);
      window.sgChat.showMenu(e.originalEvent.clientX, e.originalEvent.clientY, {
        type: 'uas',
        label: u.uas_id,
        operator: u.operator,
        operator_country: u.operator_country,
        uas_type: u.uas_type,
        lat: pos ? pos.lat : pt0.lat,
        lon: pos ? pos.lon : pt0.lon,
        altitude_m: pos ? (pos.altitude || 'N/A') : 'N/A',
        speed_kts: pos ? (pos.speed || 'N/A') : 'N/A',
        payload: u.payload || 'N/A',
        threat_level: u.threat_level,
        anomaly_flag: u.anomaly_flag ? 'YES' : 'NO',
      });
    });
  });
}

function buildSatelliteObjects() {
  allSatellites.forEach(s => {
    if (!s.ground_track || s.ground_track.length === 0) return;
    const c = s.military_flag ? '#ef4444' : '#a855f7';

    // Ground track polyline
    const pts = s.ground_track.map(p => [p.lat, p.lon]);
    const polyline = L.polyline(pts, {
      color: c, weight: 2, opacity: 0.7, dashArray: '6 3',
    }).addTo(layerGroups.sat);

    // Icon at first ground-track point
    if (pts.length > 0) {
      const marker = L.marker(pts[0], {
        icon: satIcon(c, s.military_flag),
        zIndexOffset: 1000,
      }).addTo(layerGroups.sat);
      marker.bindTooltip(
        `<b style="color:${c}">${s.sat_name}</b><br>` +
        `NORAD ${s.norad_id} · ${s.sat_type}<br>` +
        `Max El: ${s.max_elevation}° · ${s.military_flag ? '⚠ MILITARY' : 'CIVIL'}`,
        { className: 'mdo-tooltip', permanent: false, direction: 'right', offset: [12, 0] }
      );

      marker.on('contextmenu', function(e) {
        L.DomEvent.stop(e);
        if (typeof window.sgChat === 'undefined') return;
        window.sgChat.showMenu(e.originalEvent.clientX, e.originalEvent.clientY, {
          type: 'satellite',
          label: s.sat_name,
          norad_id: s.norad_id,
          sat_type: s.sat_type,
          max_elevation: s.max_elevation,
          pass_start: s.pass_start ? s.pass_start.substring(0, 16) : 'N/A',
          pass_end: s.pass_end ? s.pass_end.substring(0, 16) : 'N/A',
          lat: pts[0][0],
          lon: pts[0][1],
          military_flag: s.military_flag ? 'YES' : 'NO',
        });
      });
    }
  });
}

function buildGVObjects() {
  allGVEvents.forEach(g => {
    if (!g.lat || !g.lon) return;
    const marker = L.marker([g.lat, g.lon], {
      icon: vehicleIcon(g.threat_level),
      zIndexOffset: 500,
    }).addTo(layerGroups.gv);
    marker.bindTooltip(
      `<b style="color:${THREAT_COLORS[g.threat_level] || '#fff'}">${g.vehicle_type.replace('_',' ').toUpperCase()}</b><br>` +
      `${g.actor} (${g.country})<br>` +
      `${g.description ? g.description.substring(0, 80) + '…' : ''}<br>` +
      `Threat: <b>${g.threat_level.toUpperCase()}</b>`,
      { className: 'mdo-tooltip', permanent: false, direction: 'right', offset: [10, 0] }
    );
    marker.on('contextmenu', function(e) {
      L.DomEvent.stop(e);
      if (typeof window.sgChat === 'undefined') return;
      window.sgChat.showMenu(e.originalEvent.clientX, e.originalEvent.clientY, {
        type: 'ground_vehicle',
        label: g.vehicle_type.replace('_', ' '),
        vehicle_type: g.vehicle_type,
        actor: g.actor,
        country: g.country,
        lat: g.lat,
        lon: g.lon,
        threat_level: g.threat_level,
        description: (g.description || '').substring(0, 200),
        source: g.source,
      });
    });
  });
}

// ── Sync demo data ─────────────────────────────────────────────────────────
function syncData() {
  fetch('/api/strategos/airspace/sync', { method: 'POST' })
    .then(r => r.json())
    .then(() => { loadAllDomains(); })
    .catch(console.error);
}

// ── Bootstrap / load data ─────────────────────────────────────────────────
function parseTrackMs(entities, tsField = 'ts') {
  return entities.map(e => ({
    ...e,
    track: (e.track || []).map(p => ({
      ...p,
      ms: new Date(p[tsField]).getTime(),
    })).filter(p => isFinite(p.ms)),
  })).filter(e => e.track && e.track.length >= 2);
}

function updateSimBounds(entities) {
  entities.forEach(e => {
    if (!e.track || e.track.length === 0) return;
    const first = e.track[0].ms;
    const last  = e.track[e.track.length - 1].ms;
    if (!simStart || first < simStart) simStart = first;
    if (!simEnd   || last  > simEnd)   simEnd   = last;
  });
}

function updateCounts() {
  document.getElementById('cnt-ac').textContent  = allAircraft.length;
  document.getElementById('cnt-uas').textContent = allUAS.length;
  document.getElementById('cnt-sat').textContent = allSatellites.length;
  document.getElementById('cnt-gv').textContent  = allGVEvents.length;
}

function loadAllDomains() {
  // Clear existing layer groups
  layerGroups.ac.clearLayers();
  layerGroups.uas.clearLayers();
  layerGroups.sat.clearLayers();
  layerGroups.gv.clearLayers();
  acState = {}; uasState = {};
  simStart = 0; simEnd = 0;

  const promises = [
    fetch('/api/strategos/airspace/aircraft').then(r => r.json())
      .then(d => {
        allAircraft = parseTrackMs(d.aircraft || []);
        updateSimBounds(allAircraft);
        buildAircraftObjects();
      }),
    fetch('/api/strategos/airspace/uas').then(r => r.json())
      .then(d => {
        allUAS = parseTrackMs(d.uas || []);
        updateSimBounds(allUAS);
        buildUASObjects();
      }),
    fetch('/api/strategos/airspace/satellites').then(r => r.json())
      .then(d => {
        allSatellites = d.satellites || [];
        buildSatelliteObjects();
      }),
    fetch('/api/strategos/airspace/ground-vehicles').then(r => r.json())
      .then(d => { allGVEvents = d.events || []; buildGVObjects(); }),
  ];

  Promise.all(promises).then(() => {
    updateCounts();
    renderSidebar();

    // Fit map to all track points
    const pts = [
      ...allAircraft.flatMap(a => a.track.map(p => [p.lat, p.lon])),
      ...allUAS.flatMap(u => u.track.map(p => [p.lat, p.lon])),
      ...allGVEvents.filter(g => g.lat && g.lon).map(g => [g.lat, g.lon]),
    ];
    if (pts.length > 0) {
      try { map.fitBounds(pts, { padding: [40, 40] }); } catch (_) {}
    }

    if (simStart && simEnd && simEnd > simStart) {
      startLoop();
    }
  }).catch(err => {
    document.getElementById('mdo-clock').textContent = 'Error: ' + err.message;
  });
}

// ── Boot ─────────────────────────────────────────────────────────────────
loadAllDomains();
</script>
{% endblock %}