{% extends "base.html" %}
{% set active = "semiconductor" %}
{% block title %}Semiconductor Chain Simulator — 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>
.semi-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:.75rem; margin-bottom:1rem; }
.semi-stat { background:#1f2937; border:1px solid #374151; border-radius:6px; padding:.9rem 1.1rem; }
.semi-stat__val { font-size:1.65rem; font-weight:700; color:#e2e8f0; line-height:1.1; }
.semi-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; }
.scenario-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:.75rem; margin-bottom:1rem; }
.scenario-card { background:#1f2937; border:2px solid #374151; border-radius:6px; padding:.9rem; cursor:pointer; transition:border-color .15s; }
.scenario-card:hover { border-color:#4f46e5; }
.scenario-card.selected { border-color:#4f46e5; background:#1e1b4b; }
.scenario-card__label { font-size:.85rem; font-weight:600; color:#e2e8f0; margin-bottom:.3rem; }
.scenario-card__desc { font-size:.75rem; color:#9ca3af; line-height:1.4; }
.scenario-card__sev { display:inline-block; margin-top:.4rem; padding:.1rem .45rem; border-radius:3px; font-size:.7rem; font-weight:700; }
#semi-map { height:380px; border-radius:6px; overflow:hidden; margin-bottom:.75rem; position:relative; z-index:0; isolation:isolate; }
.btn { background:#4f46e5; color:#fff; border:none; border-radius:4px; padding:.45rem 1.1rem; font-size:.82rem; font-weight:600; cursor:pointer; }
.btn:hover { background:#4338ca; }
.btn:disabled { opacity:.5; cursor:default; }
table.node-table { width:100%; border-collapse:collapse; font-size:.78rem; }
table.node-table th { color:#9ca3af; font-weight:500; text-align:left; padding:.3rem .5rem; border-bottom:1px solid #374151; }
table.node-table td { padding:.35rem .5rem; border-bottom:1px solid #1f2937; vertical-align:top; }
.crit-bar-bg { background:#374151; border-radius:3px; height:7px; width:80px; display:inline-block; vertical-align:middle; }
.crit-bar { height:7px; border-radius:3px; }
.ree-table { width:100%; border-collapse:collapse; font-size:.78rem; }
.ree-table th { color:#9ca3af; font-weight:500; text-align:left; padding:.3rem .5rem; border-bottom:1px solid #374151; }
.ree-table td { padding:.3rem .5rem; border-bottom:1px solid #1f2937; }
</style>
{% endblock %}

{% block content %}
<div class="page-header page-header--compact">
    <h1>Semiconductor Chain Simulator</h1>
    <span style="font-size:.8rem;color:#6b7280">TSMC · ASML EUV · Rare Earth Flow · Disruption Cascade</span>
</div>

<!-- Summary stats -->
<div class="semi-grid" id="semi-summary">
    <div class="semi-stat"><div class="semi-stat__val" id="s-fabs">5</div><div class="semi-stat__label">TSMC Fabs</div></div>
    <div class="semi-stat"><div class="semi-stat__val" id="s-wafers">370k</div><div class="semi-stat__label">Wafers/Month (Taiwan)</div></div>
    <div class="semi-stat"><div class="semi-stat__val" id="s-taiwan-share">92%</div><div class="semi-stat__label">Taiwan Share (%)</div></div>
    <div class="semi-stat"><div class="semi-stat__val" id="s-asml">7</div><div class="semi-stat__label">ASML Nodes</div></div>
    <div class="semi-stat"><div class="semi-stat__val" id="s-ree">7</div><div class="semi-stat__label">REE Nodes</div></div>
    <div class="semi-stat"><div class="semi-stat__val" id="s-scns">5</div><div class="semi-stat__label">Disruption Scenarios</div></div>
</div>

<div style="display:grid;grid-template-columns:1fr 1.2fr;gap:1rem">
    <div>
        <div class="section-title">Supply Chain Map</div>
        <div id="semi-map"></div>
    </div>
    <div>
        <div class="section-title">Select Disruption Scenario</div>
        <div class="scenario-grid" id="scenario-grid">Loading scenarios…</div>
        <button class="btn" id="run-btn" onclick="runScenario()" style="margin-top:.5rem">&#9654; Run Cascade Simulation</button>
    </div>
</div>

<!-- Cascade Results -->
<div id="cascade-results" style="display:none;margin-top:1rem">
    <div class="section-title">Cascade Results</div>
    <div style="display:grid;grid-template-columns:1fr 1fr;gap:1rem">
        <div>
            <div class="card" style="padding:.75rem;margin-bottom:.75rem">
                <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:.5rem">
                    <b style="font-size:.85rem;color:#d1d5db">Total Wafer Production Impact</b>
                    <span id="total-degradation" style="font-size:1.5rem;font-weight:800;color:#ef4444">—</span>
                </div>
                <div id="cascade-meta" style="font-size:.78rem;color:#9ca3af"></div>
            </div>
            <div class="section-title">Wafer Degradation by Node</div>
            <canvas id="cascade-chart" height="160"></canvas>
        </div>
        <div>
            <div class="section-title">Affected Supply Chain Nodes</div>
            <div class="card" style="padding:.75rem;max-height:360px;overflow-y:auto">
                <table class="node-table" id="cascade-table">
                    <thead><tr><th>Node</th><th>Criticality</th><th>Degradation</th><th>Lead Time</th></tr></thead>
                    <tbody id="cascade-tbody"></tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<!-- Exposure Map Table -->
<div style="margin-top:1rem">
    <div class="section-title">Global Exposure Map — All Nodes by Criticality</div>
    <div class="card" style="padding:.75rem;max-height:300px;overflow-y:auto">
        <table class="node-table" id="exposure-table">
            <thead><tr><th>Node ID</th><th>Name</th><th>Category</th><th>Criticality</th><th>Location</th></tr></thead>
            <tbody id="exposure-tbody">Loading…</tbody>
        </table>
    </div>
</div>

<!-- REE Flow -->
<div style="margin-top:1rem">
    <div class="section-title">Rare Earth Element (REE) Supply Flow</div>
    <div class="card" style="padding:.75rem">
        <table class="ree-table" id="ree-table">
            <thead><tr><th>From</th><th>To</th><th>Element</th><th>Flow Fraction</th><th>Lead Time (days)</th></tr></thead>
            <tbody id="ree-tbody">Loading…</tbody>
        </table>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
<script>
(function() {
    let selectedScenario = null;
    let cascadeChart = null;

    // Map
    const map = L.map('semi-map', { center: [25, 115], zoom: 3 });
    L.tileLayer('https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png', {
        attribution: '&copy; OpenStreetMap, &copy; CARTO', maxZoom: 18
    }).addTo(map);

    // Summary stats
    fetch('/api/geosigint/semiconductor/summary').then(r => r.json()).then(d => {
        if (d.tsmc_fabs) document.getElementById('s-fabs').textContent = d.tsmc_fabs;
        if (d.taiwan_wafer_share_pct) document.getElementById('s-taiwan-share').textContent = d.taiwan_wafer_share_pct + '%';
        if (d.asml_nodes) document.getElementById('s-asml').textContent = d.asml_nodes;
        if (d.ree_nodes) document.getElementById('s-ree').textContent = d.ree_nodes;
        if (d.disruption_scenarios) document.getElementById('s-scns').textContent = d.disruption_scenarios;
    });

    // Exposure map
    fetch('/api/geosigint/semiconductor/exposure-map').then(r => r.json()).then(d => {
        (d.nodes || []).forEach(n => {
            if (!n.lat || !n.lon) return;
            const col = n.criticality >= 0.9 ? '#ef4444' : n.criticality >= 0.7 ? '#f59e0b' : '#22c55e';
            L.circleMarker([n.lat, n.lon], {
                radius: 4 + n.criticality * 6,
                color: col, fillColor: col, fillOpacity: .7, weight: 2
            }).bindPopup(`<b>${n.name || n.node_id}</b><br>Criticality: ${(n.criticality * 100).toFixed(0)}%`).addTo(map);
        });

        // Exposure table
        document.getElementById('exposure-tbody').innerHTML = (d.nodes || []).map(n => {
            const pct = Math.round((n.criticality || 0) * 100);
            const col = pct >= 90 ? '#ef4444' : pct >= 70 ? '#f59e0b' : '#22c55e';
            return `<tr>
                <td style="font-family:monospace;font-size:.72rem;color:#9ca3af">${n.node_id}</td>
                <td style="font-weight:600">${n.name || n.node_id}</td>
                <td style="font-size:.75rem;color:#9ca3af">${n.category || '—'}</td>
                <td>
                    <div style="display:flex;align-items:center;gap:.3rem">
                        <div class="crit-bar-bg"><div class="crit-bar" style="width:${pct}%;background:${col}"></div></div>
                        <span style="font-size:.72rem;color:${col}">${pct}%</span>
                    </div>
                </td>
                <td style="font-size:.75rem;color:#9ca3af">${n.location || '—'}</td>
            </tr>`;
        }).join('');
    });

    // Scenarios
    fetch('/api/geosigint/semiconductor/scenarios').then(r => r.json()).then(d => {
        const grid = document.getElementById('scenario-grid');
        grid.innerHTML = (d.scenarios || []).map((s, i) => {
            const sevPct = Math.round((s.severity || 0) * 100);
            const sevCol = sevPct >= 80 ? '#ef4444' : sevPct >= 60 ? '#f59e0b' : '#22c55e';
            return `<div class="scenario-card" id="scn-${s.scenario_id}" onclick="selectScenario('${s.scenario_id}')">
                <div class="scenario-card__label">${s.label || s.scenario_id}</div>
                <div class="scenario-card__desc">${(s.description || '').substring(0, 120)}…</div>
                <span class="scenario-card__sev" style="background:${sevCol}22;color:${sevCol};border:1px solid ${sevCol}44">
                    ${sevPct}% severity · ${s.horizon_days || 0}d
                </span>
            </div>`;
        }).join('');
        // Auto-select first
        if (d.scenarios && d.scenarios.length) selectScenario(d.scenarios[0].scenario_id);
    });

    // REE flows
    fetch('/api/geosigint/semiconductor/ree-flow').then(r => r.json()).then(d => {
        document.getElementById('ree-tbody').innerHTML = (d.flows || []).map(f =>
            `<tr>
                <td>${f.from_node_id}</td>
                <td>${f.to_node_id}</td>
                <td style="color:#a78bfa">${f.element || '—'}</td>
                <td>${f.flow_fraction != null ? (f.flow_fraction * 100).toFixed(0) + '%' : '—'}</td>
                <td>${f.lead_time_days || '—'}</td>
            </tr>`
        ).join('') || '<tr><td colspan="5" style="color:#6b7280">No REE flow data</td></tr>';
    });

    window.selectScenario = function(scnId) {
        document.querySelectorAll('.scenario-card').forEach(c => c.classList.remove('selected'));
        const el = document.getElementById('scn-' + scnId);
        if (el) el.classList.add('selected');
        selectedScenario = scnId;
    };

    window.runScenario = function() {
        if (!selectedScenario) { alert('Select a scenario first'); return; }
        const btn = document.getElementById('run-btn');
        btn.disabled = true;
        btn.textContent = 'Running…';
        fetch('/api/geosigint/semiconductor/simulate', {
            method: 'POST',
            headers: {'Content-Type':'application/json'},
            body: JSON.stringify({ scenario_id: selectedScenario }),
        }).then(r => r.json()).then(d => {
            btn.disabled = false;
            btn.textContent = '▶ Run Cascade Simulation';

            const totalDeg = d.total_wafer_degradation_pct || 0;
            document.getElementById('total-degradation').textContent = totalDeg.toFixed(1) + '%';
            document.getElementById('cascade-meta').innerHTML =
                `Affected nodes: <b style="color:#e2e8f0">${(d.affected_nodes || []).length}</b> &nbsp;|&nbsp; ` +
                `Horizon: <b style="color:#e2e8f0">${d.horizon_days || '—'} days</b>`;

            const cascade = (d.cascade || []).slice(0, 12);
            const labels = cascade.map(n => (n.node_id || '').replace(/^[a-z]+-/, '').substring(0, 12));
            const values = cascade.map(n => n.production_degradation || 0);
            const colors = cascade.map(n => {
                const v = n.production_degradation || 0;
                return v >= 0.7 ? '#ef4444' : v >= 0.4 ? '#f59e0b' : '#22c55e';
            });

            if (cascadeChart) cascadeChart.destroy();
            cascadeChart = new Chart(document.getElementById('cascade-chart'), {
                type: 'bar',
                data: { labels, datasets: [{ label: 'Degradation', data: values, backgroundColor: colors }] },
                options: {
                    responsive: true,
                    plugins: { legend: { display: false } },
                    scales: {
                        y: { beginAtZero: true, max: 1, ticks: { callback: v => (v*100)+'%', color: '#9ca3af' }, grid: { color: '#374151' } },
                        x: { ticks: { color: '#9ca3af', font: { size: 10 } }, grid: { display: false } },
                    },
                },
            });

            document.getElementById('cascade-tbody').innerHTML = cascade.map(n => {
                const pct = Math.round((n.production_degradation || 0) * 100);
                const col = pct >= 70 ? '#ef4444' : pct >= 40 ? '#f59e0b' : '#22c55e';
                const crit = Math.round((n.criticality || 0) * 100);
                return `<tr>
                    <td style="font-size:.75rem;color:#9ca3af;font-family:monospace">${n.node_id}</td>
                    <td>
                        <div class="crit-bar-bg" style="width:60px"><div class="crit-bar" style="width:${crit}%;background:#60a5fa"></div></div>
                    </td>
                    <td style="color:${col};font-weight:700">${pct}%</td>
                    <td style="color:#9ca3af">${n.lead_time_days || '—'}d</td>
                </tr>`;
            }).join('');

            document.getElementById('cascade-results').style.display = '';
            document.getElementById('cascade-results').scrollIntoView({ behavior: 'smooth' });
        }).catch(e => {
            btn.disabled = false;
            btn.textContent = '▶ Run Cascade Simulation';
            alert('Simulation error: ' + e.message);
        });
    };
})();
</script>
{% endblock %}