{% extends "network/base.html" %}
{% block title %}NDC Demo Runner — Network Design Canvas{% endblock %}
{% block content %}
<div class="page-header">
  <div>
    <h1 class="page-title">NDC Demo Runner</h1>
    <p class="page-subtitle">Live DoD/IC network migration demos — EOL Fire Drill · Multi-Cloud Expansion · Compliance Audit</p>
  </div>
  <div class="page-actions">
    <button class="btn btn-primary" onclick="runAllScenarios()" id="run-all-btn">
      <span id="run-all-icon">&#9654;</span> Run All Scenarios
    </button>
  </div>
</div>

<!-- Stat Cards -->
<div class="stats-bar" id="stat-cards">
  <div class="stat-card">
    <div class="stat-value" id="stat-total-runs">{{ runs|length }}</div>
    <div class="stat-label">Total Runs</div>
  </div>
  <div class="stat-card">
    {% if last_run %}
      {% if last_run.status == 'pass' %}
        <div class="stat-value" style="color:#27ae60;" id="stat-last-status">PASS</div>
      {% elif last_run.status == 'partial' %}
        <div class="stat-value" style="color:#f39c12;" id="stat-last-status">PARTIAL</div>
      {% else %}
        <div class="stat-value" style="color:#e74c3c;" id="stat-last-status">FAIL</div>
      {% endif %}
    {% else %}
      <div class="stat-value" id="stat-last-status">—</div>
    {% endif %}
    <div class="stat-label">Last Run</div>
  </div>
  <div class="stat-card">
    {% if last_run %}
      <div class="stat-value" style="color:#3498db;" id="stat-scenarios-passed">{{ last_run.scenarios_passed }}/{{ last_run.scenarios_total }}</div>
    {% else %}
      <div class="stat-value" id="stat-scenarios-passed">—</div>
    {% endif %}
    <div class="stat-label">Scenarios Passed</div>
  </div>
  <div class="stat-card">
    {% if last_run %}
      <div class="stat-value" style="color:#f39c12;" id="stat-elapsed">{{ (last_run.elapsed_ms / 1000)|round(1) }}s</div>
    {% else %}
      <div class="stat-value" id="stat-elapsed">—</div>
    {% endif %}
    <div class="stat-label">Last Duration</div>
  </div>
</div>

<!-- Demo Control Panel -->
<section class="panel panel-wide">
  <div class="panel-header">
    <h2 class="panel-title">Demo Control Panel</h2>
  </div>
  <div style="padding:16px;">
    <!-- Audience Toggle -->
    <div style="margin-bottom:18px;">
      <div style="color:#8099b8;font-size:11px;text-transform:uppercase;letter-spacing:.5px;margin-bottom:8px;">Audience</div>
      <div style="display:flex;gap:8px;">
        <button id="aud-exec" onclick="setAudience('exec')" class="btn btn-primary" style="background:linear-gradient(135deg,#6366f1,#4f46e5);border-color:#6366f1;">
          EXEC &nbsp;<span style="opacity:.8;font-weight:400;">CIO / CISO / PEO</span>
        </button>
        <button id="aud-tech" onclick="setAudience('tech')" class="btn btn-secondary">
          TECH &nbsp;<span style="opacity:.8;font-weight:400;">Network Architect / ISSO</span>
        </button>
      </div>
    </div>

    <!-- Scenario Selector -->
    <div style="margin-bottom:20px;">
      <div style="color:#8099b8;font-size:11px;text-transform:uppercase;letter-spacing:.5px;margin-bottom:8px;">Scenarios</div>
      <div style="display:flex;flex-wrap:wrap;gap:8px;" id="scenario-chips">
        <button id="chip-all" onclick="toggleScenario('all')" class="btn btn-primary" style="border-radius:20px;padding:6px 16px;font-size:12px;">
          All Scenarios
        </button>
        <button id="chip-A" onclick="toggleScenario('A')" class="btn btn-secondary" style="border-radius:20px;padding:6px 14px;font-size:12px;" title="Risk detection → replacement → runbook">
          <span style="color:#e74c3c;">A</span> EOL Fire Drill
        </button>
        <button id="chip-B" onclick="toggleScenario('B')" class="btn btn-secondary" style="border-radius:20px;padding:6px 14px;font-size:12px;" title="Hybrid connectivity overlay">
          <span style="color:#3498db;">B</span> Multi-Cloud Expansion
        </button>
        <button id="chip-C" onclick="toggleScenario('C')" class="btn btn-secondary" style="border-radius:20px;padding:6px 14px;font-size:12px;" title="STIG → remediation → cATO">
          <span style="color:#f39c12;">C</span> Compliance Audit
        </button>
      </div>
    </div>

    <!-- Run Button + Status -->
    <div style="display:flex;align-items:center;gap:16px;">
      <button onclick="runAllScenarios()" id="run-demo-btn" class="btn btn-primary" style="background:linear-gradient(135deg,#27ae60,#219150);">
        &#9654; Run Demo
      </button>
      <div id="run-status" style="font-size:12px;color:#8099b8;"></div>
    </div>
  </div>
</section>

<!-- Results Panel -->
<section class="panel panel-wide" id="results-panel" style="{% if not last_result %}display:none;{% endif %}">
  <div class="panel-header">
    <h2 class="panel-title">Results</h2>
    <div id="results-overall" style="font-size:12px;font-weight:700;"></div>
  </div>
  <div id="scenario-results" style="padding:16px;display:flex;flex-direction:column;gap:10px;">
    {% if last_result %}
      {% for key, val in last_result.items() if val is mapping %}
        {% set sid = key[1:] if key|length == 2 and key[0] == 's' else '' %}
        {% set meta = scenario_meta.get(sid, {}) %}
        <div style="display:grid;grid-template-columns:200px 1fr;gap:12px;align-items:start;background:#081525;border:1px solid #1e3a6e;border-radius:6px;padding:12px 16px;">
          <div>
            {% if val.status == 'pass' %}
              <span style="color:#27ae60;font-size:14px;font-weight:700;">&#10003;</span>
            {% else %}
              <span style="color:#e74c3c;font-size:14px;font-weight:700;">&#10007;</span>
            {% endif %}
            <span style="color:{{ meta.color or '#9bb8d8' }};font-size:13px;font-weight:600;margin-left:6px;">{{ meta.title or key }}</span>
          </div>
          <div style="display:flex;flex-wrap:wrap;gap:8px;">
            {% for mk, mv in val.items() if mk != 'status' and mk != 'elapsed_ms' and mv is not none %}
              <span style="background:#0d1b2e;border:1px solid #1e3a6e;border-radius:4px;padding:3px 8px;font-size:11px;color:#9bb8d8;">
                <span style="color:#8099b8;">{{ mk }}:</span> {{ mv }}
              </span>
            {% endfor %}
          </div>
        </div>
      {% endfor %}
    {% endif %}
  </div>
</section>

<!-- 3-Scenario Flow Diagram -->
<section class="panel panel-wide">
  <div class="panel-header">
    <h2 class="panel-title">Executive Demo Flow (15 min)</h2>
  </div>
  <div style="padding:16px;display:flex;align-items:center;justify-content:center;gap:0;overflow-x:auto;">
    {% set acts = [
      ('A', '#e74c3c', '1:04', 'EOL Fire Drill', 'Risk → Replace<br>→ Runbook'),
      ('B', '#3498db', '1:05', 'Multi-Cloud', 'Hybrid overlay<br>→ Cost attribution'),
      ('C', '#f39c12', '1:06', 'Compliance', 'STIG → Remediate<br>→ cATO ready'),
    ] %}
    {% for sid, color, icon, title, desc in acts %}
    <div style="text-align:center;min-width:130px;" id="act-node-{{ sid }}">
      <div onclick="toggleScenario('{{ sid }}')" style="background:linear-gradient(135deg,#0d1b2e,#081525);border:1px solid {{ color }};border-radius:8px;padding:14px 12px;cursor:pointer;transition:all .2s;"
           onmouseenter="this.style.background='#0d1b2e'" onmouseleave="this.style.background='linear-gradient(135deg,#0d1b2e,#081525)'">
        <div style="font-size:20px;margin-bottom:6px;">{{ icon }}</div>
        <div style="color:{{ color }};font-weight:700;font-size:11px;text-transform:uppercase;letter-spacing:.5px;">{{ title }}</div>
        <div style="color:#8099b8;font-size:10px;margin-top:4px;">{{ desc | safe }}</div>
      </div>
    </div>
    {% if not loop.last %}
    <div style="color:#1e3a6e;font-size:24px;font-weight:700;padding:0 8px;">&#10132;</div>
    {% endif %}
    {% endfor %}
  </div>
</section>

<!-- Run History -->
<section class="panel panel-wide">
  <div class="panel-header">
    <h2 class="panel-title">Run History</h2>
    <button onclick="refreshHistory()" class="btn btn-secondary" style="font-size:11px;padding:4px 12px;">&#8635; Refresh</button>
  </div>
  <div style="padding:16px;" id="history-table-wrap">
    {% if runs %}
    <table class="data-table">
      <thead>
        <tr>
          <th>#</th>
          <th>Date / Time (UTC)</th>
          <th>Audience</th>
          <th>Scenarios</th>
          <th>Status</th>
          <th>Duration</th>
        </tr>
      </thead>
      <tbody id="history-tbody">
        {% for run in runs %}
        <tr>
          <td style="color:#8099b8;">{{ loop.index }}</td>
          <td>{{ run.created_at[:19].replace('T',' ') if run.created_at else '—' }}</td>
          <td>
            {% if run.audience == 'tech' %}
              <span style="background:#1a2e4f;color:#60a5fa;padding:2px 8px;border-radius:10px;font-size:10px;font-weight:600;">TECH</span>
            {% else %}
              <span style="background:#1f1a4f;color:#a78bfa;padding:2px 8px;border-radius:10px;font-size:10px;font-weight:600;">EXEC</span>
            {% endif %}
          </td>
          <td>{{ run.scenarios_passed }}/{{ run.scenarios_total }}</td>
          <td>
            {% if run.status == 'pass' %}
              <span style="color:#27ae60;font-weight:600;">&#10003; PASS</span>
            {% elif run.status == 'partial' %}
              <span style="color:#f39c12;font-weight:600;">~ PARTIAL</span>
            {% else %}
              <span style="color:#e74c3c;font-weight:600;">&#10007; {{ run.status|upper }}</span>
            {% endif %}
          </td>
          <td style="color:#8099b8;">{{ (run.elapsed_ms / 1000)|round(1) }}s</td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
    {% else %}
    <div id="no-history" style="text-align:center;color:#8099b8;padding:32px;">
      No runs yet — click <strong style="color:#a5b4fc;">Run Demo</strong> to execute your first scenario.
    </div>
    {% endif %}
  </div>
</section>

{% include "includes/iqe_query_widget.html" %}
{% endblock %}

{% block scripts %}
<script>
var _audience = 'exec';
var _activeScenarios = new Set();

function setAudience(aud) {
  _audience = aud;
  var exec_btn = document.getElementById('aud-exec');
  var tech_btn = document.getElementById('aud-tech');
  if (aud === 'exec') {
    exec_btn.style.background = 'linear-gradient(135deg,#6366f1,#4f46e5)';
    exec_btn.style.color = '#fff';
    exec_btn.style.borderColor = '#6366f1';
    tech_btn.style.background = '';
    tech_btn.style.color = '';
    tech_btn.style.borderColor = '';
  } else {
    tech_btn.style.background = 'linear-gradient(135deg,#2563eb,#1d4ed8)';
    tech_btn.style.color = '#fff';
    tech_btn.style.borderColor = '#2563eb';
    exec_btn.style.background = '';
    exec_btn.style.color = '';
    exec_btn.style.borderColor = '';
  }
}

function toggleScenario(num) {
  if (num === 'all') {
    _activeScenarios.clear();
    document.getElementById('chip-all').style.background = 'linear-gradient(135deg,#6366f1,#4f46e5)';
    document.getElementById('chip-all').style.color = '#fff';
    document.getElementById('chip-all').style.borderColor = '#6366f1';
    ['A','B','C'].forEach(function(s) {
      var c = document.getElementById('chip-'+s);
      if (c) { c.style.background = ''; c.style.color = ''; c.style.borderColor = ''; }
    });
    return;
  }
  if (_activeScenarios.has(num)) {
    _activeScenarios.delete(num);
  } else {
    _activeScenarios.add(num);
  }

  var allChip = document.getElementById('chip-all');
  if (_activeScenarios.size === 0) {
    allChip.style.background = 'linear-gradient(135deg,#6366f1,#4f46e5)';
    allChip.style.color = '#fff';
    allChip.style.borderColor = '#6366f1';
  } else {
    allChip.style.background = '';
    allChip.style.color = '';
    allChip.style.borderColor = '';
  }

  var colors = {A:'#e74c3c', B:'#3498db', C:'#f39c12'};
  ['A','B','C'].forEach(function(s) {
    var c = document.getElementById('chip-'+s);
    if (!c) return;
    if (_activeScenarios.has(s)) {
      c.style.background = colors[s] + '18';
      c.style.color = colors[s];
      c.style.borderColor = colors[s];
    } else {
      c.style.background = '';
      c.style.color = '';
      c.style.borderColor = '';
    }
  });
}

function runAllScenarios() {
  var btn = document.getElementById('run-demo-btn');
  var allBtn = document.getElementById('run-all-btn');
  var statusDiv = document.getElementById('run-status');
  btn.disabled = true;
  allBtn.disabled = true;
  btn.style.opacity = '0.6';
  allBtn.style.opacity = '0.6';
  document.getElementById('run-all-icon').textContent = '⟳';
  statusDiv.textContent = 'Running scenarios...';
  statusDiv.style.color = '#f39c12';

  var scenarios_val = _activeScenarios.size > 0 ? Array.from(_activeScenarios) : 'all';

  fetch(NC_BASE + '/api/demo-run', {
    method: 'POST',
    headers: {'Content-Type': 'application/json'},
    body: JSON.stringify({audience: _audience, scenarios: scenarios_val})
  })
  .then(function(r){ return r.json(); })
  .then(function(data){
    btn.disabled = false;
    allBtn.disabled = false;
    btn.style.opacity = '1';
    allBtn.style.opacity = '1';
    document.getElementById('run-all-icon').textContent = '▶';

    if (data.status === 'pass') {
      statusDiv.textContent = '✓ ' + data.scenarios_passed + '/' + data.scenarios_total + ' passed in ' + (data.elapsed_ms/1000).toFixed(1) + 's';
      statusDiv.style.color = '#27ae60';
    } else if (data.status === 'partial') {
      statusDiv.textContent = '~ ' + data.scenarios_passed + '/' + data.scenarios_total + ' passed';
      statusDiv.style.color = '#f39c12';
    } else {
      statusDiv.textContent = '✗ Run failed — ' + (data.results && data.results.error ? data.results.error : 'see console');
      statusDiv.style.color = '#e74c3c';
    }

    renderResults(data.results, data.scenarios_passed, data.scenarios_total, data.elapsed_ms, data.status, data.scenario_meta);
    updateStatCards(data);
    refreshHistory();
  })
  .catch(function(err){
    btn.disabled = false;
    allBtn.disabled = false;
    btn.style.opacity = '1';
    allBtn.style.opacity = '1';
    document.getElementById('run-all-icon').textContent = '▶';
    statusDiv.textContent = '✗ Request error: ' + err;
    statusDiv.style.color = '#e74c3c';
  });
}

var SCENARIO_META = {
  A: {title:'EOL Fire Drill',       color:'#e74c3c'},
  B: {title:'Multi-Cloud Expansion', color:'#3498db'},
  C: {title:'Compliance Audit',      color:'#f39c12'},
};

function renderResults(results, passed, total, elapsed_ms, status, meta) {
  var panel = document.getElementById('results-panel');
  var container = document.getElementById('scenario-results');
  var overall = document.getElementById('results-overall');

  if (!results || typeof results !== 'object') { panel.style.display='none'; return; }

  overall.textContent = passed + '/' + total + ' passed — ' + (elapsed_ms/1000).toFixed(1) + 's';
  overall.style.color = status === 'pass' ? '#27ae60' : status === 'partial' ? '#f39c12' : '#e74c3c';

  container.innerHTML = '';
  var scenarioOrder = ['sA','sB','sC'];
  scenarioOrder.forEach(function(key) {
    var val = results[key];
    if (!val || typeof val !== 'object') return;
    var sid = key.slice(1);
    var scenMeta = meta && meta[sid] ? meta[sid] : SCENARIO_META[sid] || {};
    var color = scenMeta.color || '#9bb8d8';
    var title = scenMeta.title || key;
    var icon = val.status === 'pass'
      ? '<span style="color:#27ae60;font-size:14px;font-weight:700;">✓</span>'
      : '<span style="color:#e74c3c;font-size:14px;font-weight:700;">✗</span>';
    var metrics = '';
    for (var mk in val) {
      if (mk === 'status' || mk === 'elapsed_ms') continue;
      if (val[mk] === null || val[mk] === undefined) continue;
      metrics += '<span style="background:#0d1b2e;border:1px solid #1e3a6e;border-radius:4px;padding:3px 8px;font-size:11px;color:#9bb8d8;white-space:nowrap;">' +
                 '<span style="color:#8099b8;">'+mk+':</span> '+val[mk]+'</span>';
    }
    container.innerHTML += '<div style="display:grid;grid-template-columns:200px 1fr;gap:12px;align-items:start;background:#081525;border:1px solid #1e3a6e;border-radius:6px;padding:12px 16px;">' +
      '<div>'+icon+'<span style="color:'+color+';font-size:13px;font-weight:600;margin-left:6px;">'+title+'</span></div>' +
      '<div style="display:flex;flex-wrap:wrap;gap:8px;">'+metrics+'</div></div>';
  });

  panel.style.display = '';
}

function updateStatCards(data) {
  var total_el = document.getElementById('stat-total-runs');
  var status_el = document.getElementById('stat-last-status');
  var passed_el = document.getElementById('stat-scenarios-passed');
  var elapsed_el = document.getElementById('stat-elapsed');
  if (total_el) total_el.textContent = parseInt(total_el.textContent||0) + 1;
  if (status_el) {
    status_el.textContent = data.status.toUpperCase();
    status_el.style.color = data.status==='pass' ? '#27ae60' : data.status==='partial' ? '#f39c12' : '#e74c3c';
  }
  if (passed_el) passed_el.textContent = data.scenarios_passed + '/' + data.scenarios_total;
  if (elapsed_el) elapsed_el.textContent = (data.elapsed_ms/1000).toFixed(1) + 's';
}

function refreshHistory() {
  fetch(NC_BASE + '/api/demo-runs?limit=15')
  .then(function(r){ return r.json(); })
  .then(function(runs){
    var tbody = document.getElementById('history-tbody');
    var noHist = document.getElementById('no-history');
    if (!runs || runs.length === 0) {
      if (noHist) noHist.style.display='';
      if (tbody) tbody.innerHTML='';
      return;
    }
    if (noHist) noHist.style.display='none';
    if (!tbody) {
      var wrap = document.getElementById('history-table-wrap');
      wrap.innerHTML = '<table class="data-table"><thead><tr><th>#</th><th>Date / Time (UTC)</th><th>Audience</th><th>Scenarios</th><th>Status</th><th>Duration</th></tr></thead><tbody id="history-tbody"></tbody></table>';
      tbody = document.getElementById('history-tbody');
    }
    tbody.innerHTML = runs.map(function(run, i) {
      var aud = run.audience === 'tech'
        ? '<span style="background:#1a2e4f;color:#60a5fa;padding:2px 8px;border-radius:10px;font-size:10px;font-weight:600;">TECH</span>'
        : '<span style="background:#1f1a4f;color:#a78bfa;padding:2px 8px;border-radius:10px;font-size:10px;font-weight:600;">EXEC</span>';
      var st = run.status === 'pass'
        ? '<span style="color:#27ae60;font-weight:600;">✓ PASS</span>'
        : run.status === 'partial'
        ? '<span style="color:#f39c12;font-weight:600;">~ PARTIAL</span>'
        : '<span style="color:#e74c3c;font-weight:600;">✗ '+(run.status||'FAIL').toUpperCase()+'</span>';
      var ts = (run.created_at||'').slice(0,19).replace('T',' ');
      var dur = ((run.elapsed_ms||0)/1000).toFixed(1)+'s';
      return '<tr>' +
        '<td style="color:#8099b8;">'+(i+1)+'</td>' +
        '<td>'+ts+'</td>' +
        '<td>'+aud+'</td>' +
        '<td>'+(run.scenarios_passed||0)+'/'+(run.scenarios_total||0)+'</td>' +
        '<td>'+st+'</td>' +
        '<td style="color:#8099b8;">'+dur+'</td></tr>';
    }).join('');
  })
  .catch(function(){});
}
</script>
{% endblock %}