{% extends "base.html" %}
{% block title %}Circuits — CCC{% endblock %}
{% block extra_head %}
<style>
.badge-active{background:#dcfce7;color:#166534;padding:2px 8px;border-radius:4px;font-size:11px;font-weight:600;}
.badge-pending{background:#fef9c3;color:#854d0e;padding:2px 8px;border-radius:4px;font-size:11px;font-weight:600;}
.badge-maintenance{background:#dbeafe;color:#1d4ed8;padding:2px 8px;border-radius:4px;font-size:11px;font-weight:600;}
.badge-decommissioned{background:#f3f4f6;color:#374151;padding:2px 8px;border-radius:4px;font-size:11px;font-weight:600;}
.badge-test{background:#e0f2fe;color:#075985;padding:2px 8px;border-radius:4px;font-size:11px;font-weight:600;}
</style>
{% endblock %}
{% block content %}
<div class="container-fluid px-4 py-3">
  <div class="d-flex align-items-center justify-content-between mb-3">
    <h5 class="mb-0" style="color:#38bdf8;"><i class="bi bi-hdd-network me-2"></i>Circuit Inventory</h5>
    <div class="d-flex gap-2">
      <button class="btn btn-sm btn-outline-info" onclick="document.getElementById('add-circuit-modal').classList.toggle('d-none')">+ Add Circuit</button>
      <a href="/ccc" class="btn btn-sm btn-outline-secondary">← Overview</a>
    </div>
  </div>

  <!-- Sub-nav -->
  <div style="display:flex;gap:6px;flex-wrap:wrap;margin-bottom:18px;">
    <a href="/ccc" class="btn btn-sm btn-outline-secondary">Overview</a>
    <a href="/ccc/circuits" class="btn btn-sm btn-outline-info active">Circuits</a>
    <a href="/ccc/cross-connects" class="btn btn-sm btn-outline-secondary">Cross-Connects</a>
    <a href="/ccc/loa" class="btn btn-sm btn-outline-secondary">LOA</a>
    <a href="/ccc/orders" class="btn btn-sm btn-outline-secondary">Orders</a>
    <a href="/ccc/capacity" class="btn btn-sm btn-outline-secondary">Capacity</a>
    <a href="/ccc/dwdm" class="btn btn-sm btn-outline-secondary">DWDM</a>
  </div>

  <!-- Add circuit form (hidden) -->
  <div id="add-circuit-modal" class="d-none card bg-dark border-info mb-4">
    <div class="card-header border-info">Add Circuit</div>
    <div class="card-body">
      <div class="row g-2">
        <div class="col-md-3"><input class="form-control form-control-sm bg-dark text-light border-secondary" id="f-circuit-id" placeholder="Circuit ID *"></div>
        <div class="col-md-2">
          <select class="form-select form-select-sm bg-dark text-light border-secondary" id="f-circuit-type">
            <option value="">Type *</option>
            <option>ethernet</option><option>wavelength</option><option>dark_fiber</option>
            <option>100g</option><option>400g</option><option>mpls</option><option>ip_vpn</option><option>other</option>
          </select>
        </div>
        <div class="col-md-2"><input class="form-control form-control-sm bg-dark text-light border-secondary" id="f-carrier" placeholder="Carrier *"></div>
        <div class="col-md-2"><input class="form-control form-control-sm bg-dark text-light border-secondary" id="f-bw" placeholder="BW (Gbps)" type="number" step="0.1"></div>
        <div class="col-md-2"><input class="form-control form-control-sm bg-dark text-light border-secondary" id="f-mrr" placeholder="MRR (USD)" type="number" step="1"></div>
        <div class="col-md-1"><button class="btn btn-sm btn-info w-100" onclick="addCircuit()">Add</button></div>
      </div>
      <div id="add-circuit-msg" class="mt-2 small"></div>
    </div>
  </div>

  <div class="card bg-dark border-secondary">
    <div class="card-body p-0">
      <table class="table table-dark table-sm mb-0">
        <thead>
          <tr>
            <th>Circuit ID</th><th>Type</th><th>Carrier</th><th>BW (Gbps)</th>
            <th>Endpoint A</th><th>Endpoint Z</th><th>Util%</th><th>MRR</th>
            <th>Contract End</th><th>Status</th>
          </tr>
        </thead>
        <tbody>
          {% for c in circuits %}
          <tr>
            <td class="text-info fw-bold">{{ c.circuit_id }}</td>
            <td><code class="text-secondary">{{ c.circuit_type }}</code></td>
            <td>{{ c.carrier }}</td>
            <td>{{ c.bandwidth_gbps }}</td>
            <td class="text-muted" style="font-size:.8rem;">{{ c.endpoint_a or '—' }}</td>
            <td class="text-muted" style="font-size:.8rem;">{{ c.endpoint_z or '—' }}</td>
            <td>
              {% set u = c.utilization_pct | float %}
              <span class="{% if u >= 85 %}text-danger{% elif u >= 70 %}text-warning{% else %}text-success{% endif %} fw-bold">
                {{ u | round(1) }}%
              </span>
            </td>
            <td>${{ c.mrr_usd | round(0) | int }}</td>
            <td class="text-muted" style="font-size:.8rem;">{{ c.contract_end or '—' }}</td>
            <td><span class="badge-{{ c.status }}">{{ c.status }}</span></td>
          </tr>
          {% else %}
          <tr><td colspan="10" class="text-center text-muted py-4">No circuits yet — add your first circuit above.</td></tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>

  {% include 'includes/iqe_query_widget.html' %}
</div>
<script>
const IQE_CANVAS = 'ccc'; const IQE_COLLECTION = 'ccc.circuits';
function addCircuit() {
  const data = {
    circuit_id: document.getElementById('f-circuit-id').value,
    circuit_type: document.getElementById('f-circuit-type').value,
    carrier: document.getElementById('f-carrier').value,
    bandwidth_gbps: parseFloat(document.getElementById('f-bw').value) || 0,
    mrr_usd: parseFloat(document.getElementById('f-mrr').value) || 0,
  };
  const msg = document.getElementById('add-circuit-msg');
  fetch('/api/ccc/circuits', {method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify(data)})
    .then(r => r.json())
    .then(d => { if (d.status==='created') { msg.innerHTML='<span class="text-success">Created. Reload to see.</span>'; } else { msg.innerHTML='<span class="text-danger">'+(d.error||'Error')+'</span>'; } })
    .catch(e => { msg.innerHTML='<span class="text-danger">'+e+'</span>'; });
}
</script>
{% endblock %}