{% extends "network/base.html" %}
{% block title %}Enterprise Summary — Network Design Canvas{% endblock %}
{% block content %}
<div class="page-header">
  <div>
    <h1 class="page-title">Enterprise Summary</h1>
    <p class="page-subtitle">Aggregate metrics across all network projects</p>
  </div>
  <div class="page-actions">
    <a href="/network/global" class="btn btn-secondary">Global Connectivity</a>
    <a href="/network/projects/compare" class="btn btn-secondary">Compare Projects</a>
  </div>
</div>

<div id="ent-loading" style="color:var(--text-dim);padding:20px;">Loading enterprise metrics...</div>
<div id="ent-content" style="display:none;">
  <div class="stats-bar" id="ent-stats"></div>
  <div class="dashboard-grid">
    <div>
      <section class="panel panel-wide" id="ent-status-panel">
        <div class="panel-header"><h2 class="panel-title">Project Status Distribution</h2></div>
        <div id="ent-status-grid" class="ent-status-grid"></div>
      </section>
      <section class="panel panel-wide" style="margin-top:16px;" id="ent-risk-panel">
        <div class="panel-header"><h2 class="panel-title">Risk Posture</h2></div>
        <div id="ent-risk" style="padding:12px;"></div>
      </section>
      <section class="panel panel-wide" style="margin-top:16px;" id="ent-reviews-panel">
        <div class="panel-header"><h2 class="panel-title">Review Board Activity</h2></div>
        <div id="ent-reviews" style="padding:12px;"></div>
      </section>
    </div>
    <div class="panel-stack">
      <section class="panel" id="ent-cost-panel">
        <div class="panel-header"><h2 class="panel-title">Cost Overview</h2></div>
        <div id="ent-cost" style="padding:12px;"></div>
      </section>
      <section class="panel" id="ent-infra-panel">
        <div class="panel-header"><h2 class="panel-title">Infrastructure</h2></div>
        <div id="ent-infra" style="padding:12px;"></div>
      </section>
    </div>
  </div>
</div>
{% endblock %}
{% block scripts %}
<script>
async function loadEnterprise() {
  const r = await fetch(NC_BASE + '/api/enterprise-summary');
  const d = await r.json();
  document.getElementById('ent-loading').style.display = 'none';
  document.getElementById('ent-content').style.display = 'block';

  // Stats bar
  document.getElementById('ent-stats').innerHTML = `
    <div class="stat-card"><div class="stat-value">${d.total_projects}</div><div class="stat-label">Projects</div></div>
    <div class="stat-card"><div class="stat-value">${d.total_topologies}</div><div class="stat-label">Topologies</div></div>
    <div class="stat-card"><div class="stat-value">${d.total_devices}</div><div class="stat-label">Devices</div></div>
    <div class="stat-card"><div class="stat-value">${d.compliance_pct != null ? d.compliance_pct + '%' : '—'}</div><div class="stat-label">Compliance</div></div>
    <div class="stat-card"><div class="stat-value ${d.total_cat1 > 0 ? 'text-danger' : ''}">${d.total_cat1}</div><div class="stat-label">CAT1 Findings</div></div>
    <div class="stat-card"><div class="stat-value">${d.total_interconnects}</div><div class="stat-label">Interconnects</div></div>
  `;

  // Status distribution
  const sc = d.status_counts || {};
  const statuses = ['draft','in_review','approved','deployed','archived'];
  const colors = {'draft':'var(--text-dim)','in_review':'var(--warning)','approved':'var(--success)','deployed':'#3498db','archived':'#555'};
  document.getElementById('ent-status-grid').innerHTML = statuses.map(s => `
    <div class="ent-status-card" style="border-left:4px solid ${colors[s]};">
      <div class="ent-sc-value">${sc[s] || 0}</div>
      <div class="ent-sc-label">${s.replace('_',' ')}</div>
    </div>
  `).join('');

  // Risk posture
  document.getElementById('ent-risk').innerHTML = `
    <div style="display:flex;gap:20px;flex-wrap:wrap;">
      <div>
        <div style="font-size:28px;font-weight:700;" class="${d.compliance_pct != null && d.compliance_pct >= 80 ? 'text-success' : d.compliance_pct != null && d.compliance_pct >= 50 ? 'text-warning' : 'text-danger'}">${d.compliance_pct != null ? d.compliance_pct + '%' : 'No audits'}</div>
        <div style="font-size:11px;color:var(--text-dim);">Enterprise Compliance</div>
      </div>
      <div>
        <div style="font-size:28px;font-weight:700;" class="${d.total_open_findings > 10 ? 'text-danger' : d.total_open_findings > 0 ? 'text-warning' : 'text-success'}">${d.total_open_findings}</div>
        <div style="font-size:11px;color:var(--text-dim);">Open Findings</div>
      </div>
      <div>
        <div style="font-size:28px;font-weight:700;" class="${d.total_cat1 > 0 ? 'text-danger' : 'text-success'}">${d.total_cat1}</div>
        <div style="font-size:11px;color:var(--text-dim);">CAT1 (Critical)</div>
      </div>
    </div>
  `;

  // Reviews
  const br = d.board_reviews || {};
  document.getElementById('ent-reviews').innerHTML = `
    <div style="display:flex;gap:16px;">
      <div class="health-pill pill-blue" style="font-size:14px;padding:6px 12px;">${br.pending || 0} Pending</div>
      <div class="health-pill pill-green" style="font-size:14px;padding:6px 12px;">${br.approved || 0} Approved</div>
      <div class="health-pill pill-red" style="font-size:14px;padding:6px 12px;">${br.rejected || 0} Rejected</div>
    </div>
  `;

  // Cost
  document.getElementById('ent-cost').innerHTML = `
    <div class="ent-metric"><span class="ent-metric-val">$${d.total_capex.toLocaleString()}</span><span class="ent-metric-lbl">Total CapEx</span></div>
    <div class="ent-metric"><span class="ent-metric-val">$${d.total_circuit_cost_monthly.toLocaleString()}/mo</span><span class="ent-metric-lbl">Circuit OpEx</span></div>
    <div class="ent-metric"><span class="ent-metric-val">$${(d.total_circuit_cost_monthly * 12).toLocaleString()}/yr</span><span class="ent-metric-lbl">Annual OpEx</span></div>
  `;

  // Infrastructure
  document.getElementById('ent-infra').innerHTML = `
    <div class="ent-metric"><span class="ent-metric-val">${d.total_topologies}</span><span class="ent-metric-lbl">Topologies</span></div>
    <div class="ent-metric"><span class="ent-metric-val">${d.total_devices}</span><span class="ent-metric-lbl">Network Devices</span></div>
    <div class="ent-metric"><span class="ent-metric-val">${d.total_interconnects}</span><span class="ent-metric-lbl">Interconnects</span></div>
  `;
}
loadEnterprise();
</script>
{% endblock %}