{% extends "base.html" %}
{% set active = "map" %}
{% block title %}Map — GeoSIGINT{% endblock %}

{% block content %}
<div class="page-header page-header--compact">
    <h1>Geospatial Signal Map</h1>
    <div class="map-controls">
        <label><input type="checkbox" id="show-stations" checked> Stations</label>
        <label><input type="checkbox" id="show-emitters" checked> Emitters</label>
        <label><input type="checkbox" id="show-signals" checked> Signal Clusters</label>
        <label><input type="checkbox" id="show-vessels" checked> AIS Vessels</label>
        <label><input type="checkbox" id="show-kalibr" 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="sigint-map" class="sigint-map" style="position:relative;z-index:0;isolation:isolate"></div>

<!-- Legend -->
<div class="map-legend">
    <div class="map-legend__item"><span class="legend-dot" style="background:#22c55e"></span> Receiver Station</div>
    <div class="map-legend__item"><span class="legend-dot" style="background:#ef4444"></span> Emitter (Comms)</div>
    <div class="map-legend__item"><span class="legend-dot" style="background:#f59e0b"></span> Emitter (Radar)</div>
    <div class="map-legend__item"><span class="legend-dot" style="background:#6366f1"></span> Signal Cluster</div>
    <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;opacity:0.4;border:2px solid #f97316"></span> Kalibr 1 500 km</div>
</div>
{% endblock %}

{% block scripts %}
<script>
(function() {
    const map = L.map('sigint-map', {
        center: [25, 50], zoom: 3,
        zoomControl: true,
        attributionControl: true
    });

    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 = {
        stations: L.layerGroup().addTo(map),
        emitters: L.layerGroup().addTo(map),
        signals:  L.layerGroup().addTo(map),
        vessels:  L.layerGroup().addTo(map),
        kalibr:   L.layerGroup().addTo(map),
    };

    // ── Stations ───────────────────────────────────────────────────────────
    fetch('/api/map/stations').then(r=>r.json()).then(data => {
        data.stations.forEach(s => {
            L.circleMarker([s.lat, s.lon], {radius: 7, color: '#22c55e', fillColor: '#22c55e', fillOpacity: 0.8, weight: 2})
                .bindPopup(`<b>${s.callsign || s.name}</b><br>${s.name}<br>Type: ${s.station_type}`)
                .addTo(layers.stations);
        });
    });

    // ── Emitters ───────────────────────────────────────────────────────────
    fetch('/api/map/emitters').then(r=>r.json()).then(data => {
        data.emitters.forEach(e => {
            const color = e.emitter_type === 'radar' ? '#f59e0b' : e.emitter_type === 'comms' ? '#ef4444' : '#a855f7';
            L.circleMarker([e.lat, e.lon], {radius: 5 + Math.min(e.signal_count/20, 8), color, fillColor: color, fillOpacity: 0.6, weight: 1})
                .bindPopup(`<b>${e.name}</b><br>Type: ${e.emitter_type}<br>Freq: ${(e.freq_hz/1e6).toFixed(3)} MHz<br>Mod: ${e.modulation}<br>Signals: ${e.signal_count}<br>Confidence: ${(e.confidence*100).toFixed(0)}%`)
                .addTo(layers.emitters);
        });
    });

    // ── Signal clusters ────────────────────────────────────────────────────
    fetch('/api/map/signals?resolution=2').then(r=>r.json()).then(data => {
        data.clusters.forEach(c => {
            const r = 4 + Math.min(Math.sqrt(c.count), 15);
            const hasAnom = c.classifications && c.classifications.includes('anomalous');
            const color = hasAnom ? '#ef4444' : '#6366f1';
            L.circleMarker([c.grid_lat, c.grid_lon], {radius: r, color, fillColor: color, fillOpacity: 0.35, weight: 1})
                .bindPopup(`<b>${c.count} signals</b><br>Avg power: ${c.avg_power ? c.avg_power.toFixed(1) : '?'} dBm<br>Modulations: ${c.modulations || '?'}`)
                .addTo(layers.signals);
        });
    });

    // ── AIS vessel latest positions ────────────────────────────────────────
    fetch('/api/sea/vessels').then(r=>r.json()).then(data => {
        data.vessels.forEach(v => {
            const spd = v.speed != null ? v.speed.toFixed(1) + ' kn' : 'n/a';
            const hdg = v.heading != null ? v.heading.toFixed(0) + '°' : 'n/a';
            L.circleMarker([v.lat, v.lon], {
                radius: 5, color: '#38bdf8', fillColor: '#38bdf8',
                fillOpacity: 0.75, weight: 1.5,
            }).bindPopup(
                `<b>MMSI ${v.mmsi}</b><br>Type: ${v.vessel_type || '?'}<br>` +
                `Speed: ${spd} &nbsp; Hdg: ${hdg}<br>` +
                `<small>${v.timestamp}</small>`
            ).addTo(layers.vessels);
        });
    });

    // ── Kalibr 1 500 km threat rings ───────────────────────────────────────
    // 1 500 km expressed in metres for L.circle radius
    const KALIBR_RANGE_M = 1_500_000;

    fetch('/api/sea/kalibr-zones').then(r=>r.json()).then(data => {
        data.kalibr_vessels.forEach(v => {
            // Threat ring
            L.circle([v.lat, v.lon], {
                radius: KALIBR_RANGE_M,
                color: '#f97316', weight: 1.5,
                fillColor: '#f97316', fillOpacity: 0.07,
                dashArray: '6 4',
            }).bindPopup(
                `<b>Kalibr threat zone</b><br>${v.vessel_name} (${v.vessel_class || 'unknown class'})<br>` +
                `Nation: ${v.nation}<br>Range: 1 500 km<br>` +
                `Pos: ${v.lat.toFixed(3)}, ${v.lon.toFixed(3)}<br>` +
                `<small>${v.timestamp}</small>`
            ).addTo(layers.kalibr);

            // Vessel marker in orange to distinguish from ordinary AIS
            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>` +
                `Nation: ${v.nation}<br>MMSI: ${v.mmsi}<br>` +
                `<b style="color:#f97316">&#9888; Kalibr-capable</b>`
            ).addTo(layers.kalibr);
        });
    });

    // ── Layer toggles ──────────────────────────────────────────────────────
    ['stations','emitters','signals','vessels','kalibr'].forEach(name => {
        document.getElementById('show-'+name).addEventListener('change', function() {
            this.checked ? map.addLayer(layers[name]) : map.removeLayer(layers[name]);
        });
    });
})();
</script>
{% endblock %}