import { useState, useCallback, useEffect, useRef } from "react";

const FONT = `@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&family=Barlow:wght@300;400;500;600;700&display=swap');`;
const VLAN_COLORS = ["#00e5ff","#00e676","#ffea00","#ff6d00","#d500f9","#ff1744","#76ff03","#2979ff","#ff4081","#18ffff"];

const DEFAULT_VLANS = [
  { id: 1,  name: "Management", color: VLAN_COLORS[0] },
  { id: 10, name: "Staff",      color: VLAN_COLORS[1] },
  { id: 20, name: "Servers",    color: VLAN_COLORS[2] },
  { id: 30, name: "IoT",        color: VLAN_COLORS[3] },
  { id: 40, name: "Guest",      color: VLAN_COLORS[4] },
  { id: 50, name: "Cameras",    color: VLAN_COLORS[5] },
];

const mkPort = n => ({
  id: n, mode: "access", accessVlan: 1, taggedVlans: [],
  nativeVlan: 1, poe: true, poeLimit: 30000, description: "",
});
const DEFAULT_PORTS = Array.from({ length: 52 }, (_, i) => mkPort(i + 1));
DEFAULT_PORTS.forEach((p, i) => {
  if (i >= 48) {
    p.mode = "trunk"; p.taggedVlans = [1,10,20,30,40,50];
    p.poe = false; p.description = `SFP+ Uplink ${i-47}`;
  }
});

const VISITOR_ID = Math.random().toString(36).slice(2);

// ── CLI Generator with explanations ────────────────────────────────────────
// Each entry: { cmd: string, explain: string, group: string }
function generateAnnotatedCLI({ ports, vlans, acls, hostname }) {
  const entries = [];
  const h = hostname || "ERS-5952";

  const add = (cmd, explain, group) => entries.push({ cmd, explain, group });

  add(`hostname ${h}`, `Set switch hostname to "${h}"`, "System");

  vlans.forEach(v => {
    add(`vlan create ${v.id} name "${v.name}" type port`,
        `Create VLAN ${v.id} named "${v.name}" — port-based VLAN`, "VLANs");
  });

  ports.forEach(p => {
    const iface = p.id <= 48 ? `FastEthernet ${p.id}` : `GigabitEthernet ${p.id}`;
    const portLabel = p.description ? `port ${p.id} (${p.description})` : `port ${p.id}`;
    const vlanName = vlans.find(v => v.id === p.accessVlan)?.name || `VLAN ${p.accessVlan}`;
    const group = `Port ${p.id}${p.description ? ` — ${p.description}` : ""}`;

    if (p.description) {
      add(`interface ${iface}`, `Select ${portLabel} for configuration`, group);
      add(`  name "${p.description}"`, `Label ${portLabel} as "${p.description}"`, group);
    }

    if (p.mode === "disabled") {
      add(`interface ${iface}`, `Select ${portLabel}`, group);
      add(`  shutdown`, `Disable ${portLabel} — no traffic will pass`, group);
    } else if (p.mode === "access") {
      add(`vlan members add ${p.accessVlan} ${p.id}`,
          `Assign ${portLabel} to ${vlanName} (VLAN ${p.accessVlan})`, group);
      add(`vlan pvid ${p.id} ${p.accessVlan}`,
          `Set ${portLabel} untagged VLAN to ${vlanName} — devices here join ${vlanName}`, group);
    } else if (p.mode === "trunk") {
      const tagged = p.taggedVlans;
      const names = tagged.map(id => vlans.find(v=>v.id===id)?.name || `VLAN ${id}`).join(", ");
      if (tagged.length) {
        add(`vlan members add ${tagged.join(",")} ${p.id}`,
            `Add ${portLabel} to VLANs: ${names}`, group);
        add(`vlan tagging ${tagged.join(",")} ${p.id}`,
            `Tag traffic on ${portLabel} for VLANs: ${names} — used for uplinks and inter-switch connections`, group);
      }
      const nativeName = vlans.find(v=>v.id===p.nativeVlan)?.name || `VLAN ${p.nativeVlan}`;
      add(`vlan pvid ${p.id} ${p.nativeVlan}`,
          `Set ${portLabel} native (untagged) VLAN to ${nativeName}`, group);
    }

    if (p.id <= 48) {
      add(`interface ${iface}`, `Select ${portLabel} for PoE configuration`, group);
      if (!p.poe) {
        add(`  no poe enable`, `Disable Power over Ethernet on ${portLabel}`, group);
      } else {
        add(`  poe enable`, `Enable Power over Ethernet on ${portLabel}`, group);
        add(`  poe poe-limit ${p.poeLimit}`,
            `Limit PoE draw on ${portLabel} to ${(p.poeLimit/1000).toFixed(1)}W — protects switch power budget`, group);
      }
    }
  });

  acls.forEach(acl => {
    const vlanName = vlans.find(v=>v.id===acl.applyVlan)?.name || `VLAN ${acl.applyVlan}`;
    const group = `ACL: ${acl.name}`;
    add(`ip access-list extended ${acl.name}`,
        `Create access control list named "${acl.name}"`, group);
    acl.rules.forEach((r, i) => {
      const src = r.srcAny ? "any source" : `source ${r.src}`;
      const dst = r.dstAny ? "any destination" : `destination ${r.dst}`;
      const port = r.port ? ` on port ${r.port}` : "";
      add(`  ${i+1} ${r.action} ${r.proto} ${r.srcAny?"any":`${r.src} ${r.srcMask||"0.0.0.255"}`} ${r.dstAny?"any":`${r.dst} ${r.dstMask||"0.0.0.255"}`}${r.port?` eq ${r.port}`:""}`,
          `Rule ${i+1}: ${r.action.toUpperCase()} ${r.proto.toUpperCase()} from ${src} to ${dst}${port}`, group);
    });
    add(`interface vlan ${acl.applyVlan}`,
        `Select ${vlanName} interface to apply the ACL`, group);
    add(`  ip access-group ${acl.name} ${acl.direction}`,
        `Apply "${acl.name}" to ${vlanName} — filter traffic going ${acl.direction === "in" ? "INTO" : "OUT OF"} this VLAN`, group);
  });

  return entries;
}

function entriesToCLI(entries, hostname) {
  const lines = [
    `! ERS 5952 — ${hostname || "ERS-5952"}`,
    "enable", "configure terminal", "",
  ];
  entries.forEach(e => lines.push(e.cmd));
  lines.push("", "end", "copy running-config nvram:config.cfg");
  return lines.join("\n");
}

// ── API ─────────────────────────────────────────────────────────────────────
const API = async (path, opts = {}) => {
  const r = await fetch(`/api${path}`, {
    headers: { "Content-Type": "application/json" },
    ...opts,
    body: opts.body ? JSON.stringify(opts.body) : undefined,
  });
  const data = await r.json().catch(() => ({}));
  if (!r.ok) throw new Error(data.detail?.message || data.detail || `HTTP ${r.status}`);
  return data;
};

// ══════════════════════════════════════════════════════════════════════════════
// CSS
// ══════════════════════════════════════════════════════════════════════════════
const css = `
${FONT}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#0a0c10;--sf:#111318;--b1:#1e2230;--b2:#2a2f42;
  --ac:#00e5ff;--ac2:#0077ff;--tx:#c8d0e0;--dm:#5a6070;
  --err:#ff1744;--ok:#00e676;--warn:#ffea00;--warn2:#ff6d00;
  --mono:'Share Tech Mono',monospace;--sans:'Barlow',sans-serif;
}
body{background:var(--bg);color:var(--tx);font-family:var(--sans);font-size:13px;line-height:1.5;min-height:100vh}
.app{display:flex;flex-direction:column;min-height:100vh}

/* banner */
.conn-banner{display:flex;align-items:center;gap:10px;padding:8px 20px;font-size:12px;font-family:var(--mono);border-bottom:1px solid;transition:all .4s}
.conn-banner.connecting{background:rgba(255,234,0,.06);border-color:rgba(255,234,0,.2);color:var(--warn)}
.conn-banner.connected{background:rgba(0,230,118,.06);border-color:rgba(0,230,118,.2);color:var(--ok)}
.conn-banner.error{background:rgba(255,23,68,.06);border-color:rgba(255,23,68,.2);color:var(--err)}
.conn-banner.hidden{display:none}
.conn-spin{width:12px;height:12px;border:2px solid currentColor;border-top-color:transparent;border-radius:50%;animation:spin .8s linear infinite;flex-shrink:0}
@keyframes spin{to{transform:rotate(360deg)}}
.conn-dot{width:8px;height:8px;border-radius:50%;background:currentColor;flex-shrink:0}

/* topbar */
.topbar{display:flex;align-items:center;gap:14px;padding:10px 20px;background:var(--sf);border-bottom:1px solid var(--b1);position:sticky;top:0;z-index:100;flex-wrap:wrap}
.logo{font-family:var(--mono);font-size:14px;color:var(--ac);letter-spacing:2px}
.logo-sub{font-size:10px;color:var(--dm);font-family:var(--mono)}
.sp{flex:1}
.ti{background:var(--bg);border:1px solid var(--b2);color:var(--tx);padding:4px 8px;font-family:var(--mono);font-size:12px;border-radius:3px;width:130px}
.ti:focus{outline:none;border-color:var(--ac)}
.tl{font-size:11px;color:var(--dm)}

/* session */
.sess-btn{display:flex;align-items:center;gap:8px;padding:5px 12px;border-radius:4px;border:1px solid;font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;cursor:pointer;font-family:var(--sans);transition:all .15s}
.sess-btn.locked{border-color:var(--b2);color:var(--dm);background:transparent}
.sess-btn.locked:hover{border-color:var(--ac);color:var(--ac)}
.sess-btn.unlocked{border-color:var(--ok);color:var(--ok);background:rgba(0,230,118,.08)}
.sess-btn.unlocked:hover{background:rgba(255,23,68,.1);border-color:var(--err);color:var(--err)}
.sess-timer{font-family:var(--mono);font-size:12px;letter-spacing:1px}

/* settings icon */
.settings-btn{background:none;border:1px solid var(--b2);color:var(--dm);border-radius:4px;padding:5px 9px;cursor:pointer;font-size:14px;transition:all .15s;line-height:1}
.settings-btn:hover{border-color:var(--ac);color:var(--ac)}

/* settings panel */
.settings-overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:150;display:flex;align-items:flex-start;justify-content:flex-end}
.settings-panel{background:var(--sf);border-left:1px solid var(--b2);width:320px;min-height:100vh;padding:20px}
.settings-panel h2{font-family:var(--mono);font-size:13px;color:var(--ac);letter-spacing:2px;margin-bottom:16px}
.settings-section{margin-bottom:20px;padding-bottom:20px;border-bottom:1px solid var(--b1)}
.settings-section:last-child{border-bottom:none}
.settings-section h3{font-size:10px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--dm);margin-bottom:10px}
.setting-row{display:flex;align-items:center;justify-content:space-between;padding:6px 0}
.setting-label{font-size:12px}
.setting-sub{font-size:11px;color:var(--dm);margin-top:2px}

/* poll pill */
.poll-pill{display:flex;align-items:center;gap:5px;font-size:10px;color:var(--dm);font-family:var(--mono);padding:3px 8px;border:1px solid var(--b1);border-radius:20px}
.dot{width:6px;height:6px;border-radius:50%}
.dot.ok{background:var(--ok)}.dot.warn{background:var(--warn)}.dot.err{background:var(--err)}.dot.idle{background:var(--dm)}

/* tabs */
.tabs{display:flex;gap:2px;padding:0 20px;background:var(--sf);border-bottom:1px solid var(--b1)}
.tab{padding:10px 18px;font-size:12px;font-weight:600;letter-spacing:1px;text-transform:uppercase;cursor:pointer;border-bottom:2px solid transparent;color:var(--dm);transition:all .15s;background:none;border-top:none;border-left:none;border-right:none;font-family:var(--sans)}
.tab:hover{color:var(--tx)}.tab.active{color:var(--ac);border-bottom-color:var(--ac)}

/* main */
.main{flex:1;padding:20px;display:flex;gap:16px;align-items:flex-start}

/* panel */
.panel{background:var(--sf);border:1px solid var(--b1);border-radius:6px;overflow:hidden}
.ph{padding:10px 14px;border-bottom:1px solid var(--b1);font-size:11px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--ac);font-family:var(--mono);display:flex;align-items:center;gap:8px}
.pb{padding:14px}

/* chassis */
.chassis{background:#0d0f14;border:1px solid var(--b2);border-radius:8px;padding:16px;margin-bottom:12px}
.cl{font-family:var(--mono);font-size:10px;color:var(--dm);letter-spacing:3px;text-transform:uppercase;margin-bottom:10px}
.pgrid{display:grid;grid-template-columns:repeat(24,1fr);gap:4px}
.pgrid-sfp{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;margin-top:8px;padding-top:8px;border-top:1px solid var(--b1);width:calc(4*(100%/24)+3*4px)}
.port{aspect-ratio:1;border-radius:3px;border:1px solid transparent;cursor:pointer;display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:8px;font-weight:700;transition:all .1s;position:relative}
.port:hover{filter:brightness(1.3);transform:scale(1.1);z-index:2}
.port.sel{border-color:white!important;box-shadow:0 0 0 2px white;z-index:3}
.poe-dot{position:absolute;top:1px;right:1px;width:4px;height:4px;border-radius:50%;background:var(--ok)}
.legend{display:flex;flex-wrap:wrap;gap:8px;padding:10px 14px;border-top:1px solid var(--b1)}
.li{display:flex;align-items:center;gap:5px;font-size:11px;color:var(--dm)}
.ld{width:10px;height:10px;border-radius:2px}

/* fields */
.field{margin-bottom:12px}
.field label{display:block;font-size:10px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--dm);margin-bottom:4px}
.field input,.field select{width:100%;background:var(--bg);border:1px solid var(--b2);color:var(--tx);padding:6px 8px;font-family:var(--mono);font-size:12px;border-radius:3px}
.field input:focus,.field select:focus{outline:none;border-color:var(--ac)}
.field select option{background:var(--bg)}
.rgrp{display:flex;gap:6px}
.rbtn{flex:1;padding:5px;text-align:center;border:1px solid var(--b2);border-radius:3px;cursor:pointer;font-size:11px;font-weight:600;letter-spacing:1px;text-transform:uppercase;transition:all .1s;background:none;color:var(--dm);font-family:var(--sans)}
.rbtn:hover{border-color:var(--ac);color:var(--ac)}
.rbtn.ra{background:var(--ac);border-color:var(--ac);color:#000}
.rbtn.rt{background:var(--ac2);border-color:var(--ac2);color:#fff}
.rbtn.rd{background:var(--err);border-color:var(--err);color:#fff}
.trow{display:flex;align-items:center;justify-content:space-between;padding:6px 0}
.tog{width:36px;height:20px;background:var(--b2);border-radius:10px;cursor:pointer;position:relative;transition:background .2s;border:none}
.tog.on{background:var(--ok)}
.tog::after{content:'';position:absolute;top:3px;left:3px;width:14px;height:14px;background:#fff;border-radius:50%;transition:transform .2s}
.tog.on::after{transform:translateX(16px)}
.vtags{display:flex;flex-wrap:wrap;gap:4px;padding:6px;background:var(--bg);border:1px solid var(--b2);border-radius:3px;min-height:34px}
.vtag{padding:2px 7px;border-radius:2px;font-family:var(--mono);font-size:11px;cursor:pointer;font-weight:700;transition:opacity .1s}
.vtag.von{opacity:1}.vtag.voff{opacity:.25}

/* buttons */
.btn{padding:7px 14px;border-radius:3px;border:none;cursor:pointer;font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;font-family:var(--sans);transition:all .1s;white-space:nowrap}
.bp{background:var(--ac);color:#000}.bp:hover{background:#33ecff}
.bd{background:var(--err);color:#fff}.bd:hover{background:#ff4569}
.bg{background:transparent;border:1px solid var(--b2);color:var(--tx)}.bg:hover{border-color:var(--ac);color:var(--ac)}
.bs{background:var(--ok);color:#000}.bs:hover{background:#33eb91}
.bw{background:var(--warn);color:#000}.bw:hover{filter:brightness(1.1)}
.btn:disabled{opacity:.4;cursor:not-allowed}
.btn-row{display:flex;gap:6px;margin-top:12px;flex-wrap:wrap}

/* vlan table */
.vtbl{width:100%;border-collapse:collapse}
.vtbl th{text-align:left;padding:6px 10px;font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--dm);border-bottom:1px solid var(--b1)}
.vtbl td{padding:8px 10px;border-bottom:1px solid var(--b1);font-family:var(--mono);font-size:12px}
.vtbl tr:last-child td{border-bottom:none}
.vtbl tr:hover td{background:rgba(255,255,255,.02)}
.sw{width:16px;height:16px;border-radius:3px;display:inline-block;vertical-align:middle}
.ii{background:var(--bg);border:1px solid var(--b2);color:var(--tx);padding:3px 6px;font-family:var(--mono);font-size:12px;border-radius:3px;width:100%}
.ii:focus{outline:none;border-color:var(--ac)}

/* acl */
.acl-card{background:var(--bg);border:1px solid var(--b2);border-radius:5px;overflow:hidden;margin-bottom:10px}
.acl-hd{padding:8px 12px;display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.03);border-bottom:1px solid var(--b1)}
.acl-nm{font-family:var(--mono);font-size:13px;color:var(--ac);flex:1}
.acl-rules{padding:8px 12px}
.acl-rule{display:grid;grid-template-columns:60px 50px 1fr 1fr 60px 24px;gap:6px;align-items:center;margin-bottom:6px;font-size:11px}
.acl-rule select,.acl-rule input{background:var(--sf);border:1px solid var(--b2);color:var(--tx);padding:3px 5px;font-family:var(--mono);font-size:11px;border-radius:3px;width:100%}

/* ── ANNOTATED CLI TABLE ── */
.cli-table{width:100%;border-collapse:collapse;font-size:12px;margin-bottom:12px}
.cli-table th{text-align:left;padding:6px 10px;font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--dm);border-bottom:1px solid var(--b1);font-family:var(--sans)}
.cli-group-header td{padding:8px 10px 4px;font-size:10px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--ac);font-family:var(--mono);border-top:1px solid var(--b1);background:rgba(0,229,255,.04)}
.cli-row{transition:background .1s}
.cli-row:hover{background:rgba(255,255,255,.03)}
.cli-row td{padding:5px 10px;border-bottom:1px solid rgba(255,255,255,.03);vertical-align:top}
.cli-cmd{font-family:var(--mono);color:var(--tx);white-space:pre}
.cli-explain{color:var(--dm);font-size:11px;padding-left:8px}
.cli-row.pending td{opacity:.5}
.cli-row.running td .cli-cmd{color:var(--warn)}
.cli-row.running td .cli-explain{color:var(--warn)}
.cli-row.success td .cli-cmd{color:var(--ok)}
.cli-row.success td .cli-explain{color:#3a6040}
.cli-row.failed td .cli-cmd{color:var(--err)}
.cli-row.failed td .cli-explain{color:#6a2030}
.cli-row.waiting td{opacity:.35}
.cli-status{width:20px;text-align:center;font-size:13px}
.cli-err-out{font-family:var(--mono);font-size:10px;color:var(--warn);padding:3px 10px 5px;background:rgba(255,23,68,.05);border-bottom:1px solid var(--b1)}

/* raw cli textarea (cli mode) */
.cli-raw{width:100%;background:#060809;border:1px solid var(--b1);color:#a0b0c0;padding:14px;font-family:var(--mono);font-size:12px;line-height:1.7;border-radius:4px;min-height:300px;resize:vertical}
.cli-raw:focus{outline:none;border-color:var(--ac)}

/* totp modal */
.modal-bg{position:fixed;inset:0;background:rgba(0,0,0,.75);z-index:200;display:flex;align-items:center;justify-content:center}
.modal{background:var(--sf);border:1px solid var(--b2);border-radius:8px;padding:28px;width:360px;text-align:center}
.modal h2{font-family:var(--mono);color:var(--ac);font-size:14px;letter-spacing:2px;margin-bottom:8px}
.modal p{font-size:12px;color:var(--dm);margin-bottom:20px;line-height:1.7}
.totp-in{width:100%;background:var(--bg);border:2px solid var(--b2);color:var(--tx);padding:12px;font-family:var(--mono);font-size:28px;letter-spacing:10px;border-radius:4px;text-align:center;margin-bottom:12px}
.totp-in:focus{outline:none;border-color:var(--ac)}

/* danger */
.hard-box{background:rgba(255,23,68,.07);border:1px solid rgba(255,23,68,.3);border-radius:4px;padding:10px 14px;margin-bottom:10px}
.hard-box h4{color:var(--err);font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;margin-bottom:6px}
.warn-box{background:rgba(255,234,0,.07);border:1px solid rgba(255,234,0,.3);border-radius:4px;padding:10px 14px;margin-bottom:10px}
.warn-box h4{color:var(--warn);font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;margin-bottom:6px}
.danger-item{font-size:11px;margin-bottom:5px}
.danger-cmd{font-family:var(--mono);color:var(--tx)}
.danger-why{font-size:10px;color:var(--dm);margin-top:1px}

/* push mode choice */
.push-choice{display:flex;gap:10px;margin-bottom:14px}
.push-choice-btn{flex:1;padding:10px 12px;border-radius:5px;border:1px solid var(--b2);background:var(--bg);color:var(--tx);cursor:pointer;text-align:left;transition:all .15s;font-family:var(--sans)}
.push-choice-btn:hover{border-color:var(--ac)}
.push-choice-btn.chosen{border-color:var(--ac);background:rgba(0,229,255,.06)}
.push-choice-btn h4{font-size:12px;font-weight:700;margin-bottom:3px;color:var(--ac)}
.push-choice-btn p{font-size:11px;color:var(--dm);line-height:1.4}

/* push summary bar */
.push-summary{display:flex;align-items:center;gap:12px;padding:8px 12px;border-radius:4px;font-size:12px;font-family:var(--mono);margin-bottom:10px}
.push-summary.ok{background:rgba(0,230,118,.08);border:1px solid rgba(0,230,118,.2);color:var(--ok)}
.push-summary.fail{background:rgba(255,23,68,.08);border:1px solid rgba(255,23,68,.2);color:var(--err)}
.push-summary.running{background:rgba(255,234,0,.05);border:1px solid rgba(255,234,0,.15);color:var(--warn)}


/* ── Device Access ── */
.device-card{background:var(--bg);border:1px solid var(--b2);border-radius:4px;padding:10px 12px;margin-bottom:8px}
.device-badges{display:flex;gap:6px;margin-top:6px;flex-wrap:wrap}
/* misc */
.sect{font-size:10px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--dm);margin-bottom:10px;padding-bottom:6px;border-bottom:1px solid var(--b1)}
.empty{text-align:center;padding:40px 20px;color:var(--dm);font-size:12px}
.badge{padding:1px 6px;border-radius:10px;font-size:10px;font-family:var(--mono);font-weight:700}
.poe-bar-wrap{height:4px;background:var(--b2);border-radius:2px;margin-top:4px;overflow:hidden}
.poe-bar{height:100%;border-radius:2px;background:var(--ok);transition:width .3s}
`;

// ══════════════════════════════════════════════════════════════════════════════
// CONNECTION BANNER
// ══════════════════════════════════════════════════════════════════════════════
function ConnBanner({ state, info }) {
  if (state === "hidden") return null;
  return (
    <div className={`conn-banner ${state}`}>
      {state === "connecting" && <span className="conn-spin"/>}
      {state !== "connecting" && <span className="conn-dot"/>}
      <span>
        {state === "connecting" && "Connecting to switch..."}
        {state === "connected"  && (info || "Connected")}
        {state === "error"      && (info || "Switch unreachable — retrying...")}
      </span>
    </div>
  );
}

// ══════════════════════════════════════════════════════════════════════════════
// TOTP MODAL
// ══════════════════════════════════════════════════════════════════════════════
function TotpModal({ onSuccess, onCancel, commandCount }) {
  const [code, setCode] = useState("");
  const [error, setError] = useState("");
  const [loading, setLoading] = useState(false);

  const verify = async () => {
    if (code.length !== 6) return;
    setLoading(true); setError("");
    try {
      const data = await API("/auth/verify", { method: "POST", body: { code } });
      onSuccess(data.token);
    } catch(e) {
      setError(e.message); setCode("");
    } finally { setLoading(false); }
  };

  return (
    <div className="modal-bg" onClick={onCancel}>
      <div className="modal" onClick={e => e.stopPropagation()}>
        <h2>◈ AUTHENTICATE</h2>
        <p>
          Enter your 6-digit TOTP code to authorize this push.<br/>
          <span style={{color:"var(--ac)"}}>{commandCount} command{commandCount!==1?"s":""}</span> ready to send.<br/>
          <span style={{color:"var(--dm)"}}>Session locks automatically when push completes.</span>
        </p>
        <input className="totp-in" value={code}
          onChange={e => setCode(e.target.value.replace(/\D/g,"").slice(0,6))}
          onKeyDown={e => e.key==="Enter" && verify()}
          placeholder="000000" autoFocus maxLength={6}/>
        {error && <div style={{color:"var(--err)",fontSize:12,marginBottom:10}}>{error}</div>}
        <div style={{display:"flex",gap:8,justifyContent:"center"}}>
          <button className="btn bg" onClick={onCancel}>Cancel</button>
          <button className="btn bp" onClick={verify} disabled={code.length!==6||loading}>
            {loading ? "Verifying..." : "Authorize Push"}
          </button>
        </div>
      </div>
    </div>
  );
}

// ══════════════════════════════════════════════════════════════════════════════
// SESSION BUTTON — shows "Authenticate to Push" only, no timer
// Session is scoped to one push batch, lock happens automatically after push
// ══════════════════════════════════════════════════════════════════════════════
function SessionBtn({ session, onUnlock }) {
  if (session) {
    return (
      <div className="sess-btn unlocked" style={{cursor:"default"}}>
        🔓 <span>Session Active</span>
      </div>
    );
  }
  return (
    <button className="sess-btn locked" onClick={onUnlock}>
      🔒 <span>Authenticate to Push</span>
    </button>
  );
}

// ══════════════════════════════════════════════════════════════════════════════
// SETTINGS PANEL
// ══════════════════════════════════════════════════════════════════════════════
function SettingsPanel({ settings, setSettings, onClose }) {
  return (
    <div className="settings-overlay" onClick={onClose}>
      <div className="settings-panel" onClick={e => e.stopPropagation()}>
        <div style={{display:"flex",alignItems:"center",justifyContent:"space-between",marginBottom:20}}>
          <h2>◈ SETTINGS</h2>
          <button className="btn bg" style={{padding:"3px 10px",fontSize:11}} onClick={onClose}>✕ Close</button>
        </div>

        <div className="settings-section">
          <h3>Interface</h3>
          <div className="setting-row">
            <div>
              <div className="setting-label">CLI Mode</div>
              <div className="setting-sub">Advanced — type raw ERS commands directly</div>
            </div>
            <button className={`tog ${settings.cliMode?"on":""}`}
              onClick={() => setSettings(s => ({...s, cliMode: !s.cliMode}))}/>
          </div>
        </div>

        <div className="settings-section">
          <h3>Push Behaviour</h3>
          <div className="setting-row">
            <div>
              <div className="setting-label">Default push mode</div>
              <div className="setting-sub">Batch or step-by-step</div>
            </div>
            <select value={settings.defaultPushMode}
              onChange={e => setSettings(s => ({...s, defaultPushMode: e.target.value}))}
              style={{background:"var(--bg)",border:"1px solid var(--b2)",color:"var(--tx)",padding:"4px 6px",fontFamily:"var(--mono)",fontSize:11,borderRadius:3}}>
              <option value="batch">Batch</option>
              <option value="step">Step-by-step</option>
            </select>
          </div>
        </div>

        <div className="settings-section">
          <h3>About</h3>
          <div style={{fontSize:11,color:"var(--dm)",lineHeight:1.7}}>
            ERS 5952 Switch Manager<br/>
            Runs on your management computer on VLAN 99.<br/>
            SSH key lives on the management computer only.<br/>
            You never write CLI commands.<br/>
            <span style={{color:"var(--ac)"}}>README.md</span> has full documentation.
          </div>
        </div>
      </div>
    </div>
  );
}

// ══════════════════════════════════════════════════════════════════════════════
// ANNOTATED CLI TABLE — the main inspect view
// ══════════════════════════════════════════════════════════════════════════════
function AnnotatedCLITable({ entries, pushState, currentIdx, pushMode, onConfirmOne }) {
  // Group entries by group field
  const groups = [];
  let lastGroup = null;
  entries.forEach((e, i) => {
    if (e.group !== lastGroup) {
      groups.push({ label: e.group, entries: [] });
      lastGroup = e.group;
    }
    groups[groups.length-1].entries.push({ ...e, globalIdx: i });
  });

  const getRowState = (globalIdx) => {
    if (!pushState) return "pending";
    if (globalIdx < currentIdx) return "success";
    if (globalIdx === currentIdx) return "running";
    return "waiting";
  };

  const getRowResult = (globalIdx) => {
    if (!pushState?.results) return null;
    return pushState.results.find(r => r.index === globalIdx);
  };

  return (
    <table className="cli-table">
      <thead>
        <tr>
          <th style={{width:24}}></th>
          <th>Command</th>
          <th>What it does</th>
          {pushMode === "step" && !pushState?.done && <th style={{width:80}}></th>}
        </tr>
      </thead>
      <tbody>
        {groups.map((grp, gi) => (
          <>
            <tr key={`g${gi}`} className="cli-group-header">
              <td colSpan={pushMode==="step" && !pushState?.done ? 4 : 3}>{grp.label}</td>
            </tr>
            {grp.entries.map((e, ei) => {
              const rowState = getRowState(e.globalIdx);
              const result = getRowResult(e.globalIdx);
              const isCurrentStep = pushMode === "step" && pushState && !pushState.done && e.globalIdx === currentIdx;
              return (
                <>
                  <tr key={`e${gi}-${ei}`} className={`cli-row ${rowState}`}>
                    <td className="cli-status">
                      {rowState === "success" && "✓"}
                      {rowState === "failed"  && "✗"}
                      {rowState === "running" && <span className="conn-spin" style={{display:"inline-block"}}/>}
                      {(rowState === "pending" || rowState === "waiting") && "·"}
                    </td>
                    <td className="cli-cmd">{e.cmd}</td>
                    <td className="cli-explain">{e.explain}</td>
                    {pushMode === "step" && !pushState?.done && (
                      <td>
                        {isCurrentStep && (
                          <button className="btn bs" style={{padding:"2px 10px",fontSize:10}}
                            onClick={() => onConfirmOne(e.globalIdx)}>Send ↵</button>
                        )}
                      </td>
                    )}
                  </tr>
                  {result && !result.success && result.output && (
                    <tr key={`err${gi}-${ei}`}>
                      <td colSpan={4} className="cli-err-out">
                        Switch error: {result.output}
                      </td>
                    </tr>
                  )}
                </>
              );
            })}
          </>
        ))}
      </tbody>
    </table>
  );
}

// ══════════════════════════════════════════════════════════════════════════════
// CLI & PUSH TAB
// ══════════════════════════════════════════════════════════════════════════════
function CliTab({ ports, vlans, acls, hostname, session, setSession, onNeedAuth, backendOk, settings }) {
  const annotated = generateAnnotatedCLI({ ports, vlans, acls, hostname });
  const pushCommands = annotated.map(e => e.cmd).filter(c => {
    const t = c.trim();
    return t && !t.startsWith("!");
  });

  const [stage, setStage] = useState("idle"); // idle|checking|danger|choosePushMode|pushing|done
  const [dangerResult, setDangerResult] = useState(null);
  const [pushMode, setPushMode] = useState(settings.defaultPushMode || "batch");
  const [pushState, setPushState] = useState(null);
  const [currentIdx, setCurrentIdx] = useState(0);
  const [rawCli, setRawCli] = useState("");

  // Reset when ports/vlans/acls change
  useEffect(() => { setStage("idle"); setPushState(null); setCurrentIdx(0); }, [ports, vlans, acls]);

  const handleReviewPush = async () => {
    setStage("checking");
    try {
      const check = await API("/check/danger", { method:"POST", body:{ commands: pushCommands } });
      setDangerResult(check);
      setStage("danger");
    } catch(e) {
      setDangerResult({ error: e.message }); setStage("danger");
    }
  };

  const proceedToChoose = () => setStage("choosePushMode");

  const startPush = async (mode, token) => {
    const t = token || session?.token;
    if (!t) { onNeedAuth(); return; }
    setPushMode(mode);
    setStage("pushing");
    setCurrentIdx(0);
    setPushState({ results: [], done: false });

    if (mode === "batch") {
      await executeBatch(t);
    }
    // step mode is driven by onConfirmOne
  };

  const executeBatch = async (token) => {
    try {
      const result = await API("/switch/push", {
        method:"POST",
        body: { token, commands: pushCommands }
      });
      setPushState({ ...result, done: true });
      setCurrentIdx(result.commands_sent || pushCommands.length);
      setStage("done");
      setSession(null); // lock session after push completes
    } catch(e) {
      setPushState({ success:false, error:e.message, results:[], commands_sent:0, done:true });
      setStage("done");
      setSession(null);
    }
  };

  const onConfirmOne = async (idx) => {
    if (!session?.token) { onNeedAuth(); return; }
    const cmd = pushCommands[idx];
    try {
      const result = await API("/switch/push", {
        method:"POST",
        body: { token: session.token, commands: [cmd] }
      });
      const r = result.results?.[0] || { index: idx, command: cmd, success: result.success, output: result.error || "", skipped: false };
      r.index = idx;
      setPushState(prev => {
        const results = [...(prev?.results||[]), r];
        if (!result.success) {
          setStage("done");
          setSession(null);
          return { ...prev, results, done: true, success: false, error: result.error };
        }
        const nextIdx = idx + 1;
        setCurrentIdx(nextIdx);
        if (nextIdx >= pushCommands.length) {
          // Save config
          API("/switch/push", { method:"POST", body:{ token: session.token, commands:["copy running-config nvram:config.cfg"] } })
            .catch(() => {});
          setStage("done");
          setSession(null);
          return { ...prev, results, done:true, success:true, saved:true };
        }
        return { ...prev, results };
      });
    } catch(e) {
      setStage("done"); setSession(null);
      setPushState(prev => ({ ...prev, done:true, success:false, error:e.message }));
    }
  };

  const handleRawPush = async () => {
    if (!session?.token) { onNeedAuth(); return; }
    const cmds = rawCli.split("\n").filter(l => l.trim() && !l.trim().startsWith("!"));
    try {
      setStage("pushing");
      const result = await API("/switch/push", { method:"POST", body:{ token:session.token, commands:cmds } });
      setPushState({ ...result, done:true });
      setStage("done");
      setSession(null);
    } catch(e) {
      setPushState({ success:false, error:e.message, results:[], done:true });
      setStage("done"); setSession(null);
    }
  };

  const fullCLI = entriesToCLI(annotated, hostname);
  const cmdCount = pushCommands.length;

  // ── CLI Mode (raw text) ──
  if (settings.cliMode) {
    return (
      <div className="main" style={{flexDirection:"column"}}>
        <div className="panel">
          <div className="ph">◈ CLI Mode — Advanced
            <span style={{marginLeft:"auto",fontSize:10,color:"var(--dm)"}}>Danger check and allowlist still apply</span>
          </div>
          <div className="pb">
            <div style={{marginBottom:8,fontSize:11,color:"var(--dm)"}}>
              Type or paste ERS CLI commands. Do not include enable, configure terminal, end, or copy — these are added automatically.
            </div>
            <textarea className="cli-raw" value={rawCli}
              onChange={e => setRawCli(e.target.value)}
              placeholder={"vlan create 100 name Finance type port\nvlan members add 100 22\nvlan pvid 22 100"}/>
            <div className="btn-row">
              <button className="btn bg" onClick={() => navigator.clipboard?.writeText(rawCli)}>Copy</button>
              <button className="btn bp" onClick={handleRawPush} disabled={!rawCli.trim()||!backendOk||stage==="pushing"}>
                {stage==="pushing" ? "Pushing..." : "Review & Push →"}
              </button>
            </div>
            {pushState?.done && (
              <div className={`push-summary ${pushState.success?"ok":"fail"}`} style={{marginTop:12}}>
                {pushState.success ? `✓ All commands succeeded — config saved` : `✗ Failed: ${pushState.error}`}
              </div>
            )}
          </div>
        </div>
      </div>
    );
  }

  // ── GUI Mode ──
  return (
    <div className="main" style={{flexDirection:"column"}}>
      <div className="panel">
        <div className="ph">
          ◈ Review & Push — {cmdCount} command{cmdCount!==1?"s":""}
          <span style={{marginLeft:"auto",display:"flex",gap:8}}>
            <button className="btn bg" onClick={() => navigator.clipboard?.writeText(fullCLI)}>Copy CLI</button>
            <button className="btn bg" onClick={() => {
              const a = document.createElement("a");
              a.href = URL.createObjectURL(new Blob([fullCLI],{type:"text/plain"}));
              a.download=`${hostname||"ers5952"}-config.txt`; a.click();
            }}>Download</button>
            {stage==="idle" && (
              <button className="btn bp" onClick={handleReviewPush} disabled={!backendOk||cmdCount===0}>
                {!backendOk ? "Backend Offline" : cmdCount===0 ? "No Changes" : "Review & Push →"}
              </button>
            )}
          </span>
        </div>
        <div className="pb">

          {/* ── Danger stage ── */}
          {stage==="danger" && dangerResult && (
            <div style={{marginBottom:14}}>
              {dangerResult.hard_blocked?.length > 0 && (
                <div className="hard-box">
                  <h4>✗ Hard Blocked — Run These at the Switch Console</h4>
                  {dangerResult.hard_blocked.map((d,i) => (
                    <div key={i} className="danger-item">
                      <div className="danger-cmd">{d.command}</div>
                      <div className="danger-why">{d.reason}</div>
                    </div>
                  ))}
                  <button className="btn bg" style={{marginTop:10}} onClick={()=>setStage("idle")}>Back</button>
                </div>
              )}
              {dangerResult.warnings?.length > 0 && (
                <div className="warn-box">
                  <h4>⚠ Review These Commands</h4>
                  {dangerResult.warnings.map((d,i) => (
                    <div key={i} className="danger-item">
                      <div className="danger-cmd">{d.command}</div>
                      <div className="danger-why">{d.reason}</div>
                    </div>
                  ))}
                </div>
              )}
              {!dangerResult.has_hard_block && (
                <div className="btn-row">
                  <button className="btn bg" onClick={()=>setStage("idle")}>Cancel</button>
                  <button className="btn bs" onClick={proceedToChoose}>
                    {dangerResult.has_warnings ? "Acknowledge & Continue →" : "Looks Good — Choose Push Mode →"}
                  </button>
                </div>
              )}
            </div>
          )}

          {/* ── Push mode choice ── */}
          {stage==="choosePushMode" && (
            <div style={{marginBottom:14}}>
              <div className="sect">How do you want to push these {cmdCount} commands?</div>
              <div className="push-choice">
                <button className={`push-choice-btn ${pushMode==="batch"?"chosen":""}`}
                  onClick={() => setPushMode("batch")}>
                  <h4>⚡ Send All at Once</h4>
                  <p>All commands sent in sequence. Results shown when complete. Faster — good when you've reviewed and are confident.</p>
                </button>
                <button className={`push-choice-btn ${pushMode==="step"?"chosen":""}`}
                  onClick={() => setPushMode("step")}>
                  <h4>◈ Step by Step</h4>
                  <p>Send one command at a time. Confirm each before the next is sent. Good for complex changes or when you want full control.</p>
                </button>
              </div>
              <div className="btn-row">
                <button className="btn bg" onClick={()=>setStage("danger")}>Back</button>
                {session
                  ? <button className="btn bs" onClick={() => startPush(pushMode, session.token)}>
                      Start Push →
                    </button>
                  : <button className="btn bw" onClick={onNeedAuth}>Authenticate First →</button>
                }
              </div>
            </div>
          )}

          {/* ── Push summary bar ── */}
          {(stage==="pushing" || stage==="done") && pushState && (
            <div className={`push-summary ${stage==="pushing"?"running":pushState.success?"ok":"fail"}`}>
              {stage==="pushing" && `Sending commands... (${currentIdx}/${cmdCount})`}
              {stage==="done" && pushState.success && `✓ All ${pushState.commands_sent} commands succeeded — config saved to NVRAM`}
              {stage==="done" && !pushState.success && `✗ Stopped at command ${(pushState.stopped_at||0)+1} — config NOT saved`}
              {stage==="done" && (
                <button className="btn bg" style={{marginLeft:"auto",padding:"2px 10px",fontSize:10}}
                  onClick={() => { setStage("idle"); setPushState(null); setCurrentIdx(0); }}>
                  Reset
                </button>
              )}
            </div>
          )}

          {/* ── Annotated command table ── */}
          {(stage==="idle" || stage==="checking" || stage==="pushing" || stage==="done") && (
            <AnnotatedCLITable
              entries={annotated}
              pushState={pushState}
              currentIdx={currentIdx}
              pushMode={pushMode}
              onConfirmOne={onConfirmOne}
            />
          )}

          {stage==="done" && !pushState?.success && pushState?.error && (
            <div style={{background:"rgba(255,23,68,.06)",border:"1px solid rgba(255,23,68,.2)",borderRadius:4,padding:"10px 14px",fontFamily:"var(--mono)",fontSize:11,color:"var(--err)"}}>
              {pushState.error}
              {pushState.hint && <div style={{color:"var(--dm)",marginTop:4}}>{pushState.hint}</div>}
            </div>
          )}

          {stage==="done" && (
            <div style={{marginTop:12,fontSize:11,color:"var(--dm)"}}>
              Session locked. To make more changes, configure them in the tabs above then click Review & Push and authenticate again.
            </div>
          )}
        </div>
      </div>
    </div>
  );
}

// ══════════════════════════════════════════════════════════════════════════════
// PORT BUTTON + EDITOR (unchanged from previous version)
// ══════════════════════════════════════════════════════════════════════════════
function PortBtn({ port, vlans, selected, onClick }) {
  const vlan = vlans.find(v => v.id === port.accessVlan);
  let bg = "#1a1c22", color = "#3a4050";
  if (port.mode==="disabled")   { bg="#13151a"; color="#2a2f3a"; }
  else if (port.mode==="trunk") { bg="#0a1a2e"; color="#2979ff"; }
  else if (vlan)                { bg=vlan.color+"22"; color=vlan.color; }
  return (
    <button className={`port ${selected?"sel":""}`}
      style={{background:bg,color,borderColor:selected?"white":color+"66"}}
      onClick={() => onClick(port.id)}
      title={`Port ${port.id}${port.description?` — ${port.description}`:""}`}>
      {port.id}
      {port.poe && port.id<=48 && port.mode!=="disabled" && <span className="poe-dot"/>}
    </button>
  );
}

function PortEditor({ port, vlans, onChange }) {
  if (!port) return <div className="empty"><div style={{fontSize:28,marginBottom:8}}>◈</div>Select a port</div>;
  const isSFP = port.id > 48;
  const up = (k,v) => onChange({...port,[k]:v});
  const toggleTagged = vid => {
    const cur = port.taggedVlans||[];
    up("taggedVlans", cur.includes(vid) ? cur.filter(v=>v!==vid) : [...cur,vid]);
  };
  return (
    <div>
      <div className="sect">Port {port.id}{isSFP?" (SFP+)":""}</div>
      <div className="field">
        <label>Description</label>
        <input value={port.description} onChange={e=>up("description",e.target.value)} placeholder="e.g. AP-Corridor-1"/>
      </div>
      <div className="field">
        <label>Mode</label>
        <div className="rgrp">
          {["access","trunk","disabled"].map(m=>(
            <button key={m} className={`rbtn ${port.mode===m?m==="trunk"?"rt":m==="disabled"?"rd":"ra":""}`}
              onClick={()=>up("mode",m)}>{m}</button>
          ))}
        </div>
      </div>
      {port.mode==="access" && (
        <div className="field">
          <label>Access VLAN</label>
          <select value={port.accessVlan} onChange={e=>up("accessVlan",+e.target.value)}>
            {vlans.map(v=><option key={v.id} value={v.id}>{v.id} — {v.name}</option>)}
          </select>
        </div>
      )}
      {port.mode==="trunk" && (<>
        <div className="field">
          <label>Native VLAN</label>
          <select value={port.nativeVlan} onChange={e=>up("nativeVlan",+e.target.value)}>
            {vlans.map(v=><option key={v.id} value={v.id}>{v.id} — {v.name}</option>)}
          </select>
        </div>
        <div className="field">
          <label>Tagged VLANs</label>
          <div className="vtags">
            {vlans.map(v=>(
              <span key={v.id} className={`vtag ${port.taggedVlans?.includes(v.id)?"von":"voff"}`}
                style={{background:v.color+"33",color:v.color,border:`1px solid ${v.color}66`}}
                onClick={()=>toggleTagged(v.id)}>{v.id}</span>
            ))}
          </div>
        </div>
      </>)}
      {!isSFP && (<>
        <div className="trow">
          <span>PoE+</span>
          <button className={`tog ${port.poe?"on":""}`} onClick={()=>up("poe",!port.poe)}/>
        </div>
        {port.poe && (
          <div className="field" style={{marginTop:8}}>
            <label>PoE Limit (mW)</label>
            <input type="number" value={port.poeLimit} min={1000} max={30000} step={1000}
              onChange={e=>up("poeLimit",+e.target.value)}/>
            <div className="poe-bar-wrap"><div className="poe-bar" style={{width:`${port.poeLimit/300}%`}}/></div>
          </div>
        )}
      </>)}
    </div>
  );
}

function PortTab({ ports, vlans, selected, setSelected, updatePort, pollStatus }) {
  const port = ports.find(p=>p.id===selected);
  return (
    <div className="main">
      <div style={{flex:1}}>
        <div className="panel">
          <div className="ph">◈ ERS 5952 — Port Map
            {pollStatus==="stale" && <span style={{marginLeft:"auto",fontSize:10,color:"var(--warn)",fontFamily:"var(--mono)"}}>⚠ Data stale</span>}
            {pollStatus==="ok" && <span style={{marginLeft:"auto",fontSize:10,color:"var(--ok)",fontFamily:"var(--mono)"}}>● Live</span>}
          </div>
          <div className="pb">
            <div className="chassis">
              <div className="cl">48× GigE PoE+</div>
              <div className="pgrid">
                {ports.slice(0,48).map(p=><PortBtn key={p.id} port={p} vlans={vlans} selected={selected===p.id} onClick={setSelected}/>)}
              </div>
              <div className="cl" style={{marginTop:12}}>4× SFP+ Uplinks</div>
              <div className="pgrid-sfp">
                {ports.slice(48,52).map(p=><PortBtn key={p.id} port={p} vlans={vlans} selected={selected===p.id} onClick={setSelected}/>)}
              </div>
            </div>
            <div className="legend">
              {vlans.map(v=>(
                <div key={v.id} className="li"><span className="ld" style={{background:v.color}}/><span>VLAN {v.id} — {v.name}</span></div>
              ))}
              <div className="li"><span className="ld" style={{background:"#0a1a2e",border:"1px solid #2979ff"}}/><span>Trunk</span></div>
              <div className="li"><span className="ld" style={{background:"#13151a"}}/><span>Disabled</span></div>
            </div>
          </div>
        </div>
      </div>
      <div className="panel" style={{width:280,flexShrink:0}}>
        <div className="ph">◈ Port Config</div>
        <div className="pb"><PortEditor port={port} vlans={vlans} onChange={updatePort}/></div>
      </div>
    </div>
  );
}

function VlanTab({ vlans, setVlans, ports }) {
  const [nid,setNid]=useState(""); const [nm,setNm]=useState("");
  const add = () => {
    const id=parseInt(nid);
    if(!id||id<1||id>4094||vlans.find(v=>v.id===id)) return;
    setVlans([...vlans,{id,name:nm||`VLAN-${id}`,color:VLAN_COLORS[vlans.length%VLAN_COLORS.length]}]);
    setNid(""); setNm("");
  };
  const cnt = vid => ports.filter(p=>p.mode==="access"?p.accessVlan===vid:p.taggedVlans?.includes(vid)).length;
  return (
    <div className="main">
      <div style={{flex:1}}>
        <div className="panel">
          <div className="ph">◈ VLAN Manager</div>
          <div className="pb">
            <table className="vtbl">
              <thead><tr><th>ID</th><th>Color</th><th>Name</th><th>Ports</th><th>Subnet</th><th></th></tr></thead>
              <tbody>
                {vlans.map(v=>(
                  <tr key={v.id}>
                    <td style={{color:"var(--ac)",fontWeight:700}}>{v.id}</td>
                    <td><span className="sw" style={{background:v.color}}/></td>
                    <td><input className="ii" value={v.name} onChange={e=>setVlans(vlans.map(x=>x.id===v.id?{...x,name:e.target.value}:x))}/></td>
                    <td><span className="badge" style={{background:"var(--b2)"}}>{cnt(v.id)}</span></td>
                    <td style={{color:"var(--dm)"}}>192.168.{v.id}.0/24</td>
                    <td>{v.id!==1&&<button className="btn bd" style={{padding:"2px 8px",fontSize:10}} onClick={()=>setVlans(vlans.filter(x=>x.id!==v.id))}>✕</button>}</td>
                  </tr>
                ))}
              </tbody>
            </table>
            <div style={{marginTop:16,paddingTop:12,borderTop:"1px solid var(--b1)"}}>
              <div className="sect">Add VLAN</div>
              <div style={{display:"flex",gap:8,alignItems:"flex-end"}}>
                <div className="field" style={{margin:0,width:90}}><label>ID</label><input value={nid} onChange={e=>setNid(e.target.value)} type="number" placeholder="100"/></div>
                <div className="field" style={{margin:0,flex:1}}><label>Name</label><input value={nm} onChange={e=>setNm(e.target.value)} placeholder="e.g. POS"/></div>
                <button className="btn bp" onClick={add}>Add</button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

// ── ACL Templates ──────────────────────────────────────────────────────────
// Each template is a factory function: takes { subnet, ctrldIp, nvrIp } and
// returns { name, direction, rules[] } ready to paste into the ACL card list.
const ACL_TEMPLATES = [
  {
    id: "staff",
    label: "Staff VLAN — full internet, no management",
    description: "Allows everything except access to the management VLAN (99). Use on a staff or office VLAN.",
    params: ["subnet"],
    build: ({ subnet, vid }) => ({
      name: `STAFF-VLAN${vid}-POLICY`,
      direction: "in",
      rules: [
        { action:"deny",  proto:"ip", src:subnet, srcMask:"0.0.0.255", srcAny:false,
          dst:"192.168.99.0", dstMask:"0.0.0.255", dstAny:false, port:"",
          _comment: "Block access to management VLAN 99" },
        { action:"permit",proto:"ip", src:"",     srcMask:"",          srcAny:true,
          dst:"",           dstMask:"",           dstAny:true,         port:"",
          _comment: "Permit everything else" },
      ],
    }),
  },
  {
    id: "iot",
    label: "IoT / TV / Printer VLAN — internet only, strict isolation",
    description: "Blocks ALL private IP ranges (RFC1918). Devices get internet only — cannot reach any other VLAN, server, NAS, PBX, camera, or management network. Use for devices that need zero LAN access and have no local services to reach.",
    params: ["subnet"],
    build: ({ subnet, vid }) => ({
      name: `IOT-VLAN${vid}-POLICY`,
      direction: "in",
      rules: [
        { action:"deny",  proto:"ip", src:subnet, srcMask:"0.0.0.255", srcAny:false,
          dst:"192.168.0.0", dstMask:"0.255.255.255", dstAny:false, port:"",
          _comment: "Block all 192.168.x.x (other VLANs, management)" },
        { action:"deny",  proto:"ip", src:subnet, srcMask:"0.0.0.255", srcAny:false,
          dst:"10.0.0.0",  dstMask:"0.255.255.255", dstAny:false, port:"",
          _comment: "Block 10.x.x.x" },
        { action:"deny",  proto:"ip", src:subnet, srcMask:"0.0.0.255", srcAny:false,
          dst:"172.16.0.0",dstMask:"0.15.255.255",  dstAny:false, port:"",
          _comment: "Block 172.16-31.x.x" },
        { action:"permit",proto:"ip", src:"",     srcMask:"",          srcAny:true,
          dst:"",          dstMask:"",            dstAny:true,         port:"",
          _comment: "Permit internet" },
      ],
    }),
  },
  {
    id: "iot-local-services",
    label: "IoT VLAN — isolated + access local services via FQDN",
    description: [
      "For IoT devices that need to reach local servers (NAS, Home Assistant, etc.)",
      "by FQDN while remaining isolated from all other VLANs.",
      "",
      "What this ACL does:",
      "  • Allows DNS queries to your resolver (so FQDNs resolve to LAN IPs)",
      "  • Allows traffic to your servers VLAN subnet only",
      "  • Blocks all other RFC1918 (user devices, cameras, management, etc.)",
      "  • Allows internet",
      "",
      "How FQDN access works:",
      "  Device queries 'nas.lan' → DNS returns 192.168.20.X → ACL permits that IP",
      "  The device never needs to know the IP. Works transparently.",
      "",
      "OFFLINE RESILIENCE — critical:",
      "  If ctrld is running on the management PC, DNS fails when that PC is off",
      "  or when internet is down (ctrld requires DoH3 connectivity to Control D).",
      "  → Deploy ctrld on OPNsense (DNS tab → OPNsense mode) so it stays up",
      "    independent of internet and independent of the management PC.",
      "  → Enable split-horizon in DNS tab so *.lan queries go to local dnsmasq,",
      "    which resolves from local-hostnames.json without any internet dependency.",
      "  Result: 'nas.lan' resolves correctly even with internet completely down.",
      "",
      "SERVERS VLAN security:",
      "  Granting IoT access to the servers VLAN subnet means ALL servers on that",
      "  subnet are reachable from IoT. Lock down the server VLAN inbound ACL to",
      "  only permit the specific ports each service needs (e.g. TCP 8123 for Home",
      "  Assistant, TCP 443 for internal HTTPS). Apply the ACL on the servers VLAN,",
      "  not here — that way it applies regardless of which VLAN initiates.",
    ].join("\n"),
    params: ["subnet", "ctrldIp", "serverSubnet"],
    build: ({ subnet, vid, ctrldIp, serverSubnet }) => {
      const srvNet  = serverSubnet || "192.168.20.0";
      const dnsDst  = ctrldIp || "RESOLVER_IP";
      return {
        name: `IOT-SVC-VLAN${vid}-POLICY`,
        direction: "in",
        rules: [
          { action:"permit", proto:"udp", src:subnet, srcMask:"0.0.0.255", srcAny:false,
            dst:dnsDst, dstMask:"", dstAny:false, port:"53",
            _comment: "DNS to resolver (UDP) — FQDNs resolve to LAN IPs" },
          { action:"permit", proto:"tcp", src:subnet, srcMask:"0.0.0.255", srcAny:false,
            dst:dnsDst, dstMask:"", dstAny:false, port:"53",
            _comment: "DNS to resolver (TCP)" },
          { action:"permit", proto:"ip",  src:subnet, srcMask:"0.0.0.255", srcAny:false,
            dst:srvNet, dstMask:"0.0.0.255", dstAny:false, port:"",
            _comment: `Allow traffic to servers VLAN (${srvNet}/24)` },
          { action:"deny",   proto:"ip",  src:subnet, srcMask:"0.0.0.255", srcAny:false,
            dst:"192.168.0.0", dstMask:"0.255.255.255", dstAny:false, port:"",
            _comment: "Block all other 192.168.x.x (users, cameras, management)" },
          { action:"deny",   proto:"ip",  src:subnet, srcMask:"0.0.0.255", srcAny:false,
            dst:"10.0.0.0", dstMask:"0.255.255.255", dstAny:false, port:"",
            _comment: "Block 10.x.x.x" },
          { action:"deny",   proto:"ip",  src:subnet, srcMask:"0.0.0.255", srcAny:false,
            dst:"172.16.0.0", dstMask:"0.15.255.255", dstAny:false, port:"",
            _comment: "Block 172.16-31.x.x" },
          { action:"permit", proto:"ip",  src:"", srcMask:"", srcAny:true,
            dst:"", dstMask:"", dstAny:true, port:"",
            _comment: "Permit internet" },
        ],
      };
    },
  },
  {
    id: "guest",
    label: "Guest VLAN — internet only, DNS must work first",
    description: "Like IoT but DNS to ctrld is explicitly permitted first. Prevents guests from bypassing DNS filtering while still blocking all RFC1918 access.",
    params: ["subnet", "ctrldIp"],
    build: ({ subnet, vid, ctrldIp }) => ({
      name: `GUEST-VLAN${vid}-POLICY`,
      direction: "in",
      rules: [
        { action:"permit",proto:"udp", src:subnet, srcMask:"0.0.0.255", srcAny:false,
          dst:ctrldIp||"CTRLD_IP", dstMask:"", dstAny:false, port:"53",
          _comment: "Permit DNS to ctrld (DHCP-assigned resolver)" },
        { action:"permit",proto:"tcp", src:subnet, srcMask:"0.0.0.255", srcAny:false,
          dst:ctrldIp||"CTRLD_IP", dstMask:"", dstAny:false, port:"53",
          _comment: "Permit DNS/TCP to ctrld" },
        { action:"deny",  proto:"ip", src:subnet, srcMask:"0.0.0.255", srcAny:false,
          dst:"192.168.0.0",dstMask:"0.255.255.255",dstAny:false,port:"",
          _comment: "Block 192.168.x.x" },
        { action:"deny",  proto:"ip", src:subnet, srcMask:"0.0.0.255", srcAny:false,
          dst:"10.0.0.0",  dstMask:"0.255.255.255",dstAny:false,port:"",
          _comment: "Block 10.x.x.x" },
        { action:"deny",  proto:"ip", src:subnet, srcMask:"0.0.0.255", srcAny:false,
          dst:"172.16.0.0",dstMask:"0.15.255.255", dstAny:false,port:"",
          _comment: "Block 172.16-31.x.x" },
        { action:"permit",proto:"ip", src:"",     srcMask:"",          srcAny:true,
          dst:"",          dstMask:"",            dstAny:true, port:"",
          _comment: "Permit internet" },
      ],
    }),
  },
  {
    id: "camera",
    label: "Camera VLAN — NVR only",
    description: "Cameras can only talk to one NVR/DVR IP. All other traffic is dropped. Prevents cameras from phoning home or scanning the network.",
    params: ["subnet", "nvrIp"],
    build: ({ subnet, vid, nvrIp }) => ({
      name: `CAMERA-VLAN${vid}-POLICY`,
      direction: "in",
      rules: [
        { action:"permit",proto:"ip", src:subnet, srcMask:"0.0.0.255", srcAny:false,
          dst:nvrIp||"NVR_IP", dstMask:"", dstAny:false, port:"",
          _comment: "Permit traffic to NVR/DVR only" },
        { action:"deny",  proto:"ip", src:"",    srcMask:"",           srcAny:true,
          dst:"",         dstMask:"",            dstAny:true,          port:"",
          _comment: "Drop everything else" },
      ],
    }),
  },
  {
    id: "voip",
    label: "SIP Phone VLAN — Asterisk / FreePBX (local desk phones)",
    description: [
      "USE THIS TEMPLATE FOR: dedicated desk phones or ATAs that are always on a fixed VLAN",
      "and register with Asterisk over the local network.",
      "",
      "Allows SIP signaling (UDP/TCP 5060), SIP/TLS (TCP 5061), and RTP audio",
      "(UDP 10000–20000) to the PBX IP. Blocks management VLAN 99. Permits internet.",
      "",
      "The ERS 5952 performs L3 routing between VLANs — this switch ACL IS the",
      "enforcement point. No OPNsense inter-VLAN firewall rules needed for local SIP.",
      "Note: the ACL is subnet-based, so phones get any DHCP IP on the VLAN and",
      "it still works. For return RTP (PBX → phone), apply a matching permit on the",
      "server VLAN ACL if you have one.",
      "",
      "FOR MOBILE SOFTPHONES: skip this template entirely.",
      "Configure softphones with your public FQDN (e.g. pbx.yourdomain.com) and",
      "connect via OPNsense port forwarding — same path whether on home WiFi or",
      "cellular. This avoids VLAN roaming and MAC randomization issues completely.",
      "",
      "  OPNsense setup for remote/FQDN softphone access:",
      "  • NAT port forward: WAN:5061 → Asterisk IP:5061  (SIP/TLS)",
      "  • NAT port forward: WAN:10000-20000 → Asterisk IP:10000-20000  (RTP)",
      "  • Enable NAT reflection so home WiFi phones work via the same FQDN",
      "  • Caddy reverse proxy for WebRTC: pbx.yourdomain.com → Asterisk:8089 (WSS)",
      "  • Asterisk fail2ban essential — SIP port 5061 will be scanned",
      "",
      "IoT/TV/Printer VLANs: use the IoT template on those VLANs — it blocks all",
      "RFC1918 addresses including Asterisk. No additional config needed.",
    ].join("\n"),
    params: ["subnet", "pbxIp"],
    build: ({ subnet, vid, pbxIp }) => ({
      name: `VOIP-VLAN${vid}-POLICY`,
      direction: "in",
      rules: [
        { action:"permit", proto:"udp", src:subnet, srcMask:"0.0.0.255", srcAny:false,
          dst:pbxIp||"PBX_IP", dstMask:"", dstAny:false, port:"5060", portEnd:"",
          _comment: "SIP signaling to PBX (UDP)" },
        { action:"permit", proto:"tcp", src:subnet, srcMask:"0.0.0.255", srcAny:false,
          dst:pbxIp||"PBX_IP", dstMask:"", dstAny:false, port:"5060", portEnd:"",
          _comment: "SIP signaling to PBX (TCP)" },
        { action:"permit", proto:"tcp", src:subnet, srcMask:"0.0.0.255", srcAny:false,
          dst:pbxIp||"PBX_IP", dstMask:"", dstAny:false, port:"5061", portEnd:"",
          _comment: "SIP/TLS to PBX (TCP)" },
        { action:"permit", proto:"udp", src:subnet, srcMask:"0.0.0.255", srcAny:false,
          dst:pbxIp||"PBX_IP", dstMask:"", dstAny:false, port:"10000", portEnd:"20000",
          _comment: "RTP audio to PBX (UDP 10000-20000)" },
        { action:"deny",   proto:"ip",  src:subnet, srcMask:"0.0.0.255", srcAny:false,
          dst:"192.168.99.0", dstMask:"0.0.0.255", dstAny:false, port:"",
          _comment: "Block management VLAN 99" },
        { action:"permit", proto:"ip",  src:"", srcMask:"", srcAny:true,
          dst:"", dstMask:"", dstAny:true, port:"",
          _comment: "Permit internet and all other traffic" },
      ],
    }),
  },
];

function AclTemplateModal({ vlans, onApply, onClose }) {
  const [tpl, setTpl]             = useState(ACL_TEMPLATES[0].id);
  const [vid, setVid]             = useState(vlans[0]?.id || 1);
  const [ctrldIp, setCtrldIp]     = useState("");
  const [nvrIp, setNvrIp]         = useState("");
  const [pbxIp, setPbxIp]         = useState("");
  const [serverSubnet, setServerSubnet] = useState("");

  const tmpl = ACL_TEMPLATES.find(t => t.id === tpl);
  const vlan  = vlans.find(v => v.id === vid);
  const subnet = `192.168.${vid}.0`;

  // Auto-suggest servers subnet from vlans list
  const serversVlan = vlans.find(v => v.name?.toLowerCase().includes("server") && v.id !== 99);
  const serverSubnetPlaceholder = serversVlan ? `192.168.${serversVlan.id}.0` : "e.g. 192.168.20.0";

  const apply = () => {
    const srvSubnet = serverSubnet || serverSubnetPlaceholder;
    const acl = tmpl.build({ subnet, vid, ctrldIp, nvrIp, pbxIp, serverSubnet: srvSubnet });
    // Strip _comment keys — they are just for display here
    acl.rules = acl.rules.map(({ _comment, ...r }) => r);
    acl.applyVlan = vid;
    onApply(acl);
    onClose();
  };

  return (
    <div style={{
      position:"fixed",inset:0,background:"rgba(0,0,0,.65)",
      display:"flex",alignItems:"center",justifyContent:"center",zIndex:1000,
    }} onClick={onClose}>
      <div style={{
        background:"var(--bg2)",border:"1px solid var(--b2)",borderRadius:8,
        padding:24,maxWidth:560,width:"90%",
      }} onClick={e=>e.stopPropagation()}>
        <div style={{fontWeight:700,fontSize:14,marginBottom:14}}>
          ACL Template
          <button className="btn bg" style={{float:"right",fontSize:10,padding:"2px 8px"}}
            onClick={onClose}>✕</button>
        </div>

        {/* Template selector */}
        <div className="field" style={{margin:"0 0 12px"}}>
          <label>Template</label>
          <select value={tpl} onChange={e=>setTpl(e.target.value)}>
            {ACL_TEMPLATES.map(t=><option key={t.id} value={t.id}>{t.label}</option>)}
          </select>
        </div>
        {tmpl && (
          <div style={{fontSize:11,color:"var(--dm)",lineHeight:1.7,marginBottom:12,
                       padding:"8px 12px",background:"var(--bg)",borderRadius:4,
                       border:"1px solid var(--b1)",whiteSpace:"pre-wrap",maxHeight:140,overflowY:"auto"}}>
            {tmpl.description}
          </div>
        )}

        {/* VLAN selector */}
        <div className="field" style={{margin:"0 0 10px"}}>
          <label>Apply to VLAN</label>
          <select value={vid} onChange={e=>setVid(+e.target.value)}>
            {vlans.filter(v=>v.id!==99).map(v=>
              <option key={v.id} value={v.id}>{v.id} — {v.name}</option>)}
          </select>
        </div>

        {/* Extra params */}
        {tmpl?.params.includes("ctrldIp") && (
          <div className="field" style={{margin:"0 0 10px"}}>
            <label>ctrld IP address</label>
            <input value={ctrldIp} onChange={e=>setCtrldIp(e.target.value)}
              placeholder="e.g. 192.168.99.50"
              style={{fontFamily:"var(--mono)",maxWidth:200}}/>
            <div style={{fontSize:10,color:"var(--dm)",marginTop:3}}>
              IP of the machine running ctrld — shown in DNS tab after install
            </div>
          </div>
        )}
        {tmpl?.params.includes("nvrIp") && (
          <div className="field" style={{margin:"0 0 10px"}}>
            <label>NVR / DVR IP address</label>
            <input value={nvrIp} onChange={e=>setNvrIp(e.target.value)}
              placeholder="e.g. 192.168.30.10"
              style={{fontFamily:"var(--mono)",maxWidth:200}}/>
          </div>
        )}

        {tmpl?.params.includes("serverSubnet") && (
          <div className="field" style={{margin:"0 0 10px"}}>
            <label>Servers VLAN subnet</label>
            <input value={serverSubnet} onChange={e=>setServerSubnet(e.target.value)}
              placeholder={serverSubnetPlaceholder}
              style={{fontFamily:"var(--mono)",maxWidth:200}}/>
            <div style={{fontSize:10,color:"var(--dm)",marginTop:3}}>
              Network address of the VLAN your servers live on (e.g. NAS, Home Assistant).
              Leave blank to use <span style={{fontFamily:"var(--mono)"}}>{serverSubnetPlaceholder}</span>.
            </div>
          </div>
        )}

        {/* Preview */}
        {tmpl?.params.includes("pbxIp") && (
          <div className="field" style={{margin:"0 0 10px"}}>
            <label>Asterisk / PBX IP address</label>
            <input value={pbxIp} onChange={e=>setPbxIp(e.target.value)}
              placeholder="e.g. 192.168.20.10"
              style={{fontFamily:"var(--mono)",maxWidth:200}}/>
            <div style={{fontSize:10,color:"var(--dm)",marginTop:3}}>
              IP of your Asterisk server. SIP and RTP will only be permitted to this exact IP.
            </div>
          </div>
        )}

        {/* Preview */}
        {tmpl && (
          <div style={{
            background:"#060809",borderRadius:4,padding:"10px 12px",
            fontFamily:"var(--mono)",fontSize:10,color:"#7090a0",
            lineHeight:1.7,marginBottom:14,maxHeight:180,overflowY:"auto",
          }}>
            {tmpl.build({subnet,vid,ctrldIp,nvrIp,pbxIp,serverSubnet:serverSubnet||serverSubnetPlaceholder}).rules.map((r,i)=>(
              <div key={i}>
                <span style={{color:"#566"}}>{`  ${i+1} `}</span>
                <span style={{color:r.action==="permit"?"#0e7":"#f55"}}>{r.action}</span>
                {` ${r.proto} `}
                <span style={{color:"#a0c0d0"}}>
                  {r.srcAny?"any":`${r.src||"?"} ${r.srcMask||""}`}
                </span>
                {" → "}
                <span style={{color:"#a0c0d0"}}>
                  {r.dstAny?"any":`${r.dst||"?"} ${r.dstMask||""}`}
                </span>
                {r.portEnd
                  ? <span style={{color:"#fa0"}}>{` range ${r.port} ${r.portEnd}`}</span>
                  : r.port
                    ? <span style={{color:"#fa0"}}>{` eq ${r.port}`}</span>
                    : null}
                {r._comment && <span style={{color:"#445"}}>{`  # ${r._comment}`}</span>}
              </div>
            ))}
          </div>
        )}

        <div style={{display:"flex",gap:8,justifyContent:"flex-end"}}>
          <button className="btn bg" onClick={onClose}>Cancel</button>
          <button className="btn bp" onClick={apply}>Apply Template</button>
        </div>
      </div>
    </div>
  );
}

function AclTab({ acls, setAcls, vlans }) {
  const [nn,setNn]=useState(""); const [nv,setNv]=useState(vlans[0]?.id||1); const [nd,setNd]=useState("in");
  const [showTplModal,setShowTplModal]=useState(false);
  const addAcl=()=>{if(!nn)return;setAcls([...acls,{name:nn,applyVlan:nv,direction:nd,rules:[]}]);setNn("");};
  const addRule=name=>setAcls(acls.map(a=>a.name!==name?a:{...a,rules:[...a.rules,{action:"deny",proto:"ip",src:"",srcMask:"0.0.0.255",srcAny:true,dst:"",dstMask:"0.0.0.255",dstAny:true,port:""}]}));
  const upRule=(name,idx,k,v)=>setAcls(acls.map(a=>a.name!==name?a:{...a,rules:a.rules.map((r,i)=>i===idx?{...r,[k]:v}:r)}));
  const delRule=(name,idx)=>setAcls(acls.map(a=>a.name!==name?a:{...a,rules:a.rules.filter((_,i)=>i!==idx)}));
  const applyTemplate=acl=>setAcls(prev=>{
    // Replace if same name already exists, otherwise append
    const idx=prev.findIndex(a=>a.name===acl.name);
    return idx>=0?prev.map((a,i)=>i===idx?acl:a):[...prev,acl];
  });
  return (
    <div className="main">
      <div style={{flex:1}}>
        {showTplModal && (
          <AclTemplateModal vlans={vlans} onApply={applyTemplate} onClose={()=>setShowTplModal(false)}/>
        )}
        <div className="panel">
          <div className="ph">◈ ACL Builder
            <button className="btn bg" style={{marginLeft:"auto",fontSize:10,padding:"3px 10px"}}
              onClick={()=>setShowTplModal(true)}>
              Use Template
            </button>
          </div>
          <div className="pb">
            {/* Templates hint when empty */}
            {acls.length===0&&(
              <div style={{marginBottom:12}}>
                <div style={{
                  padding:"10px 14px",background:"rgba(0,229,255,.04)",
                  border:"1px solid rgba(0,229,255,.12)",borderRadius:4,
                  fontSize:11,color:"var(--dm)",lineHeight:1.7,
                }}>
                  <span style={{color:"var(--ac)",fontWeight:700}}>Templates available: </span>
                  Click <strong>Use Template</strong> to pre-fill rules for common
                  patterns: Staff (full internet, no management), IoT (internet only),
                  Guest (internet only + DNS enforcement), or Camera (NVR only).
                  All rules are editable before pushing.
                </div>
              </div>
            )}
            {acls.length===0&&<div className="empty">No ACLs defined.</div>}
            {acls.map(acl=>(
              <div key={acl.name} className="acl-card">
                <div className="acl-hd">
                  <span className="acl-nm">{acl.name}</span>
                  <span style={{fontSize:11,color:"var(--dm)"}}>VLAN {acl.applyVlan} / {acl.direction.toUpperCase()}</span>
                  <button className="btn bd" style={{padding:"2px 8px",fontSize:10}} onClick={()=>setAcls(acls.filter(a=>a.name!==acl.name))}>✕</button>
                </div>
                <div className="acl-rules">
                  {acl.rules.map((r,i)=>(
                    <div key={i} className="acl-rule">
                      <select value={r.action} onChange={e=>upRule(acl.name,i,"action",e.target.value)}>{["permit","deny"].map(a=><option key={a}>{a}</option>)}</select>
                      <select value={r.proto} onChange={e=>upRule(acl.name,i,"proto",e.target.value)}>{["ip","tcp","udp","icmp"].map(p=><option key={p}>{p}</option>)}</select>
                      <div style={{display:"flex",gap:4,alignItems:"center"}}>
                        <input placeholder={r.srcAny?"any":"10.0.0.0"} value={r.src} disabled={r.srcAny} onChange={e=>upRule(acl.name,i,"src",e.target.value)} style={{flex:1}}/>
                        <label style={{fontSize:10,color:"var(--dm)",display:"flex",gap:3,alignItems:"center",whiteSpace:"nowrap"}}><input type="checkbox" checked={r.srcAny} onChange={e=>upRule(acl.name,i,"srcAny",e.target.checked)}/>any</label>
                      </div>
                      <div style={{display:"flex",gap:4,alignItems:"center"}}>
                        <input placeholder={r.dstAny?"any":"10.0.0.0"} value={r.dst} disabled={r.dstAny} onChange={e=>upRule(acl.name,i,"dst",e.target.value)} style={{flex:1}}/>
                        <label style={{fontSize:10,color:"var(--dm)",display:"flex",gap:3,alignItems:"center",whiteSpace:"nowrap"}}><input type="checkbox" checked={r.dstAny} onChange={e=>upRule(acl.name,i,"dstAny",e.target.checked)}/>any</label>
                      </div>
                      <input placeholder="port" value={r.port} onChange={e=>upRule(acl.name,i,"port",e.target.value)}/>
                      <button className="btn bd" style={{padding:"2px 6px"}} onClick={()=>delRule(acl.name,i)}>✕</button>
                    </div>
                  ))}
                  <button className="btn bg" style={{marginTop:6,fontSize:10}} onClick={()=>addRule(acl.name)}>+ Add Rule</button>
                </div>
              </div>
            ))}
            <div style={{marginTop:16,paddingTop:12,borderTop:"1px solid var(--b1)"}}>
              <div className="sect">New ACL</div>
              <div style={{display:"flex",gap:8,alignItems:"flex-end"}}>
                <div className="field" style={{margin:0,flex:1}}><label>Name</label><input value={nn} onChange={e=>setNn(e.target.value)} placeholder="BLOCK-IOT"/></div>
                <div className="field" style={{margin:0,width:130}}><label>VLAN</label><select value={nv} onChange={e=>setNv(+e.target.value)}>{vlans.map(v=><option key={v.id} value={v.id}>{v.id} — {v.name}</option>)}</select></div>
                <div className="field" style={{margin:0,width:75}}><label>Direction</label><select value={nd} onChange={e=>setNd(e.target.value)}><option value="in">in</option><option value="out">out</option></select></div>
                <button className="btn bp" onClick={addAcl}>Create</button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

// ══════════════════════════════════════════════════════════════════════════════
// APP
// ══════════════════════════════════════════════════════════════════════════════
export default function App() {
  const [tab, setTab]           = useState("dashboard");
  const [ports, setPorts]       = useState(DEFAULT_PORTS);
  const [vlans, setVlans]       = useState(DEFAULT_VLANS);
  const [acls, setAcls]         = useState([]);
  const [selected, setSelected] = useState(null);
  const [hostname, setHostname] = useState("ERS-5952");
  const [switchIP, setSwitchIP] = useState("192.168.99.1");
  const [settings, setSettings] = useState({ cliMode: false, defaultPushMode: "batch" });
  const [showSettings, setShowSettings] = useState(false);

  const [connState, setConnState] = useState("connecting");
  const [connInfo, setConnInfo]   = useState("");
  const connTimer = useRef(null);

  const [pollStatus, setPollStatus] = useState("idle");
  const [session, setSession]       = useState(null);
  const [showTotp, setShowTotp]     = useState(false);

  const updatePort = useCallback(p => setPorts(prev => prev.map(x => x.id===p.id?p:x)), []);

  // Heartbeat
  useEffect(() => {
    let firstPoll = true;
    const beat = async () => {
      const mode = document.hidden ? "background" : "active";
      try {
        const data = await API("/heartbeat", { method:"POST", body:{ visitor_id: VISITOR_ID, mode } });
        if (firstPoll) {
          firstPoll = false;
          setConnState("connected");
          setConnInfo(`Connected — ${switchIP}`);
          if (connTimer.current) clearTimeout(connTimer.current);
          connTimer.current = setTimeout(() => setConnState("hidden"), 3000);
        } else if (connState === "error") {
          setConnState("connected");
          setConnInfo(`Reconnected`);
          connTimer.current = setTimeout(() => setConnState("hidden"), 3000);
        }
        setPollStatus(data.poll_error ? "warn" : data.last_poll ? "ok" : "idle");
      } catch {
        setConnState("error");
        setPollStatus("err");
        firstPoll = true;
      }
    };
    beat();
    const t = setInterval(beat, 30000);
    const onVis = () => beat();
    document.addEventListener("visibilitychange", onVis);
    return () => { clearInterval(t); document.removeEventListener("visibilitychange", onVis); };
  }, [switchIP]);

  const handleTotpSuccess = (token) => {
    setShowTotp(false);
    setSession({ token });
  };

  const TABS = [
    { id:"dashboard",label:"Dashboard" },
    { id:"ports",   label:"Port Map" },
    { id:"vlans",   label:"VLANs" },
    { id:"acls",    label:"ACL Builder" },
    { id:"cli",     label:"Review & Push" },
    { id:"devices", label:"Device Access" },
    { id:"dhcp",    label:"DHCP" },
    { id:"dns",     label:"DNS Filtering" },
    { id:"vpn",     label:"VPN" },
  ];

  return (
    <>
      <style>{css}</style>
      <div className="app">
        <ConnBanner state={connState} info={connInfo}/>
        <div className="topbar">
          <div>
            <div className="logo">ERS-5952 MANAGER</div>
            <div className="logo-sub">Extreme Networks / Avaya ERS 5900 Series</div>
          </div>
          <div className="sp"/>
          <span className="tl">Hostname</span>
          <input className="ti" value={hostname} onChange={e=>setHostname(e.target.value)} placeholder="ERS-5952"/>
          <span className="tl">Switch IP</span>
          <input className="ti" value={switchIP} onChange={e=>setSwitchIP(e.target.value)} placeholder="192.168.99.1"/>
          <div className="poll-pill">
            <span className={`dot ${pollStatus}`}/>
            {pollStatus==="ok"?"Live":pollStatus==="warn"?"Poll error":pollStatus==="err"?"Offline":"Idle"}
          </div>
          <SessionBtn session={session} onUnlock={() => setShowTotp(true)}/>
          <button className="settings-btn" onClick={() => setShowSettings(true)} title="Settings">⚙</button>
        </div>

        <div className="tabs">
          {TABS.map(t=>(
            <button key={t.id} className={`tab ${tab===t.id?"active":""}`} onClick={()=>setTab(t.id)}>{t.label}</button>
          ))}
        </div>

        {tab==="dashboard" && <DashboardTab
          vlans={vlans} acls={acls} ports={ports}
          backendOk={pollStatus!=="err"}
          switchOk={pollStatus==="ok"}
          onNavigate={setTab}
        />}
        {tab==="ports" && <PortTab ports={ports} vlans={vlans} selected={selected} setSelected={setSelected} updatePort={updatePort} pollStatus={pollStatus==="ok"?"ok":"stale"}/>}
        {tab==="vlans" && <VlanTab vlans={vlans} setVlans={setVlans} ports={ports}/>}
        {tab==="acls"  && <AclTab acls={acls} setAcls={setAcls} vlans={vlans}/>}
        {tab==="cli"   && <CliTab
          ports={ports} vlans={vlans} acls={acls} hostname={hostname}
          session={session} setSession={setSession}
          onNeedAuth={() => setShowTotp(true)}
          backendOk={pollStatus!=="err"}
          settings={settings}
        />}
        {tab==="devices" && <DeviceAccessTab
          session={session}
          onNeedAuth={() => setShowTotp(true)}
          backendOk={pollStatus!=="err"}
        />}
        {tab==="dhcp" && <DHCPTab
          session={session}
          onNeedAuth={() => setShowTotp(true)}
          backendOk={pollStatus!=="err"}
        />}
        {tab==="dns" && <DNSTab
          vlans={vlans}
          session={session}
          onNeedAuth={() => setShowTotp(true)}
          backendOk={pollStatus!=="err"}
          acls={acls}
          setAcls={setAcls}
        />}
        {tab==="vpn" && <WireGuardTab
          session={session}
          onNeedAuth={() => setShowTotp(true)}
          backendOk={pollStatus!=="err"}
          vlans={vlans}
        />}

        {showTotp && <TotpModal
          onSuccess={handleTotpSuccess}
          onCancel={() => setShowTotp(false)}
          commandCount={generateAnnotatedCLI({ports,vlans,acls,hostname}).length}
        />}

        {showSettings && <SettingsPanel
          settings={settings} setSettings={setSettings}
          onClose={() => setShowSettings(false)}
        />}
      </div>
    </>
  );
}

// ══════════════════════════════════════════════════════════════════════════════
// DEVICE ACCESS TAB
// ══════════════════════════════════════════════════════════════════════════════

const MAC_TIPS = {
  ios: "Settings → Wi-Fi → your network → Private Wi-Fi Address → OFF\nThen reconnect. Find real MAC: Settings → General → About → Wi-Fi Address",
  android: "Settings → Network → Wi-Fi → your network → Privacy → Use device MAC\nThen reconnect.",
  macos: "System Settings → Network → your connection → Details → Hardware → Manually set MAC",
  windows: "Settings → Network → your adapter → Hardware properties → Random hardware addresses → OFF",
};

function DeviceAccessTab({ session, onNeedAuth, backendOk }) {
  const [devices, setDevices] = useState({ saved: [], live: [], mgmt_ip: "" });
  const [loading, setLoading] = useState(false);
  const [showForm, setShowForm] = useState(false);
  const [editDevice, setEditDevice] = useState(null);
  const [showMacTip, setShowMacTip] = useState(null);
  const [pushResult, setPushResult] = useState(null);
  const [form, setForm] = useState({ name:"", mac:"", ip:"", vlan:10, management_access:false, static_ip:false, notes:"" });

  const load = async () => {
    setLoading(true);
    try { setDevices(await API("/devices")); } catch(e) { console.error(e); }
    setLoading(false);
  };

  useEffect(() => { if (backendOk) load(); }, [backendOk]);

  const openAdd = () => { setForm({ name:"", mac:"", ip:"", vlan:10, management_access:false, static_ip:false, notes:"" }); setEditDevice(null); setShowForm(true); };
  const openEdit = (d) => { setForm({...d}); setEditDevice(d); setShowForm(true); };

  const save = async () => {
    if (!session) { onNeedAuth(); return; }
    try {
      const r = await API("/devices/save", { method:"POST", body:{ token: session.token, device: form } });
      setDevices(d => ({ ...d, saved: r.devices }));
      setShowForm(false);
    } catch(e) { alert(e.message); }
  };

  const del = async (mac) => {
    if (!session) { onNeedAuth(); return; }
    if (!confirm("Remove this device?")) return;
    try {
      const r = await API("/devices/delete", { method:"POST", body:{ token: session.token, mac } });
      setDevices(d => ({ ...d, saved: r.devices }));
    } catch(e) { alert(e.message); }
  };

  const pushReservation = async (device) => {
    if (!session) { onNeedAuth(); return; }
    try {
      const r = await API("/devices/push-reservation", { method:"POST", body:{ token: session.token, device } });
      setPushResult(r);
    } catch(e) { setPushResult({ success:false, error:e.message }); }
  };

  const pushPinhole = async (mac, allow) => {
    if (!session) { onNeedAuth(); return; }
    try {
      const r = await API("/devices/push-pinhole", { method:"POST", body:{ token: session.token, mac, allow } });
      setPushResult(r);
    } catch(e) { setPushResult({ success:false, error:e.message }); }
  };

  const adoptLive = (live) => {
    setForm({ name: live.hostname||"", mac: live.mac, ip: live.ip, vlan:10, management_access:false, static_ip:false, notes:"" });
    setEditDevice(null); setShowForm(true);
  };

  const savedMacs = new Set(devices.saved.map(d => d.mac));
  const unregistered = (devices.live||[]).filter(l => !savedMacs.has(l.mac));

  return (
    <div className="main" style={{flexDirection:"column",gap:12}}>

      {/* MAC randomization warning */}
      <div className="panel">
        <div className="ph">◈ Device Access — Management Network Pinhole</div>
        <div className="pb">
          <div style={{fontSize:12,color:"var(--dm)",marginBottom:12,lineHeight:1.7}}>
            Devices listed here can reach the switch manager UI directly from their normal VLAN
            without needing to be on VLAN 99 or connected to VPN. The switch enforces access
            via an ACL pinhole. TOTP still gates any changes.
          </div>
          <div style={{background:"rgba(255,234,0,.06)",border:"1px solid rgba(255,234,0,.2)",borderRadius:4,padding:"10px 14px",marginBottom:12}}>
            <div style={{color:"var(--warn)",fontSize:11,fontWeight:700,letterSpacing:1,textTransform:"uppercase",marginBottom:6}}>
              ⚠ MAC Address Randomization
            </div>
            <div style={{fontSize:11,color:"var(--tx)",marginBottom:8,lineHeight:1.6}}>
              Modern phones and laptops use random MAC addresses per network by default.
              This breaks DHCP reservations and makes stable IP assignment impossible.
              Disable it on each device before adding it here.
            </div>
            <div style={{display:"flex",gap:6,flexWrap:"wrap"}}>
              {Object.entries({iOS:"ios",Android:"android",macOS:"macos",Windows:"windows"}).map(([label,key])=>(
                <button key={key} className="btn bg" style={{padding:"3px 10px",fontSize:10}}
                  onClick={()=>setShowMacTip(showMacTip===key?null:key)}>
                  {label}
                </button>
              ))}
            </div>
            {showMacTip && (
              <div style={{marginTop:8,background:"var(--bg)",borderRadius:3,padding:"8px 10px",fontFamily:"var(--mono)",fontSize:11,color:"var(--tx)",whiteSpace:"pre-line"}}>
                {MAC_TIPS[showMacTip]}
              </div>
            )}
          </div>
          <button className="btn bp" onClick={openAdd}>+ Add Device</button>
          <button className="btn bg" style={{marginLeft:8}} onClick={load}>↻ Refresh</button>
        </div>
      </div>

      {/* Saved devices */}
      <div className="panel">
        <div className="ph">◈ Registered Devices ({devices.saved.length})</div>
        <div className="pb">
          {devices.saved.length === 0 && <div className="empty">No devices registered yet.</div>}
          {devices.saved.map(d => (
            <div key={d.mac} style={{background:"var(--bg)",border:"1px solid var(--b2)",borderRadius:4,padding:"10px 12px",marginBottom:8}}>
              <div style={{display:"flex",alignItems:"center",gap:10,flexWrap:"wrap"}}>
                <div style={{flex:1}}>
                  <div style={{fontWeight:700,marginBottom:2}}>{d.name}</div>
                  <div style={{fontFamily:"var(--mono)",fontSize:11,color:"var(--dm)"}}>
                    {d.mac} · {d.ip} · VLAN {d.vlan}
                  </div>
                  {d.notes && <div style={{fontSize:11,color:"var(--dm)",marginTop:2}}>{d.notes}</div>}
                </div>
                <div style={{display:"flex",gap:6,flexWrap:"wrap"}}>
                  {d.static_ip && (
                    <button className="btn bg" style={{fontSize:10,padding:"3px 8px"}}
                      onClick={() => pushReservation(d)}>
                      Push DHCP Reservation
                    </button>
                  )}
                  <button
                    className={`btn ${d.management_access?"bd":"bs"}`}
                    style={{fontSize:10,padding:"3px 8px"}}
                    onClick={() => pushPinhole(d.mac, !d.management_access)}>
                    {d.management_access ? "Revoke Access" : "Grant Access"}
                  </button>
                  <button className="btn bg" style={{fontSize:10,padding:"3px 8px"}} onClick={()=>openEdit(d)}>Edit</button>
                  <button className="btn bd" style={{fontSize:10,padding:"3px 8px"}} onClick={()=>del(d.mac)}>✕</button>
                </div>
              </div>
              <div style={{display:"flex",gap:8,marginTop:6}}>
                <span className={`badge ${d.management_access?"":"" }`}
                  style={{background:d.management_access?"rgba(0,230,118,.15)":"rgba(90,96,112,.15)",
                          color:d.management_access?"var(--ok)":"var(--dm)"}}>
                  {d.management_access ? "✓ Management access" : "✗ No management access"}
                </span>
                <span className="badge" style={{background:d.static_ip?"rgba(0,229,255,.12)":"rgba(90,96,112,.12)",
                                               color:d.static_ip?"var(--ac)":"var(--dm)"}}>
                  {d.static_ip ? "Static IP reserved" : "Dynamic IP"}
                </span>
              </div>
            </div>
          ))}
        </div>
      </div>

      {/* Live DHCP leases */}
      {unregistered.length > 0 && (
        <div className="panel">
          <div className="ph">◈ Live DHCP Leases — Unregistered ({unregistered.length})</div>
          <div className="pb">
            <div style={{fontSize:11,color:"var(--dm)",marginBottom:10}}>
              These devices are on the network but not registered. Click to add them.
            </div>
            {unregistered.map(l => (
              <div key={l.mac} style={{display:"flex",alignItems:"center",gap:10,padding:"8px 0",borderBottom:"1px solid var(--b1)"}}>
                <div style={{flex:1,fontFamily:"var(--mono)",fontSize:11}}>
                  <span style={{color:"var(--tx)"}}>{l.ip}</span>
                  <span style={{color:"var(--dm)",margin:"0 8px"}}>·</span>
                  <span style={{color:"var(--dm)"}}>{l.mac}</span>
                  {l.hostname && l.hostname !== "unknown" && (
                    <span style={{color:"var(--ac)",marginLeft:8}}>{l.hostname}</span>
                  )}
                </div>
                <button className="btn bg" style={{fontSize:10,padding:"3px 8px"}} onClick={()=>adoptLive(l)}>
                  + Register
                </button>
              </div>
            ))}
          </div>
        </div>
      )}

      {/* Push result */}
      {pushResult && (
        <div className="panel">
          <div className={`ph ${pushResult.success?"":"" }`}
            style={{color:pushResult.success?"var(--ok)":"var(--err)"}}>
            {pushResult.success ? "✓ Push successful — config saved" : `✗ Push failed: ${pushResult.error}`}
            <button className="btn bg" style={{marginLeft:"auto",padding:"2px 8px",fontSize:10}}
              onClick={()=>setPushResult(null)}>✕</button>
          </div>
        </div>
      )}

      {/* Add/Edit form modal */}
      {showForm && (
        <div className="modal-bg" onClick={()=>setShowForm(false)}>
          <div className="modal" style={{width:440,textAlign:"left"}} onClick={e=>e.stopPropagation()}>
            <h2 style={{marginBottom:16}}>{editDevice?"EDIT DEVICE":"ADD DEVICE"}</h2>
            <div className="field"><label>Device Name</label>
              <input value={form.name} onChange={e=>setForm(f=>({...f,name:e.target.value}))} placeholder="e.g. Dev Laptop, iPhone"/></div>
            <div className="field"><label>MAC Address</label>
              <input value={form.mac} onChange={e=>setForm(f=>({...f,mac:e.target.value}))}
                placeholder="aa:bb:cc:dd:ee:ff" style={{fontFamily:"var(--mono)"}}/></div>
            <div style={{display:"grid",gridTemplateColumns:"1fr 1fr",gap:8}}>
              <div className="field"><label>IP Address</label>
                <input value={form.ip} onChange={e=>setForm(f=>({...f,ip:e.target.value}))}
                  placeholder="192.168.10.50" style={{fontFamily:"var(--mono)"}}/></div>
              <div className="field"><label>VLAN</label>
                <input type="number" value={form.vlan} onChange={e=>setForm(f=>({...f,vlan:+e.target.value}))}/></div>
            </div>
            <div className="field"><label>Notes (optional)</label>
              <input value={form.notes} onChange={e=>setForm(f=>({...f,notes:e.target.value}))} placeholder="e.g. Main dev laptop"/></div>
            <div style={{display:"flex",gap:16,marginBottom:14}}>
              <label style={{display:"flex",alignItems:"center",gap:6,fontSize:12,cursor:"pointer"}}>
                <input type="checkbox" checked={form.static_ip}
                  onChange={e=>setForm(f=>({...f,static_ip:e.target.checked}))}/>
                Reserve static IP (DHCP binding)
              </label>
              <label style={{display:"flex",alignItems:"center",gap:6,fontSize:12,cursor:"pointer"}}>
                <input type="checkbox" checked={form.management_access}
                  onChange={e=>setForm(f=>({...f,management_access:e.target.checked}))}/>
                Grant management access
              </label>
            </div>
            <div style={{display:"flex",gap:8,justifyContent:"flex-end"}}>
              <button className="btn bg" onClick={()=>setShowForm(false)}>Cancel</button>
              <button className="btn bp" onClick={save}>Save Device</button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}

// ══════════════════════════════════════════════════════════════════════════════
// WIREGUARD TAB
// ══════════════════════════════════════════════════════════════════════════════

function QRModal({ config, name, onClose }) {
  // Render QR using a simple API since we can't use native qrencode in browser
  const [qrUrl, setQrUrl] = useState('');
  useEffect(() => {
    // Use Google Charts QR API (works offline-ish, data URI approach)
    const encoded = encodeURIComponent(config);
    setQrUrl(`https://api.qrserver.com/v1/create-qr-code/?size=300x300&data=${encoded}`);
  }, [config]);

  return (
    <div className="modal-bg" onClick={onClose}>
      <div className="modal" onClick={e=>e.stopPropagation()}>
        <h2>◈ {name.toUpperCase()}</h2>
        <p style={{marginBottom:12}}>Scan with WireGuard app<br/>
          <span style={{fontSize:10,color:"var(--dm)"}}>iOS App Store / Android Play Store: search "WireGuard"<br/>
          Desktop: wireguard.com/install</span>
        </p>
        {qrUrl && <img src={qrUrl} alt="WireGuard QR" style={{width:220,height:220,margin:"0 auto 12px",display:"block",borderRadius:4}}/>}
        <div style={{background:"var(--bg)",borderRadius:3,padding:8,fontFamily:"var(--mono)",fontSize:10,
                     color:"var(--dm)",textAlign:"left",whiteSpace:"pre",overflowX:"auto",
                     maxHeight:120,overflowY:"auto",marginBottom:12}}>
          {config}
        </div>
        <div style={{display:"flex",gap:8,justifyContent:"center"}}>
          <button className="btn bg" onClick={()=>{
            const a=document.createElement('a');
            a.href=URL.createObjectURL(new Blob([config],{type:'text/plain'}));
            a.download=`${name}.conf`; a.click();
          }}>Download .conf</button>
          <button className="btn bg" onClick={()=>navigator.clipboard?.writeText(config)}>Copy</button>
          <button className="btn bp" onClick={onClose}>Done</button>
        </div>
      </div>
    </div>
  );
}

// ══════════════════════════════════════════════════════════════════════════════
// DASHBOARD TAB
// ══════════════════════════════════════════════════════════════════════════════

function DashboardTab({ vlans, acls, ports, backendOk, switchOk, onNavigate }) {
  const [data, setData]       = useState(null);
  const [loading, setLoading] = useState(true);

  const load = async () => {
    if (!backendOk) return;
    setLoading(true);
    try {
      const [status, ctrld, wg, opnWg, relay, dhcp] = await Promise.allSettled([
        API("/status"),
        API("/ctrld/status"),
        API("/wireguard/status"),
        API("/opnsense/wireguard/status"),
        API("/dhcp/relay/status"),
        API("/dhcp/overview"),
      ]);
      setData({
        status:  status.value  || null,
        ctrld:   ctrld.value   || null,
        wg:      wg.value      || null,
        opnWg:   opnWg.value   || null,
        relay:   relay.value   || null,
        dhcp:    dhcp.value    || null,
      });
    } catch(e) { /* partial data still rendered */ }
    setLoading(false);
  };

  useEffect(() => { load(); }, [backendOk]);

  // ── Derived health values ───────────────────────────────────────────
  const opnConnected   = data?.opnWg?.opnsense_configured;
  const ctrldRunning   = data?.ctrld?.running;
  const ctrldMode      = data?.ctrld?.mode;
  const ctrldProfiles  = data?.ctrld?.vlan_profiles || [];
  const relayVlans     = data?.relay?.vlans || {};           // {10: "192.168.99.1", ...}
  const allLeases      = data?.dhcp?.leases || [];

  // Device count per VLAN (infer from IP third octet)
  const devicesByVlan = {};
  allLeases.forEach(l => {
    const vid = l.ip ? parseInt(l.ip.split('.')[2], 10) : null;
    if (vid) devicesByVlan[vid] = (devicesByVlan[vid] || 0) + 1;
  });

  // WireGuard: prefer OPNsense if configured + plugin installed
  const opnWgReady   = data?.opnWg?.plugin_installed && data?.opnWg?.server;
  const localWgReady = data?.wg?.running;
  const wgReady      = opnWgReady || localWgReady;
  const wgLabel      = opnWgReady ? `OPNsense · ${(data.opnWg.peers||[]).length} peer(s)`
                     : localWgReady ? `Local · ${(data.wg.peers||[]).length} peer(s)`
                     : "not configured";

  // Setup checklist items
  const assignedPorts = ports.filter(p => p.mode !== "disabled" && (p.accessVlan !== 1 || p.mode === "trunk")).length;
  const checklist = [
    { label:"Switch connected",       done: switchOk,                       tab:"ports",   detail: switchOk ? "online" : "check SSH key / IP" },
    { label:"VLANs defined",          done: vlans.length > 1,               tab:"vlans",   detail: `${vlans.length} VLAN(s)` },
    { label:"Ports assigned",         done: assignedPorts > 0,              tab:"ports",   detail: `${assignedPorts} port(s) configured` },
    { label:"ACL policies",           done: acls.length > 0,                tab:"acls",    detail: acls.length > 0 ? `${acls.length} ACL(s)` : "none applied yet" },
    { label:"OPNsense connected",     done: !!opnConnected,                 tab:"dhcp",    detail: opnConnected ? "connected" : "add API key in DHCP tab" },
    { label:"DHCP relay",             done: Object.keys(relayVlans).length > 0, tab:"dhcp", detail: Object.keys(relayVlans).length > 0 ? `${Object.keys(relayVlans).length} VLAN(s) relaying` : "not configured" },
    { label:"DNS filtering (ctrld)",  done: !!ctrldRunning,                 tab:"dns",     detail: ctrldRunning ? `${ctrldMode} mode` : "not configured" },
    { label:"WireGuard VPN",          done: wgReady,                        tab:"vpn",     detail: wgLabel },
  ];

  const done  = checklist.filter(c => c.done).length;
  const total = checklist.length;
  const pct   = Math.round((done / total) * 100);

  // Per-VLAN health row
  const vlanHealth = vlans.filter(v => v.id !== 99).map(v => {
    const hasDns   = ctrldProfiles.some(p => p.vlan_id === v.id);
    const hasRelay = !!relayVlans[v.id];
    const hasAcl   = acls.some(a => a.applyVlan === v.id);
    const devices  = devicesByVlan[v.id] || 0;
    const score    = (hasDns?1:0) + (hasRelay?1:0) + (hasAcl?1:0);
    return { ...v, hasDns, hasRelay, hasAcl, devices, score };
  });

  const Dot = ({ on, warn }) => (
    <span style={{
      display:"inline-block",width:7,height:7,borderRadius:"50%",marginRight:4,
      background: on ? "var(--ok)" : warn ? "var(--warn)" : "var(--b2)",
      verticalAlign:"middle",
    }}/>
  );

  const ServiceCard = ({ label, ok, detail, tab, icon }) => (
    <div onClick={() => onNavigate(tab)} style={{
      flex:"1 1 160px",background:"var(--bg2)",border:`1px solid ${ok?"var(--ok)":"var(--b2)"}`,
      borderRadius:6,padding:"12px 14px",cursor:"pointer",transition:"border-color .15s",
      minWidth:140,
    }}>
      <div style={{display:"flex",alignItems:"center",gap:6,marginBottom:6}}>
        <span style={{fontSize:14}}>{icon}</span>
        <span style={{fontSize:11,fontWeight:700,color: ok ? "var(--ok)" : "var(--dm)"}}>{label}</span>
        <span style={{marginLeft:"auto",width:8,height:8,borderRadius:"50%",
                      background: ok ? "var(--ok)" : "var(--b2)"}}/>
      </div>
      <div style={{fontSize:10,color:"var(--dm)",fontFamily:"var(--mono)"}}>{detail || "—"}</div>
    </div>
  );

  if (!backendOk) return (
    <div className="main" style={{flexDirection:"column",gap:12}}>
      <div className="panel"><div className="pb" style={{color:"var(--err)",fontSize:12}}>
        Backend offline — check that the switch manager service is running.
      </div></div>
    </div>
  );

  return (
    <div className="main" style={{flexDirection:"column",gap:14}}>

      {/* ── Service status row ──────────────────────────────────── */}
      <div style={{display:"flex",flexWrap:"wrap",gap:10}}>
        <ServiceCard icon="⬡" label="Switch"      ok={switchOk}     detail={switchOk?"connected · polling":"offline"} tab="ports"/>
        <ServiceCard icon="◈" label="OPNsense"    ok={!!opnConnected} detail={opnConnected?"connected":"not connected"} tab="dhcp"/>
        <ServiceCard icon="◈" label="DNS / ctrld" ok={!!ctrldRunning} detail={ctrldRunning?`running · ${ctrldMode}`:"not running"} tab="dns"/>
        <ServiceCard icon="◈" label="WireGuard"   ok={wgReady}       detail={wgLabel} tab="vpn"/>
      </div>

      {/* ── Setup checklist ─────────────────────────────────────── */}
      <div className="panel">
        <div className="ph" style={{display:"flex",alignItems:"center",gap:10}}>
          ◈ Setup Progress
          <div style={{flex:1,height:4,background:"var(--b1)",borderRadius:2,marginLeft:8,overflow:"hidden"}}>
            <div style={{width:`${pct}%`,height:"100%",background:pct===100?"var(--ok)":"var(--ac)",transition:"width .4s"}}/>
          </div>
          <span style={{fontSize:11,fontFamily:"var(--mono)",color:"var(--dm)",whiteSpace:"nowrap"}}>
            {done}/{total}
          </span>
        </div>
        <div className="pb" style={{display:"flex",flexDirection:"column",gap:6}}>
          {checklist.map((c,i) => (
            <div key={i} style={{
              display:"flex",alignItems:"center",gap:10,padding:"7px 10px",
              borderRadius:5,cursor:c.done?"default":"pointer",
              background: c.done ? "transparent" : "rgba(255,234,0,.04)",
              border:`1px solid ${c.done?"transparent":"rgba(255,234,0,.12)"}`,
            }} onClick={() => !c.done && onNavigate(c.tab)}>
              <span style={{
                width:18,height:18,borderRadius:"50%",display:"flex",alignItems:"center",
                justifyContent:"center",fontSize:11,flexShrink:0,
                background: c.done ? "var(--ok)" : "var(--b2)",
                color: c.done ? "#000" : "var(--dm)",fontWeight:700,
              }}>{c.done ? "✓" : (i+1)}</span>
              <span style={{flex:1,fontSize:12,color:c.done?"var(--dm)":"var(--tx)",fontWeight:c.done?400:600}}>
                {c.label}
              </span>
              <span style={{fontSize:11,color:"var(--dm)",fontFamily:"var(--mono)"}}>{c.detail}</span>
              {!c.done && (
                <span style={{fontSize:10,color:"var(--ac)",fontFamily:"var(--mono)",marginLeft:4}}>
                  → {c.tab}
                </span>
              )}
            </div>
          ))}
        </div>
      </div>

      {/* ── Per-VLAN health grid ─────────────────────────────────── */}
      <div className="panel">
        <div className="ph">◈ VLAN Health</div>
        <div className="pb" style={{display:"grid",gridTemplateColumns:"repeat(auto-fill,minmax(260px,1fr))",gap:10}}>
          {loading && <div style={{color:"var(--dm)",fontSize:12,gridColumn:"1/-1"}}>Loading…</div>}
          {vlanHealth.map(v => (
            <div key={v.id} style={{
              border:`1px solid ${v.color}44`,borderRadius:6,
              padding:"10px 12px",background:`${v.color}08`,
            }}>
              <div style={{display:"flex",alignItems:"center",gap:8,marginBottom:8}}>
                <div style={{width:10,height:10,borderRadius:"50%",background:v.color,flexShrink:0}}/>
                <span style={{fontWeight:700,fontSize:12,color:v.color}}>VLAN {v.id}</span>
                <span style={{fontSize:11,color:"var(--dm)"}}>· {v.name}</span>
                <span style={{
                  marginLeft:"auto",fontFamily:"var(--mono)",fontSize:10,
                  color: v.devices>0 ? "var(--ok)" : "var(--dm)",
                }}>{v.devices} device{v.devices!==1?"s":""}</span>
              </div>
              <div style={{display:"flex",gap:12,marginBottom:10,fontSize:11}}>
                <span><Dot on={v.hasRelay}/> Relay</span>
                <span><Dot on={v.hasDns}/> DNS</span>
                <span><Dot on={v.hasAcl}/> ACL</span>
              </div>
              {/* Missing items nudge */}
              {v.score < 3 && (
                <div style={{fontSize:10,color:"var(--dm)",borderTop:"1px solid var(--b1)",paddingTop:6,lineHeight:1.8}}>
                  {!v.hasRelay && <span onClick={()=>onNavigate("dhcp")}
                    style={{cursor:"pointer",color:"var(--warn)",marginRight:8}}>+ relay</span>}
                  {!v.hasDns && <span onClick={()=>onNavigate("dns")}
                    style={{cursor:"pointer",color:"var(--warn)",marginRight:8}}>+ DNS profile</span>}
                  {!v.hasAcl && <span onClick={()=>onNavigate("acls")}
                    style={{cursor:"pointer",color:"var(--warn)"}}>+ ACL policy</span>}
                </div>
              )}
            </div>
          ))}
        </div>
      </div>

      {/* ── Quick links ──────────────────────────────────────────── */}
      <div className="panel">
        <div className="ph">◈ Quick Access</div>
        <div className="pb" style={{display:"flex",flexWrap:"wrap",gap:8}}>
          {[
            {label:"Configure Ports",     tab:"ports"},
            {label:"Manage VLANs",        tab:"vlans"},
            {label:"Apply ACL Templates", tab:"acls"},
            {label:"Review & Push",       tab:"cli"},
            {label:"DHCP / OPNsense",     tab:"dhcp"},
            {label:"DNS Filtering",       tab:"dns"},
            {label:"WireGuard VPN",       tab:"vpn"},
            {label:"Device Access",       tab:"devices"},
          ].map(l=>(
            <button key={l.tab} className="btn bg" style={{fontSize:11,padding:"5px 12px"}}
              onClick={()=>onNavigate(l.tab)}>{l.label}</button>
          ))}
          <button className="btn bg" style={{fontSize:11,padding:"5px 12px",marginLeft:"auto"}}
            onClick={load}>↻ Refresh</button>
        </div>
      </div>

    </div>
  );
}

function WireGuardTab({ session, onNeedAuth, backendOk, vlans = [] }) {
  const [status, setStatus]   = useState(null);
  const [clients, setClients] = useState([]);
  const [newName, setNewName] = useState('');
  const [adding, setAdding]   = useState(false);
  const [qrModal, setQrModal] = useState(null); // { config, name }
  const [error, setError]     = useState('');

  // ── OPNsense WireGuard state ────────────────────────────────────
  const [opnWg, setOpnWg]               = useState(null);   // status response
  const [opnLoading, setOpnLoading]     = useState(false);
  const [opnError, setOpnError]         = useState('');
  const [opnSetup, setOpnSetup]         = useState({
    server_name: 'switch-mgmt-vpn', listen_port: 51820,
    tunnel_subnet: '10.99.2.0/24',  public_endpoint: '',
  });
  const [opnPeerName, setOpnPeerName]   = useState('');
  const [opnVlans, setOpnVlans]         = useState([]);     // checked VLAN IDs
  const [opnAdding, setOpnAdding]       = useState(false);
  const [opnQr, setOpnQr]               = useState(null);   // { config, name }

  const load = async () => {
    try {
      const [s, c] = await Promise.all([API("/wireguard/status"), API("/wireguard/clients")]);
      setStatus(s); setClients(c.clients||[]);
    } catch(e) { setError(e.message); }
  };

  useEffect(() => { if (backendOk) load(); }, [backendOk]);

  const addClient = async () => {
    if (!newName.trim()) return;
    if (!session) { onNeedAuth(); return; }
    setAdding(true); setError('');
    try {
      const r = await API("/wireguard/add-client", {
        method:"POST", body:{ token: session.token, name: newName.trim() }
      });
      setQrModal({ config: r.config, name: r.name });
      setNewName('');
      await load();
    } catch(e) { setError(e.message); }
    setAdding(false);
  };

  const showQR = async (name) => {
    try {
      const r = await API(`/wireguard/client-qr/${name}`);
      setQrModal({ config: r.config, name: r.name });
    } catch(e) { setError(e.message); }
  };

  const revoke = async (name) => {
    if (!session) { onNeedAuth(); return; }
    if (!confirm(`Revoke access for "${name}"? They will be disconnected immediately.`)) return;
    try {
      await API("/wireguard/revoke-client", { method:"POST", body:{ token: session.token, name } });
      await load();
    } catch(e) { setError(e.message); }
  };

  const isRunning = status?.running;

  // ── OPNsense WireGuard handlers ──────────────────────────────────
  const loadOpnWg = async () => {
    setOpnLoading(true); setOpnError('');
    try { setOpnWg(await API("/opnsense/wireguard/status")); }
    catch(e) { setOpnError(e.message); }
    setOpnLoading(false);
  };

  useEffect(() => { if (backendOk) loadOpnWg(); }, [backendOk]);

  const opnSetupServer = async () => {
    if (!session) { onNeedAuth(); return; }
    setOpnLoading(true); setOpnError('');
    try {
      await API("/opnsense/wireguard/setup-server", {
        method:"POST", body:{ token: session.token, ...opnSetup }
      });
      await loadOpnWg();
    } catch(e) { setOpnError(e.message); }
    setOpnLoading(false);
  };

  const opnDeleteServer = async () => {
    if (!session) { onNeedAuth(); return; }
    if (!confirm("Remove the WireGuard server from OPNsense? All peers will be disconnected.")) return;
    setOpnLoading(true); setOpnError('');
    try {
      await API(`/opnsense/wireguard/server?token=${session.token}`, { method:"DELETE" });
      await loadOpnWg();
    } catch(e) { setOpnError(e.message); }
    setOpnLoading(false);
  };

  const opnToggleVlan = (vid) => {
    setOpnVlans(prev => prev.includes(vid) ? prev.filter(v=>v!==vid) : [...prev, vid]);
  };

  const opnAddPeer = async () => {
    if (!opnPeerName.trim()) return;
    if (opnVlans.length === 0) { setOpnError("Select at least one VLAN for this peer."); return; }
    if (!session) { onNeedAuth(); return; }
    setOpnAdding(true); setOpnError('');
    // Build vlan_subnets map from the vlans prop
    const vlan_subnets = {};
    vlans.forEach(v => { vlan_subnets[v.id] = `192.168.${v.id}.0/24`; });
    try {
      const r = await API("/opnsense/wireguard/add-peer", {
        method:"POST",
        body:{ token: session.token, name: opnPeerName.trim(),
               allowed_vlans: opnVlans, vlan_subnets }
      });
      setOpnQr({ config: r.config, name: r.name });
      setOpnPeerName(''); setOpnVlans([]);
      await loadOpnWg();
    } catch(e) { setOpnError(e.message); }
    setOpnAdding(false);
  };

  const opnRevokePeer = async (uuid, name) => {
    if (!session) { onNeedAuth(); return; }
    if (!confirm(`Revoke VPN access for "${name}"?`)) return;
    setOpnError('');
    try {
      await API(`/opnsense/wireguard/peer/${uuid}?token=${session.token}`, { method:"DELETE" });
      await loadOpnWg();
    } catch(e) { setOpnError(e.message); }
  };

  const opnShowConf = async (name) => {
    try {
      const r = await API(`/opnsense/wireguard/peer-config/${name}`);
      setOpnQr({ config: r.config, name: r.name });
    } catch(e) { setOpnError(e.message); }
  };

  // Pre-select servers VLAN when OPNsense WG server becomes available
  useEffect(() => {
    if (opnWg?.server && opnVlans.length === 0) {
      const serversVlan = vlans.find(v =>
        v.name?.toLowerCase().includes("server") && v.id !== 99
      );
      if (serversVlan) setOpnVlans([serversVlan.id]);
    }
  }, [opnWg?.server]);

  const opnAvailable = opnWg?.opnsense_configured && opnWg?.plugin_installed;

  return (
    <div className="main" style={{flexDirection:"column",gap:12}}>

      {/* ── Recommendation banner when OPNsense WG is available ──── */}
      {opnAvailable && (
        <div style={{
          background:"rgba(0,229,255,.06)",border:"1px solid rgba(0,229,255,.25)",
          borderRadius:6,padding:"12px 16px",display:"flex",gap:12,alignItems:"flex-start",
        }}>
          <div style={{fontSize:18,lineHeight:1,color:"var(--ac)"}}>◈</div>
          <div style={{flex:1}}>
            <div style={{fontWeight:700,color:"var(--ac)",marginBottom:4}}>
              OPNsense WireGuard available — recommended
            </div>
            <div style={{fontSize:12,color:"var(--dm)",lineHeight:1.7}}>
              Your OPNsense has the WireGuard plugin. Running VPN on the router is
              better than here: it stays on when this PC is off, your firewall and VPN
              live in the same place, and every VLAN can be reached remotely.
              The local option below still works as a backup.
            </div>
          </div>
        </div>
      )}

      {/* ── OPNsense WG first when available ─────────────────────── */}
      {opnAvailable && (
        <OPNsenseWGSection
          opnWg={opnWg} opnLoading={opnLoading} opnError={opnError}
          opnSetup={opnSetup} setOpnSetup={setOpnSetup}
          opnPeerName={opnPeerName} setOpnPeerName={setOpnPeerName}
          opnVlans={opnVlans} opnAdding={opnAdding}
          session={session} onNeedAuth={onNeedAuth} vlans={vlans}
          onToggleVlan={opnToggleVlan} onSetupServer={opnSetupServer}
          onDeleteServer={opnDeleteServer} onAddPeer={opnAddPeer}
          onRevokePeer={opnRevokePeer} onShowConf={opnShowConf} onRefresh={loadOpnWg}
        />
      )}

      {/* ── Local WireGuard ──────────────────────────────────────── */}
      <div className="panel">
        <div className="ph">
          {opnAvailable ? "◈ Local WireGuard — backup / this machine only" : "◈ WireGuard VPN"}
          <span style={{marginLeft:"auto",fontFamily:"var(--mono)",fontSize:10,
                        color:isRunning?"var(--ok)":"var(--err)"}}>
            {isRunning ? "● Running" : "○ Not running"}
          </span>
        </div>
        <div className="pb">
          {opnAvailable ? (
            <div style={{fontSize:12,color:"var(--dm)",lineHeight:1.7,marginBottom:12}}>
              Run WireGuard on this management PC instead of OPNsense.
              Use this as a backup when OPNsense is being reconfigured, or if you
              prefer not to touch the router. Clients can only reach VLAN 99
              (management network) from here — they cannot reach other VLANs
              unless this PC also routes that traffic.
            </div>
          ) : (
            <div style={{fontSize:12,color:"var(--dm)",lineHeight:1.7,marginBottom:12}}>
              WireGuard lets you connect from anywhere — coffee shop, hotel, cellular —
              and reach this switch manager as if you were on VLAN 99.
              Each device gets its own key; revoking a key disconnects it immediately.
              <br/><br/>
              <span style={{color:"var(--warn)"}}>
                Tip: Connect OPNsense in the DHCP tab to unlock router-level WireGuard —
                always on, handles all VLANs, no dependency on this machine.
              </span>
            </div>
          )}
          {!isRunning && (
            <div style={{background:"rgba(255,23,68,.07)",border:"1px solid rgba(255,23,68,.2)",
                         borderRadius:4,padding:"10px 14px",marginBottom:12,fontSize:11,color:"var(--err)"}}>
              WireGuard is not running on this machine. Run setup again and choose the WireGuard option,
              or run: <span style={{fontFamily:"var(--mono)"}}>sudo systemctl start wg-quick@wg0</span>
            </div>
          )}
          {error && <div style={{color:"var(--err)",fontSize:11,marginBottom:10}}>{error}</div>}
        </div>
      </div>

      {/* Connected peers */}
      {isRunning && status?.peers?.length > 0 && (
        <div className="panel">
          <div className="ph">◈ Local WG — Connected Peers ({status.peers.length})</div>
          <div className="pb">
            {status.peers.map((p,i) => (
              <div key={i} style={{padding:"8px 0",borderBottom:"1px solid var(--b1)",
                                   display:"flex",alignItems:"center",gap:12}}>
                <div style={{flex:1}}>
                  <div style={{fontWeight:700,marginBottom:2}}>{p.name}</div>
                  <div style={{fontFamily:"var(--mono)",fontSize:10,color:"var(--dm)"}}>
                    {p.allowed_ips} · {p.endpoint||"not connected"}
                  </div>
                  {p.last_handshake && (
                    <div style={{fontSize:10,color:"var(--dm)"}}>Last seen: {p.last_handshake}</div>
                  )}
                  {p.transfer && (
                    <div style={{fontSize:10,color:"var(--dm)"}}>Transfer: {p.transfer}</div>
                  )}
                </div>
                <div style={{width:8,height:8,borderRadius:"50%",
                             background:p.last_handshake&&!p.last_handshake.includes("never")?"var(--ok)":"var(--dm)"}}/>
              </div>
            ))}
          </div>
        </div>
      )}

      {/* Client management */}
      <div className="panel">
        <div className="ph">◈ Local WG — Clients</div>
        <div className="pb">
          {clients.length === 0 && <div className="empty" style={{padding:"16px 0"}}>No clients configured yet.</div>}
          {clients.map(c => (
            <div key={c.name} style={{display:"flex",alignItems:"center",gap:8,
                                      padding:"8px 0",borderBottom:"1px solid var(--b1)"}}>
              <span style={{flex:1,fontWeight:600}}>{c.name}</span>
              <button className="btn bg" style={{fontSize:10,padding:"3px 8px"}} onClick={()=>showQR(c.name)}>
                QR / .conf
              </button>
              <button className="btn bd" style={{fontSize:10,padding:"3px 8px"}} onClick={()=>revoke(c.name)}>
                Revoke
              </button>
            </div>
          ))}

          <div style={{marginTop:14,paddingTop:12,borderTop:"1px solid var(--b1)",display:"flex",gap:8,alignItems:"flex-end"}}>
            <div className="field" style={{margin:0,flex:1}}>
              <label>Add New Client</label>
              <input value={newName} onChange={e=>setNewName(e.target.value)}
                onKeyDown={e=>e.key==="Enter"&&addClient()}
                placeholder="e.g. laptop, phone, tablet"/>
            </div>
            <button className="btn bp" onClick={addClient} disabled={!newName.trim()||adding||!isRunning}>
              {adding?"Adding...":"Add Client"}
            </button>
          </div>
          {!session && (
            <div style={{fontSize:11,color:"var(--dm)",marginTop:8}}>
              <button className="btn bg" style={{fontSize:10,padding:"3px 8px",marginRight:6}}
                onClick={onNeedAuth}>Authenticate</button>
              to add or revoke clients
            </div>
          )}
        </div>
      </div>

      {/* SSH tunnel fallback */}
      <div className="panel">
        <div className="ph">◈ SSH Tunnel — Emergency Fallback</div>
        <div className="pb">
          <div style={{fontSize:12,color:"var(--dm)",lineHeight:1.7,marginBottom:8}}>
            If WireGuard is down or misconfigured, SSH port forwarding reaches the
            switch manager in one command — no daemon, no keys to manage.
          </div>
          <div style={{background:"#060809",borderRadius:4,padding:"10px 14px",
                       fontFamily:"var(--mono)",fontSize:12,color:"#a0b0c0",marginBottom:8}}>
            ssh -L 8765:localhost:8765 user@your-management-computer-ip
          </div>
          <div style={{fontSize:11,color:"var(--dm)"}}>
            Then open <span style={{color:"var(--ac)",fontFamily:"var(--mono)"}}>http://localhost:8765</span>.
            Requires SSH accessible from outside (key auth only — consider fail2ban).
          </div>
        </div>
      </div>

      {qrModal && <QRModal config={qrModal.config} name={qrModal.name} onClose={()=>setQrModal(null)}/>}

      {/* OPNsense WG shown below local when not yet available (nudge to set up) */}
      {!opnAvailable && (
        <OPNsenseWGSection
          opnWg={opnWg}
          opnLoading={opnLoading}
          opnError={opnError}
          opnSetup={opnSetup}
          setOpnSetup={setOpnSetup}
          opnPeerName={opnPeerName}
          setOpnPeerName={setOpnPeerName}
          opnVlans={opnVlans}
          opnAdding={opnAdding}
          session={session}
          onNeedAuth={onNeedAuth}
          vlans={vlans}
          onToggleVlan={opnToggleVlan}
          onSetupServer={opnSetupServer}
          onDeleteServer={opnDeleteServer}
          onAddPeer={opnAddPeer}
          onRevokePeer={opnRevokePeer}
          onShowConf={opnShowConf}
          onRefresh={loadOpnWg}
        />
      )}

      {opnQr && <QRModal config={opnQr.config} name={opnQr.name} onClose={()=>setOpnQr(null)}/>}
    </div>
  );
}

// ── OPNsense WireGuard section (separate component for readability) ───────────
function OPNsenseWGSection({
  opnWg, opnLoading, opnError, opnSetup, setOpnSetup,
  opnPeerName, setOpnPeerName, opnVlans, opnAdding,
  session, onNeedAuth, vlans,
  onToggleVlan, onSetupServer, onDeleteServer,
  onAddPeer, onRevokePeer, onShowConf, onRefresh,
}) {
  const panelHeader = (
    <div className="ph" style={{display:"flex",alignItems:"center",gap:8}}>
      ◈ OPNsense WireGuard — Router-Level VPN
      <span style={{marginLeft:"auto",fontSize:10,fontFamily:"var(--mono)",
                    color:"var(--dm)",cursor:"pointer"}} onClick={onRefresh}>
        {opnLoading ? "loading…" : "↻ refresh"}
      </span>
    </div>
  );

  // ── OPNsense not connected ──────────────────────────────────────
  if (!opnWg || !opnWg.opnsense_configured) {
    return (
      <div className="panel">
        {panelHeader}
        <div className="pb" style={{color:"var(--dm)",fontSize:12,lineHeight:1.8}}>
          <div style={{marginBottom:8}}>
            Move WireGuard off your management computer and onto OPNsense.
            Each peer can be restricted to specific VLANs — e.g. a phone
            gets access to VLAN 10 only, while a laptop gets VLAN 10 + 20.
          </div>
          <div style={{background:"rgba(255,234,0,.07)",border:"1px solid rgba(255,234,0,.2)",
                       borderRadius:4,padding:"10px 14px",fontSize:11,color:"var(--warn)"}}>
            OPNsense is not connected. Go to the <strong>DHCP tab</strong> and
            add your OPNsense API credentials first.
          </div>
        </div>
      </div>
    );
  }

  // ── Plugin not installed ────────────────────────────────────────
  if (!opnWg.plugin_installed) {
    return (
      <div className="panel">
        {panelHeader}
        <div className="pb">
          <div style={{background:"rgba(255,23,68,.07)",border:"1px solid rgba(255,23,68,.2)",
                       borderRadius:4,padding:"10px 14px",fontSize:11,color:"var(--err)",marginBottom:12}}>
            <strong>WireGuard plugin not installed on OPNsense.</strong>
            {opnWg.error && <div style={{marginTop:4,opacity:.7}}>{opnWg.error}</div>}
          </div>
          <div style={{fontSize:12,color:"var(--dm)",lineHeight:1.9}}>
            Install it in OPNsense:
            <ol style={{margin:"6px 0 0 16px",padding:0}}>
              <li>System → Firmware → Plugins</li>
              <li>Search <span style={{fontFamily:"var(--mono)",color:"var(--ac)"}}>wireguard</span></li>
              <li>Install <strong>os-wireguard</strong></li>
              <li>Reload this page or click refresh above</li>
            </ol>
          </div>
        </div>
      </div>
    );
  }

  const server = opnWg.server;
  const peers  = opnWg.peers || [];

  // ── Server not yet created ──────────────────────────────────────
  if (!server) {
    return (
      <div className="panel">
        {panelHeader}
        <div className="pb">
          <div style={{fontSize:12,color:"var(--dm)",lineHeight:1.7,marginBottom:14}}>
            Create a WireGuard server on OPNsense. It runs as <code>wg1</code> so it
            does not conflict with the local <code>wg0</code> on this machine.
            Peer private keys are generated here and stored only on this management PC —
            OPNsense only ever receives the public key.
          </div>

          {opnError && (
            <div style={{color:"var(--err)",fontSize:11,marginBottom:10}}>{opnError}</div>
          )}

          <div style={{display:"grid",gridTemplateColumns:"1fr 1fr",gap:10,marginBottom:14}}>
            <div className="field" style={{margin:0}}>
              <label>Server Name</label>
              <input value={opnSetup.server_name}
                onChange={e=>setOpnSetup(s=>({...s,server_name:e.target.value}))}
                placeholder="switch-mgmt-vpn"/>
            </div>
            <div className="field" style={{margin:0}}>
              <label>Listen Port</label>
              <input type="number" value={opnSetup.listen_port}
                onChange={e=>setOpnSetup(s=>({...s,listen_port:parseInt(e.target.value)||51820}))}/>
            </div>
            <div className="field" style={{margin:0}}>
              <label>Tunnel Subnet</label>
              <input value={opnSetup.tunnel_subnet}
                onChange={e=>setOpnSetup(s=>({...s,tunnel_subnet:e.target.value}))}
                placeholder="10.99.2.0/24"/>
            </div>
            <div className="field" style={{margin:0}}>
              <label>Your Public IP / DDNS</label>
              <input value={opnSetup.public_endpoint}
                onChange={e=>setOpnSetup(s=>({...s,public_endpoint:e.target.value}))}
                placeholder="home.example.com or 1.2.3.4"/>
            </div>
          </div>

          <div style={{fontSize:11,color:"var(--dm)",marginBottom:14,lineHeight:1.7}}>
            The tunnel subnet (default <span style={{fontFamily:"var(--mono)",color:"var(--ac)"}}>10.99.2.0/24</span>)
            is separate from your LAN VLANs. VPN clients get IPs from this range.
            Your public IP / DDNS is what clients connect to from the internet.
          </div>

          <div style={{display:"flex",gap:8,alignItems:"center"}}>
            {!session && (
              <button className="btn bg" style={{fontSize:11,padding:"4px 10px"}} onClick={onNeedAuth}>
                Authenticate
              </button>
            )}
            <button className="btn bp" onClick={onSetupServer}
              disabled={opnLoading || !session || !opnSetup.server_name}>
              {opnLoading ? "Creating…" : "Create Server on OPNsense"}
            </button>
          </div>
        </div>
      </div>
    );
  }

  // ── Server active — show peers and add-peer form ────────────────
  const tunnelNet = opnSetup.tunnel_subnet || "10.99.2.0/24";

  // Determine which VLANs have firewall rules to show
  const allUsedVlans = [...new Set(peers.flatMap(p => p.allowed_vlans || []))];

  return (
    <div style={{display:"flex",flexDirection:"column",gap:12}}>
      {/* Server status card */}
      <div className="panel">
        {panelHeader}
        <div className="pb">
          <div style={{display:"flex",alignItems:"flex-start",gap:16,flexWrap:"wrap"}}>
            <div style={{flex:1,minWidth:200}}>
              <div style={{fontWeight:700,marginBottom:6,color:"var(--ok)"}}>
                ● {server.name}
              </div>
              <div style={{fontFamily:"var(--mono)",fontSize:11,color:"var(--dm)",lineHeight:2}}>
                <span style={{color:"var(--tx)"}}>Tunnel:</span> {server.tunnel_ip}<br/>
                <span style={{color:"var(--tx)"}}>Port:</span> {server.listen_port}<br/>
                <span style={{color:"var(--tx)"}}>Endpoint:</span> {server.public_endpoint||<em>not set</em>}
              </div>
            </div>
            <div style={{flex:2,minWidth:240}}>
              <div style={{fontSize:10,color:"var(--dm)",marginBottom:4}}>Server Public Key</div>
              <div style={{fontFamily:"var(--mono)",fontSize:10,background:"var(--bg)",
                           borderRadius:4,padding:"6px 10px",wordBreak:"break-all",
                           border:"1px solid var(--b1)",color:"var(--ac)"}}>
                {server.pubkey || "— generating —"}
              </div>
            </div>
            <button className="btn bd" style={{fontSize:10,padding:"3px 10px",alignSelf:"flex-start"}}
              onClick={onDeleteServer}>
              Remove Server
            </button>
          </div>
          {opnError && (
            <div style={{color:"var(--err)",fontSize:11,marginTop:10}}>{opnError}</div>
          )}
        </div>
      </div>

      {/* Peer list */}
      <div className="panel">
        <div className="ph">◈ VPN Peers ({peers.length})</div>
        <div className="pb">
          {peers.length === 0 && (
            <div className="empty" style={{padding:"12px 0"}}>No peers yet. Add one below.</div>
          )}
          {peers.map(p => (
            <div key={p.uuid} style={{display:"flex",alignItems:"center",gap:10,
                                      padding:"8px 0",borderBottom:"1px solid var(--b1)"}}>
              <div style={{width:8,height:8,borderRadius:"50%",flexShrink:0,
                           background:p.enabled?"var(--ok)":"var(--dm)"}}/>
              <div style={{flex:1}}>
                <div style={{fontWeight:700,marginBottom:3}}>{p.name}</div>
                <div style={{fontFamily:"var(--mono)",fontSize:10,color:"var(--dm)"}}>
                  {p.tunnel_ip}
                </div>
                <div style={{display:"flex",flexWrap:"wrap",gap:4,marginTop:4}}>
                  {(p.allowed_vlans||[]).map(vid => {
                    const v = vlans.find(x=>x.id===vid)||{name:`VLAN ${vid}`,color:"var(--dm)"};
                    return (
                      <span key={vid} style={{
                        background:`${v.color}22`,color:v.color,
                        borderRadius:10,padding:"1px 7px",fontSize:10,
                        fontFamily:"var(--mono)",fontWeight:700,
                      }}>VLAN {vid} · {v.name}</span>
                    );
                  })}
                </div>
              </div>
              <button className="btn bg" style={{fontSize:10,padding:"3px 8px"}}
                onClick={()=>onShowConf(p.name)}>
                .conf / QR
              </button>
              <button className="btn bd" style={{fontSize:10,padding:"3px 8px"}}
                onClick={()=>onRevokePeer(p.uuid, p.name)}>
                Revoke
              </button>
            </div>
          ))}

          {/* Add peer form */}
          <div style={{marginTop:16,paddingTop:14,borderTop:"1px solid var(--b1)"}}>
            <div style={{fontWeight:700,marginBottom:10,fontSize:12}}>Add Peer</div>
            <div style={{display:"flex",gap:10,alignItems:"flex-start",flexWrap:"wrap"}}>
              <div className="field" style={{margin:0,flex:"0 0 180px"}}>
                <label>Peer Name</label>
                <input value={opnPeerName}
                  onChange={e=>setOpnPeerName(e.target.value)}
                  onKeyDown={e=>e.key==="Enter"&&onAddPeer()}
                  placeholder="e.g. phone, laptop"/>
              </div>
              <div style={{flex:1,minWidth:220}}>
                <label style={{display:"block",fontSize:11,color:"var(--dm)",
                               marginBottom:6,fontFamily:"var(--mono)"}}>VLAN Access</label>
                <div style={{display:"flex",flexWrap:"wrap",gap:6}}>
                  {vlans.filter(v=>v.id!==99).map(v => {
                    const on = opnVlans.includes(v.id);
                    return (
                      <div key={v.id} onClick={()=>onToggleVlan(v.id)}
                        style={{
                          cursor:"pointer",userSelect:"none",borderRadius:5,
                          padding:"5px 10px",fontSize:11,fontFamily:"var(--mono)",
                          border:`1px solid ${on?v.color:"var(--b2)"}`,
                          background:on?`${v.color}22`:"transparent",
                          color:on?v.color:"var(--dm)",fontWeight:on?700:400,
                          transition:"all .15s",
                        }}>
                        {on?"✓ ":""}{v.id} · {v.name}
                      </div>
                    );
                  })}
                </div>
              </div>
            </div>

            <div style={{marginTop:12,display:"flex",gap:8,alignItems:"center"}}>
              {!session && (
                <button className="btn bg" style={{fontSize:11,padding:"4px 10px"}}
                  onClick={onNeedAuth}>Authenticate</button>
              )}
              <button className="btn bp" onClick={onAddPeer}
                disabled={opnAdding||!opnPeerName.trim()||opnVlans.length===0||!session}>
                {opnAdding?"Adding…":"Add Peer"}
              </button>
              <span style={{fontSize:11,color:"var(--dm)"}}>
                Generates keypair here · sends only pubkey to OPNsense
              </span>
            </div>
          </div>
        </div>
      </div>

      {/* Firewall rules guidance */}
      {peers.length > 0 && (
        <div className="panel">
          <div className="ph">◈ Required OPNsense Firewall Rules</div>
          <div className="pb">
            <div style={{fontSize:12,color:"var(--dm)",lineHeight:1.7,marginBottom:10}}>
              WireGuard handles the tunnel, but OPNsense still enforces firewall rules
              between the tunnel and your VLANs. Add these rules under
              <span style={{fontFamily:"var(--mono)",color:"var(--ac)",margin:"0 4px"}}>
                Firewall → Rules → WireGuard
              </span>
              (the interface is <span style={{fontFamily:"var(--mono)",color:"var(--ac)"}}>wg1</span>
              if this is instance 1):
            </div>
            <div style={{background:"#060809",borderRadius:4,padding:"10px 14px",
                         fontFamily:"var(--mono)",fontSize:11,color:"#a0b0c0",lineHeight:2}}>
              {/* One rule per unique VLAN across all peers */}
              {[...new Set(peers.flatMap(p=>p.allowed_vlans||[]))].sort((a,b)=>a-b).map(vid => {
                const v = vlans.find(x=>x.id===vid)||{name:`VLAN ${vid}`};
                return (
                  <div key={vid}>
                    <span style={{color:"#4fc"}}># Allow WireGuard → VLAN {vid} ({v.name})</span><br/>
                    <span style={{color:"#ffa"}}>pass </span>
                    <span>in  interface wg1</span><br/>
                    <span style={{paddingLeft:16}}>src: {tunnelNet}</span><br/>
                    <span style={{paddingLeft:16}}>dst: 192.168.{vid}.0/24</span><br/>
                    <br/>
                  </div>
                );
              })}
              <span style={{color:"#4fc"}}># Block everything else from the tunnel</span><br/>
              <span style={{color:"#f88"}}>block </span>
              <span>in  interface wg1  src: {tunnelNet}  dst: any</span>
            </div>
            <div style={{fontSize:11,color:"var(--dm)",marginTop:8,lineHeight:1.7}}>
              Also open UDP {server?.listen_port||51820} inbound on your WAN interface
              so peers can reach OPNsense from the internet.
            </div>
          </div>
        </div>
      )}
    </div>
  );
}

// ══════════════════════════════════════════════════════════════════════════════
// DHCP MANAGEMENT TAB
// ══════════════════════════════════════════════════════════════════════════════

// VLAN definitions — matches the network plan
const VLAN_MAP = {
  99: { name:"Management", color:"var(--dm)",  note:"Switch recovery — always local" },
  10: { name:"House",      color:"var(--ok)",  note:"Devices get hostname.lan via OPNsense DNS" },
  20: { name:"Servers",    color:"var(--ac)",  note:"Server names resolve via OPNsense Unbound" },
  30: { name:"IoT",        color:"var(--warn)",note:"Isolated devices, predictable IPs for firewall rules" },
  40: { name:"Guest",      color:"#b388ff",    note:"Internet only — printer access via firewall rule" },
  50: { name:"Cameras",    color:"#ff80ab",    note:"NVR-only access, no internet" },
};

// Infer VLAN from IP address third octet
function vlanFromIp(ip) {
  if (!ip) return null;
  const third = parseInt(ip.split('.')[2], 10);
  return isNaN(third) ? null : third;
}

function VlanBadge({ vlan }) {
  const info = VLAN_MAP[vlan];
  const color = info?.color || "var(--dm)";
  const label = info ? `VLAN ${vlan} · ${info.name}` : (vlan ? `VLAN ${vlan}` : "—");
  return (
    <span style={{
      background: `${color}18`, color, borderRadius:10,
      padding:"1px 7px", fontSize:10, fontFamily:"var(--mono)", fontWeight:700,
      whiteSpace:"nowrap",
    }}>{label}</span>
  );
}

// Relay panel — shows per-VLAN relay status and lets you push config
function RelayPanel({ overview, opnsenseHost, session, onNeedAuth, onRefresh }) {
  const [pushing, setPushing]     = useState(false);
  const [result, setResult]       = useState(null);
  const [opIp, setOpIp]           = useState(opnsenseHost || "");

  useEffect(() => { if (opnsenseHost && !opIp) setOpIp(opnsenseHost); }, [opnsenseHost]);

  const relay    = overview?.relay || {};
  const relayMap = relay.vlans || {};   // { "10": "192.168.99.1", ... }

  const relayVlans = [10, 20, 30, 40, 50];

  const push = async () => {
    if (!session) { onNeedAuth(); return; }
    if (!opIp) return;
    setPushing(true); setResult(null);
    try {
      const r = await API("/dhcp/relay/configure", {
        method:"POST", body:{ token:session.token, opnsense_ip:opIp, vlans:relayVlans }
      });
      setResult(r);
      onRefresh();
    } catch(e) { setResult({ success:false, error:e.message }); }
    setPushing(false);
  };

  const allConfigured = relayVlans.every(v => relayMap[v] === opIp && opIp);

  return (
    <div className="panel">
      <div className="ph">◈ DHCP Relay — Switch → OPNsense</div>
      <div className="pb">
        <div style={{fontSize:12,color:"var(--dm)",lineHeight:1.7,marginBottom:14}}>
          The switch relays DHCP requests from each VLAN to OPNsense, which assigns
          IPs, records leases, and registers hostnames in Unbound DNS automatically.
          VLAN 99 always stays local — it's the recovery path if OPNsense is unreachable.
        </div>

        {/* Per-VLAN status grid */}
        <div style={{display:"grid",gridTemplateColumns:"repeat(auto-fill,minmax(200px,1fr))",gap:8,marginBottom:14}}>

          {/* VLAN 99 — always local */}
          <div style={{background:"var(--bg)",border:"1px solid var(--b2)",borderRadius:4,padding:"10px 12px"}}>
            <div style={{display:"flex",alignItems:"center",gap:6,marginBottom:4}}>
              <VlanBadge vlan={99}/>
              <span style={{fontSize:10,marginLeft:"auto",color:"var(--dm)"}}>🔒 local</span>
            </div>
            <div style={{fontSize:10,color:"var(--dm)",lineHeight:1.5}}>{VLAN_MAP[99].note}</div>
          </div>

          {relayVlans.map(vid => {
            const configured = relayMap[vid];
            const isOk = configured && configured === opIp;
            const stale = configured && configured !== opIp;
            return (
              <div key={vid} style={{background:"var(--bg)",border:`1px solid ${isOk?"rgba(0,230,118,.3)":stale?"rgba(255,234,0,.3)":"var(--b2)"}`,borderRadius:4,padding:"10px 12px"}}>
                <div style={{display:"flex",alignItems:"center",gap:6,marginBottom:4}}>
                  <VlanBadge vlan={vid}/>
                  <span style={{fontSize:10,marginLeft:"auto",
                    color: isOk?"var(--ok)":stale?"var(--warn)":"var(--dm)"}}>
                    {isOk ? `→ ${configured}` : stale ? `→ ${configured} ⚠` : "not set"}
                  </span>
                </div>
                <div style={{fontSize:10,color:"var(--dm)",lineHeight:1.5}}>{VLAN_MAP[vid]?.note}</div>
              </div>
            );
          })}
        </div>

        {/* Push controls */}
        <div style={{display:"flex",gap:8,alignItems:"flex-end",flexWrap:"wrap"}}>
          <div className="field" style={{margin:0}}>
            <label>OPNsense IP</label>
            <input value={opIp} onChange={e=>setOpIp(e.target.value)}
              placeholder="192.168.99.1"
              style={{fontFamily:"var(--mono)",maxWidth:160}}/>
          </div>
          <button className="btn bp" onClick={push}
            disabled={pushing||!opIp||!session}
            style={{fontSize:11}}>
            {pushing ? "Pushing…" : allConfigured ? "✓ Re-apply Relay Config" : "Push Relay Config to Switch"}
          </button>
        </div>
        {result && (
          <div style={{marginTop:8,fontSize:11,
            color:result.success?"var(--ok)":"var(--err)"}}>
            {result.success ? "✓ Relay config pushed — save running-config to make permanent" : `✗ ${result.error||"Push failed"}`}
          </div>
        )}
      </div>
    </div>
  );
}

function ConflictBadge({ conflict }) {
  return (
    <div style={{
      background: conflict.ip_conflict
        ? "rgba(255,23,68,.1)" : "rgba(255,234,0,.08)",
      border: `1px solid ${conflict.ip_conflict ? "rgba(255,23,68,.3)" : "rgba(255,234,0,.25)"}`,
      borderRadius: 4, padding: "8px 12px", marginBottom: 8,
    }}>
      <div style={{display:"flex",alignItems:"center",gap:8,marginBottom:4}}>
        <span style={{
          color: conflict.ip_conflict ? "var(--err)" : "var(--warn)",
          fontSize: 11, fontWeight: 700, textTransform: "uppercase", letterSpacing: 1
        }}>
          {conflict.ip_conflict ? "✗ IP Conflict" : "⚠ Duplicate Entry"}
        </span>
        <span style={{fontFamily:"var(--mono)",fontSize:11,color:"var(--dm)"}}>{conflict.mac}</span>
        {conflict.hostname && <span style={{fontSize:11,color:"var(--tx)"}}>{conflict.hostname}</span>}
      </div>
      <div style={{fontSize:11,color:"var(--dm)",fontFamily:"var(--mono)",marginBottom:8}}>
        Switch: <span style={{color:"var(--ac)"}}>{conflict.switch_ip}</span>
        <span style={{margin:"0 8px"}}>·</span>
        OPNsense: <span style={{color:"var(--ac)"}}>{conflict.opnsense_ip}</span>
      </div>
      {conflict.ip_conflict
        ? <div style={{fontSize:11,color:"var(--err)",marginBottom:8}}>
            Same device has different IPs on switch and OPNsense. One will win — decide which is correct.
          </div>
        : <div style={{fontSize:11,color:"var(--warn)",marginBottom:8}}>
            Same reservation exists in both places. Not harmful but messy — consider removing one.
          </div>
      }
    </div>
  );
}

function OPNsenseSetup({ onConfigured }) {
  const [detecting, setDetecting]   = useState(false);
  const [detected, setDetected]     = useState(null);
  const [host, setHost]             = useState('');
  const [key, setKey]               = useState('');
  const [secret, setSecret]         = useState('');
  const [testing, setTesting]       = useState(false);
  const [error, setError]           = useState('');

  const detect = async () => {
    setDetecting(true); setError('');
    try {
      const r = await API("/dhcp/detect-opnsense");
      setDetected(r);
      if (r.detected) setHost(r.host);
    } catch(e) { setError(e.message); }
    setDetecting(false);
  };

  const connect = async () => {
    if (!host || !key || !secret) return;
    setTesting(true); setError('');
    try {
      const r = await API("/dhcp/configure-opnsense", {
        method: "POST", body: { host, key, secret }
      });
      onConfigured(r);
    } catch(e) { setError(e.message); }
    setTesting(false);
  };

  return (
    <div style={{background:"var(--bg)",border:"1px solid var(--b2)",borderRadius:5,padding:14}}>
      <div style={{fontSize:12,fontWeight:700,marginBottom:8,color:"var(--ac)"}}>Connect OPNsense</div>
      <div style={{fontSize:11,color:"var(--dm)",lineHeight:1.7,marginBottom:12}}>
        Optional — provides a unified view of all DHCP reservations across your network.
        The switch manager will show reservations from both the switch and OPNsense side-by-side,
        flag conflicts, and let you sync between them.<br/><br/>
        In OPNsense: System → Access → Users → your user → API keys → Create key
      </div>
      <div style={{display:"flex",gap:8,marginBottom:10}}>
        <button className="btn bg" onClick={detect} disabled={detecting} style={{fontSize:11}}>
          {detecting ? "Detecting..." : "Auto-detect OPNsense"}
        </button>
        {detected && !detected.detected && (
          <span style={{fontSize:11,color:"var(--dm)",alignSelf:"center"}}>
            Not found at {detected.gateway}
          </span>
        )}
        {detected?.detected && (
          <span style={{fontSize:11,color:"var(--ok)",alignSelf:"center"}}>
            ✓ Found at {detected.host}
          </span>
        )}
      </div>
      <div style={{display:"grid",gridTemplateColumns:"1fr 1fr 1fr",gap:8,marginBottom:10}}>
        <div className="field" style={{margin:0}}>
          <label>OPNsense IP</label>
          <input value={host} onChange={e=>setHost(e.target.value)} placeholder="192.168.99.1"
            style={{fontFamily:"var(--mono)"}}/>
        </div>
        <div className="field" style={{margin:0}}>
          <label>API Key</label>
          <input value={key} onChange={e=>setKey(e.target.value)} placeholder="key"
            style={{fontFamily:"var(--mono)"}}/>
        </div>
        <div className="field" style={{margin:0}}>
          <label>API Secret</label>
          <input type="password" value={secret} onChange={e=>setSecret(e.target.value)}
            placeholder="secret"/>
        </div>
      </div>
      {error && <div style={{color:"var(--err)",fontSize:11,marginBottom:8}}>{error}</div>}
      <button className="btn bp" onClick={connect} disabled={!host||!key||!secret||testing}>
        {testing ? "Testing..." : "Connect & Save"}
      </button>
    </div>
  );
}

function DHCPRow({ res, source, onSync, session, onNeedAuth }) {
  const [syncing, setSyncing] = useState(false);

  const doSync = async (direction) => {
    if (!session) { onNeedAuth(); return; }
    setSyncing(true);
    try {
      await onSync(res.mac, direction);
    } finally { setSyncing(false); }
  };

  const sourceColor = source === "switch" ? "var(--ac)" : "var(--warn)";
  const sourceName  = source === "switch" ? "Switch" : "OPNsense";

  // Derive VLAN: prefer explicit vlan field, fall back to IP third octet
  const vid     = res.vlan || vlanFromIp(res.ip);
  const purpose = res.descr || res.notes || VLAN_MAP[vid]?.note || "";

  return (
    <tr style={{borderBottom:"1px solid var(--b1)"}}>
      <td style={{padding:"7px 10px",fontFamily:"var(--mono)",fontSize:11,color:"var(--dm)"}}>
        {res.mac}
      </td>
      <td style={{padding:"7px 10px",fontFamily:"var(--mono)",fontSize:11,color:"var(--ac)"}}>
        {res.ip}
      </td>
      <td style={{padding:"7px 10px",fontSize:12}}>
        {res.hostname || res.name || <span style={{color:"var(--dm)"}}>—</span>}
        {purpose && <div style={{fontSize:10,color:"var(--dm)",marginTop:2}}>{purpose}</div>}
      </td>
      <td style={{padding:"7px 10px"}}>
        {vid ? <VlanBadge vlan={vid}/> : <span style={{color:"var(--dm)",fontSize:10}}>—</span>}
      </td>
      <td style={{padding:"7px 10px"}}>
        <span style={{
          background: `${sourceColor}18`, color: sourceColor,
          borderRadius: 10, padding: "1px 7px", fontSize: 10,
          fontFamily: "var(--mono)", fontWeight: 700
        }}>{sourceName}</span>
      </td>
      <td style={{padding:"7px 10px"}}>
        <div style={{display:"flex",gap:4}}>
          {source === "switch" && (
            <button className="btn bg" style={{fontSize:10,padding:"2px 7px"}} disabled={syncing}
              onClick={() => doSync("to_opnsense")}>→ OPNsense</button>
          )}
          {source === "opnsense" && (
            <button className="btn bg" style={{fontSize:10,padding:"2px 7px"}} disabled={syncing}
              onClick={() => doSync("to_switch")}>→ Switch</button>
          )}
          <button className="btn bd" style={{fontSize:10,padding:"2px 7px"}} disabled={syncing}
            onClick={() => doSync(source === "switch" ? "remove_switch" : "remove_opnsense")}>
            Remove
          </button>
        </div>
      </td>
    </tr>
  );
}

function DHCPTab({ session, onNeedAuth, backendOk }) {
  const [overview, setOverview]       = useState(null);
  const [loading, setLoading]         = useState(false);
  const [showSetup, setShowSetup]     = useState(false);
  const [syncResult, setSyncResult]   = useState(null);
  const [showConflictSync, setShowConflictSync] = useState(null); // conflict obj

  const load = async () => {
    setLoading(true);
    try { setOverview(await API("/dhcp/overview")); }
    catch(e) { console.error(e); }
    setLoading(false);
  };

  useEffect(() => { if (backendOk) load(); }, [backendOk]);

  const handleSync = async (mac, direction) => {
    if (!session) { onNeedAuth(); return; }
    try {
      const r = await API("/dhcp/sync", { method:"POST", body:{ token:session.token, mac, direction } });
      setSyncResult({ success: true, mac, direction });
      await load();
    } catch(e) {
      setSyncResult({ success: false, error: e.message });
    }
  };

  const disconnectOPNsense = async () => {
    if (!confirm("Remove OPNsense connection?")) return;
    await API("/dhcp/configure-opnsense", { method:"DELETE" });
    await load();
  };

  const sw     = overview?.switch;
  const ops    = overview?.opnsense;
  const conflicts = overview?.conflicts || [];

  // Merge all reservations for the unified table
  const allRes = [
    ...(sw?.reservations||[]).map(r=>({...r,source:"switch"})),
    ...(ops?.reservations||[]).map(r=>({...r,source:"opnsense"})),
  ];

  // Find MACs that appear in both (for conflict highlighting)
  const conflictMacs = new Set(conflicts.map(c=>c.mac));

  return (
    <div className="main" style={{flexDirection:"column",gap:12}}>

      {/* Header + status */}
      <div className="panel">
        <div className="ph">◈ DHCP Management
          <button className="btn bg" style={{marginLeft:"auto",fontSize:10,padding:"3px 8px"}}
            onClick={load}>↻ Refresh</button>
        </div>
        <div className="pb">
          <div style={{fontSize:12,color:"var(--dm)",lineHeight:1.7,marginBottom:14}}>
            DHCP reservations tie a MAC address to a permanent IP so device access rules
            stay stable. Setting them in two places causes confusion — this panel shows
            everything in one view and helps you keep it consistent.
          </div>

          {/* DHCP server status */}
          <div style={{display:"grid",gridTemplateColumns:"1fr 1fr",gap:10,marginBottom:14}}>
            <div style={{background:"var(--bg)",border:"1px solid var(--b2)",borderRadius:4,padding:"10px 12px"}}>
              <div style={{fontSize:10,fontWeight:700,letterSpacing:2,textTransform:"uppercase",
                           color:"var(--dm)",marginBottom:6}}>Switch DHCP</div>
              <div style={{display:"flex",alignItems:"center",gap:6}}>
                <span style={{width:8,height:8,borderRadius:"50%",
                              background:sw?.status?.running?"var(--ok)":"var(--dm)"}}/>
                <span style={{fontSize:12}}>
                  {sw?.status?.running
                    ? `Active — VLAN${sw.status.vlans?.length>1?"s":""} ${sw.status.vlans?.join(", ")||"?"}`
                    : "Not running"}
                </span>
              </div>
              {sw?.status?.running && (
                <div style={{fontSize:10,color:"var(--dm)",marginTop:4}}>
                  Use for VLAN 99 management — devices get IPs before OPNsense is reachable
                </div>
              )}
            </div>
            <div style={{background:"var(--bg)",border:"1px solid var(--b2)",borderRadius:4,padding:"10px 12px"}}>
              <div style={{fontSize:10,fontWeight:700,letterSpacing:2,textTransform:"uppercase",
                           color:"var(--dm)",marginBottom:6}}>OPNsense DHCP</div>
              <div style={{display:"flex",alignItems:"center",gap:6}}>
                <span style={{width:8,height:8,borderRadius:"50%",
                              background:ops?.configured?"var(--ok)":"var(--dm)"}}/>
                <span style={{fontSize:12}}>
                  {ops?.configured ? `Connected — ${ops.host}` : "Not connected"}
                </span>
              </div>
              <div style={{marginTop:6,display:"flex",gap:6}}>
                {!ops?.configured && (
                  <button className="btn bg" style={{fontSize:10,padding:"2px 8px"}}
                    onClick={()=>setShowSetup(s=>!s)}>
                    {showSetup?"Hide":"Connect OPNsense"}
                  </button>
                )}
                {ops?.configured && (
                  <button className="btn bg" style={{fontSize:10,padding:"2px 8px"}}
                    onClick={disconnectOPNsense}>Disconnect</button>
                )}
              </div>
            </div>
          </div>

          {showSetup && (
            <OPNsenseSetup onConfigured={() => { setShowSetup(false); load(); }}/>
          )}

          {/* Recommendation */}
          <div style={{background:"rgba(0,229,255,.05)",border:"1px solid rgba(0,229,255,.15)",
                       borderRadius:4,padding:"10px 14px",fontSize:11,color:"var(--dm)",lineHeight:1.7}}>
            <span style={{color:"var(--ac)",fontWeight:700}}>Recommendation: </span>
            Use switch DHCP for VLAN 99 (management) only.
            Let OPNsense handle DHCP for all other VLANs — it integrates with DNS,
            firewall rules, and shows everything in one place.
            Never run both for the same VLAN.
          </div>
        </div>
      </div>

      {/* Relay configuration */}
      <RelayPanel
        overview={overview}
        opnsenseHost={ops?.host||""}
        session={session}
        onNeedAuth={onNeedAuth}
        onRefresh={load}
      />

      {/* Conflicts */}
      {conflicts.length > 0 && (
        <div className="panel">
          <div className="ph" style={{color:"var(--err)"}}>
            ✗ Conflicts Detected ({conflicts.length})
          </div>
          <div className="pb">
            <div style={{fontSize:11,color:"var(--dm)",marginBottom:12}}>
              The same MAC address has reservations in both the switch and OPNsense.
              Decide which one is correct and remove the other.
            </div>
            {conflicts.map(c => (
              <div key={c.mac}>
                <ConflictBadge conflict={c}/>
                <div style={{display:"flex",gap:6,marginBottom:12,flexWrap:"wrap"}}>
                  <button className="btn bw" style={{fontSize:11}}
                    onClick={()=>setShowConflictSync(showConflictSync?.mac===c.mac?null:c)}>
                    {showConflictSync?.mac===c.mac ? "Hide options" : "Resolve →"}
                  </button>
                </div>
                {showConflictSync?.mac === c.mac && (
                  <div style={{background:"var(--bg)",border:"1px solid var(--b2)",
                               borderRadius:4,padding:"10px 14px",marginBottom:12}}>
                    <div style={{fontSize:11,fontWeight:700,marginBottom:8}}>Choose which IP wins:</div>
                    <div style={{display:"flex",gap:8,flexWrap:"wrap"}}>
                      <button className="btn bs" style={{fontSize:11}}
                        onClick={()=>{handleSync(c.mac,"to_opnsense");setShowConflictSync(null);}}>
                        Switch wins ({c.switch_ip}) — update OPNsense
                      </button>
                      <button className="btn bs" style={{fontSize:11}}
                        onClick={()=>{handleSync(c.mac,"to_switch");setShowConflictSync(null);}}>
                        OPNsense wins ({c.opnsense_ip}) — update switch
                      </button>
                      <button className="btn bd" style={{fontSize:11}}
                        onClick={()=>{handleSync(c.mac,"remove_switch");setShowConflictSync(null);}}>
                        Remove from switch only
                      </button>
                      <button className="btn bd" style={{fontSize:11}}
                        onClick={()=>{handleSync(c.mac,"remove_opnsense");setShowConflictSync(null);}}>
                        Remove from OPNsense only
                      </button>
                    </div>
                  </div>
                )}
              </div>
            ))}
          </div>
        </div>
      )}

      {/* Sync result */}
      {syncResult && (
        <div className="panel">
          <div className="ph" style={{color:syncResult.success?"var(--ok)":"var(--err)"}}>
            {syncResult.success ? "✓ Sync complete" : `✗ Sync failed: ${syncResult.error}`}
            <button className="btn bg" style={{marginLeft:"auto",fontSize:10,padding:"2px 8px"}}
              onClick={()=>setSyncResult(null)}>✕</button>
          </div>
        </div>
      )}

      {/* Unified reservations table */}
      <div className="panel">
        <div className="ph">◈ All Reservations ({allRes.length})</div>
        <div className="pb" style={{padding:0}}>
          {allRes.length === 0 && (
            <div className="empty">No reservations found. Add devices in the Device Access tab.</div>
          )}
          {allRes.length > 0 && (
            <table style={{width:"100%",borderCollapse:"collapse"}}>
              <thead>
                <tr style={{borderBottom:"1px solid var(--b1)"}}>
                  {["MAC","IP","Name / Description","VLAN","Source","Actions"].map(h=>(
                    <th key={h} style={{textAlign:"left",padding:"6px 10px",fontSize:10,
                                       letterSpacing:2,textTransform:"uppercase",color:"var(--dm)"}}>
                      {h}
                    </th>
                  ))}
                </tr>
              </thead>
              <tbody>
                {allRes.map((r,i) => (
                  <tr key={`${r.mac}-${r.source}`}
                    style={{
                      background: conflictMacs.has(r.mac) ? "rgba(255,234,0,.03)" : "transparent",
                      borderLeft: conflictMacs.has(r.mac) ? "2px solid var(--warn)" : "2px solid transparent",
                    }}>
                    <DHCPRow
                      res={r} source={r.source}
                      onSync={handleSync}
                      session={session} onNeedAuth={onNeedAuth}
                    />
                  </tr>
                ))}
              </tbody>
            </table>
          )}
        </div>
      </div>

      {/* Active leases */}
      {((sw?.leases||[]).length > 0 || (ops?.leases||[]).length > 0) && (
        <div className="panel">
          <div className="ph">◈ Active Leases
            <span style={{marginLeft:6,fontSize:10,color:"var(--dm)"}}>
              ({(sw?.leases||[]).length + (ops?.leases||[]).length} total)
            </span>
          </div>
          <div className="pb" style={{padding:0}}>
            <table style={{width:"100%",borderCollapse:"collapse"}}>
              <thead>
                <tr style={{borderBottom:"1px solid var(--b1)"}}>
                  {["MAC","IP","Hostname","Source"].map(h=>(
                    <th key={h} style={{textAlign:"left",padding:"6px 10px",fontSize:10,
                                       letterSpacing:2,textTransform:"uppercase",color:"var(--dm)"}}>
                      {h}
                    </th>
                  ))}
                </tr>
              </thead>
              <tbody>
                {[...(sw?.leases||[]).map(l=>({...l,source:"switch"})),
                  ...(ops?.leases||[]).map(l=>({...l,source:"opnsense"}))
                ].map((l,i)=>(
                  <tr key={i} style={{borderBottom:"1px solid var(--b1)"}}>
                    <td style={{padding:"6px 10px",fontFamily:"var(--mono)",fontSize:11,color:"var(--dm)"}}>{l.mac}</td>
                    <td style={{padding:"6px 10px",fontFamily:"var(--mono)",fontSize:11,color:"var(--ac)"}}>{l.ip}</td>
                    <td style={{padding:"6px 10px",fontSize:11}}>{l.hostname||<span style={{color:"var(--dm)"}}>—</span>}</td>
                    <td style={{padding:"6px 10px"}}>
                      <span style={{
                        background:l.source==="switch"?"rgba(0,229,255,.12)":"rgba(255,234,0,.12)",
                        color:l.source==="switch"?"var(--ac)":"var(--warn)",
                        borderRadius:10,padding:"1px 7px",fontSize:10,fontFamily:"var(--mono)",fontWeight:700
                      }}>{l.source==="switch"?"Switch":"OPNsense"}</span>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>
      )}
    </div>
  );
}

// ══════════════════════════════════════════════════════════════════════════════
// LOCAL HOSTNAME PANEL — dnsmasq .lan resolution
// ══════════════════════════════════════════════════════════════════════════════

function LocalHostnamesPanel({ session, onNeedAuth }) {
  const [entries, setEntries]       = useState([]);   // [{ name, ip }]
  const [loaded, setLoaded]         = useState(false);
  const [saving, setSaving]         = useState(false);
  const [result, setResult]         = useState(null);
  const [showConf, setShowConf]     = useState(false);
  const [localDomain, setLocalDomain] = useState("lan");

  const load = async () => {
    try {
      const r = await API("/dns/local-hostnames");
      setEntries(r.entries || []);
      setLoaded(true);
    } catch(e) { setLoaded(true); }
  };
  useEffect(() => { load(); }, []);

  const addEntry  = () => setEntries(prev => [...prev, { name:"", ip:"" }]);
  const upEntry   = (i, k, v) => setEntries(prev => prev.map((e,idx) => idx===i?{...e,[k]:v}:e));
  const delEntry  = i => setEntries(prev => prev.filter((_,idx)=>idx!==i));

  const save = async () => {
    if (!session) { onNeedAuth(); return; }
    setSaving(true); setResult(null);
    try {
      const r = await API("/dns/local-hostnames", {
        method:"POST",
        body: { token:session.token, entries, local_domain:localDomain }
      });
      setResult(r);
    } catch(e) {
      setResult({ success:false, message:e.message });
    }
    setSaving(false);
  };

  return (
    <div className="panel">
      <div className="ph">◈ Local Hostnames (.lan resolution)
        <span style={{marginLeft:"auto",fontSize:10,color:"var(--dm)"}}>
          Optional — needs dnsmasq Docker service
        </span>
      </div>
      <div className="pb">
        <div style={{fontSize:12,color:"var(--dm)",lineHeight:1.8,marginBottom:12}}>
          Add a <strong>dnsmasq</strong> container to resolve <code>.lan</code> hostnames
          for all devices. ctrld forwards <code>*.lan</code> queries to dnsmasq on port 5353;
          all other queries go through Control D as normal.
          <br/>
          <code style={{fontFamily:"var(--mono)",color:"var(--ac)",fontSize:11}}>
            switch.mgmt.lan
          </code>{" "}and{" "}
          <code style={{fontFamily:"var(--mono)",color:"var(--ac)",fontSize:11}}>
            management.lan
          </code>{" "}
          always resolve to the management computer's IP.
        </div>

        <div style={{display:"flex",gap:10,marginBottom:12,alignItems:"flex-end"}}>
          <div className="field" style={{margin:0}}>
            <label>Local domain suffix</label>
            <input value={localDomain} onChange={e=>setLocalDomain(e.target.value)}
              placeholder="lan"
              style={{fontFamily:"var(--mono)",maxWidth:120}}/>
          </div>
          <div style={{fontSize:10,color:"var(--dm)",paddingBottom:4}}>
            Queries for <code>*.{localDomain}</code> and <code>*.local</code> are
            forwarded to dnsmasq (port 5353).
          </div>
        </div>

        {/* Hostname table */}
        {entries.length > 0 && (
          <table style={{width:"100%",borderCollapse:"collapse",marginBottom:10}}>
            <thead>
              <tr style={{borderBottom:"1px solid var(--b1)"}}>
                {["Hostname","IP Address",""].map(h=>(
                  <th key={h} style={{textAlign:"left",padding:"4px 8px",fontSize:10,
                                      letterSpacing:2,textTransform:"uppercase",color:"var(--dm)"}}>
                    {h}
                  </th>
                ))}
              </tr>
            </thead>
            <tbody>
              {entries.map((e,i)=>(
                <tr key={i} style={{borderBottom:"1px solid var(--b1)"}}>
                  <td style={{padding:"4px 8px"}}>
                    <input value={e.name} onChange={ev=>upEntry(i,"name",ev.target.value)}
                      placeholder={`printer.${localDomain}`}
                      style={{
                        width:"100%",background:"var(--bg)",border:"1px solid var(--b2)",
                        color:"var(--tx)",padding:"3px 6px",fontFamily:"var(--mono)",
                        fontSize:11,borderRadius:3,
                      }}/>
                  </td>
                  <td style={{padding:"4px 8px"}}>
                    <input value={e.ip} onChange={ev=>upEntry(i,"ip",ev.target.value)}
                      placeholder="192.168.10.50"
                      style={{
                        width:"100%",background:"var(--bg)",border:"1px solid var(--b2)",
                        color:"var(--tx)",padding:"3px 6px",fontFamily:"var(--mono)",
                        fontSize:11,borderRadius:3,
                      }}/>
                  </td>
                  <td style={{padding:"4px 8px"}}>
                    <button className="btn bd" style={{padding:"2px 6px",fontSize:10}}
                      onClick={()=>delEntry(i)}>✕</button>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        )}

        <div style={{display:"flex",gap:8,flexWrap:"wrap",marginBottom: result?12:0}}>
          <button className="btn bg" style={{fontSize:10}} onClick={addEntry}>+ Add Hostname</button>
          <button className="btn bp" style={{fontSize:10}}
            onClick={save} disabled={saving||!session}>
            {saving?"Saving...":"Save & Generate dnsmasq.conf"}
          </button>
          {!session && (
            <button className="btn bg" style={{fontSize:10}} onClick={onNeedAuth}>Authenticate</button>
          )}
        </div>

        {/* Result */}
        {result && result.success && (
          <div style={{marginTop:10}}>
            <div style={{
              padding:"8px 12px",borderRadius:4,marginBottom:10,fontSize:11,
              background:"rgba(0,230,118,.06)",border:"1px solid rgba(0,230,118,.2)",
              color:"var(--dm)",lineHeight:1.7,
            }}>
              <span style={{color:"var(--ok)",fontWeight:700}}>✓ </span>
              {result.message}
            </div>

            {/* dnsmasq.conf */}
            <div style={{marginBottom:10}}>
              <div style={{display:"flex",gap:6,marginBottom:6,alignItems:"center"}}>
                <span style={{fontSize:11,color:"var(--dm)"}}>
                  dnsmasq.conf written to{" "}
                  <code style={{fontFamily:"var(--mono)",color:"var(--ac)"}}>{result.conf_path}</code>
                </span>
                <button className="btn bg" style={{fontSize:10,padding:"1px 7px"}}
                  onClick={()=>setShowConf(s=>!s)}>{showConf?"Hide":"Show"} config</button>
                <button className="btn bg" style={{fontSize:10,padding:"1px 7px"}}
                  onClick={()=>navigator.clipboard?.writeText(result.dnsmasq_conf)}>Copy</button>
              </div>
              {showConf && (
                <div style={{
                  background:"#060809",borderRadius:4,padding:"10px 12px",
                  fontFamily:"var(--mono)",fontSize:10,color:"#a0b0c0",
                  whiteSpace:"pre",overflowX:"auto",maxHeight:180,overflowY:"auto",
                }}>{result.dnsmasq_conf}</div>
              )}
            </div>

            {/* docker-compose snippet */}
            <div style={{marginBottom:10}}>
              <div style={{fontSize:11,color:"var(--dm)",marginBottom:4}}>
                Add to docker-compose.yml then run:{" "}
                <code style={{fontFamily:"var(--mono)",color:"var(--ac)"}}>docker compose up -d dnsmasq</code>
              </div>
              <div style={{
                background:"#060809",borderRadius:4,padding:"10px 12px",
                fontFamily:"var(--mono)",fontSize:10,color:"#a0b0c0",
                whiteSpace:"pre",overflowX:"auto",
              }}>{result.docker_compose_snippet}</div>
              <button className="btn bg" style={{marginTop:6,fontSize:10}}
                onClick={()=>navigator.clipboard?.writeText(result.docker_compose_snippet)}>
                Copy compose snippet
              </button>
            </div>

            {/* ctrld.toml split-horizon block */}
            <div>
              <div style={{fontSize:11,color:"var(--dm)",marginBottom:4}}>
                Append to ctrld.toml (before the fallback upstream):
              </div>
              <div style={{
                background:"#060809",borderRadius:4,padding:"10px 12px",
                fontFamily:"var(--mono)",fontSize:10,color:"#a0b0c0",
                whiteSpace:"pre",overflowX:"auto",
              }}>{result.split_horizon}</div>
              <button className="btn bg" style={{marginTop:6,fontSize:10}}
                onClick={()=>navigator.clipboard?.writeText(result.split_horizon)}>
                Copy toml block
              </button>
            </div>
          </div>
        )}
        {result && !result.success && (
          <div style={{
            marginTop:10,padding:"8px 12px",borderRadius:4,fontSize:11,
            background:"rgba(255,100,100,.06)",border:"1px solid rgba(255,100,100,.2)",
            color:"var(--err)",
          }}>✗ {result.message}</div>
        )}
      </div>
    </div>
  );
}

// ══════════════════════════════════════════════════════════════════════════════
// DNS FILTERING TAB — Control D / ctrld
// ══════════════════════════════════════════════════════════════════════════════

const CTRLD_MODES = {
  local: {
    label: "Option A — ctrld on this management computer",
    color: "var(--ok)",
    badge: "Fully automated",
    description: `Installs the ctrld daemon directly on this machine alongside the
switch manager. One command downloads and installs it, writes a
per-VLAN config, and starts it as a system service.

How it works:
  • ctrld listens on port 53 on this machine's IP
  • The switch DHCP hands out this machine's IP as DNS for each VLAN
  • ctrld sees the source VLAN subnet and routes to the right profile
  • Each VLAN gets filtered by its own Control D profile via DoH3

Port 53 note: On Ubuntu/Debian, systemd-resolved holds port 53.
The installer automatically disables its stub listener (DNSStubListener=no)
before starting ctrld. The systemd-resolved service itself stays running.

Best for: most setups. Self-contained, no OPNsense required.
Requires: a Resolver ID per VLAN from your Control D dashboard.`,
    docsUrl: "https://docs.controld.com/docs/ctrld",
  },
  opnsense: {
    label: "Option B — ctrld on OPNsense",
    color: "var(--warn)",
    badge: "Semi-automated",
    description: `Installs ctrld on your OPNsense router instead of this machine.
The setup generates a single SSH command you paste into OPNsense shell.
OPNsense then becomes the DNS resolver for your network.

How it works:
  • You run one command in OPNsense shell (via SSH or console)
  • ctrld installs as a service on OPNsense
  • OPNsense's IP becomes the DNS server for each VLAN
  • Per-VLAN routing uses source IP matching in ctrld config

Unbound conflict: OPNsense runs Unbound on port 53. The correct fix is:
  1. Move Unbound to listen on 127.0.0.1:5353 (keep it for .lan names)
  2. Run ctrld on port 53
  3. Tell ctrld to forward *.lan / *.local to 127.0.0.1:5353
Instructions are shown in the result panel after generating the command.

Best for: setups where OPNsense is already the DNS server, or where
you want DNS handled at the router rather than the switch manager machine.
Requires: SSH access to OPNsense and a Resolver ID per VLAN.`,
    docsUrl: "https://docs.controld.com/docs/routers-platform",
  },
  manual: {
    label: "Option C — manual / existing setup",
    color: "var(--dm)",
    badge: "Config generated",
    description: `Generates the ctrld.toml config file and install command for you
to apply manually wherever you choose to run ctrld.

This option is for:
  • Running ctrld on a separate dedicated machine
  • Integrating with an existing DNS setup
  • Using dnscrypt-proxy or another DoH3 proxy instead of ctrld
  • Advanced users who want full control

The site generates the correct ctrld.toml and DHCP option 6 values.
You install and configure ctrld yourself.

Install command (any Linux/Mac/OPNsense):
  sh -c 'sh -c "$(curl -sL https://api.controld.com/dl)" -s RESOLVER_ID forced'`,
    docsUrl: "https://docs.controld.com/docs/ctrld",
  },
};

function CtrldVlanRow({ vlan, profile, onChange }) {
  return (
    <tr style={{borderBottom:"1px solid var(--b1)"}}>
      <td style={{padding:"8px 10px"}}>
        <div style={{display:"flex",alignItems:"center",gap:8}}>
          <span style={{width:10,height:10,borderRadius:2,background:vlan.color,flexShrink:0}}/>
          <span style={{fontWeight:600}}>VLAN {vlan.id}</span>
          <span style={{color:"var(--dm)",fontSize:11}}>{vlan.name}</span>
        </div>
      </td>
      <td style={{padding:"8px 10px",fontFamily:"var(--mono)",fontSize:11,color:"var(--dm)"}}>
        192.168.{vlan.id}.0/24
      </td>
      <td style={{padding:"8px 10px"}}>
        <input
          value={profile?.resolver_id || ""}
          onChange={e => onChange(vlan.id, "resolver_id", e.target.value)}
          placeholder="Resolver ID from Control D dashboard"
          style={{
            width:"100%", background:"var(--bg)", border:"1px solid var(--b2)",
            color:"var(--tx)", padding:"4px 8px", fontFamily:"var(--mono)",
            fontSize:11, borderRadius:3,
          }}
        />
      </td>
      <td style={{padding:"8px 10px"}}>
        {profile?.resolver_id
          ? <span style={{color:"var(--ok)",fontSize:11}}>✓ configured</span>
          : <span style={{color:"var(--dm)",fontSize:11}}>not set — will use fallback</span>
        }
      </td>
    </tr>
  );
}

function DNSTab({ vlans, session, onNeedAuth, backendOk, acls, setAcls }) {
  const [status, setStatus]           = useState(null);
  const [mode, setMode]               = useState(null);
  const [profiles, setProfiles]       = useState({});
  const [opnsenseHost, setOpnsenseHost] = useState("");
  const [loading, setLoading]         = useState(false);
  const [saving, setSaving]           = useState(false);
  const [result, setResult]           = useState(null);
  const [showToml, setShowToml]       = useState(false);

  // DNS enforcement state
  const [enforceIp, setEnforceIp]     = useState("");
  const [enforceLoading, setEnforceLoading] = useState(false);
  const [enforceResult, setEnforceResult]   = useState(null);

  // Local domain split-horizon state
  const [localDomain, setLocalDomain] = useState("lan");
  const [showLocalDomain, setShowLocalDomain] = useState(false);

  const load = async () => {
    setLoading(true);
    try {
      const s = await API("/ctrld/status");
      setStatus(s);
      if (s.mode) setMode(s.mode);
      if (s.vlan_profiles?.length) {
        const p = {};
        s.vlan_profiles.forEach(vp => { p[vp.vlan_id] = vp; });
        setProfiles(p);
      }
    } catch(e) { console.error(e); }
    setLoading(false);
  };

  useEffect(() => { if (backendOk) load(); }, [backendOk]);

  // Initialise profiles from VLANs
  useEffect(() => {
    if (vlans.length && Object.keys(profiles).length === 0) {
      const p = {};
      vlans.forEach(v => {
        p[v.id] = {
          vlan_id: v.id,
          name: v.name,
          subnet: `192.168.${v.id}.0/24`,
          resolver_id: "",
        };
      });
      setProfiles(p);
    }
  }, [vlans]);

  const updateProfile = (vlanId, field, value) => {
    setProfiles(prev => ({
      ...prev,
      [vlanId]: {
        ...prev[vlanId],
        vlan_id: vlanId,
        name: vlans.find(v=>v.id===vlanId)?.name || `VLAN ${vlanId}`,
        subnet: `192.168.${vlanId}.0/24`,
        [field]: value,
      }
    }));
  };

  const save = async () => {
    if (!session) { onNeedAuth(); return; }
    if (!mode) { alert("Choose an option first"); return; }
    setSaving(true); setResult(null);
    try {
      const vlan_profiles = Object.values(profiles).filter(p => p.resolver_id);
      const r = await API("/ctrld/save-config", {
        method: "POST",
        body: {
          token: session.token,
          config: { mode, vlan_profiles, opnsense_host: opnsenseHost },
        }
      });
      setResult(r);
      await load();
    } catch(e) {
      setResult({ success: false, message: e.message });
    }
    setSaving(false);
  };

  const updateProfiles = async () => {
    if (!session) { onNeedAuth(); return; }
    setSaving(true);
    try {
      const vlan_profiles = Object.values(profiles).filter(p => p.resolver_id);
      const r = await API("/ctrld/update-profiles", {
        method: "POST",
        body: { token: session.token, vlan_profiles }
      });
      setResult(r);
    } catch(e) {
      setResult({ success: false, message: e.message });
    }
    setSaving(false);
  };

  // Generate DNS enforcement ACLs for all non-management VLANs
  const generateEnforceAcls = async () => {
    if (!session) { onNeedAuth(); return; }
    const ip = enforceIp || status?.dns_ip;
    if (!ip) { alert("Enter the ctrld IP address first"); return; }
    setEnforceLoading(true); setEnforceResult(null);
    try {
      const vlan_ids = vlans.filter(v => v.id !== 99).map(v => v.id);
      const r = await API("/ctrld/dns-enforce-acls", {
        method: "POST",
        body: { token: session.token, ctrld_ip: ip, vlan_ids }
      });
      setEnforceResult(r);
      // Pre-load commands into Review & Push by storing as a special ACL marker
      // (user will copy them to the Review & Push tab)
    } catch(e) {
      setEnforceResult({ success: false, message: e.message });
    }
    setEnforceLoading(false);
  };

  const configuredProfiles = Object.values(profiles).filter(p => p.resolver_id);
  const isInstalled = status?.installed;
  const isRunning   = status?.running;

  return (
    <div className="main" style={{flexDirection:"column",gap:12}}>

      {/* Status header */}
      <div className="panel">
        <div className="ph">◈ DNS Filtering — Control D
          <span style={{marginLeft:"auto",display:"flex",alignItems:"center",gap:6,
                        fontFamily:"var(--mono)",fontSize:10}}>
            {isRunning
              ? <><span style={{width:7,height:7,borderRadius:"50%",background:"var(--ok)"}}/> ctrld running</>
              : isInstalled
                ? <><span style={{width:7,height:7,borderRadius:"50%",background:"var(--warn)"}}/> ctrld installed, not running</>
                : <><span style={{width:7,height:7,borderRadius:"50%",background:"var(--dm)"}}/> not configured</>
            }
          </span>
        </div>
        <div className="pb">
          <div style={{fontSize:12,color:"var(--dm)",lineHeight:1.8,marginBottom:14}}>
            Control D filters DNS queries per VLAN — ads, malware, adult content,
            social media, and more. Each VLAN gets its own profile with different rules.
            The <code style={{fontFamily:"var(--mono)",color:"var(--ac)"}}>ctrld</code> daemon
            acts as a local DNS proxy, accepting plain DNS from devices and forwarding
            upstream via DoH3 to Control D. Your switch DHCP points each VLAN to it.
            <br/><br/>
            <span style={{color:"var(--ac)"}}>
              You need a Control D account and a Resolver ID per VLAN.
            </span>
            {" "}Get them at{" "}
            <a href="https://controld.com" target="_blank"
               style={{color:"var(--ac)"}}>controld.com</a>
            {" "}→ Add Device → Router → copy the Resolver ID shown.
          </div>

          {/* Mode selection */}
          {!isInstalled && (
            <div style={{marginBottom:14}}>
              <div className="sect">Choose how to run ctrld</div>
              <div style={{display:"flex",flexDirection:"column",gap:8}}>
                {Object.entries(CTRLD_MODES).map(([key, m]) => (
                  <div key={key}
                    onClick={() => setMode(key)}
                    style={{
                      background: mode===key ? "rgba(0,229,255,.05)" : "var(--bg)",
                      border: `1px solid ${mode===key ? "var(--ac)" : "var(--b2)"}`,
                      borderRadius: 5, padding:"12px 14px", cursor:"pointer",
                      transition:"all .15s",
                    }}>
                    <div style={{display:"flex",alignItems:"center",gap:10,marginBottom:6}}>
                      <div style={{width:16,height:16,borderRadius:"50%",border:`2px solid ${m.color}`,
                                   background:mode===key?m.color:"transparent",flexShrink:0}}/>
                      <span style={{fontWeight:700,fontSize:12}}>{m.label}</span>
                      <span style={{
                        background:`${m.color}20`,color:m.color,
                        fontSize:10,fontFamily:"var(--mono)",fontWeight:700,
                        padding:"1px 7px",borderRadius:10,marginLeft:"auto"
                      }}>{m.badge}</span>
                    </div>
                    <pre style={{
                      fontFamily:"var(--sans)",fontSize:11,color:"var(--dm)",
                      lineHeight:1.7,margin:0,whiteSpace:"pre-wrap",
                      paddingLeft:26,
                    }}>{m.description}</pre>
                    <div style={{paddingLeft:26,marginTop:6}}>
                      <a href={m.docsUrl} target="_blank"
                         style={{fontSize:10,color:"var(--ac)"}}
                         onClick={e=>e.stopPropagation()}>
                        Documentation →
                      </a>
                    </div>
                  </div>
                ))}
              </div>

              {mode === "opnsense" && (
                <div className="field" style={{marginTop:12}}>
                  <label>OPNsense IP address</label>
                  <input value={opnsenseHost}
                    onChange={e=>setOpnsenseHost(e.target.value)}
                    placeholder="192.168.99.1"
                    style={{fontFamily:"var(--mono)",maxWidth:220}}/>
                </div>
              )}
            </div>
          )}

          {/* Already installed — show current mode */}
          {isInstalled && (
            <div style={{
              background:"rgba(0,230,118,.06)",border:"1px solid rgba(0,230,118,.2)",
              borderRadius:4,padding:"10px 14px",marginBottom:14,
              display:"flex",alignItems:"center",gap:10,
            }}>
              <span style={{color:"var(--ok)",fontSize:13}}>✓</span>
              <div style={{fontSize:12}}>
                ctrld is installed — <strong>{CTRLD_MODES[status?.mode||"local"]?.label || status?.mode}</strong>
                <div style={{fontSize:10,color:"var(--dm)",fontFamily:"var(--mono)",marginTop:2}}>
                  {status?.output}
                </div>
              </div>
            </div>
          )}
        </div>
      </div>

      {/* Per-VLAN Resolver IDs */}
      <div className="panel">
        <div className="ph">◈ Control D Resolver IDs — per VLAN
          <span style={{marginLeft:"auto",fontSize:10,color:"var(--dm)"}}>
            From controld.com → Add Device → Router → Resolver ID
          </span>
        </div>
        <div className="pb" style={{padding:0}}>
          <table style={{width:"100%",borderCollapse:"collapse"}}>
            <thead>
              <tr style={{borderBottom:"1px solid var(--b1)"}}>
                {["VLAN","Subnet","Resolver ID","Status"].map(h=>(
                  <th key={h} style={{textAlign:"left",padding:"6px 10px",fontSize:10,
                                     letterSpacing:2,textTransform:"uppercase",color:"var(--dm)"}}>
                    {h}
                  </th>
                ))}
              </tr>
            </thead>
            <tbody>
              {vlans.map(v => (
                <CtrldVlanRow
                  key={v.id}
                  vlan={v}
                  profile={profiles[v.id]}
                  onChange={updateProfile}
                />
              ))}
            </tbody>
          </table>

          <div style={{padding:"12px 14px",borderTop:"1px solid var(--b1)",
                       display:"flex",gap:8,alignItems:"center",flexWrap:"wrap"}}>
            <div style={{fontSize:11,color:"var(--dm)",flex:1}}>
              {configuredProfiles.length} of {vlans.length} VLANs have a Resolver ID.
              {configuredProfiles.length < vlans.length &&
                " VLANs without a Resolver ID will use the first configured profile as fallback."}
            </div>
            {isInstalled
              ? <button className="btn bp" onClick={updateProfiles} disabled={saving||!session}>
                  {saving ? "Saving..." : "Update Profiles"}
                </button>
              : <button className="btn bp" onClick={save}
                  disabled={saving||!session||!mode||configuredProfiles.length===0}>
                  {saving ? "Installing..." : mode==="local" ? "Install & Start ctrld" :
                   mode==="opnsense" ? "Generate OPNsense Command" : "Save & Generate Config"}
                </button>
            }
            {!session && (
              <button className="btn bg" style={{fontSize:10}} onClick={onNeedAuth}>
                Authenticate
              </button>
            )}
          </div>
        </div>
      </div>

      {/* Result panel */}
      {result && (
        <div className="panel">
          <div className="ph" style={{color:result.success?"var(--ok)":"var(--err)"}}>
            {result.success ? "✓ " : "✗ "}
            {result.message}
            <button className="btn bg" style={{marginLeft:"auto",fontSize:10,padding:"2px 8px"}}
              onClick={()=>setResult(null)}>✕</button>
          </div>
          {result.success && (
            <div className="pb">
              {/* Option A result */}
              {result.mode === "local" && result.dns_ip && (
                <div style={{fontSize:12,lineHeight:1.8}}>
                  <div style={{marginBottom:8}}>
                    <span style={{color:"var(--ac)",fontFamily:"var(--mono)"}}>
                      DNS IP for DHCP option 6: {result.dns_ip}
                    </span>
                  </div>
                  <div style={{color:"var(--dm)",marginBottom:12}}>{result.dhcp_action}</div>
                  <div style={{fontSize:11,color:"var(--dm)"}}>
                    Go to the <strong>DHCP tab</strong> → select each VLAN pool →
                    set DNS server to <code style={{fontFamily:"var(--mono)",color:"var(--ac)"}}>{result.dns_ip}</code>
                  </div>
                </div>
              )}

              {/* Option B result */}
              {result.mode === "opnsense" && (
                <div style={{fontSize:12,lineHeight:1.9}}>
                  <div className="sect">Run this in OPNsense shell</div>
                  <div style={{
                    background:"#060809",borderRadius:4,padding:"10px 14px",
                    fontFamily:"var(--mono)",fontSize:12,color:"#a0b0c0",marginBottom:12,
                    overflowX:"auto",whiteSpace:"pre",
                  }}>{result.ssh_cmd || result.install_cmd}</div>
                  <div style={{color:"var(--dm)",fontSize:11,lineHeight:1.8}}>
                    <div>After install:</div>
                    <div>1. {result.step2}</div>
                    <div>2. {result.step3}</div>
                    <div>3. {result.step4}</div>
                  </div>
                  <button className="btn bg" style={{marginTop:10,fontSize:10}}
                    onClick={()=>navigator.clipboard?.writeText(result.ssh_cmd||result.install_cmd)}>
                    Copy Command
                  </button>

                  {/* OPNsense Unbound conflict resolution */}
                  <div style={{
                    marginTop:14,padding:"12px 14px",
                    background:"rgba(255,193,7,.06)",border:"1px solid rgba(255,193,7,.2)",
                    borderRadius:4,fontSize:11,lineHeight:1.8,
                  }}>
                    <div style={{fontWeight:700,color:"var(--warn)",marginBottom:6}}>
                      OPNsense Unbound conflict — port 53
                    </div>
                    <div style={{color:"var(--dm)"}}>
                      OPNsense runs Unbound DNS on port 53. ctrld needs port 53.
                      The right fix is to keep Unbound running (it resolves <code>.lan</code> hostnames)
                      but move it to <code>127.0.0.1:5353</code>, then run ctrld on <code>:53</code>.
                    </div>
                    <div style={{marginTop:8,fontWeight:600}}>Steps in OPNsense UI:</div>
                    <ol style={{margin:"4px 0 0 18px",color:"var(--dm)"}}>
                      <li>Services → Unbound DNS → General → change "Listen Port" to <code>5353</code>
                        and "Listen Interface" to <code>Loopback (lo0)</code>. Save + Apply.</li>
                      <li>Add a forwarding rule in ctrld.toml (shown in the TOML preview below)
                        to send <code>*.{localDomain}</code> and <code>*.local</code> to
                        <code>127.0.0.1:5353</code>.</li>
                      <li>Run <code>ctrld restart</code> on OPNsense after placing the new config.</li>
                    </ol>
                    <div style={{marginTop:8,display:"flex",alignItems:"center",gap:8}}>
                      <span style={{color:"var(--dm)"}}>Local domain:</span>
                      <input value={localDomain} onChange={e=>setLocalDomain(e.target.value)}
                        style={{
                          fontFamily:"var(--mono)",fontSize:11,maxWidth:120,
                          background:"var(--bg)",border:"1px solid var(--b2)",
                          color:"var(--tx)",padding:"2px 6px",borderRadius:3,
                        }}/>
                      <span style={{color:"var(--dm)",fontSize:10}}>
                        (default: lan — queries for *.{localDomain} forwarded to Unbound)
                      </span>
                    </div>
                  </div>
                </div>
              )}

              {/* Option C result */}
              {result.mode === "manual" && (
                <div style={{fontSize:12,lineHeight:1.8}}>
                  <div style={{color:"var(--dm)",marginBottom:10}}>
                    Install command (run on whichever machine will run ctrld):
                  </div>
                  <div style={{
                    background:"#060809",borderRadius:4,padding:"10px 14px",
                    fontFamily:"var(--mono)",fontSize:11,color:"#a0b0c0",marginBottom:12,
                  }}>{result.install_cmd}</div>
                  <div style={{color:"var(--dm)",marginBottom:6}}>
                    Then place the config below at: <code style={{fontFamily:"var(--mono)",color:"var(--ac)"}}>{result.config_path}</code>
                  </div>
                </div>
              )}

              {/* TOML config — shown for B and C, toggleable for A */}
              {result.toml && (
                <div>
                  <button className="btn bg" style={{fontSize:10,marginBottom:8}}
                    onClick={()=>setShowToml(s=>!s)}>
                    {showToml ? "Hide" : "Show"} ctrld.toml config
                  </button>
                  <button className="btn bg" style={{fontSize:10,marginBottom:8,marginLeft:6}}
                    onClick={()=>navigator.clipboard?.writeText(result.toml)}>
                    Copy toml
                  </button>
                  {showToml && (
                    <div style={{
                      background:"#060809",borderRadius:4,padding:"12px 14px",
                      fontFamily:"var(--mono)",fontSize:11,color:"#a0b0c0",
                      whiteSpace:"pre",overflowX:"auto",maxHeight:300,overflowY:"auto",
                    }}>{result.toml}</div>
                  )}
                </div>
              )}

              {/* Port 53 fix notification (Option A) */}
              {result.mode === "local" && result.port53?.needed && (
                <div style={{
                  marginTop:12,padding:"10px 14px",borderRadius:4,fontSize:11,lineHeight:1.7,
                  background: result.port53.fixed
                    ? "rgba(0,230,118,.06)" : "rgba(255,100,100,.06)",
                  border: result.port53.fixed
                    ? "1px solid rgba(0,230,118,.2)" : "1px solid rgba(255,100,100,.2)",
                }}>
                  <span style={{fontWeight:700,color:result.port53.fixed?"var(--ok)":"var(--err)"}}>
                    {result.port53.fixed ? "✓ " : "✗ "}Port 53 conflict:{" "}
                  </span>
                  <span style={{color:"var(--dm)"}}>{result.port53.message}</span>
                  {!result.port53.fixed && (
                    <div style={{marginTop:6,color:"var(--dm)"}}>
                      Fix manually:{" "}
                      <code style={{fontFamily:"var(--mono)",color:"var(--ac)"}}>
                        echo "[Resolve]" | sudo tee -a /etc/systemd/resolved.conf
                        &amp;&amp; echo "DNSStubListener=no" | sudo tee -a /etc/systemd/resolved.conf
                        &amp;&amp; sudo systemctl restart systemd-resolved
                      </code>
                    </div>
                  )}
                </div>
              )}

              {/* DHCP reminder */}
              {result.success && (
                <div style={{
                  marginTop:12,background:"rgba(0,229,255,.05)",
                  border:"1px solid rgba(0,229,255,.15)",borderRadius:4,
                  padding:"10px 14px",fontSize:11,color:"var(--dm)",lineHeight:1.7,
                }}>
                  <span style={{color:"var(--ac)",fontWeight:700}}>Next step: </span>
                  In the <strong>DHCP tab</strong>, configure each VLAN pool to use
                  the ctrld machine's IP as DNS (option 6). The switch will then hand
                  out the correct DNS server to every device on each VLAN automatically.
                </div>
              )}
            </div>
          )}
        </div>
      )}

      {/* Local Hostname Resolution */}
      <LocalHostnamesPanel session={session} onNeedAuth={onNeedAuth} />

      {/* DNS Enforcement ACLs */}
      <div className="panel">
        <div className="ph">◈ Enforce DNS on Switch</div>
        <div className="pb">
          <div style={{fontSize:12,color:"var(--dm)",lineHeight:1.8,marginBottom:12}}>
            Without enforcement, a device can ignore DHCP-assigned DNS and use
            <code style={{fontFamily:"var(--mono)",color:"var(--ac)"}}> 8.8.8.8</code> directly,
            bypassing all ctrld filtering. These ACLs block that:
            <ul style={{margin:"6px 0 0 18px",lineHeight:1.9}}>
              <li>Permit UDP/TCP port 53 <em>to ctrld only</em></li>
              <li>Deny UDP/TCP port 53 to everywhere else</li>
              <li>Deny TCP port 853 (DNS-over-TLS bypass)</li>
              <li>Permit everything else (internet still works)</li>
            </ul>
            Generated ACLs are shown for review — push them via the
            <strong> Review &amp; Push</strong> tab as usual.
          </div>
          <div style={{display:"flex",gap:10,alignItems:"flex-end",flexWrap:"wrap"}}>
            <div className="field" style={{margin:0,flex:"0 0 auto"}}>
              <label>ctrld IP address</label>
              <input
                value={enforceIp || (status?.dns_ip||"")}
                onChange={e=>setEnforceIp(e.target.value)}
                placeholder={status?.dns_ip || "e.g. 192.168.99.50"}
                style={{fontFamily:"var(--mono)",maxWidth:200}}
              />
            </div>
            <button className="btn bp" style={{alignSelf:"flex-end"}}
              onClick={generateEnforceAcls} disabled={enforceLoading||!session}>
              {enforceLoading ? "Generating..." : "Generate Enforcement ACLs"}
            </button>
            {!session && (
              <button className="btn bg" style={{alignSelf:"flex-end",fontSize:10}}
                onClick={onNeedAuth}>Authenticate</button>
            )}
          </div>

          {/* Enforcement result */}
          {enforceResult && (
            <div style={{marginTop:12}}>
              {enforceResult.success ? (
                <div>
                  <div style={{
                    padding:"8px 12px",borderRadius:4,marginBottom:10,fontSize:11,
                    background:"rgba(0,230,118,.06)",border:"1px solid rgba(0,230,118,.2)",
                    color:"var(--dm)",
                  }}>
                    <span style={{color:"var(--ok)",fontWeight:700}}>✓ </span>
                    Generated {enforceResult.count} commands for VLANs{" "}
                    {enforceResult.vlans?.join(", ")}.{" "}
                    Copy the commands below into the{" "}
                    <strong>Review &amp; Push</strong> tab → Raw CLI mode.
                  </div>
                  <div style={{
                    background:"#060809",borderRadius:4,padding:"10px 12px",
                    fontFamily:"var(--mono)",fontSize:10,color:"#a0b0c0",
                    whiteSpace:"pre",overflowX:"auto",maxHeight:260,overflowY:"auto",
                  }}>{enforceResult.commands?.join("\n")}</div>
                  <button className="btn bg" style={{marginTop:8,fontSize:10}}
                    onClick={()=>navigator.clipboard?.writeText(enforceResult.commands?.join("\n"))}>
                    Copy Commands
                  </button>
                </div>
              ) : (
                <div style={{
                  padding:"8px 12px",borderRadius:4,fontSize:11,
                  background:"rgba(255,100,100,.06)",border:"1px solid rgba(255,100,100,.2)",
                  color:"var(--err)",
                }}>
                  ✗ {enforceResult.message}
                </div>
              )}
            </div>
          )}
        </div>
      </div>

      {/* Quick reference */}
      <div className="panel">
        <div className="ph">◈ How It Works</div>
        <div className="pb">
          <div style={{
            display:"grid",gridTemplateColumns:"repeat(4,1fr)",gap:10,
            fontSize:11,textAlign:"center",
          }}>
            {[
              {icon:"📱", label:"Device", sub:"sends DNS query\nto switch DHCP\nassigned DNS IP"},
              {icon:"⚡", label:"ctrld", sub:"receives query\nidentifies VLAN\nby source subnet"},
              {icon:"🔒", label:"DoH3", sub:"forwards via\nencrypted HTTPS/3\nto Control D"},
              {icon:"🛡️", label:"Control D", sub:"applies your\nVLAN profile\nreturns answer"},
            ].map((s,i)=>(
              <div key={i} style={{
                background:"var(--bg)",border:"1px solid var(--b2)",borderRadius:5,
                padding:"12px 8px",
              }}>
                <div style={{fontSize:22,marginBottom:6}}>{s.icon}</div>
                <div style={{fontWeight:700,marginBottom:4,color:"var(--tx)"}}>{s.label}</div>
                <div style={{color:"var(--dm)",whiteSpace:"pre-line",lineHeight:1.6}}>{s.sub}</div>
              </div>
            ))}
          </div>
          <div style={{marginTop:12,fontSize:11,color:"var(--dm)",lineHeight:1.8}}>
            <span style={{color:"var(--ac)",fontWeight:700}}>Per-VLAN enforcement: </span>
            ctrld identifies which VLAN a DNS query came from by the source IP subnet.
            Each VLAN subnet maps to a different Control D profile. Staff get permissive
            filtering. IoT devices get strict filtering. Guests get aggressive ad/malware blocking.
            All encrypted via DoH3 — your ISP sees HTTPS traffic, not DNS queries.
          </div>
        </div>
      </div>
    </div>
  );
}
