{% extends "network/base.html" %}
{% block title %}Facilities / DCIM — Network Design Canvas{% endblock %}
{% block content %}
<div class="page-header">
  <div>
    <h1 class="page-title">Facilities / DCIM</h1>
    <p class="page-subtitle">Rack space, power, cooling, UPS, generators — the physical foundation</p>
  </div>
  <div class="page-actions">
    <button class="btn btn-primary" onclick="document.getElementById('fac-modal').style.display='flex'">+ Facility</button>
    <button class="btn btn-secondary" onclick="document.getElementById('rack-modal').style.display='flex'">+ Rack</button>
  </div>
</div>
<div id="fac-content"></div>

<div id="fac-modal" class="modal" style="display:none;"><div class="modal-content" style="max-width:700px;"><h3>Add Facility</h3><form onsubmit="return addFac(event)"><div class="form-grid">
  <label>Name <input name="name" required placeholder="DC-East-1"></label>
  <label>Type <select name="facility_type"><option>datacenter</option><option>colo</option><option>office</option><option>pop</option><option>hub</option></select></label>
  <label>Operator <input name="operator" placeholder="Equinix, self-operated"></label>
  <label>City <input name="city" placeholder="Ashburn"></label>
  <label>State <input name="state" placeholder="VA"></label>
  <label>Total Racks <input name="total_racks" type="number" value="0"></label>
  <label>Used Racks <input name="used_racks" type="number" value="0"></label>
  <label>Total Power (kW) <input name="total_power_kw" type="number" step="0.1" value="0"></label>
  <label>Used Power (kW) <input name="used_power_kw" type="number" step="0.1" value="0"></label>
  <label>Total Cooling (tons) <input name="total_cooling_tons" type="number" step="0.1" value="0"></label>
  <label>Used Cooling (tons) <input name="used_cooling_tons" type="number" step="0.1" value="0"></label>
  <label>UPS Capacity (kVA) <input name="ups_capacity_kva" type="number" step="0.1" value="0"></label>
  <label>UPS Load (kVA) <input name="ups_load_kva" type="number" step="0.1" value="0"></label>
  <label>UPS Runtime (min) <input name="ups_runtime_min" type="number" value="15"></label>
  <label>Generator (kW) <input name="generator_kw" type="number" step="0.1" value="0"></label>
  <label>Generator Load (kW) <input name="generator_load_kw" type="number" step="0.1" value="0"></label>
</div><div class="form-actions"><button type="submit" class="btn btn-primary">Add</button><button type="button" class="btn btn-secondary" onclick="this.closest('.modal').style.display='none'">Cancel</button></div></form></div></div>

<div id="rack-modal" class="modal" style="display:none;"><div class="modal-content"><h3>Add Rack</h3><form onsubmit="return addRack(event)"><div class="form-grid">
  <label>Facility <select name="facility_id" id="rack-fac-select"></select></label>
  <label>Rack Name <input name="rack_name" required placeholder="Row-A Rack-12"></label>
  <label>Total RU <select name="total_ru"><option value="48">48U</option><option value="42" selected>42U</option><option value="40">40U</option><option value="24">24U</option><option value="12">12U</option></select></label>
  <label>Used RU <input name="used_ru" type="number" value="0"></label>
  <label>Max Power (kW) <input name="max_power_kw" type="number" step="0.1" value="5.0"></label>
  <label>Current Power (kW) <input name="current_power_kw" type="number" step="0.1" value="0"></label>
  <label>PDU A Feed <input name="power_circuit_a" placeholder="PDU-A-12"></label>
  <label>PDU B Feed <input name="power_circuit_b" placeholder="PDU-B-12"></label>
</div><div class="form-actions"><button type="submit" class="btn btn-primary">Add</button><button type="button" class="btn btn-secondary" onclick="this.closest('.modal').style.display='none'">Cancel</button></div></form></div></div>
{% endblock %}
{% block scripts %}
<script>
async function load() {
  const [facs, racks] = await Promise.all([
    fetch(NC_BASE + '/api/facilities').then(r => r.json()),
    fetch(NC_BASE + '/api/racks').then(r => r.json()),
  ]);
  // Populate rack facility dropdown
  document.getElementById('rack-fac-select').innerHTML = facs.map(f => '<option value="' + f.id + '">' + f.name + '</option>').join('');

  let html = '<div class="stats-bar">';
  const totalRacks = facs.reduce((s,f) => s + (f.total_racks||0), 0);
  const usedRacks = facs.reduce((s,f) => s + (f.used_racks||0), 0);
  const totalPower = facs.reduce((s,f) => s + (f.total_power_kw||0), 0);
  const usedPower = facs.reduce((s,f) => s + (f.used_power_kw||0), 0);
  html += `<div class="stat-card"><div class="stat-value">${facs.length}</div><div class="stat-label">Facilities</div></div>`;
  html += `<div class="stat-card"><div class="stat-value">${totalRacks - usedRacks}</div><div class="stat-label">Available Racks</div></div>`;
  html += `<div class="stat-card"><div class="stat-value">${(totalPower - usedPower).toFixed(1)} kW</div><div class="stat-label">Available Power</div></div>`;
  html += `<div class="stat-card"><div class="stat-value">${racks.length}</div><div class="stat-label">Total Rack Units</div></div>`;
  html += '</div>';

  // Facilities
  facs.forEach(f => {
    const powerPct = f.total_power_kw ? Math.round((f.used_power_kw||0) / f.total_power_kw * 100) : 0;
    const coolPct = f.total_cooling_tons ? Math.round((f.used_cooling_tons||0) / f.total_cooling_tons * 100) : 0;
    const upsPct = f.ups_capacity_kva ? Math.round((f.ups_load_kva||0) / f.ups_capacity_kva * 100) : 0;
    const facRacks = racks.filter(r => r.facility_id === f.id);

    html += `<section class="panel panel-wide" style="margin-top:16px;">
      <div class="panel-header"><h2 class="panel-title">${f.name} <span class="badge">${f.facility_type}</span> ${f.operator ? '<span style="color:var(--text-dim);font-size:11px;">(' + f.operator + ')</span>' : ''}</h2>
        <button class="action-btn danger" onclick="delFac('${f.id}')">&#x2715;</button>
      </div>
      <div style="padding:12px;display:grid;grid-template-columns:repeat(4,1fr);gap:12px;">
        <div><div style="font-size:11px;color:var(--text-dim);">Racks</div><div style="font-size:18px;font-weight:700;">${f.used_racks||0} / ${f.total_racks||0}</div></div>
        <div><div style="font-size:11px;color:var(--text-dim);">Power</div><div class="compare-bar" style="width:100%;margin-top:4px;"><div class="compare-fill ${powerPct>=80?'fill-red':powerPct>=50?'fill-yellow':'fill-green'}" style="width:${powerPct}%"></div><span class="compare-label">${powerPct}%</span></div><div style="font-size:10px;color:var(--text-dim);">${(f.used_power_kw||0).toFixed(1)} / ${(f.total_power_kw||0).toFixed(1)} kW</div></div>
        <div><div style="font-size:11px;color:var(--text-dim);">Cooling</div><div class="compare-bar" style="width:100%;margin-top:4px;"><div class="compare-fill ${coolPct>=85?'fill-red':coolPct>=60?'fill-yellow':'fill-green'}" style="width:${coolPct}%"></div><span class="compare-label">${coolPct}%</span></div><div style="font-size:10px;color:var(--text-dim);">${(f.used_cooling_tons||0).toFixed(1)} / ${(f.total_cooling_tons||0).toFixed(1)} tons</div></div>
        <div><div style="font-size:11px;color:var(--text-dim);">UPS</div><div class="compare-bar" style="width:100%;margin-top:4px;"><div class="compare-fill ${upsPct>=70?'fill-red':upsPct>=50?'fill-yellow':'fill-green'}" style="width:${upsPct}%"></div><span class="compare-label">${upsPct}%</span></div><div style="font-size:10px;color:var(--text-dim);">${f.ups_runtime_min||0} min runtime</div></div>
      </div>`;
    if (facRacks.length) {
      html += '<table class="data-table"><thead><tr><th>Rack</th><th>RU Used/Total</th><th>Power</th><th>PDU A</th><th>PDU B</th><th>Actions</th></tr></thead><tbody>';
      facRacks.forEach(r => {
        const ruPct = r.total_ru ? Math.round((r.used_ru||0) / r.total_ru * 100) : 0;
        html += `<tr><td><strong>${r.rack_name}</strong></td><td>${r.used_ru||0}/${r.total_ru} RU (${ruPct}%)</td><td>${(r.current_power_kw||0).toFixed(1)}/${(r.max_power_kw||0).toFixed(1)} kW</td><td>${r.power_circuit_a||'—'}</td><td>${r.power_circuit_b||'—'}</td><td class="actions"><button class="action-btn danger" onclick="delRack('${r.id}')">&#x2715;</button></td></tr>`;
      });
      html += '</tbody></table>';
    }
    html += '</section>';
  });
  if (!facs.length) html += '<section class="panel panel-wide" style="margin-top:16px;"><div style="padding:16px;color:var(--text-dim);">No facilities added yet.</div></section>';

  document.getElementById('fac-content').innerHTML = html;
}
function n(v) { return parseFloat(v) || 0; }
function addFac(e) { e.preventDefault(); const fd=new FormData(e.target),d={}; fd.forEach((v,k)=>d[k]=v);
  ['total_racks','used_racks'].forEach(k => d[k] = parseInt(d[k])||0);
  ['total_power_kw','used_power_kw','total_cooling_tons','used_cooling_tons','ups_capacity_kva','ups_load_kva','ups_runtime_min','generator_kw','generator_load_kw'].forEach(k => d[k] = n(d[k]));
  fetch(NC_BASE+'/api/facilities',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify(d)}).then(()=>location.reload()); return false; }
function addRack(e) { e.preventDefault(); const fd=new FormData(e.target),d={}; fd.forEach((v,k)=>d[k]=v);
  ['total_ru','used_ru'].forEach(k => d[k] = parseInt(d[k])||0);
  ['max_power_kw','current_power_kw'].forEach(k => d[k] = n(d[k]));
  fetch(NC_BASE+'/api/racks',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify(d)}).then(()=>location.reload()); return false; }
async function delFac(id) { if(!confirm('Delete facility and all racks?')) return; await fetch(NC_BASE+'/api/facilities/'+id,{method:'DELETE'}); location.reload(); }
async function delRack(id) { if(!confirm('Delete rack?')) return; await fetch(NC_BASE+'/api/racks/'+id,{method:'DELETE'}); location.reload(); }
load();
</script>
{% endblock %}