{% extends "network/base.html" %}
{% block title %}Charts & Analytics — Network Design Canvas{% endblock %}
{% block head %}
<script src="{{ url_for('static', filename='vendor/chartjs/chart.umd.min.js') }}"></script>
{% endblock %}
{% block content %}
<div class="page-header">
  <div>
    <h1 class="page-title">Charts &amp; Analytics</h1>
    <p class="page-subtitle">Visual dashboards for compliance trends, capacity, and costs</p>
  </div>
  <div class="page-actions">
    <button class="btn btn-secondary" onclick="takeSnapshot()">Record Compliance Snapshot</button>
  </div>
</div>

<div class="dashboard-grid">
  <div>
    <!-- Cost Breakdown -->
    <section class="panel panel-wide" style="margin-bottom:16px;">
      <div class="panel-header"><h2 class="panel-title">Cost Breakdown (CapEx vs OpEx)</h2></div>
      <div style="padding:16px;display:flex;gap:24px;align-items:center;">
        <div style="width:280px;height:280px;"><canvas id="cost-chart"></canvas></div>
        <div id="cost-details" style="font-size:12px;"></div>
      </div>
    </section>

    <!-- Capacity Utilization -->
    <section class="panel panel-wide">
      <div class="panel-header"><h2 class="panel-title">Capacity Utilization</h2></div>
      <div style="padding:16px;">
        <div style="height:300px;"><canvas id="capacity-chart"></canvas></div>
      </div>
    </section>
  </div>

  <div class="panel-stack">
    <!-- Compliance Trend -->
    <section class="panel">
      <div class="panel-header"><h2 class="panel-title">Compliance Trend</h2></div>
      <div style="padding:12px;">
        <div style="height:220px;"><canvas id="compliance-chart"></canvas></div>
        <div id="compliance-note" style="font-size:10px;color:var(--text-dim);margin-top:4px;">Click "Record Compliance Snapshot" to start tracking trends over time.</div>
      </div>
    </section>

    <!-- Port Utilization -->
    <section class="panel">
      <div class="panel-header"><h2 class="panel-title">Port Utilization by Device</h2></div>
      <div style="padding:12px;">
        <div style="height:200px;"><canvas id="port-chart"></canvas></div>
      </div>
    </section>
  </div>
</div>
{% endblock %}
{% block scripts %}
<script>
const CHART_COLORS = ['#e94560','#3498db','#27ae60','#f39c12','#9b59b6','#1abc9c','#e67e22','#2ecc71'];
Chart.defaults.color = '#7a8cb0';
Chart.defaults.borderColor = '#1e3a6e';

async function loadCharts() {
  // Cost breakdown
  const cost = await fetch(NC_BASE + '/api/charts/cost-breakdown').then(r => r.json());
  const capex = cost.capex || {};
  const opex = cost.opex_annual || {};
  new Chart(document.getElementById('cost-chart'), {
    type: 'doughnut',
    data: {
      labels: ['Hardware', 'Labor', 'Circuits/yr', 'Peering/yr', 'Maintenance', 'Licensing'],
      datasets: [{
        data: [capex.hardware||0, capex.labor||0, opex.circuits||0, opex.peering||0, opex.maintenance||0, opex.licensing||0],
        backgroundColor: CHART_COLORS.slice(0, 6),
      }]
    },
    options: {
      responsive: true,
      maintainAspectRatio: true,
      plugins: {legend: {position: 'right', labels: {font: {size: 11}}}},
    }
  });
  document.getElementById('cost-details').innerHTML =
    `<div><strong>Total CapEx:</strong> $${(cost.total_capex||0).toLocaleString()}</div>` +
    `<div><strong>Total OpEx/yr:</strong> $${(cost.total_opex_annual||0).toLocaleString()}</div>` +
    `<div style="margin-top:8px;color:var(--text-dim);">5-Year TCO: $${((cost.total_capex||0) + (cost.total_opex_annual||0)*5).toLocaleString()}</div>`;

  // Capacity
  const cap = await fetch(NC_BASE + '/api/charts/capacity-overview').then(r => r.json());
  if (cap.facilities.length) {
    new Chart(document.getElementById('capacity-chart'), {
      type: 'bar',
      data: {
        labels: cap.facilities.map(f => f.name),
        datasets: [
          {label: 'Power %', data: cap.facilities.map(f => f.power_pct), backgroundColor: '#e94560'},
          {label: 'Cooling %', data: cap.facilities.map(f => f.cooling_pct), backgroundColor: '#3498db'},
          {label: 'Rack %', data: cap.facilities.map(f => f.rack_pct), backgroundColor: '#27ae60'},
        ]
      },
      options: {
        responsive: true, maintainAspectRatio: false,
        scales: {y: {beginAtZero: true, max: 100, title: {display: true, text: 'Utilization %'}}},
        plugins: {legend: {labels: {font: {size: 11}}}},
      }
    });
  } else {
    document.getElementById('capacity-chart').parentElement.innerHTML = '<div style="color:var(--text-dim);font-size:12px;padding:20px;">No facilities data. Add facilities to see capacity charts.</div>';
  }

  // Port utilization
  if (cap.ports.length) {
    new Chart(document.getElementById('port-chart'), {
      type: 'bar',
      data: {
        labels: cap.ports.map(p => p.device),
        datasets: [{
          label: 'Port Utilization %',
          data: cap.ports.map(p => p.pct),
          backgroundColor: cap.ports.map(p => p.pct >= 80 ? '#e74c3c' : p.pct >= 50 ? '#f39c12' : '#27ae60'),
        }]
      },
      options: {
        responsive: true, maintainAspectRatio: false, indexAxis: 'y',
        scales: {x: {beginAtZero: true, max: 100}},
        plugins: {legend: {display: false}},
      }
    });
  }

  // Compliance trend
  const trend = await fetch(NC_BASE + '/api/charts/compliance-trend').then(r => r.json());
  const projects = trend.projects || {};
  const pids = Object.keys(projects);
  if (pids.length) {
    const datasets = pids.map((pid, i) => ({
      label: projects[pid].name,
      data: projects[pid].data.map(d => ({x: d.date, y: d.pct})),
      borderColor: CHART_COLORS[i % CHART_COLORS.length],
      fill: false, tension: 0.3,
    }));
    new Chart(document.getElementById('compliance-chart'), {
      type: 'line',
      data: {datasets},
      options: {
        responsive: true, maintainAspectRatio: false,
        scales: {
          x: {type: 'category', labels: [...new Set(pids.flatMap(pid => projects[pid].data.map(d => d.date)))]},
          y: {beginAtZero: true, max: 100, title: {display: true, text: '%'}},
        },
        plugins: {legend: {labels: {font: {size: 10}}}},
      }
    });
    document.getElementById('compliance-note').textContent = pids.length + ' projects tracked';
  }
}

async function takeSnapshot() {
  const d = await fetch(NC_BASE + '/api/charts/compliance-snapshot', {method: 'POST'}).then(r => r.json());
  alert('Recorded compliance snapshot for ' + d.recorded + ' projects');
  location.reload();
}

loadCharts();
</script>
{% endblock %}