{% extends "base.html" %}
{% block title %}Networks — Organization{% endblock %}
{% block content %}
<div class="app-page-header">
  <h1><i class="fas fa-network-wired" aria-hidden="true"></i> Networks</h1>
  <div class="app-page-header-actions">
    <button type="button" class="btn btn-primary btn-sm" id="newNetworkBtn"><i class="fas fa-plus"></i> New network</button>
  </div>
</div>
<p class="muted" style="margin: 0 0 12px 0;">Networks, VLANs, and wireless SSIDs for your organization. Assets can be linked to a VLAN from the Assets page.</p>
<div id="out" class="filters-section" style="padding:12px;"><div class="loading-state"><div class="spinner"></div><span>Loading…</span></div></div>

<div id="pnModal" style="display:none; position:fixed; inset:0; background:rgba(0,0,0,0.5); z-index:1000;">
  <div style="background:var(--color-bg-alt,#1d1d1d); border:1px solid rgba(255,255,255,0.2); border-radius:8px; width:92%; max-width:480px; margin:6% auto; overflow:hidden;">
    <div style="display:flex; justify-content:space-between; align-items:center; padding:12px 14px; border-bottom:1px solid rgba(255,255,255,0.2);">
      <h3 id="pnModalTitle" style="margin:0; font-size:1.05rem;">Edit</h3>
      <button type="button" class="btn btn-secondary btn-sm" onclick="pnCloseModal()">&times;</button>
    </div>
    <div id="pnModalBody" style="padding:14px; max-height:70vh; overflow-y:auto;"></div>
    <div style="padding:12px 14px; border-top:1px solid rgba(255,255,255,0.2); display:flex; justify-content:flex-end; gap:8px;">
      <button type="button" class="btn btn-secondary btn-sm" onclick="pnCloseModal()">Cancel</button>
      <button type="button" class="btn btn-primary btn-sm" id="pnModalSave">Save</button>
    </div>
  </div>
</div>

<script>
(function(){
  var networks = [];
  var saveHandler = null;

  function esc(s){ return String(s == null ? '' : s).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/"/g,'&quot;'); }

  async function api(path, options){
    options = options || {};
    options.headers = Object.assign({'Content-Type':'application/json'}, options.headers || {});
    var r = await fetch(path, options);
    var j = null;
    try { j = await r.json(); } catch(e) { j = {}; }
    if (!r.ok || (j && j.success === false)) throw new Error((j && j.error) || ('Request failed ('+r.status+')'));
    return j;
  }

  window.pnCloseModal = function(){
    document.getElementById('pnModal').style.display = 'none';
    saveHandler = null;
  };

  function openModal(title, bodyHtml, onSave){
    document.getElementById('pnModalTitle').textContent = title;
    document.getElementById('pnModalBody').innerHTML = bodyHtml;
    saveHandler = onSave;
    document.getElementById('pnModal').style.display = 'block';
  }

  document.getElementById('pnModalSave').addEventListener('click', async function(){
    if (!saveHandler) return;
    try { await saveHandler(); } catch(e) { alert(e.message); }
  });
  document.getElementById('pnModal').addEventListener('click', function(e){
    if (e.target === this) pnCloseModal();
  });

  function field(id, label, value, placeholder, type){
    return '<div class="form-group"><label>'+esc(label)+'</label><input id="'+id+'" type="'+(type||'text')+'" value="'+esc(value==null?'':value)+'" placeholder="'+esc(placeholder||'')+'" style="width:100%"></div>';
  }
  function checkbox(id, label, checked){
    return '<div class="form-group" style="display:flex; align-items:center; gap:8px;"><input id="'+id+'" type="checkbox"'+(checked?' checked':'')+' style="width:auto"><label for="'+id+'" style="margin:0;">'+esc(label)+'</label></div>';
  }
  function val(id){ var el = document.getElementById(id); return el ? el.value.trim() : ''; }
  function checked(id){ var el = document.getElementById(id); return !!(el && el.checked); }

  // --- Network create/edit ---
  function networkFormHtml(n){
    return field('pnName','Name *', n ? n.name : '', 'e.g. Main LAN')
      + field('pnCidr','CIDR', n ? n.cidr : '', 'e.g. 192.168.1.0/24')
      + field('pnDesc','Description', n ? n.description : '', 'Optional');
  }
  function networkPayload(){
    return { name: val('pnName'), cidr: val('pnCidr') || null, description: val('pnDesc') || null };
  }
  document.getElementById('newNetworkBtn').addEventListener('click', function(){
    openModal('New network', networkFormHtml(null), async function(){
      if (!val('pnName')) { alert('Name is required.'); return; }
      await api('/api/portal/organization/networks', { method:'POST', body: JSON.stringify(networkPayload()) });
      pnCloseModal(); load();
    });
  });
  window.pnEditNetwork = function(id){
    var n = networks.find(function(x){ return x.id === id; });
    if (!n) return;
    openModal('Edit network', networkFormHtml(n), async function(){
      if (!val('pnName')) { alert('Name is required.'); return; }
      await api('/api/portal/organization/networks/'+id, { method:'PATCH', body: JSON.stringify(networkPayload()) });
      pnCloseModal(); load();
    });
  };
  window.pnDeleteNetwork = async function(id, name){
    if (!confirm('Delete network "'+name+'"? VLANs and SSIDs under it are removed too.')) return;
    try { await api('/api/portal/organization/networks/'+id, { method:'DELETE' }); load(); }
    catch(e) { alert(e.message); }
  };

  // --- VLAN create/edit ---
  function vlanFormHtml(v){
    return field('pnVlanName','Name *', v ? v.name : '', 'e.g. Corporate')
      + field('pnVlanTag','VLAN ID (1-4094, blank = untagged)', v && v.vlan_id != null ? v.vlan_id : '', 'e.g. 10', 'number')
      + field('pnVlanCidr','CIDR', v ? v.cidr : '', 'e.g. 10.0.10.0/24')
      + '<div class="form-group"><label>Purpose</label><select id="pnVlanPurpose" style="width:100%">'
      + ['corporate','guest','vlan-only','wan','vpn'].map(function(p){ return '<option value="'+p+'"'+(v && v.purpose === p ? ' selected' : '')+'>'+p+'</option>'; }).join('')
      + '</select></div>'
      + checkbox('pnVlanDhcp','DHCP enabled', v ? !!v.dhcp_enabled : true)
      + field('pnVlanDesc','Description', v ? v.description : '', 'Optional');
  }
  function vlanPayload(){
    var tag = val('pnVlanTag');
    return {
      name: val('pnVlanName'),
      vlan_id: tag === '' ? null : Number(tag),
      cidr: val('pnVlanCidr') || null,
      purpose: document.getElementById('pnVlanPurpose').value,
      dhcp_enabled: checked('pnVlanDhcp'),
      description: val('pnVlanDesc') || null
    };
  }
  window.pnAddVlan = function(networkId){
    openModal('Add VLAN', vlanFormHtml(null), async function(){
      if (!val('pnVlanName')) { alert('Name is required.'); return; }
      await api('/api/portal/organization/networks/'+networkId+'/vlans', { method:'POST', body: JSON.stringify(vlanPayload()) });
      pnCloseModal(); load();
    });
  };
  window.pnEditVlan = function(vlanId){
    var v = findVlan(vlanId);
    if (!v) return;
    openModal('Edit VLAN', vlanFormHtml(v), async function(){
      if (!val('pnVlanName')) { alert('Name is required.'); return; }
      await api('/api/portal/organization/vlans/'+vlanId, { method:'PATCH', body: JSON.stringify(vlanPayload()) });
      pnCloseModal(); load();
    });
  };
  window.pnDeleteVlan = async function(vlanId, name){
    if (!confirm('Delete VLAN "'+name+'"? Assets stay but are detached from this VLAN.')) return;
    try { await api('/api/portal/organization/vlans/'+vlanId, { method:'DELETE' }); load(); }
    catch(e) { alert(e.message); }
  };

  // --- SSID create/edit ---
  function ssidFormHtml(s){
    return field('pnSsidName','SSID *', s ? s.name : '', 'e.g. Office-WiFi')
      + '<div class="form-group"><label>Security</label><select id="pnSsidSecurity" style="width:100%">'
      + ['wpa2','wpa3','wpa2wpa3','wpa-enterprise','open'].map(function(m){ return '<option value="'+m+'"'+(s && s.security === m ? ' selected' : '')+'>'+m+'</option>'; }).join('')
      + '</select></div>'
      + checkbox('pnSsidEnabled','Enabled', s ? !!s.enabled : true)
      + checkbox('pnSsidGuest','Guest network', s ? !!s.is_guest : false)
      + checkbox('pnSsidHidden','Hidden (no broadcast)', s ? !!s.hidden : false);
  }
  function ssidPayload(){
    return {
      name: val('pnSsidName'),
      security: document.getElementById('pnSsidSecurity').value,
      enabled: checked('pnSsidEnabled'),
      is_guest: checked('pnSsidGuest'),
      hidden: checked('pnSsidHidden')
    };
  }
  window.pnAddSsid = function(vlanId){
    openModal('Add SSID', ssidFormHtml(null), async function(){
      if (!val('pnSsidName')) { alert('SSID is required.'); return; }
      await api('/api/portal/organization/vlans/'+vlanId+'/ssids', { method:'POST', body: JSON.stringify(ssidPayload()) });
      pnCloseModal(); load();
    });
  };
  window.pnEditSsid = function(ssidId){
    var s = findSsid(ssidId);
    if (!s) return;
    openModal('Edit SSID', ssidFormHtml(s), async function(){
      if (!val('pnSsidName')) { alert('SSID is required.'); return; }
      await api('/api/portal/organization/ssids/'+ssidId, { method:'PATCH', body: JSON.stringify(ssidPayload()) });
      pnCloseModal(); load();
    });
  };
  window.pnDeleteSsid = async function(ssidId, name){
    if (!confirm('Delete SSID "'+name+'"?')) return;
    try { await api('/api/portal/organization/ssids/'+ssidId, { method:'DELETE' }); load(); }
    catch(e) { alert(e.message); }
  };

  function findVlan(id){
    for (var i=0;i<networks.length;i++){
      var hit = (networks[i].vlans||[]).find(function(v){ return v.id === id; });
      if (hit) return hit;
    }
    return null;
  }
  function findSsid(id){
    for (var i=0;i<networks.length;i++){
      var vlans = networks[i].vlans||[];
      for (var k=0;k<vlans.length;k++){
        var hit = (vlans[k].ssids||[]).find(function(s){ return s.id === id; });
        if (hit) return hit;
      }
    }
    return null;
  }

  function ssidChip(s){
    var meta = [s.security ? s.security.toUpperCase() : 'WPA2'];
    if (!s.enabled) meta.push('Disabled');
    if (s.is_guest) meta.push('Guest');
    if (s.hidden) meta.push('Hidden');
    return '<span style="display:inline-flex; align-items:center; gap:6px; padding:3px 8px; border:1px solid rgba(255,255,255,0.2); border-radius:999px; margin:2px 4px 2px 0; font-size:0.82rem;">'
      + '<i class="fas fa-wifi"></i>' + esc(s.name)
      + ' <span class="muted" style="font-size:0.75rem;">' + esc(meta.join(' · ')) + '</span>'
      + ' <a href="#" onclick="pnEditSsid('+s.id+'); return false;" title="Edit SSID"><i class="fas fa-edit"></i></a>'
      + ' <a href="#" onclick="pnDeleteSsid('+s.id+', \''+esc(s.name).replace(/'/g,'&#39;')+'\'); return false;" title="Delete SSID"><i class="fas fa-trash"></i></a>'
      + '</span>';
  }

  function vlanRow(v){
    var tag = v.vlan_id == null ? 'Untagged' : 'VLAN ' + v.vlan_id;
    var ssids = (v.ssids||[]).map(ssidChip).join('') || '<span class="muted" style="font-size:0.82rem;">No SSIDs</span>';
    return '<tr>'
      + '<td>' + esc(tag) + '</td>'
      + '<td>' + esc(v.name) + '</td>'
      + '<td>' + esc(v.cidr || '—') + '</td>'
      + '<td>' + esc(v.purpose || 'corporate') + '</td>'
      + '<td>' + (v.asset_count || 0) + '</td>'
      + '<td style="white-space:nowrap;">'
      + '<button type="button" class="btn btn-secondary btn-sm" onclick="pnAddSsid('+v.id+')" title="Add SSID"><i class="fas fa-wifi"></i>+</button> '
      + '<button type="button" class="btn btn-secondary btn-sm" onclick="pnEditVlan('+v.id+')" title="Edit VLAN"><i class="fas fa-edit"></i></button> '
      + '<button type="button" class="btn btn-secondary btn-sm" onclick="pnDeleteVlan('+v.id+', \''+esc(v.name).replace(/'/g,'&#39;')+'\')" title="Delete VLAN"><i class="fas fa-trash"></i></button>'
      + '</td>'
      + '</tr>'
      + '<tr><td colspan="6" style="background:rgba(255,255,255,0.03);">' + ssids + '</td></tr>';
  }

  function networkCard(n){
    var vlanRows = (n.vlans||[]).map(vlanRow).join('');
    var vlanTable = (n.vlans||[]).length
      ? '<div class="table-container"><table class="client-table-simple"><thead><tr><th>VLAN</th><th>Name</th><th>CIDR</th><th>Purpose</th><th>Assets</th><th></th></tr></thead><tbody>' + vlanRows + '</tbody></table></div>'
      : '<p class="muted" style="margin:6px 0;">No VLANs yet.</p>';
    return '<div style="border:1px solid rgba(255,255,255,0.15); border-radius:8px; padding:12px; margin-bottom:14px;">'
      + '<div style="display:flex; justify-content:space-between; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:6px;">'
      + '<strong style="font-size:1.02rem;"><i class="fas fa-network-wired"></i> ' + esc(n.name) + (n.cidr ? ' <span class="muted">' + esc(n.cidr) + '</span>' : '') + '</strong>'
      + '<span style="display:flex; gap:6px;">'
      + '<button type="button" class="btn btn-secondary btn-sm" onclick="pnAddVlan('+n.id+')"><i class="fas fa-plus"></i> VLAN</button>'
      + '<button type="button" class="btn btn-secondary btn-sm" onclick="pnEditNetwork('+n.id+')"><i class="fas fa-edit"></i></button>'
      + '<button type="button" class="btn btn-secondary btn-sm" onclick="pnDeleteNetwork('+n.id+', \''+esc(n.name).replace(/'/g,'&#39;')+'\')"><i class="fas fa-trash"></i></button>'
      + '</span>'
      + '</div>'
      + (n.description ? '<p class="muted" style="margin:0 0 8px 0; font-size:0.88rem;">' + esc(n.description) + '</p>' : '')
      + vlanTable
      + '</div>';
  }

  async function load(){
    var el = document.getElementById('out');
    try {
      var j = await api('/api/portal/organization/networks?include=vlans');
      networks = j.networks || [];
      if (!networks.length) {
        el.innerHTML = '<p class="muted" style="margin:0;">No networks yet. Create the first one to start organizing VLANs and SSIDs.</p>';
        return;
      }
      el.innerHTML = networks.map(networkCard).join('');
    } catch(e) {
      el.innerHTML = '<p class="muted" style="margin:0;">' + esc(e.message) + '</p>';
    }
  }

  window.pnReload = load;
  load();
})();
</script>
{% endblock %}