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

{% block extra_css %}
<style>
/* ── Layout ────────────────────────────────────────────────────────────────── */
.sim-workspace {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.sim-top {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 1rem;
    min-height: 480px;
}
.sim-panel {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 1rem;
    display: flex;
    flex-direction: column;
}
.sim-panel-title {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-shrink: 0;
}
.sim-panel-title .dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent-blue);
    display: inline-block;
}

/* ── Map ───────────────────────────────────────────────────────────────────── */
#leaflet-map {
    flex: 1;
    min-height: 420px;
    border-radius: 4px;
    display: none;
}
#map-placeholder {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    font-size: 0.82rem;
    border: 1px dashed var(--border-color);
    border-radius: 4px;
}

/* ── Side panel ────────────────────────────────────────────────────────────── */
#builder-panel {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    overflow-y: auto;
}
.builder-empty {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    font-size: 0.82rem;
    border: 1px dashed var(--border-color);
    border-radius: 4px;
    text-align: center;
    padding: 1rem;
}
.node-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.25rem 0.6rem;
    border-radius: 20px;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.node-badge.depot       { background: rgba(59,130,246,0.18); color: #60a5fa; border: 1px solid #3b82f6; }
.node-badge.warehouse   { background: rgba(139,92,246,0.18); color: #a78bfa; border: 1px solid #8b5cf6; }
.node-badge.raw_material{ background: rgba(245,158,11,0.18); color: #fbbf24; border: 1px solid #f59e0b; }
.node-badge.factory     { background: rgba(239,68,68,0.18);  color: #f87171; border: 1px solid #ef4444; }
.node-badge.port        { background: rgba(20,184,166,0.18); color: #2dd4bf; border: 1px solid #14b8a6; }
.node-badge.unit        { background: rgba(232,121,249,0.18);color: #e879f9; border: 1px solid #e879f9; }

.form-label {
    display: block;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: 0.3rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.form-range {
    width: 100%;
    accent-color: var(--accent-blue);
}
.form-input {
    width: 100%;
    box-sizing: border-box;
    background: var(--bg-input, #1a2333);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    color: var(--text-primary);
    padding: 0.35rem 0.5rem;
    font-size: 0.82rem;
}
.range-display {
    font-size: 0.78rem;
    color: var(--text-secondary);
    float: right;
}
.btn-add {
    width: 100%;
    padding: 0.5rem;
    background: var(--accent-blue);
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.15s;
}
.btn-add:hover { opacity: 0.85; }

/* ── Event list ────────────────────────────────────────────────────────────── */
.sim-events {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.event-card {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    background: var(--bg-row, rgba(255,255,255,0.04));
    border: 1px solid var(--border-color);
    border-radius: 5px;
    padding: 0.5rem 0.7rem;
    font-size: 0.8rem;
}
.event-card-label {
    flex: 1;
    color: var(--text-primary);
}
.event-card-meta {
    color: var(--text-muted);
    font-size: 0.75rem;
    white-space: nowrap;
}
.btn-remove {
    background: none;
    border: 1px solid var(--border-color);
    border-radius: 3px;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0.15rem 0.4rem;
    font-size: 0.72rem;
    line-height: 1;
    transition: color 0.15s, border-color 0.15s;
}
.btn-remove:hover { color: #ef4444; border-color: #ef4444; }
.events-empty {
    color: var(--text-muted);
    font-size: 0.8rem;
    padding: 0.5rem 0;
}

/* ── Run buttons ───────────────────────────────────────────────────────────── */
.run-row {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}
.btn-run {
    padding: 0.55rem 1.1rem;
    border: none;
    border-radius: 4px;
    font-size: 0.83rem;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.15s;
}
.btn-run:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-run-det { background: #2563eb; color: #fff; }
.btn-run-det:hover:not(:disabled) { opacity: 0.85; }
.btn-run-mc  { background: rgba(139,92,246,0.9); color: #fff; }
.btn-run-mc:hover:not(:disabled) { opacity: 0.85; }

/* ── Results ───────────────────────────────────────────────────────────────── */
#sim-results {
    display: none;
}
.results-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 0.75rem;
    margin-top: 0.5rem;
}
.result-card {
    background: var(--bg-row, rgba(255,255,255,0.04));
    border: 1px solid var(--border-color);
    border-radius: 5px;
    padding: 0.75rem;
}
.result-card-title {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    margin-bottom: 0.4rem;
}
.result-card-val {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--text-primary);
}
.result-card-sub {
    font-size: 0.72rem;
    color: var(--text-muted);
    margin-top: 0.2rem;
}
.cascade-list {
    margin-top: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.cascade-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.78rem;
    color: var(--text-secondary);
    border-left: 2px solid var(--accent-blue);
    padding-left: 0.5rem;
}
</style>
{% endblock %}

{% block content %}
<div class="page-header page-header--compact">
    <h1>Simulation Workspace
        <span style="font-size:0.65em;color:var(--text-secondary);font-weight:400;">
            Scenario Planning &amp; COA Analysis
        </span>
    </h1>
    <div style="font-size:0.75rem;color:var(--text-muted);margin-top:0.25rem">
        CUI // SP-CTI &nbsp;|&nbsp; Strategos
    </div>
</div>

<div class="sim-workspace">

    <!-- ── Top: Map + Builder ──────────────────────────────────────────────── -->
    <div class="sim-top">

        <!-- Leaflet map -->
        <div class="sim-panel">
            <div class="sim-panel-title">
                <span class="dot"></span> Supply Chain Map
                <span id="node-count" style="margin-left:auto;font-weight:400;font-size:0.72rem"></span>
            </div>
            <div id="map-placeholder">Loading nodes…</div>
            <div id="leaflet-map"></div>
        </div>

        <!-- Scenario builder side panel -->
        <div class="sim-panel" id="builder-container">
            <div class="sim-panel-title">
                <span class="dot" style="background:#f59e0b"></span> Scenario Builder
            </div>

            <div id="builder-empty" class="builder-empty">
                Click a node on the map to configure a disruption event
            </div>

            <div id="builder-form" style="display:none; flex-direction:column; gap:0.75rem;">
                <!-- Node type badge + label -->
                <div style="display:flex;align-items:center;gap:0.5rem;">
                    <span id="sel-badge" class="node-badge depot">depot</span>
                    <span id="sel-label" style="font-size:0.85rem;font-weight:600;color:var(--text-primary)"></span>
                </div>

                <!-- Destruction % -->
                <div>
                    <label class="form-label">
                        Destruction %
                        <span class="range-display" id="dest-val">50%</span>
                    </label>
                    <input type="range" class="form-range" id="dest-slider"
                           min="0" max="100" value="50"
                           oninput="document.getElementById('dest-val').textContent=this.value+'%'">
                </div>

                <!-- Repair timeline days -->
                <div>
                    <label class="form-label">Repair Timeline (days)</label>
                    <input type="number" class="form-input" id="repair-days"
                           min="0" max="365" value="7" step="1">
                </div>

                <!-- Timestamp offset -->
                <div>
                    <label class="form-label">
                        Timestamp Offset (days from T=0)
                        <span class="range-display" id="offset-val">0d</span>
                    </label>
                    <input type="range" class="form-range" id="offset-slider"
                           min="0" max="180" value="0"
                           oninput="document.getElementById('offset-val').textContent=this.value+'d'">
                </div>

                <button class="btn-add" onclick="addEvent()">+ Add to Scenario</button>
            </div>
        </div>

    </div>

    <!-- ── Event list ─────────────────────────────────────────────────────── -->
    <div class="sim-panel">
        <div class="sim-panel-title">
            <span class="dot" style="background:#818cf8"></span> Scenario Events
            <span id="event-count" style="margin-left:auto;font-weight:400;font-size:0.72rem;color:var(--text-muted)">0 events</span>
        </div>

        <div id="event-list" class="sim-events">
            <div class="events-empty" id="events-empty-msg">No events added. Click a map node to begin.</div>
        </div>

        <div class="run-row" style="margin-top:1rem;">
            <button class="btn-run btn-run-det" id="btn-det" onclick="runScenario('deterministic')" disabled>
                Run Scenario (Deterministic)
            </button>
            <button class="btn-run btn-run-mc" id="btn-mc" onclick="runScenario('monte_carlo')" disabled>
                Run Monte Carlo (100 iterations)
            </button>
        </div>
    </div>

    <!-- ── Results ────────────────────────────────────────────────────────── -->
    <div class="sim-panel" id="sim-results">
        <div class="sim-panel-title">
            <span class="dot" style="background:var(--accent-green)"></span> Simulation Results
            <span id="results-mode-badge" style="margin-left:0.5rem;font-size:0.68rem;color:var(--text-muted)"></span>
        </div>
        <div id="results-body"></div>
    </div>

</div>

{% endblock %}

{% block extra_js %}
<script>
/* ── NODE_DISRUPTION_PROFILES (mirrored from Python) ───────────────────────── */
const DISRUPTION_PROFILES = {
    depot:        { lag_mean: 2  },
    warehouse:    { lag_mean: 7  },
    raw_material: { lag_mean: 30 },
    factory:      { lag_mean: 14 },
    port:         { lag_mean: 7  },
    unit:         { lag_mean: 1  },
};

/* ── State ─────────────────────────────────────────────────────────────────── */
let _selectedNode = null;   // {node_id, label, node_type, lat, lon, criticality}
let _events       = [];     // scenario event list
let _markers      = [];     // {node, marker, circle}
let _leafletMap   = null;

/* ── Map init ──────────────────────────────────────────────────────────────── */
function initMap() {
    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 &copy; CARTO',
        subdomains: 'abcd', maxZoom: 18
    }).addTo(_leafletMap);
    loadNodes();
}

/* ── Node type → colour ────────────────────────────────────────────────────── */
const NODE_COLOR = {
    depot: '#60a5fa', warehouse: '#a78bfa', raw_material: '#fbbf24',
    factory: '#f87171', port: '#2dd4bf', unit: '#e879f9',
};
function nodeColor(t) { return NODE_COLOR[t] || '#94a3b8'; }

/* ── Fetch nodes and plot ──────────────────────────────────────────────────── */
async function loadNodes() {
    try {
        const r = await fetch('/api/strategos/simulate/nodes');
        if (!r.ok) throw new Error(r.statusText);
        const data = await r.json();
        const nodes = data.nodes || [];
        document.getElementById('node-count').textContent = nodes.length + ' nodes';
        plotNodes(nodes);
    } catch (e) {
        document.getElementById('map-placeholder').style.display = 'flex';
        document.getElementById('map-placeholder').textContent = 'Could not load nodes: ' + e.message;
    }
}

function plotNodes(nodes) {
    if (!_leafletMap) return;
    _markers.forEach(m => { m.marker.remove(); if (m.circle) m.circle.remove(); });
    _markers = [];
    nodes.forEach(node => {
        if (isNaN(node.lat) || isNaN(node.lon)) return;
        const color = nodeColor(node.node_type);
        const marker = L.circleMarker([node.lat, node.lon], {
            radius: 8, color, fillColor: color, fillOpacity: 0.85, weight: 2
        }).addTo(_leafletMap);
        marker.bindTooltip(node.label, {permanent: false, direction: 'top'});
        marker.on('click', () => selectNode(node));
        _markers.push({node, marker});
    });
}

/* ── Select node → populate builder panel ─────────────────────────────────── */
function selectNode(node) {
    _selectedNode = node;
    const profile = DISRUPTION_PROFILES[node.node_type] || {lag_mean: 7};

    // badge + label
    const badge = document.getElementById('sel-badge');
    badge.textContent = node.node_type.replace('_', ' ');
    badge.className = 'node-badge ' + node.node_type;
    document.getElementById('sel-label').textContent = node.label;

    // pre-fill repair days from disruption profile
    document.getElementById('repair-days').value = profile.lag_mean;

    // reset sliders
    const destSlider = document.getElementById('dest-slider');
    destSlider.value = 50;
    document.getElementById('dest-val').textContent = '50%';
    const offsetSlider = document.getElementById('offset-slider');
    offsetSlider.value = 0;
    document.getElementById('offset-val').textContent = '0d';

    // show form
    document.getElementById('builder-empty').style.display = 'none';
    document.getElementById('builder-form').style.display = 'flex';

    // highlight marker
    _markers.forEach(m => {
        const isSelected = m.node.node_id === node.node_id;
        const color = nodeColor(m.node.node_type);
        m.marker.setStyle({
            radius:      isSelected ? 12 : 8,
            weight:      isSelected ? 3  : 2,
            color:       isSelected ? '#fff' : color,
            fillColor:   color,
        });
    });
}

/* ── Add event to scenario ─────────────────────────────────────────────────── */
function addEvent() {
    if (!_selectedNode) return;
    const event = {
        node_id:               _selectedNode.node_id,
        node_type:             _selectedNode.node_type,
        label:                 _selectedNode.label,
        destruction_pct:       parseInt(document.getElementById('dest-slider').value),
        repair_timeline_days:  parseInt(document.getElementById('repair-days').value),
        timestamp_offset_days: parseInt(document.getElementById('offset-slider').value),
    };
    _events.push(event);
    renderEventList();
    updateRunButtons();
}

function removeEvent(idx) {
    _events.splice(idx, 1);
    renderEventList();
    updateRunButtons();
}

function renderEventList() {
    const list = document.getElementById('event-list');
    const empty = document.getElementById('events-empty-msg');
    document.getElementById('event-count').textContent = _events.length + ' event' + (_events.length !== 1 ? 's' : '');

    if (_events.length === 0) {
        list.innerHTML = '';
        list.appendChild(empty);
        empty.style.display = '';
        return;
    }
    empty.style.display = 'none';
    list.innerHTML = '';
    _events.forEach((ev, i) => {
        const card = document.createElement('div');
        card.className = 'event-card';
        card.innerHTML = `
            <span class="node-badge ${ev.node_type}" style="flex-shrink:0">${ev.node_type.replace('_',' ')}</span>
            <span class="event-card-label">${ev.label}</span>
            <span class="event-card-meta">
                ${ev.destruction_pct}% dmg &nbsp;·&nbsp;
                ${ev.repair_timeline_days}d repair &nbsp;·&nbsp;
                T+${ev.timestamp_offset_days}d
            </span>
            <button class="btn-remove" onclick="removeEvent(${i})">✕</button>
        `;
        list.appendChild(card);
    });
}

function updateRunButtons() {
    const has = _events.length > 0;
    document.getElementById('btn-det').disabled = !has;
    document.getElementById('btn-mc').disabled  = !has;
}

/* ── Run simulation ────────────────────────────────────────────────────────── */
async function runScenario(mode) {
    const btnDet = document.getElementById('btn-det');
    const btnMc  = document.getElementById('btn-mc');
    btnDet.disabled = true;
    btnMc.disabled  = true;
    btnDet.textContent = mode === 'deterministic' ? 'Running…' : 'Run Scenario (Deterministic)';
    btnMc.textContent  = mode === 'monte_carlo'   ? 'Running…' : 'Run Monte Carlo (100 iterations)';

    try {
        const res = await fetch('/api/strategos/simulate/run', {
            method: 'POST',
            headers: {'Content-Type': 'application/json'},
            body: JSON.stringify({events: _events, mode, iterations: 100}),
        });
        const data = await res.json();
        if (!res.ok) throw new Error(data.error || res.statusText);
        renderResults(data, mode);
    } catch (e) {
        renderError(e.message);
    } finally {
        btnDet.disabled = _events.length === 0;
        btnMc.disabled  = _events.length === 0;
        btnDet.textContent = 'Run Scenario (Deterministic)';
        btnMc.textContent  = 'Run Monte Carlo (100 iterations)';
    }
}

/* ── Render results ────────────────────────────────────────────────────────── */
function renderResults(data, mode) {
    const panel = document.getElementById('sim-results');
    const body  = document.getElementById('results-body');
    panel.style.display = 'flex';

    const modeLabel = mode === 'monte_carlo' ? 'Monte Carlo' : 'Deterministic';
    document.getElementById('results-mode-badge').textContent = modeLabel;

    const s = data.summary || {};
    const cards = [
        { title: 'Events Processed',    val: data.events_processed ?? '—',  sub: 'disruption events' },
        { title: 'Mean Degradation',     val: pct(s.mean_degradation),       sub: 'supply chain impact' },
        { title: 'Mean Onset (days)',    val: fmt(s.mean_onset_days),         sub: 'avg degradation lag' },
        { title: 'Network Disruption',   val: pct(s.network_disruption_pct), sub: 'nodes affected' },
    ];
    if (mode === 'monte_carlo') {
        cards.push({ title: 'P10 Degradation', val: pct(s.p10_degradation), sub: '10th percentile' });
        cards.push({ title: 'P90 Degradation', val: pct(s.p90_degradation), sub: '90th percentile' });
    }

    let html = '<div class="results-grid">';
    cards.forEach(c => {
        html += `<div class="result-card">
            <div class="result-card-title">${c.title}</div>
            <div class="result-card-val">${c.val}</div>
            <div class="result-card-sub">${c.sub}</div>
        </div>`;
    });
    html += '</div>';

    const cascade = data.cascade_effects || [];
    if (cascade.length > 0) {
        html += '<div style="margin-top:1rem;"><div class="sim-panel-title" style="margin-bottom:0.4rem;"><span class="dot"></span> Cascade Effects</div>';
        html += '<div class="cascade-list">';
        cascade.forEach(c => {
            html += `<div class="cascade-item">
                <span class="node-badge ${c.node_type}" style="flex-shrink:0">${c.node_type.replace('_',' ')}</span>
                <span>${c.label}</span>
                <span style="margin-left:auto;color:var(--text-muted)">${pct(c.degradation)} @ T+${c.onset_day}d</span>
            </div>`;
        });
        html += '</div></div>';
    }

    body.innerHTML = html;
}

function renderError(msg) {
    const panel = document.getElementById('sim-results');
    panel.style.display = 'flex';
    document.getElementById('results-body').innerHTML =
        `<div style="color:#f87171;font-size:0.82rem;">Simulation failed: ${msg}</div>`;
}

function pct(v) { return v != null ? (v * 100).toFixed(1) + '%' : '—'; }
function fmt(v) { return v != null ? parseFloat(v).toFixed(1) : '—'; }

/* ── Leaflet CDN load ──────────────────────────────────────────────────────── */
(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 = initMap;
    script.onerror = () => {
        document.getElementById('map-placeholder').textContent = 'Map unavailable (offline)';
    };
    document.head.appendChild(script);
})();
</script>
{% endblock %}