{% extends "base.html" %}
{% set active = "sea" %}
{% block title %}Sea Tracker — GeoSIGINT{% endblock %}

{% block content %}
<div class="page-header page-header--compact">
    <h1>AIS Vessel Tracker</h1>
    <div class="map-controls">
        <label><input type="checkbox" id="show-orbat" checked> ORBAT Vessels</label>
        <label><input type="checkbox" id="show-all" checked> All AIS</label>
        <label><input type="checkbox" id="show-rings" checked> Kalibr Threat Rings</label>
        <select id="map-style">
            <option value="dark">Dark</option>
            <option value="satellite">Satellite</option>
            <option value="terrain">Terrain</option>
        </select>
    </div>
</div>
<div id="sea-map" style="height:520px;border-radius:6px;overflow:hidden;position:relative;z-index:0;isolation:isolate"></div>

<div style="display:flex;gap:1rem;margin-top:1rem">
    <div class="card" style="flex:1">
        <h3>Fleet Summary</h3>
        <div id="fleet-summary">Loading…</div>
    </div>
    <div class="card" style="flex:2">
        <h3>ORBAT — Order of Battle</h3>
        <div id="orbat-table">Loading…</div>
    </div>
</div>

<div class="map-legend" style="margin-top:.5rem">
    <div class="map-legend__item"><span class="legend-dot" style="background:#38bdf8"></span> AIS Vessel</div>
    <div class="map-legend__item"><span class="legend-dot" style="background:#f97316"></span> Kalibr-capable</div>
    <div class="map-legend__item"><span class="legend-dot" style="background:#f97316;opacity:0.3;border:2px dashed #f97316"></span> 1 500 km Threat Ring</div>
</div>
{% endblock %}

{% block scripts %}
<script>
(function() {
    const map = L.map('sea-map', { center: [5, 100], zoom: 4 });
    const tiles = {
        dark: L.tileLayer('https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png', { attribution: '&copy; OpenStreetMap, &copy; CARTO', maxZoom: 18 }),
        satellite: L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', { attribution: '&copy; Esri', maxZoom: 18 }),
        terrain: L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: '&copy; OpenStreetMap', maxZoom: 18 }),
    };
    tiles.dark.addTo(map);
    document.getElementById('map-style').addEventListener('change', function() {
        Object.values(tiles).forEach(t => map.removeLayer(t));
        tiles[this.value].addTo(map);
    });

    const layers = {
        all:   L.layerGroup().addTo(map),
        orbat: L.layerGroup().addTo(map),
        rings: L.layerGroup().addTo(map),
    };
    const KALIBR_M = 1_500_000;

    fetch('/api/sea/vessels').then(r=>r.json()).then(d => {
        d.vessels.forEach(v => {
            L.circleMarker([v.lat, v.lon], { radius: 4, color: '#38bdf8', fillColor: '#38bdf8', fillOpacity: 0.7, weight: 1 })
                .bindPopup(`<b>MMSI ${v.mmsi}</b><br>Type: ${v.vessel_type||'?'}<br>Speed: ${v.speed!=null?v.speed.toFixed(1)+' kn':'n/a'}<br><small>${v.timestamp}</small>`)
                .addTo(layers.all);
        });
    });

    fetch('/api/sea/kalibr-zones').then(r=>r.json()).then(d => {
        d.kalibr_vessels.forEach(v => {
            L.circle([v.lat, v.lon], { radius: KALIBR_M, color: '#f97316', weight: 1.5, fillColor: '#f97316', fillOpacity: 0.07, dashArray: '6 4' })
                .bindPopup(`<b>Kalibr zone — ${v.vessel_name}</b><br>Class: ${v.vessel_class||'?'}<br>Nation: ${v.nation}<br>Range: 1 500 km`)
                .addTo(layers.rings);
            L.circleMarker([v.lat, v.lon], { radius: 7, color: '#f97316', fillColor: '#f97316', fillOpacity: 0.9, weight: 2 })
                .bindPopup(`<b>${v.vessel_name}</b><br>Class: ${v.vessel_class||'?'}<br>MMSI: ${v.mmsi}<br><b style="color:#f97316">&#9888; Kalibr-capable</b>`)
                .addTo(layers.orbat);
        });
    });

    ['orbat','all','rings'].forEach((name, i) => {
        const ids = ['show-orbat','show-all','show-rings'];
        document.getElementById(ids[i]).addEventListener('change', function() {
            this.checked ? map.addLayer(layers[name]) : map.removeLayer(layers[name]);
        });
    });

    fetch('/api/sea/summary').then(r=>r.json()).then(d => {
        document.getElementById('fleet-summary').innerHTML =
            `<p><b>Vessels tracked:</b> ${d.unique_vessels}</p>` +
            `<p><b>Total fixes:</b> ${d.total_tracks}</p>` +
            `<p><b>Window:</b> ${d.earliest ? d.earliest.slice(0,16) : '—'} → ${d.latest ? d.latest.slice(0,16) : '—'}</p>` +
            '<ul>' + (d.type_distribution||[]).map(t=>`<li>${t.vessel_type||'Unknown'}: ${t.vessel_count}</li>`).join('') + '</ul>';
    });

    fetch('/api/orbat/vessels').then(r=>r.json()).then(d => {
        const rows = d.vessels.map(v =>
            `<tr>
                <td>${v.vessel_name}</td>
                <td>${v.vessel_class||'?'}</td>
                <td>${v.nation}</td>
                <td>${v.hull_number||'—'}</td>
                <td style="color:${v.kalibr_capable?'#f97316':'#6b7280'}">${v.kalibr_capable?'&#9888; Yes':'No'}</td>
            </tr>`
        ).join('');
        document.getElementById('orbat-table').innerHTML =
            `<table style="width:100%;border-collapse:collapse;font-size:.85rem">
                <thead><tr><th>Vessel</th><th>Class</th><th>Nation</th><th>Hull</th><th>Kalibr</th></tr></thead>
                <tbody>${rows}</tbody>
            </table>`;
    });
})();
</script>
{% endblock %}