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

{% block content %}
<div class="page-header page-header--compact">
    <h1>Supply Interdiction <span style="font-size:0.65em;color:var(--text-secondary);font-weight:400;">COA Priority Ranker</span></h1>
    <a href="/strategos" style="font-size:.85rem;color:var(--text-secondary)">&larr; Back to Strategos</a>
</div>

<!-- Summary bar -->
<div style="display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-bottom:1.5rem">
    <div class="card">
        <div style="font-size:1.75rem;font-weight:700;color:#e94560">{{ targets|length }}</div>
        <div style="color:var(--text-secondary);font-size:.85rem;margin-top:.25rem">Ranked Targets</div>
        <div style="font-size:.75rem;color:var(--text-muted)">Top-10 priority nodes</div>
    </div>
    <div class="card">
        <div style="font-size:1.75rem;font-weight:700;color:#f59e0b">{{ supply_count }}</div>
        <div style="color:var(--text-secondary);font-size:.85rem;margin-top:.25rem">Supply Nodes</div>
        <div style="font-size:.75rem;color:var(--text-muted)">Adversary logistics graph</div>
    </div>
    <div class="card">
        <div style="font-size:1.75rem;font-weight:700;color:#10b981" id="top-blast">
            {% if targets %}{{ targets[0].blast_radius }}{% else %}—{% endif %}
        </div>
        <div style="color:var(--text-secondary);font-size:.85rem;margin-top:.25rem">Top Blast Radius</div>
        <div style="font-size:.75rem;color:var(--text-muted)">Units degraded (highest)</div>
    </div>
    <div class="card">
        <div style="font-size:1.1rem;font-weight:600;color:var(--text-secondary)" id="last-run-ts">
            {{ last_run or '—' }}
        </div>
        <div style="color:var(--text-secondary);font-size:.85rem;margin-top:.25rem">Last Run</div>
        <button onclick="triggerRun()" class="btn btn-primary" style="margin-top:.5rem;font-size:.75rem;padding:.25rem .75rem">
            &#9654; Run Analysis
        </button>
    </div>
</div>

<!-- Top-10 priority table -->
<div class="card" style="margin-bottom:1.5rem">
    <h3 style="margin-top:0;margin-bottom:1rem">Interdiction Priority — Top {{ targets|length }}</h3>
    {% if targets %}
    <div style="overflow-x:auto">
    <table style="width:100%;border-collapse:collapse;font-size:.875rem">
        <thead>
            <tr style="border-bottom:1px solid var(--border-color);color:var(--text-muted);font-size:.8rem">
                <th style="text-align:left;padding:.5rem .75rem">#</th>
                <th style="text-align:left;padding:.5rem .75rem">Node</th>
                <th style="text-align:left;padding:.5rem .75rem">Type</th>
                <th style="text-align:center;padding:.5rem .75rem">Criticality</th>
                <th style="text-align:right;padding:.5rem .75rem">Blast&nbsp;Radius</th>
                <th style="text-align:right;padding:.5rem .75rem">Crit&nbsp;Score</th>
                <th style="text-align:right;padding:.5rem .75rem">Sub⁻¹</th>
                <th style="text-align:right;padding:.5rem .75rem">Composite</th>
                <th style="text-align:left;padding:.5rem .75rem">Controlled&nbsp;By</th>
            </tr>
        </thead>
        <tbody>
        {% for t in targets %}
        {% set rank = t.rank if t.rank is defined else loop.index %}
        <tr style="border-bottom:1px solid var(--border-color);
                   {% if rank == 1 %}background:rgba(233,69,96,.07){% elif rank <= 3 %}background:rgba(245,158,11,.05){% endif %}"
            class="interdict-row" data-lat="{{ t.lat or '' }}" data-lon="{{ t.lon or '' }}"
            data-label="{{ t.label }}" data-radius="{{ t.blast_radius }}"
            data-score="{{ t.composite_score }}"
            onclick="focusNode(this)">
            <td style="padding:.5rem .75rem;font-weight:700;
                       color:{% if rank == 1 %}#e94560{% elif rank <= 3 %}#f59e0b{% else %}var(--text-secondary){% endif %}">
                {{ rank }}
            </td>
            <td style="padding:.5rem .75rem;font-weight:600">{{ t.label or t.node_id }}</td>
            <td style="padding:.5rem .75rem">
                <span style="padding:.15rem .4rem;border-radius:3px;font-size:.75rem;
                             background:var(--bg-secondary);color:var(--text-secondary)">
                    {{ (t.node_type or 'depot')|replace('_',' ')|title }}
                </span>
            </td>
            <td style="padding:.5rem .75rem;text-align:center">
                <span style="padding:.2rem .5rem;border-radius:3px;font-size:.75rem;font-weight:600;
                    background:{% if t.criticality=='critical' %}rgba(233,69,96,.15)
                               {% elif t.criticality=='high' %}rgba(245,158,11,.15)
                               {% elif t.criticality=='medium' %}rgba(59,130,246,.15)
                               {% else %}rgba(107,114,128,.15){% endif %};
                    color:{% if t.criticality=='critical' %}#e94560
                          {% elif t.criticality=='high' %}#f59e0b
                          {% elif t.criticality=='medium' %}#3b82f6
                          {% else %}#6b7280{% endif %}">
                    {{ (t.criticality or 'medium')|title }}
                </span>
            </td>
            <td style="padding:.5rem .75rem;text-align:right;font-weight:700;
                       color:{% if t.blast_radius >= 5 %}#e94560{% elif t.blast_radius >= 2 %}#f59e0b{% else %}var(--text-primary){% endif %}">
                {{ t.blast_radius }}
            </td>
            <td style="padding:.5rem .75rem;text-align:right;color:var(--text-secondary)">
                {{ "%.2f"|format(t.criticality_score|float) }}
            </td>
            <td style="padding:.5rem .75rem;text-align:right;color:var(--text-secondary)">
                {{ "%.3f"|format(t.substitutability_inverse|float) }}
            </td>
            <td style="padding:.5rem .75rem;text-align:right;font-weight:700;color:var(--accent-blue)">
                {{ "%.4f"|format(t.composite_score|float) }}
            </td>
            <td style="padding:.5rem .75rem;color:var(--text-secondary);font-size:.8rem">
                {{ t.controlled_by or '—' }}
            </td>
        </tr>
        {% endfor %}
        </tbody>
    </table>
    </div>
    {% else %}
    <div style="text-align:center;padding:2rem;color:var(--text-muted)">
        No interdiction data. Click <strong>Run Analysis</strong> to generate rankings.
    </div>
    {% endif %}
</div>

<!-- Leaflet blast radius overlay -->
<div class="card">
    <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:.75rem">
        <h3 style="margin:0">Blast Radius Overlay</h3>
        <div style="font-size:.8rem;color:var(--text-muted)">Click a table row to focus</div>
    </div>
    <div id="interdict-map" style="height:420px;border-radius:6px;overflow:hidden;
                                    background:#1a1a2e;position:relative">
        <div id="map-placeholder" style="position:absolute;inset:0;display:flex;
             align-items:center;justify-content:center;color:var(--text-muted);
             flex-direction:column;gap:.5rem">
            <div style="font-size:2rem">&#9993;</div>
            <div style="font-size:.875rem">Map loads when Leaflet is available</div>
            <div style="font-size:.75rem;color:var(--text-muted)">
                Nodes without coordinates will not appear
            </div>
        </div>
        <div id="leaflet-map" style="height:100%;width:100%;display:none"></div>
    </div>
    <!-- Colour legend -->
    <div style="display:flex;gap:1.5rem;margin-top:.75rem;font-size:.8rem;color:var(--text-secondary)">
        <span><span style="display:inline-block;width:12px;height:12px;border-radius:50%;background:#e94560;margin-right:.3rem;vertical-align:middle"></span>Critical</span>
        <span><span style="display:inline-block;width:12px;height:12px;border-radius:50%;background:#f59e0b;margin-right:.3rem;vertical-align:middle"></span>High</span>
        <span><span style="display:inline-block;width:12px;height:12px;border-radius:50%;background:#3b82f6;margin-right:.3rem;vertical-align:middle"></span>Medium</span>
        <span><span style="display:inline-block;width:12px;height:12px;border-radius:50%;background:#6b7280;margin-right:.3rem;vertical-align:middle"></span>Low</span>
    </div>
</div>

<!-- run-status toast -->
<div id="run-toast" style="display:none;position:fixed;bottom:1.5rem;right:1.5rem;
     background:var(--bg-secondary);border:1px solid var(--border-color);
     border-radius:6px;padding:.75rem 1.25rem;font-size:.875rem;z-index:9999;
     box-shadow:0 4px 16px rgba(0,0,0,.4)"></div>

<script>
/* ---------- Leaflet init ---------- */
const CRIT_COLOR = {critical:'#e94560', high:'#f59e0b', medium:'#3b82f6', low:'#6b7280'};
let leafletMap = null;
let markers = [];

function tryInitMap() {
    if (typeof L === 'undefined') return;
    document.getElementById('map-placeholder').style.display = 'none';
    const el = document.getElementById('leaflet-map');
    el.style.display = 'block';
    leafletMap = L.map('leaflet-map').setView([48.5, 35.0], 6);
    L.tileLayer('https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png', {
        attribution: '&copy; OpenStreetMap contributors &copy; CARTO',
        subdomains: 'abcd', maxZoom: 18
    }).addTo(leafletMap);
    plotAllNodes();
}

function plotAllNodes() {
    if (!leafletMap) return;
    markers.forEach(m => m.marker.remove());
    markers = [];
    const rows = document.querySelectorAll('.interdict-row');
    rows.forEach((row, idx) => {
        const lat = parseFloat(row.dataset.lat);
        const lon = parseFloat(row.dataset.lon);
        if (isNaN(lat) || isNaN(lon)) return;
        const label = row.dataset.label || 'Node';
        const radius = parseInt(row.dataset.radius) || 0;
        const score = parseFloat(row.dataset.score) || 0;
        const crit = row.querySelector('td:nth-child(4) span')?.textContent?.trim()?.toLowerCase() || 'medium';
        const color = CRIT_COLOR[crit] || CRIT_COLOR.medium;
        const blastKm = Math.max(5, radius * 12);  // blast radius km (12 km per degraded unit)
        const circle = L.circle([lat, lon], {
            radius: blastKm * 1000,
            color: color, fillColor: color, fillOpacity: 0.12, weight: 1.5
        }).addTo(leafletMap);
        const marker = L.circleMarker([lat, lon], {
            radius: 8 + Math.min(idx === 0 ? 6 : 0, 6),
            color: color, fillColor: color, fillOpacity: 0.85, weight: 2
        }).addTo(leafletMap);
        marker.bindPopup(
            `<b>#${idx+1} ${label}</b><br>` +
            `Blast: ${radius} units<br>Score: ${score.toFixed(4)}`
        );
        markers.push({row, marker, circle, lat, lon});
    });
}

function focusNode(row) {
    if (!leafletMap) return;
    const lat = parseFloat(row.dataset.lat);
    const lon = parseFloat(row.dataset.lon);
    if (!isNaN(lat) && !isNaN(lon)) {
        leafletMap.setView([lat, lon], 9);
        const entry = markers.find(m => m.row === row);
        if (entry) entry.marker.openPopup();
    }
}

/* ---------- Run analysis ---------- */
function triggerRun() {
    const toast = document.getElementById('run-toast');
    toast.textContent = '⏳ Running interdiction analysis…';
    toast.style.display = 'block';
    fetch('/api/strategos/interdiction/run', {
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify({top_n: 10})
    })
    .then(r => r.json())
    .then(data => {
        if (data.error) {
            toast.textContent = '✗ Error: ' + data.error;
        } else {
            toast.textContent = '✓ Analysis complete — refreshing…';
            setTimeout(() => location.reload(), 1200);
        }
    })
    .catch(err => {
        toast.textContent = '✗ Request failed: ' + err;
    })
    .finally(() => {
        setTimeout(() => { toast.style.display = 'none'; }, 5000);
    });
}

/* ---------- Leaflet CDN load (graceful degradation) ---------- */
(function loadLeaflet() {
    const link = document.createElement('link');
    link.rel = 'stylesheet';
    link.href = 'https://unpkg.com/leaflet@1.9.4/dist/leaflet.css';
    document.head.appendChild(link);
    const script = document.createElement('script');
    script.src = 'https://unpkg.com/leaflet@1.9.4/dist/leaflet.js';
    script.onload = tryInitMap;
    script.onerror = () => {};
    document.head.appendChild(script);
})();
</script>
{% endblock %}