{% extends "network/base.html" %}
{% block title %}Dashboard — Network Design Canvas{% endblock %}

{% block content %}
<div class="page-header">
  <div>
    <h1 class="page-title">Network Design Canvas</h1>
    <p class="page-subtitle">Enterprise topology design, simulation, and export</p>
  </div>
  <div class="page-actions">
    <button class="btn btn-primary" onclick="document.getElementById('import-wizard').style.display='flex'" style="font-size:14px;padding:8px 18px;">Import Diagram</button>
    <a href="/network/canvas/new" class="btn btn-secondary">+ Blank Canvas</a>
    <a href="/network/templates" class="btn btn-secondary">Templates</a>
  </div>
</div>

<!-- Morning Dashboard -->
<div id="morning-dashboard" style="margin-bottom:20px;"></div>

<!-- Project Filter Bar -->
{% if all_projects %}
<div class="project-filter-bar">
  <label>Project:</label>
  <select onchange="filterByProject(this.value)">
    <option value="">All Topologies</option>
    {% for proj in all_projects %}
    <option value="{{ proj.id }}" {% if filter_project == proj.id %}selected{% endif %}>{{ proj.name }}</option>
    {% endfor %}
  </select>
  {% if active_project %}
  <span class="filter-active">Showing: {{ active_project.name }}</span>
  <button class="btn-clear-filter" onclick="filterByProject('')">Clear Filter</button>
  {% endif %}
</div>
{% endif %}

<!-- Stats Bar -->
<div class="stats-bar">
  <div class="stat-card">
    <div class="stat-value">{{ stats.topologies }}</div>
    <div class="stat-label">Topologies</div>
  </div>
  <div class="stat-card">
    <div class="stat-value">{{ stats.simulations }}</div>
    <div class="stat-label">Simulations Run</div>
  </div>
  <div class="stat-card">
    <div class="stat-value">{{ stats.templates }}</div>
    <div class="stat-label">Templates Available</div>
  </div>
  <div class="stat-card">
    <div class="stat-value">12</div>
    <div class="stat-label">Object Types</div>
  </div>
</div>

<div class="dashboard-grid">
  <!-- Recent Topologies -->
  <section class="panel panel-wide">
    <div class="panel-header">
      <h2 class="panel-title">Recent Topologies</h2>
      {% if topologies %}<button class="btn btn-secondary" style="font-size:0.75rem;padding:3px 10px;" onclick="clearAllTopos()">Clear All</button>{% endif %}
    </div>
    {% if topologies %}
    <table class="data-table">
      <thead>
        <tr>
          <th>Name</th>
          <th>Classification</th>
          <th>Nodes</th>
          <th>Links</th>
          <th>Last Updated</th>
          <th>Actions</th>
        </tr>
      </thead>
      <tbody>
        {% for t in topologies %}
        <tr>
          <td>
            <a href="/network/canvas/{{ t.id }}" class="table-link">{{ t.name }}</a>
            {% if t.description %}<div class="table-sub">{{ t.description[:60] }}</div>{% endif %}
          </td>
          <td><span class="badge badge-{{ t.classification }}">{{ t.classification }}</span></td>
          <td>{{ t.node_count or 0 }}</td>
          <td>{{ t.edge_count or 0 }}</td>
          <td class="ts">{{ t.updated_at[:16].replace('T',' ') if t.updated_at else '—' }}</td>
          <td class="actions">
            <a href="/network/canvas/{{ t.id }}" class="action-btn" title="Open">✏</a>
            <a href="/network/versions/{{ t.id }}" class="action-btn" title="Phase diagram / versions">V</a>
            <a href="/network/montecarlo/{{ t.id }}" class="action-btn" title="Monte Carlo simulation">MC</a>
            <a href="/network/compliance/{{ t.id }}" class="action-btn" title="Compliance audit" style="color:#f39c12;">C</a>
            <button class="action-btn" title="Quick simulate" onclick="simulateTopology('{{ t.id }}')">▶</button>
            <button class="action-btn" title="Export" onclick="exportTopology('{{ t.id }}')">⬇</button>
            <button class="action-btn danger" title="Delete" onclick="deleteTopology('{{ t.id }}','{{ t.name }}')">✕</button>
          </td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
    {% else %}
    <div class="empty-state">
      <div class="empty-icon">⬡</div>
      <p>No topologies yet. <a href="/network/canvas/new">Create your first topology</a> or <a href="/network/templates">start from a template</a>.</p>
    </div>
    {% endif %}
  </section>

  <!-- Right Column -->
  <div class="panel-stack">

    <!-- Quick Templates -->
    <section class="panel">
      <div class="panel-header">
        <h2 class="panel-title">Quick Templates</h2>
        <a href="/network/templates" class="panel-link">View all →</a>
      </div>
      <div class="template-grid-mini">
        {% for t in templates %}
        <div class="template-card-mini">
          <div class="tpl-cat">{{ t.category }}</div>
          <div class="tpl-name">{{ t.name }}</div>
          <button class="btn btn-sm btn-outline" onclick="loadTemplate('{{ t.id }}')">Load</button>
        </div>
        {% endfor %}
      </div>
    </section>

    <!-- Recent Simulations -->
    <section class="panel">
      <div class="panel-header">
        <h2 class="panel-title">Recent Simulations</h2>
        {% if simulations %}<button class="btn btn-secondary" style="font-size:0.75rem;padding:3px 10px;" onclick="clearAllSims()">Clear All</button>{% endif %}
      </div>
      {% if simulations %}
      <div class="sim-list">
        {% for s in simulations %}
        <div class="sim-item">
          <div class="sim-meta">
            <span class="sim-type badge-sim-{{ s.sim_type }}">{{ s.sim_type.upper() }}</span>
            <span class="sim-topo">{{ s.topology_name }}</span>
          </div>
          <div class="sim-summary">{{ s.summary }}</div>
          <div class="sim-ts">{{ s.ran_at[:16].replace('T',' ') if s.ran_at else '' }}</div>
        </div>
        {% endfor %}
      </div>
      {% else %}
      <p class="empty-text">No simulations yet. Open a topology and click Simulate.</p>
      {% endif %}
    </section>

  </div><!-- end panel-stack -->
</div><!-- end dashboard-grid -->

<!-- Simulate Modal -->
<div id="sim-modal" class="modal hidden">
  <div class="modal-box">
    <h3>Run Simulation</h3>
    <input type="hidden" id="sim-topo-id"/>
    <div class="form-group">
      <label>Simulation Type</label>
      <select id="sim-type" class="form-control">
        <option value="ping">Ping (reachability)</option>
        <option value="traceroute">Traceroute (path)</option>
        <option value="spof">SPOF Analysis</option>
        <option value="failover">Failover / Resilience</option>
        <option value="load">Load Heatmap</option>
      </select>
    </div>
    <div class="modal-actions">
      <button class="btn btn-primary" onclick="runSim()">Run</button>
      <button class="btn btn-secondary" onclick="closeModal('sim-modal')">Cancel</button>
    </div>
    <div id="sim-result" class="sim-result-box hidden"></div>
  </div>
</div>

<!-- Export Modal -->
<div id="export-modal" class="modal hidden">
  <div class="modal-box">
    <h3>Export Topology</h3>
    <input type="hidden" id="export-topo-id"/>
    <div class="form-group">
      <label>Format</label>
      <select id="export-format" class="form-control">
        <option value="drawio">draw.io XML (.drawio)</option>
        <option value="svg">SVG Image (.svg)</option>
        <option value="ansible">Ansible Inventory (.ini)</option>
        <option value="terraform">Terraform HCL (.tf)</option>
      </select>
    </div>
    <div class="modal-actions">
      <button class="btn btn-primary" onclick="runExport()">Export</button>
      <button class="btn btn-secondary" onclick="closeModal('export-modal')">Cancel</button>
    </div>
  </div>
</div>
<!-- Import & Enrich Wizard -->
<div id="import-wizard" style="display:none;position:fixed;inset:0;background:rgba(0,0,0,0.8);z-index:9999;align-items:center;justify-content:center;">
  <div style="background:#ffffff;color:#222;border:2px solid #4a90d9;border-radius:12px;padding:28px;max-width:560px;width:95%;box-shadow:0 12px 60px rgba(0,0,0,0.8);">
    <h2 style="margin:0 0 4px;font-size:18px;color:#1a1a2e;">Import Network Diagram</h2>
    <p style="font-size:12px;color:#666;margin:0 0 20px;">Upload a diagram file. It will be automatically ingested, classified, enriched with site grouping and rack infrastructure, then opened in the canvas.</p>

    <form id="import-wizard-form" enctype="multipart/form-data">
      <!-- Step 1: File -->
      <div style="margin-bottom:16px;">
        <label style="font-weight:600;font-size:13px;display:block;margin-bottom:4px;color:#333;">Diagram File</label>
        <input type="file" name="file" accept=".vsdx,.vdx,.drawio,.xml,.pdf,.png,.jpg,.jpeg" required
               style="width:100%;padding:10px;border:2px dashed #ccc;border-radius:8px;background:#f8f9fa;cursor:pointer;color:#333;">
        <div style="font-size:11px;color:#888;margin-top:6px;">Supports: Visio (.vsdx/.vdx), Draw.io (.drawio/.xml), PDF, Images (PNG/JPG)</div>
      </div>

      <!-- Step 2: Name -->
      <div style="margin-bottom:16px;">
        <label style="font-weight:600;font-size:13px;display:block;margin-bottom:4px;color:#333;">Topology Name</label>
        <input type="text" name="name" placeholder="e.g., NYC Data Center - Phase 2" style="width:100%;padding:8px 12px;border:1px solid #ccc;border-radius:6px;background:#fff;color:#333;font-size:13px;">
      </div>

      <!-- Step 3: Options -->
      <div style="display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:16px;">
        <label style="display:flex;align-items:center;gap:6px;font-size:12px;color:#444;">
          <input type="checkbox" name="enrich" checked> Auto-enrich (site groups, rack infra)
        </label>
        <label style="display:flex;align-items:center;gap:6px;font-size:12px;color:#444;">
          <input type="checkbox" name="save_template"> Save as template
        </label>
      </div>

      <!-- Progress -->
      <div id="import-progress" style="display:none;margin-bottom:16px;">
        <div id="import-step" style="font-size:12px;color:#555;margin-bottom:4px;"></div>
        <div style="height:6px;background:#e0e0e0;border-radius:3px;overflow:hidden;">
          <div id="import-bar" style="height:100%;background:#4a90d9;border-radius:3px;width:0%;transition:width 0.4s;"></div>
        </div>
      </div>

      <!-- Result -->
      <div id="import-result" style="display:none;margin-bottom:16px;padding:12px;border-radius:8px;font-size:12px;"></div>

      <div style="display:flex;gap:8px;justify-content:flex-end;">
        <button type="button" style="padding:8px 20px;border:1px solid #ccc;border-radius:6px;background:#f5f5f5;color:#333;cursor:pointer;font-size:13px;" onclick="document.getElementById('import-wizard').style.display='none'">Cancel</button>
        <button type="submit" style="padding:8px 20px;border:none;border-radius:6px;background:#4a90d9;color:#fff;cursor:pointer;font-size:13px;font-weight:600;" id="import-submit-btn">Import & Open</button>
      </div>
    </form>
  </div>
</div>
{% endblock %}

{% block scripts %}
<script>
function simulateTopology(id) {
  document.getElementById('sim-topo-id').value = id;
  document.getElementById('sim-result').classList.add('hidden');
  document.getElementById('sim-modal').classList.remove('hidden');
}

async function runSim() {
  const id = document.getElementById('sim-topo-id').value;
  const simType = document.getElementById('sim-type').value;
  const resultBox = document.getElementById('sim-result');
  resultBox.textContent = 'Running...';
  resultBox.classList.remove('hidden');
  try {
    const r = await fetch(NC_BASE + `/api/topologies/${id}/simulate`, {
      method: 'POST',
      headers: {'Content-Type': 'application/json'},
      body: JSON.stringify({sim_type: simType})
    });
    const data = await r.json();
    resultBox.innerHTML = `<strong>Result:</strong> ${data.result?.summary || JSON.stringify(data.result)}`;
    setTimeout(() => location.reload(), 2000);
  } catch(e) {
    resultBox.textContent = 'Error: ' + e.message;
  }
}

function exportTopology(id) {
  document.getElementById('export-topo-id').value = id;
  document.getElementById('export-modal').classList.remove('hidden');
}

async function runExport() {
  const id = document.getElementById('export-topo-id').value;
  const fmt = document.getElementById('export-format').value;
  // Ansible and Terraform use dedicated endpoints
  const url = (fmt === 'ansible' || fmt === 'terraform')
    ? NC_BASE + `/api/export/${id}/${fmt}`
    : NC_BASE + `/api/export/${id}`;
  const body = (fmt === 'ansible' || fmt === 'terraform') ? '{}' : JSON.stringify({format: fmt});
  const r = await fetch(url, {
    method: 'POST',
    headers: {'Content-Type': 'application/json'},
    body
  });
  const data = await r.json();
  if (data.error) { alert('Export failed: ' + data.error); return; }
  const blob = new Blob([data.content], {type: 'text/plain'});
  const a = document.createElement('a');
  a.href = URL.createObjectURL(blob);
  a.download = data.filename;
  a.click();
  closeModal('export-modal');
}

async function deleteTopology(id, name) {
  if (!confirm(`Delete "${name}"? This cannot be undone.`)) return;
  const r = await fetch(NC_BASE + `/api/topologies/${id}`, {method: 'DELETE'});
  if (r.ok) location.reload();
  else alert('Delete failed');
}

async function loadTemplate(id) {
  const r = await fetch(NC_BASE + `/api/templates/${id}/load`, {method: 'POST'});
  const data = await r.json();
  if (data.redirect) window.location.href = data.redirect;
}

function closeModal(id) {
  document.getElementById(id).classList.add('hidden');
}

// Close modal on backdrop click
document.querySelectorAll('.modal').forEach(m => {
  m.addEventListener('click', e => { if (e.target === m) m.classList.add('hidden'); });
});

function clearAllTopos() {
  if (!confirm('Delete ALL topologies and related data (versions, simulations, groups)? This cannot be undone.')) return;
  fetch(NC_BASE + '/api/topologies/clear-all', {method: 'DELETE'}).then(() => location.reload());
}
function clearAllSims() {
  if (!confirm('Delete ALL simulation results and scenarios? This cannot be undone.')) return;
  fetch(NC_BASE + '/api/simulations/clear-all', {method: 'DELETE'}).then(() => location.reload());
}

// ── Import & Enrich Wizard ─────────────────────────────────────────────
document.getElementById('import-wizard-form').addEventListener('submit', async function(e) {
  e.preventDefault();
  const form = e.target;
  const submitBtn = document.getElementById('import-submit-btn');
  const progress = document.getElementById('import-progress');
  const stepEl = document.getElementById('import-step');
  const bar = document.getElementById('import-bar');
  const resultEl = document.getElementById('import-result');

  submitBtn.disabled = true;
  submitBtn.textContent = 'Processing...';
  progress.style.display = 'block';
  resultEl.style.display = 'none';

  function step(msg, pct) { stepEl.textContent = msg; bar.style.width = pct + '%'; }

  try {
    // Single combined API call: ingest + enrich + validate
    step('Uploading and processing diagram...', 20);
    const fd = new FormData(form);
    fd.append('project_id', 'ndc-network-intelligence');
    fd.append('enrich', form.querySelector('[name="enrich"]').checked ? 'true' : 'false');
    fd.append('save_template', form.querySelector('[name="save_template"]').checked ? 'true' : 'false');

    const r1 = await fetch(NC_BASE + '/api/import-wizard', {method: 'POST', body: fd});
    const ct = r1.headers.get('content-type') || '';
    if (!ct.includes('json')) throw new Error('Server returned non-JSON (status ' + r1.status + ')');
    const d = await r1.json();
    if (d.error) throw new Error(d.error);

    step('Ingested: ' + d.node_count + ' devices, ' + d.edge_count + ' links', 50);

    // Show enrichment results
    var enrichInfo = d.enrichment || {};
    var valInfo = d.validation || {};
    if (enrichInfo.groups_added || enrichInfo.facilities_created || enrichInfo.racks_created) {
      var eMsg = [];
      if (enrichInfo.groups_added) eMsg.push(enrichInfo.groups_added + ' site groups');
      if (enrichInfo.facilities_created) eMsg.push(enrichInfo.facilities_created + ' facilities');
      if (enrichInfo.racks_created) eMsg.push(enrichInfo.racks_created + ' racks (with PDU/UPS/PP)');
      step('Enriched: ' + eMsg.join(', '), 70);
    }

    // Show validation results
    var valMsg = (valInfo.issues_found || 0) + ' issues checked';
    if (valInfo.fixes_applied > 0) valMsg += ', ' + valInfo.fixes_applied + ' auto-fixed';
    step('Validated: ' + valMsg + (valInfo.passed ? ' \u2714' : ''), 90);

    step('\u2705 Complete! Opening canvas...', 100);
    resultEl.style.display = 'block';
    resultEl.style.background = 'rgba(67,160,71,0.1)';
    resultEl.style.border = '1px solid #43a047';
    var summary = '<strong style="color:#43a047;">\u2705 Import Successful</strong><br>';
    summary += d.node_count + ' devices, ' + d.edge_count + ' links';
    if (enrichInfo.groups_added) summary += ' &bull; ' + enrichInfo.groups_added + ' site groups';
    if (enrichInfo.racks_created) summary += ' &bull; ' + enrichInfo.racks_created + ' racks created';
    if (valInfo.fixes_applied > 0) summary += ' &bull; ' + valInfo.fixes_applied + ' types fixed';
    else summary += ' &bull; All types valid';
    if (d.template) summary += ' &bull; Template saved';
    summary += '<br><span style="color:#888;">Redirecting to canvas...</span>';
    resultEl.innerHTML = summary;

    // Open canvas
    setTimeout(function() {
      window.location.href = '/network/canvas/' + d.topology_id;
    }, 2000);

  } catch(err) {
    step('Error', 100);
    bar.style.background = '#e53935';
    resultEl.style.display = 'block';
    resultEl.style.background = 'rgba(229,57,53,0.1)';
    resultEl.style.border = '1px solid #e53935';
    resultEl.innerHTML = '<strong style="color:#e53935;">Error:</strong> ' + err.message;
    submitBtn.disabled = false;
    submitBtn.textContent = 'Import & Open';
  }
});

// Close wizard on backdrop click
document.getElementById('import-wizard').addEventListener('click', function(e) {
  if (e.target === this) this.style.display = 'none';
});

function filterByProject(pid) {
  if (pid) window.location.href = NC_BASE + '/?project=' + pid;
  else window.location.href = NC_BASE + '/';
}

// Morning Dashboard
async function loadMorningDashboard() {
  try {
    const r = await fetch(NC_BASE + '/api/morning-dashboard');
    const d = await r.json();
    const s = d.stats || {};
    const el = document.getElementById('morning-dashboard');

    let html = '<div class="stats-bar" style="margin-bottom:12px;">';
    html += `<div class="stat-card"><div class="stat-value">${s.total_projects}</div><div class="stat-label">Projects</div></div>`;
    html += `<div class="stat-card"><div class="stat-value">${s.total_topologies}</div><div class="stat-label">Topologies</div></div>`;
    html += `<div class="stat-card"><div class="stat-value">${s.active_peering}</div><div class="stat-label">Active Peering</div></div>`;
    html += `<div class="stat-card"><div class="stat-value ${s.pending_reviews > 0 ? 'text-warning' : ''}">${s.pending_reviews}</div><div class="stat-label">Pending Reviews</div></div>`;
    html += `<div class="stat-card"><div class="stat-value ${s.compliance_alerts > 0 ? 'text-danger' : 'text-success'}">${s.compliance_alerts}</div><div class="stat-label">Compliance Alerts</div></div>`;
    html += `<div class="stat-card"><div class="stat-value ${s.eol_alerts > 0 ? 'text-warning' : ''}">${s.eol_alerts}</div><div class="stat-label">EOL Alerts</div></div>`;
    html += '</div>';

    // Alerts row
    const hasAlerts = d.pending_reviews.length || d.compliance_alerts.length || d.eol_alerts.length;
    if (hasAlerts) {
      html += '<div class="dashboard-grid" style="margin-bottom:16px;">';

      // Pending reviews
      if (d.pending_reviews.length) {
        html += '<section class="panel"><div class="panel-header"><h2 class="panel-title" style="color:var(--warning);">Pending Reviews</h2></div><div style="padding:8px;">';
        d.pending_reviews.forEach(r => {
          html += `<div style="padding:4px 0;border-bottom:1px solid var(--border);font-size:12px;"><span class="health-pill pill-yellow">${r.board}</span> <a href="${NC_BASE}/projects">${r.project_name}</a> <span style="color:var(--text-dim);">Phase ${r.phase}${r.scheduled_date ? ' — ' + r.scheduled_date : ''}</span></div>`;
        });
        html += '</div></section>';
      }

      // Compliance + EOL alerts combined
      html += '<div class="panel-stack">';
      if (d.compliance_alerts.length) {
        html += '<section class="panel"><div class="panel-header"><h2 class="panel-title" style="color:var(--danger);">Compliance Below 80%</h2></div><div style="padding:8px;">';
        d.compliance_alerts.forEach(a => {
          html += `<div style="padding:3px 0;font-size:12px;"><a href="${NC_BASE}/projects/${a.project_id}">${a.project}</a> — <span class="health-pill pill-red">${a.compliance_pct}%</span></div>`;
        });
        html += '</div></section>';
      }
      if (d.eol_alerts.length) {
        html += '<section class="panel"><div class="panel-header"><h2 class="panel-title" style="color:var(--warning);">Approaching EOL</h2></div><div style="padding:8px;">';
        d.eol_alerts.slice(0, 5).forEach(a => {
          const color = a.past_eol ? 'pill-red' : a.months_remaining <= 6 ? 'pill-yellow' : 'pill-blue';
          html += `<div style="padding:3px 0;font-size:12px;"><strong>${a.device}</strong> (${a.model || a.topology}) — <span class="health-pill ${color}">${a.past_eol ? 'PAST EOL' : a.months_remaining + ' mo'}</span> ${a.eol_date}</div>`;
        });
        html += '</div></section>';
      }
      html += '</div></div>';
    }

    el.innerHTML = html;
  } catch (e) {
    // Morning dashboard is best-effort
  }
}
loadMorningDashboard();
</script>
{% endblock %}