{% extends "base.html" %}
{% set active = "island_chain" %}
{% block title %}Island Chain Defense — GeoSIGINT{% endblock %}

{% block head %}
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
<style>
.ic-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:.75rem; margin-bottom:1rem; }
.ic-stat { background:#1f2937; border:1px solid #374151; border-radius:6px; padding:.9rem 1.1rem; }
.ic-stat__val { font-size:1.65rem; font-weight:700; color:#e2e8f0; line-height:1.1; }
.ic-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; }
#ic-map { height:500px; border-radius:6px; overflow:hidden; margin-bottom:.75rem; position:relative; z-index:0; isolation:isolate; }
.base-row { display:flex; align-items:flex-start; gap:.6rem; padding:.55rem .7rem; background:#1f2937; border-radius:4px; margin-bottom:.3rem; font-size:.82rem; border-left:3px solid; }
.base-name { font-weight:600; margin-bottom:.1rem; }
.base-assets { color:#9ca3af; font-size:.75rem; }
.base-notes { color:#6b7280; font-size:.72rem; margin-top:.15rem; }
.choke-row { padding:.55rem .7rem; background:#1f2937; border-radius:4px; margin-bottom:.3rem; font-size:.82rem; border-left:3px solid; }
.choke-name { font-weight:600; }
.sig-badge { display:inline-block; padding:.1rem .4rem; border-radius:3px; font-size:.68rem; font-weight:600; text-transform:uppercase; }
.thaad-row { padding:.5rem .7rem; background:#1f2937; border-radius:4px; margin-bottom:.3rem; font-size:.82rem; border-left:3px solid #a78bfa; }
.coverage-badge { display:inline-block; padding:.1rem .4rem; border-radius:3px; font-size:.68rem; font-weight:600; }
table.base-table { width:100%; border-collapse:collapse; font-size:.79rem; }
table.base-table th { color:#9ca3af; font-weight:500; text-align:left; padding:.3rem .5rem; border-bottom:1px solid #374151; }
table.base-table td { padding:.35rem .5rem; border-bottom:1px solid #1f2937; vertical-align:top; }
</style>
{% endblock %}

{% block content %}
<div class="page-header page-header--compact">
    <h1>Island Chain Defense</h1>
    <span style="font-size:.8rem;color:#6b7280">US/Allied Bases · THAAD Coverage · Bashi Channel · Miyako Strait · First &amp; Second Island Chains</span>
</div>

<!-- Summary stats -->
<div class="ic-grid" id="summary-stats">
    <div class="ic-stat"><div class="ic-stat__val" id="s-1ic">—</div><div class="ic-stat__label">1st Island Chain Bases</div></div>
    <div class="ic-stat"><div class="ic-stat__val" id="s-2ic">—</div><div class="ic-stat__label">2nd Island Chain Bases</div></div>
    <div class="ic-stat"><div class="ic-stat__val" id="s-thaad">—</div><div class="ic-stat__label">THAAD Batteries</div></div>
    <div class="ic-stat"><div class="ic-stat__val" id="s-chokes">—</div><div class="ic-stat__label">Critical Chokepoints</div></div>
    <div class="ic-stat"><div class="ic-stat__val" id="s-covering">—</div><div class="ic-stat__label">Bases Covering Taiwan</div></div>
    <div class="ic-stat"><div class="ic-stat__val" id="s-closest">—</div><div class="ic-stat__label">Closest Base to Taiwan</div></div>
</div>

<!-- Map (full width) -->
<div class="section-title">Island Chain Coverage Map</div>
<div id="ic-map"></div>
<div style="font-size:.72rem;color:#6b7280;margin-bottom:.75rem">
    Coverage rings = published combat radius. THAAD = ~200 km terminal intercept radius.
    Sources: DoD Base Structure Report, RAND PACOM, FAS.org (unclassified open-source).
</div>

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

    <!-- Left: Base table -->
    <div>
        <div class="section-title">First &amp; Second Island Chain Bases</div>
        <div class="card" style="padding:.75rem">
            <div id="base-table-wrap">Loading…</div>
        </div>
    </div>

    <!-- Right: Chokepoints + THAAD -->
    <div>
        <div class="section-title">Strategic Maritime Chokepoints</div>
        <div id="chokepoints-list">Loading…</div>

        <div class="section-title" style="margin-top:1rem">THAAD Batteries</div>
        <div id="thaad-list">Loading…</div>
    </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('ic-map', { center: [22.0, 132.0], zoom: 4 });
    L.tileLayer('https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png', {
        attribution: '&copy; OpenStreetMap, &copy; CARTO', maxZoom: 18
    }).addTo(map);

    // Taiwan center marker
    L.circleMarker([23.97, 120.97], {
        radius: 8, color: '#f59e0b', fillColor: '#f59e0b', fillOpacity: 0.85, weight: 2
    }).bindPopup('<b style="color:#f59e0b">Taiwan</b>').addTo(map);

    // ── Summary ──────────────────────────────────────────────────────────────
    fetch('/api/geosigint/island-chain/summary').then(r => r.json()).then(d => {
        document.getElementById('s-1ic').textContent = d.first_island_chain_bases;
        document.getElementById('s-2ic').textContent = d.second_island_chain_bases;
        document.getElementById('s-thaad').textContent = d.thaad_batteries;
        document.getElementById('s-chokes').textContent = d.critical_chokepoints + ' / ' + d.chokepoints_total;
        document.getElementById('s-covering').textContent = d.bases_covering_taiwan;
        document.getElementById('s-closest').textContent = d.closest_base_name.split(' ')[0] + ' (' + d.closest_base_dist_km + ' km)';
    });

    // ── Bases ─────────────────────────────────────────────────────────────────
    fetch('/api/geosigint/island-chain/bases').then(r => r.json()).then(d => {
        const bases = d.bases;

        bases.forEach(b => {
            // Combat radius ring (if available)
            if (b.combat_radius_km) {
                L.circle([b.lat, b.lon], {
                    radius: b.combat_radius_km * 1000,
                    color: b.color,
                    fillColor: b.color,
                    fillOpacity: b.chain === 1 ? 0.05 : 0.03,
                    weight: b.chain === 1 ? 1.2 : 0.8,
                    dashArray: b.chain === 2 ? '8 5' : null,
                }).addTo(map);
            }
            // Base marker
            const icon = b.chain === 2
                ? L.divIcon({ html: `<div style="width:14px;height:14px;border-radius:2px;background:${b.color};border:2px solid ${b.color}99;opacity:.9"></div>`, iconSize:[14,14], iconAnchor:[7,7], className:'' })
                : L.divIcon({ html: `<div style="width:11px;height:11px;border-radius:50%;background:${b.color};border:2px solid ${b.color}99;opacity:.9"></div>`, iconSize:[11,11], iconAnchor:[5.5,5.5], className:'' });

            L.marker([b.lat, b.lon], { icon }).bindPopup(
                `<b style="color:${b.color}">${b.name}</b><br>` +
                `<span style="color:#9ca3af">${b.location} (${b.nation})</span><br>` +
                `<b>Assets:</b> ${b.primary_assets}<br>` +
                (b.combat_radius_km ? `<b>Combat radius:</b> ${b.combat_radius_km} km<br>` : '') +
                `<b>Taiwan coverage:</b> ${b.taiwan_coverage ? '✓ YES' : '✗ No'}<br>` +
                `<b>Dist to Taiwan:</b> ${b.dist_to_taiwan_km} km<br>` +
                `<small style="color:#6b7280">${b.notes}</small>`
            ).addTo(map);
        });

        // Base table
        const rows = bases.map(b => {
            const cov = b.taiwan_coverage
                ? `<span class="coverage-badge" style="background:#22c55e22;color:#22c55e;border:1px solid #22c55e44">✓</span>`
                : `<span class="coverage-badge" style="background:#6b728022;color:#6b7280;border:1px solid #6b728044">✗</span>`;
            return `<tr>
                <td><span style="color:${b.color};font-weight:600">${b.name.split('(')[0].trim()}</span></td>
                <td style="color:#9ca3af">${b.nation}</td>
                <td style="color:#d1d5db;font-size:.75rem">${b.primary_assets.split(',')[0]}…</td>
                <td style="color:#9ca3af">${b.combat_radius_km ? b.combat_radius_km + ' km' : '—'}</td>
                <td>${cov}</td>
                <td style="color:#9ca3af">${b.dist_to_taiwan_km} km</td>
            </tr>`;
        }).join('');
        document.getElementById('base-table-wrap').innerHTML = `
            <table class="base-table">
                <thead><tr>
                    <th>Base</th><th>Nation</th><th>Primary Assets</th>
                    <th>Radius</th><th>TW Cov.</th><th>Dist→TW</th>
                </tr></thead>
                <tbody>${rows}</tbody>
            </table>`;
    });

    // ── THAAD ─────────────────────────────────────────────────────────────────
    fetch('/api/geosigint/island-chain/thaad').then(r => r.json()).then(d => {
        d.batteries.forEach(t => {
            L.circle([t.lat, t.lon], {
                radius: t.range_km * 1000,
                color: t.color,
                fillColor: t.color,
                fillOpacity: t.fill_opacity,
                weight: 1.5,
                dashArray: '4 3',
            }).bindPopup(
                `<b style="color:${t.color}">${t.name}</b><br>` +
                `Intercept radius: ${t.range_km} km<br>` +
                `<small style="color:#9ca3af">${t.notes}</small>`
            ).addTo(map);

            L.circleMarker([t.lat, t.lon], {
                radius: 6, color: t.color, fillColor: t.color, fillOpacity: 0.9, weight: 2
            }).addTo(map);
        });

        const html = d.batteries.map(t =>
            `<div class="thaad-row">
                <div style="font-weight:600;color:#a78bfa">${t.name}</div>
                <div style="color:#9ca3af;font-size:.75rem">Intercept radius: ${t.range_km} km</div>
                <div style="color:#6b7280;font-size:.72rem;margin-top:.15rem">${t.notes}</div>
            </div>`
        ).join('');
        document.getElementById('thaad-list').innerHTML = html;
    });

    // ── Chokepoints ───────────────────────────────────────────────────────────
    fetch('/api/geosigint/island-chain/chokepoints').then(r => r.json()).then(d => {
        const sigColors = { critical: '#ef4444', major: '#f59e0b', minor: '#6b7280' };

        d.chokepoints.forEach(c => {
            L.circleMarker([c.lat, c.lon], {
                radius: c.significance === 'critical' ? 10 : 7,
                color: c.color,
                fillColor: c.color,
                fillOpacity: 0.75,
                weight: 2,
            }).bindPopup(
                `<b style="color:${c.color}">${c.name}</b><br>` +
                `Width: ${c.width_km} km · Depth: ${c.depth_m} m<br>` +
                `Control: ${c.control_nations.join(', ')}<br>` +
                `<small style="color:#9ca3af">${c.notes}</small>`
            ).addTo(map);
        });

        const html = d.chokepoints.map(c => {
            const sigBadge = `<span class="sig-badge" style="background:${c.color}22;color:${c.color};border:1px solid ${c.color}44">${c.significance}</span>`;
            return `<div class="choke-row" style="border-left-color:${c.color}">
                <div><span class="choke-name" style="color:${c.color}">${c.name}</span> ${sigBadge}</div>
                <div style="color:#9ca3af;font-size:.75rem;margin-top:.15rem">Width: ${c.width_km} km · Depth: ${c.depth_m} m · Control: ${c.control_nations.join(', ')}</div>
                <div style="color:#6b7280;font-size:.72rem;margin-top:.15rem">${c.notes}</div>
            </div>`;
        }).join('');
        document.getElementById('chokepoints-list').innerHTML = html;
    });
})();
</script>
{% endblock %}