{% extends "base.html" %}
{% set active = "strategos" %}
{% block title %}Map — Strategos Intelligence{% endblock %}

{% block extra_css %}
<link rel="stylesheet" href="{{ url_for('static', filename='vendor/leaflet/leaflet.css') }}"/>
<style>
/* ── Strategos Map Dashboard ── dark military theme (green/grey/amber) ── */
:root {
  --sg-void:    #060d0d;
  --sg-bg:      #0a1410;
  --sg-surface: #111e18;
  --sg-card:    #172418;
  --sg-border:  #253428;
  --sg-amber:   #f59e0b;
  --sg-amber-d: #b45309;
  --sg-green:   #22c55e;
  --sg-green-d: #15803d;
  --sg-red:     #ef4444;
  --sg-cyan:    #22d3ee;
  --sg-grey:    #6b7280;
  --sg-grey-l:  #9ca3af;
  --sg-text:    #d1fae5;
  --sg-text-dim:#6b9e7a;
  --sg-grid:    rgba(34,197,94,.08);
}

/* Override .main-content so map fills the viewport */
.main-content {
  padding: 0 !important;
  max-width: 100% !important;
  display: flex;
  flex-direction: column;
  height: calc(100vh - 48px);
  overflow: hidden;
  background: var(--sg-void);
}

/* ── Top toolbar ── */
#sg-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 16px;
  background: var(--sg-bg);
  border-bottom: 1px solid var(--sg-border);
  flex-shrink: 0;
  font-size: 12px;
  letter-spacing: .04em;
}
#sg-toolbar .sg-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--sg-amber);
  text-transform: uppercase;
  letter-spacing: .1em;
  white-space: nowrap;
}
.sg-badge-cui {
  background: #c8960c;
  color: #000;
  font-size: 10px;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 2px;
  letter-spacing: .06em;
}
.sg-badge-theater {
  background: var(--sg-surface);
  border: 1px solid var(--sg-border);
  color: var(--sg-green);
  font-size: 10px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 2px;
  letter-spacing: .05em;
}
#sg-coord-display {
  margin-left: auto;
  color: var(--sg-text-dim);
  font-family: "Courier New", monospace;
  font-size: 11px;
  min-width: 220px;
  text-align: right;
}
#sg-toolbar .sg-tb-sep {
  color: var(--sg-border);
  margin: 0 2px;
}

/* ── Map body: side panel + map ── */
#sg-body {
  display: flex;
  flex: 1;
  min-height: 0;
}

/* ── Left domain panel ── */
#sg-panel {
  width: 180px;
  flex-shrink: 0;
  background: var(--sg-bg);
  border-right: 1px solid var(--sg-border);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}
#sg-panel-header {
  padding: 8px 12px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--sg-amber);
  border-bottom: 1px solid var(--sg-border);
}
.sg-layer {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  cursor: pointer;
  border-bottom: 1px solid rgba(37,52,40,.6);
  transition: background .15s;
  user-select: none;
}
.sg-layer:hover { background: var(--sg-surface); }
.sg-layer input[type="checkbox"] {
  appearance: none;
  width: 13px;
  height: 13px;
  border: 1px solid var(--sg-border);
  border-radius: 2px;
  background: var(--sg-void);
  cursor: pointer;
  flex-shrink: 0;
  position: relative;
}
.sg-layer input[type="checkbox"]:checked {
  background: var(--sg-amber);
  border-color: var(--sg-amber);
}
.sg-layer input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  left: 3px;
  top: 0px;
  width: 5px;
  height: 8px;
  border: 2px solid #000;
  border-top: none;
  border-left: none;
  transform: rotate(45deg);
}
.sg-layer-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.sg-layer-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--sg-grey-l);
  text-transform: uppercase;
  letter-spacing: .05em;
}
.sg-layer-count {
  margin-left: auto;
  font-size: 10px;
  color: var(--sg-text-dim);
  font-family: monospace;
}

/* ── Map container ── */
#sg-map {
  flex: 1;
  background: var(--sg-void);
  position: relative;
}

/* Leaflet dark overrides */
.leaflet-container { background: #0a1410 !important; }
.leaflet-tile-pane  { filter: brightness(.85) saturate(.6); }
.leaflet-popup-content-wrapper {
  background: var(--sg-card) !important;
  color: var(--sg-text) !important;
  border: 1px solid var(--sg-border) !important;
  border-radius: 4px !important;
  box-shadow: 0 4px 16px rgba(0,0,0,.6) !important;
}
.leaflet-popup-tip { background: var(--sg-card) !important; }
.leaflet-popup-content { font-size: 12px; color: var(--sg-text); }
.leaflet-popup-content b { color: var(--sg-amber); }
.leaflet-control-zoom a {
  background: var(--sg-surface) !important;
  color: var(--sg-text) !important;
  border-color: var(--sg-border) !important;
}
.leaflet-control-zoom a:hover { background: var(--sg-card) !important; color: var(--sg-amber) !important; }
.leaflet-control-attribution {
  background: rgba(6,13,13,.7) !important;
  color: var(--sg-text-dim) !important;
  font-size: 9px !important;
}
.leaflet-control-attribution a { color: var(--sg-grey) !important; }

/* ── Time scrubber ── */
#sg-scrubber {
  flex-shrink: 0;
  background: var(--sg-bg);
  border-top: 1px solid var(--sg-border);
  padding: 8px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 11px;
}
#sg-scrubber label {
  color: var(--sg-amber);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  white-space: nowrap;
}
#sg-time-slider {
  flex: 1;
  -webkit-appearance: none;
  appearance: none;
  height: 4px;
  background: var(--sg-border);
  border-radius: 2px;
  outline: none;
  cursor: pointer;
}
#sg-time-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--sg-amber);
  border: 2px solid var(--sg-void);
  cursor: pointer;
  box-shadow: 0 0 6px rgba(245,158,11,.5);
}
#sg-time-slider::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--sg-amber);
  border: 2px solid var(--sg-void);
  cursor: pointer;
}
#sg-time-display {
  font-family: "Courier New", monospace;
  color: var(--sg-text);
  min-width: 160px;
  text-align: center;
  background: var(--sg-surface);
  border: 1px solid var(--sg-border);
  padding: 3px 8px;
  border-radius: 3px;
  font-size: 11px;
}
.sg-scrub-btn {
  background: var(--sg-surface);
  border: 1px solid var(--sg-border);
  color: var(--sg-text);
  padding: 3px 10px;
  border-radius: 3px;
  cursor: pointer;
  font-size: 11px;
  font-family: inherit;
  transition: border-color .15s, color .15s;
}
.sg-scrub-btn:hover { border-color: var(--sg-amber); color: var(--sg-amber); }
.sg-scrub-btn.active { border-color: var(--sg-amber); color: var(--sg-amber); background: rgba(245,158,11,.08); }
#sg-scrubber .sg-sep { color: var(--sg-border); }
#sg-event-count {
  color: var(--sg-text-dim);
  font-family: monospace;
  font-size: 10px;
  white-space: nowrap;
}
</style>
{% endblock %}

{% block content %}
{# ── Toolbar ── #}
<div id="sg-toolbar">
  <span class="sg-title">&#9670; Strategos</span>
  <span class="sg-badge-cui">CUI // SP-CTI</span>
  <span class="sg-badge-theater">&#127758; UKRAINE THEATER</span>
  <span class="sg-tb-sep">|</span>
  <span style="color:var(--sg-grey-l);font-size:11px">Phase 1 — Geospatial Intelligence</span>
  <div id="sg-coord-display">LAT — &nbsp; LON —</div>
</div>

{# ── Body: panel + map ── #}
<div id="sg-body">

  {# ── Domain Layer Panel ── #}
  <div id="sg-panel">
    <div id="sg-panel-header">&#9776; Domain Layers</div>

    <label class="sg-layer" data-domain="land">
      <input type="checkbox" id="layer-land" checked/>
      <span class="sg-layer-dot" style="background:#f59e0b"></span>
      <span class="sg-layer-label">Land</span>
      <span class="sg-layer-count" id="cnt-land">—</span>
    </label>
    <label class="sg-layer" data-domain="sea">
      <input type="checkbox" id="layer-sea" checked/>
      <span class="sg-layer-dot" style="background:#22d3ee"></span>
      <span class="sg-layer-label">Sea</span>
      <span class="sg-layer-count" id="cnt-sea">—</span>
    </label>
    <label class="sg-layer" data-domain="air">
      <input type="checkbox" id="layer-air"/>
      <span class="sg-layer-dot" style="background:#a78bfa"></span>
      <span class="sg-layer-label">Air</span>
      <span class="sg-layer-count" id="cnt-air">—</span>
    </label>
    <label class="sg-layer" data-domain="cyber">
      <input type="checkbox" id="layer-cyber"/>
      <span class="sg-layer-dot" style="background:#ef4444"></span>
      <span class="sg-layer-label">Cyber</span>
      <span class="sg-layer-count" id="cnt-cyber">—</span>
    </label>
    <label class="sg-layer" data-domain="space">
      <input type="checkbox" id="layer-space"/>
      <span class="sg-layer-dot" style="background:#818cf8"></span>
      <span class="sg-layer-label">Space</span>
      <span class="sg-layer-count" id="cnt-space">—</span>
    </label>
    <label class="sg-layer" data-domain="iw">
      <input type="checkbox" id="layer-iw"/>
      <span class="sg-layer-dot" style="background:#fb923c"></span>
      <span class="sg-layer-label">IW</span>
      <span class="sg-layer-count" id="cnt-iw">—</span>
    </label>
    <label class="sg-layer" data-domain="ew">
      <input type="checkbox" id="layer-ew"/>
      <span class="sg-layer-dot" style="background:#facc15"></span>
      <span class="sg-layer-label">EW</span>
      <span class="sg-layer-count" id="cnt-ew">—</span>
    </label>
    <label class="sg-layer" data-domain="economic">
      <input type="checkbox" id="layer-economic"/>
      <span class="sg-layer-dot" style="background:#4ade80"></span>
      <span class="sg-layer-label">Economic</span>
      <span class="sg-layer-count" id="cnt-economic">—</span>
    </label>

    {# ── Mini status ── #}
    <div style="margin-top:auto;padding:10px 12px;border-top:1px solid var(--sg-border)">
      <div style="font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:var(--sg-amber);margin-bottom:6px">Summary</div>
      <div style="font-size:11px;color:var(--sg-grey-l);display:flex;flex-direction:column;gap:3px">
        <div>&#128200; ORBAT: <span style="color:var(--sg-text)">{{ summary.orbat_units }}</span></div>
        <div>&#128674; Ghost: <span style="color:var(--sg-cyan, #22d3ee)">{{ summary.ghost_signals }}</span></div>
        <div>&#9888; HITL: <span style="color:{% if summary.hitl_pending > 0 %}var(--sg-amber){% else %}var(--sg-text){% endif %}">{{ summary.hitl_pending }}</span></div>
      </div>
      <div style="margin-top:8px">
        <a href="/strategos" style="font-size:10px;color:var(--sg-text-dim);text-decoration:none">&larr; Overview</a>
      </div>
    </div>
  </div>

  {# ── Map ── #}
  <div id="sg-map"></div>
</div>

{# ── Time Scrubber ── #}
<div id="sg-scrubber">
  <label for="sg-time-slider">&#9201; Timeline</label>
  <button class="sg-scrub-btn" id="btn-play" title="Play/Pause time">&#9654;</button>
  <button class="sg-scrub-btn" id="btn-reset" title="Reset to start">&#8634;</button>
  <span class="sg-sep">|</span>
  <input type="range" id="sg-time-slider" min="0" max="100" value="100" step="1"/>
  <div id="sg-time-display">T+0000</div>
  <span class="sg-sep">|</span>
  <span id="sg-event-count">0 events visible</span>
</div>
{% endblock %}

{% block scripts %}
<script src="{{ url_for('static', filename='vendor/leaflet/leaflet.js') }}"></script>
{# PMTiles protocol + protomaps-leaflet for vector tile rendering #}
<script>
// Config injected from Flask
const SG_CONFIG = {
  pmtilesUrl: {{ sg_map_config.pmtiles_url | tojson }},
  tileUrl:    {{ sg_map_config.tile_url | tojson }},
  center:     [{{ sg_map_config.center_lat }}, {{ sg_map_config.center_lon }}],
  zoom:       {{ sg_map_config.zoom }},
};

// Domain layer colours matching the panel dots
const LAYER_COLORS = {
  land:     "#f59e0b",
  sea:      "#22d3ee",
  air:      "#a78bfa",
  cyber:    "#ef4444",
  space:    "#818cf8",
  iw:       "#fb923c",
  ew:       "#facc15",
  economic: "#4ade80",
};

// ── Init Leaflet map ──────────────────────────────────────────────────────
const map = L.map("sg-map", {
  center: SG_CONFIG.center,
  zoom:   SG_CONFIG.zoom,
  preferCanvas: true,
  zoomControl: true,
});

// Tile base layer — PMTiles vector tiles if configured, else dark raster
(function initBasemap() {
  if (SG_CONFIG.pmtilesUrl) {
    // Dynamically load protomaps-leaflet from CDN for vector PMTiles rendering.
    // Air-gap deployments: set STRATEGOS_PMTILES_URL to a local path and serve
    // protomaps-leaflet.js from tools/dashboard/static/vendor/protomaps/ instead.
    const pmScript = document.createElement("script");
    pmScript.src = "/strategos/static/js/pmtiles.js";
    pmScript.onload = function () {
      try {
        protomapsL.leafletLayer({
          url: SG_CONFIG.pmtilesUrl,
          theme: "dark",
          attribution: "PMTiles &copy; OpenStreetMap",
        }).addTo(map);
      } catch (e) {
        fallbackRasterTiles();
      }
    };
    pmScript.onerror = fallbackRasterTiles;
    document.head.appendChild(pmScript);
  } else {
    fallbackRasterTiles();
  }
})();

function fallbackRasterTiles() {
  L.tileLayer(SG_CONFIG.tileUrl, {
    attribution: "&copy; <a href='https://carto.com/'>CartoDB</a>",
    maxZoom: 18,
    errorTileUrl: "",
  }).addTo(map);
}

// ── Coordinate display ────────────────────────────────────────────────────
const coordDisplay = document.getElementById("sg-coord-display");
map.on("mousemove", function (e) {
  const lat = e.latlng.lat.toFixed(4);
  const lon = e.latlng.lng.toFixed(4);
  coordDisplay.textContent = "LAT " + (lat >= 0 ? "+" : "") + lat + "  LON " + (lon >= 0 ? "+" : "") + lon;
});
map.on("mouseout", function () {
  coordDisplay.textContent = "LAT —  LON —";
});

// ── Domain layer management ───────────────────────────────────────────────
const layerGroups = {};
const layerData   = {};

const DOMAIN_LAYERS = ["land", "sea", "air", "cyber", "space", "iw", "ew", "economic"];

DOMAIN_LAYERS.forEach(function (domain) {
  layerGroups[domain] = L.layerGroup();
  layerData[domain]   = [];
});

// Only load initially-checked layers
DOMAIN_LAYERS.forEach(function (domain) {
  const cb = document.getElementById("layer-" + domain);
  if (cb && cb.checked) {
    layerGroups[domain].addTo(map);
    fetchLayer(domain);
  }
});

// Toggle handler
document.querySelectorAll(".sg-layer input[type=checkbox]").forEach(function (cb) {
  cb.addEventListener("change", function () {
    const domain = cb.id.replace("layer-", "");
    if (cb.checked) {
      layerGroups[domain].addTo(map);
      if (!layerData[domain].length) fetchLayer(domain);
    } else {
      map.removeLayer(layerGroups[domain]);
    }
    updateEventCount();
  });
});

async function fetchLayer(domain) {
  try {
    const resp = await fetch("/strategos/api/map/layers/" + domain);
    const fc = await resp.json();
    layerData[domain] = fc.features || [];
    renderLayer(domain, layerData[domain]);
    const cnt = document.getElementById("cnt-" + domain);
    if (cnt) cnt.textContent = layerData[domain].length;
    updateEventCount();
  } catch (_) {
    const cnt = document.getElementById("cnt-" + domain);
    if (cnt) cnt.textContent = "0";
  }
}

function renderLayer(domain, features) {
  const lg = layerGroups[domain];
  lg.clearLayers();
  const color = LAYER_COLORS[domain] || "#ffffff";
  features.forEach(function (f) {
    if (!f.geometry || f.geometry.type !== "Point") return;
    const [lon, lat] = f.geometry.coordinates;
    const props = f.properties || {};
    const marker = L.circleMarker([lat, lon], {
      radius: 6,
      fillColor: color,
      color: "#000",
      weight: 1,
      opacity: 1,
      fillOpacity: 0.85,
    });
    const label = props.unit_name || props.signal_type || props.effect_type || props.name || domain.toUpperCase();
    marker.bindPopup(
      "<b>" + label + "</b>" +
      "<br><span style='color:var(--sg-grey-l)'>" + domain.toUpperCase() + " domain</span>" +
      buildPopupRows(props)
    );
    lg.addLayer(marker);
  });
}

function buildPopupRows(props) {
  const skip = new Set(["unit_name", "signal_type", "effect_type", "name", "lat", "lon", "id"]);
  let html = "";
  Object.keys(props).forEach(function (k) {
    if (skip.has(k) || props[k] == null || props[k] === "") return;
    const val = String(props[k]).slice(0, 60);
    html += "<br><span style='color:var(--sg-text-dim)'>" + k + ":</span> " + val;
  });
  return html;
}

function updateEventCount() {
  let total = 0;
  DOMAIN_LAYERS.forEach(function (d) {
    const cb = document.getElementById("layer-" + d);
    if (cb && cb.checked) total += layerData[d].length;
  });
  document.getElementById("sg-event-count").textContent = total + " events visible";
}

// ── Time scrubber ─────────────────────────────────────────────────────────
// The scrubber drives a temporal filter: value 0 = oldest known event,
// 100 = "now". Each tick redraws markers whose timestamp ≤ selected epoch.
const slider    = document.getElementById("sg-time-slider");
const timeDisp  = document.getElementById("sg-time-display");
const btnPlay   = document.getElementById("btn-play");
const btnReset  = document.getElementById("btn-reset");

// Date window: past 30 days → now
const T_END   = Date.now();
const T_START = T_END - 30 * 24 * 60 * 60 * 1000;

function sliderToEpoch(v) {
  return T_START + (parseInt(v, 10) / 100) * (T_END - T_START);
}

function formatEpoch(ms) {
  const d = new Date(ms);
  const pad = n => String(n).padStart(2, "0");
  return (
    d.getUTCFullYear() + "-" +
    pad(d.getUTCMonth() + 1) + "-" +
    pad(d.getUTCDate()) + " " +
    pad(d.getUTCHours()) + ":" +
    pad(d.getUTCMinutes()) + "Z"
  );
}

function applyTimeFilter() {
  const cutoff = sliderToEpoch(slider.value);
  timeDisp.textContent = formatEpoch(cutoff);

  // Filter markers: show only those whose detected_at / created_at ≤ cutoff.
  // If no timestamp field, always show (treat as timeless).
  DOMAIN_LAYERS.forEach(function (domain) {
    const cb = document.getElementById("layer-" + domain);
    if (!cb || !cb.checked) return;
    const lg = layerGroups[domain];
    const color = LAYER_COLORS[domain] || "#fff";
    const filtered = layerData[domain].filter(function (f) {
      const p = f.properties || {};
      const ts = p.detected_at || p.created_at || p.timestamp;
      if (!ts) return true;
      return new Date(ts).getTime() <= cutoff;
    });
    // Re-render with filtered set
    lg.clearLayers();
    filtered.forEach(function (f) {
      if (!f.geometry || f.geometry.type !== "Point") return;
      const [lon, lat] = f.geometry.coordinates;
      const props = f.properties || {};
      const m = L.circleMarker([lat, lon], {
        radius: 6, fillColor: color, color: "#000",
        weight: 1, opacity: 1, fillOpacity: 0.85,
      });
      const label = props.unit_name || props.signal_type || props.effect_type || props.name || domain.toUpperCase();
      m.bindPopup("<b>" + label + "</b><br>" + buildPopupRows(props));
      lg.addLayer(m);
    });
  });
}

slider.addEventListener("input", applyTimeFilter);
applyTimeFilter(); // initial render

// Playback
let playTimer = null;
btnPlay.addEventListener("click", function () {
  if (playTimer) {
    clearInterval(playTimer);
    playTimer = null;
    btnPlay.classList.remove("active");
    btnPlay.textContent = "▶";
  } else {
    if (parseInt(slider.value, 10) >= 100) slider.value = 0;
    btnPlay.classList.add("active");
    btnPlay.textContent = "⏸";
    playTimer = setInterval(function () {
      let v = parseInt(slider.value, 10) + 1;
      if (v > 100) {
        v = 100;
        clearInterval(playTimer);
        playTimer = null;
        btnPlay.classList.remove("active");
        btnPlay.textContent = "▶";
      }
      slider.value = v;
      applyTimeFilter();
    }, 120);
  }
});

btnReset.addEventListener("click", function () {
  if (playTimer) { clearInterval(playTimer); playTimer = null; }
  btnPlay.classList.remove("active");
  btnPlay.textContent = "▶";
  slider.value = 100;
  applyTimeFilter();
});
</script>
{% endblock %}