{% extends "base.html" %}
{% set active = "strait_crossing" %}
{% block title %}Strait Crossing Analysis — GeoSIGINT{% endblock %}

{% block head %}
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
<style>
.sc-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:.75rem; margin-bottom:1rem; }
.sc-stat { background:#1f2937; border:1px solid #374151; border-radius:6px; padding:.9rem 1.1rem; }
.sc-stat__val { font-size:1.65rem; font-weight:700; color:#e2e8f0; line-height:1.1; }
.sc-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; }
#sc-map { height:400px; border-radius:6px; overflow:hidden; margin-bottom:.75rem; position:relative; z-index:0; isolation:isolate; }
.speed-row { display:flex; align-items:center; gap:.6rem; padding:.45rem .6rem; background:#1f2937; border-radius:4px; margin-bottom:.3rem; font-size:.83rem; }
.speed-label { flex:1; color:#d1d5db; }
.speed-time { font-weight:700; min-width:65px; }
table.intercept-table { width:100%; border-collapse:collapse; font-size:.8rem; }
table.intercept-table th { color:#9ca3af; font-weight:500; text-align:left; padding:.3rem .5rem; border-bottom:1px solid #374151; }
table.intercept-table td { padding:.35rem .5rem; border-bottom:1px solid #1f2937; }
.feasible-badge { display:inline-block; padding:.1rem .45rem; border-radius:3px; font-size:.7rem; font-weight:600; }
.radar-row { padding:.45rem .7rem; background:#1f2937; border-radius:4px; margin-bottom:.3rem; font-size:.82rem; border-left:3px solid; }
</style>
{% endblock %}

{% block content %}
<div class="page-header page-header--compact">
    <h1>Strait Crossing Analysis</h1>
    <span style="font-size:.8rem;color:#6b7280">Xiamen → Danshui Corridor · Radar Thresholds · Intercept Windows · ROCAF Response</span>
</div>

<!-- Summary stats -->
<div class="sc-grid" id="summary-stats">
    <div class="sc-stat"><div class="sc-stat__val" id="s-corridor">—</div><div class="sc-stat__label">Primary Corridor</div></div>
    <div class="sc-stat"><div class="sc-stat__val" id="s-dist">—</div><div class="sc-stat__label">Distance (km / nm)</div></div>
    <div class="sc-stat"><div class="sc-stat__val" id="s-crossing">—</div><div class="sc-stat__label">Crossing @ 12 kt</div></div>
    <div class="sc-stat"><div class="sc-stat__val" id="s-window">—</div><div class="sc-stat__label">Midpoint Intercept Window</div></div>
</div>

<div style="display:grid;grid-template-columns:1.6fr 1fr;gap:1rem">

    <!-- Left: Map -->
    <div>
        <div class="section-title">Xiamen → Danshui Corridor (180 nm / 333 km)</div>
        <div id="sc-map"></div>
        <div style="font-size:.72rem;color:#6b7280">
            Primary PLAN crossing corridor targeting Danshui / Taoyuan area, 25 km north of Taipei.
            ROCAF QRA bases (Hsinchu, Tainan, Chiayi, CCK) shown. OTH radar arcs approximate.
        </div>
    </div>

    <!-- Right: Speed matrix + radar systems -->
    <div>
        <div class="section-title">Speed Scenario Matrix (180 nm corridor)</div>
        <div id="speed-matrix">Loading…</div>

        <div class="section-title" style="margin-top:1rem">Taiwan Radar Systems</div>
        <div id="radar-list">Loading…</div>
    </div>
</div>

<!-- Intercept window table -->
<div class="section-title" style="margin-top:1rem">Intercept Window by Detection Range</div>
<div class="card" style="padding:.75rem;margin-bottom:.75rem">
    <div style="font-size:.78rem;color:#9ca3af;margin-bottom:.5rem">
        Fleet speed: 12 kt. Scramble time: 15 min. ROCAF aircraft cruise: 550 kt (F-16V).
        Window = time-to-coast − (scramble + transit-to-intercept). Negative = too late.
    </div>
    <div id="intercept-table-wrap">Loading…</div>
</div>

<!-- Detection probability chart -->
<div class="section-title">Radar Detection Probability vs. Range</div>
<div class="card" style="padding:.75rem">
    <canvas id="detection-chart" height="80"></canvas>
    <div style="font-size:.72rem;color:#6b7280;margin-top:.4rem">
        Combined surface-search (~40 km) + OTH-B class (peak ~150 km). EW offset = EMCON/ECM hours (+15 km/h effective range).
        Source: publicly available radar performance parameters.
    </div>
</div>
{% endblock %}

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

    // ── Summary ──────────────────────────────────────────────────────────────
    fetch('/api/geosigint/strait-crossing/summary').then(r => r.json()).then(d => {
        document.getElementById('s-corridor').textContent = d.corridor;
        document.getElementById('s-dist').textContent = d.dist_km + ' km / ' + d.dist_nm + ' nm';
        document.getElementById('s-crossing').textContent = d.crossing_at_12kt;
        const win = document.getElementById('s-window');
        win.textContent = d.midpoint_window;
        win.style.color = d.midpoint_window_feasible ? '#22c55e' : '#ef4444';
    });

    // ── Corridor line + labels ────────────────────────────────────────────────
    fetch('/api/geosigint/strait-crossing/corridor').then(r => r.json()).then(c => {
        L.polyline(
            [[c.origin_lat, c.origin_lon], [c.dest_lat, c.dest_lon]],
            { color: '#f59e0b', weight: 2.5, opacity: 0.85, dashArray: '8 5' }
        ).bindPopup(`<b>${c.name}</b><br>${c.dist_km} km / ${c.dist_nm} nm`).addTo(map);

        // Origin / destination markers
        L.circleMarker([c.origin_lat, c.origin_lon], {
            radius: 7, color: '#ef4444', fillColor: '#ef4444', fillOpacity: 0.8, weight: 2
        }).bindPopup('<b>Xiamen</b><br>PLAN staging base').addTo(map);

        L.circleMarker([c.dest_lat, c.dest_lon], {
            radius: 7, color: '#22c55e', fillColor: '#22c55e', fillOpacity: 0.8, weight: 2
        }).bindPopup('<b>Danshui</b><br>N. Taiwan landing zone approach').addTo(map);

        // OTH coverage arc at 250km from Taiwan center (approximate)
        L.circle([23.97, 120.97], {
            radius: 250000, color: '#6366f1', fillColor: '#6366f1',
            fillOpacity: 0.04, weight: 1, dashArray: '6 4'
        }).bindPopup('OTH-B Class effective range (~250 km, approximate)').addTo(map);

        // Surface-search horizon at 40km
        L.circle([23.97, 120.97], {
            radius: 40000, color: '#22c55e', fillColor: '#22c55e',
            fillOpacity: 0.06, weight: 1, dashArray: '3 3'
        }).bindPopup('Surface-search radar effective range (~40 km)').addTo(map);
    });

    // ── ROCAF Bases ───────────────────────────────────────────────────────────
    fetch('/api/geosigint/strait-crossing/detection').then(r => r.json()).then(d => {
        const bases = d.rocaf_bases;
        bases.forEach(b => {
            L.circleMarker([b.lat, b.lon], {
                radius: 6, color: b.color, fillColor: b.color, fillOpacity: 0.75, weight: 2
            }).bindPopup(
                `<b style="color:${b.color}">${b.name}</b><br>` +
                `${b.assets}<br><small>${b.dist_to_strait_km} km to strait</small>`
            ).addTo(map);
        });

        // Radar systems list
        const radarHtml = d.radar_systems.map(r => {
            const range = r.surface_ship_range_km ? `${r.surface_ship_range_km} km surface` : (r.range_km ? `${r.range_km} km` : '—');
            return `<div class="radar-row" style="border-left-color:${r.color}">
                <div style="font-weight:600;color:${r.color}">${r.name}</div>
                <div style="color:#9ca3af;font-size:.75rem">${r.type} · Range: ${range}</div>
                <div style="color:#6b7280;font-size:.72rem;margin-top:.15rem">${r.notes}</div>
            </div>`;
        }).join('');
        document.getElementById('radar-list').innerHTML = radarHtml;
    });

    // ── Speed Matrix ──────────────────────────────────────────────────────────
    fetch('/api/geosigint/strait-crossing/speed-matrix').then(r => r.json()).then(d => {
        const rows = d.scenarios.map(s => {
            const note = s.notes ? `<span style="color:#6b7280;font-size:.72rem"> — ${s.notes}</span>` : '';
            return `<div class="speed-row">
                <div style="width:10px;height:10px;border-radius:50%;background:${s.color};flex-shrink:0"></div>
                <div class="speed-label">${s.label}</div>
                <div style="color:#9ca3af;min-width:42px;font-size:.78rem">${s.speed_kts} kt</div>
                <div class="speed-time" style="color:${s.color}">${s.label}</div>
                <div class="speed-time" style="color:${s.color}">${s.label_time || s.label}</div>
            </div>`;
        });
        // Re-render with correct field
        const fixed = d.scenarios.map(s => {
            const note = s.notes ? `<div style="color:#6b7280;font-size:.7rem;margin-top:.1rem">${s.notes}</div>` : '';
            return `<div class="speed-row" style="flex-wrap:wrap">
                <div style="width:10px;height:10px;border-radius:50%;background:${s.color};flex-shrink:0;margin-top:2px"></div>
                <div class="speed-label">${s.label}</div>
                <div style="color:#9ca3af;min-width:42px;font-size:.78rem">${s.speed_kts} kt</div>
                <div class="speed-time" style="color:${s.color}">${s.hours}h ${String(s.minutes).padStart(2,'0')}m</div>
                ${note}
            </div>`;
        }).join('');
        document.getElementById('speed-matrix').innerHTML = fixed;
    });

    // ── Intercept Table ───────────────────────────────────────────────────────
    fetch('/api/geosigint/strait-crossing/intercept?speed_kts=12').then(r => r.json()).then(d => {
        const rows = d.table.map(row => {
            const badge = row.feasible
                ? `<span class="feasible-badge" style="background:#22c55e22;color:#22c55e;border:1px solid #22c55e44">FEASIBLE</span>`
                : `<span class="feasible-badge" style="background:#ef444422;color:#ef4444;border:1px solid #ef444444">LATE</span>`;
            const pPct = (row.p_detection * 100).toFixed(0);
            return `<tr>
                <td style="color:#d1d5db">${row.detect_km} km<br><small style="color:#6b7280">${row.detect_nm} nm</small></td>
                <td style="color:#f59e0b">${row.time_to_coast_label}</td>
                <td style="color:#9ca3af">${row.total_response_h.toFixed(2)} h</td>
                <td style="color:${row.feasible ? '#22c55e' : '#ef4444'};font-weight:600">${row.window_label}</td>
                <td>${badge}</td>
                <td style="color:#9ca3af">${pPct}%</td>
            </tr>`;
        }).join('');
        document.getElementById('intercept-table-wrap').innerHTML = `
            <table class="intercept-table">
                <thead>
                    <tr>
                        <th>Detection Range</th>
                        <th>Time to Coast</th>
                        <th>Defender Response</th>
                        <th>Intercept Window</th>
                        <th>Status</th>
                        <th>P(Detect)</th>
                    </tr>
                </thead>
                <tbody>${rows}</tbody>
            </table>`;
    });

    // ── Detection Probability Chart ───────────────────────────────────────────
    fetch('/api/geosigint/strait-crossing/detection').then(r => r.json()).then(d => {
        const labels = d.curve.map(p => p.dist_km);
        const ctx = document.getElementById('detection-chart').getContext('2d');
        new Chart(ctx, {
            type: 'line',
            data: {
                labels,
                datasets: [
                    {
                        label: 'No EW (0 h EMCON)',
                        data: d.curve.map(p => +(p.p_no_ew * 100).toFixed(1)),
                        borderColor: '#ef4444',
                        backgroundColor: 'rgba(239,68,68,.07)',
                        fill: true,
                        tension: 0.35,
                        pointRadius: 0,
                    },
                    {
                        label: '2h EW offset',
                        data: d.curve.map(p => +(p.p_2h_ew * 100).toFixed(1)),
                        borderColor: '#f59e0b',
                        backgroundColor: 'transparent',
                        borderDash: [5, 3],
                        tension: 0.35,
                        pointRadius: 0,
                    },
                    {
                        label: '4h EW offset',
                        data: d.curve.map(p => +(p.p_4h_ew * 100).toFixed(1)),
                        borderColor: '#22c55e',
                        backgroundColor: 'transparent',
                        borderDash: [3, 3],
                        tension: 0.35,
                        pointRadius: 0,
                    },
                ],
            },
            options: {
                responsive: true,
                plugins: {
                    legend: { labels: { color: '#9ca3af', font: { size: 11 } } },
                    tooltip: { callbacks: { label: c => `${c.dataset.label}: ${c.parsed.y.toFixed(1)}%` } },
                },
                scales: {
                    x: {
                        title: { display: true, text: 'Distance from Taiwan coast (km)', color: '#6b7280' },
                        ticks: { color: '#6b7280', maxTicksLimit: 15 },
                        grid: { color: '#1f2937' },
                    },
                    y: {
                        title: { display: true, text: 'P(Detection) %', color: '#6b7280' },
                        ticks: { color: '#6b7280' },
                        grid: { color: '#1f2937' },
                        min: 0, max: 100,
                    },
                },
            },
        });
    });
})();
</script>
{% endblock %}