{% extends "network/base.html" %}
{% block title %}Circuit Tracker — Network Design Canvas{% endblock %}
{% block content %}
<div class="page-header">
  <div>
    <h1 class="page-title">Circuit Tracker</h1>
    <p class="page-subtitle">Provision, track, and manage network circuits</p>
  </div>
  <div class="page-actions">
    <button class="btn btn-primary" onclick="showAddCircuit()">+ New Circuit</button>
  </div>
</div>

<!-- Project Filter Bar -->
{% if all_projects %}
<div class="project-filter-bar">
  <label>Project:</label>
  <select onchange="filterByProject(this.value)">
    <option value="">All Circuits</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 %}

<div class="stats-bar">
  <div class="stat-card"><div class="stat-value">{{ stats.total }}</div><div class="stat-label">Total Circuits</div></div>
  <div class="stat-card"><div class="stat-value">{{ stats.installed }}</div><div class="stat-label">Installed</div></div>
  <div class="stat-card"><div class="stat-value">{{ stats.planned }}</div><div class="stat-label">Planned</div></div>
  <div class="stat-card"><div class="stat-value">${{ stats.monthly_cost|round(0)|int }}/mo</div><div class="stat-label">Monthly Cost</div></div>
</div>

<section class="panel panel-wide">
  <div class="panel-header"><h2 class="panel-title">All Circuits</h2></div>
  {% if circuits %}
  <table class="data-table">
    <thead>
      <tr><th>Circuit ID</th><th>Carrier</th><th>Type</th><th>BW</th><th>Customer</th><th>A-Side</th><th>Z-Side</th><th>Status</th><th>Cost/mo</th><th>Contract End</th><th>Actions</th></tr>
    </thead>
    <tbody>
    {% for c in circuits %}
      <tr>
        <td><strong>{{ c.circuit_id }}</strong></td>
        <td>{{ c.carrier }}</td>
        <td><span class="badge">{{ c.circuit_type }}</span></td>
        <td>{{ c.bandwidth }}</td>
        <td>{{ c.customer }}</td>
        <td>{{ c.handoff_a }}</td>
        <td>{{ c.handoff_z }}</td>
        <td><span class="badge badge-{{ 'public' if c.install_status == 'installed' else 'warning' }}">{{ c.install_status }}</span></td>
        <td>${{ (c.monthly_cost_usd or 0)|round(0)|int }}</td>
        <td>{{ (c.contract_end or '')[:10] }}</td>
        <td class="actions">
          <button class="action-btn" onclick="editCircuit('{{ c.id }}','{{ c.circuit_id }}','{{ c.carrier }}','{{ c.circuit_type }}','{{ c.bandwidth }}','{{ c.install_status }}')" title="Edit">✏</button>
          <button class="action-btn danger" onclick="deleteCircuit('{{ c.id }}')" title="Delete">✕</button>
        </td>
      </tr>
    {% endfor %}
    </tbody>
  </table>
  {% else %}
  <p style="padding:1rem;color:var(--text-muted);">No circuits yet. Click "+ New Circuit" to add one.</p>
  {% endif %}
</section>

<!-- Add Circuit Modal -->
<div id="add-modal" class="modal" style="display:none;">
  <div class="modal-content">
    <h3>Add Circuit</h3>
    <form id="circuit-form" onsubmit="return submitCircuit(event)">
      <div class="form-grid">
        <label>Circuit ID <input name="circuit_id" required placeholder="MPLS-12345"></label>
        <label>Carrier <input name="carrier" placeholder="AT&T, Lumen, Zayo..."></label>
        <label>Type <select name="circuit_type"><option>MPLS</option><option>DIA</option><option>wavelength</option><option>dark_fiber</option><option>cross_connect</option><option>SDWAN</option><option>VPN</option></select></label>
        <label>Bandwidth <input name="bandwidth" placeholder="10G, 1G, 100M..."></label>
        <label>Customer <input name="customer" placeholder="Customer name"></label>
        <label>Site <input name="site" placeholder="Site name"></label>
        <label>A-Side Handoff <input name="handoff_a" placeholder="Device/location"></label>
        <label>Z-Side Handoff <input name="handoff_z" placeholder="Device/location"></label>
        <label>Monthly Cost ($) <input name="monthly_cost_usd" type="number" step="0.01" value="0"></label>
        <label>SLA Uptime % <input name="sla_uptime_pct" type="number" step="0.01" value="99.9"></label>
        <label>Contract Start <input name="contract_start" type="date"></label>
        <label>Contract End <input name="contract_end" type="date"></label>
        <label>Status <select name="install_status"><option>planned</option><option>ordered</option><option>in_progress</option><option>installed</option><option>decommissioned</option></select></label>
        <label>Notes <input name="notes" placeholder="Optional notes"></label>
      </div>
      <div class="form-actions">
        <button type="submit" class="btn btn-primary">Save</button>
        <button type="button" class="btn btn-secondary" onclick="document.getElementById('add-modal').style.display='none'">Cancel</button>
      </div>
    </form>
  </div>
</div>

{% endblock %}
{% block scripts %}
<script>
function showAddCircuit(){document.getElementById('add-modal').style.display='flex';}
function submitCircuit(e){
  e.preventDefault();
  const fd=new FormData(e.target), data={};
  fd.forEach((v,k)=>data[k]=v);
  data.monthly_cost_usd=parseFloat(data.monthly_cost_usd)||0;
  data.sla_uptime_pct=parseFloat(data.sla_uptime_pct)||99.9;
  fetch(NC_BASE+'/api/circuits',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify(data)})
    .then(r=>{if(r.ok)location.reload();else alert('Error saving circuit');});
  return false;
}
function editCircuit(id,cid,carrier,ctype,bw,status){
  const newCid=prompt('Circuit ID:',cid); if(newCid===null)return;
  const newCarrier=prompt('Carrier:',carrier); if(newCarrier===null)return;
  const newStatus=prompt('Status (planned/ordered/in_progress/installed/decommissioned):',status); if(newStatus===null)return;
  fetch(NC_BASE+'/api/circuits/'+id,{method:'PUT',headers:{'Content-Type':'application/json'},
    body:JSON.stringify({circuit_id:newCid,carrier:newCarrier,install_status:newStatus})}).then(()=>location.reload());
}
function deleteCircuit(id){
  if(!confirm('Delete this circuit?'))return;
  fetch(NC_BASE+'/api/circuits/'+id,{method:'DELETE'}).then(()=>location.reload());
}
function filterByProject(pid){
  if(pid) window.location.href=NC_BASE+'/circuits?project='+pid;
  else window.location.href=NC_BASE+'/circuits';
}
</script>
{% endblock %}