{% extends "network/base.html" %}
{% block title %}Monte Carlo Simulation — {{ topology.name }}{% endblock %}
{% block content %}
<div class="page-header">
  <div>
    <h1 class="page-title">Monte Carlo Simulation</h1>
    <p class="page-subtitle">{{ topology.name }} — Cascading failure analysis & resilience scoring</p>
  </div>
  <div class="page-actions">
    <a href="/network/canvas/{{ topology.id }}" class="btn btn-secondary">Open Canvas</a>
    <a href="/network/versions/{{ topology.id }}" class="btn btn-secondary">Versions</a>
    <button class="btn btn-primary" onclick="document.getElementById('scenario-modal').style.display='flex'">+ New Scenario</button>
  </div>
</div>

{% if runs %}
<section class="panel panel-wide">
  <div class="panel-header"><h2 class="panel-title">Previous Runs</h2></div>
  <table class="data-table">
    <thead><tr><th>Scenario</th><th>Type</th><th>Iterations</th><th>Ran</th><th>Actions</th></tr></thead>
    <tbody>
    {% for r in runs %}
      <tr>
        <td><strong>{{ r.scenario_name }}</strong></td>
        <td><span class="badge">{{ r.scenario_type }}</span></td>
        <td>{{ r.iterations }}</td>
        <td class="ts">{{ (r.ran_at or '')[:16] }}</td>
        <td><button class="action-btn" onclick="loadRun('{{ r.id }}')" title="View results">View</button></td>
      </tr>
    {% endfor %}
    </tbody>
  </table>
</section>
{% endif %}

{% if scenarios %}
<section class="panel panel-wide">
  <div class="panel-header"><h2 class="panel-title">Scenarios ({{ scenarios|length }})</h2></div>
  <table class="data-table">
    <thead><tr><th>Name</th><th>Type</th><th>Description</th><th>Actions</th></tr></thead>
    <tbody>
    {% for s in scenarios %}
      <tr>
        <td><strong>{{ s.name }}</strong></td>
        <td><span class="badge">{{ s.scenario_type }}</span></td>
        <td>{{ s.description }}</td>
        <td><button class="btn btn-primary" style="font-size:0.75rem;padding:3px 10px;" onclick="runScenario('{{ s.id }}')">Run (1000 iterations)</button></td>
      </tr>
    {% endfor %}
    </tbody>
  </table>
</section>
{% else %}
<div class="panel panel-wide" style="padding:2rem;text-align:center;color:var(--text-dim);">
  <p>No scenarios yet. Create one to simulate cascading failures.</p>
  <p style="margin-top:0.5rem;font-size:0.85rem;">
    <strong>Random</strong> — random node/link failures at configurable probabilities<br>
    <strong>Named</strong> — specific "what-if" failures (e.g., "carrier fiber cut")<br>
    <strong>Circuit Change</strong> — test resilience after adding/removing a circuit
  </p>
</div>
{% endif %}

<!-- Results Display -->
<div id="results-panel" class="panel panel-wide" style="display:none;">
  <div class="panel-header"><h2 class="panel-title" id="results-title">Simulation Results</h2></div>
  <div id="results-narrative" style="padding:1rem;background:var(--bg3);border-radius:6px;margin:1rem;line-height:1.7;font-size:0.9rem;"></div>
  <div class="stats-bar" id="results-stats"></div>

  <!-- Topology Diagram with Highlighted Vulnerabilities -->
  <div style="padding:1rem;">
    <h4>Topology Risk Map</h4>
    <p style="font-size:0.8rem;color:var(--text-dim);margin-bottom:0.5rem;">
      <span style="color:#e74c3c;">Red</span> = high impact, no redundancy &nbsp;
      <span style="color:#f39c12;">Orange</span> = single uplink, no failover &nbsp;
      <span style="color:#27ae60;">Green</span> = redundant pair (protected) &nbsp;
      <span style="color:#2c6e4f;">Dim</span> = normal
    </p>
    <div id="results-diagram" style="background:var(--bg3);border:1px solid var(--border);border-radius:8px;overflow:auto;max-height:500px;"></div>
  </div>

  <div id="results-detail" style="padding:1rem;"></div>
</div>

<!-- New Scenario Modal -->
<div id="scenario-modal" class="modal" style="display:none;">
  <div class="modal-content">
    <h3>Create Simulation Scenario</h3>
    <form onsubmit="return createScenario(event)">
      <div class="form-grid">
        <label>Name <input name="name" required placeholder="Carrier fiber cut"></label>
        <label>Type <select name="scenario_type">
          <option value="random">Random (probabilistic failures)</option>
          <option value="named">Named (specific what-if)</option>
          <option value="circuit_change">Circuit Change</option>
        </select></label>
        <label style="grid-column:span 2">Description <input name="description" placeholder="What are we testing?"></label>
        <label>Node failure probability <input name="node_prob" type="number" step="0.01" value="0.02" min="0" max="1"></label>
        <label>Link failure probability <input name="edge_prob" type="number" step="0.01" value="0.05" min="0" max="1"></label>
      </div>
      <div class="form-actions">
        <button type="submit" class="btn btn-primary">Create</button>
        <button type="button" class="btn btn-secondary" onclick="this.closest('.modal').style.display='none'">Cancel</button>
      </div>
    </form>
  </div>
</div>
{% endblock %}
{% block scripts %}
<script>
const TOPO_ID = '{{ topology.id }}';
const AUTO_RUN = '{{ auto_run_scenario or "" }}';

function createScenario(e) {
  e.preventDefault();
  const fd = new FormData(e.target), d = {};
  fd.forEach((v,k) => d[k] = v);
  const config = {
    iterations: 1000,
    node_failure_prob: parseFloat(d.node_prob) || 0.02,
    edge_failure_prob: parseFloat(d.edge_prob) || 0.05,
  };
  fetch(NC_BASE + '/api/mc/scenarios/' + TOPO_ID, {
    method: 'POST', headers: {'Content-Type': 'application/json'},
    body: JSON.stringify({name: d.name, scenario_type: d.scenario_type, description: d.description, config: config})
  }).then(() => location.reload());
  return false;
}

function runScenario(scenarioId) {
  const btn = event.target;
  btn.disabled = true;
  btn.textContent = 'Running...';
  fetch(NC_BASE + '/api/mc/run/' + scenarioId, {
    method: 'POST', headers: {'Content-Type': 'application/json'},
    body: JSON.stringify({iterations: 1000})
  }).then(r => r.json()).then(d => {
    showResults(d);
    btn.disabled = false;
    btn.textContent = 'Run (1000 iterations)';
  }).catch(() => { btn.disabled = false; btn.textContent = 'Run (1000 iterations)'; });
}

function loadRun(runId) {
  fetch(NC_BASE + '/api/mc/runs/' + TOPO_ID + '/' + runId).then(r => r.json()).then(d => {
    const result = d.result || d;
    showResults(result);
  });
}

function showResults(d) {
  document.getElementById('results-panel').style.display = 'block';
  document.getElementById('results-title').textContent = (d.scenario_name || 'Simulation') + ' Results';

  // Narrative
  document.getElementById('results-narrative').innerHTML =
    '<strong>Summary:</strong> ' + (d.narrative || d.summary || 'No narrative available.');

  // Stats — human-readable explanations
  const score = d.risk_score || 0;
  const scoreColor = score >= 90 ? '#27ae60' : score >= 70 ? '#f39c12' : '#e74c3c';
  const ci = d.confidence_interval_95 || 0;
  const cascade = d.avg_cascade_impact || 0;
  document.getElementById('results-stats').innerHTML = `
    <div class="stat-card">
      <div class="stat-value" style="color:${scoreColor}">${score}%</div>
      <div class="stat-label">Resilience Score</div>
      <div style="font-size:0.7rem;color:var(--text-dim);margin-top:4px;">${score >= 90 ? 'Strong — most failures recovered' : score >= 70 ? 'Moderate — some outage risk' : 'Weak — high outage risk'}</div>
    </div>
    <div class="stat-card">
      <div class="stat-value">${d.iterations || '?'}</div>
      <div class="stat-label">Simulated Failures</div>
      <div style="font-size:0.7rem;color:var(--text-dim);margin-top:4px;">Random failure scenarios tested</div>
    </div>
    <div class="stat-card">
      <div class="stat-value">${(score - ci).toFixed(1)}% – ${Math.min(100, score + ci).toFixed(1)}%</div>
      <div class="stat-label">Confidence Range</div>
      <div style="font-size:0.7rem;color:var(--text-dim);margin-top:4px;">95% confident the real score falls here</div>
    </div>
    <div class="stat-card">
      <div class="stat-value" style="color:${cascade > 3 ? '#e74c3c' : cascade > 1 ? '#f39c12' : '#27ae60'}">${cascade} nodes</div>
      <div class="stat-label">Cascade Impact</div>
      <div style="font-size:0.7rem;color:var(--text-dim);margin-top:4px;">Avg devices affected per failure</div>
    </div>
  `;

  // Detail
  let html = '';
  if (d.vulnerable_nodes && d.vulnerable_nodes.length) {
    html += '<h4 style="margin-top:1rem;">Highest Impact Nodes (no redundancy)</h4><table class="data-table"><thead><tr><th>Node</th><th>Devices Isolated If Failed</th></tr></thead><tbody>';
    d.vulnerable_nodes.forEach(v => { html += `<tr><td>${v.node}</td><td style="color:#e74c3c;font-weight:bold;">${v.impact} device(s)</td></tr>`; });
    html += '</tbody></table>';
  }
  if (d.single_link_nodes && d.single_link_nodes.length) {
    html += '<h4 style="margin-top:1rem;">Single-Connected Devices (no redundant uplink)</h4><p style="color:#f39c12;">' + d.single_link_nodes.join(', ') + '</p>';
  }
  if (d.redundant_pairs && d.redundant_pairs.length) {
    html += '<h4 style="margin-top:1rem;">Redundant Pairs (protected)</h4><p style="color:#27ae60;">';
    d.redundant_pairs.forEach(p => { html += p.a + ' + ' + p.b + ' &nbsp; '; });
    html += '</p>';
  }
  if (d.recommendations && d.recommendations.length) {
    html += '<h4 style="margin-top:1rem;">AI Recommendations</h4><ul style="line-height:1.8;">';
    d.recommendations.forEach(r => { html += `<li>${r}</li>`; });
    html += '</ul>';
  }
  document.getElementById('results-detail').innerHTML = html;

  // Render topology diagram with highlighted vulnerabilities
  renderTopologyDiagram(d);

  document.getElementById('results-panel').scrollIntoView({behavior: 'smooth'});
}

function renderTopologyDiagram(d) {
  const container = document.getElementById('results-diagram');
  if (!container) return;
  const graph = d.graph;
  if (!graph || !graph.nodes || !graph.nodes.length) {
    container.innerHTML = '<p style="padding:1rem;color:var(--text-dim);">No topology data available for visualization.</p>';
    return;
  }

  const nodes = graph.nodes;
  const edges = graph.edges || [];

  // Build vulnerability lookup (node_id -> impact count)
  const vulnMap = {};
  (d.vulnerable_nodes || []).forEach(v => { vulnMap[v.node_id] = v.impact; });
  const vulnEdgeMap = {};
  (d.vulnerable_edges || []).forEach(v => { vulnEdgeMap[v.edge_id] = v.failure_count; });
  const maxImpact = Math.max(1, ...Object.values(vulnMap));
  // Redundant pair node IDs (show as protected green)
  const redundantNodes = new Set();
  (d.redundant_pairs || []).forEach(p => {
    // Match by label since we have labels not IDs in pairs
    nodes.forEach(n => { if (n.label === p.a || n.label === p.b) redundantNodes.add(n.id); });
  });
  // Single-link nodes (show as orange warning)
  const singleLinkSet = new Set();
  (d.single_link_nodes || []).forEach(label => {
    nodes.forEach(n => { if (n.label === label) singleLinkSet.add(n.id); });
  });

  // Compute SVG bounds
  const padding = 60;
  let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
  nodes.forEach(n => {
    const x = n.x || 0, y = n.y || 0;
    if (x < minX) minX = x; if (y < minY) minY = y;
    if (x > maxX) maxX = x; if (y > maxY) maxY = y;
  });
  const w = (maxX - minX) + padding * 2 + 120;
  const h = (maxY - minY) + padding * 2 + 80;
  const ox = -minX + padding;
  const oy = -minY + padding;

  // Node position lookup
  const pos = {};
  nodes.forEach(n => { pos[n.id] = { x: (n.x || 0) + ox, y: (n.y || 0) + oy }; });

  let svg = `<svg xmlns="http://www.w3.org/2000/svg" width="${Math.max(w, 400)}" height="${Math.max(h, 300)}" style="font-family:Segoe UI,system-ui,sans-serif;">`;

  // Draw edges
  edges.forEach(e => {
    const s = pos[e.source], t = pos[e.target];
    if (!s || !t) return;
    const fail = vulnEdgeMap[e.id] || 0;
    const ratio = fail / maxImpact;
    const color = fail > 0 ? (ratio > 0.5 ? '#e74c3c' : '#f39c12') : '#2c3e6e';
    const width = fail > 0 ? 3 : 1.5;
    svg += `<line x1="${s.x+55}" y1="${s.y+30}" x2="${t.x+55}" y2="${t.y+30}" stroke="${color}" stroke-width="${width}" opacity="0.7"/>`;
    if (e.label) {
      const mx = (s.x + t.x) / 2 + 55, my = (s.y + t.y) / 2 + 30;
      svg += `<text x="${mx}" y="${my-5}" text-anchor="middle" fill="#7a8cb0" font-size="9">${e.label}</text>`;
    }
  });

  // Draw nodes
  nodes.forEach(n => {
    const p = pos[n.id];
    if (!p) return;
    const impact = vulnMap[n.id] || 0;
    const isRedundant = redundantNodes.has(n.id);
    const isSingleLink = singleLinkSet.has(n.id);
    let fill, stroke, glow = '', statusText = '';

    if (impact > 0) {
      // High impact, no redundancy — RED
      fill = '#3a0f0f'; stroke = '#e74c3c';
      glow = `<rect x="${p.x-2}" y="${p.y-2}" width="114" height="64" rx="10" fill="none" stroke="#e74c3c" stroke-width="2" opacity="0.4"/>`;
      statusText = `${impact} isolated if fails`;
    } else if (isSingleLink) {
      // Single uplink, no redundancy — ORANGE
      fill = '#2b1a0f'; stroke = '#f39c12';
      statusText = 'single link — no redundancy';
    } else if (isRedundant) {
      // Part of a redundant pair — GREEN with marker
      fill = '#0f2b1a'; stroke = '#27ae60';
      statusText = 'redundant pair ✓';
    } else {
      // Normal — dim green
      fill = '#0f1a1a'; stroke = '#2c6e4f';
    }

    svg += glow;
    svg += `<rect x="${p.x}" y="${p.y}" width="110" height="60" rx="8" fill="${fill}" stroke="${stroke}" stroke-width="2"/>`;
    svg += `<text x="${p.x+55}" y="${p.y+22}" text-anchor="middle" fill="${stroke}" font-size="11" font-weight="bold">${n.label || n.id}</text>`;
    svg += `<text x="${p.x+55}" y="${p.y+37}" text-anchor="middle" fill="#7a8cb0" font-size="9">${n.type || ''}</text>`;
    if (statusText) {
      svg += `<text x="${p.x+55}" y="${p.y+52}" text-anchor="middle" fill="${stroke}" font-size="8">${statusText}</text>`;
    }
  });

  svg += '</svg>';
  container.innerHTML = svg;
}

// Auto-run first scenario on initial visit
if (AUTO_RUN) {
  document.addEventListener('DOMContentLoaded', function() {
    document.getElementById('results-panel').style.display = 'block';
    document.getElementById('results-narrative').innerHTML = '<em>Running initial simulation (1000 iterations)...</em>';
    fetch(NC_BASE + '/api/mc/run/' + AUTO_RUN, {
      method: 'POST', headers: {'Content-Type': 'application/json'},
      body: JSON.stringify({iterations: 1000})
    }).then(r => r.json()).then(d => {
      showResults(d);
    }).catch(e => {
      document.getElementById('results-narrative').innerHTML = 'Auto-run failed: ' + e;
    });
  });
}
</script>
{% endblock %}