{% extends "base.html" %}
{% set active = "militia" %}
{% block title %}Maritime Militia Classifier — GeoSIGINT{% endblock %}

{% block head %}
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
<style>
.mil-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:.75rem; margin-bottom:1rem; }
.mil-stat { background:#1f2937; border:1px solid #374151; border-radius:6px; padding:.9rem 1.1rem; }
.mil-stat__val { font-size:1.65rem; font-weight:700; color:#e2e8f0; line-height:1.1; }
.mil-stat__label { font-size:.75rem; color:#9ca3af; margin-top:.25rem; text-transform:uppercase; letter-spacing:.04em; }
.section-title { font-size:.95rem; font-weight:600; color:#d1d5db; margin:1.2rem 0 .5rem; text-transform:uppercase; letter-spacing:.05em; border-bottom:1px solid #374151; padding-bottom:.3rem; }
#militia-map { height:400px; border-radius:6px; overflow:hidden; margin-bottom:.75rem; position:relative; z-index:0; isolation:isolate; }
.vessel-form { background:#1f2937; border:1px solid #374151; border-radius:6px; padding:.9rem; margin-bottom:.75rem; }
.vessel-form input, .vessel-form select { background:#111827; border:1px solid #374151; color:#e2e8f0; border-radius:4px; padding:.35rem .55rem; font-size:.8rem; width:100%; }
.form-row { display:grid; grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); gap:.5rem; margin-bottom:.5rem; }
.form-row label { font-size:.72rem; color:#9ca3af; display:block; margin-bottom:.2rem; }
.btn { background:#2563eb; color:#fff; border:none; border-radius:4px; padding:.4rem .9rem; font-size:.8rem; font-weight:600; cursor:pointer; }
.btn:hover { background:#1d4ed8; }
.btn-danger { background:#dc2626; }
.btn-danger:hover { background:#b91c1c; }
table.result-table { width:100%; border-collapse:collapse; font-size:.78rem; }
table.result-table th { color:#9ca3af; font-weight:500; text-align:left; padding:.3rem .5rem; border-bottom:1px solid #374151; }
table.result-table td { padding:.35rem .5rem; border-bottom:1px solid #1f2937; vertical-align:middle; }
.cls-badge { display:inline-block; padding:.1rem .45rem; border-radius:3px; font-size:.7rem; font-weight:700; text-transform:uppercase; }
.cls-CONFIRMED { background:#ef444422; color:#ef4444; border:1px solid #ef444444; }
.cls-SUSPECTED { background:#f59e0b22; color:#f59e0b; border:1px solid #f59e0b44; }
.cls-UNLIKELY { background:#22c55e22; color:#22c55e; border:1px solid #22c55e44; }
.score-bar-bg { background:#1f2937; border-radius:4px; height:8px; width:100%; min-width:60px; }
.score-bar { height:8px; border-radius:4px; }
.swarm-card { background:#1f2937; border:1px solid #ef444444; border-radius:6px; padding:.75rem; margin-bottom:.5rem; }
.swarm-card__hdr { display:flex; align-items:center; gap:.5rem; font-size:.82rem; font-weight:600; margin-bottom:.4rem; }
.swarm-vessel-count { background:#ef444422; color:#ef4444; border-radius:3px; padding:.1rem .4rem; font-size:.72rem; }
</style>
{% endblock %}

{% block content %}
<div class="page-header page-header--compact">
    <h1>Maritime Militia Classifier</h1>
    <span style="font-size:.8rem;color:#6b7280">Three-layer detection: Fishing Anomaly · Formation Coherence · AIS Darkness</span>
</div>

<!-- Summary stats -->
<div class="mil-grid" id="mil-stats">
    <div class="mil-stat"><div class="mil-stat__val" id="s-zones">6</div><div class="mil-stat__label">Disputed Zones</div></div>
    <div class="mil-stat"><div class="mil-stat__val" id="s-islands">6</div><div class="mil-stat__label">Artificial Islands</div></div>
    <div class="mil-stat"><div class="mil-stat__val" id="s-confirmed-thr">0.75</div><div class="mil-stat__label">Confirmed Threshold</div></div>
    <div class="mil-stat"><div class="mil-stat__val" id="s-suspected-thr">0.45</div><div class="mil-stat__label">Suspected Threshold</div></div>
    <div class="mil-stat"><div class="mil-stat__val">35% / 35% / 30%</div><div class="mil-stat__label">Layer Weights (L1/L2/L3)</div></div>
</div>

<div style="display:grid;grid-template-columns:1.4fr 1fr;gap:1rem">
    <div>
        <div class="section-title">Contested Zone Map</div>
        <div id="militia-map"></div>
    </div>
    <div>
        <div class="section-title">Detection Layer Methodology</div>
        <div class="card" style="padding:.75rem;font-size:.8rem;line-height:1.6">
            <p><b style="color:#60a5fa">Layer 1 — Fishing-Pattern Anomaly (35%)</b><br>
            Vessel presence in UNCLOS-disputed zones at low speed (&lt;4 kts) with gear not deployed.
            Zone sensitivity 0.65–0.95; score weighted by time-in-zone × sensitivity.</p>
            <p style="margin-top:.6rem"><b style="color:#f59e0b">Layer 2 — Formation Behavior (35%)</b><br>
            Fleet bearing variance &lt;15° + vessel spacing ratio 0.3–0.7. Fishing fleets scatter;
            militia maintains tactical spacing consistent with coordinated patrol.</p>
            <p style="margin-top:.6rem"><b style="color:#ef4444">Layer 3 — AIS Darkness (30%)</b><br>
            AIS transponder off within 50 km of PLAN artificial island. Threat tier scales with
            distance to nearest facility (Fiery Cross, Subi, Mischief Reef, etc.).</p>
        </div>

        <div class="section-title" style="margin-top:1rem">Demo Vessel Input</div>
        <div class="vessel-form">
            <div class="form-row">
                <div><label>Vessel ID</label><input id="v-id" type="text" placeholder="VL-001" value="VL-001"></div>
                <div><label>Latitude</label><input id="v-lat" type="number" step="0.01" value="9.5"></div>
                <div><label>Longitude</label><input id="v-lon" type="number" step="0.01" value="114.2"></div>
            </div>
            <div class="form-row">
                <div><label>Speed (kts)</label><input id="v-sog" type="number" step="0.1" value="2.5"></div>
                <div><label>Heading (°)</label><input id="v-cog" type="number" value="90"></div>
                <div><label>AIS On?</label><select id="v-ais"><option value="false">AIS Off</option><option value="true">AIS On</option></select></div>
                <div><label>Gear?</label><select id="v-gear"><option value="false">No Gear</option><option value="true">Gear Deployed</option></select></div>
            </div>
            <div style="display:flex;gap:.5rem;margin-top:.4rem">
                <button class="btn" onclick="addVessel()">+ Add Vessel</button>
                <button class="btn btn-danger" onclick="clearVessels()">Clear All</button>
                <button class="btn" style="background:#7c3aed" onclick="runClassify()">&#9654; Classify Fleet</button>
            </div>
        </div>
        <div id="vessel-count" style="font-size:.75rem;color:#6b7280;margin-bottom:.4rem">0 vessels queued</div>
    </div>
</div>

<!-- Classification Results -->
<div id="classify-results" style="display:none">
    <div class="section-title">Fleet Classification Results</div>
    <div class="card" style="padding:.75rem">
        <table class="result-table" id="result-table">
            <thead><tr>
                <th>Vessel ID</th><th>Classification</th><th>Composite Score</th>
                <th>L1 Fishing</th><th>L2 Formation</th><th>L3 AIS Dark</th>
                <th>Zone</th><th>Island</th>
            </tr></thead>
            <tbody id="result-tbody"></tbody>
        </table>
    </div>
</div>

<!-- Swarm Detection -->
<div id="swarm-results" style="display:none">
    <div class="section-title">Swarm Event Detection</div>
    <div id="swarm-list"></div>
</div>
{% endblock %}

{% block scripts %}
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
<script>
(function() {
    const map = L.map('militia-map', { center: [12, 115], zoom: 5 });
    L.tileLayer('https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png', {
        attribution: '&copy; OpenStreetMap, &copy; CARTO', maxZoom: 18
    }).addTo(map);

    let vesselMarkers = [];

    fetch('/api/geosigint/militia/zones').then(r => r.json()).then(d => {
        document.getElementById('s-zones').textContent = (d.disputed_zones || []).length;
        document.getElementById('s-islands').textContent = (d.artificial_islands || []).length;

        (d.disputed_zones || []).forEach(z => {
            L.rectangle([[z.lat_min, z.lon_min], [z.lat_max, z.lon_max]], {
                color: z.color || '#ef4444', weight: 1.5, fillOpacity: 0.08, dashArray: '4,4'
            }).bindPopup(`<b style="color:${z.color}">${z.name}</b><br>Sensitivity: ${z.sensitivity}<br><small style="color:#9ca3af">${z.notes}</small>`).addTo(map);
        });

        (d.artificial_islands || []).forEach(i => {
            L.circleMarker([i.lat, i.lon], { radius: 7, color: '#ef4444', fillColor: '#ef4444', fillOpacity: .8, weight: 2 })
                .bindPopup(`<b style="color:#ef4444">${i.name}</b><br>${i.facilities.join(', ')}<br>Threat tier: ${i.threat_tier}`).addTo(map);
        });
    });

    // Vessel queue
    window._vessels = [];

    window.addVessel = function() {
        const v = {
            vessel_id: document.getElementById('v-id').value.trim() || ('VL-' + (window._vessels.length + 1).toString().padStart(3, '0')),
            lat: parseFloat(document.getElementById('v-lat').value),
            lon: parseFloat(document.getElementById('v-lon').value),
            sog_kts: parseFloat(document.getElementById('v-sog').value),
            cog_deg: parseFloat(document.getElementById('v-cog').value),
            ais_on: document.getElementById('v-ais').value === 'true',
            gear_deployed: document.getElementById('v-gear').value === 'true',
        };
        if (isNaN(v.lat) || isNaN(v.lon)) { alert('Lat/Lon required'); return; }
        window._vessels.push(v);
        const mk = L.circleMarker([v.lat, v.lon], { radius: 6, color: '#60a5fa', fillColor: '#60a5fa', fillOpacity: .7, weight: 2 })
            .bindPopup(`<b>${v.vessel_id}</b><br>SOG: ${v.sog_kts} kts | AIS: ${v.ais_on ? 'On' : 'Off'}`).addTo(map);
        vesselMarkers.push(mk);
        document.getElementById('vessel-count').textContent = window._vessels.length + ' vessel(s) queued';
        // Auto-increment ID
        const idMatch = v.vessel_id.match(/(\d+)$/);
        if (idMatch) document.getElementById('v-id').value = v.vessel_id.replace(/\d+$/, String(parseInt(idMatch[1]) + 1).padStart(3, '0'));
    };

    window.clearVessels = function() {
        vesselMarkers.forEach(m => map.removeLayer(m));
        vesselMarkers = [];
        window._vessels = [];
        document.getElementById('vessel-count').textContent = '0 vessels queued';
        document.getElementById('classify-results').style.display = 'none';
        document.getElementById('swarm-results').style.display = 'none';
    };

    window.runClassify = function() {
        if (!window._vessels.length) { alert('Add at least one vessel first'); return; }
        Promise.all([
            fetch('/api/geosigint/militia/classify', { method: 'POST', headers: {'Content-Type':'application/json'}, body: JSON.stringify({ vessels: window._vessels }) }).then(r => r.json()),
            fetch('/api/geosigint/militia/swarms', { method: 'POST', headers: {'Content-Type':'application/json'}, body: JSON.stringify({ vessels: window._vessels }) }).then(r => r.json()),
        ]).then(([cls, swm]) => {
            // Render classification table
            const tbody = document.getElementById('result-tbody');
            tbody.innerHTML = (cls.results || []).map(r => {
                const pct = Math.round((r.composite_score || 0) * 100);
                const color = r.classification === 'CONFIRMED' ? '#ef4444' : r.classification === 'SUSPECTED' ? '#f59e0b' : '#22c55e';
                return `<tr>
                    <td style="font-weight:600">${r.vessel_id}</td>
                    <td><span class="cls-badge cls-${r.classification}">${r.classification}</span></td>
                    <td>
                        <div style="display:flex;align-items:center;gap:.4rem">
                            <div class="score-bar-bg"><div class="score-bar" style="width:${pct}%;background:${color}"></div></div>
                            <span style="font-size:.75rem;color:${color};min-width:30px">${pct}%</span>
                        </div>
                    </td>
                    <td style="color:#60a5fa">${Math.round((r.layer1_score || 0) * 100)}%</td>
                    <td style="color:#f59e0b">${Math.round((r.layer2_score || 0) * 100)}%</td>
                    <td style="color:#ef4444">${Math.round((r.layer3_score || 0) * 100)}%</td>
                    <td style="font-size:.75rem;color:#9ca3af">${r.zone_id || '—'}</td>
                    <td style="font-size:.75rem;color:#9ca3af">${r.nearest_island || '—'}</td>
                </tr>`;
            }).join('');
            document.getElementById('classify-results').style.display = '';

            // Render swarm events
            const swarmList = document.getElementById('swarm-list');
            if ((swm.swarms || []).length === 0) {
                swarmList.innerHTML = '<div style="color:#6b7280;font-size:.8rem;padding:.5rem">No swarm events detected in current fleet.</div>';
            } else {
                swarmList.innerHTML = (swm.swarms || []).map(sw => `
                    <div class="swarm-card">
                        <div class="swarm-card__hdr">
                            <span style="color:#ef4444">&#9888;</span>
                            <span>Swarm Event — Grid Cell ${sw.grid_cell || ''}</span>
                            <span class="swarm-vessel-count">${sw.vessel_count} vessels</span>
                        </div>
                        <div style="font-size:.78rem;color:#9ca3af">Center: ${(sw.center_lat || 0).toFixed(2)}°N ${(sw.center_lon || 0).toFixed(2)}°E &nbsp;|&nbsp; Avg score: ${Math.round((sw.avg_score || 0) * 100)}%</div>
                    </div>`).join('');
            }
            document.getElementById('swarm-results').style.display = '';
        }).catch(e => alert('Classification error: ' + e.message));
    };

    // Load demo fleet for quick testing
    [
        { vessel_id: 'FV-Nan-Hai-501', lat: 9.6, lon: 114.0, sog_kts: 2.1, cog_deg: 95, ais_on: false, gear_deployed: false },
        { vessel_id: 'FV-Nan-Hai-502', lat: 9.65, lon: 114.05, sog_kts: 2.3, cog_deg: 93, ais_on: false, gear_deployed: false },
        { vessel_id: 'FV-Nan-Hai-503', lat: 9.58, lon: 113.95, sog_kts: 1.8, cog_deg: 92, ais_on: false, gear_deployed: false },
    ].forEach(v => {
        window._vessels.push(v);
        L.circleMarker([v.lat, v.lon], { radius: 6, color: '#f59e0b', fillColor: '#f59e0b', fillOpacity: .7, weight: 2 })
            .bindPopup(`<b>${v.vessel_id}</b><br>Demo vessel`).addTo(map);
    });
    document.getElementById('vessel-count').textContent = window._vessels.length + ' vessel(s) queued (demo)';
    document.getElementById('v-id').value = 'VL-004';
})();
</script>
{% endblock %}