{% extends "network/base.html" %}
{% block title %}What-If Simulator — Network Design Canvas{% endblock %}
{% block content %}
<div class="page-header">
  <div>
    <h1 class="page-title">What-If Simulator</h1>
    <p class="page-subtitle">Simulate link failures, device outages, and new links using real routing data</p>
  </div>
</div>

<div class="dashboard-grid">
  <div>
    <!-- Link Failure -->
    <section class="panel panel-wide">
      <div class="panel-header"><h2 class="panel-title">Link Failure Simulation</h2></div>
      <div style="padding:12px;">
        <div class="form-grid">
          <label>Source Device IP <input id="lf-src" placeholder="e.g., 10.0.0.1"></label>
          <label>Target Device IP <input id="lf-dst" placeholder="e.g., 10.0.0.2"></label>
        </div>
        <button class="btn btn-primary" style="margin-top:8px;" onclick="runLinkFailure()">Simulate Link Failure</button>
        <div id="lf-result" style="margin-top:12px;"></div>
      </div>
    </section>

    <!-- Device Failure -->
    <section class="panel panel-wide" style="margin-top:16px;">
      <div class="panel-header"><h2 class="panel-title">Device Failure Simulation</h2></div>
      <div style="padding:12px;">
        <label>Failed Device IP <input id="df-ip" placeholder="e.g., 10.0.0.1" style="width:200px;background:var(--bg3);color:var(--text);border:1px solid var(--border);padding:4px 8px;border-radius:4px;"></label>
        <button class="btn btn-primary" style="margin-top:8px;" onclick="runDeviceFailure()">Simulate Device Failure</button>
        <div id="df-result" style="margin-top:12px;"></div>
      </div>
    </section>

    <!-- Add Link -->
    <section class="panel panel-wide" style="margin-top:16px;">
      <div class="panel-header"><h2 class="panel-title">Add Link Simulation</h2></div>
      <div style="padding:12px;">
        <div class="form-grid">
          <label>Source Device <input id="al-src" placeholder="e.g., 10.0.0.1"></label>
          <label>Target Device <input id="al-dst" placeholder="e.g., 10.0.0.2"></label>
          <label>Protocol <select id="al-proto"><option>ospf</option><option>bgp</option><option>eigrp</option><option>static</option></select></label>
          <label>Metric <input id="al-metric" type="number" value="10"></label>
        </div>
        <button class="btn btn-primary" style="margin-top:8px;" onclick="runAddLink()">Simulate New Link</button>
        <div id="al-result" style="margin-top:12px;"></div>
      </div>
    </section>
  </div>

  <div class="panel-stack">
    <section class="panel">
      <div class="panel-header"><h2 class="panel-title">How It Works</h2></div>
      <div style="padding:12px;font-size:12px;color:var(--text-dim);">
        <p>Simulations use <strong>real routing table data</strong> collected from your network devices.</p>
        <p>To populate data, use the <a href="/network/discovery">Discovery</a> tool or store routing entries via the API.</p>
        <ul style="margin-top:8px;">
          <li><strong>Link Failure</strong> — Shows which prefixes lose reachability and which have alternate paths</li>
          <li><strong>Device Failure</strong> — Shows all devices that route through the failed device</li>
          <li><strong>Add Link</strong> — Predicts routing improvements from a proposed new connection</li>
        </ul>
      </div>
    </section>
  </div>
</div>
{% endblock %}
{% block scripts %}
<script>
async function runLinkFailure() {
  const el = document.getElementById('lf-result');
  el.innerHTML = 'Simulating...';
  const d = await fetch(NC_BASE + '/api/what-if/link-failure', {method:'POST', headers:{'Content-Type':'application/json'},
    body: JSON.stringify({source_device: document.getElementById('lf-src').value, target_device: document.getElementById('lf-dst').value})}).then(r => r.json());
  if (d.error) { el.innerHTML = '<span style="color:var(--danger);">' + d.error + '</span>'; return; }
  el.innerHTML = `<div style="font-size:13px;font-weight:600;margin-bottom:8px;">${d.scenario}</div>
    <div style="display:flex;gap:12px;">
      <div class="health-pill ${d.total_affected > 0 ? 'pill-red' : 'pill-green'}">${d.total_affected} affected (no alternate)</div>
      <div class="health-pill pill-blue">${d.total_surviving} surviving (has alternate)</div>
      <div class="health-pill ${d.has_full_redundancy ? 'pill-green' : 'pill-yellow'}">${d.has_full_redundancy ? 'FULLY REDUNDANT' : 'PARTIAL IMPACT'}</div>
    </div>
    ${d.affected_prefixes.length ? '<div style="margin-top:8px;"><strong style="color:var(--danger);">Lost prefixes:</strong>' + d.affected_prefixes.map(p => '<div class="impact-item impact-direct">' + p.prefix + ' (' + p.protocol + ')</div>').join('') + '</div>' : ''}
    ${d.surviving_prefixes.length ? '<div style="margin-top:8px;"><strong style="color:var(--success);">Surviving (alternate path):</strong>' + d.surviving_prefixes.map(p => '<div class="impact-item impact-indirect">' + p.prefix + ' via ' + p.alternates.map(a => a.next_hop).join(', ') + '</div>').join('') + '</div>' : ''}`;
}

async function runDeviceFailure() {
  const el = document.getElementById('df-result');
  el.innerHTML = 'Simulating...';
  const d = await fetch(NC_BASE + '/api/what-if/device-failure', {method:'POST', headers:{'Content-Type':'application/json'},
    body: JSON.stringify({device_ip: document.getElementById('df-ip').value})}).then(r => r.json());
  if (d.error) { el.innerHTML = '<span style="color:var(--danger);">' + d.error + '</span>'; return; }
  el.innerHTML = `<div style="font-size:13px;font-weight:600;margin-bottom:8px;">${d.scenario}</div>
    <div style="display:flex;gap:12px;">
      <div class="health-pill pill-red">${d.total_impacted_devices} impacted devices</div>
      <div class="health-pill pill-yellow">${d.total_hosted_lost} hosted prefixes lost</div>
    </div>
    ${d.impacted_devices.map(dev => '<div class="impact-item impact-direct"><strong>' + dev.hostname + '</strong> (' + dev.device_ip + ') — loses ' + dev.lost_prefixes.length + ' prefix(es)</div>').join('')}`;
}

async function runAddLink() {
  const el = document.getElementById('al-result');
  el.innerHTML = 'Simulating...';
  const d = await fetch(NC_BASE + '/api/what-if/add-link', {method:'POST', headers:{'Content-Type':'application/json'},
    body: JSON.stringify({source_device: document.getElementById('al-src').value, target_device: document.getElementById('al-dst').value,
      protocol: document.getElementById('al-proto').value, metric: parseInt(document.getElementById('al-metric').value) || 10})}).then(r => r.json());
  if (d.error) { el.innerHTML = '<span style="color:var(--danger);">' + d.error + '</span>'; return; }
  el.innerHTML = `<div style="font-size:13px;font-weight:600;margin-bottom:8px;">${d.scenario}</div>
    <div style="display:flex;gap:12px;">
      <div class="health-pill pill-green">${d.new_reachability} new reachability</div>
      <div class="health-pill pill-blue">${d.better_metric} better metric</div>
      <div class="health-pill pill-yellow">${d.redundant_paths} redundant paths</div>
    </div>`;
}
</script>
{% endblock %}