DebTik/internal/web/static/app.js

// Proxmox RouterOS Frontend Application Logic
let state = {
  interfaces: [],
  vlans: [],
  systemStatus: null,
  vpnStatus: null,
  routes: [],
  activeTab: 'dashboard',
  fwSubTab: 'filter',
  routesSubTab: 'routes',
  pppSubTab: 'secrets',
  eoipTunnels: [],
  pppSecrets: [],
  pppProfiles: [],
  pppActiveSessions: [],
  pppoeServer: null,
  pptpServer: null,
  l2tpServer: null,
  ipsecServer: null,
  ifaceFilter: 'all',
  currentModalIface: null,
  isPolling: true,
  expandedParents: new Set(['eth0']),
  pppoeData: null,
  wgData: null,
  ipsecData: null,
  l2tpData: null,
  pptpData: null,
  fwSummary: null,
  filterRules: [],
  natRules: [],
  mangleRules: [],
  addressLists: [],
  connections: [],
  policyRules: [],
  routingTables: []
};

const API_BASE = '/api';

// Initialize on page load
document.addEventListener('DOMContentLoaded', () => {
  const hash = window.location.hash.replace('#', '') || 'dashboard';
  navigate(hash);

  fetchData();
  // Live polling every 2.5 seconds
  setInterval(() => {
    if (state.isPolling) {
      fetchData(false);
    }
  }, 2500);
});

// Navigation Handler
function navigate(tabName) {
  state.activeTab = tabName;
  window.location.hash = tabName;

  // Update nav links styling
  document.querySelectorAll('.nav-link').forEach(link => {
    link.className = 'nav-link flex items-center justify-between px-3 py-2 rounded-lg text-xs font-medium transition-all group text-slate-300 hover:bg-slate-800/80 hover:text-white';
  });

  const activeNav = document.getElementById(`nav-${tabName}`);
  if (activeNav) {
    activeNav.className = 'nav-link flex items-center justify-between px-3 py-2 rounded-lg text-xs font-medium transition-all group bg-brand-500/10 text-brand-400 border border-brand-500/20';
  }

  // Update page headers
  const titles = {
    dashboard: { title: 'Dashboard Overview', sub: 'Live router performance and network telemetry' },
    interfaces: { title: 'Network Interfaces', sub: 'Hierarchical view of physical interfaces and nested 802.1Q VLANs' },
    vlans: { title: 'VLAN Virtual Networks', sub: 'IEEE 802.1Q sub-interface segmentation and routing' },
    firewall: { title: 'MikroTik Firewall', sub: 'Filter rules, NAT, Mangle, Address Lists & Active Connections tracking' },
    routes: { title: 'Routing & Policy', sub: 'Routing tables, static routes (DAS/DAC), and policy routing rules' },
    'dynamic-routing': { title: 'Dynamic Routing (BGP & OSPF)', sub: 'FRRouting BGP peering sessions, advertised networks, and OSPFv2 link-state routing' },
    ppp: { title: 'PPP Servers & Secrets', sub: 'MikroTik RouterOS user accounts, IP pools and VPN server concentrators' },
    eoip: { title: 'EoIP Tunnels', sub: 'Ethernet over IP Layer 2 tunneling (MikroTik RouterOS style)' },
    pppoe: { title: 'PPPoE Client WAN', sub: 'Point-to-Point Protocol over Ethernet WAN access' },
    wireguard: { title: 'WireGuard Kernel VPN', sub: 'Modern ultra-fast cryptographic VPN tunnel manager' },
    ipsec: { title: 'IPSec (IKEv2) strongSwan', sub: 'Enterprise Site-to-Site & Roadwarrior IPSec controller' },
    l2tp: { title: 'L2TP VPN Client', sub: 'Layer 2 Tunneling Protocol via xl2tpd' },
    pptp: { title: 'PPTP VPN Client', sub: 'Point-to-Point Tunneling Protocol with MPPE-128 encryption' },
    persistence: { title: 'Debian Configuration', sub: 'Native /etc/network/interfaces.d/ persistence manager' }
  };

  const header = titles[tabName] || titles.dashboard;
  const pTitle = document.getElementById('page-title');
  if (pTitle) pTitle.innerText = header.title;
  const pSub = document.getElementById('page-subtitle');
  if (pSub) pSub.innerText = header.sub;

  // Toggle sections dynamically for all section elements
  document.querySelectorAll('main section[id^="section-"]').forEach(el => {
    if (el.id === `section-${tabName}`) {
      el.classList.remove('hidden');
    } else {
      el.classList.add('hidden');
    }
  });

  if (tabName === 'firewall') loadFirewall();
  if (tabName === 'routes') loadRoutes();
  if (tabName === 'dynamic-routing') loadDynamicRouting();
  if (tabName === 'ppp') loadPPP();
  if (tabName === 'eoip') loadEoIP();
  if (tabName === 'persistence') loadDebianConfig();
  if (tabName === 'pppoe') loadPPPoE();
  if (tabName === 'wireguard') loadWireGuard();
  if (tabName === 'ipsec') loadIPSec();
  if (tabName === 'l2tp') loadL2TP();
  if (tabName === 'pptp') loadPPTP();
}

// Fetch all core system, network and VPN telemetry
async function fetchData(isManual = false) {
  const spinner = document.getElementById('refresh-spinner');
  if (isManual && spinner) spinner.classList.add('animate-spin');

  try {
    const [statusRes, ifacesRes, vlansRes, vpnRes, fwRes, dynRes] = await Promise.all([
      fetch(`${API_BASE}/system/status`),
      fetch(`${API_BASE}/interfaces`),
      fetch(`${API_BASE}/vlans`),
      fetch(`${API_BASE}/vpn/status`),
      fetch(`${API_BASE}/firewall/summary`),
      fetch(`${API_BASE}/routing/dynamic/summary`)
    ]);

    if (statusRes.ok) state.systemStatus = await statusRes.json();
    if (ifacesRes.ok) {
      const ifacesData = await ifacesRes.json();
      const rawIfaces = Array.isArray(ifacesData) ? ifacesData : [];
      state.interfaces = rawIfaces.filter(i => {
        if (!i.name) return false;
        if (i.name.startsWith('ep_')) return false;
        return !['gre0', 'gretap0', 'erspan0', 'sit0', 'tunl0', 'ip6tnl0', 'ip6gre0', 'ip6erspan0'].includes(i.name);
      });
    }
    if (vlansRes.ok) {
      const vlansData = await vlansRes.json();
      state.vlans = Array.isArray(vlansData) ? vlansData : [];
    }
    if (vpnRes.ok) state.vpnStatus = await vpnRes.json();
    if (fwRes && fwRes.ok) state.fwSummary = await fwRes.json();
    if (dynRes && dynRes.ok) state.dynSummary = await dynRes.json();

    updateSystemMetrics();
    updateBadges();

    if (state.activeTab === 'dashboard') renderDashboard();
    if (state.activeTab === 'interfaces') renderInterfacesList();
    if (state.activeTab === 'vlans') renderVlansList();
    if (state.activeTab === 'firewall') loadFirewall(false);
    if (state.activeTab === 'routes') loadRoutes(false);
    if (state.activeTab === 'dynamic-routing') loadDynamicRouting(false);
    if (state.activeTab === 'ppp') loadPPP(false);
    if (state.activeTab === 'eoip') loadEoIP(false);
    if (state.activeTab === 'pppoe') loadPPPoE(false);
    if (state.activeTab === 'wireguard') loadWireGuard(false);
    if (state.activeTab === 'ipsec') loadIPSec(false);
    if (state.activeTab === 'l2tp') loadL2TP(false);
    if (state.activeTab === 'pptp') loadPPTP(false);

  } catch (err) {
    console.error('Failed to fetch router state:', err);
  } finally {
    if (isManual && spinner) {
      setTimeout(() => spinner.classList.remove('animate-spin'), 300);
    }
  }
}

// Update Top KPI and Sidebar Telemetry
function updateSystemMetrics() {
  const s = state.systemStatus;
  const v = state.vpnStatus;
  if (!s) return;

  // Sidebar
  document.getElementById('side-hostname').innerText = s.hostname || 'debian-lxc';
  document.getElementById('side-uptime').innerText = s.uptime_human || '0m';
  document.getElementById('side-gateway-ip').innerText = s.default_gateway ? `GW: ${s.default_gateway}` : 'GW: Isolated';

  if (s.cpu_pct !== undefined) {
    const pct = s.cpu_pct;
    document.getElementById('side-cpu-val').innerText = `${pct.toFixed(1)}%`;
    document.getElementById('side-cpu-bar').style.width = `${Math.max(4, Math.min(100, pct))}%`;
    const loadStr = s.cpu_load ? s.cpu_load.join(', ') : '-';
    document.getElementById('side-cpu-bar').title = `Container: ${pct}% | Host Loadavg: ${loadStr} (${s.cpu_cores || 1} cores)`;
  } else if (s.cpu_load && s.cpu_load.length > 0) {
    const cores = s.cpu_cores || 4;
    const pct = Math.min(100, Math.round((parseFloat(s.cpu_load[0]) / cores) * 100));
    document.getElementById('side-cpu-val').innerText = `${pct}%`;
    document.getElementById('side-cpu-bar').style.width = `${Math.max(4, pct)}%`;
  }

  document.getElementById('side-ram-val').innerText = `${Math.round(s.mem_usage_pct || 0)}%`;
  document.getElementById('side-ram-bar').style.width = `${Math.max(5, Math.round(s.mem_usage_pct || 0))}%`;

  // Dashboard Stats
  document.getElementById('stat-ifaces-up').innerText = s.up_ifaces || 0;
  document.getElementById('stat-ifaces-total').innerText = `${s.total_ifaces || 0} Total`;
  document.getElementById('stat-ifaces-down').innerText = `${s.down_ifaces || 0} DOWN`;
  document.getElementById('stat-vlans-count').innerText = s.vlan_ifaces || 0;

  // VPN Status Indicators
  if (v) {
    const totalActive = v.total_active_tunnels || 0;
    const statVpnActive = document.getElementById('stat-vpn-active');
    if (statVpnActive) statVpnActive.innerText = totalActive;

    const tunnelsDot = document.getElementById('tunnels-dot');
    const tunnelsLabel = document.getElementById('tunnels-label');
    if (tunnelsDot && tunnelsLabel) {
      if (totalActive > 0) {
        tunnelsDot.className = 'w-2 h-2 rounded-full bg-emerald-400 animate-pulse';
        tunnelsLabel.innerText = `${totalActive} Active VPN Tunnel${totalActive > 1 ? 's' : ''}`;
      } else {
        tunnelsDot.className = 'w-2 h-2 rounded-full bg-slate-500';
        tunnelsLabel.innerText = '0 Active VPN Tunnels';
      }
    }

    setDotBadge('badge-pppoe-status', (v.active_pppoe || 0) > 0 || v.pppoe_connected);
    setDotBadge('badge-wg-status', (v.active_wireguard || 0) > 0 || v.wireguard_active);
    setDotBadge('badge-ipsec-status', (v.active_ipsec || 0) > 0 || v.ipsec_active);
    setDotBadge('badge-l2tp-status', (v.active_l2tp || 0) > 0 || v.l2tp_connected);
    setDotBadge('badge-pptp-status', (v.active_pptp || 0) > 0 || v.pptp_connected);
  }

  // Total Live Bandwidth Rate
  let totalRx = 0;
  let totalTx = 0;
  (state.interfaces || []).forEach(i => {
    if (i.rate) {
      totalRx += i.rate.rx_bytes_sec || 0;
      totalTx += i.rate.tx_bytes_sec || 0;
    }
  });

  document.getElementById('stat-traffic-rx').innerText = formatTraffic(totalRx);
  document.getElementById('stat-traffic-tx').innerText = formatTraffic(totalTx);
}

function setDotBadge(id, active) {
  const el = document.getElementById(id);
  if (!el) return;
  if (active) {
    el.className = 'w-2 h-2 rounded-full bg-emerald-400 shadow-sm shadow-emerald-400/80';
  } else {
    el.className = 'w-2 h-2 rounded-full bg-slate-600';
  }
}

function updateBadges() {
  const bIfaces = document.getElementById('badge-ifaces-count');
  if (bIfaces) bIfaces.innerText = (state.interfaces || []).length;
  const bVlans = document.getElementById('badge-vlans-count');
  if (bVlans) bVlans.innerText = (state.vlans || []).length;
  if (state.fwSummary) {
    const totalFwRules = (state.fwSummary.filter_rules_count || 0) + (state.fwSummary.nat_rules_count || 0) + (state.fwSummary.mangle_rules_count || 0);
    const badgeFw = document.getElementById('badge-firewall-count');
    if (badgeFw) badgeFw.innerText = totalFwRules;
  }
  if (state.vpnStatus) {
    const v = state.vpnStatus;
    const bEoIP = document.getElementById('badge-eoip-count');
    if (bEoIP) bEoIP.innerText = v.total_eoip || 0;
    const bPPPSess = document.getElementById('badge-ppp-sessions');
    if (bPPPSess) bPPPSess.innerText = v.total_ppp_sessions || 0;
    setDotBadge('badge-pppoe-status', v.active_pppoe > 0 || v.pppoe_server_running);
    setDotBadge('badge-wg-status', v.active_wireguard > 0);
    setDotBadge('badge-ipsec-status', v.active_ipsec > 0 || v.ipsec_server_running);
    setDotBadge('badge-l2tp-status', v.active_l2tp > 0 || v.l2tp_server_running);
    setDotBadge('badge-pptp-status', v.active_pptp > 0 || v.pptp_server_running);
  }
  if (state.dynSummary) {
    const d = state.dynSummary;
    setDotBadge('badge-bgp-dot', d.bgp_running);
    setDotBadge('badge-ospf-dot', d.ospf_running);
  }
}

// Render Dashboard View
function renderDashboard() {
  const matrix = document.getElementById('port-matrix');
  matrix.innerHTML = '';

  (state.interfaces || []).forEach(iface => {
    const isUp = iface.state === 'UP';
    const isVlan = iface.is_vlan;

    const portCard = document.createElement('div');
    portCard.className = `p-3 rounded-xl border transition-all cursor-pointer select-none group ${
      isUp
        ? (isVlan ? 'bg-cyan-950/20 border-cyan-800/60 hover:border-cyan-500' : 'bg-slate-800/80 border-slate-700/80 hover:border-brand-500')
        : 'bg-slate-900/40 border-slate-800/60 opacity-60 hover:opacity-100 hover:border-slate-700'
    }`;
    portCard.onclick = () => openIfaceModal(iface.name);

    let statusPillClass = isUp ? 'bg-emerald-500 shadow-sm shadow-emerald-500/50' : 'bg-rose-500';
    if (isVlan) statusPillClass = isUp ? 'bg-cyan-400 shadow-sm shadow-cyan-400/50' : 'bg-rose-500';

    portCard.innerHTML = `
      <div class="flex items-center justify-between mb-2">
        <span class="font-bold text-xs font-mono text-white group-hover:text-brand-400 transition truncate">${iface.name}</span>
        <span class="w-2 h-2 rounded-full ${statusPillClass}"></span>
      </div>
      <div class="text-[11px] font-mono text-slate-300 truncate">${iface.ipv4 && iface.ipv4.length > 0 ? iface.ipv4[0] : (iface.mac || 'No IP')}</div>
      <div class="mt-2 flex items-center justify-between text-[10px] text-slate-400">
        <span class="uppercase tracking-wider font-semibold">${isVlan ? `VLAN ${iface.vlan_id}` : iface.type}</span>
        <span>${iface.rate?.rx_human || '0 B/s'}</span>
      </div>
    `;
    matrix.appendChild(portCard);
  });

  const ifaceTbody = document.getElementById('quick-interfaces-table');
  ifaceTbody.innerHTML = '';
  (state.interfaces || []).slice(0, 6).forEach(i => {
    const isUp = i.state === 'UP';
    const tr = document.createElement('tr');
    tr.className = 'hover:bg-slate-800/40 transition cursor-pointer';
    tr.onclick = () => openIfaceModal(i.name);
    tr.innerHTML = `
      <td class="py-2.5 font-bold text-white flex items-center gap-2">
        <span class="w-1.5 h-1.5 rounded-full ${isUp ? 'bg-emerald-400' : 'bg-rose-400'}"></span>
        <span>${i.name}</span>
      </td>
      <td class="py-2.5 text-slate-300 font-sans"><span class="px-1.5 py-0.5 rounded text-[10px] bg-slate-800 text-slate-300">${i.role || 'LAN'}</span></td>
      <td class="py-2.5 text-slate-300">${i.ipv4 && i.ipv4.length > 0 ? i.ipv4[0] : '<span class="text-slate-600">-</span>'}</td>
      <td class="py-2.5 text-right font-sans font-semibold ${isUp ? 'text-emerald-400' : 'text-rose-400'}">${i.state}</td>
    `;
    ifaceTbody.appendChild(tr);
  });

  const vlanTbody = document.getElementById('quick-vlans-table');
  vlanTbody.innerHTML = '';
  const vlans = state.vlans || [];
  if (vlans.length === 0) {
    vlanTbody.innerHTML = `<tr><td colspan="4" class="py-4 text-center text-slate-500 font-sans">No VLANs configured. Click "+ Add" above to create one.</td></tr>`;
  } else {
    vlans.slice(0, 6).forEach(v => {
      const tr = document.createElement('tr');
      tr.className = 'hover:bg-slate-800/40 transition cursor-pointer';
      tr.onclick = () => openIfaceModal(v.name);
      tr.innerHTML = `
        <td class="py-2.5"><span class="px-2 py-0.5 rounded text-[11px] bg-cyan-950 text-cyan-400 border border-cyan-800 font-bold">VLAN ${v.vlan_id}</span></td>
        <td class="py-2.5 text-white font-bold">${v.name}</td>
        <td class="py-2.5 text-slate-300">${v.ipv4 && v.ipv4.length > 0 ? v.ipv4[0] : '<span class="text-slate-600">Unnumbered</span>'}</td>
        <td class="py-2.5 text-right text-slate-400">${v.parent_name || 'eth0'}</td>
      `;
      vlanTbody.appendChild(tr);
    });
  }
}

// Expand / Collapse Handlers
function toggleExpand(parentName) {
  if (state.expandedParents.has(parentName)) {
    state.expandedParents.delete(parentName);
  } else {
    state.expandedParents.add(parentName);
  }
  renderInterfacesList();
}

function expandAllIfaces(expand) {
  if (expand) {
    (state.interfaces || []).forEach(i => {
      if (!i.is_vlan) state.expandedParents.add(i.name);
    });
  } else {
    state.expandedParents.clear();
  }
  renderInterfacesList();
}

// Filter and Render Hierarchical Interfaces List
function filterIfaces(filter) {
  state.ifaceFilter = filter;
  document.querySelectorAll('.filter-btn').forEach(btn => {
    btn.className = 'filter-btn px-3 py-1.5 rounded-lg text-xs font-medium text-slate-400 hover:bg-slate-800 hover:text-white';
  });
  const activeBtn = document.getElementById(`filter-${filter}`);
  if (activeBtn) {
    activeBtn.className = 'filter-btn px-3 py-1.5 rounded-lg text-xs font-medium bg-slate-800 text-white border border-slate-700';
  }
  renderInterfacesList();
}

function renderInterfacesList() {
  const tbody = document.getElementById('interfaces-tree-tbody');
  const emptyState = document.getElementById('interfaces-empty-state');
  const summary = document.getElementById('ifaces-list-summary');
  const query = (document.getElementById('iface-search')?.value || '').toLowerCase();

  tbody.innerHTML = '';

  const allIfaces = state.interfaces || [];
  const allVlans = state.vlans || [];

  const parentIfaces = allIfaces.filter(i => !i.is_vlan);

  const filteredParents = parentIfaces.filter(parent => {
    const childVlans = allVlans.filter(v => v.parent_name === parent.name || v.name.startsWith(parent.name + '.'));

    if (query) {
      const matchParent = parent.name.toLowerCase().includes(query) || (parent.role || '').toLowerCase().includes(query);
      const matchVlan = childVlans.some(v => v.name.toLowerCase().includes(query) || String(v.vlan_id).includes(query) || (v.description || '').toLowerCase().includes(query));
      if (!matchParent && !matchVlan) return false;
    }

    if (state.ifaceFilter === 'has_vlans') return childVlans.length > 0;
    if (state.ifaceFilter === 'physical') return parent.type !== 'loopback';
    if (state.ifaceFilter === 'up') return parent.state === 'UP';
    return true;
  });

  if (summary) {
    summary.innerText = `${parentIfaces.length} Physical/Parent Links • ${allVlans.length} Active VLANs`;
  }

  if (filteredParents.length === 0) {
    emptyState?.classList.remove('hidden');
    return;
  }
  emptyState?.classList.add('hidden');

  filteredParents.forEach(parent => {
    const isUp = parent.state === 'UP';
    const childVlans = allVlans.filter(v => v.parent_name === parent.name || v.name.startsWith(parent.name + '.'));
    const isExpanded = state.expandedParents.has(parent.name);

    const parentRow = document.createElement('tr');
    parentRow.className = `hover:bg-slate-800/50 transition border-b border-slate-800/80 ${isExpanded ? 'bg-slate-900/80' : ''}`;

    parentRow.innerHTML = `
      <td class="py-3 px-3 text-center">
        <button onclick="toggleExpand('${parent.name}')" title="${isExpanded ? 'Collapse VLANs' : 'Expand VLANs'}"
                class="w-6 h-6 rounded flex items-center justify-center hover:bg-slate-800 text-slate-400 hover:text-white transition">
          <svg class="w-4 h-4 chevron-icon ${isExpanded ? 'chevron-open text-cyan-400' : 'text-slate-500'}" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M9 5l7 7-7 7" />
          </svg>
        </button>
      </td>
      <td class="py-3 px-4">
        <div class="flex items-center space-x-2.5">
          <div class="w-7 h-7 rounded-lg bg-slate-800 border border-slate-700/80 flex items-center justify-center text-[10px] font-bold text-slate-300">
            ${parent.type === 'loopback' ? 'LO' : 'NIC'}
          </div>
          <div>
            <div class="flex items-center gap-2">
              <span class="font-bold text-white text-sm cursor-pointer hover:text-cyan-400" onclick="toggleExpand('${parent.name}')">${parent.name}</span>
              ${childVlans.length > 0
                ? `<span onclick="toggleExpand('${parent.name}')" class="cursor-pointer text-[10px] bg-cyan-950 text-cyan-400 border border-cyan-800/60 px-2 py-0.5 rounded-full font-bold hover:bg-cyan-900 transition">${childVlans.length} VLAN${childVlans.length > 1 ? 's' : ''}</span>`
                : `<span onclick="toggleExpand('${parent.name}')" class="cursor-pointer text-[10px] bg-slate-800/60 text-slate-500 px-1.5 py-0.5 rounded font-mono hover:text-slate-300">0 VLANs</span>`
              }
            </div>
            <div class="text-[10px] text-slate-500 font-sans mt-0.5">${parent.type}</div>
          </div>
        </div>
      </td>
      <td class="py-3 px-4 font-sans">
        <div class="flex items-center gap-1.5">
          <span class="px-2 py-0.5 rounded text-[10px] font-semibold bg-slate-800 text-slate-300 border border-slate-700/60">${parent.role || 'LAN'}</span>
          <span class="text-xs text-slate-400 truncate max-w-[120px]">${parent.description || '-'}</span>
        </div>
      </td>
      <td class="py-3 px-4">
        ${parent.ipv4 && parent.ipv4.length > 0
          ? `<div class="text-white font-medium">${parent.ipv4[0]}</div>`
          : '<span class="text-slate-600 font-sans">Unassigned</span>'
        }
      </td>
      <td class="py-3 px-4 text-slate-400 text-[11px]">
        <div>${parent.mac || 'N/A'}</div>
        <div class="text-[10px] text-slate-500">MTU ${parent.mtu}</div>
      </td>
      <td class="py-3 px-4 text-[11px]">
        <div class="flex items-center space-x-2">
          <span class="text-emerald-400">↓ ${parent.rate?.rx_human || '0 B/s'}</span>
          <span class="text-cyan-400">↑ ${parent.rate?.tx_human || '0 B/s'}</span>
        </div>
      </td>
      <td class="py-3 px-4 font-sans">
        <button onclick="toggleInterfaceState('${parent.name}', '${isUp ? 'down' : 'up'}')"
                class="flex items-center gap-1.5 text-xs font-semibold px-2.5 py-1 rounded-full transition ${
                  isUp ? 'bg-emerald-500/10 text-emerald-400 border border-emerald-500/30 hover:bg-rose-500/10 hover:text-rose-400 hover:border-rose-500/30' : 'bg-rose-500/10 text-rose-400 border border-rose-500/30 hover:bg-emerald-500/10 hover:text-emerald-400'
                }" title="Click to toggle link status">
          <span class="w-1.5 h-1.5 rounded-full ${isUp ? 'bg-emerald-400' : 'bg-rose-400'}"></span>
          <span>${parent.state}</span>
        </button>
      </td>
      <td class="py-3 px-4 text-right space-x-2 font-sans">
        <button onclick="openVlanModal('${parent.name}')"
                class="text-xs bg-cyan-950/60 hover:bg-cyan-900 text-cyan-300 font-semibold px-2.5 py-1 rounded-lg border border-cyan-800/70 shadow-sm transition">
          + Add VLAN
        </button>
        <button onclick="openIfaceModal('${parent.name}')"
                class="text-xs bg-slate-800 hover:bg-slate-700 text-white font-medium px-2.5 py-1 rounded-lg border border-slate-700 transition">
          Configure
        </button>
      </td>
    `;
    tbody.appendChild(parentRow);

    if (isExpanded) {
      const drawerRow = document.createElement('tr');
      drawerRow.className = 'bg-slate-950/80 border-b border-slate-800/90';

      const drawerCell = document.createElement('td');
      drawerCell.colSpan = 8;
      drawerCell.className = 'p-0';

      drawerCell.innerHTML = `
        <div class="py-4 pl-12 pr-6 border-l-4 border-cyan-500 bg-gradient-to-r from-cyan-950/20 via-slate-900/40 to-transparent">
          <div class="flex items-center justify-between mb-3">
            <div class="flex items-center space-x-3">
              <span class="font-bold text-xs text-white uppercase tracking-wider flex items-center gap-1.5 font-sans">
                <span>VLAN Sub-interfaces on <code class="text-cyan-300 lowercase">${parent.name}</code></span>
              </span>
              <span class="text-[11px] bg-cyan-950 text-cyan-400 px-2 py-0.5 rounded-full border border-cyan-800/60 font-mono">
                ${childVlans.length} Attached
              </span>
            </div>
            <button onclick="openVlanModal('${parent.name}')"
                    class="flex items-center space-x-1.5 text-xs bg-cyan-600 hover:bg-cyan-500 text-white font-semibold px-3 py-1.5 rounded-lg shadow-md shadow-cyan-500/20 transition font-sans">
              <span>+ Create VLAN on ${parent.name}</span>
            </button>
          </div>

          ${childVlans.length === 0 ? `
            <div class="p-6 text-center border border-dashed border-slate-800 rounded-xl bg-slate-900/40 font-sans">
              <p class="text-xs text-slate-400 mb-2">No 802.1Q tagged VLANs have been created under <strong class="text-white">${parent.name}</strong> yet.</p>
              <button onclick="openVlanModal('${parent.name}')" class="inline-flex items-center space-x-1.5 text-xs text-cyan-400 hover:text-cyan-300 bg-cyan-950/60 border border-cyan-800/70 px-3 py-1.5 rounded-lg transition font-medium">
                <span>+ Create Your First VLAN on ${parent.name}</span>
              </button>
            </div>
          ` : `
            <div class="overflow-x-auto rounded-lg border border-slate-800 bg-slate-900/90 shadow-inner">
              <table class="w-full text-left text-xs font-mono">
                <thead class="text-slate-400 bg-slate-950/70 border-b border-slate-800 uppercase tracking-wider text-[10px] font-sans">
                  <tr>
                    <th class="py-2.5 px-4">VLAN ID</th>
                    <th class="py-2.5 px-4">Interface Device</th>
                    <th class="py-2.5 px-4">Subnet Gateway</th>
                    <th class="py-2.5 px-4">Role / Alias</th>
                    <th class="py-2.5 px-4">MTU</th>
                    <th class="py-2.5 px-4">Throughput</th>
                    <th class="py-2.5 px-4">Status</th>
                    <th class="py-2.5 px-4 text-right">Actions</th>
                  </tr>
                </thead>
                <tbody class="divide-y divide-slate-800/70">
                  ${childVlans.map(v => {
                    const isVlanUp = v.state === 'UP';
                    return `
                      <tr class="hover:bg-slate-800/40 transition">
                        <td class="py-2.5 px-4">
                          <span class="px-2 py-0.5 rounded text-xs font-bold bg-cyan-950 text-cyan-300 border border-cyan-800 shadow-sm">
                            VLAN ${v.vlan_id}
                          </span>
                        </td>
                        <td class="py-2.5 px-4 font-bold text-white flex items-center gap-1.5">
                          <span class="text-cyan-500">└─</span>
                          <span>${v.name}</span>
                        </td>
                        <td class="py-2.5 px-4 text-emerald-400 font-medium">
                          ${v.ipv4 && v.ipv4.length > 0 ? v.ipv4[0] : '<span class="text-slate-600 font-sans">Unassigned</span>'}
                        </td>
                        <td class="py-2.5 px-4 font-sans text-slate-300">
                          <span class="px-1.5 py-0.5 rounded text-[10px] bg-slate-800 text-slate-300 mr-1.5">${v.role || 'VLAN'}</span>
                          <span class="text-slate-400 text-xs">${v.description || '-'}</span>
                        </td>
                        <td class="py-2.5 px-4 text-slate-400">${v.mtu}</td>
                        <td class="py-2.5 px-4 text-[11px]">
                          <span class="text-emerald-400">↓ ${v.rate?.rx_human || '0 B/s'}</span>
                          <span class="text-cyan-400 ml-1.5">↑ ${v.rate?.tx_human || '0 B/s'}</span>
                        </td>
                        <td class="py-2.5 px-4 font-sans">
                          <button onclick="toggleInterfaceState('${v.name}', '${isVlanUp ? 'down' : 'up'}')"
                                  class="flex items-center gap-1 text-[11px] font-semibold px-2 py-0.5 rounded-full ${
                                    isVlanUp ? 'bg-emerald-500/10 text-emerald-400 border border-emerald-500/30' : 'bg-rose-500/10 text-rose-400 border border-rose-500/30'
                                  }">
                            <span class="w-1.5 h-1.5 rounded-full ${isVlanUp ? 'bg-emerald-400' : 'bg-rose-400'}"></span>
                            <span>${v.state}</span>
                          </button>
                        </td>
                        <td class="py-2.5 px-4 text-right space-x-1.5 font-sans">
                          <button onclick="openIfaceModal('${v.name}')" class="text-xs bg-slate-800 hover:bg-slate-700 text-slate-200 px-2 py-0.5 rounded border border-slate-700">Edit</button>
                          <button onclick="confirmDeleteVlan('${v.name}')" class="text-xs text-rose-400 hover:text-rose-300 hover:bg-rose-950/40 px-2 py-0.5 rounded transition">Delete</button>
                        </td>
                      </tr>
                    `;
                  }).join('')}
                </tbody>
              </table>
            </div>
          `}
        </div>
      `;
      drawerRow.appendChild(drawerCell);
      tbody.appendChild(drawerRow);
    }
  });
}

// Render VLANs Dedicated View
function renderVlansList() {
  const tbody = document.getElementById('vlans-table-body');
  const emptyState = document.getElementById('vlans-empty-state');
  const countBadge = document.getElementById('vlans-table-count');
  const query = (document.getElementById('vlan-search')?.value || '').toLowerCase();

  tbody.innerHTML = '';
  const allVlans = state.vlans || [];
  countBadge.innerText = allVlans.length;

  const filtered = allVlans.filter(v => {
    if (!query) return true;
    return v.name.toLowerCase().includes(query) ||
           String(v.vlan_id).includes(query) ||
           (v.description || '').toLowerCase().includes(query) ||
           (v.ipv4 && v.ipv4.some(ip => ip.includes(query)));
  });

  if (allVlans.length === 0) {
    emptyState.classList.remove('hidden');
    return;
  }
  emptyState.classList.add('hidden');

  filtered.forEach(v => {
    const isUp = v.state === 'UP';
    const tr = document.createElement('tr');
    tr.className = 'hover:bg-slate-800/40 transition font-mono text-xs';

    tr.innerHTML = `
      <td class="py-3 px-4">
        <span class="px-2.5 py-1 rounded-md text-xs font-bold bg-cyan-950 text-cyan-300 border border-cyan-800/70 shadow-sm">
          VLAN ${v.vlan_id}
        </span>
      </td>
      <td class="py-3 px-4 font-bold text-white">${v.name}</td>
      <td class="py-3 px-4 text-slate-300">
        <span class="bg-slate-800 text-slate-200 px-2 py-0.5 rounded text-[11px]">${v.parent_name || 'eth0'}</span>
      </td>
      <td class="py-3 px-4 text-emerald-400 font-medium">
        ${v.ipv4 && v.ipv4.length > 0 ? v.ipv4[0] : '<span class="text-slate-600 font-sans">Unassigned</span>'}
      </td>
      <td class="py-3 px-4 text-slate-300 font-sans">
        <span class="text-slate-400 text-xs">${v.description || v.role || '-'}</span>
      </td>
      <td class="py-3 px-4 text-slate-400">${v.mtu}</td>
      <td class="py-3 px-4 font-sans">
        <button onclick="toggleInterfaceState('${v.name}', '${isUp ? 'down' : 'up'}')"
                class="flex items-center gap-1.5 text-xs font-semibold px-2 py-0.5 rounded-full ${
                  isUp ? 'bg-emerald-500/10 text-emerald-400 border border-emerald-500/30' : 'bg-rose-500/10 text-rose-400 border border-rose-500/30'
                }">
          <span class="w-1.5 h-1.5 rounded-full ${isUp ? 'bg-emerald-400' : 'bg-rose-400'}"></span>
          <span>${v.state}</span>
        </button>
      </td>
      <td class="py-3 px-4 text-right space-x-2 font-sans">
        <button onclick="openIfaceModal('${v.name}')" class="text-xs bg-slate-800 hover:bg-slate-700 text-slate-200 px-2.5 py-1 rounded border border-slate-700">Edit</button>
        <button onclick="confirmDeleteVlan('${v.name}')" class="text-xs text-rose-400 hover:text-rose-300 hover:bg-rose-950/40 px-2 py-1 rounded transition">Delete</button>
      </td>
    `;
    tbody.appendChild(tr);
  });
}

// Toggle interface UP / DOWN
async function toggleInterfaceState(name, newState) {
  try {
    const res = await fetch(`${API_BASE}/interfaces/${encodeURIComponent(name)}/state`, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ state: newState })
    });
    const data = await res.json();
    if (res.ok) {
      showToast('Interface Updated', `Interface ${name} is now ${newState.toUpperCase()}`, 'success');
      fetchData(false);
    } else {
      showToast('Error', data.message || 'Failed to toggle interface state', 'error');
    }
  } catch (err) {
    showToast('Error', err.message, 'error');
  }
}

// ---------------- MikroTik Flag & Utilities ----------------
function renderMikroTikFlag(running, disabled) {
  if (running) {
    return `<span class="inline-flex items-center justify-center w-5 h-5 rounded-md font-mono font-bold text-[11px] bg-emerald-500/20 text-emerald-400 border border-emerald-500/40 shadow-sm" title="Running (Connected)">R</span>`;
  }
  if (disabled) {
    return `<span class="inline-flex items-center justify-center w-5 h-5 rounded-md font-mono font-bold text-[11px] bg-rose-500/20 text-rose-400 border border-rose-500/40 shadow-sm" title="Disabled">X</span>`;
  }
  return `<span class="inline-flex items-center justify-center w-5 h-5 rounded-md font-mono font-bold text-[11px] text-slate-500 bg-slate-800/80 border border-slate-700/60" title="Idle / Disconnected">-</span>`;
}

function copyToClipboard(text, label = 'Text') {
  navigator.clipboard.writeText(text).then(() => {
    showToast('Copied', `${label} copied to clipboard`, 'success');
  }).catch(() => {
    prompt('Copy value:', text);
  });
}

// ======================== PPPoE Multi-Instance ========================
async function loadPPPoE(populateInputs = true) {
  try {
    const res = await fetch(`${API_BASE}/vpn/pppoe/clients`);
    const list = await res.json();
    state.pppoeList = Array.isArray(list) ? list : [];

    const badge = document.getElementById('pppoe-count-badge');
    if (badge) badge.innerText = `${state.pppoeList.length} Interface${state.pppoeList.length !== 1 ? 's' : ''}`;

    const tbody = document.getElementById('pppoe-table-body');
    const empty = document.getElementById('pppoe-empty');
    if (!tbody) return;
    tbody.innerHTML = '';

    if (state.pppoeList.length === 0) {
      if (empty) empty.classList.remove('hidden');
    } else {
      if (empty) empty.classList.add('hidden');
      state.pppoeList.forEach(inst => {
        const tr = document.createElement('tr');
        tr.className = 'hover:bg-slate-800/40 transition text-xs';
        tr.innerHTML = `
          <td class="py-2.5 px-3 text-center">${renderMikroTikFlag(inst.running, inst.disabled)}</td>
          <td class="py-2.5 px-3 font-bold text-white">${inst.name}</td>
          <td class="py-2.5 px-3 text-cyan-400 font-mono">${inst.interface}</td>
          <td class="py-2.5 px-3 text-slate-300 font-mono">${inst.username || '-'}</td>
          <td class="py-2.5 px-3 font-mono ${inst.assigned_ip ? 'text-emerald-400 font-bold' : 'text-slate-500'}">${inst.assigned_ip || '-'}</td>
          <td class="py-2.5 px-3 text-slate-400 font-mono">${inst.ppp_device || '-'}</td>
          <td class="py-2.5 px-3 text-center">
            <span class="px-2 py-0.5 rounded text-[10px] font-sans ${inst.default_route ? 'bg-blue-500/20 text-blue-300 border border-blue-500/30' : 'bg-slate-800 text-slate-500'}">
              ${inst.default_route ? 'Yes' : 'No'}
            </span>
          </td>
          <td class="py-2.5 px-3 text-right space-x-2 font-sans">
            ${inst.running ? `
              <button onclick="disconnectPPPoEInstance('${inst.name}')" class="text-xs text-rose-400 hover:text-rose-300">Disconnect</button>
            ` : `
              <button onclick="connectPPPoEInstance('${inst.name}')" class="text-xs bg-blue-600/30 hover:bg-blue-600/50 text-blue-300 px-2 py-0.5 rounded border border-blue-500/30">Connect</button>
            `}
            <button onclick="togglePPPoEState('${inst.name}', ${inst.disabled ? 'true' : 'false'})" class="text-xs text-slate-400 hover:text-white">
              ${inst.disabled ? 'Enable' : 'Disable'}
            </button>
            <button onclick="openEditPPPoEModal('${inst.name}')" class="text-xs text-slate-400 hover:text-white">Edit</button>
            <button onclick="deletePPPoEInstance('${inst.name}')" class="text-xs text-slate-500 hover:text-rose-400">Delete</button>
          </td>
        `;
        tbody.appendChild(tr);
      });
    }
  } catch (err) {
    console.error('Failed to load PPPoE:', err);
  }
}

function openAddPPPoEModal() {
  document.getElementById('pppoe-modal-title').innerText = 'Add PPPoE Client Interface';
  document.getElementById('pppoe-modal-edit-orig').value = '';
  document.getElementById('pppoe-modal-name').value = `pppoe-out${(state.pppoeList || []).length + 1}`;
  document.getElementById('pppoe-modal-name').readOnly = false;
  document.getElementById('pppoe-modal-user').value = '';
  document.getElementById('pppoe-modal-pass').value = '';
  document.getElementById('pppoe-modal-service').value = '';
  document.getElementById('pppoe-modal-mtu').value = '1492';
  document.getElementById('pppoe-modal-defroute').checked = true;
  document.getElementById('pppoe-modal-reconnect').checked = true;
  document.getElementById('pppoe-modal-disabled').checked = false;

  // Populate interfaces
  const sel = document.getElementById('pppoe-modal-iface');
  sel.innerHTML = '';
  (state.interfaces || []).forEach(i => {
    if (i.name === 'lo') return;
    const opt = document.createElement('option');
    opt.value = i.name;
    opt.innerText = `${i.name} (${i.role || i.type})`;
    sel.appendChild(opt);
  });

  document.getElementById('pppoe-modal').classList.remove('hidden');
}

function openEditPPPoEModal(name) {
  const inst = (state.pppoeList || []).find(i => i.name === name);
  if (!inst) return;

  document.getElementById('pppoe-modal-title').innerText = `Edit PPPoE Client: ${name}`;
  document.getElementById('pppoe-modal-edit-orig').value = name;
  document.getElementById('pppoe-modal-name').value = inst.name;
  document.getElementById('pppoe-modal-name').readOnly = true;
  document.getElementById('pppoe-modal-user').value = inst.username || '';
  document.getElementById('pppoe-modal-pass').value = inst.password || '';
  document.getElementById('pppoe-modal-service').value = inst.service_name || '';
  document.getElementById('pppoe-modal-mtu').value = inst.mtu || 1492;
  document.getElementById('pppoe-modal-defroute').checked = inst.default_route ?? true;
  document.getElementById('pppoe-modal-reconnect').checked = inst.auto_reconnect ?? true;
  document.getElementById('pppoe-modal-disabled').checked = !!inst.disabled;

  const sel = document.getElementById('pppoe-modal-iface');
  sel.innerHTML = '';
  (state.interfaces || []).forEach(i => {
    if (i.name === 'lo') return;
    const opt = document.createElement('option');
    opt.value = i.name;
    opt.innerText = `${i.name} (${i.role || i.type})`;
    if (i.name === inst.interface) opt.selected = true;
    sel.appendChild(opt);
  });

  document.getElementById('pppoe-modal').classList.remove('hidden');
}

function closePPPoEModal() {
  document.getElementById('pppoe-modal').classList.add('hidden');
}

async function submitSavePPPoE(e) {
  e.preventDefault();
  const name = document.getElementById('pppoe-modal-name').value.trim();
  const iface = document.getElementById('pppoe-modal-iface').value;
  const user = document.getElementById('pppoe-modal-user').value.trim();
  const pass = document.getElementById('pppoe-modal-pass').value;
  const service = document.getElementById('pppoe-modal-service').value.trim();
  const mtu = parseInt(document.getElementById('pppoe-modal-mtu').value, 10) || 1492;
  const defRoute = document.getElementById('pppoe-modal-defroute').checked;
  const reconnect = document.getElementById('pppoe-modal-reconnect').checked;
  const disabled = document.getElementById('pppoe-modal-disabled').checked;

  try {
    const res = await fetch(`${API_BASE}/vpn/pppoe/clients`, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        name,
        interface: iface,
        username: user,
        password: pass,
        service_name: service,
        mtu,
        default_route: defRoute,
        auto_reconnect: reconnect,
        disabled
      })
    });
    if (res.ok) {
      showToast('PPPoE Saved', `Configuration for ${name} saved`, 'success');
      closePPPoEModal();
      loadPPPoE(false);
      fetchData(false);
    } else {
      const err = await res.json();
      showToast('Error', err.message || 'Failed to save PPPoE', 'error');
    }
  } catch (err) {
    showToast('Error', err.message, 'error');
  }
}

async function connectPPPoEInstance(name) {
  try {
    const res = await fetch(`${API_BASE}/vpn/pppoe/clients/${encodeURIComponent(name)}/connect`, { method: 'POST' });
    if (res.ok) {
      showToast('Connecting', `Dialing ${name}...`, 'info');
      setTimeout(() => loadPPPoE(false), 2000);
    }
  } catch (err) {
    showToast('Error', err.message, 'error');
  }
}

async function disconnectPPPoEInstance(name) {
  try {
    const res = await fetch(`${API_BASE}/vpn/pppoe/clients/${encodeURIComponent(name)}/disconnect`, { method: 'POST' });
    if (res.ok) {
      showToast('Disconnected', `${name} session terminated`, 'info');
      setTimeout(() => loadPPPoE(false), 1000);
    }
  } catch (err) {
    showToast('Error', err.message, 'error');
  }
}

async function togglePPPoEState(name, enable) {
  try {
    const res = await fetch(`${API_BASE}/vpn/pppoe/clients/${encodeURIComponent(name)}/state`, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ enabled: enable })
    });
    if (res.ok) {
      showToast(enable ? 'Enabled' : 'Disabled', `${name} is now ${enable ? 'enabled' : 'disabled'}`, 'info');
      loadPPPoE(false);
    }
  } catch (err) {
    showToast('Error', err.message, 'error');
  }
}

async function deletePPPoEInstance(name) {
  if (!confirm(`Are you sure you want to delete PPPoE client ${name}?`)) return;
  try {
    const res = await fetch(`${API_BASE}/vpn/pppoe/clients/${encodeURIComponent(name)}`, { method: 'DELETE' });
    if (res.ok) {
      showToast('Deleted', `PPPoE client ${name} removed`, 'success');
      loadPPPoE(false);
      fetchData(false);
    }
  } catch (err) {
    showToast('Error', err.message, 'error');
  }
}

// ======================== WireGuard Multi-Interface & Multi-Peer ========================
state.wgSubTab = 'ifaces';

function switchWGSubTab(tab) {
  state.wgSubTab = tab;
  const ifacesPanel = document.getElementById('wg-subtab-ifaces');
  const peersPanel = document.getElementById('wg-subtab-peers');
  const ifacesBtn = document.getElementById('wg-subtab-btn-ifaces');
  const peersBtn = document.getElementById('wg-subtab-btn-peers');

  if (tab === 'ifaces') {
    ifacesPanel?.classList.remove('hidden');
    peersPanel?.classList.add('hidden');
    ifacesBtn.className = 'px-4 py-2.5 text-xs font-bold border-b-2 border-rose-500 text-white transition flex items-center gap-2';
    peersBtn.className = 'px-4 py-2.5 text-xs font-bold border-b-2 border-transparent text-slate-400 hover:text-slate-200 transition flex items-center gap-2';
  } else {
    ifacesPanel?.classList.add('hidden');
    peersPanel?.classList.remove('hidden');
    ifacesBtn.className = 'px-4 py-2.5 text-xs font-bold border-b-2 border-transparent text-slate-400 hover:text-slate-200 transition flex items-center gap-2';
    peersBtn.className = 'px-4 py-2.5 text-xs font-bold border-b-2 border-rose-500 text-white transition flex items-center gap-2';
    renderWGPeers();
  }
}

async function loadWireGuard(populateInputs = true) {
  try {
    const [ifacesRes, peersRes] = await Promise.all([
      fetch(`${API_BASE}/vpn/wireguard/interfaces`),
      fetch(`${API_BASE}/vpn/wireguard/peers`)
    ]);

    const ifaces = ifacesRes.ok ? await ifacesRes.json() : [];
    const peers = peersRes.ok ? await peersRes.json() : [];

    state.wgInterfaces = Array.isArray(ifaces) ? ifaces : [];
    state.wgPeers = Array.isArray(peers) ? peers : [];

    // Badges
    const ifacesCountBadge = document.getElementById('wg-ifaces-count');
    if (ifacesCountBadge) ifacesCountBadge.innerText = `${state.wgInterfaces.length} Interfaces`;
    const peersCountBadge = document.getElementById('wg-peers-count');
    if (peersCountBadge) peersCountBadge.innerText = `${state.wgPeers.length} Peers`;

    const subTabIfaces = document.getElementById('wg-subtab-badge-ifaces');
    if (subTabIfaces) subTabIfaces.innerText = state.wgInterfaces.length;
    const subTabPeers = document.getElementById('wg-subtab-badge-peers');
    if (subTabPeers) subTabPeers.innerText = state.wgPeers.length;

    // Render Interfaces
    const ifacesTbody = document.getElementById('wg-ifaces-table-body');
    const ifacesEmpty = document.getElementById('wg-ifaces-empty');
    if (ifacesTbody) {
      ifacesTbody.innerHTML = '';
      if (state.wgInterfaces.length === 0) {
        if (ifacesEmpty) ifacesEmpty.classList.remove('hidden');
      } else {
        if (ifacesEmpty) ifacesEmpty.classList.add('hidden');
        state.wgInterfaces.forEach(iface => {
          const peersOnIface = state.wgPeers.filter(p => p.interface === iface.name).length;
          const tr = document.createElement('tr');
          tr.className = 'hover:bg-slate-800/40 transition text-xs';
          tr.innerHTML = `
            <td class="py-2.5 px-3 text-center">${renderMikroTikFlag(iface.running, iface.disabled)}</td>
            <td class="py-2.5 px-3 font-bold text-white">${iface.name}</td>
            <td class="py-2.5 px-3 text-amber-400 font-mono">${iface.listen_port}</td>
            <td class="py-2.5 px-3 text-emerald-400 font-mono">${iface.address || '-'}</td>
            <td class="py-2.5 px-3 text-slate-300 font-mono">
              <span class="cursor-pointer hover:text-white" onclick="copyToClipboard('${iface.public_key}', 'Public Key')" title="Click to copy: ${iface.public_key}">
                ${(iface.public_key || '').substring(0, 10)}... 📋
              </span>
            </td>
            <td class="py-2.5 px-3 text-slate-400 font-mono">${iface.mtu || 1420}</td>
            <td class="py-2.5 px-3 text-center">
              <span class="px-2 py-0.5 rounded text-[10px] font-sans bg-slate-800 text-slate-300">${peersOnIface} peer${peersOnIface !== 1 ? 's' : ''}</span>
            </td>
            <td class="py-2.5 px-3 text-right space-x-2 font-sans">
              ${iface.running ? `
                <button onclick="stopWGInterface('${iface.name}')" class="text-xs text-rose-400 hover:text-rose-300">Stop</button>
              ` : `
                <button onclick="startWGInterface('${iface.name}')" class="text-xs bg-rose-600/30 hover:bg-rose-600/50 text-rose-300 px-2 py-0.5 rounded border border-rose-500/30">Start</button>
              `}
              <button onclick="toggleWGInterfaceState('${iface.name}', ${iface.disabled ? 'true' : 'false'})" class="text-xs text-slate-400 hover:text-white">
                ${iface.disabled ? 'Enable' : 'Disable'}
              </button>
              <button onclick="openEditWGInterfaceModal('${iface.name}')" class="text-xs text-slate-400 hover:text-white">Edit</button>
              <button onclick="deleteWGInterface('${iface.name}')" class="text-xs text-slate-500 hover:text-rose-400">Delete</button>
            </td>
          `;
          ifacesTbody.appendChild(tr);
        });
      }
    }

    // Populate filter dropdown in peers tab
    const filterSel = document.getElementById('wg-peers-filter-iface');
    if (filterSel) {
      const currentVal = filterSel.value;
      filterSel.innerHTML = '<option value="">All Interfaces</option>';
      state.wgInterfaces.forEach(i => {
        const opt = document.createElement('option');
        opt.value = i.name;
        opt.innerText = i.name;
        if (i.name === currentVal) opt.selected = true;
        filterSel.appendChild(opt);
      });
    }

    renderWGPeers();
  } catch (err) {
    console.error('Failed to load WireGuard:', err);
  }
}

function renderWGPeers() {
  const filterSel = document.getElementById('wg-peers-filter-iface');
  const selectedIface = filterSel ? filterSel.value : '';

  const tbody = document.getElementById('wg-peers-table-body');
  const empty = document.getElementById('wg-peers-empty');
  if (!tbody) return;
  tbody.innerHTML = '';

  const filtered = selectedIface ? state.wgPeers.filter(p => p.interface === selectedIface) : state.wgPeers;

  if (filtered.length === 0) {
    if (empty) empty.classList.remove('hidden');
  } else {
    if (empty) empty.classList.add('hidden');
    filtered.forEach(p => {
      const isOnline = p.latest_handshake && !p.latest_handshake.includes('Never');
      const tr = document.createElement('tr');
      tr.className = 'hover:bg-slate-800/40 transition text-xs';
      tr.innerHTML = `
        <td class="py-2.5 px-3 text-center">${renderMikroTikFlag(isOnline, p.disabled)}</td>
        <td class="py-2.5 px-3 font-mono font-bold text-rose-400">${p.interface}</td>
        <td class="py-2.5 px-3 font-bold text-white font-sans">${p.name || 'Unnamed'}</td>
        <td class="py-2.5 px-3 text-slate-300 font-mono">
          <span class="cursor-pointer hover:text-white" onclick="copyToClipboard('${p.public_key}', 'Peer Public Key')" title="${p.public_key}">
            ${p.public_key.substring(0, 10)}... 📋
          </span>
        </td>
        <td class="py-2.5 px-3 text-emerald-400 font-mono font-semibold">${(p.allowed_ips || []).join(', ')}</td>
        <td class="py-2.5 px-3 text-slate-400 font-mono">${p.endpoint_address ? (p.endpoint_address + (p.endpoint_port ? ':' + p.endpoint_port : '')) : '-'}</td>
        <td class="py-2.5 px-3 text-slate-300 font-sans">${p.latest_handshake || 'Never'}</td>
        <td class="py-2.5 px-3 font-mono text-[11px]">
          <span class="text-emerald-400">↓ ${p.transfer_rx_human || '0 B'}</span>
          <span class="text-cyan-400 ml-1">↑ ${p.transfer_tx_human || '0 B'}</span>
        </td>
        <td class="py-2.5 px-3 text-right font-sans space-x-2">
          <button onclick="openWGClientConfModal('${p.interface}', '${(p.allowed_ips || [])[0] || '10.10.0.2/32'}')" class="text-xs text-cyan-400 hover:text-cyan-300 font-semibold" title="Generate WireGuard Client Profile (.conf)">Config (.conf)</button>
          <button onclick="deleteWGPeer('${p.interface}', '${p.public_key}')" class="text-xs text-rose-400 hover:text-rose-300">Delete</button>
        </td>
      `;
      tbody.appendChild(tr);
    });
  }
}

function openAddWGInterfaceModal() {
  document.getElementById('wg-iface-modal-title').innerText = 'Add WireGuard Interface';
  document.getElementById('wg-iface-modal-edit-orig').value = '';
  document.getElementById('wg-iface-modal-name').value = `wg${(state.wgInterfaces || []).length}`;
  document.getElementById('wg-iface-modal-name').readOnly = false;
  document.getElementById('wg-iface-modal-port').value = 51820 + (state.wgInterfaces || []).length;
  document.getElementById('wg-iface-modal-addr').value = `10.${10 + (state.wgInterfaces || []).length}.0.1/24`;
  document.getElementById('wg-iface-modal-mtu').value = '1420';
  document.getElementById('wg-iface-modal-pubkey').value = '';
  document.getElementById('wg-iface-modal-privkey').value = '';
  document.getElementById('wg-iface-modal-disabled').checked = false;

  generateWGInterfaceKeys();
  document.getElementById('wg-iface-modal').classList.remove('hidden');
}

function openEditWGInterfaceModal(name) {
  const iface = (state.wgInterfaces || []).find(i => i.name === name);
  if (!iface) return;

  document.getElementById('wg-iface-modal-title').innerText = `Edit WireGuard Interface: ${name}`;
  document.getElementById('wg-iface-modal-edit-orig').value = name;
  document.getElementById('wg-iface-modal-name').value = iface.name;
  document.getElementById('wg-iface-modal-name').readOnly = true;
  document.getElementById('wg-iface-modal-port').value = iface.listen_port || 51820;
  document.getElementById('wg-iface-modal-addr').value = iface.address || '';
  document.getElementById('wg-iface-modal-mtu').value = iface.mtu || 1420;
  document.getElementById('wg-iface-modal-pubkey').value = iface.public_key || '';
  document.getElementById('wg-iface-modal-privkey').value = iface.private_key || '';
  document.getElementById('wg-iface-modal-disabled').checked = !!iface.disabled;

  document.getElementById('wg-iface-modal').classList.remove('hidden');
}

function closeAddWGInterfaceModal() {
  document.getElementById('wg-iface-modal').classList.add('hidden');
}

async function generateWGInterfaceKeys() {
  try {
    const res = await fetch(`${API_BASE}/vpn/wireguard/genkeys`, { method: 'POST' });
    const keys = await res.json();
    if (res.ok) {
      document.getElementById('wg-iface-modal-privkey').value = keys.private_key;
      document.getElementById('wg-iface-modal-pubkey').value = keys.public_key;
    }
  } catch (err) {
    showToast('Error', 'Failed to generate keypair: ' + err.message, 'error');
  }
}

async function submitSaveWGInterface(e) {
  e.preventDefault();
  const name = document.getElementById('wg-iface-modal-name').value.trim();
  const port = parseInt(document.getElementById('wg-iface-modal-port').value, 10) || 51820;
  const addr = document.getElementById('wg-iface-modal-addr').value.trim();
  const mtu = parseInt(document.getElementById('wg-iface-modal-mtu').value, 10) || 1420;
  const pub = document.getElementById('wg-iface-modal-pubkey').value.trim();
  const priv = document.getElementById('wg-iface-modal-privkey').value.trim();
  const disabled = document.getElementById('wg-iface-modal-disabled').checked;

  try {
    const res = await fetch(`${API_BASE}/vpn/wireguard/interfaces`, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        name,
        listen_port: port,
        address: addr,
        mtu,
        public_key: pub,
        private_key: priv,
        disabled
      })
    });
    if (res.ok) {
      showToast('WireGuard Saved', `Interface ${name} configured`, 'success');
      closeAddWGInterfaceModal();
      loadWireGuard(false);
      fetchData(false);
    }
  } catch (err) {
    showToast('Error', err.message, 'error');
  }
}

async function startWGInterface(name) {
  try {
    const res = await fetch(`${API_BASE}/vpn/wireguard/interfaces/${encodeURIComponent(name)}/start`, { method: 'POST' });
    if (res.ok) {
      showToast('Interface UP', `Started WireGuard interface ${name}`, 'success');
      loadWireGuard(false);
      fetchData(false);
    }
  } catch (err) {
    showToast('Error', err.message, 'error');
  }
}

async function stopWGInterface(name) {
  try {
    const res = await fetch(`${API_BASE}/vpn/wireguard/interfaces/${encodeURIComponent(name)}/stop`, { method: 'POST' });
    if (res.ok) {
      showToast('Interface DOWN', `Stopped WireGuard interface ${name}`, 'info');
      loadWireGuard(false);
      fetchData(false);
    }
  } catch (err) {
    showToast('Error', err.message, 'error');
  }
}

async function toggleWGInterfaceState(name, enable) {
  try {
    const res = await fetch(`${API_BASE}/vpn/wireguard/interfaces/${encodeURIComponent(name)}/state`, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ enabled: enable })
    });
    if (res.ok) {
      showToast(enable ? 'Enabled' : 'Disabled', `${name} state updated`, 'info');
      loadWireGuard(false);
    }
  } catch (err) {
    showToast('Error', err.message, 'error');
  }
}

async function deleteWGInterface(name) {
  if (!confirm(`Are you sure you want to delete WireGuard interface ${name}?`)) return;
  try {
    const res = await fetch(`${API_BASE}/vpn/wireguard/interfaces/${encodeURIComponent(name)}`, { method: 'DELETE' });
    if (res.ok) {
      showToast('Deleted', `Interface ${name} removed`, 'success');
      loadWireGuard(false);
      fetchData(false);
    }
  } catch (err) {
    showToast('Error', err.message, 'error');
  }
}

function openAddWGPeerModal() {
  const sel = document.getElementById('wg-peer-modal-iface');
  sel.innerHTML = '';
  (state.wgInterfaces || []).forEach(i => {
    const opt = document.createElement('option');
    opt.value = i.name;
    opt.innerText = `${i.name} (${i.address || 'No IP'})`;
    sel.appendChild(opt);
  });

  if ((state.wgInterfaces || []).length === 0) {
    showToast('No Interfaces', 'Please add a WireGuard interface first before adding peers', 'warning');
    openAddWGInterfaceModal();
    return;
  }

  document.getElementById('wg-peer-modal-name').value = '';
  document.getElementById('wg-peer-modal-pubkey').value = '';
  document.getElementById('wg-peer-modal-allowedips').value = '10.10.0.2/32';
  document.getElementById('wg-peer-modal-endpoint').value = '';
  document.getElementById('wg-peer-modal-keepalive').value = '25';
  document.getElementById('wg-peer-modal-preshared').value = '';
  document.getElementById('wg-peer-modal-disabled').checked = false;

  document.getElementById('wg-peer-modal').classList.remove('hidden');
}

function closeAddWGPeerModal() {
  document.getElementById('wg-peer-modal').classList.add('hidden');
}

async function submitSaveWGPeer(e) {
  e.preventDefault();
  const iface = document.getElementById('wg-peer-modal-iface').value;
  const name = document.getElementById('wg-peer-modal-name').value.trim();
  const pub = document.getElementById('wg-peer-modal-pubkey').value.trim();
  const allowed = document.getElementById('wg-peer-modal-allowedips').value.split(',').map(s => s.trim());
  const ep = document.getElementById('wg-peer-modal-endpoint').value.trim();
  const keepalive = parseInt(document.getElementById('wg-peer-modal-keepalive').value, 10) || 25;
  const psk = document.getElementById('wg-peer-modal-preshared').value.trim();
  const disabled = document.getElementById('wg-peer-modal-disabled').checked;

  let epAddr = ep;
  let epPort = 0;
  if (ep.includes(':')) {
    const parts = ep.split(':');
    epAddr = parts[0];
    epPort = parseInt(parts[1], 10) || 0;
  }

  try {
    const res = await fetch(`${API_BASE}/vpn/wireguard/peers`, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        interface: iface,
        name,
        public_key: pub,
        allowed_ips: allowed,
        endpoint_address: epAddr,
        endpoint_port: epPort,
        persistent_keepalive: keepalive,
        preshared_key: psk,
        disabled
      })
    });
    if (res.ok) {
      showToast('Peer Saved', `Peer ${name} added to ${iface}`, 'success');
      closeAddWGPeerModal();
      loadWireGuard(false);
    }
  } catch (err) {
    showToast('Error', err.message, 'error');
  }
}

async function deleteWGPeer(iface, pubkey) {
  if (!confirm(`Are you sure you want to remove peer from ${iface}?`)) return;
  try {
    const res = await fetch(`${API_BASE}/vpn/wireguard/peers/${encodeURIComponent(iface)}/${encodeURIComponent(pubkey)}`, {
      method: 'DELETE'
    });
    if (res.ok) {
      showToast('Peer Deleted', 'WireGuard peer removed', 'success');
      loadWireGuard(false);
    }
  } catch (err) {
    showToast('Error', err.message, 'error');
  }
}

// ======================== IPSec Multi-Tunnel ========================
async function loadIPSec(populateInputs = true) {
  try {
    const res = await fetch(`${API_BASE}/vpn/ipsec/tunnels`);
    const list = await res.json();
    state.ipsecTunnels = Array.isArray(list) ? list : [];

    const activeCount = state.ipsecTunnels.filter(t => t.running || t.status === 'ESTABLISHED').length;
    const badge = document.getElementById('ipsec-sas-badge');
    if (badge) badge.innerText = `${activeCount} Active SAs`;

    const tbody = document.getElementById('ipsec-table-body');
    const empty = document.getElementById('ipsec-empty');
    if (!tbody) return;
    tbody.innerHTML = '';

    if (state.ipsecTunnels.length === 0) {
      if (empty) empty.classList.remove('hidden');
    } else {
      if (empty) empty.classList.add('hidden');
      state.ipsecTunnels.forEach(c => {
        const isEstablished = c.running || c.status === 'ESTABLISHED';
        const tr = document.createElement('tr');
        tr.className = 'hover:bg-slate-800/40 transition text-xs';
        tr.innerHTML = `
          <td class="py-2.5 px-3 text-center">${renderMikroTikFlag(isEstablished, c.disabled)}</td>
          <td class="py-2.5 px-4 font-bold text-white">${c.name}</td>
          <td class="py-2.5 px-4 text-emerald-400 font-mono">${c.local_subnet || '-'}</td>
          <td class="py-2.5 px-4 text-slate-300 font-mono">${c.remote_addrs || '-'}</td>
          <td class="py-2.5 px-4 text-cyan-400 font-mono">${c.remote_subnet || '-'}</td>
          <td class="py-2.5 px-4 font-sans">
            <span class="px-2 py-0.5 rounded-full text-[10px] font-semibold ${
              isEstablished ? 'bg-emerald-500/10 text-emerald-400 border border-emerald-500/30' : 'bg-slate-800 text-slate-400'
            }">${c.status || (isEstablished ? 'ESTABLISHED' : 'DISCONNECTED')}</span>
          </td>
          <td class="py-2.5 px-4 text-right space-x-2 font-sans">
            ${isEstablished ? `
              <button onclick="stopIPSecTunnel('${c.name}')" class="text-xs text-rose-400 hover:text-rose-300">Terminate</button>
            ` : `
              <button onclick="startIPSecTunnel('${c.name}')" class="text-xs bg-amber-600/30 hover:bg-amber-600/50 text-amber-300 px-2 py-0.5 rounded border border-amber-500/30">Initiate</button>
            `}
            <button onclick="toggleIPSecState('${c.name}', ${c.disabled ? 'true' : 'false'})" class="text-xs text-slate-400 hover:text-white">
              ${c.disabled ? 'Enable' : 'Disable'}
            </button>
            <button onclick="openEditIPSecModal('${c.name}')" class="text-xs text-slate-400 hover:text-white">Edit</button>
            <button onclick="deleteIPSecConn('${c.name}')" class="text-xs text-slate-500 hover:text-rose-400">Delete</button>
          </td>
        `;
        tbody.appendChild(tr);
      });
    }
  } catch (err) {
    console.error('Failed to load IPSec:', err);
  }
}

function openAddIPSecModal() {
  document.getElementById('ipsec-modal-title').innerText = 'Configure IPSec IKEv2 Tunnel';
  document.getElementById('ipsec-modal-name').value = `ipsec-${(state.ipsecTunnels || []).length + 1}`;
  document.getElementById('ipsec-modal-name').readOnly = false;
  document.getElementById('ipsec-modal-localts').value = '192.168.10.0/24';
  document.getElementById('ipsec-modal-remotets').value = '192.168.20.0/24';
  document.getElementById('ipsec-modal-remotegw').value = '';
  document.getElementById('ipsec-modal-psk').value = '';
  document.getElementById('ipsec-modal-ikeprop').value = 'aes256-sha256-modp2048,default';
  document.getElementById('ipsec-modal-espprop').value = 'aes256-sha256-modp2048,default';
  document.getElementById('ipsec-modal-autostart').checked = true;
  document.getElementById('ipsec-modal-disabled').checked = false;

  document.getElementById('ipsec-modal').classList.remove('hidden');
}

function openEditIPSecModal(name) {
  const conn = (state.ipsecTunnels || []).find(c => c.name === name);
  if (!conn) return;

  document.getElementById('ipsec-modal-title').innerText = `Edit IPSec Tunnel: ${name}`;
  document.getElementById('ipsec-modal-name').value = conn.name;
  document.getElementById('ipsec-modal-name').readOnly = true;
  document.getElementById('ipsec-modal-localts').value = conn.local_subnet || '';
  document.getElementById('ipsec-modal-remotets').value = conn.remote_subnet || '';
  document.getElementById('ipsec-modal-remotegw').value = conn.remote_addrs || '';
  document.getElementById('ipsec-modal-psk').value = conn.preshared_key || '';
  document.getElementById('ipsec-modal-ikeprop').value = conn.ike_proposals || 'aes256-sha256-modp2048,default';
  document.getElementById('ipsec-modal-espprop').value = conn.esp_proposals || 'aes256-sha256-modp2048,default';
  document.getElementById('ipsec-modal-autostart').checked = conn.auto_start ?? true;
  document.getElementById('ipsec-modal-disabled').checked = !!conn.disabled;

  document.getElementById('ipsec-modal').classList.remove('hidden');
}

function closeAddIPSecModal() {
  document.getElementById('ipsec-modal').classList.add('hidden');
}

async function submitSaveIPSec(e) {
  e.preventDefault();
  const name = document.getElementById('ipsec-modal-name').value.trim();
  const localts = document.getElementById('ipsec-modal-localts').value.trim();
  const remotets = document.getElementById('ipsec-modal-remotets').value.trim();
  const remotegw = document.getElementById('ipsec-modal-remotegw').value.trim();
  const psk = document.getElementById('ipsec-modal-psk').value;
  const ike = document.getElementById('ipsec-modal-ikeprop').value.trim();
  const esp = document.getElementById('ipsec-modal-espprop').value.trim();
  const autostart = document.getElementById('ipsec-modal-autostart').checked;
  const disabled = document.getElementById('ipsec-modal-disabled').checked;

  try {
    const res = await fetch(`${API_BASE}/vpn/ipsec/tunnels`, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        name,
        local_addrs: '%any',
        remote_addrs: remotegw,
        local_subnet: localts,
        remote_subnet: remotets,
        preshared_key: psk,
        ike_proposals: ike,
        esp_proposals: esp,
        auto_start: autostart,
        disabled
      })
    });
    if (res.ok) {
      showToast('IPSec Saved', `Tunnel ${name} configured`, 'success');
      closeAddIPSecModal();
      loadIPSec(false);
      fetchData(false);
    }
  } catch (err) {
    showToast('Error', err.message, 'error');
  }
}

async function startIPSecTunnel(name) {
  try {
    const res = await fetch(`${API_BASE}/vpn/ipsec/tunnels/${encodeURIComponent(name)}/start`, { method: 'POST' });
    if (res.ok) {
      showToast('Initiating Tunnel', `Attempting SA handshake for ${name}...`, 'info');
      setTimeout(() => loadIPSec(false), 2000);
    }
  } catch (err) {
    showToast('Error', err.message, 'error');
  }
}

async function stopIPSecTunnel(name) {
  try {
    const res = await fetch(`${API_BASE}/vpn/ipsec/tunnels/${encodeURIComponent(name)}/stop`, { method: 'POST' });
    if (res.ok) {
      showToast('Terminated', `IPSec SA for ${name} closed`, 'info');
      loadIPSec(false);
    }
  } catch (err) {
    showToast('Error', err.message, 'error');
  }
}

async function toggleIPSecState(name, enable) {
  try {
    const res = await fetch(`${API_BASE}/vpn/ipsec/tunnels/${encodeURIComponent(name)}/state`, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ enabled: enable })
    });
    if (res.ok) {
      showToast(enable ? 'Enabled' : 'Disabled', `IPSec tunnel ${name} updated`, 'info');
      loadIPSec(false);
    }
  } catch (err) {
    showToast('Error', err.message, 'error');
  }
}

async function deleteIPSecConn(name) {
  if (!confirm(`Are you sure you want to delete IPSec tunnel ${name}?`)) return;
  try {
    const res = await fetch(`${API_BASE}/vpn/ipsec/tunnels/${encodeURIComponent(name)}`, { method: 'DELETE' });
    if (res.ok) {
      showToast('Deleted', `IPSec connection ${name} removed`, 'success');
      loadIPSec(false);
      fetchData(false);
    }
  } catch (err) {
    showToast('Error', err.message, 'error');
  }
}

// ======================== L2TP Multi-Instance ========================
async function loadL2TP(populateInputs = true) {
  try {
    const res = await fetch(`${API_BASE}/vpn/l2tp/clients`);
    const list = await res.json();
    state.l2tpList = Array.isArray(list) ? list : [];

    const badge = document.getElementById('l2tp-count-badge');
    if (badge) badge.innerText = `${state.l2tpList.length} Client${state.l2tpList.length !== 1 ? 's' : ''}`;

    const tbody = document.getElementById('l2tp-table-body');
    const empty = document.getElementById('l2tp-empty');
    if (!tbody) return;
    tbody.innerHTML = '';

    if (state.l2tpList.length === 0) {
      if (empty) empty.classList.remove('hidden');
    } else {
      if (empty) empty.classList.add('hidden');
      state.l2tpList.forEach(inst => {
        const tr = document.createElement('tr');
        tr.className = 'hover:bg-slate-800/40 transition text-xs';
        tr.innerHTML = `
          <td class="py-2.5 px-3 text-center">${renderMikroTikFlag(inst.running, inst.disabled)}</td>
          <td class="py-2.5 px-3 font-bold text-white">${inst.name}</td>
          <td class="py-2.5 px-3 text-cyan-400 font-mono">${inst.connect_to}</td>
          <td class="py-2.5 px-3 text-slate-300 font-mono">${inst.username || '-'}</td>
          <td class="py-2.5 px-3 font-mono ${inst.assigned_ip ? 'text-emerald-400 font-bold' : 'text-slate-500'}">${inst.assigned_ip || '-'}</td>
          <td class="py-2.5 px-3 text-slate-400 font-mono">${inst.ppp_device || '-'}</td>
          <td class="py-2.5 px-3 text-center">
            <span class="px-2 py-0.5 rounded text-[10px] font-sans ${inst.default_route ? 'bg-cyan-500/20 text-cyan-300 border border-cyan-500/30' : 'bg-slate-800 text-slate-500'}">
              ${inst.default_route ? 'Yes' : 'No'}
            </span>
          </td>
          <td class="py-2.5 px-3 text-right space-x-2 font-sans">
            ${inst.running ? `
              <button onclick="disconnectL2TPInstance('${inst.name}')" class="text-xs text-rose-400 hover:text-rose-300">Disconnect</button>
            ` : `
              <button onclick="connectL2TPInstance('${inst.name}')" class="text-xs bg-cyan-600/30 hover:bg-cyan-600/50 text-cyan-300 px-2 py-0.5 rounded border border-cyan-500/30">Connect</button>
            `}
            <button onclick="toggleL2TPState('${inst.name}', ${inst.disabled ? 'true' : 'false'})" class="text-xs text-slate-400 hover:text-white">
              ${inst.disabled ? 'Enable' : 'Disable'}
            </button>
            <button onclick="openEditL2TPModal('${inst.name}')" class="text-xs text-slate-400 hover:text-white">Edit</button>
            <button onclick="deleteL2TPInstance('${inst.name}')" class="text-xs text-slate-500 hover:text-rose-400">Delete</button>
          </td>
        `;
        tbody.appendChild(tr);
      });
    }
  } catch (err) {
    console.error('Failed to load L2TP:', err);
  }
}

function openAddL2TPModal() {
  document.getElementById('l2tp-modal-title').innerText = 'Add L2TP Client Interface';
  document.getElementById('l2tp-modal-name').value = `l2tp-out${(state.l2tpList || []).length + 1}`;
  document.getElementById('l2tp-modal-name').readOnly = false;
  document.getElementById('l2tp-modal-server').value = '';
  document.getElementById('l2tp-modal-user').value = '';
  document.getElementById('l2tp-modal-pass').value = '';
  document.getElementById('l2tp-modal-ipsec').value = '';
  document.getElementById('l2tp-modal-defroute').checked = true;
  document.getElementById('l2tp-modal-disabled').checked = false;

  document.getElementById('l2tp-modal').classList.remove('hidden');
}

function openEditL2TPModal(name) {
  const inst = (state.l2tpList || []).find(i => i.name === name);
  if (!inst) return;

  document.getElementById('l2tp-modal-title').innerText = `Edit L2TP Client: ${name}`;
  document.getElementById('l2tp-modal-name').value = inst.name;
  document.getElementById('l2tp-modal-name').readOnly = true;
  document.getElementById('l2tp-modal-server').value = inst.connect_to || '';
  document.getElementById('l2tp-modal-user').value = inst.username || '';
  document.getElementById('l2tp-modal-pass').value = inst.password || '';
  document.getElementById('l2tp-modal-ipsec').value = inst.ipsec_secret || '';
  document.getElementById('l2tp-modal-defroute').checked = inst.default_route ?? true;
  document.getElementById('l2tp-modal-disabled').checked = !!inst.disabled;

  document.getElementById('l2tp-modal').classList.remove('hidden');
}

function closeL2TPModal() {
  document.getElementById('l2tp-modal').classList.add('hidden');
}

async function submitSaveL2TP(e) {
  e.preventDefault();
  const name = document.getElementById('l2tp-modal-name').value.trim();
  const server = document.getElementById('l2tp-modal-server').value.trim();
  const user = document.getElementById('l2tp-modal-user').value.trim();
  const pass = document.getElementById('l2tp-modal-pass').value;
  const ipsec = document.getElementById('l2tp-modal-ipsec').value;
  const defRoute = document.getElementById('l2tp-modal-defroute').checked;
  const disabled = document.getElementById('l2tp-modal-disabled').checked;

  try {
    const res = await fetch(`${API_BASE}/vpn/l2tp/clients`, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        name,
        connect_to: server,
        username: user,
        password: pass,
        ipsec_secret: ipsec,
        default_route: defRoute,
        disabled
      })
    });
    if (res.ok) {
      showToast('L2TP Saved', `Client ${name} configuration saved`, 'success');
      closeL2TPModal();
      loadL2TP(false);
      fetchData(false);
    }
  } catch (err) {
    showToast('Error', err.message, 'error');
  }
}

async function connectL2TPInstance(name) {
  try {
    const res = await fetch(`${API_BASE}/vpn/l2tp/clients/${encodeURIComponent(name)}/connect`, { method: 'POST' });
    if (res.ok) {
      showToast('Connecting', `Dialing L2TP ${name}...`, 'info');
      setTimeout(() => loadL2TP(false), 2000);
    }
  } catch (err) {
    showToast('Error', err.message, 'error');
  }
}

async function disconnectL2TPInstance(name) {
  try {
    const res = await fetch(`${API_BASE}/vpn/l2tp/clients/${encodeURIComponent(name)}/disconnect`, { method: 'POST' });
    if (res.ok) {
      showToast('Disconnected', `L2TP tunnel ${name} terminated`, 'info');
      loadL2TP(false);
    }
  } catch (err) {
    showToast('Error', err.message, 'error');
  }
}

async function toggleL2TPState(name, enable) {
  try {
    const res = await fetch(`${API_BASE}/vpn/l2tp/clients/${encodeURIComponent(name)}/state`, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ enabled: enable })
    });
    if (res.ok) {
      showToast(enable ? 'Enabled' : 'Disabled', `${name} state updated`, 'info');
      loadL2TP(false);
    }
  } catch (err) {
    showToast('Error', err.message, 'error');
  }
}

async function deleteL2TPInstance(name) {
  if (!confirm(`Are you sure you want to delete L2TP client ${name}?`)) return;
  try {
    const res = await fetch(`${API_BASE}/vpn/l2tp/clients/${encodeURIComponent(name)}`, { method: 'DELETE' });
    if (res.ok) {
      showToast('Deleted', `L2TP client ${name} removed`, 'success');
      loadL2TP(false);
      fetchData(false);
    }
  } catch (err) {
    showToast('Error', err.message, 'error');
  }
}

// ======================== PPTP Multi-Instance ========================
async function loadPPTP(populateInputs = true) {
  try {
    const res = await fetch(`${API_BASE}/vpn/pptp/clients`);
    const list = await res.json();
    state.pptpList = Array.isArray(list) ? list : [];

    const badge = document.getElementById('pptp-count-badge');
    if (badge) badge.innerText = `${state.pptpList.length} Client${state.pptpList.length !== 1 ? 's' : ''}`;

    const tbody = document.getElementById('pptp-table-body');
    const empty = document.getElementById('pptp-empty');
    if (!tbody) return;
    tbody.innerHTML = '';

    if (state.pptpList.length === 0) {
      if (empty) empty.classList.remove('hidden');
    } else {
      if (empty) empty.classList.add('hidden');
      state.pptpList.forEach(inst => {
        const tr = document.createElement('tr');
        tr.className = 'hover:bg-slate-800/40 transition text-xs';
        tr.innerHTML = `
          <td class="py-2.5 px-3 text-center">${renderMikroTikFlag(inst.running, inst.disabled)}</td>
          <td class="py-2.5 px-3 font-bold text-white">${inst.name}</td>
          <td class="py-2.5 px-3 text-purple-400 font-mono">${inst.connect_to}</td>
          <td class="py-2.5 px-3 text-slate-300 font-mono">${inst.username || '-'}</td>
          <td class="py-2.5 px-3 font-mono ${inst.assigned_ip ? 'text-emerald-400 font-bold' : 'text-slate-500'}">${inst.assigned_ip || '-'}</td>
          <td class="py-2.5 px-3 text-slate-400 font-mono">${inst.ppp_device || '-'}</td>
          <td class="py-2.5 px-3 text-center">
            <span class="px-2 py-0.5 rounded text-[10px] font-sans ${inst.require_mppe ? 'bg-purple-500/20 text-purple-300 border border-purple-500/30' : 'bg-slate-800 text-slate-500'}">
              ${inst.require_mppe ? 'MPPE-128' : 'None'}
            </span>
          </td>
          <td class="py-2.5 px-3 text-right space-x-2 font-sans">
            ${inst.running ? `
              <button onclick="disconnectPPTPInstance('${inst.name}')" class="text-xs text-rose-400 hover:text-rose-300">Disconnect</button>
            ` : `
              <button onclick="connectPPTPInstance('${inst.name}')" class="text-xs bg-purple-600/30 hover:bg-purple-600/50 text-purple-300 px-2 py-0.5 rounded border border-purple-500/30">Connect</button>
            `}
            <button onclick="togglePPTPState('${inst.name}', ${inst.disabled ? 'true' : 'false'})" class="text-xs text-slate-400 hover:text-white">
              ${inst.disabled ? 'Enable' : 'Disable'}
            </button>
            <button onclick="openEditPPTPModal('${inst.name}')" class="text-xs text-slate-400 hover:text-white">Edit</button>
            <button onclick="deletePPTPInstance('${inst.name}')" class="text-xs text-slate-500 hover:text-rose-400">Delete</button>
          </td>
        `;
        tbody.appendChild(tr);
      });
    }
  } catch (err) {
    console.error('Failed to load PPTP:', err);
  }
}

function openAddPPTPModal() {
  document.getElementById('pptp-modal-title').innerText = 'Add PPTP Client Interface';
  document.getElementById('pptp-modal-name').value = `pptp-out${(state.pptpList || []).length + 1}`;
  document.getElementById('pptp-modal-name').readOnly = false;
  document.getElementById('pptp-modal-server').value = '';
  document.getElementById('pptp-modal-user').value = '';
  document.getElementById('pptp-modal-pass').value = '';
  document.getElementById('pptp-modal-mppe').checked = true;
  document.getElementById('pptp-modal-defroute').checked = true;
  document.getElementById('pptp-modal-disabled').checked = false;

  document.getElementById('pptp-modal').classList.remove('hidden');
}

function openEditPPTPModal(name) {
  const inst = (state.pptpList || []).find(i => i.name === name);
  if (!inst) return;

  document.getElementById('pptp-modal-title').innerText = `Edit PPTP Client: ${name}`;
  document.getElementById('pptp-modal-name').value = inst.name;
  document.getElementById('pptp-modal-name').readOnly = true;
  document.getElementById('pptp-modal-server').value = inst.connect_to || '';
  document.getElementById('pptp-modal-user').value = inst.username || '';
  document.getElementById('pptp-modal-pass').value = inst.password || '';
  document.getElementById('pptp-modal-mppe').checked = inst.require_mppe ?? true;
  document.getElementById('pptp-modal-defroute').checked = inst.default_route ?? true;
  document.getElementById('pptp-modal-disabled').checked = !!inst.disabled;

  document.getElementById('pptp-modal').classList.remove('hidden');
}

function closePPTPModal() {
  document.getElementById('pptp-modal').classList.add('hidden');
}

async function submitSavePPTP(e) {
  e.preventDefault();
  const name = document.getElementById('pptp-modal-name').value.trim();
  const server = document.getElementById('pptp-modal-server').value.trim();
  const user = document.getElementById('pptp-modal-user').value.trim();
  const pass = document.getElementById('pptp-modal-pass').value;
  const mppe = document.getElementById('pptp-modal-mppe').checked;
  const defRoute = document.getElementById('pptp-modal-defroute').checked;
  const disabled = document.getElementById('pptp-modal-disabled').checked;

  try {
    const res = await fetch(`${API_BASE}/vpn/pptp/clients`, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        name,
        connect_to: server,
        username: user,
        password: pass,
        require_mppe: mppe,
        default_route: defRoute,
        auto_reconnect: true,
        disabled
      })
    });
    if (res.ok) {
      showToast('PPTP Saved', `Client ${name} configuration saved`, 'success');
      closePPTPModal();
      loadPPTP(false);
      fetchData(false);
    }
  } catch (err) {
    showToast('Error', err.message, 'error');
  }
}

async function connectPPTPInstance(name) {
  try {
    const res = await fetch(`${API_BASE}/vpn/pptp/clients/${encodeURIComponent(name)}/connect`, { method: 'POST' });
    if (res.ok) {
      showToast('Connecting', `Dialing PPTP ${name}...`, 'info');
      setTimeout(() => loadPPTP(false), 2000);
    }
  } catch (err) {
    showToast('Error', err.message, 'error');
  }
}

async function disconnectPPTPInstance(name) {
  try {
    const res = await fetch(`${API_BASE}/vpn/pptp/clients/${encodeURIComponent(name)}/disconnect`, { method: 'POST' });
    if (res.ok) {
      showToast('Disconnected', `PPTP tunnel ${name} terminated`, 'info');
      loadPPTP(false);
    }
  } catch (err) {
    showToast('Error', err.message, 'error');
  }
}

async function togglePPTPState(name, enable) {
  try {
    const res = await fetch(`${API_BASE}/vpn/pptp/clients/${encodeURIComponent(name)}/state`, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ enabled: enable })
    });
    if (res.ok) {
      showToast(enable ? 'Enabled' : 'Disabled', `${name} state updated`, 'info');
      loadPPTP(false);
    }
  } catch (err) {
    showToast('Error', err.message, 'error');
  }
}

async function deletePPTPInstance(name) {
  if (!confirm(`Are you sure you want to delete PPTP client ${name}?`)) return;
  try {
    const res = await fetch(`${API_BASE}/vpn/pptp/clients/${encodeURIComponent(name)}`, { method: 'DELETE' });
    if (res.ok) {
      showToast('Deleted', `PPTP client ${name} removed`, 'success');
      loadPPTP(false);
      fetchData(false);
    }
  } catch (err) {
    showToast('Error', err.message, 'error');
  }
}

// ---------------- Modal & Helper Functions ----------------
function openVlanModal(defaultParent = '') {
  const select = document.getElementById('vlan-parent');
  select.innerHTML = '';
  const allIfaces = state.interfaces || [];
  const eligible = allIfaces.filter(i => !i.is_vlan && i.name !== 'lo');
  if (eligible.length === 0) {
    allIfaces.forEach(i => eligible.push(i));
  }

  eligible.forEach(i => {
    const opt = document.createElement('option');
    opt.value = i.name;
    opt.innerText = `${i.name} (${i.role || 'Interface'} - ${i.state})`;
    if (i.name === defaultParent) opt.selected = true;
    select.appendChild(opt);
  });

  document.getElementById('vlan-id').value = '';
  document.getElementById('vlan-name').value = '';
  document.getElementById('vlan-ip').value = '';
  document.getElementById('vlan-desc').value = '';
  autoSuggestVlanName();
  document.getElementById('vlan-modal').classList.remove('hidden');
}

function closeVlanModal() {
  document.getElementById('vlan-modal').classList.add('hidden');
}

function autoSuggestVlanName() {
  const parent = document.getElementById('vlan-parent').value;
  const id = document.getElementById('vlan-id').value;
  const nameInput = document.getElementById('vlan-name');
  if (parent && id) nameInput.placeholder = `${parent}.${id}`;
}

function setSubnetPreset(cidr) {
  const ipInput = document.getElementById('vlan-ip');
  const id = document.getElementById('vlan-id').value || '10';
  ipInput.value = `192.168.${id}.1${cidr}`;
}

async function submitCreateVlan(e) {
  e.preventDefault();
  const btn = document.getElementById('vlan-submit-btn');
  btn.disabled = true;
  btn.innerText = 'Creating...';

  const parent = document.getElementById('vlan-parent').value;
  const id = parseInt(document.getElementById('vlan-id').value, 10);
  const name = document.getElementById('vlan-name').value.trim();
  const ip = document.getElementById('vlan-ip').value.trim();
  const role = document.getElementById('vlan-role').value;
  const desc = document.getElementById('vlan-desc').value.trim();

  try {
    const res = await fetch(`${API_BASE}/vlans`, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        parent_name: parent,
        vlan_id: id,
        name: name,
        ip_address: ip,
        role: role,
        description: desc,
        mtu: 1500,
        auto_up: true
      })
    });
    const data = await res.json();
    if (res.ok) {
      showToast('VLAN Created', `Created ${data.name} (VLAN ${data.vlan_id})`, 'success');
      state.expandedParents.add(parent);
      closeVlanModal();
      await fetchData(true);
      if (state.activeTab !== 'interfaces') navigate('interfaces');
    } else {
      showToast('Creation Failed', data.message || 'Failed to create VLAN', 'error');
    }
  } catch (err) {
    showToast('Error', err.message, 'error');
  } finally {
    btn.disabled = false;
    btn.innerText = 'Create VLAN';
  }
}

async function confirmDeleteVlan(name) {
  if (!confirm(`Delete VLAN interface ${name}?`)) return;
  try {
    const res = await fetch(`${API_BASE}/vlans/${encodeURIComponent(name)}`, { method: 'DELETE' });
    if (res.ok) {
      showToast('VLAN Deleted', `Interface ${name} removed`, 'success');
      closeIfaceModal();
      fetchData(true);
    }
  } catch (err) {
    showToast('Error', err.message, 'error');
  }
}

function openIfaceModal(name) {
  const iface = (state.interfaces || []).find(i => i.name === name);
  if (!iface) return;

  state.currentModalIface = iface.name;
  document.getElementById('modal-iface-name').innerText = iface.name;
  document.getElementById('modal-iface-badge').innerText = iface.is_vlan ? `VLAN ${iface.vlan_id}` : iface.type;
  document.getElementById('modal-iface-mtu').value = iface.mtu;
  document.getElementById('modal-iface-role').value = iface.role || 'LAN';
  document.getElementById('modal-iface-desc').value = iface.description || '';

  const delBtn = document.getElementById('modal-delete-vlan-btn');
  if (iface.is_vlan) {
    delBtn.classList.remove('hidden');
  } else {
    delBtn.classList.add('hidden');
  }

  renderModalIPs(iface);
  document.getElementById('iface-modal').classList.remove('hidden');
}

function renderModalIPs(iface) {
  const container = document.getElementById('modal-ip-list');
  container.innerHTML = '';
  const addrs = [...(iface.ipv4 || []), ...(iface.ipv6 || [])];
  if (addrs.length === 0) {
    container.innerHTML = `<span class="text-slate-500 text-xs font-sans">No IP addresses currently bound</span>`;
    return;
  }
  addrs.forEach(addr => {
    const row = document.createElement('div');
    row.className = 'flex items-center justify-between p-2 rounded bg-slate-900 border border-slate-800';
    row.innerHTML = `
      <span class="text-white">${addr}</span>
      <button onclick="removeInterfaceIP('${addr}')" class="text-[11px] text-rose-400 hover:text-rose-300 font-sans">Remove</button>
    `;
    container.appendChild(row);
  });
}

function closeIfaceModal() {
  document.getElementById('iface-modal').classList.add('hidden');
  state.currentModalIface = null;
}

async function setIfaceState(name, newState) {
  await toggleInterfaceState(name, newState);
  const updated = (state.interfaces || []).find(i => i.name === name);
  if (updated) openIfaceModal(name);
}

async function applyMTU() {
  const mtu = parseInt(document.getElementById('modal-iface-mtu').value, 10);
  try {
    const res = await fetch(`${API_BASE}/interfaces/${encodeURIComponent(state.currentModalIface)}/mtu`, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ mtu })
    });
    if (res.ok) {
      showToast('MTU Applied', `Set MTU to ${mtu} on ${state.currentModalIface}`, 'success');
      fetchData(false);
    }
  } catch (err) {
    showToast('Error', err.message, 'error');
  }
}

async function addInterfaceIP() {
  const ip = document.getElementById('modal-new-ip').value.trim();
  if (!ip) return;
  try {
    const res = await fetch(`${API_BASE}/interfaces/${encodeURIComponent(state.currentModalIface)}/ip`, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ ip })
    });
    if (res.ok) {
      showToast('IP Added', `Bound ${ip} to ${state.currentModalIface}`, 'success');
      document.getElementById('modal-new-ip').value = '';
      await fetchData(false);
      const iface = (state.interfaces || []).find(i => i.name === state.currentModalIface);
      if (iface) renderModalIPs(iface);
    } else {
      const err = await res.json();
      showToast('Error', err.error || err.message || 'Failed to add IP address', 'error');
    }
  } catch (err) {
    showToast('Error', err.message, 'error');
  }
}

async function removeInterfaceIP(ip) {
  if (!confirm(`Remove IP ${ip}?`)) return;
  try {
    const res = await fetch(`${API_BASE}/interfaces/${encodeURIComponent(state.currentModalIface)}/ip`, {
      method: 'DELETE',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ ip })
    });
    if (res.ok) {
      showToast('IP Removed', `Removed ${ip}`, 'success');
      await fetchData(false);
      const iface = (state.interfaces || []).find(i => i.name === state.currentModalIface);
      if (iface) renderModalIPs(iface);
    }
  } catch (err) {
    showToast('Error', err.message, 'error');
  }
}

async function saveInterfaceMetadata() {
  const role = document.getElementById('modal-iface-role').value;
  const desc = document.getElementById('modal-iface-desc').value.trim();
  try {
    const res = await fetch(`${API_BASE}/interfaces/${encodeURIComponent(state.currentModalIface)}/metadata`, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ role, description: desc })
    });
    if (res.ok) {
      showToast('Saved', 'Metadata updated', 'success');
      closeIfaceModal();
      fetchData(false);
    }
  } catch (err) {
    showToast('Error', err.message, 'error');
  }
}

// ======================== MIKROTIK FIREWALL (/ip firewall) ========================
state.fwSubTab = 'filter';
state.routesSubTab = 'routes';

function renderRuleFlag(disabled, hasComment) {
  let flags = '';
  if (disabled) flags += '<span class="text-rose-400 font-bold" title="Disabled">X</span>';
  if (hasComment) flags += '<span class="text-amber-400 font-bold ml-1" title="Has Comment">C</span>';
  return flags || '<span class="text-slate-600">-</span>';
}

function renderActionBadge(action) {
  const act = (action || '').toLowerCase();
  let color = 'bg-slate-800 text-slate-300';
  if (act === 'accept') color = 'bg-emerald-500/20 text-emerald-300 border border-emerald-500/30';
  else if (act === 'drop' || act === 'reject') color = 'bg-rose-500/20 text-rose-300 border border-rose-500/30';
  else if (act === 'masquerade' || act === 'src-nat' || act === 'dst-nat') color = 'bg-amber-500/20 text-amber-300 border border-amber-500/30';
  else if (act.startsWith('mark-')) color = 'bg-purple-500/20 text-purple-300 border border-purple-500/30';
  else if (act === 'log') color = 'bg-cyan-500/20 text-cyan-300 border border-cyan-500/30';

  return `<span class="px-2 py-0.5 rounded text-[10px] font-mono font-semibold ${color}">${action}</span>`;
}

function switchFWSubTab(tab) {
  state.fwSubTab = tab;
  const tabs = ['filter', 'nat', 'mangle', 'addrlist', 'connections'];
  tabs.forEach(t => {
    const panel = document.getElementById(`fw-subtab-${t}`);
    const btn = document.getElementById(`fw-subtab-btn-${t}`);
    if (panel) {
      if (t === tab) panel.classList.remove('hidden');
      else panel.classList.add('hidden');
    }
    if (btn) {
      if (t === tab) {
        btn.className = 'px-4 py-2.5 text-xs font-bold border-b-2 border-emerald-500 text-white transition flex items-center gap-2 whitespace-nowrap';
      } else {
        btn.className = 'px-4 py-2.5 text-xs font-bold border-b-2 border-transparent text-slate-400 hover:text-slate-200 transition flex items-center gap-2 whitespace-nowrap';
      }
    }
  });

  const addBtn = document.getElementById('fw-primary-add-btn');
  if (addBtn) {
    if (tab === 'filter') addBtn.innerHTML = '<span>+ Add Filter Rule</span>';
    else if (tab === 'nat') addBtn.innerHTML = '<span>+ Add NAT Rule</span>';
    else if (tab === 'mangle') addBtn.innerHTML = '<span>+ Add Mangle Rule</span>';
    else if (tab === 'addrlist') addBtn.innerHTML = '<span>+ Add Address List</span>';
    else if (tab === 'connections') addBtn.innerHTML = '<span>Refresh Flows</span>';
  }

  if (tab === 'connections') loadConnections();
}

function openCurrentFWModal() {
  if (state.fwSubTab === 'filter') openAddFilterModal();
  else if (state.fwSubTab === 'nat') openAddNATModal();
  else if (state.fwSubTab === 'mangle') openAddMangleModal();
  else if (state.fwSubTab === 'addrlist') openAddAddrListModal();
  else if (state.fwSubTab === 'connections') loadConnections();
}

async function loadFirewall(populateDropdowns = true) {
  try {
    const [summaryRes, filterRes, natRes, mangleRes, addrlistRes] = await Promise.all([
      fetch(`${API_BASE}/firewall/summary`),
      fetch(`${API_BASE}/firewall/filter`),
      fetch(`${API_BASE}/firewall/nat`),
      fetch(`${API_BASE}/firewall/mangle`),
      fetch(`${API_BASE}/firewall/address-lists`)
    ]);

    if (summaryRes.ok) state.fwSummary = await summaryRes.json();
    if (filterRes.ok) state.filterRules = await filterRes.json();
    if (natRes.ok) state.natRules = await natRes.json();
    if (mangleRes.ok) state.mangleRules = await mangleRes.json();
    if (addrlistRes.ok) state.addressLists = await addrlistRes.json();

    // Badges
    const bFilter = document.getElementById('fw-badge-filter');
    if (bFilter) bFilter.innerText = (state.filterRules || []).length;
    const bNat = document.getElementById('fw-badge-nat');
    if (bNat) bNat.innerText = (state.natRules || []).length;
    const bMangle = document.getElementById('fw-badge-mangle');
    if (bMangle) bMangle.innerText = (state.mangleRules || []).length;
    const bAddr = document.getElementById('fw-badge-addrlist');
    if (bAddr) bAddr.innerText = (state.addressLists || []).length;

    renderFilterRules();
    renderNATRules();
    renderMangleRules();
    renderAddressLists();

    if (state.fwSubTab === 'connections') {
      loadConnections();
    }
  } catch (err) {
    console.error('Failed to load firewall:', err);
  }
}

// ----------------- Filter Rules -----------------
function renderFilterRules() {
  const chainFilter = document.getElementById('filter-filter-chain')?.value || '';
  const tbody = document.getElementById('filter-table-body');
  const empty = document.getElementById('filter-empty');
  if (!tbody) return;
  tbody.innerHTML = '';

  const rules = (state.filterRules || []).filter(r => !chainFilter || r.chain === chainFilter);
  document.getElementById('filter-count-badge').innerText = `${rules.length} Rules`;

  if (rules.length === 0) {
    empty?.classList.remove('hidden');
    return;
  }
  empty?.classList.add('hidden');

  rules.forEach((r, idx) => {
    const tr = document.createElement('tr');
    tr.className = `hover:bg-slate-800/40 transition text-xs ${r.disabled ? 'opacity-50' : ''}`;
    const ports = [r.src_port ? 's:' + r.src_port : '', r.dst_port ? 'd:' + r.dst_port : ''].filter(Boolean).join(' ');
    const ifaces = [r.in_interface ? 'in:' + r.in_interface : '', r.out_interface ? 'out:' + r.out_interface : ''].filter(Boolean).join(' ');

    tr.innerHTML = `
      <td class="py-2.5 px-3 text-center text-slate-500 font-bold">${r.order || idx + 1}</td>
      <td class="py-2.5 px-3 text-center">${renderRuleFlag(r.disabled, !!r.comment)}</td>
      <td class="py-2.5 px-3 font-bold text-white">${r.chain}</td>
      <td class="py-2.5 px-3 text-slate-300">${r.src_address || r.src_address_list ? (r.src_address || `list:${r.src_address_list}`) : '<span class="text-slate-600">0.0.0.0/0</span>'}</td>
      <td class="py-2.5 px-3 text-slate-300">${r.dst_address || r.dst_address_list ? (r.dst_address || `list:${r.dst_address_list}`) : '<span class="text-slate-600">0.0.0.0/0</span>'}</td>
      <td class="py-2.5 px-3 text-cyan-400 uppercase">${r.protocol || 'all'}</td>
      <td class="py-2.5 px-3 text-amber-400">${ports || '-'}</td>
      <td class="py-2.5 px-3 text-emerald-400">${ifaces || '-'}</td>
      <td class="py-2.5 px-3">${renderActionBadge(r.action)}</td>
      <td class="py-2.5 px-3 text-[11px] text-slate-400">
        <span class="text-slate-300">${(r.packets || 0).toLocaleString()}p</span> / 
        <span class="text-slate-500">${formatTraffic(r.bytes || 0).replace('/s', '')}</span>
      </td>
      <td class="py-2.5 px-3 text-slate-400 italic truncate max-w-[120px]" title="${r.comment || ''}">${r.comment || '-'}</td>
      <td class="py-2.5 px-3 text-right space-x-1.5 font-sans whitespace-nowrap">
        <button onclick="moveFilterRule('${r.id}', 'up')" class="text-xs text-slate-400 hover:text-white px-1">▲</button>
        <button onclick="moveFilterRule('${r.id}', 'down')" class="text-xs text-slate-400 hover:text-white px-1">▼</button>
        <button onclick="toggleFilterRuleState('${r.id}', ${!r.disabled})" class="text-xs ${r.disabled ? 'text-emerald-400' : 'text-slate-400'} hover:underline">${r.disabled ? 'Enable' : 'Disable'}</button>
        <button onclick="openEditFilterModal('${r.id}')" class="text-xs text-slate-400 hover:text-white">Edit</button>
        <button onclick="deleteFilterRule('${r.id}')" class="text-xs text-slate-500 hover:text-rose-400">Delete</button>
      </td>
    `;
    tbody.appendChild(tr);
  });
}

function populateInterfaceSelect(selectId, currentVal = '') {
  const sel = document.getElementById(selectId);
  if (!sel) return;
  sel.innerHTML = '<option value="">(Any Interface)</option>';
  (state.interfaces || []).forEach(i => {
    const opt = document.createElement('option');
    opt.value = i.name;
    opt.innerText = `${i.name} (${i.role || i.type})`;
    if (i.name === currentVal) opt.selected = true;
    sel.appendChild(opt);
  });
}

function populateAddressListSelect(selectId, currentVal = '') {
  const sel = document.getElementById(selectId);
  if (!sel) return;
  sel.innerHTML = '<option value="">(None)</option>';
  const set = new Set((state.addressLists || []).map(a => a.name));
  set.forEach(name => {
    const opt = document.createElement('option');
    opt.value = name;
    opt.innerText = name;
    if (name === currentVal) opt.selected = true;
    sel.appendChild(opt);
  });
}

function openAddFilterModal() {
  document.getElementById('filter-modal-title').innerText = 'Add Firewall Filter Rule';
  document.getElementById('filter-modal-id').value = '';
  document.getElementById('filter-modal-chain').value = 'forward';
  document.getElementById('filter-modal-action').value = 'accept';
  document.getElementById('filter-modal-proto').value = 'all';
  document.getElementById('filter-modal-src').value = '';
  document.getElementById('filter-modal-dst').value = '';
  document.getElementById('filter-modal-sport').value = '';
  document.getElementById('filter-modal-dport').value = '';
  document.getElementById('filter-modal-connmark').value = '';
  document.getElementById('filter-modal-comment').value = '';
  document.getElementById('filter-modal-disabled').checked = false;

  document.getElementById('filter-modal-cs-established').checked = false;
  document.getElementById('filter-modal-cs-related').checked = false;
  document.getElementById('filter-modal-cs-new').checked = false;
  document.getElementById('filter-modal-cs-invalid').checked = false;

  populateInterfaceSelect('filter-modal-iniface');
  populateInterfaceSelect('filter-modal-outiface');
  populateAddressListSelect('filter-modal-srclist');
  populateAddressListSelect('filter-modal-dstlist');
  toggleFilterActionFields();

  document.getElementById('filter-modal').classList.remove('hidden');
}

function openEditFilterModal(id) {
  const r = (state.filterRules || []).find(rule => rule.id === id);
  if (!r) return;

  document.getElementById('filter-modal-title').innerText = `Edit Filter Rule (#${r.order})`;
  document.getElementById('filter-modal-id').value = r.id;
  document.getElementById('filter-modal-chain').value = r.chain || 'forward';
  document.getElementById('filter-modal-action').value = r.action || 'accept';
  document.getElementById('filter-modal-proto').value = r.protocol || 'all';
  document.getElementById('filter-modal-src').value = r.src_address || '';
  document.getElementById('filter-modal-dst').value = r.dst_address || '';
  document.getElementById('filter-modal-sport').value = r.src_port || '';
  document.getElementById('filter-modal-dport').value = r.dst_port || '';
  document.getElementById('filter-modal-connmark').value = r.connection_mark || '';
  document.getElementById('filter-modal-comment').value = r.comment || '';
  document.getElementById('filter-modal-disabled').checked = !!r.disabled;

  const states = r.connection_state || [];
  document.getElementById('filter-modal-cs-established').checked = states.includes('established');
  document.getElementById('filter-modal-cs-related').checked = states.includes('related');
  document.getElementById('filter-modal-cs-new').checked = states.includes('new');
  document.getElementById('filter-modal-cs-invalid').checked = states.includes('invalid');

  populateInterfaceSelect('filter-modal-iniface', r.in_interface);
  populateInterfaceSelect('filter-modal-outiface', r.out_interface);
  populateAddressListSelect('filter-modal-srclist', r.src_address_list);
  populateAddressListSelect('filter-modal-dstlist', r.dst_address_list);
  toggleFilterActionFields();

  document.getElementById('filter-modal').classList.remove('hidden');
}

function closeFilterModal() {
  document.getElementById('filter-modal').classList.add('hidden');
}

function toggleFilterActionFields() {
  const act = document.getElementById('filter-modal-action').value;
  const rejectBox = document.getElementById('filter-action-reject-box');
  if (rejectBox) {
    if (act === 'reject') rejectBox.classList.remove('hidden');
    else rejectBox.classList.add('hidden');
  }
}

async function submitSaveFilterRule(e) {
  e.preventDefault();
  const id = document.getElementById('filter-modal-id').value;
  const chain = document.getElementById('filter-modal-chain').value;
  const action = document.getElementById('filter-modal-action').value;
  const proto = document.getElementById('filter-modal-proto').value;
  const src = document.getElementById('filter-modal-src').value.trim();
  const dst = document.getElementById('filter-modal-dst').value.trim();
  const sport = document.getElementById('filter-modal-sport').value.trim();
  const dport = document.getElementById('filter-modal-dport').value.trim();
  const inIface = document.getElementById('filter-modal-iniface').value;
  const outIface = document.getElementById('filter-modal-outiface').value;
  const connmark = document.getElementById('filter-modal-connmark').value.trim();
  const srclist = document.getElementById('filter-modal-srclist').value;
  const dstlist = document.getElementById('filter-modal-dstlist').value;
  const comment = document.getElementById('filter-modal-comment').value.trim();
  const disabled = document.getElementById('filter-modal-disabled').checked;
  const rejectWith = document.getElementById('filter-modal-rejectwith')?.value || '';

  const states = [];
  if (document.getElementById('filter-modal-cs-established').checked) states.push('established');
  if (document.getElementById('filter-modal-cs-related').checked) states.push('related');
  if (document.getElementById('filter-modal-cs-new').checked) states.push('new');
  if (document.getElementById('filter-modal-cs-invalid').checked) states.push('invalid');

  try {
    const res = await fetch(`${API_BASE}/firewall/filter`, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        id,
        chain,
        action,
        reject_with: rejectWith,
        protocol: proto,
        src_address: src,
        dst_address: dst,
        src_port: sport,
        dst_port: dport,
        in_interface: inIface,
        out_interface: outIface,
        connection_state: states,
        connection_mark: connmark,
        src_address_list: srclist,
        dst_address_list: dstlist,
        comment,
        disabled
      })
    });
    if (res.ok) {
      showToast('Filter Rule Saved', 'Rule applied successfully to firewall', 'success');
      closeFilterModal();
      loadFirewall(false);
    } else {
      const err = await res.json();
      showToast('Error', err.message, 'error');
    }
  } catch (err) {
    showToast('Error', err.message, 'error');
  }
}

async function moveFilterRule(id, dir) {
  try {
    const res = await fetch(`${API_BASE}/firewall/filter/${encodeURIComponent(id)}/move`, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ direction: dir })
    });
    if (res.ok) loadFirewall(false);
  } catch (err) {
    showToast('Error', err.message, 'error');
  }
}

async function toggleFilterRuleState(id, disabled) {
  try {
    const res = await fetch(`${API_BASE}/firewall/filter/${encodeURIComponent(id)}/state`, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ disabled })
    });
    if (res.ok) loadFirewall(false);
  } catch (err) {
    showToast('Error', err.message, 'error');
  }
}

async function deleteFilterRule(id) {
  if (!confirm('Are you sure you want to delete this filter rule?')) return;
  try {
    const res = await fetch(`${API_BASE}/firewall/filter/${encodeURIComponent(id)}`, { method: 'DELETE' });
    if (res.ok) {
      showToast('Deleted', 'Filter rule removed', 'success');
      loadFirewall(false);
    }
  } catch (err) {
    showToast('Error', err.message, 'error');
  }
}

// ----------------- NAT Rules -----------------
function renderNATRules() {
  const chainFilter = document.getElementById('nat-filter-chain')?.value || '';
  const tbody = document.getElementById('nat-table-body');
  const empty = document.getElementById('nat-empty');
  if (!tbody) return;
  tbody.innerHTML = '';

  const rules = (state.natRules || []).filter(r => !chainFilter || r.chain === chainFilter);
  document.getElementById('nat-count-badge').innerText = `${rules.length} Rules`;

  if (rules.length === 0) {
    empty?.classList.remove('hidden');
    return;
  }
  empty?.classList.add('hidden');

  rules.forEach((r, idx) => {
    const tr = document.createElement('tr');
    tr.className = `hover:bg-slate-800/40 transition text-xs ${r.disabled ? 'opacity-50' : ''}`;
    const toTarget = [r.to_addresses, r.to_ports].filter(Boolean).join(':');
    const ifaces = [r.out_interface ? 'out:' + r.out_interface : '', r.in_interface ? 'in:' + r.in_interface : ''].filter(Boolean).join(' ');

    tr.innerHTML = `
      <td class="py-2.5 px-3 text-center text-slate-500 font-bold">${r.order || idx + 1}</td>
      <td class="py-2.5 px-3 text-center">${renderRuleFlag(r.disabled, !!r.comment)}</td>
      <td class="py-2.5 px-3 font-bold text-amber-400">${r.chain}</td>
      <td class="py-2.5 px-3 text-slate-300">${r.src_address || '<span class="text-slate-600">0.0.0.0/0</span>'}</td>
      <td class="py-2.5 px-3 text-slate-300">${r.dst_address || '<span class="text-slate-600">0.0.0.0/0</span>'}</td>
      <td class="py-2.5 px-3 text-cyan-400 uppercase">${r.protocol || 'all'}${r.dst_port ? ':' + r.dst_port : ''}</td>
      <td class="py-2.5 px-3 text-emerald-400">${ifaces || '-'}</td>
      <td class="py-2.5 px-3">${renderActionBadge(r.action)}</td>
      <td class="py-2.5 px-3 font-mono font-bold text-amber-300">${toTarget || '-'}</td>
      <td class="py-2.5 px-3 text-[11px] text-slate-400">
        <span class="text-slate-300">${(r.packets || 0).toLocaleString()}p</span> / 
        <span class="text-slate-500">${formatTraffic(r.bytes || 0).replace('/s', '')}</span>
      </td>
      <td class="py-2.5 px-3 text-slate-400 italic truncate max-w-[120px]" title="${r.comment || ''}">${r.comment || '-'}</td>
      <td class="py-2.5 px-3 text-right space-x-1.5 font-sans whitespace-nowrap">
        <button onclick="moveNATRule('${r.id}', 'up')" class="text-xs text-slate-400 hover:text-white px-1">▲</button>
        <button onclick="moveNATRule('${r.id}', 'down')" class="text-xs text-slate-400 hover:text-white px-1">▼</button>
        <button onclick="toggleNATRuleState('${r.id}', ${!r.disabled})" class="text-xs ${r.disabled ? 'text-emerald-400' : 'text-slate-400'} hover:underline">${r.disabled ? 'Enable' : 'Disable'}</button>
        <button onclick="openEditNATModal('${r.id}')" class="text-xs text-slate-400 hover:text-white">Edit</button>
        <button onclick="deleteNATRule('${r.id}')" class="text-xs text-slate-500 hover:text-rose-400">Delete</button>
      </td>
    `;
    tbody.appendChild(tr);
  });
}

function openAddNATModal() {
  document.getElementById('nat-modal-title').innerText = 'Add NAT Rule';
  document.getElementById('nat-modal-id').value = '';
  document.getElementById('nat-modal-chain').value = 'srcnat';
  document.getElementById('nat-modal-action').value = 'masquerade';
  document.getElementById('nat-modal-toaddr').value = '';
  document.getElementById('nat-modal-toport').value = '';
  document.getElementById('nat-modal-proto').value = 'all';
  document.getElementById('nat-modal-src').value = '';
  document.getElementById('nat-modal-dst').value = '';
  document.getElementById('nat-modal-dport').value = '';
  document.getElementById('nat-modal-comment').value = '';
  document.getElementById('nat-modal-disabled').checked = false;

  populateInterfaceSelect('nat-modal-iniface');
  populateInterfaceSelect('nat-modal-outiface');
  toggleNATActionFields();

  document.getElementById('nat-modal').classList.remove('hidden');
}

function openEditNATModal(id) {
  const r = (state.natRules || []).find(rule => rule.id === id);
  if (!r) return;

  document.getElementById('nat-modal-title').innerText = `Edit NAT Rule (#${r.order})`;
  document.getElementById('nat-modal-id').value = r.id;
  document.getElementById('nat-modal-chain').value = r.chain || 'srcnat';
  document.getElementById('nat-modal-action').value = r.action || 'masquerade';
  document.getElementById('nat-modal-toaddr').value = r.to_addresses || '';
  document.getElementById('nat-modal-toport').value = r.to_ports || '';
  document.getElementById('nat-modal-proto').value = r.protocol || 'all';
  document.getElementById('nat-modal-src').value = r.src_address || '';
  document.getElementById('nat-modal-dst').value = r.dst_address || '';
  document.getElementById('nat-modal-dport').value = r.dst_port || '';
  document.getElementById('nat-modal-comment').value = r.comment || '';
  document.getElementById('nat-modal-disabled').checked = !!r.disabled;

  populateInterfaceSelect('nat-modal-iniface', r.in_interface);
  populateInterfaceSelect('nat-modal-outiface', r.out_interface);
  toggleNATActionFields();

  document.getElementById('nat-modal').classList.remove('hidden');
}

function closeNATModal() {
  document.getElementById('nat-modal').classList.add('hidden');
}

function toggleNATChainFields() {
  const ch = document.getElementById('nat-modal-chain').value;
  const actSel = document.getElementById('nat-modal-action');
  if (ch === 'srcnat' && actSel.value === 'dst-nat') {
    actSel.value = 'masquerade';
  } else if (ch === 'dstnat' && actSel.value === 'masquerade') {
    actSel.value = 'dst-nat';
  }
  toggleNATActionFields();
}

function toggleNATActionFields() {
  const act = document.getElementById('nat-modal-action').value;
  const toBox = document.getElementById('nat-action-to-box');
  if (toBox) {
    if (act === 'masquerade' || act === 'accept') toBox.classList.add('hidden');
    else toBox.classList.remove('hidden');
  }
}

async function submitSaveNATRule(e) {
  e.preventDefault();
  const id = document.getElementById('nat-modal-id').value;
  const chain = document.getElementById('nat-modal-chain').value;
  const action = document.getElementById('nat-modal-action').value;
  const toaddr = document.getElementById('nat-modal-toaddr').value.trim();
  const toport = document.getElementById('nat-modal-toport').value.trim();
  const proto = document.getElementById('nat-modal-proto').value;
  const src = document.getElementById('nat-modal-src').value.trim();
  const dst = document.getElementById('nat-modal-dst').value.trim();
  const dport = document.getElementById('nat-modal-dport').value.trim();
  const inIface = document.getElementById('nat-modal-iniface').value;
  const outIface = document.getElementById('nat-modal-outiface').value;
  const comment = document.getElementById('nat-modal-comment').value.trim();
  const disabled = document.getElementById('nat-modal-disabled').checked;

  try {
    const res = await fetch(`${API_BASE}/firewall/nat`, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        id,
        chain,
        action,
        to_addresses: toaddr,
        to_ports: toport,
        protocol: proto,
        src_address: src,
        dst_address: dst,
        dst_port: dport,
        in_interface: inIface,
        out_interface: outIface,
        comment,
        disabled
      })
    });
    if (res.ok) {
      showToast('NAT Rule Saved', 'NAT mapping updated', 'success');
      closeNATModal();
      loadFirewall(false);
    }
  } catch (err) {
    showToast('Error', err.message, 'error');
  }
}

async function moveNATRule(id, dir) {
  try {
    const res = await fetch(`${API_BASE}/firewall/nat/${encodeURIComponent(id)}/move`, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ direction: dir })
    });
    if (res.ok) loadFirewall(false);
  } catch (err) {
    showToast('Error', err.message, 'error');
  }
}

async function toggleNATRuleState(id, disabled) {
  try {
    const res = await fetch(`${API_BASE}/firewall/nat/${encodeURIComponent(id)}/state`, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ disabled })
    });
    if (res.ok) loadFirewall(false);
  } catch (err) {
    showToast('Error', err.message, 'error');
  }
}

async function deleteNATRule(id) {
  if (!confirm('Are you sure you want to delete this NAT rule?')) return;
  try {
    const res = await fetch(`${API_BASE}/firewall/nat/${encodeURIComponent(id)}`, { method: 'DELETE' });
    if (res.ok) {
      showToast('Deleted', 'NAT rule removed', 'success');
      loadFirewall(false);
    }
  } catch (err) {
    showToast('Error', err.message, 'error');
  }
}

// ----------------- Mangle Rules -----------------
function renderMangleRules() {
  const chainFilter = document.getElementById('mangle-filter-chain')?.value || '';
  const tbody = document.getElementById('mangle-table-body');
  const empty = document.getElementById('mangle-empty');
  if (!tbody) return;
  tbody.innerHTML = '';

  const rules = (state.mangleRules || []).filter(r => !chainFilter || r.chain === chainFilter);
  document.getElementById('mangle-count-badge').innerText = `${rules.length} Rules`;

  if (rules.length === 0) {
    empty?.classList.remove('hidden');
    return;
  }
  empty?.classList.add('hidden');

  rules.forEach((r, idx) => {
    const tr = document.createElement('tr');
    tr.className = `hover:bg-slate-800/40 transition text-xs ${r.disabled ? 'opacity-50' : ''}`;
    const markVal = r.new_connection_mark || r.new_routing_mark || r.new_packet_mark || r.new_mss || (r.new_dscp ? 'DSCP:' + r.new_dscp : '');

    tr.innerHTML = `
      <td class="py-2.5 px-3 text-center text-slate-500 font-bold">${r.order || idx + 1}</td>
      <td class="py-2.5 px-3 text-center">${renderRuleFlag(r.disabled, !!r.comment)}</td>
      <td class="py-2.5 px-3 font-bold text-purple-400">${r.chain}</td>
      <td class="py-2.5 px-3 text-slate-300">${r.src_address || '<span class="text-slate-600">0.0.0.0/0</span>'}</td>
      <td class="py-2.5 px-3 text-slate-300">${r.dst_address || '<span class="text-slate-600">0.0.0.0/0</span>'}</td>
      <td class="py-2.5 px-3">${renderActionBadge(r.action)}</td>
      <td class="py-2.5 px-3 font-mono font-bold text-cyan-300">${markVal || '-'}</td>
      <td class="py-2.5 px-3 text-center">${r.passthrough ? '<span class="text-emerald-400">yes</span>' : '<span class="text-slate-500">no</span>'}</td>
      <td class="py-2.5 px-3 text-[11px] text-slate-400">
        <span class="text-slate-300">${(r.packets || 0).toLocaleString()}p</span> / 
        <span class="text-slate-500">${formatTraffic(r.bytes || 0).replace('/s', '')}</span>
      </td>
      <td class="py-2.5 px-3 text-slate-400 italic truncate max-w-[120px]" title="${r.comment || ''}">${r.comment || '-'}</td>
      <td class="py-2.5 px-3 text-right space-x-1.5 font-sans whitespace-nowrap">
        <button onclick="moveMangleRule('${r.id}', 'up')" class="text-xs text-slate-400 hover:text-white px-1">▲</button>
        <button onclick="moveMangleRule('${r.id}', 'down')" class="text-xs text-slate-400 hover:text-white px-1">▼</button>
        <button onclick="toggleMangleRuleState('${r.id}', ${!r.disabled})" class="text-xs ${r.disabled ? 'text-emerald-400' : 'text-slate-400'} hover:underline">${r.disabled ? 'Enable' : 'Disable'}</button>
        <button onclick="openEditMangleModal('${r.id}')" class="text-xs text-slate-400 hover:text-white">Edit</button>
        <button onclick="deleteMangleRule('${r.id}')" class="text-xs text-slate-500 hover:text-rose-400">Delete</button>
      </td>
    `;
    tbody.appendChild(tr);
  });
}

function openAddMangleModal() {
  document.getElementById('mangle-modal-title').innerText = 'Add Mangle Rule';
  document.getElementById('mangle-modal-id').value = '';
  document.getElementById('mangle-modal-chain').value = 'prerouting';
  document.getElementById('mangle-modal-action').value = 'mark-connection';
  document.getElementById('mangle-modal-newmark').value = '';
  document.getElementById('mangle-modal-passthrough').checked = true;
  document.getElementById('mangle-modal-src').value = '';
  document.getElementById('mangle-modal-dst').value = '';
  document.getElementById('mangle-modal-connmark').value = '';
  document.getElementById('mangle-modal-comment').value = '';
  document.getElementById('mangle-modal-disabled').checked = false;

  populateInterfaceSelect('mangle-modal-iniface');
  document.getElementById('mangle-modal').classList.remove('hidden');
}

function openEditMangleModal(id) {
  const r = (state.mangleRules || []).find(rule => rule.id === id);
  if (!r) return;

  document.getElementById('mangle-modal-title').innerText = `Edit Mangle Rule (#${r.order})`;
  document.getElementById('mangle-modal-id').value = r.id;
  document.getElementById('mangle-modal-chain').value = r.chain || 'prerouting';
  document.getElementById('mangle-modal-action').value = r.action || 'mark-connection';
  document.getElementById('mangle-modal-newmark').value = r.new_connection_mark || r.new_routing_mark || r.new_packet_mark || r.new_mss || '';
  document.getElementById('mangle-modal-passthrough').checked = r.passthrough ?? true;
  document.getElementById('mangle-modal-src').value = r.src_address || '';
  document.getElementById('mangle-modal-dst').value = r.dst_address || '';
  document.getElementById('mangle-modal-connmark').value = r.connection_mark || '';
  document.getElementById('mangle-modal-comment').value = r.comment || '';
  document.getElementById('mangle-modal-disabled').checked = !!r.disabled;

  populateInterfaceSelect('mangle-modal-iniface', r.in_interface);
  document.getElementById('mangle-modal').classList.remove('hidden');
}

function closeMangleModal() {
  document.getElementById('mangle-modal').classList.add('hidden');
}

function toggleMangleActionFields() {
  // Handled smoothly by single dynamic input
}

async function submitSaveMangleRule(e) {
  e.preventDefault();
  const id = document.getElementById('mangle-modal-id').value;
  const chain = document.getElementById('mangle-modal-chain').value;
  const action = document.getElementById('mangle-modal-action').value;
  const newmark = document.getElementById('mangle-modal-newmark').value.trim();
  const passthrough = document.getElementById('mangle-modal-passthrough').checked;
  const src = document.getElementById('mangle-modal-src').value.trim();
  const dst = document.getElementById('mangle-modal-dst').value.trim();
  const inIface = document.getElementById('mangle-modal-iniface').value;
  const connmark = document.getElementById('mangle-modal-connmark').value.trim();
  const comment = document.getElementById('mangle-modal-comment').value.trim();
  const disabled = document.getElementById('mangle-modal-disabled').checked;

  const payload = {
    id,
    chain,
    action,
    passthrough,
    src_address: src,
    dst_address: dst,
    in_interface: inIface,
    connection_mark: connmark,
    comment,
    disabled
  };

  if (action === 'mark-connection') payload.new_connection_mark = newmark;
  else if (action === 'mark-routing') payload.new_routing_mark = newmark;
  else if (action === 'mark-packet') payload.new_packet_mark = newmark;
  else if (action === 'change-mss') payload.new_mss = newmark || 'clamp-to-pmtu';

  try {
    const res = await fetch(`${API_BASE}/firewall/mangle`, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(payload)
    });
    if (res.ok) {
      showToast('Mangle Rule Saved', 'Marking rule applied', 'success');
      closeMangleModal();
      loadFirewall(false);
    }
  } catch (err) {
    showToast('Error', err.message, 'error');
  }
}

async function moveMangleRule(id, dir) {
  try {
    const res = await fetch(`${API_BASE}/firewall/mangle/${encodeURIComponent(id)}/move`, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ direction: dir })
    });
    if (res.ok) loadFirewall(false);
  } catch (err) {
    showToast('Error', err.message, 'error');
  }
}

async function toggleMangleRuleState(id, disabled) {
  try {
    const res = await fetch(`${API_BASE}/firewall/mangle/${encodeURIComponent(id)}/state`, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ disabled })
    });
    if (res.ok) loadFirewall(false);
  } catch (err) {
    showToast('Error', err.message, 'error');
  }
}

async function deleteMangleRule(id) {
  if (!confirm('Are you sure you want to delete this mangle rule?')) return;
  try {
    const res = await fetch(`${API_BASE}/firewall/mangle/${encodeURIComponent(id)}`, { method: 'DELETE' });
    if (res.ok) {
      showToast('Deleted', 'Mangle rule removed', 'success');
      loadFirewall(false);
    }
  } catch (err) {
    showToast('Error', err.message, 'error');
  }
}

// ----------------- Address Lists -----------------
function renderAddressLists() {
  const filterList = document.getElementById('addrlist-filter-name')?.value || '';
  const tbody = document.getElementById('addrlist-table-body');
  const empty = document.getElementById('addrlist-empty');
  if (!tbody) return;
  tbody.innerHTML = '';

  const entries = (state.addressLists || []).filter(e => !filterList || e.name === filterList);
  document.getElementById('addrlist-count-badge').innerText = `${entries.length} Entries`;

  // Update filter select
  const sel = document.getElementById('addrlist-filter-name');
  if (sel) {
    const cur = sel.value;
    sel.innerHTML = '<option value="">All Lists</option>';
    const set = new Set((state.addressLists || []).map(a => a.name));
    set.forEach(n => {
      const opt = document.createElement('option');
      opt.value = n;
      opt.innerText = n;
      if (n === cur) opt.selected = true;
      sel.appendChild(opt);
    });
  }

  if (entries.length === 0) {
    empty?.classList.remove('hidden');
    return;
  }
  empty?.classList.add('hidden');

  entries.forEach((e, idx) => {
    const tr = document.createElement('tr');
    tr.className = `hover:bg-slate-800/40 transition text-xs ${e.disabled ? 'opacity-50' : ''}`;
    tr.innerHTML = `
      <td class="py-2.5 px-3 text-center text-slate-500 font-bold">${idx + 1}</td>
      <td class="py-2.5 px-3 text-center">${e.disabled ? '<span class="text-rose-400 font-bold">X</span>' : '<span class="text-slate-600">-</span>'}</td>
      <td class="py-2.5 px-3 font-bold text-white font-mono">${e.name}</td>
      <td class="py-2.5 px-3 font-mono font-bold text-emerald-400">${e.address}</td>
      <td class="py-2.5 px-3 text-slate-400 italic">${e.comment || '-'}</td>
      <td class="py-2.5 px-3 text-right font-sans">
        <button onclick="deleteAddrList('${e.id}')" class="text-xs text-slate-500 hover:text-rose-400">Delete</button>
      </td>
    `;
    tbody.appendChild(tr);
  });
}

function openAddAddrListModal() {
  document.getElementById('addrlist-modal-name').value = '';
  document.getElementById('addrlist-modal-addr').value = '';
  document.getElementById('addrlist-modal-comment').value = '';
  document.getElementById('addrlist-modal').classList.remove('hidden');
}

function closeAddrListModal() {
  document.getElementById('addrlist-modal').classList.add('hidden');
}

async function submitSaveAddrList(e) {
  e.preventDefault();
  const name = document.getElementById('addrlist-modal-name').value.trim();
  const addr = document.getElementById('addrlist-modal-addr').value.trim();
  const comment = document.getElementById('addrlist-modal-comment').value.trim();

  try {
    const res = await fetch(`${API_BASE}/firewall/address-lists`, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ name, address: addr, comment, disabled: false })
    });
    if (res.ok) {
      showToast('Address List Item Added', `Added ${addr} to ${name}`, 'success');
      closeAddrListModal();
      loadFirewall(false);
    }
  } catch (err) {
    showToast('Error', err.message, 'error');
  }
}

async function deleteAddrList(id) {
  try {
    const res = await fetch(`${API_BASE}/firewall/address-lists/${encodeURIComponent(id)}`, { method: 'DELETE' });
    if (res.ok) {
      showToast('Deleted', 'Address list item removed', 'info');
      loadFirewall(false);
    }
  } catch (err) {
    showToast('Error', err.message, 'error');
  }
}

// ----------------- Active Connections Tracking -----------------
async function loadConnections() {
  try {
    const res = await fetch(`${API_BASE}/firewall/connections`);
    const data = await res.json();
    state.connections = Array.isArray(data) ? data : [];
    document.getElementById('fw-badge-connections').innerText = state.connections.length;
    document.getElementById('conns-count-badge').innerText = `${state.connections.length} Flows`;
    renderConnections();
  } catch (err) {
    console.error('Failed to load connections:', err);
  }
}

function renderConnections() {
  const search = (document.getElementById('conns-search-input')?.value || '').toLowerCase();
  const protoFilter = document.getElementById('conns-filter-proto')?.value || '';
  const tbody = document.getElementById('conns-table-body');
  const empty = document.getElementById('conns-empty');
  if (!tbody) return;
  tbody.innerHTML = '';

  const conns = (state.connections || []).filter(c => {
    if (protoFilter && c.protocol !== protoFilter) return false;
    if (search) {
      const line = `${c.protocol} ${c.src_address} ${c.dst_address} ${c.src_port} ${c.dst_port} ${c.tcp_state} ${c.connection_mark}`.toLowerCase();
      if (!line.includes(search)) return false;
    }
    return true;
  });

  if (conns.length === 0) {
    empty?.classList.remove('hidden');
    return;
  }
  empty?.classList.add('hidden');

  conns.slice(0, 150).forEach(c => {
    const tr = document.createElement('tr');
    tr.className = 'hover:bg-slate-800/40 transition text-xs';
    let stateColor = 'text-slate-400';
    if (c.tcp_state === 'ESTABLISHED') stateColor = 'text-emerald-400 font-bold';
    else if (c.tcp_state === 'TIME_WAIT' || c.tcp_state === 'SYN_SENT') stateColor = 'text-amber-400';

    tr.innerHTML = `
      <td class="py-2.5 px-3 font-bold text-cyan-400">${c.protocol}</td>
      <td class="py-2.5 px-3 font-mono text-white">${c.src_address}:${c.src_port}</td>
      <td class="py-2.5 px-3 font-mono text-white">${c.dst_address}:${c.dst_port}</td>
      <td class="py-2.5 px-3 font-mono text-slate-400">${c.reply_src_address ? c.reply_src_address + ':' + c.reply_src_port : '-'}</td>
      <td class="py-2.5 px-3 font-mono text-slate-400">${c.reply_dst_address ? c.reply_dst_address + ':' + c.reply_dst_port : '-'}</td>
      <td class="py-2.5 px-3 font-mono ${stateColor}">${c.tcp_state}</td>
      <td class="py-2.5 px-3 font-mono text-purple-300">${c.connection_mark || '-'}</td>
      <td class="py-2.5 px-3 text-slate-500">${c.timeout ? c.timeout + 's' : '-'}</td>
      <td class="py-2.5 px-3 text-right font-sans">
        <button onclick="killConnection('${c.protocol}', '${c.src_address}', ${c.src_port}, '${c.dst_address}', ${c.dst_port})" class="text-xs text-rose-400 hover:text-rose-300">Kill</button>
      </td>
    `;
    tbody.appendChild(tr);
  });
}

async function killConnection(protocol, src, sport, dst, dport) {
  try {
    const res = await fetch(`${API_BASE}/firewall/connections/kill`, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ protocol, src, sport, dst, dport })
    });
    if (res.ok) {
      showToast('Terminated', `Killed flow ${src}:${sport} -> ${dst}:${dport}`, 'info');
      loadConnections();
    }
  } catch (err) {
    showToast('Error', err.message, 'error');
  }
}

async function resetFirewallCounters() {
  if (!confirm('Reset all firewall packet and byte counters to zero?')) return;
  try {
    const res = await fetch(`${API_BASE}/firewall/reset-counters`, { method: 'POST' });
    if (res.ok) {
      showToast('Counters Reset', 'All rules counters reset to 0', 'success');
      loadFirewall(false);
    }
  } catch (err) {
    showToast('Error', err.message, 'error');
  }
}

// ======================== MIKROTIK ROUTING & POLICY (/ip route) ========================
function switchRoutesSubTab(tab) {
  state.routesSubTab = tab;
  const tabs = ['routes', 'rules', 'tables'];
  tabs.forEach(t => {
    const panel = document.getElementById(`routes-subtab-${t}`);
    const btn = document.getElementById(`routes-subtab-btn-${t}`);
    if (panel) {
      if (t === tab) panel.classList.remove('hidden');
      else panel.classList.add('hidden');
    }
    if (btn) {
      if (t === tab) {
        btn.className = 'px-4 py-2.5 text-xs font-bold border-b-2 border-cyan-500 text-white transition flex items-center gap-2';
      } else {
        btn.className = 'px-4 py-2.5 text-xs font-bold border-b-2 border-transparent text-slate-400 hover:text-slate-200 transition flex items-center gap-2';
      }
    }
  });
}

async function loadRoutes() {
  try {
    const [routesRes, rulesRes, tablesRes] = await Promise.all([
      fetch(`${API_BASE}/routes`),
      fetch(`${API_BASE}/routing/rules`),
      fetch(`${API_BASE}/routing/tables`)
    ]);

    if (routesRes.ok) state.routes = await routesRes.json();
    if (rulesRes.ok) state.policyRules = await rulesRes.json();
    if (tablesRes.ok) state.routingTables = await tablesRes.json();

    const bRoutes = document.getElementById('routes-badge-routes');
    if (bRoutes) bRoutes.innerText = (state.routes || []).length;
    const bRules = document.getElementById('routes-badge-rules');
    if (bRules) bRules.innerText = (state.policyRules || []).length;
    const bTables = document.getElementById('routes-badge-tables');
    if (bTables) bTables.innerText = (state.routingTables || []).length;
    const bRoutesCount = document.getElementById('badge-routes-count');
    if (bRoutesCount) bRoutesCount.innerText = (state.routes || []).length;

    renderRoutesList();
    renderPolicyRules();
    renderRoutingTables();
  } catch (err) {
    console.error('Failed to load routing:', err);
  }
}

function renderRoutesList() {
  const tableFilter = document.getElementById('routes-filter-table')?.value || '';
  const tbody = document.getElementById('routes-table-body');
  const empty = document.getElementById('routes-empty');
  if (!tbody) return;
  tbody.innerHTML = '';

  // Update table filter select
  const sel = document.getElementById('routes-filter-table');
  if (sel) {
    const cur = sel.value;
    sel.innerHTML = '<option value="">All Tables</option>';
    (state.routingTables || []).forEach(t => {
      const opt = document.createElement('option');
      opt.value = t.name;
      opt.innerText = t.name;
      if (t.name === cur) opt.selected = true;
      sel.appendChild(opt);
    });
  }

  const routes = (state.routes || []).filter(r => !tableFilter || r.routing_table === tableFilter);
  document.getElementById('routes-count-badge').innerText = `${routes.length} Routes`;

  if (routes.length === 0) {
    empty?.classList.remove('hidden');
    return;
  }
  empty?.classList.add('hidden');

  routes.forEach(r => {
    const tr = document.createElement('tr');
    tr.className = `hover:bg-slate-800/40 transition text-xs cursor-pointer ${r.disabled ? 'opacity-50' : ''}`;
    tr.setAttribute('ondblclick', `openEditRouteModal('${r.id}')`);

    // MikroTik Flags string: D=Dynamic, A=Active, C=Connect, S=Static, X=Disabled
    let flags = '';
    if (r.dynamic) flags += 'D';
    if (r.active) flags += 'A';
    if (r.connect) flags += 'C';
    if (r.static) flags += 'S';
    if (r.disabled) flags += 'X';

    const isDefault = r.dst_address === 'default' || r.dst_address === '0.0.0.0/0';

    tr.innerHTML = `
      <td class="py-2.5 px-3 text-center">
        <span class="px-1.5 py-0.5 rounded text-[10px] font-mono font-bold bg-slate-800 ${r.active ? 'text-cyan-400 border border-cyan-800/40' : 'text-slate-500'}">
          ${flags || '-'}
        </span>
      </td>
      <td class="py-2.5 px-3 font-bold ${isDefault ? 'text-cyan-300' : 'text-white'}">${r.dst_address}</td>
      <td class="py-2.5 px-3 text-slate-300 font-mono">${r.gateway || '<span class="text-slate-600 font-sans">Direct link</span>'}</td>
      <td class="py-2.5 px-3 text-slate-400 font-mono">${(r.distance !== undefined && r.distance !== null) ? r.distance : 0}</td>
      <td class="py-2.5 px-3 font-mono font-semibold text-purple-300">${r.routing_table || 'main'}</td>
      <td class="py-2.5 px-3 text-emerald-400 font-mono">${r.interface || '-'}</td>
      <td class="py-2.5 px-3 text-slate-400 italic truncate max-w-[140px]">${r.comment || '-'}</td>
      <td class="py-2.5 px-3 text-right space-x-2 font-sans whitespace-nowrap">
        ${r.static ? `
          <button onclick="toggleRouteState('${r.id}', ${!r.disabled})" class="text-xs ${r.disabled ? 'text-emerald-400' : 'text-slate-400'} hover:underline">${r.disabled ? 'Enable' : 'Disable'}</button>
          <button onclick="openEditRouteModal('${r.id}')" class="text-xs text-cyan-400 hover:text-cyan-300 font-semibold">Edit</button>
          <button onclick="deleteRoute('${r.id}')" class="text-xs text-slate-500 hover:text-rose-400">Delete</button>
        ` : `
          <button onclick="openEditRouteModal('${r.id}')" class="text-xs text-slate-400 hover:text-white">View</button>
        `}
      </td>
    `;
    tbody.appendChild(tr);
  });
}

function openAddRouteModal() {
  document.getElementById('route-modal-title').innerText = 'Add Static Route';
  document.getElementById('route-modal-id').value = '';
  document.getElementById('route-modal-old-dst').value = '';
  document.getElementById('route-modal-old-gw').value = '';
  document.getElementById('route-modal-old-distance').value = '';
  document.getElementById('route-modal-old-table').value = '';
  document.getElementById('route-modal-old-iface').value = '';

  const dstInput = document.getElementById('route-modal-dst');
  const gwInput = document.getElementById('route-modal-gw');
  const distInput = document.getElementById('route-modal-distance');
  const ifaceSelect = document.getElementById('route-modal-iface');
  const tableSelect = document.getElementById('route-modal-table');
  const commentInput = document.getElementById('route-modal-comment');
  const disCheck = document.getElementById('route-modal-disabled');
  const saveBtn = document.querySelector('#route-modal button[type="submit"]');

  dstInput.disabled = false;
  dstInput.value = '0.0.0.0/0';
  gwInput.disabled = false;
  gwInput.value = '';
  distInput.disabled = false;
  distInput.value = '1';
  ifaceSelect.disabled = false;
  tableSelect.disabled = false;
  commentInput.disabled = false;
  commentInput.value = '';
  disCheck.disabled = false;
  disCheck.checked = false;
  if (saveBtn) saveBtn.classList.remove('hidden');

  populateInterfaceSelect('route-modal-iface');

  // Populate tables
  tableSelect.innerHTML = '';
  (state.routingTables || [{ name: 'main' }]).forEach(t => {
    const opt = document.createElement('option');
    opt.value = t.name;
    opt.innerText = t.name;
    if (t.name === 'main') opt.selected = true;
    tableSelect.appendChild(opt);
  });

  document.getElementById('route-modal').classList.remove('hidden');
}

function openEditRouteModal(id) {
  const r = (state.routes || []).find(route => route.id === id);
  if (!r) return;

  const isStatic = !!r.static;
  document.getElementById('route-modal-title').innerText = isStatic
    ? `Edit Route: ${r.dst_address}`
    : `Route Properties (Read Only): ${r.dst_address}`;

  document.getElementById('route-modal-id').value = r.id;
  document.getElementById('route-modal-old-dst').value = r.dst_address || '';
  document.getElementById('route-modal-old-gw').value = r.gateway || '';
  document.getElementById('route-modal-old-distance').value = (r.distance !== undefined && r.distance !== null) ? r.distance : '';
  document.getElementById('route-modal-old-table').value = r.routing_table || 'main';
  document.getElementById('route-modal-old-iface').value = r.interface || '';

  const dstInput = document.getElementById('route-modal-dst');
  const gwInput = document.getElementById('route-modal-gw');
  const distInput = document.getElementById('route-modal-distance');
  const ifaceSelect = document.getElementById('route-modal-iface');
  const tableSelect = document.getElementById('route-modal-table');
  const commentInput = document.getElementById('route-modal-comment');
  const disCheck = document.getElementById('route-modal-disabled');
  const saveBtn = document.querySelector('#route-modal button[type="submit"]');

  dstInput.value = r.dst_address;
  gwInput.value = r.gateway || '';
  distInput.value = (r.distance !== undefined && r.distance !== null) ? r.distance : 1;
  commentInput.value = r.comment || '';
  disCheck.checked = !!r.disabled;

  dstInput.disabled = !isStatic;
  gwInput.disabled = !isStatic;
  distInput.disabled = !isStatic;
  ifaceSelect.disabled = !isStatic;
  tableSelect.disabled = !isStatic;
  commentInput.disabled = !isStatic;
  disCheck.disabled = !isStatic;

  if (saveBtn) {
    if (isStatic) {
      saveBtn.classList.remove('hidden');
    } else {
      saveBtn.classList.add('hidden');
    }
  }

  populateInterfaceSelect('route-modal-iface', r.interface);

  tableSelect.innerHTML = '';
  (state.routingTables || [{ name: 'main' }]).forEach(t => {
    const opt = document.createElement('option');
    opt.value = t.name;
    opt.innerText = t.name;
    if (t.name === (r.routing_table || 'main')) opt.selected = true;
    tableSelect.appendChild(opt);
  });

  document.getElementById('route-modal').classList.remove('hidden');
}

function closeRouteModal() {
  document.getElementById('route-modal').classList.add('hidden');
}

async function submitSaveRoute(e) {
  e.preventDefault();
  const id = document.getElementById('route-modal-id').value;
  const oldDst = document.getElementById('route-modal-old-dst')?.value || '';
  const oldGw = document.getElementById('route-modal-old-gw')?.value || '';
  const oldDistStr = document.getElementById('route-modal-old-distance')?.value;
  const oldTable = document.getElementById('route-modal-old-table')?.value || '';
  const oldIface = document.getElementById('route-modal-old-iface')?.value || '';

  const dst = document.getElementById('route-modal-dst').value.trim();
  const gw = document.getElementById('route-modal-gw').value.trim();
  const table = document.getElementById('route-modal-table').value;
  const distance = parseInt(document.getElementById('route-modal-distance').value, 10) || 0;
  const iface = document.getElementById('route-modal-iface').value;
  const comment = document.getElementById('route-modal-comment').value.trim();
  const disabled = document.getElementById('route-modal-disabled').checked;

  if (!dst) {
    showToast('Error', 'Destination address is required', 'error');
    return;
  }
  if (!gw && !iface) {
    showToast('Error', 'Either Gateway IP or Interface must be specified', 'error');
    return;
  }

  const payload = {
    id,
    old_dst_address: oldDst,
    old_gateway: oldGw,
    old_routing_table: oldTable,
    old_interface: oldIface,
    dst_address: dst,
    gateway: gw || iface,
    routing_table: table,
    distance,
    interface: iface,
    comment,
    disabled
  };

  if (oldDistStr !== undefined && oldDistStr !== '') {
    payload.old_distance = parseInt(oldDistStr, 10);
  }

  try {
    const res = await fetch(`${API_BASE}/routes`, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(payload)
    });
    if (res.ok) {
      showToast('Route Saved', `Route to ${dst} installed`, 'success');
      closeRouteModal();
      loadRoutes();
    } else {
      const err = await res.json();
      showToast('Error', err.message || 'Failed to save route', 'error');
    }
  } catch (err) {
    showToast('Error', err.message, 'error');
  }
}

async function toggleRouteState(id, disabled) {
  try {
    const res = await fetch(`${API_BASE}/routes/${encodeURIComponent(id)}/state`, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ disabled })
    });
    if (res.ok) loadRoutes();
  } catch (err) {
    showToast('Error', err.message, 'error');
  }
}

async function deleteRoute(id) {
  if (!confirm('Are you sure you want to delete this route?')) return;
  try {
    const res = await fetch(`${API_BASE}/routes/${encodeURIComponent(id)}`, { method: 'DELETE' });
    if (res.ok) {
      showToast('Deleted', 'Route removed', 'success');
      loadRoutes();
    }
  } catch (err) {
    showToast('Error', err.message, 'error');
  }
}

// ----------------- Policy Rules (/ip route rule) -----------------
function renderPolicyRules() {
  const tbody = document.getElementById('rules-table-body');
  const empty = document.getElementById('rules-empty');
  if (!tbody) return;
  tbody.innerHTML = '';

  const rules = state.policyRules || [];
  document.getElementById('rules-count-badge').innerText = `${rules.length} Rules`;

  if (rules.length === 0) {
    empty?.classList.remove('hidden');
    return;
  }
  empty?.classList.add('hidden');

  rules.forEach(pr => {
    const tr = document.createElement('tr');
    tr.className = 'hover:bg-slate-800/40 transition text-xs';
    tr.innerHTML = `
      <td class="py-2.5 px-3 font-mono text-cyan-400 font-bold">${pr.priority}</td>
      <td class="py-2.5 px-3 font-mono text-white">${pr.src_address || '<span class="text-slate-600">all</span>'}</td>
      <td class="py-2.5 px-3 font-mono text-white">${pr.dst_address || '<span class="text-slate-600">all</span>'}</td>
      <td class="py-2.5 px-3 font-mono font-bold text-purple-300">${pr.routing_mark || '<span class="text-slate-600">-</span>'}</td>
      <td class="py-2.5 px-3 font-mono font-bold text-amber-300">${pr.table}</td>
      <td class="py-2.5 px-3 font-mono text-slate-300">${pr.action}</td>
      <td class="py-2.5 px-3 text-right font-sans">
        ${pr.priority < 32766 && pr.priority > 0 ? `
          <button onclick="deletePolicyRule('${pr.id}')" class="text-xs text-slate-500 hover:text-rose-400">Delete</button>
        ` : `<span class="text-slate-600 text-[10px]">Default</span>`}
      </td>
    `;
    tbody.appendChild(tr);
  });
}

function openAddPolicyRuleModal() {
  document.getElementById('prule-modal-pref').value = (state.policyRules || []).length * 10 + 1000;
  document.getElementById('prule-modal-mark').value = '';
  document.getElementById('prule-modal-src').value = '';
  document.getElementById('prule-modal-dst').value = '';

  const sel = document.getElementById('prule-modal-table');
  sel.innerHTML = '';
  (state.routingTables || []).forEach(t => {
    const opt = document.createElement('option');
    opt.value = t.name;
    opt.innerText = t.name;
    sel.appendChild(opt);
  });

  document.getElementById('prule-modal').classList.remove('hidden');
}

function closePolicyRuleModal() {
  document.getElementById('prule-modal').classList.add('hidden');
}

async function submitSavePolicyRule(e) {
  e.preventDefault();
  const pref = parseInt(document.getElementById('prule-modal-pref').value, 10) || 1000;
  const mark = document.getElementById('prule-modal-mark').value.trim();
  const src = document.getElementById('prule-modal-src').value.trim();
  const dst = document.getElementById('prule-modal-dst').value.trim();
  const table = document.getElementById('prule-modal-table').value;
  const action = document.getElementById('prule-modal-action').value;

  try {
    const res = await fetch(`${API_BASE}/routing/rules`, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ priority: pref, routing_mark: mark, src_address: src, dst_address: dst, table, action })
    });
    if (res.ok) {
      showToast('Rule Added', `Policy rule installed for table ${table}`, 'success');
      closePolicyRuleModal();
      loadRoutes();
    } else {
      const err = await res.json();
      showToast('Error', err.message, 'error');
    }
  } catch (err) {
    showToast('Error', err.message, 'error');
  }
}

async function deletePolicyRule(id) {
  if (!confirm('Are you sure you want to remove this policy rule?')) return;
  try {
    const res = await fetch(`${API_BASE}/routing/rules/${encodeURIComponent(id)}`, { method: 'DELETE' });
    if (res.ok) {
      showToast('Rule Removed', 'Policy rule deleted', 'success');
      loadRoutes();
    }
  } catch (err) {
    showToast('Error', err.message, 'error');
  }
}

// ----------------- Routing Tables -----------------
function renderRoutingTables() {
  const tbody = document.getElementById('tables-table-body');
  if (!tbody) return;
  tbody.innerHTML = '';

  (state.routingTables || []).forEach(t => {
    const tr = document.createElement('tr');
    tr.className = 'hover:bg-slate-800/40 transition text-xs font-mono';
    tr.innerHTML = `
      <td class="py-2.5 px-3 text-cyan-400 font-bold">${t.table_id}</td>
      <td class="py-2.5 px-3 font-bold text-white">${t.name}</td>
      <td class="py-2.5 px-3 text-slate-400 italic">${t.comment || '-'}</td>
    `;
    tbody.appendChild(tr);
  });
}

function openAddTableModal() {
  document.getElementById('table-modal-name').value = '';
  document.getElementById('table-modal-id').value = '';
  document.getElementById('table-modal-comment').value = '';
  document.getElementById('table-modal').classList.remove('hidden');
}

function closeTableModal() {
  document.getElementById('table-modal').classList.add('hidden');
}

async function submitSaveTable(e) {
  e.preventDefault();
  const name = document.getElementById('table-modal-name').value.trim();
  const id = parseInt(document.getElementById('table-modal-id').value, 10) || 0;
  const comment = document.getElementById('table-modal-comment').value.trim();

  try {
    const res = await fetch(`${API_BASE}/routing/tables`, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ name, table_id: id, comment })
    });
    if (res.ok) {
      showToast('Table Created', `Routing table ${name} registered`, 'success');
      closeTableModal();
      loadRoutes();
    } else {
      const err = await res.json();
      showToast('Error', err.message, 'error');
    }
  } catch (err) {
    showToast('Error', err.message, 'error');
  }
}

async function loadDebianConfig() {
  const view = document.getElementById('debian-config-view');
  view.innerText = 'Generating live configuration...';
  try {
    const res = await fetch(`${API_BASE}/debian/config`);
    const data = await res.json();
    view.innerText = data.content || '# Empty config';
  } catch (err) {
    view.innerText = 'Failed to generate Debian network config.';
  }
}

async function saveDebianConfig() {
  try {
    const res = await fetch(`${API_BASE}/debian/apply`, { method: 'POST' });
    const data = await res.json();
    if (res.ok) {
      showToast('Configuration Saved', data.message || 'Saved to /etc/network/interfaces.d/vlans.cfg', 'success');
      loadDebianConfig();
    }
  } catch (err) {
    showToast('Error', err.message, 'error');
  }
}

function showToast(title, message, type = 'info') {
  const container = document.getElementById('toast-container');
  const toast = document.createElement('div');
  const borderColors = {
    success: 'border-emerald-500/40 bg-slate-900/95 text-emerald-400',
    error: 'border-rose-500/40 bg-slate-900/95 text-rose-400',
    info: 'border-cyan-500/40 bg-slate-900/95 text-cyan-400'
  };
  toast.className = `pointer-events-auto border rounded-xl p-4 shadow-2xl backdrop-blur-md flex items-start space-x-3 w-80 transform transition-all duration-300 translate-y-2 opacity-0 ${borderColors[type] || borderColors.info}`;
  toast.innerHTML = `
    <div class="flex-1">
      <div class="font-bold text-xs text-white">${title}</div>
      <div class="text-[11px] text-slate-300 mt-0.5 leading-relaxed font-sans">${message}</div>
    </div>
  `;
  container.appendChild(toast);
  requestAnimationFrame(() => toast.classList.remove('translate-y-2', 'opacity-0'));
  setTimeout(() => {
    toast.classList.add('opacity-0', 'translate-y-2');
    setTimeout(() => toast.remove(), 300);
  }, 4000);
}

function formatTraffic(bytesPerSec) {
  if (bytesPerSec < 1024) return `${Math.round(bytesPerSec)} B/s`;
  const kb = bytesPerSec / 1024;
  if (kb < 1024) return `${kb.toFixed(1)} KB/s`;
  const mb = kb / 1024;
  return `${mb.toFixed(2)} MB/s`;
}

function toggleSidebar() {
  const sb = document.getElementById('sidebar');
  sb.classList.toggle('-translate-x-full');
}

// ======================== EoIP (Ethernet over IP) ========================
async function loadEoIP(populate = true) {
  try {
    const res = await fetch(`${API_BASE}/vpn/eoip`);
    const data = await res.json();
    state.eoipTunnels = Array.isArray(data) ? data : [];

    const badge = document.getElementById('eoip-count-badge');
    if (badge) badge.innerText = `${state.eoipTunnels.length} Tunnels`;
    const sideBadge = document.getElementById('badge-eoip-count');
    if (sideBadge) sideBadge.innerText = state.eoipTunnels.length;

    renderEoIPTunnels();
  } catch (err) {
    console.error('Failed to load EoIP:', err);
  }
}

function renderEoIPTunnels() {
  const tbody = document.getElementById('eoip-table-body');
  const empty = document.getElementById('eoip-empty');
  if (!tbody) return;
  tbody.innerHTML = '';

  const tunnels = state.eoipTunnels || [];
  if (tunnels.length === 0) {
    empty?.classList.remove('hidden');
    return;
  }
  empty?.classList.add('hidden');

  tunnels.forEach(t => {
    const tr = document.createElement('tr');
    tr.className = `hover:bg-slate-800/40 transition text-xs ${t.disabled ? 'opacity-50' : ''}`;
    tr.innerHTML = `
      <td class="py-2.5 px-3 text-center">${renderMikroTikFlag(t.running, t.disabled)}</td>
      <td class="py-2.5 px-3 font-bold text-white font-mono">${t.name}</td>
      <td class="py-2.5 px-3 font-bold text-emerald-400 font-mono">${t.tunnel_id}</td>
      <td class="py-2.5 px-3 font-semibold text-emerald-400 font-mono">${t.ip_address || '<span class="text-slate-500 font-normal">Unassigned</span>'}</td>
      <td class="py-2.5 px-3 text-cyan-300 font-mono">${t.remote_address}</td>
      <td class="py-2.5 px-3 text-slate-400 font-mono">${t.local_address || '(any)'}</td>
      <td class="py-2.5 px-3 text-slate-300 font-mono text-[11px]">${t.mac_address || '-'}</td>
      <td class="py-2.5 px-3 text-slate-400 font-mono">${t.mtu || 1500}</td>
      <td class="py-2.5 px-3 font-mono text-[11px]">
        <span class="text-emerald-400">↓ ${t.rx_human || '0 B'}</span>
        <span class="text-cyan-400 ml-1">↑ ${t.tx_human || '0 B'}</span>
      </td>
      <td class="py-2.5 px-3 text-slate-400 italic truncate max-w-[120px]" title="${t.comment || ''}">${t.comment || '-'}</td>
      <td class="py-2.5 px-3 text-right space-x-1.5 font-sans whitespace-nowrap">
        <button onclick="toggleEoIPState('${t.id}', ${!t.disabled})" class="text-xs ${t.disabled ? 'text-emerald-400' : 'text-slate-400'} hover:underline">${t.disabled ? 'Enable' : 'Disable'}</button>
        <button onclick="openEditEoIPModal('${t.id}')" class="text-xs text-slate-400 hover:text-white">Edit</button>
        <button onclick="deleteEoIP('${t.id}')" class="text-xs text-rose-400 hover:text-rose-300">Delete</button>
      </td>
    `;
    tbody.appendChild(tr);
  });
}

function openAddEoIPModal() {
  document.getElementById('eoip-modal-title').innerText = 'Add EoIP Tunnel';
  document.getElementById('eoip-modal-id').value = '';
  document.getElementById('eoip-modal-name').value = `eoip-tunnel${(state.eoipTunnels || []).length + 1}`;
  document.getElementById('eoip-modal-tunnelid').value = (state.eoipTunnels || []).length + 10;
  document.getElementById('eoip-modal-remote').value = '';
  document.getElementById('eoip-modal-ip').value = '';
  document.getElementById('eoip-modal-local').value = '';
  document.getElementById('eoip-modal-mac').value = '';
  document.getElementById('eoip-modal-mtu').value = '1500';
  document.getElementById('eoip-modal-comment').value = '';
  document.getElementById('eoip-modal-clampmss').checked = true;
  document.getElementById('eoip-modal-disabled').checked = false;
  document.getElementById('eoip-modal').classList.remove('hidden');
}

function openEditEoIPModal(id) {
  const t = (state.eoipTunnels || []).find(tun => tun.id === id);
  if (!t) return;
  document.getElementById('eoip-modal-title').innerText = `Edit EoIP Tunnel (${t.name})`;
  document.getElementById('eoip-modal-id').value = t.id;
  document.getElementById('eoip-modal-name').value = t.name;
  document.getElementById('eoip-modal-tunnelid').value = t.tunnel_id;
  document.getElementById('eoip-modal-remote').value = t.remote_address;
  document.getElementById('eoip-modal-ip').value = t.ip_address || '';
  document.getElementById('eoip-modal-local').value = t.local_address || '';
  document.getElementById('eoip-modal-mac').value = t.mac_address || '';
  document.getElementById('eoip-modal-mtu').value = t.mtu || 1500;
  document.getElementById('eoip-modal-comment').value = t.comment || '';
  document.getElementById('eoip-modal-clampmss').checked = !!t.clamp_mss;
  document.getElementById('eoip-modal-disabled').checked = !!t.disabled;
  document.getElementById('eoip-modal').classList.remove('hidden');
}

function closeEoIPModal() {
  document.getElementById('eoip-modal').classList.add('hidden');
}

async function submitSaveEoIP(e) {
  e.preventDefault();
  const id = document.getElementById('eoip-modal-id').value;
  const name = document.getElementById('eoip-modal-name').value.trim();
  const tunnelId = parseInt(document.getElementById('eoip-modal-tunnelid').value);
  const remote = document.getElementById('eoip-modal-remote').value.trim();
  const ipAddress = document.getElementById('eoip-modal-ip').value.trim();
  const local = document.getElementById('eoip-modal-local').value.trim();
  const mac = document.getElementById('eoip-modal-mac').value.trim();
  const mtu = parseInt(document.getElementById('eoip-modal-mtu').value) || 1500;
  const comment = document.getElementById('eoip-modal-comment').value.trim();
  const clampMss = document.getElementById('eoip-modal-clampmss').checked;
  const disabled = document.getElementById('eoip-modal-disabled').checked;

  try {
    const res = await fetch(`${API_BASE}/vpn/eoip`, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        id,
        name,
        tunnel_id: tunnelId,
        remote_address: remote,
        ip_address: ipAddress,
        local_address: local,
        mac_address: mac,
        mtu,
        clamp_mss: clampMss,
        comment,
        disabled
      })
    });
    if (res.ok) {
      showToast('EoIP Saved', `Tunnel ${name} configured successfully`, 'success');
      closeEoIPModal();
      loadEoIP(false);
      fetchData(false);
    } else {
      const err = await res.json();
      showToast('Error', err.message, 'error');
    }
  } catch (err) {
    showToast('Error', err.message, 'error');
  }
}

async function toggleEoIPState(id, disabled) {
  try {
    const res = await fetch(`${API_BASE}/vpn/eoip/${encodeURIComponent(id)}/state`, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ disabled })
    });
    if (res.ok) {
      showToast(disabled ? 'Disabled' : 'Enabled', 'EoIP tunnel state updated', 'info');
      loadEoIP(false);
      fetchData(false);
    }
  } catch (err) {
    showToast('Error', err.message, 'error');
  }
}

async function deleteEoIP(id) {
  if (!confirm('Are you sure you want to delete this EoIP tunnel?')) return;
  try {
    const res = await fetch(`${API_BASE}/vpn/eoip/${encodeURIComponent(id)}`, { method: 'DELETE' });
    if (res.ok) {
      showToast('Deleted', 'EoIP tunnel removed', 'success');
      loadEoIP(false);
      fetchData(false);
    }
  } catch (err) {
    showToast('Error', err.message, 'error');
  }
}

// ======================== PPP Central Hub & Servers ========================
function switchPPPSubTab(tab) {
  state.pppSubTab = tab;
  const tabs = ['secrets', 'profiles', 'pppoe', 'pptp', 'l2tp', 'active'];
  tabs.forEach(t => {
    const panel = document.getElementById(`ppp-subtab-${t}`);
    const btn = document.getElementById(`ppp-subtab-btn-${t}`);
    if (panel) {
      if (t === tab) panel.classList.remove('hidden');
      else panel.classList.add('hidden');
    }
    if (btn) {
      if (t === tab) {
        btn.className = 'px-4 py-2.5 text-xs font-bold border-b-2 border-violet-500 text-white transition flex items-center gap-2 whitespace-nowrap';
      } else {
        btn.className = 'px-4 py-2.5 text-xs font-bold border-b-2 border-transparent text-slate-400 hover:text-slate-200 transition flex items-center gap-2 whitespace-nowrap';
      }
    }
  });

  const addBtn = document.getElementById('ppp-primary-add-btn');
  if (addBtn) {
    if (tab === 'secrets') addBtn.innerHTML = '<span>+ Add User (Secret)</span>';
    else if (tab === 'profiles') addBtn.innerHTML = '<span>+ Add Profile</span>';
    else if (tab === 'active') addBtn.innerHTML = '<span>Refresh Sessions</span>';
    else addBtn.innerHTML = '<span>Save Config</span>';
  }

  if (tab === 'active') loadPPPSessions();
}

function openCurrentPPPModal() {
  if (state.pppSubTab === 'secrets') openAddPPPSecretModal();
  else if (state.pppSubTab === 'profiles') openAddPPPProfileModal();
  else if (state.pppSubTab === 'active') loadPPPSessions();
  else if (state.pppSubTab === 'pppoe') document.querySelector('#ppp-subtab-pppoe form')?.requestSubmit();
  else if (state.pppSubTab === 'pptp') document.querySelector('#ppp-subtab-pptp form')?.requestSubmit();
  else if (state.pppSubTab === 'l2tp') document.querySelector('#ppp-subtab-l2tp form')?.requestSubmit();
}

async function loadPPP(populateDropdowns = true) {
  await Promise.all([
    loadPPPSecrets(),
    loadPPPProfiles(),
    loadPPPServers(),
    loadPPPSessions()
  ]);
}

async function loadPPPSecrets() {
  try {
    const res = await fetch(`${API_BASE}/vpn/ppp/secrets`);
    const data = await res.json();
    state.pppSecrets = Array.isArray(data) ? data : [];
    const b = document.getElementById('ppp-badge-secrets');
    if (b) b.innerText = state.pppSecrets.length;
    const b2 = document.getElementById('secrets-count-badge');
    if (b2) b2.innerText = `${state.pppSecrets.length} Users`;
    renderPPPSecrets();
  } catch (err) {
    console.error('Failed to load PPP secrets:', err);
  }
}

function renderPPPSecrets() {
  const tbody = document.getElementById('secrets-table-body');
  const empty = document.getElementById('secrets-empty');
  if (!tbody) return;
  tbody.innerHTML = '';

  const secrets = state.pppSecrets || [];
  if (secrets.length === 0) {
    empty?.classList.remove('hidden');
    return;
  }
  empty?.classList.add('hidden');

  secrets.forEach(s => {
    const tr = document.createElement('tr');
    tr.className = `hover:bg-slate-800/40 transition text-xs ${s.disabled ? 'opacity-50' : ''}`;
    tr.innerHTML = `
      <td class="py-2.5 px-3 text-center">${renderRuleFlag(s.disabled, !!s.comment)}</td>
      <td class="py-2.5 px-3 font-bold text-white font-mono">${s.name}</td>
      <td class="py-2.5 px-3 text-purple-300 font-mono font-semibold">${s.service}</td>
      <td class="py-2.5 px-3 text-amber-300 font-mono">${s.profile}</td>
      <td class="py-2.5 px-3 text-slate-400 font-mono">${s.local_address || '(profile)'}</td>
      <td class="py-2.5 px-3 text-cyan-400 font-mono font-bold">${s.remote_address || '(profile)'}</td>
      <td class="py-2.5 px-3 text-slate-400 italic truncate max-w-[120px]">${s.comment || '-'}</td>
      <td class="py-2.5 px-3 text-right space-x-1.5 font-sans whitespace-nowrap">
        <button onclick="togglePPPSecretState('${s.id}', ${!s.disabled})" class="text-xs ${s.disabled ? 'text-emerald-400' : 'text-slate-400'} hover:underline">${s.disabled ? 'Enable' : 'Disable'}</button>
        <button onclick="openEditPPPSecretModal('${s.id}')" class="text-xs text-slate-400 hover:text-white">Edit</button>
        <button onclick="deletePPPSecret('${s.id}')" class="text-xs text-rose-400 hover:text-rose-300">Delete</button>
      </td>
    `;
    tbody.appendChild(tr);
  });
}

async function loadPPPProfiles() {
  try {
    const res = await fetch(`${API_BASE}/vpn/ppp/profiles`);
    const data = await res.json();
    state.pppProfiles = Array.isArray(data) ? data : [];
    const b = document.getElementById('ppp-badge-profiles');
    if (b) b.innerText = state.pppProfiles.length;
    const b2 = document.getElementById('profiles-count-badge');
    if (b2) b2.innerText = `${state.pppProfiles.length} Profiles`;

    // Populate profile selects across modals
    const selects = ['secret-modal-profile', 'pppoe-server-profile', 'pptp-server-profile', 'l2tp-server-profile'];
    selects.forEach(sid => {
      const el = document.getElementById(sid);
      if (!el) return;
      const cur = el.value;
      el.innerHTML = '';
      state.pppProfiles.forEach(p => {
        const opt = document.createElement('option');
        opt.value = p.name;
        opt.innerText = `${p.name} (${p.remote_address})`;
        if (p.name === cur) opt.selected = true;
        el.appendChild(opt);
      });
    });

    renderPPPProfiles();
  } catch (err) {
    console.error('Failed to load PPP profiles:', err);
  }
}

function renderPPPProfiles() {
  const tbody = document.getElementById('profiles-table-body');
  if (!tbody) return;
  tbody.innerHTML = '';

  (state.pppProfiles || []).forEach(p => {
    const isDefault = p.name.startsWith('default');
    const tr = document.createElement('tr');
    tr.className = 'hover:bg-slate-800/40 transition text-xs font-mono';
    tr.innerHTML = `
      <td class="py-2.5 px-3 font-bold text-white">${p.name}</td>
      <td class="py-2.5 px-3 text-slate-300">${p.local_address}</td>
      <td class="py-2.5 px-3 text-cyan-400 font-bold">${p.remote_address}</td>
      <td class="py-2.5 px-3 text-slate-400">${p.dns_servers || '-'}</td>
      <td class="py-2.5 px-3 text-purple-300 font-semibold">${p.use_encryption}</td>
      <td class="py-2.5 px-3 text-center">${p.only_one ? '<span class="text-emerald-400">yes</span>' : '<span class="text-slate-500">no</span>'}</td>
      <td class="py-2.5 px-3 text-slate-400 italic">${p.comment || '-'}</td>
      <td class="py-2.5 px-3 text-right font-sans whitespace-nowrap">
        ${!isDefault ? `<button onclick="deletePPPProfile('${p.name}')" class="text-xs text-rose-400 hover:text-rose-300">Delete</button>` : `<span class="text-slate-600 text-[10px]">Built-in</span>`}
      </td>
    `;
    tbody.appendChild(tr);
  });
}

async function loadPPPServers() {
  try {
    const [pppoeRes, pptpRes, l2tpRes, ipsecRes] = await Promise.all([
      fetch(`${API_BASE}/vpn/servers/pppoe`),
      fetch(`${API_BASE}/vpn/servers/pptp`),
      fetch(`${API_BASE}/vpn/servers/l2tp`),
      fetch(`${API_BASE}/vpn/servers/ipsec`)
    ]);

    if (pppoeRes.ok) {
      state.pppoeServer = await pppoeRes.json();
      const s = state.pppoeServer;
      document.getElementById('pppoe-server-enabled').checked = !!s.enabled;
      document.getElementById('pppoe-server-name').value = s.service_name || 'proxmox-pppoe';
      populateInterfaceSelect('pppoe-server-iface', s.interface || 'eth0');
      document.getElementById('pppoe-server-profile').value = s.default_profile || 'default';
      document.getElementById('pppoe-server-mtu').value = s.max_mtu || 1480;
      document.getElementById('pppoe-server-onesession').checked = !!s.one_session_per_host;
      const pill = document.getElementById('pppoe-server-status-pill');
      if (pill) {
        pill.innerText = s.running ? `ACTIVE (${s.active_sessions} sess)` : 'STOPPED';
        pill.className = s.running ? 'px-2 py-0.5 rounded text-[10px] font-mono font-semibold bg-blue-500/20 text-blue-300 border border-blue-500/40' : 'px-2 py-0.5 rounded text-[10px] font-mono font-semibold bg-slate-800 text-slate-400';
      }
      setDotBadge('ppp-badge-pppoe-state', s.running);
    }

    if (pptpRes.ok) {
      state.pptpServer = await pptpRes.json();
      const s = state.pptpServer;
      document.getElementById('pptp-server-enabled').checked = !!s.enabled;
      document.getElementById('pptp-server-port').value = s.port || 1723;
      document.getElementById('pptp-server-profile').value = s.default_profile || 'default-encryption';
      document.getElementById('pptp-server-mppe').checked = s.require_mppe !== false;
      const pill = document.getElementById('pptp-server-status-pill');
      if (pill) {
        pill.innerText = s.running ? `ACTIVE (${s.active_sessions} sess)` : 'STOPPED';
        pill.className = s.running ? 'px-2 py-0.5 rounded text-[10px] font-mono font-semibold bg-purple-500/20 text-purple-300 border border-purple-500/40' : 'px-2 py-0.5 rounded text-[10px] font-mono font-semibold bg-slate-800 text-slate-400';
      }
      setDotBadge('ppp-badge-pptp-state', s.running);
    }

    if (l2tpRes.ok) {
      state.l2tpServer = await l2tpRes.json();
      const s = state.l2tpServer;
      document.getElementById('l2tp-server-enabled').checked = !!s.enabled;
      document.getElementById('l2tp-server-port').value = s.port || 1701;
      document.getElementById('l2tp-server-profile').value = s.default_profile || 'default';
      document.getElementById('l2tp-server-useipsec').value = s.use_ipsec || 'no';
      document.getElementById('l2tp-server-ipsecsecret').value = s.ipsec_secret || '';
      const pill = document.getElementById('l2tp-server-status-pill');
      if (pill) {
        pill.innerText = s.running ? `ACTIVE (${s.active_sessions} sess)` : 'STOPPED';
        pill.className = s.running ? 'px-2 py-0.5 rounded text-[10px] font-mono font-semibold bg-cyan-500/20 text-cyan-300 border border-cyan-500/40' : 'px-2 py-0.5 rounded text-[10px] font-mono font-semibold bg-slate-800 text-slate-400';
      }
      setDotBadge('ppp-badge-l2tp-state', s.running);
    }

    if (ipsecRes.ok) {
      state.ipsecServer = await ipsecRes.json();
      const s = state.ipsecServer;
      const modalEn = document.getElementById('modal-ipsec-server-enabled');
      if (modalEn) modalEn.checked = !!s.enabled;
      const modalPsk = document.getElementById('modal-ipsec-server-psk');
      if (modalPsk) modalPsk.value = s.preshared_key || '';
      const modalPool = document.getElementById('modal-ipsec-server-pool');
      if (modalPool) modalPool.value = s.pool_address || '10.10.30.0/24';
      const modalDns = document.getElementById('modal-ipsec-server-dns');
      if (modalDns) modalDns.value = s.dns_servers || '1.1.1.1,8.8.8.8';
      const modalSubnet = document.getElementById('modal-ipsec-server-subnet');
      if (modalSubnet) modalSubnet.value = s.local_subnet || '0.0.0.0/0';
      const pill = document.getElementById('modal-ipsec-server-status');
      if (pill) {
        pill.innerText = s.running ? 'ACTIVE RESPONDER' : 'STOPPED';
        pill.className = s.running ? 'px-2 py-0.5 rounded text-[10px] font-mono font-semibold bg-amber-500/20 text-amber-300 border border-amber-500/40' : 'px-2 py-0.5 rounded text-[10px] font-mono font-semibold bg-slate-800 text-slate-400';
      }
    }
  } catch (err) {
    console.error('Failed to load VPN servers:', err);
  }
}

async function loadPPPSessions() {
  try {
    const res = await fetch(`${API_BASE}/vpn/ppp/active`);
    const data = await res.json();
    state.pppActiveSessions = Array.isArray(data) ? data : [];
    const b = document.getElementById('ppp-badge-active');
    if (b) b.innerText = state.pppActiveSessions.length;
    const sideB = document.getElementById('badge-ppp-sessions');
    if (sideB) sideB.innerText = state.pppActiveSessions.length;
    renderPPPSessions();
  } catch (err) {
    console.error('Failed to load active PPP sessions:', err);
  }
}

function renderPPPSessions() {
  const tbody = document.getElementById('active-ppp-table-body');
  const empty = document.getElementById('active-ppp-empty');
  if (!tbody) return;
  tbody.innerHTML = '';

  const list = state.pppActiveSessions || [];
  if (list.length === 0) {
    empty?.classList.remove('hidden');
    return;
  }
  empty?.classList.add('hidden');

  list.forEach(s => {
    const tr = document.createElement('tr');
    tr.className = 'hover:bg-slate-800/40 transition text-xs font-mono';
    tr.innerHTML = `
      <td class="py-2.5 px-3 font-bold text-white">${s.interface}</td>
      <td class="py-2.5 px-3 font-semibold text-violet-300">${s.username}</td>
      <td class="py-2.5 px-3 text-cyan-400 uppercase">${s.service}</td>
      <td class="py-2.5 px-3 text-emerald-400 font-bold">${s.address || '-'}</td>
      <td class="py-2.5 px-3 text-slate-400">${s.uptime}</td>
      <td class="py-2.5 px-3 text-[11px]">
        <span class="text-emerald-400">↓ ${s.rx_human || '0 B'}</span>
        <span class="text-cyan-400 ml-1">↑ ${s.tx_human || '0 B'}</span>
      </td>
      <td class="py-2.5 px-3 text-right font-sans">
        <button onclick="disconnectPPPSession('${s.interface}')" class="text-xs text-rose-400 hover:text-rose-300">Disconnect</button>
      </td>
    `;
    tbody.appendChild(tr);
  });
}

async function disconnectPPPSession(iface) {
  if (!confirm(`Disconnect session ${iface}?`)) return;
  try {
    const res = await fetch(`${API_BASE}/vpn/ppp/active/${encodeURIComponent(iface)}`, { method: 'DELETE' });
    if (res.ok) {
      showToast('Disconnected', `Session ${iface} terminated`, 'info');
      loadPPPSessions();
    }
  } catch (err) {
    showToast('Error', err.message, 'error');
  }
}

// PPP Secret Modal handlers
function openAddPPPSecretModal() {
  document.getElementById('secret-modal-title').innerText = 'Add PPP Secret';
  document.getElementById('secret-modal-id').value = '';
  document.getElementById('secret-modal-name').value = '';
  document.getElementById('secret-modal-password').value = '';
  document.getElementById('secret-modal-service').value = 'any';
  document.getElementById('secret-modal-profile').value = 'default';
  document.getElementById('secret-modal-local').value = '';
  document.getElementById('secret-modal-remote').value = '';
  document.getElementById('secret-modal-comment').value = '';
  document.getElementById('secret-modal-disabled').checked = false;
  document.getElementById('ppp-secret-modal').classList.remove('hidden');
}

function openEditPPPSecretModal(id) {
  const s = (state.pppSecrets || []).find(sec => sec.id === id);
  if (!s) return;
  document.getElementById('secret-modal-title').innerText = `Edit PPP Secret (${s.name})`;
  document.getElementById('secret-modal-id').value = s.id;
  document.getElementById('secret-modal-name').value = s.name;
  document.getElementById('secret-modal-password').value = s.password;
  document.getElementById('secret-modal-service').value = s.service || 'any';
  document.getElementById('secret-modal-profile').value = s.profile || 'default';
  document.getElementById('secret-modal-local').value = s.local_address || '';
  document.getElementById('secret-modal-remote').value = s.remote_address || '';
  document.getElementById('secret-modal-comment').value = s.comment || '';
  document.getElementById('secret-modal-disabled').checked = !!s.disabled;
  document.getElementById('ppp-secret-modal').classList.remove('hidden');
}

function closePPPSecretModal() {
  document.getElementById('ppp-secret-modal').classList.add('hidden');
}

async function submitSavePPPSecret(e) {
  e.preventDefault();
  const id = document.getElementById('secret-modal-id').value;
  const name = document.getElementById('secret-modal-name').value.trim();
  const password = document.getElementById('secret-modal-password').value.trim();
  const service = document.getElementById('secret-modal-service').value;
  const profile = document.getElementById('secret-modal-profile').value;
  const local = document.getElementById('secret-modal-local').value.trim();
  const remote = document.getElementById('secret-modal-remote').value.trim();
  const comment = document.getElementById('secret-modal-comment').value.trim();
  const disabled = document.getElementById('secret-modal-disabled').checked;

  try {
    const res = await fetch(`${API_BASE}/vpn/ppp/secrets`, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        id,
        name,
        password,
        service,
        profile,
        local_address: local,
        remote_address: remote,
        comment,
        disabled
      })
    });
    if (res.ok) {
      showToast('Secret Saved', `User ${name} saved to PPP database`, 'success');
      closePPPSecretModal();
      loadPPPSecrets();
    } else {
      const err = await res.json();
      showToast('Error', err.message, 'error');
    }
  } catch (err) {
    showToast('Error', err.message, 'error');
  }
}

async function togglePPPSecretState(id, disabled) {
  try {
    const res = await fetch(`${API_BASE}/vpn/ppp/secrets/${encodeURIComponent(id)}/state`, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ disabled })
    });
    if (res.ok) {
      showToast(disabled ? 'Disabled' : 'Enabled', 'Secret user state updated', 'info');
      loadPPPSecrets();
    }
  } catch (err) {
    showToast('Error', err.message, 'error');
  }
}

async function deletePPPSecret(id) {
  if (!confirm('Are you sure you want to delete this secret account?')) return;
  try {
    const res = await fetch(`${API_BASE}/vpn/ppp/secrets/${encodeURIComponent(id)}`, { method: 'DELETE' });
    if (res.ok) {
      showToast('Deleted', 'Secret account removed', 'success');
      loadPPPSecrets();
    }
  } catch (err) {
    showToast('Error', err.message, 'error');
  }
}

// PPP Profile Modal handlers
function openAddPPPProfileModal() {
  document.getElementById('profile-modal-name').value = '';
  document.getElementById('profile-modal-local').value = '10.10.10.1';
  document.getElementById('profile-modal-remote').value = '10.10.10.10-10.10.10.50';
  document.getElementById('profile-modal-dns').value = '1.1.1.1,8.8.8.8';
  document.getElementById('profile-modal-encryption').value = 'required';
  document.getElementById('profile-modal-onlyone').checked = true;
  document.getElementById('profile-modal-comment').value = '';
  document.getElementById('ppp-profile-modal').classList.remove('hidden');
}

function closePPPProfileModal() {
  document.getElementById('ppp-profile-modal').classList.add('hidden');
}

async function submitSavePPPProfile(e) {
  e.preventDefault();
  const name = document.getElementById('profile-modal-name').value.trim();
  const local = document.getElementById('profile-modal-local').value.trim();
  const remote = document.getElementById('profile-modal-remote').value.trim();
  const dns = document.getElementById('profile-modal-dns').value.trim();
  const enc = document.getElementById('profile-modal-encryption').value;
  const onlyone = document.getElementById('profile-modal-onlyone').checked;
  const comment = document.getElementById('profile-modal-comment').value.trim();

  try {
    const res = await fetch(`${API_BASE}/vpn/ppp/profiles`, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        id: name,
        name,
        local_address: local,
        remote_address: remote,
        dns_servers: dns,
        use_encryption: enc,
        only_one: onlyone,
        comment
      })
    });
    if (res.ok) {
      showToast('Profile Saved', `PPP profile ${name} created`, 'success');
      closePPPProfileModal();
      loadPPPProfiles();
    } else {
      const err = await res.json();
      showToast('Error', err.message, 'error');
    }
  } catch (err) {
    showToast('Error', err.message, 'error');
  }
}

async function deletePPPProfile(name) {
  if (!confirm(`Delete PPP profile ${name}?`)) return;
  try {
    const res = await fetch(`${API_BASE}/vpn/ppp/profiles/${encodeURIComponent(name)}`, { method: 'DELETE' });
    if (res.ok) {
      showToast('Deleted', 'Profile removed', 'success');
      loadPPPProfiles();
    } else {
      const err = await res.json();
      showToast('Error', err.message, 'error');
    }
  } catch (err) {
    showToast('Error', err.message, 'error');
  }
}

// Server Config submissions
async function savePPPoEServerConfig(e) {
  e.preventDefault();
  const enabled = document.getElementById('pppoe-server-enabled').checked;
  const name = document.getElementById('pppoe-server-name').value.trim();
  const iface = document.getElementById('pppoe-server-iface').value;
  const profile = document.getElementById('pppoe-server-profile').value;
  const mtu = parseInt(document.getElementById('pppoe-server-mtu').value) || 1480;
  const onesession = document.getElementById('pppoe-server-onesession').checked;

  try {
    const res = await fetch(`${API_BASE}/vpn/servers/pppoe`, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        enabled,
        service_name: name,
        interface: iface,
        default_profile: profile,
        max_mtu: mtu,
        max_mru: mtu,
        one_session_per_host: onesession
      })
    });
    if (res.ok) {
      showToast('PPPoE Server', enabled ? 'PPPoE Server started' : 'PPPoE Server stopped', 'success');
      loadPPPServers();
      fetchData(false);
    } else {
      const err = await res.json();
      showToast('Error', err.message, 'error');
    }
  } catch (err) {
    showToast('Error', err.message, 'error');
  }
}

async function savePPTPServerConfig(e) {
  e.preventDefault();
  const enabled = document.getElementById('pptp-server-enabled').checked;
  const port = parseInt(document.getElementById('pptp-server-port').value) || 1723;
  const profile = document.getElementById('pptp-server-profile').value;
  const mppe = document.getElementById('pptp-server-mppe').checked;

  try {
    const res = await fetch(`${API_BASE}/vpn/servers/pptp`, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        enabled,
        port,
        default_profile: profile,
        require_mppe: mppe
      })
    });
    if (res.ok) {
      showToast('PPTP Server', enabled ? 'PPTP Server started' : 'PPTP Server stopped', 'success');
      loadPPPServers();
      fetchData(false);
    } else {
      const err = await res.json();
      showToast('Error', err.message, 'error');
    }
  } catch (err) {
    showToast('Error', err.message, 'error');
  }
}

async function saveL2TPServerConfig(e) {
  e.preventDefault();
  const enabled = document.getElementById('l2tp-server-enabled').checked;
  const port = parseInt(document.getElementById('l2tp-server-port').value) || 1701;
  const profile = document.getElementById('l2tp-server-profile').value;
  const useipsec = document.getElementById('l2tp-server-useipsec').value;
  const psk = document.getElementById('l2tp-server-ipsecsecret').value.trim();

  try {
    const res = await fetch(`${API_BASE}/vpn/servers/l2tp`, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        enabled,
        port,
        default_profile: profile,
        use_ipsec: useipsec,
        ipsec_secret: psk
      })
    });
    if (res.ok) {
      showToast('L2TP Server', enabled ? 'L2TP Server started' : 'L2TP Server stopped', 'success');
      loadPPPServers();
      fetchData(false);
    } else {
      const err = await res.json();
      showToast('Error', err.message, 'error');
    }
  } catch (err) {
    showToast('Error', err.message, 'error');
  }
}

// IPSec Server Modal
function openIPSecServerModal() {
  loadPPPServers();
  document.getElementById('ipsec-server-modal').classList.remove('hidden');
}

function closeIPSecServerModal() {
  document.getElementById('ipsec-server-modal').classList.add('hidden');
}

async function submitSaveIPSecServer(e) {
  e.preventDefault();
  const enabled = document.getElementById('modal-ipsec-server-enabled').checked;
  const psk = document.getElementById('modal-ipsec-server-psk').value.trim();
  const pool = document.getElementById('modal-ipsec-server-pool').value.trim();
  const dns = document.getElementById('modal-ipsec-server-dns').value.trim();
  const subnet = document.getElementById('modal-ipsec-server-subnet').value.trim();

  try {
    const res = await fetch(`${API_BASE}/vpn/servers/ipsec`, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        enabled,
        preshared_key: psk,
        pool_address: pool,
        dns_servers: dns,
        local_subnet: subnet
      })
    });
    if (res.ok) {
      showToast('IPSec Server', enabled ? 'IKEv2 Roadwarrior responder active' : 'IPSec Server stopped', 'success');
      closeIPSecServerModal();
      loadPPPServers();
      fetchData(false);
    } else {
      const err = await res.json();
      showToast('Error', err.message, 'error');
    }
  } catch (err) {
    showToast('Error', err.message, 'error');
  }
}

// WireGuard Client Config Viewer
let currentWGClientConf = '';

async function openWGClientConfModal(iface, clientIP) {
  try {
    const res = await fetch(`${API_BASE}/vpn/wireguard/client-config`, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        interface: iface,
        address: clientIP || '10.10.0.2/32',
        dns: '1.1.1.1, 8.8.8.8'
      })
    });
    if (res.ok) {
      const data = await res.json();
      currentWGClientConf = data.config;
      document.getElementById('wg-client-conf-text').value = currentWGClientConf;
      document.getElementById('wg-client-conf-modal').classList.remove('hidden');
    } else {
      const err = await res.json();
      showToast('Error', err.message, 'error');
    }
  } catch (err) {
    showToast('Error', err.message, 'error');
  }
}

function closeWGClientConfModal() {
  document.getElementById('wg-client-conf-modal').classList.add('hidden');
}

function copyWGClientConf() {
  if (!currentWGClientConf) return;
  copyToClipboard(currentWGClientConf, 'WireGuard Client Profile');
}

function downloadWGClientConf() {
  if (!currentWGClientConf) return;
  const blob = new Blob([currentWGClientConf], { type: 'text/plain;charset=utf-8' });
  const a = document.createElement('a');
  a.href = URL.createObjectURL(blob);
  a.download = 'wireguard-client.conf';
  document.body.appendChild(a);
  a.click();
  document.body.removeChild(a);
  showToast('Downloaded', 'wireguard-client.conf saved', 'success');
}

// =========================================================================
// DYNAMIC ROUTING (FRRouting BGP & OSPFv2)
// =========================================================================

state.activeDynSubTab = 'bgp-peers';
state.bgpInstance = null;
state.bgpPeers = [];
state.bgpNets = [];
state.bgpRoutes = [];
state.ospfInstance = null;
state.ospfInterfaces = [];
state.ospfAreas = [];
state.ospfNeighbors = [];
state.ospfRoutes = [];

function switchDynSubTab(subTab) {
  state.activeDynSubTab = subTab;
  const tabs = ['bgp-peers', 'bgp-nets', 'bgp-routes', 'ospf-ifaces', 'ospf-areas', 'ospf-nbrs', 'ospf-routes'];
  tabs.forEach(t => {
    const el = document.getElementById(`dyn-subtab-${t}`);
    const btn = document.getElementById(`dyn-subtab-btn-${t}`);
    if (el) el.classList.toggle('hidden', t !== subTab);
    if (btn) {
      if (t === subTab) {
        btn.className = `px-4 py-2.5 text-xs font-bold border-b-2 ${t.startsWith('bgp') ? 'border-purple-500' : 'border-indigo-500'} text-white transition flex items-center gap-2 whitespace-nowrap`;
      } else {
        btn.className = 'px-4 py-2.5 text-xs font-bold border-b-2 border-transparent text-slate-400 hover:text-slate-200 transition flex items-center gap-2 whitespace-nowrap';
      }
    }
  });
}

async function loadDynamicRouting(showToastMsg = true) {
  try {
    const [sumRes, bgpInstRes, bgpPeersRes, bgpNetsRes, bgpRoutesRes, ospfInstRes, ospfIfacesRes, ospfAreasRes, ospfNbrsRes, ospfRoutesRes] = await Promise.all([
      fetch(`${API_BASE}/routing/dynamic/summary`),
      fetch(`${API_BASE}/routing/bgp/instance`),
      fetch(`${API_BASE}/routing/bgp/peers`),
      fetch(`${API_BASE}/routing/bgp/networks`),
      fetch(`${API_BASE}/routing/bgp/routes`),
      fetch(`${API_BASE}/routing/ospf/instance`),
      fetch(`${API_BASE}/routing/ospf/interfaces`),
      fetch(`${API_BASE}/routing/ospf/areas`),
      fetch(`${API_BASE}/routing/ospf/neighbors`),
      fetch(`${API_BASE}/routing/ospf/routes`)
    ]);

    if (sumRes.ok) state.dynSummary = await sumRes.json();
    if (bgpInstRes.ok) state.bgpInstance = await bgpInstRes.json();
    if (bgpPeersRes.ok) state.bgpPeers = await bgpPeersRes.json();
    if (bgpNetsRes.ok) state.bgpNets = await bgpNetsRes.json();
    if (bgpRoutesRes.ok) state.bgpRoutes = await bgpRoutesRes.json();
    if (ospfInstRes.ok) state.ospfInstance = await ospfInstRes.json();
    if (ospfIfacesRes.ok) state.ospfInterfaces = await ospfIfacesRes.json();
    if (ospfAreasRes.ok) state.ospfAreas = await ospfAreasRes.json();
    if (ospfNbrsRes.ok) state.ospfNeighbors = await ospfNbrsRes.json();
    if (ospfRoutesRes.ok) state.ospfRoutes = await ospfRoutesRes.json();

    renderBgpStatusPill();
    renderBgpPeers();
    renderBgpNetworks();
    renderBgpRoutes();
    renderOspfStatusPill();
    renderOspfInterfaces();
    renderOspfAreas();
    renderOspfNeighbors();
    renderOspfRoutes();
    updateBadges();
  } catch (err) {
    console.error('Failed to load dynamic routing:', err);
    if (showToastMsg) showToast('Error', 'Failed to load dynamic routing telemetry', 'error');
  }
}

function renderBgpStatusPill() {
  const pill = document.getElementById('bgp-live-status-pill');
  if (!pill) return;
  const inst = state.bgpInstance;
  if (!inst || !inst.enabled) {
    pill.className = 'text-[10px] px-2 py-0.5 rounded font-mono bg-slate-800 text-slate-400 border border-slate-700';
    pill.innerText = 'BGP DISABLED';
  } else if (inst.running) {
    pill.className = 'text-[10px] px-2 py-0.5 rounded font-mono bg-purple-950 text-purple-300 border border-purple-800/60 font-semibold';
    pill.innerText = `BGP ACTIVE (AS ${inst.as})`;
  } else {
    pill.className = 'text-[10px] px-2 py-0.5 rounded font-mono bg-amber-950 text-amber-300 border border-amber-800/60 font-semibold';
    pill.innerText = 'BGP STARTING...';
  }
}

function renderBgpPeers() {
  const tbody = document.getElementById('bgp-peers-table-body');
  const empty = document.getElementById('bgp-peers-empty');
  const countBadge = document.getElementById('bgp-peers-count-badge');
  const navBadge = document.getElementById('dyn-badge-bgp-peers');

  const peers = state.bgpPeers || [];
  if (countBadge) countBadge.innerText = `${peers.length} Peers`;
  if (navBadge) navBadge.innerText = peers.length;

  if (peers.length === 0) {
    tbody.innerHTML = '';
    empty.classList.remove('hidden');
    return;
  }
  empty.classList.add('hidden');

  tbody.innerHTML = peers.map(p => {
    let flagA = !p.disabled ? '<span class="text-cyan-400 font-bold" title="Active">A</span>' : '';
    let flagE = p.state === 'Established' ? '<span class="text-emerald-400 font-bold ml-1" title="Established">E</span>' : '';
    let flagX = p.disabled ? '<span class="text-rose-400 font-bold ml-1" title="Disabled">X</span>' : '';

    let stateBadge = '';
    if (p.disabled) {
      stateBadge = '<span class="px-2 py-0.5 rounded-full text-[10px] font-sans font-medium bg-slate-800 text-slate-400 border border-slate-700">Disabled</span>';
    } else if (p.state === 'Established') {
      stateBadge = '<span class="px-2 py-0.5 rounded-full text-[10px] font-sans font-medium bg-emerald-500/10 text-emerald-400 border border-emerald-500/20">Established</span>';
    } else if (p.state === 'Connect' || p.state === 'Active') {
      stateBadge = `<span class="px-2 py-0.5 rounded-full text-[10px] font-sans font-medium bg-amber-500/10 text-amber-400 border border-amber-500/20">${p.state}</span>`;
    } else {
      stateBadge = `<span class="px-2 py-0.5 rounded-full text-[10px] font-sans font-medium bg-slate-800 text-slate-400 border border-slate-700">${p.state || 'Idle'}</span>`;
    }

    return `
      <tr class="hover:bg-slate-800/40 transition">
        <td class="py-2.5 px-3 text-center tracking-wider">${flagA}${flagE}${flagX}</td>
        <td class="py-2.5 px-3 font-semibold text-white">${escapeHtml(p.name)}</td>
        <td class="py-2.5 px-3 text-purple-300 font-bold">${escapeHtml(p.remote_address)}</td>
        <td class="py-2.5 px-3 font-bold text-slate-200">AS ${p.remote_as}</td>
        <td class="py-2.5 px-3">${stateBadge}</td>
        <td class="py-2.5 px-3 text-slate-400">${escapeHtml(p.uptime || '-')}</td>
        <td class="py-2.5 px-3 text-slate-300">
          <span class="text-emerald-400 font-bold">↓ ${p.prefix_received || 0}</span> / 
          <span class="text-blue-400 font-bold">↑ ${p.prefix_sent || 0}</span>
        </td>
        <td class="py-2.5 px-3 text-slate-400 font-sans truncate max-w-xs">${escapeHtml(p.comment || '')}</td>
        <td class="py-2.5 px-3 text-right space-x-1.5 whitespace-nowrap font-sans">
          <button onclick="toggleBgpPeerState('${p.id}', ${!p.disabled})" class="px-2 py-1 rounded text-[11px] ${p.disabled ? 'bg-emerald-950 hover:bg-emerald-900 text-emerald-400 border border-emerald-800/50' : 'bg-slate-800 hover:bg-slate-700 text-slate-300 border border-slate-700'}">
            ${p.disabled ? 'Enable' : 'Disable'}
          </button>
          <button onclick="openEditBgpPeerModal('${p.id}')" class="px-2 py-1 rounded text-[11px] bg-slate-800 hover:bg-slate-700 text-purple-300 border border-slate-700">
            Edit
          </button>
          <button onclick="deleteBgpPeer('${p.id}')" class="px-2 py-1 rounded text-[11px] bg-rose-950/60 hover:bg-rose-900 text-rose-300 border border-rose-900/50">
            Delete
          </button>
        </td>
      </tr>
    `;
  }).join('');
}

function renderBgpNetworks() {
  const tbody = document.getElementById('bgp-nets-table-body');
  const empty = document.getElementById('bgp-nets-empty');
  const countBadge = document.getElementById('bgp-nets-count-badge');
  const navBadge = document.getElementById('dyn-badge-bgp-nets');

  const nets = state.bgpNets || [];
  if (countBadge) countBadge.innerText = `${nets.length} Networks`;
  if (navBadge) navBadge.innerText = nets.length;

  if (nets.length === 0) {
    tbody.innerHTML = '';
    empty.classList.remove('hidden');
    return;
  }
  empty.classList.add('hidden');

  tbody.innerHTML = nets.map(n => `
    <tr class="hover:bg-slate-800/40 transition">
      <td class="py-2.5 px-3 font-semibold text-purple-300 font-mono">${escapeHtml(n.network)}</td>
      <td class="py-2.5 px-3">
        ${n.disabled 
          ? '<span class="px-2 py-0.5 rounded-full text-[10px] bg-slate-800 text-slate-400 border border-slate-700">Disabled</span>'
          : '<span class="px-2 py-0.5 rounded-full text-[10px] bg-emerald-500/10 text-emerald-400 border border-emerald-500/20">Announcing</span>'}
      </td>
      <td class="py-2.5 px-3 text-slate-400 font-sans truncate max-w-xs">${escapeHtml(n.comment || '')}</td>
      <td class="py-2.5 px-3 text-right space-x-1 font-sans">
        <button onclick="deleteBgpNetwork('${n.id}')" class="px-2 py-1 rounded text-[11px] bg-rose-950/60 hover:bg-rose-900 text-rose-300 border border-rose-900/50">
          Delete
        </button>
      </td>
    </tr>
  `).join('');
}

function renderBgpRoutes() {
  const tbody = document.getElementById('bgp-routes-table-body');
  const empty = document.getElementById('bgp-routes-empty');
  const countBadge = document.getElementById('bgp-routes-count-badge');
  const navBadge = document.getElementById('dyn-badge-bgp-routes');

  const routes = state.bgpRoutes || [];
  if (countBadge) countBadge.innerText = `${routes.length} Routes`;
  if (navBadge) navBadge.innerText = routes.length;

  if (routes.length === 0) {
    tbody.innerHTML = '';
    empty.classList.remove('hidden');
    return;
  }
  empty.classList.add('hidden');

  tbody.innerHTML = routes.map(r => `
    <tr class="hover:bg-slate-800/40 transition">
      <td class="py-2.5 px-3 font-semibold text-white">${escapeHtml(r.prefix)}</td>
      <td class="py-2.5 px-3 text-purple-300 font-bold">${escapeHtml(r.next_hop || '-')}</td>
      <td class="py-2.5 px-3 text-slate-300">${r.metric}</td>
      <td class="py-2.5 px-3 text-slate-300">${r.weight}</td>
      <td class="py-2.5 px-3 text-amber-300">${escapeHtml(r.path || 'i')}</td>
      <td class="py-2.5 px-3 text-slate-400">${escapeHtml(r.origin || 'IGP')}</td>
    </tr>
  `).join('');
}

function renderOspfStatusPill() {
  const pill = document.getElementById('ospf-live-status-pill');
  if (!pill) return;
  const inst = state.ospfInstance;
  if (!inst || !inst.enabled) {
    pill.className = 'text-[10px] px-2 py-0.5 rounded font-mono bg-slate-800 text-slate-400 border border-slate-700';
    pill.innerText = 'OSPF DISABLED';
  } else if (inst.running) {
    pill.className = 'text-[10px] px-2 py-0.5 rounded font-mono bg-indigo-950 text-indigo-300 border border-indigo-800/60 font-semibold';
    pill.innerText = `OSPF ACTIVE (ID: ${inst.router_id || 'Auto'})`;
  } else {
    pill.className = 'text-[10px] px-2 py-0.5 rounded font-mono bg-amber-950 text-amber-300 border border-amber-800/60 font-semibold';
    pill.innerText = 'OSPF STARTING...';
  }
}

function renderOspfInterfaces() {
  const tbody = document.getElementById('ospf-ifaces-table-body');
  const empty = document.getElementById('ospf-ifaces-empty');
  const countBadge = document.getElementById('ospf-ifaces-count-badge');
  const navBadge = document.getElementById('dyn-badge-ospf-ifaces');

  const ifaces = state.ospfInterfaces || [];
  if (countBadge) countBadge.innerText = `${ifaces.length} Interfaces`;
  if (navBadge) navBadge.innerText = ifaces.length;

  if (ifaces.length === 0) {
    tbody.innerHTML = '';
    empty.classList.remove('hidden');
    return;
  }
  empty.classList.add('hidden');

  tbody.innerHTML = ifaces.map(i => {
    let flagA = !i.disabled ? '<span class="text-cyan-400 font-bold" title="Active">A</span>' : '';
    let flagP = i.passive ? '<span class="text-amber-400 font-bold ml-1" title="Passive">P</span>' : '';
    let flagX = i.disabled ? '<span class="text-rose-400 font-bold ml-1" title="Disabled">X</span>' : '';

    return `
      <tr class="hover:bg-slate-800/40 transition">
        <td class="py-2.5 px-3 text-center tracking-wider">${flagA}${flagP}${flagX}</td>
        <td class="py-2.5 px-3 font-semibold text-white font-mono">${escapeHtml(i.network)}</td>
        <td class="py-2.5 px-3 text-indigo-300 font-bold">Area ${escapeHtml(i.area)}</td>
        <td class="py-2.5 px-3 text-slate-300 font-mono">${escapeHtml(i.interface || 'Any')}</td>
        <td class="py-2.5 px-3 text-slate-300">${i.cost}</td>
        <td class="py-2.5 px-3 text-slate-300">${i.priority}</td>
        <td class="py-2.5 px-3 text-slate-400">${i.hello_interval}s / ${i.dead_interval}s</td>
        <td class="py-2.5 px-3 text-slate-300 uppercase">${escapeHtml(i.auth_type || 'none')}</td>
        <td class="py-2.5 px-3 text-slate-400 font-sans truncate max-w-xs">${escapeHtml(i.comment || '')}</td>
        <td class="py-2.5 px-3 text-right space-x-1.5 whitespace-nowrap font-sans">
          <button onclick="toggleOspfInterfaceState('${i.id}', ${!i.disabled})" class="px-2 py-1 rounded text-[11px] ${i.disabled ? 'bg-emerald-950 hover:bg-emerald-900 text-emerald-400 border border-emerald-800/50' : 'bg-slate-800 hover:bg-slate-700 text-slate-300 border border-slate-700'}">
            ${i.disabled ? 'Enable' : 'Disable'}
          </button>
          <button onclick="openEditOspfInterfaceModal('${i.id}')" class="px-2 py-1 rounded text-[11px] bg-slate-800 hover:bg-slate-700 text-indigo-300 border border-slate-700">
            Edit
          </button>
          <button onclick="deleteOspfInterface('${i.id}')" class="px-2 py-1 rounded text-[11px] bg-rose-950/60 hover:bg-rose-900 text-rose-300 border border-rose-900/50">
            Delete
          </button>
        </td>
      </tr>
    `;
  }).join('');
}

function renderOspfAreas() {
  const tbody = document.getElementById('ospf-areas-table-body');
  const countBadge = document.getElementById('ospf-areas-count-badge');
  const navBadge = document.getElementById('dyn-badge-ospf-areas');

  const areas = state.ospfAreas || [];
  if (countBadge) countBadge.innerText = `${areas.length} Areas`;
  if (navBadge) navBadge.innerText = areas.length;

  tbody.innerHTML = areas.map(a => `
    <tr class="hover:bg-slate-800/40 transition">
      <td class="py-2.5 px-3 font-semibold text-white font-mono">${escapeHtml(a.name)}</td>
      <td class="py-2.5 px-3 font-bold text-indigo-300">${escapeHtml(a.area_id)}</td>
      <td class="py-2.5 px-3 text-slate-300 uppercase">${escapeHtml(a.area_type || 'default')}</td>
      <td class="py-2.5 px-3 text-slate-400 font-sans">${escapeHtml(a.comment || '')}</td>
      <td class="py-2.5 px-3 text-right font-sans">
        <button onclick="deleteOspfArea('${a.id}')" class="px-2 py-1 rounded text-[11px] bg-rose-950/60 hover:bg-rose-900 text-rose-300 border border-rose-900/50">
          Delete
        </button>
      </td>
    </tr>
  `).join('');
}

function renderOspfNeighbors() {
  const tbody = document.getElementById('ospf-nbrs-table-body');
  const empty = document.getElementById('ospf-nbrs-empty');
  const countBadge = document.getElementById('ospf-nbrs-count-badge');
  const navBadge = document.getElementById('dyn-badge-ospf-nbrs');

  const nbrs = state.ospfNeighbors || [];
  if (countBadge) countBadge.innerText = `${nbrs.length} Neighbors`;
  if (navBadge) navBadge.innerText = nbrs.length;

  if (nbrs.length === 0) {
    tbody.innerHTML = '';
    empty.classList.remove('hidden');
    return;
  }
  empty.classList.add('hidden');

  tbody.innerHTML = nbrs.map(n => {
    let stateBadge = '';
    if (n.state && (n.state.startsWith('Full') || n.state.includes('DR') || n.state.includes('Backup'))) {
      stateBadge = `<span class="px-2 py-0.5 rounded-full text-[10px] font-sans font-medium bg-emerald-500/10 text-emerald-400 border border-emerald-500/20">${escapeHtml(n.state)}</span>`;
    } else {
      stateBadge = `<span class="px-2 py-0.5 rounded-full text-[10px] font-sans font-medium bg-amber-500/10 text-amber-400 border border-amber-500/20">${escapeHtml(n.state || 'Unknown')}</span>`;
    }

    return `
      <tr class="hover:bg-slate-800/40 transition">
        <td class="py-2.5 px-3 font-semibold text-white">${escapeHtml(n.neighbor_id)}</td>
        <td class="py-2.5 px-3 text-indigo-300 font-bold">${escapeHtml(n.address)}</td>
        <td class="py-2.5 px-3 text-slate-300 font-mono">${escapeHtml(n.interface)}</td>
        <td class="py-2.5 px-3 text-slate-400">${escapeHtml(n.area || '0.0.0.0')}</td>
        <td class="py-2.5 px-3">${stateBadge}</td>
        <td class="py-2.5 px-3 text-slate-400">${escapeHtml(n.dead_timer || '-')}</td>
      </tr>
    `;
  }).join('');
}

function renderOspfRoutes() {
  const tbody = document.getElementById('ospf-routes-table-body');
  const empty = document.getElementById('ospf-routes-empty');
  const countBadge = document.getElementById('ospf-routes-count-badge');
  const navBadge = document.getElementById('dyn-badge-ospf-routes');

  const routes = state.ospfRoutes || [];
  if (countBadge) countBadge.innerText = `${routes.length} Routes`;
  if (navBadge) navBadge.innerText = routes.length;

  if (routes.length === 0) {
    tbody.innerHTML = '';
    empty.classList.remove('hidden');
    return;
  }
  empty.classList.add('hidden');

  tbody.innerHTML = routes.map(r => `
    <tr class="hover:bg-slate-800/40 transition">
      <td class="py-2.5 px-3 font-semibold text-white font-mono">${escapeHtml(r.prefix)}</td>
      <td class="py-2.5 px-3 text-slate-300">${escapeHtml(r.route_type || 'Network')}</td>
      <td class="py-2.5 px-3 text-slate-300">${r.cost}</td>
      <td class="py-2.5 px-3 text-indigo-300 font-bold">Area ${escapeHtml(r.area || '0.0.0.0')}</td>
      <td class="py-2.5 px-3 text-slate-300 font-mono">${escapeHtml(r.next_hop || r.interface || '-')}</td>
    </tr>
  `).join('');
}

// BGP Modals & Actions
function openBgpInstanceModal() {
  const inst = state.bgpInstance || { enabled: false, as: 65001, router_id: '192.168.131.56', hold_time: 180, keepalive_time: 60 };
  document.getElementById('modal-bgp-enabled').checked = !!inst.enabled;
  document.getElementById('modal-bgp-as').value = inst.as || 65001;
  document.getElementById('modal-bgp-router-id').value = inst.router_id || '';
  document.getElementById('modal-bgp-keepalive').value = inst.keepalive_time || 60;
  document.getElementById('modal-bgp-holdtime').value = inst.hold_time || 180;
  document.getElementById('modal-bgp-redist-conn').checked = !!inst.redistribute_connected;
  document.getElementById('modal-bgp-redist-static').checked = !!inst.redistribute_static;
  document.getElementById('modal-bgp-redist-ospf').checked = !!inst.redistribute_ospf;
  document.getElementById('bgp-instance-modal').classList.remove('hidden');
}

function closeBgpInstanceModal() {
  document.getElementById('bgp-instance-modal').classList.add('hidden');
}

async function submitBgpInstance(e) {
  e.preventDefault();
  const payload = {
    enabled: document.getElementById('modal-bgp-enabled').checked,
    as: parseInt(document.getElementById('modal-bgp-as').value, 10),
    router_id: document.getElementById('modal-bgp-router-id').value.trim(),
    keepalive_time: parseInt(document.getElementById('modal-bgp-keepalive').value, 10),
    hold_time: parseInt(document.getElementById('modal-bgp-holdtime').value, 10),
    redistribute_connected: document.getElementById('modal-bgp-redist-conn').checked,
    redistribute_static: document.getElementById('modal-bgp-redist-static').checked,
    redistribute_ospf: document.getElementById('modal-bgp-redist-ospf').checked
  };

  try {
    const res = await fetch(`${API_BASE}/routing/bgp/instance`, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(payload)
    });
    if (res.ok) {
      closeBgpInstanceModal();
      showToast('Success', 'BGP instance configuration updated', 'success');
      loadDynamicRouting();
    } else {
      const err = await res.json();
      showToast('Error', err.error || 'Failed to update BGP instance', 'error');
    }
  } catch (err) {
    showToast('Error', err.message, 'error');
  }
}

function openAddBgpPeerModal() {
  document.getElementById('bgp-peer-form').reset();
  document.getElementById('modal-bgp-peer-id').value = '';
  document.getElementById('bgp-peer-modal-title').innerText = 'Add BGP Peer Connection';
  document.getElementById('modal-bgp-peer-nexthop-self').checked = true;
  document.getElementById('bgp-peer-modal').classList.remove('hidden');
}

function openEditBgpPeerModal(id) {
  const p = (state.bgpPeers || []).find(item => item.id === id);
  if (!p) return;
  document.getElementById('modal-bgp-peer-id').value = p.id;
  document.getElementById('modal-bgp-peer-name').value = p.name || '';
  document.getElementById('modal-bgp-peer-remote-addr').value = p.remote_address || '';
  document.getElementById('modal-bgp-peer-remote-as').value = p.remote_as || '';
  document.getElementById('modal-bgp-peer-local-addr').value = p.local_address || '';
  document.getElementById('modal-bgp-peer-password').value = p.password || '';
  document.getElementById('modal-bgp-peer-multihop').checked = !!p.multihop;
  document.getElementById('modal-bgp-peer-nexthop-self').checked = !!p.nexthop_self;
  document.getElementById('modal-bgp-peer-passive').checked = !!p.passive;
  document.getElementById('modal-bgp-peer-disabled').checked = !!p.disabled;
  document.getElementById('modal-bgp-peer-comment').value = p.comment || '';
  document.getElementById('bgp-peer-modal-title').innerText = 'Edit BGP Peer Connection';
  document.getElementById('bgp-peer-modal').classList.remove('hidden');
}

function closeBgpPeerModal() {
  document.getElementById('bgp-peer-modal').classList.add('hidden');
}

async function submitBgpPeer(e) {
  e.preventDefault();
  const payload = {
    id: document.getElementById('modal-bgp-peer-id').value,
    name: document.getElementById('modal-bgp-peer-name').value.trim(),
    remote_address: document.getElementById('modal-bgp-peer-remote-addr').value.trim(),
    remote_as: parseInt(document.getElementById('modal-bgp-peer-remote-as').value, 10),
    local_address: document.getElementById('modal-bgp-peer-local-addr').value.trim(),
    password: document.getElementById('modal-bgp-peer-password').value,
    multihop: document.getElementById('modal-bgp-peer-multihop').checked,
    nexthop_self: document.getElementById('modal-bgp-peer-nexthop-self').checked,
    passive: document.getElementById('modal-bgp-peer-passive').checked,
    disabled: document.getElementById('modal-bgp-peer-disabled').checked,
    comment: document.getElementById('modal-bgp-peer-comment').value.trim()
  };

  try {
    const res = await fetch(`${API_BASE}/routing/bgp/peers`, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(payload)
    });
    if (res.ok) {
      closeBgpPeerModal();
      showToast('Success', 'BGP Peer saved', 'success');
      loadDynamicRouting();
    } else {
      const err = await res.json();
      showToast('Error', err.error || 'Failed to save peer', 'error');
    }
  } catch (err) {
    showToast('Error', err.message, 'error');
  }
}

async function deleteBgpPeer(id) {
  if (!confirm('Are you sure you want to delete this BGP peer connection?')) return;
  try {
    const res = await fetch(`${API_BASE}/routing/bgp/peers/${encodeURIComponent(id)}`, { method: 'DELETE' });
    if (res.ok) {
      showToast('Deleted', 'BGP peer removed', 'success');
      loadDynamicRouting();
    }
  } catch (err) {
    showToast('Error', err.message, 'error');
  }
}

async function toggleBgpPeerState(id, disabled) {
  try {
    const res = await fetch(`${API_BASE}/routing/bgp/peers/${encodeURIComponent(id)}/state`, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ disabled })
    });
    if (res.ok) {
      showToast('Updated', `Peer ${disabled ? 'disabled' : 'enabled'}`, 'success');
      loadDynamicRouting();
    }
  } catch (err) {
    showToast('Error', err.message, 'error');
  }
}

function openAddBgpNetworkModal() {
  document.getElementById('bgp-network-form').reset();
  document.getElementById('modal-bgp-net-id').value = '';
  document.getElementById('bgp-network-modal').classList.remove('hidden');
}

function closeBgpNetworkModal() {
  document.getElementById('bgp-network-modal').classList.add('hidden');
}

async function submitBgpNetwork(e) {
  e.preventDefault();
  const payload = {
    id: document.getElementById('modal-bgp-net-id').value,
    network: document.getElementById('modal-bgp-net-cidr').value.trim(),
    comment: document.getElementById('modal-bgp-net-comment').value.trim(),
    disabled: document.getElementById('modal-bgp-net-disabled').checked
  };

  try {
    const res = await fetch(`${API_BASE}/routing/bgp/networks`, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(payload)
    });
    if (res.ok) {
      closeBgpNetworkModal();
      showToast('Success', 'BGP network advertisement saved', 'success');
      loadDynamicRouting();
    } else {
      const err = await res.json();
      showToast('Error', err.error || 'Failed to save network', 'error');
    }
  } catch (err) {
    showToast('Error', err.message, 'error');
  }
}

async function deleteBgpNetwork(id) {
  if (!confirm('Are you sure you want to stop announcing this network?')) return;
  try {
    const res = await fetch(`${API_BASE}/routing/bgp/networks/${encodeURIComponent(id)}`, { method: 'DELETE' });
    if (res.ok) {
      showToast('Deleted', 'Network advertisement removed', 'success');
      loadDynamicRouting();
    }
  } catch (err) {
    showToast('Error', err.message, 'error');
  }
}

// OSPF Modals & Actions
function openOspfInstanceModal() {
  const inst = state.ospfInstance || { enabled: false, router_id: '192.168.131.56', default_metric: 10 };
  document.getElementById('modal-ospf-enabled').checked = !!inst.enabled;
  document.getElementById('modal-ospf-router-id').value = inst.router_id || '';
  document.getElementById('modal-ospf-metric').value = inst.default_metric || 10;
  document.getElementById('modal-ospf-redist-conn').checked = !!inst.redistribute_connected;
  document.getElementById('modal-ospf-redist-static').checked = !!inst.redistribute_static;
  document.getElementById('modal-ospf-redist-bgp').checked = !!inst.redistribute_bgp;
  document.getElementById('ospf-instance-modal').classList.remove('hidden');
}

function closeOspfInstanceModal() {
  document.getElementById('ospf-instance-modal').classList.add('hidden');
}

async function submitOspfInstance(e) {
  e.preventDefault();
  const payload = {
    enabled: document.getElementById('modal-ospf-enabled').checked,
    router_id: document.getElementById('modal-ospf-router-id').value.trim(),
    default_metric: parseInt(document.getElementById('modal-ospf-metric').value, 10),
    redistribute_connected: document.getElementById('modal-ospf-redist-conn').checked,
    redistribute_static: document.getElementById('modal-ospf-redist-static').checked,
    redistribute_bgp: document.getElementById('modal-ospf-redist-bgp').checked
  };

  try {
    const res = await fetch(`${API_BASE}/routing/ospf/instance`, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(payload)
    });
    if (res.ok) {
      closeOspfInstanceModal();
      showToast('Success', 'OSPF instance configuration updated', 'success');
      loadDynamicRouting();
    } else {
      const err = await res.json();
      showToast('Error', err.error || 'Failed to update OSPF instance', 'error');
    }
  } catch (err) {
    showToast('Error', err.message, 'error');
  }
}

function openAddOspfAreaModal() {
  document.getElementById('ospf-area-form').reset();
  document.getElementById('modal-ospf-area-id').value = '';
  document.getElementById('modal-ospf-area-areaid').value = '0.0.0.0';
  document.getElementById('ospf-area-modal').classList.remove('hidden');
}

function closeOspfAreaModal() {
  document.getElementById('ospf-area-modal').classList.add('hidden');
}

async function submitOspfArea(e) {
  e.preventDefault();
  const payload = {
    id: document.getElementById('modal-ospf-area-id').value,
    name: document.getElementById('modal-ospf-area-name').value.trim(),
    area_id: document.getElementById('modal-ospf-area-areaid').value.trim(),
    area_type: document.getElementById('modal-ospf-area-type').value,
    comment: document.getElementById('modal-ospf-area-comment').value.trim()
  };

  try {
    const res = await fetch(`${API_BASE}/routing/ospf/areas`, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(payload)
    });
    if (res.ok) {
      closeOspfAreaModal();
      showToast('Success', 'OSPF area saved', 'success');
      loadDynamicRouting();
    } else {
      const err = await res.json();
      showToast('Error', err.error || 'Failed to save area', 'error');
    }
  } catch (err) {
    showToast('Error', err.message, 'error');
  }
}

async function deleteOspfArea(id) {
  if (!confirm('Are you sure you want to delete this OSPF area?')) return;
  try {
    const res = await fetch(`${API_BASE}/routing/ospf/areas/${encodeURIComponent(id)}`, { method: 'DELETE' });
    if (res.ok) {
      showToast('Deleted', 'OSPF area removed', 'success');
      loadDynamicRouting();
    }
  } catch (err) {
    showToast('Error', err.message, 'error');
  }
}

function populateOspfInterfaceDevices() {
  const select = document.getElementById('modal-ospf-iface-device');
  if (!select) return;
  const current = select.value;
  select.innerHTML = '<option value="">Any matching interface</option>';
  (state.interfaces || []).forEach(iface => {
    select.innerHTML += `<option value="${escapeHtml(iface.name)}">${escapeHtml(iface.name)} (${iface.type})</option>`;
  });
  if (current) select.value = current;
}

function openAddOspfInterfaceModal() {
  document.getElementById('ospf-interface-form').reset();
  document.getElementById('modal-ospf-iface-id').value = '';
  document.getElementById('modal-ospf-iface-area').value = '0.0.0.0';
  document.getElementById('modal-ospf-iface-cost').value = '10';
  document.getElementById('modal-ospf-iface-priority').value = '1';
  document.getElementById('modal-ospf-iface-hello').value = '10';
  document.getElementById('modal-ospf-iface-dead').value = '40';
  document.getElementById('ospf-interface-modal-title').innerText = 'Add OSPF Interface';
  populateOspfInterfaceDevices();
  document.getElementById('ospf-interface-modal').classList.remove('hidden');
}

function openEditOspfInterfaceModal(id) {
  const item = (state.ospfInterfaces || []).find(i => i.id === id);
  if (!item) return;
  populateOspfInterfaceDevices();
  document.getElementById('modal-ospf-iface-id').value = item.id;
  document.getElementById('modal-ospf-iface-net').value = item.network || '';
  document.getElementById('modal-ospf-iface-area').value = item.area || '0.0.0.0';
  document.getElementById('modal-ospf-iface-device').value = item.interface || '';
  document.getElementById('modal-ospf-iface-cost').value = item.cost || 10;
  document.getElementById('modal-ospf-iface-priority').value = item.priority || 1;
  document.getElementById('modal-ospf-iface-hello').value = item.hello_interval || 10;
  document.getElementById('modal-ospf-iface-dead').value = item.dead_interval || 40;
  document.getElementById('modal-ospf-iface-auth-type').value = item.auth_type || 'none';
  document.getElementById('modal-ospf-iface-auth-key').value = item.auth_key || '';
  document.getElementById('modal-ospf-iface-passive').checked = !!item.passive;
  document.getElementById('modal-ospf-iface-disabled').checked = !!item.disabled;
  document.getElementById('modal-ospf-iface-comment').value = item.comment || '';
  document.getElementById('ospf-interface-modal-title').innerText = 'Edit OSPF Interface';
  document.getElementById('ospf-interface-modal').classList.remove('hidden');
}

function closeOspfInterfaceModal() {
  document.getElementById('ospf-interface-modal').classList.add('hidden');
}

async function submitOspfInterface(e) {
  e.preventDefault();
  const payload = {
    id: document.getElementById('modal-ospf-iface-id').value,
    network: document.getElementById('modal-ospf-iface-net').value.trim(),
    area: document.getElementById('modal-ospf-iface-area').value.trim(),
    interface: document.getElementById('modal-ospf-iface-device').value,
    cost: parseInt(document.getElementById('modal-ospf-iface-cost').value, 10),
    priority: parseInt(document.getElementById('modal-ospf-iface-priority').value, 10),
    hello_interval: parseInt(document.getElementById('modal-ospf-iface-hello').value, 10),
    dead_interval: parseInt(document.getElementById('modal-ospf-iface-dead').value, 10),
    auth_type: document.getElementById('modal-ospf-iface-auth-type').value,
    auth_key: document.getElementById('modal-ospf-iface-auth-key').value,
    passive: document.getElementById('modal-ospf-iface-passive').checked,
    disabled: document.getElementById('modal-ospf-iface-disabled').checked,
    comment: document.getElementById('modal-ospf-iface-comment').value.trim()
  };

  try {
    const res = await fetch(`${API_BASE}/routing/ospf/interfaces`, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(payload)
    });
    if (res.ok) {
      closeOspfInterfaceModal();
      showToast('Success', 'OSPF interface template saved', 'success');
      loadDynamicRouting();
    } else {
      const err = await res.json();
      showToast('Error', err.error || 'Failed to save interface', 'error');
    }
  } catch (err) {
    showToast('Error', err.message, 'error');
  }
}

async function deleteOspfInterface(id) {
  if (!confirm('Are you sure you want to delete this OSPF interface?')) return;
  try {
    const res = await fetch(`${API_BASE}/routing/ospf/interfaces/${encodeURIComponent(id)}`, { method: 'DELETE' });
    if (res.ok) {
      showToast('Deleted', 'OSPF interface removed', 'success');
      loadDynamicRouting();
    }
  } catch (err) {
    showToast('Error', err.message, 'error');
  }
}

async function toggleOspfInterfaceState(id, disabled) {
  try {
    const res = await fetch(`${API_BASE}/routing/ospf/interfaces/${encodeURIComponent(id)}/state`, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ disabled })
    });
    if (res.ok) {
      showToast('Updated', `Interface ${disabled ? 'disabled' : 'enabled'}`, 'success');
      loadDynamicRouting();
    }
  } catch (err) {
    showToast('Error', err.message, 'error');
  }
}