{% extends "base.html" %}
{% set active = "strategos" %}
{% block title %}Maritime Tracking — 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-grey:    #6b7280;
  --sg-text:    #d1fae5;
  --sg-dim:     #6b9e7a;
}
.nav-dropdown-menu { z-index: 1100 !important; }
.navbar { z-index: 1050 !important; }

.mt-page {
  background: var(--sg-void);
  display: flex;
  flex-direction: column;
  height: calc(100vh - 48px);
  overflow: hidden;
}
#mt-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 14px;
  background: var(--sg-bg);
  border-bottom: 1px solid var(--sg-border);
  font-size: 12px;
  flex-shrink: 0;
  flex-wrap: wrap;
}
.mt-title {
  font-size: 13px; font-weight: 700;
  color: var(--sg-cyan);
  text-transform: uppercase;
  letter-spacing: .1em;
}
.mt-badge {
  background: #0a4a6e; color: var(--sg-cyan);
  font-size: 10px; font-weight: 700;
  padding: 2px 8px; border-radius: 2px;
  border: 1px solid var(--sg-cyan);
}
.mt-btn {
  background: var(--sg-surface);
  border: 1px solid var(--sg-border);
  color: var(--sg-text);
  padding: 4px 12px; border-radius: 3px;
  font-size: 11px; font-weight: 600; cursor: pointer;
  transition: background .15s, border-color .15s;
}
.mt-btn:hover  { background: #1e3a2e; border-color: var(--sg-dim); }
.mt-btn.active { background: #0a3a2a; border-color: var(--sg-green); color: var(--sg-green); }
.mt-btn.danger { border-color: var(--sg-red); color: var(--sg-red); }
.mt-sep { width: 1px; height: 20px; background: var(--sg-border); flex-shrink: 0; }
#mt-clock { font-family: monospace; font-size: 11px; color: var(--sg-amber); min-width: 155px; }
.mt-select {
  background: var(--sg-surface); border: 1px solid var(--sg-border);
  color: var(--sg-text); padding: 3px 8px; font-size: 11px; border-radius: 3px; cursor: pointer;
}

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

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

#mt-sidebar {
  width: 230px; min-width: 230px;
  background: var(--sg-bg);
  border-right: 1px solid var(--sg-border);
  display: flex; flex-direction: column; overflow: hidden;
}
#mt-sidebar-header {
  padding: 7px 12px;
  font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .1em;
  color: var(--sg-dim);
  border-bottom: 1px solid var(--sg-border);
  flex-shrink: 0;
}
#mt-vessel-list { overflow-y: auto; flex: 1; }
.mt-vessel-item {
  padding: 8px 12px;
  border-bottom: 1px solid var(--sg-border);
  cursor: pointer; transition: background .1s;
}
.mt-vessel-item:hover   { background: var(--sg-surface); }
.mt-vessel-item.focused { background: #0d2a1e; border-left: 3px solid var(--sg-cyan); padding-left: 9px; }
.mt-vessel-name { font-size: 12px; font-weight: 600; color: var(--sg-text); }
.mt-vessel-meta { font-size: 10px; color: var(--sg-dim); margin-top: 2px; }
.mt-vessel-badge {
  display: inline-block; font-size: 9px; font-weight: 700;
  padding: 1px 5px; border-radius: 2px; margin-top: 3px;
}
.mt-vessel-pos  { font-size: 10px; color: var(--sg-amber); margin-top: 2px; font-family: monospace; }

#mt-map { flex: 1; background: #071010; }

/* Leaflet dark theme */
.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;
}
/* Only dim OSM/Carto tiles; ESRI Ocean is used as-is */
.leaflet-tile { filter: brightness(0.85); }

.mt-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;
}
.mt-tooltip::before { display: none !important; }
</style>
{% endblock %}

{% block content %}
<div class="mt-page">

  <!-- Toolbar -->
  <div id="mt-toolbar">
    <span class="mt-title">&#9830; Maritime Track Replay</span>
    <span class="mt-badge">AIS / DARK VESSEL</span>
    <div class="mt-sep"></div>

    <button id="btn-play"  class="mt-btn active" onclick="togglePlay()">&#9646;&#9646; Pause</button>
    <button id="btn-reset" class="mt-btn danger"  onclick="resetAnim()">&#9632; Reset</button>
    <div class="mt-sep"></div>

    <label style="font-size:11px;color:var(--sg-dim)">Duration</label>
    <select id="mt-speed" class="mt-select" onchange="setDuration(+this.value)">
      <option value="60000">Slow (60s)</option>
      <option value="30000" selected>Normal (30s)</option>
      <option value="15000">Fast (15s)</option>
      <option value="8000">Very Fast (8s)</option>
    </select>
    <div class="mt-sep"></div>

    <label style="font-size:11px;color:var(--sg-dim)">Type</label>
    <select id="mt-filter" class="mt-select" onchange="applyFilter(this.value)">
      <option value="">All</option>
      <option value="warship">Warship</option>
      <option value="cargo">Cargo</option>
      <option value="tanker">Tanker</option>
      <option value="fishing">Fishing</option>
      <option value="unknown">Unknown</option>
    </select>
    <div class="mt-sep"></div>

    <span id="mt-clock">—</span>
    <div class="mt-sep"></div>
    <span id="feed-status-pill" style="font-size:10px;font-weight:700;padding:2px 8px;border-radius:10px;border:1px solid var(--sg-grey);color:var(--sg-grey)">&#9679; FEED …</span>
    <div style="margin-left:auto">
      <a href="/strategos" style="font-size:11px;color:var(--sg-dim);text-decoration:none">&larr; Strategos</a>
    </div>
  </div>

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

  <!-- Body -->
  <div id="mt-body">
    <div id="mt-sidebar">
      <div id="mt-sidebar-header">
        Vessels <span id="mt-vessel-count" style="color:var(--sg-cyan)"></span>
      </div>
      <div id="mt-vessel-list"></div>
    </div>
    <div id="mt-map"></div>
  </div>

</div>
{% endblock %}

{% block scripts %}
<script src="{{ url_for('static', filename='vendor/leaflet/leaflet.js') }}"></script>
<script>
// ── Config ─────────────────────────────────────────────────────────────────
const TYPE_COLORS = {
  warship: '#ef4444',
  cargo:   '#22c55e',
  tanker:  '#f59e0b',
  fishing: '#22d3ee',
  unknown: '#a855f7',
};
const TYPE_LABELS = {
  warship: 'WARSHIP', cargo: 'CARGO', tanker: 'TANKER',
  fishing: 'FISHING', unknown: 'UNKNOWN',
};
const WAKE_LEN = 20;   // trail points

// ── State ──────────────────────────────────────────────────────────────────
let allVessels    = [];
let activeVessels = [];
let vesselState   = {};   // mmsi → { marker, wakeLine, wake[] }

let playing        = true;
let animDuration   = 30000;  // ms of wall-clock for full route
let animProgress   = 0;      // 0.0 → 1.0
let rafId          = null;
let rafStart       = null;   // performance.now() when current play segment began
let progressAtSegStart = 0;  // animProgress value when play segment began

let simStart = 0, simEnd = 0;  // unix ms bounds across all vessels
let focusedMmsi = null;

// ── Map ────────────────────────────────────────────────────────────────────
const map = L.map('mt-map', { center: [25, 90], zoom: 4, zoomControl: true });

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 — GEBCO, NOAA, NGA, others', maxZoom: 13 }
  ),
  'Street (OSM)': L.tileLayer(
    'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
    { attribution: '© OpenStreetMap', maxZoom: 19 }
  ),
  'Dark': L.tileLayer(
    'https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png',
    { attribution: '© OpenStreetMap © CARTO', maxZoom: 19 }
  ),
};
const overlayLayers = {
  'Nautical Charts (OpenSeaMap)': L.tileLayer(
    'https://tiles.openseamap.org/seamark/{z}/{x}/{y}.png',
    { attribution: '© OpenSeaMap', maxZoom: 18, opacity: 0.8 }
  ),
};

baseLayers['Ocean (ESRI)'].addTo(map);
L.control.layers(baseLayers, overlayLayers, { position: 'topright', collapsed: false }).addTo(map);

// ── Ship SVG icon (rotated by heading) ────────────────────────────────────
function shipIcon(color, heading) {
  const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="30" viewBox="0 0 24 30">
    <polygon points="12,2 22,26 12,21 2,26"
      fill="${color}" stroke="#000e0a" stroke-width="1.5" opacity="0.95"/>
    <circle cx="12" cy="21" r="2.8" fill="#fff" opacity="0.6"/>
  </svg>`;
  return L.divIcon({
    html: `<div style="transform:rotate(${heading}deg);transform-origin:50% 70%;width:24px;height:30px">${svg}</div>`,
    className: '',
    iconSize: [24, 30],
    iconAnchor: [12, 21],
  });
}

// ── Interpolate between two track points by fraction f ∈ [0,1] ────────────
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   + (b.speed   - a.speed)   * f,
    heading: b.heading,            // snap; could slerp but not needed
    ts:      a.ts,
  };
}

// ── Map global progress (0→1) to a vessel position ────────────────────────
// Each vessel's track spans its own sim-time range.
// We map global progress → global sim time → position within each vessel's track.
function posAtProgress(vessel, p) {
  const t = simStart + p * (simEnd - simStart);
  const track = vessel.track;

  // Before first point
  if (t <= track[0].ms) return { ...track[0] };
  // After last point
  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] };
}

// ── Wake trail ─────────────────────────────────────────────────────────────
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: update all vessel positions for current progress ─────────────────
function tick() {
  // Update scrubber
  document.getElementById('mt-progress').value = Math.round(animProgress * 10000);

  // Update clock (show sim time)
  const simMs = simStart + animProgress * (simEnd - simStart);
  const d = new Date(simMs);
  document.getElementById('mt-clock').textContent =
    d.toISOString().replace('T',' ').slice(0,16) + ' UTC';

  activeVessels.forEach(v => {
    const vs = vesselState[v.mmsi];
    if (!vs) return;

    const pos = posAtProgress(v, animProgress);
    const ll  = [pos.lat, pos.lon];

    vs.marker.setLatLng(ll);
    vs.marker.setIcon(shipIcon(vs.color, pos.heading));
    pushWake(vs, pos.lat, pos.lon);

    vs.marker.setTooltipContent(
      `<b style="color:${vs.color}">${v.name}</b><br>` +
      `MMSI: ${v.mmsi} &nbsp; <b>${v.flag}</b><br>` +
      `${pos.lat.toFixed(4)}° N &nbsp; ${pos.lon.toFixed(4)}° E<br>` +
      `Speed: ${pos.speed.toFixed(1)} kt &nbsp; Hdg: ${Math.round(pos.heading)}°<br>` +
      `${TYPE_LABELS[v.vessel_type] || '?'}`
    );

    const posEl = document.getElementById('vpos-' + v.mmsi);
    if (posEl) {
      posEl.textContent =
        pos.lat.toFixed(3) + '°N  ' +
        pos.lon.toFixed(3) + '°E  ' +
        pos.speed.toFixed(1) + 'kt';
    }
  });
}

// ── Animation loop (wall-clock based) ──────────────────────────────────────
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(vesselState).forEach(vs => {
    vs.wake = [];
    vs.wakeLine.setLatLngs([]);
  });
  playing = true;
  updatePlayBtn();
  startLoop();
}

function setDuration(ms) {
  // Recalculate remaining time based on current progress
  animDuration = ms;
  if (playing) startLoop();  // restart segment from current progress
}

function scrub(p) {
  animProgress = Math.max(0, Math.min(1, p));
  progressAtSegStart = animProgress;
  rafStart = null;
  tick();
  if (!playing) {
    // Just update visuals, don't restart loop
  } else {
    startLoop();
  }
}

// ── Filter ─────────────────────────────────────────────────────────────────
function applyFilter(type) {
  // Remove old map objects
  Object.values(vesselState).forEach(vs => {
    if (vs.marker)   map.removeLayer(vs.marker);
    if (vs.wakeLine) map.removeLayer(vs.wakeLine);
  });
  vesselState = {};

  activeVessels = type ? allVessels.filter(v => v.vessel_type === type) : allVessels.slice();
  buildSidebar();
  initMapObjects();
  resetAnim();
}

// ── Sidebar ─────────────────────────────────────────────────────────────────
function buildSidebar() {
  const list = document.getElementById('mt-vessel-list');
  list.innerHTML = '';
  document.getElementById('mt-vessel-count').textContent = `(${activeVessels.length})`;

  activeVessels.forEach(v => {
    const c = TYPE_COLORS[v.vessel_type] || '#fff';
    const div = document.createElement('div');
    div.className = 'mt-vessel-item';
    div.id = 'vitem-' + v.mmsi;
    const srcDot = v.source === 'sdr'
      ? `<span title="SDR hardware" style="color:#22d3ee;font-size:9px;margin-left:4px">&#9679; SDR</span>`
      : v.source === 'aishub'
        ? `<span title="AISHub UDP" style="color:#22c55e;font-size:9px;margin-left:4px">&#9679; HUB</span>`
        : `<span title="Unknown source" style="color:#6b7280;font-size:9px;margin-left:4px">&#9679;</span>`;
    div.innerHTML = `
      <div class="mt-vessel-name" style="color:${c}">${v.name}</div>
      <div class="mt-vessel-meta">${v.mmsi} · ${v.flag}${srcDot}</div>
      <span class="mt-vessel-badge"
            style="background:${c}22;color:${c};border:1px solid ${c}44">
        ${TYPE_LABELS[v.vessel_type] || '?'}
      </span>
      <div class="mt-vessel-pos" id="vpos-${v.mmsi}">—</div>`;
    div.onclick = () => {
      focusedMmsi = v.mmsi;
      document.querySelectorAll('.mt-vessel-item').forEach(e => e.classList.remove('focused'));
      div.classList.add('focused');
      const vs = vesselState[v.mmsi];
      if (vs?.marker) map.setView(vs.marker.getLatLng(), 7);
    };
    list.appendChild(div);
  });
}

// ── Init Leaflet objects for active vessels ────────────────────────────────
function initMapObjects() {
  activeVessels.forEach(v => {
    const c    = TYPE_COLORS[v.vessel_type] || '#fff';
    const pt0  = v.track[0];

    const marker = L.marker([pt0.lat, pt0.lon], {
      icon: shipIcon(c, pt0.heading),
      zIndexOffset: 1000,
    }).addTo(map);

    marker.bindTooltip('', {
      className: 'mt-tooltip',
      permanent: false,
      direction: 'right',
      offset: [14, 0],
    });

    const wakeLine = L.polyline([], {
      color: c, weight: 2, opacity: 0.5, dashArray: '5 5',
    }).addTo(map);

    vesselState[v.mmsi] = { marker, wakeLine, wake: [], color: c };

    // Right-click → Ask STRATEGOS
    marker.on('contextmenu', function(e) {
      L.DomEvent.stop(e);
      if (typeof window.sgChat === 'undefined') return;
      const pos = posAtProgress(v, _progress);
      window.sgChat.showMenu(e.originalEvent.clientX, e.originalEvent.clientY, {
        type: 'vessel',
        label: v.vessel_name || 'Unknown Vessel',
        mmsi: v.mmsi,
        flag: v.flag || 'N/A',
        lat: pos ? pos.lat : (v.track[0] ? v.track[0].lat : 0),
        lon: pos ? pos.lon : (v.track[0] ? v.track[0].lon : 0),
        speed_kts: v.speed_kts || 'N/A',
        cargo_type: v.cargo_type || v.vessel_type || 'N/A',
        track_points: v.track.length,
        anomaly_flag: v.anomaly_flag ? 'YES' : 'NO',
      });
    });
  });
}

// ── Feed status pill ──────────────────────────────────────────────────────
function refreshFeedStatus() {
  fetch('/api/strategos/maritime/feed/status')
    .then(r => r.ok ? r.json() : null)
    .then(d => {
      const pill = document.getElementById('feed-status-pill');
      if (!pill || !d) return;
      if (d.live) {
        pill.style.borderColor = '#22c55e';
        pill.style.color = '#22c55e';
        pill.textContent = '● LIVE · ' + d.mode.toUpperCase();
      } else {
        pill.style.borderColor = '#f59e0b';
        pill.style.color = '#f59e0b';
        pill.textContent = '● REPLAY · ' + d.mode.toUpperCase();
      }
    }).catch(() => {});
}
refreshFeedStatus();
setInterval(refreshFeedStatus, 30000);

// ── Bootstrap ─────────────────────────────────────────────────────────────
fetch('/api/strategos/maritime/tracks')
  .then(r => r.json())
  .then(data => {
    // Parse ISO timestamps → epoch ms; drop any point with invalid ts
    allVessels = data.vessels.map(v => ({
      ...v,
      track: v.track
        .map(p => ({ ...p, ms: new Date(p.ts).getTime() }))
        .filter(p => isFinite(p.ms)),
    })).filter(v => v.track.length >= 2);

    // Outlier guard: exclude vessels whose first timestamp is > 30 days
    // outside the median first-timestamp across all vessels.
    const firstMss = allVessels.map(v => v.track[0].ms).sort((a, b) => a - b);
    const medianFirst = firstMss[Math.floor(firstMss.length / 2)] || 0;
    const DAY_MS = 86400000;
    allVessels = allVessels.filter(v =>
      Math.abs(v.track[0].ms - medianFirst) <= 30 * DAY_MS
    );

    // Global time bounds from cleaned vessel set
    allVessels.forEach(v => {
      const first = v.track[0].ms;
      const last  = v.track[v.track.length - 1].ms;
      if (!simStart || first < simStart) simStart = first;
      if (!simEnd   || last  > simEnd)   simEnd   = last;
    });

    activeVessels = allVessels.slice();
    buildSidebar();
    initMapObjects();

    // Fit map to all track points
    const pts = allVessels.flatMap(v => v.track.map(p => [p.lat, p.lon]));
    if (pts.length) map.fitBounds(pts, { padding: [40, 40] });

    startLoop();
  })
  .catch(e => {
    document.getElementById('mt-clock').textContent = 'Error: ' + e;
  });
</script>
{% endblock %}