{% extends "base.html" %}
{% block title %}Cross-Connect Orders — CCC{% 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-arrow-repeat me-2"></i>Cross-Connect Order Pipeline</h5>
    <a href="/ccc" class="btn btn-sm btn-outline-secondary">← Overview</a>
  </div>

  <!-- CCC subnav -->
  <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-secondary">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 Requests</a>
    <a href="/ccc/orders" class="btn btn-sm btn-primary active">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>

  <!-- Pipeline columns -->
  <div class="d-flex gap-3 overflow-auto pb-2" id="pipeline" style="min-height:340px;">
    {% set stages = [('quoted','Quoted','secondary'),('ordered','Ordered','primary'),('loa_submitted','LOA Submitted','warning'),('loa_approved','LOA Approved','info'),('installing','Installing','info'),('testing','Testing','primary')] %}
    {% for stage_key, stage_label, stage_color in stages %}
    <div class="flex-shrink-0" style="min-width:220px;">
      <div class="d-flex align-items-center mb-2">
        <span class="badge bg-{{ stage_color }} me-2">{{ stage_label }}</span>
        <span class="badge bg-dark border border-secondary text-muted stage-count" data-stage="{{ stage_key }}">0</span>
      </div>
      <div class="stage-col d-flex flex-column gap-2" data-stage="{{ stage_key }}">
        <div class="text-muted small text-center py-3">Loading…</div>
      </div>
    </div>
    {% endfor %}
  </div>

  <!-- IQE Query Widget -->
  {% include "includes/iqe_query_widget.html" %}
</div>

<script>
const FACILITY_COLORS = {equinix:'danger',megaport:'primary',zayo:'info',lumen:'warning',cogent:'success',other:'secondary'};

function xcCard(xc) {
  const fc = FACILITY_COLORS[xc.facility] || 'secondary';
  const ticket = xc.carrier_ticket_id ? `<div class="text-muted" style="font-size:10px;">Ticket: ${xc.carrier_ticket_id.slice(0,12)}…</div>` : '';
  const eta = xc.estimated_delivery ? `<div class="text-muted small">ETA: ${xc.estimated_delivery}</div>` : '';
  const partnerLink = xc.partner_id
    ? `<a href="/network/partners" style="font-size:10px;color:#38bdf8;text-decoration:none;" title="Partner ID: ${xc.partner_id}">⟳ View Partner</a>`
    : '';
  const overdue = xc.estimated_delivery && xc.estimated_delivery < new Date().toISOString().slice(0,10)
    ? '<span class="badge bg-danger ms-1" style="font-size:9px;">OVERDUE</span>' : '';
  return `
    <div class="card p-2" style="font-size:12px;">
      <div class="d-flex align-items-center gap-1 mb-1">
        <span class="badge bg-${fc}">${xc.facility}</span>
        <strong>${xc.xc_number}</strong>${overdue}
      </div>
      <div class="text-muted">${xc.port_a || '—'} → ${xc.port_z || '—'}</div>
      <div class="text-muted">${xc.speed_gbps || 1} Gbps · $${xc.monthly_cost_usd || 0}/mo</div>
      ${eta}
      ${ticket}
      ${partnerLink}
      <div class="d-flex gap-1 mt-2 flex-wrap">
        <button class="btn btn-xs btn-outline-info" onclick="pollStatus(${xc.id})">Poll</button>
        <button class="btn btn-xs btn-outline-warning" onclick="generateLoa(${xc.id})">LOA</button>
        <button class="btn btn-xs btn-outline-danger" onclick="cancelOrder(${xc.id})">Cancel</button>
      </div>
    </div>`;
}

function loadPipeline() {
  fetch('/api/ccc/cross-connect-orders')
    .then(r => r.json())
    .then(data => {
      // Clear
      document.querySelectorAll('.stage-col').forEach(el => el.innerHTML = '');
      document.querySelectorAll('.stage-count').forEach(el => el.textContent = '0');
      const counts = {};
      data.forEach(xc => {
        const col = document.querySelector(`.stage-col[data-stage="${xc.order_status}"]`);
        const countEl = document.querySelector(`.stage-count[data-stage="${xc.order_status}"]`);
        if (col) {
          col.insertAdjacentHTML('beforeend', xcCard(xc));
          counts[xc.order_status] = (counts[xc.order_status] || 0) + 1;
        }
      });
      Object.entries(counts).forEach(([stage, n]) => {
        const el = document.querySelector(`.stage-count[data-stage="${stage}"]`);
        if (el) el.textContent = n;
      });
      if (!data.length) {
        document.querySelectorAll('.stage-col[data-stage="ordered"]').forEach(el => {
          el.innerHTML = '<div class="text-muted small text-center py-3">No in-flight orders</div>';
        });
      }
    }).catch(() => {
      document.getElementById('pipeline').innerHTML = '<div class="text-danger small">Failed to load orders.</div>';
    });
}

function pollStatus(xcId) {
  fetch(`/api/ccc/cross-connects/${xcId}/order-status`)
    .then(r => r.json())
    .then(d => { alert(`Status: ${d.order_status}${d.changed ? ' (changed!)' : ''}`); loadPipeline(); });
}

function generateLoa(xcId) {
  fetch(`/api/ccc/cross-connects/${xcId}/generate-loa`, {method:'POST', headers:{'Content-Type':'application/json'}, body:'{}'})
    .then(r => r.json())
    .then(d => {
      if (d.loa_number) alert(`LOA ${d.loa_number} generated.`);
      else alert(JSON.stringify(d));
    });
}

function cancelOrder(xcId) {
  if (!confirm('Cancel this cross-connect order?')) return;
  fetch(`/api/ccc/cross-connects/${xcId}/cancel-order`, {method:'POST', headers:{'Content-Type':'application/json'}, body:JSON.stringify({reason:'Cancelled by user',actor:'noc'})})
    .then(r => r.json())
    .then(() => loadPipeline());
}

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