import {
  html, useState, useEffect, useCallback, useRef,
} from './vendor/htm-preact.js';
import { t } from './i18n.js';
import * as platform from './platform.js';
import { Icon } from './icon.js';

// ── Node management (D5) ────────────────────────────────────────────────────
//
// Electron-only: talks to the local node daemon via its loopback HTTP API
// (platform.node.call), not over MNP/WebRTC. The MNP protocol types remain
// for potential future browser-side use.

function NodeServicePanel({ onChanged }) {
  const [info, setInfo] = useState(null);
  const [busy, setBusy] = useState('');
  const [err, setErr] = useState('');

  const refresh = useCallback(async () => {
    try {
      const r = await platform.node.service.status();
      setInfo(r);
      setErr('');
    } catch (e) {
      setErr(platform.bridgeMessage(e));
    }
  }, []);

  useEffect(() => {
    if (!platform.node.service.available) return;
    refresh();
    const timer = setInterval(refresh, 5000);
    return () => clearInterval(timer);
  }, [refresh]);

  const act = useCallback(async (name, fn) => {
    setBusy(name);
    setErr('');
    try {
      await fn();
      await refresh();
      if (onChanged) onChanged();
    } catch (e) {
      setErr(platform.bridgeMessage(e));
    } finally {
      setBusy('');
    }
  }, [refresh, onChanged]);

  // "off" / "signin" / "service" -- derived from the status payload, no new
  // backend field needed: mode/autostart already distinguish all three.
  const startupMode = (i) => {
    if (!i) return 'off';
    if (i.mode === 'service') return i.mode;
    return i.autostart ? 'signin' : 'off';
  };

  // Switching mode itself — the installer's own radio page only runs once,
  // at install time, so this is the only way back in if service mode was
  // declined there, or out if it is no longer wanted. One elevation, task +
  // firewall together, same script the installer runs.
  //
  // The two mechanisms are mutually exclusive by construction here: never
  // both installed at once, which would start the daemon twice (once at
  // boot via the Scheduled Task, again at sign-in via the Startup .vbs).
  // Always remove whichever one is currently active before installing the
  // target, so every transition -- not just the two that used to be
  // separate toggles -- keeps that invariant.
  const changeStartupMode = useCallback((target) => {
    const current = startupMode(info);
    if (target === current) return;
    act('startupMode', async () => {
      if (current === 'service') await platform.node.serviceMode.remove();
      else if (current === 'signin') await platform.node.autostart.remove();
      if (target === 'service') await platform.node.serviceMode.install();
      else if (target === 'signin') await platform.node.autostart.install();
    });
  }, [act, info]);

  if (!platform.node.service.available) return null;
  if (!info || info.supported === false) {
    return html`<div class="node-service">
      <span class="spinner"></span>${' '}${t('node.service_checking')}
    </div>`;
  }

  const KNOWN_STATES = ['active', 'inactive', 'failed', 'activating', 'deactivating'];
  const stateKey = KNOWN_STATES.includes(info.activeState) ? info.activeState : 'unknown';
  const running = info.activeState === 'active' || info.activeState === 'activating';
  const dot = info.activeState === 'active' ? 'online'
    : info.activeState === 'failed' ? 'offline' : 'unknown';
  const label = info.installed ? t('node.service_state_' + stateKey)
                                : t('node.service_not_installed');

  // Own row, below the status/actions card rather than a further item
  // crammed into its flex-wrap line -- that (plus two independent toggles
  // for what is really one choice) is what made this a mess before.
  const showStartupRow = (platform.node.autostart.available
    || platform.node.serviceMode.available) && typeof info.mode === 'string';

  return html`
    <div>
      <div class="node-service">
        <div class="node-service-status">
          <span class="presence presence-${dot}" title="${label}" aria-label="${label}"></span>
          <span>${label}</span>
        </div>
        ${err && html`<div class="error-msg">${err}</div>`}
        <div class="node-service-actions">
          <button class="btn btn-small btn-secondary" disabled=${!!busy || running}
            onClick=${() => act('start', () => platform.node.start())}>
            ${busy === 'start' ? t('node.service_starting') : t('node.service_start')}</button>
          ${info.installed && html`
            <button class="btn btn-small btn-secondary" disabled=${!!busy || !running}
              onClick=${() => act('stop', () => platform.node.service.stop())}>
              ${busy === 'stop' ? t('node.service_stopping') : t('node.service_stop')}</button>
            <button class="btn btn-small btn-secondary" disabled=${!!busy}
              onClick=${() => act('restart', () => platform.node.service.restart())}>
              ${busy === 'restart' ? t('node.service_restarting') : t('node.service_restart')}</button>
          `}
        </div>
        ${info.mode === 'service' && html`
          <p class="node-hint">${t('node.service_mode_hint')}</p>
        `}
      </div>
      ${showStartupRow && html`
        <div class="settings-row">
          <span class="settings-label">${t('node.startup_mode_label')}</span>
          <select class="settings-select" disabled=${!!busy}
            value=${startupMode(info)}
            onChange=${(e) => changeStartupMode(e.target.value)}>
            <option value="off">${t('node.startup_mode_off')}</option>
            <option value="signin">${t('node.startup_mode_signin')}</option>
            <option value="service" disabled=${!info.canElevate}>
              ${t('node.startup_mode_service')}</option>
          </select>
        </div>
        ${busy === 'startupMode' && html`
          <p class="settings-hint">${t('node.startup_mode_updating')}</p>`}
        ${!info.canElevate && html`
          <p class="settings-hint">${t('node.startup_mode_service_unavailable_hint')}</p>`}
      `}
    </div>`;
}

async function nodeCall(method, path, body) {
  return platform.node.call(method, path, body);
}

// Hand a generated file to the user: native Save As on the desktop, a blob
// download link everywhere else. Small text only (CSV export) — not the
// large-file download path in file-utils.js.
async function saveCsv(filename, text) {
  const bytes = new TextEncoder().encode(text);
  try {
    const target = await platform.nativeSave(filename, { auto: false });
    if (target && target.writable) {
      if (target.open) await target.open();
      await target.writable.write(bytes);
      await target.writable.close();
      return;
    }
  } catch { /* fall through to the blob path */ }
  const url = URL.createObjectURL(new Blob([bytes], { type: 'text/csv' }));
  const a = document.createElement('a');
  a.href = url;
  a.download = filename;
  document.body.appendChild(a);
  a.click();
  document.body.removeChild(a);
  URL.revokeObjectURL(url);
}

export function NodePage({ groups }) {
  const [status, setStatus] = useState('idle');
  const [error, setError] = useState('');
  const [nodeGroups, setNodeGroups] = useState([]);
  const [busy, setBusy] = useState(false);
  const [actionMsg, setActionMsg] = useState('');
  const [roster, setRoster] = useState(null);
  const [rosterGroup, setRosterGroup] = useState('');
  const [denylist, setDenylist] = useState(null);
  const [showDenylist, setShowDenylist] = useState(false);
  const [nodeSettings, setNodeSettings] = useState(null);
  const [editSettings, setEditSettings] = useState(null);
  const [savingSettings, setSavingSettings] = useState(false);
  const [editStun, setEditStun] = useState(null);
  const [savingStun, setSavingStun] = useState(false);
  const [stunInput, setStunInput] = useState('');
  const [editIce, setEditIce] = useState(null);
  const [savingIce, setSavingIce] = useState(false);
  const [iceInput, setIceInput] = useState('');
  const [operatorPaired, setOperatorPaired] = useState(false);
  const [pairBusy, setPairBusy] = useState(false);
  const [pairStatus, setPairStatus] = useState('');
  const [nodeInfo, setNodeInfo] = useState(null);
  const [peers, setPeers] = useState(null);
  const [audit, setAudit] = useState(null);
  const [auditEvent, setAuditEvent] = useState('');
  const [auditPageSize, setAuditPageSize] = useState(100);
  const [auditPage, setAuditPage] = useState(0);
  const [auditHasMore, setAuditHasMore] = useState(false);
  const [auditExporting, setAuditExporting] = useState(false);
  const [cacheCount, setCacheCount] = useState(null);
  const [nodeRoster, setNodeRoster] = useState(null);
  const [unlinkBusy, setUnlinkBusy] = useState(false);
  const [tab, setTab] = useState('overview');

  const fetchStatus = useCallback(async () => {
    setStatus('connecting');
    setError('');
    try {
      const detection = await platform.node.detect();
      if (!detection.detected) {
        setError(t('node.offline'));
        setStatus('error');
        return;
      }
      const result = await nodeCall('GET', '/api/groups');
      setNodeGroups(result.groups || []);
      setOperatorPaired(!!result.operator_paired);
      setNodeSettings(result.settings || null);
      try { setNodeInfo(await nodeCall('GET', '/api/status')); } catch {}
      setStatus('connected');
    } catch (err) {
      setError(platform.bridgeMessage(err));
      setStatus('error');
    }
  }, []);

  useEffect(() => { fetchStatus(); }, [fetchStatus]);

  useEffect(() => {
    if (nodeSettings && !editSettings) setEditSettings({ ...nodeSettings });
    if (nodeSettings && !editStun) setEditStun([...(nodeSettings.stun_servers || [])]);
    if (nodeSettings && !editIce) setEditIce([...(nodeSettings.ice_interfaces || [])]);
  }, [nodeSettings]);

  const refresh = useCallback(async () => {
    try {
      const result = await nodeCall('GET', '/api/groups');
      setNodeGroups(result.groups || []);
      setOperatorPaired(!!result.operator_paired);
      setNodeSettings(result.settings || null);
      try { setNodeInfo(await nodeCall('GET', '/api/status')); } catch {}
    } catch {}
  }, []);

  const addRoot = useCallback(async (groupId) => {
    const chosen = await platform.rootPicker.choose();
    if (!chosen) return;
    setBusy(true);
    setActionMsg('');
    try {
      await nodeCall('POST', `/api/groups/${groupId}/roots`, { path: chosen.path });
      await nodeCall('POST', '/api/reload');
      await refresh();
      setActionMsg(t('node.root_added'));
    } catch (err) {
      setActionMsg(platform.bridgeMessage(err));
    } finally {
      setBusy(false);
    }
  }, [refresh]);

  const removeRoot = useCallback(async (groupId, rootName) => {
    if (!confirm(t('node.root_remove_confirm', { name: rootName }))) return;
    setBusy(true);
    setActionMsg('');
    try {
      await nodeCall('DELETE', `/api/groups/${groupId}/roots/${encodeURIComponent(rootName)}`);
      await nodeCall('POST', '/api/reload');
      await refresh();
      setActionMsg(t('node.root_removed'));
    } catch (err) {
      setActionMsg(platform.bridgeMessage(err));
    } finally {
      setBusy(false);
    }
  }, [refresh]);

  const loadRoster = useCallback(async (groupId) => {
    setBusy(true);
    try {
      const result = await nodeCall('GET', `/api/roster?group_id=${groupId}`);
      setRoster(result);
      setRosterGroup(groupId);
    } catch (err) {
      setActionMsg(platform.bridgeMessage(err));
    } finally {
      setBusy(false);
    }
  }, []);

  const unpinMember = useCallback(async (userId) => {
    if (!confirm(t('node.unpin_confirm', { name: userId }))) return;
    setBusy(true);
    setActionMsg('');
    try {
      await nodeCall('POST', `/api/members/${userId}/unpin`);
      setActionMsg(t('node.unpin_done'));
      if (rosterGroup) await loadRoster(rosterGroup);
    } catch (err) {
      setActionMsg(platform.bridgeMessage(err));
    } finally {
      setBusy(false);
    }
  }, [rosterGroup, loadRoster]);

  const rotateGek = useCallback(async (groupId) => {
    if (!confirm(t('node.gek_rotate_confirm'))) return;
    setBusy(true);
    setActionMsg('');
    try {
      await nodeCall('POST', `/api/groups/${groupId}/gek?rotate=true`);
      setActionMsg(t('node.gek_rotated'));
    } catch (err) {
      setActionMsg(platform.bridgeMessage(err));
    } finally {
      setBusy(false);
    }
  }, []);

  const loadDenylist = useCallback(async () => {
    setBusy(true);
    try {
      const result = await nodeCall('GET', '/api/denylist');
      setDenylist(result);
      setShowDenylist(true);
    } catch (err) {
      setActionMsg(platform.bridgeMessage(err));
    } finally {
      setBusy(false);
    }
  }, []);

  const clearDenylist = useCallback(async (subject) => {
    const label = subject || t('node.denylist_clear_all');
    if (!confirm(t('node.denylist_clear_confirm', { subject: label }))) return;
    setBusy(true);
    setActionMsg('');
    try {
      await nodeCall('POST', `/api/denylist/clear?subject=${encodeURIComponent(subject)}`);
      setActionMsg(t('node.denylist_cleared'));
      await loadDenylist();
    } catch (err) {
      setActionMsg(platform.bridgeMessage(err));
    } finally {
      setBusy(false);
    }
  }, [loadDenylist]);

  const detachGroup = useCallback(async (name) => {
    if (!confirm(t('node.detach_confirm', { name }))) return;
    setBusy(true);
    setActionMsg('');
    try {
      await nodeCall('POST', '/api/groups/detach', { name });
      await nodeCall('POST', '/api/reload');
      setActionMsg(t('node.detached'));
      await refresh();
    } catch (err) {
      setActionMsg(platform.bridgeMessage(err));
    } finally {
      setBusy(false);
    }
  }, [refresh]);

  const reloadConfig = useCallback(async () => {
    setBusy(true);
    setActionMsg('');
    try {
      await nodeCall('POST', '/api/reload');
      setActionMsg(t('node.reloaded'));
      await refresh();
    } catch (err) {
      setActionMsg(platform.bridgeMessage(err));
    } finally {
      setBusy(false);
    }
  }, [refresh]);

  const saveSettings = useCallback(async () => {
    if (!editSettings) return;
    setSavingSettings(true);
    setActionMsg('');
    try {
      await nodeCall('PUT', '/api/node-settings', editSettings);
      setNodeSettings({ ...editSettings });
      setActionMsg(t('node.settings_saved'));
    } catch (err) {
      setActionMsg(platform.bridgeMessage(err));
    } finally {
      setSavingSettings(false);
    }
  }, [editSettings]);

  const saveStun = useCallback(async () => {
    if (!editStun) return;
    setSavingStun(true);
    setActionMsg('');
    try {
      await nodeCall('PUT', '/api/node-settings', { stun_servers: editStun });
      setNodeSettings(s => s ? { ...s, stun_servers: [...editStun] } : s);
      setActionMsg(t('node.stun_saved'));
    } catch (err) {
      setActionMsg(platform.bridgeMessage(err));
    } finally {
      setSavingStun(false);
    }
  }, [editStun]);

  const addStunServer = useCallback(() => {
    const url = stunInput.trim();
    if (!url) return;
    if (!url.startsWith('stun:')) {
      setActionMsg(t('node.stun_invalid'));
      return;
    }
    if (editStun && editStun.includes(url)) {
      setActionMsg(t('node.stun_duplicate'));
      return;
    }
    setEditStun(s => [...(s || []), url]);
    setStunInput('');
    setActionMsg('');
  }, [stunInput, editStun]);

  const removeStunServer = useCallback((idx) => {
    setEditStun(s => s.filter((_, i) => i !== idx));
  }, []);

  const moveStunServer = useCallback((idx, dir) => {
    setEditStun(s => {
      const a = [...s];
      const target = idx + dir;
      if (target < 0 || target >= a.length) return a;
      [a[idx], a[target]] = [a[target], a[idx]];
      return a;
    });
  }, []);

  const resetStunDefaults = useCallback(() => {
    // Keep in step with meshbay_node.config.DEFAULT_STUN_SERVERS.
    setEditStun([
      'stun:stun.l.google.com:19302',
      'stun:stun1.l.google.com:19302',
      'stun:stun.cloudflare.com:3478',
    ]);
    setActionMsg('');
  }, []);

  const saveIce = useCallback(async () => {
    if (!editIce) return;
    setSavingIce(true);
    setActionMsg('');
    try {
      await nodeCall('PUT', '/api/node-settings', { ice_interfaces: editIce });
      setNodeSettings(s => s ? { ...s, ice_interfaces: [...editIce] } : s);
      setActionMsg(t('node.ice_saved'));
    } catch (err) {
      setActionMsg(platform.bridgeMessage(err));
    } finally {
      setSavingIce(false);
    }
  }, [editIce]);

  const addIceInterface = useCallback(() => {
    const name = iceInput.trim();
    if (!name) return;
    if (editIce && editIce.includes(name)) {
      setActionMsg(t('node.ice_duplicate'));
      return;
    }
    setEditIce(s => [...(s || []), name]);
    setIceInput('');
    setActionMsg('');
  }, [iceInput, editIce]);

  const removeIceInterface = useCallback((idx) => {
    setEditIce(s => s.filter((_, i) => i !== idx));
  }, []);

  const resetIceAuto = useCallback(() => {
    setEditIce([]);
    setActionMsg('');
  }, []);

  const doPairOperator = useCallback(async () => {
    setPairBusy(true);
    setPairStatus('');
    try {
      const result = await nodeCall('POST', '/api/operator/pair');
      if (result && result.code) {
        await platform.node.setPairingCode(result.code);
      }
      setPairStatus('paired');
      setOperatorPaired(true);
      await refresh();
    } catch (err) {
      setPairStatus(platform.bridgeMessage(err));
    } finally {
      setPairBusy(false);
    }
  }, [refresh]);

  const loadPeers = useCallback(async () => {
    setBusy(true);
    try {
      const r = await nodeCall('GET', '/api/peers');
      setPeers(r.peers || []);
    } catch (err) {
      setActionMsg(platform.bridgeMessage(err));
    } finally {
      setBusy(false);
    }
  }, []);

  const loadAudit = useCallback(async () => {
    setBusy(true);
    try {
      const offset = auditPage * auditPageSize;
      let path = `/api/audit?limit=${auditPageSize}&offset=${offset}`;
      if (auditEvent) path += `&event=${encodeURIComponent(auditEvent)}`;
      const r = await nodeCall('GET', path);
      setAudit(r.entries || []);
      setAuditHasMore(!!r.has_more);
    } catch (err) {
      setActionMsg(platform.bridgeMessage(err));
    } finally {
      setBusy(false);
    }
  }, [auditEvent, auditPage, auditPageSize]);

  const exportAuditCsv = useCallback(async () => {
    setAuditExporting(true);
    setActionMsg('');
    try {
      // Every entry that matches the current event filter, not just one page.
      // Walk the log newest-first in blocks; de-dupe by id so an event written
      // mid-export (which shifts rows to a higher offset) cannot duplicate one.
      const PAGE = 1000;
      const MAX_PAGES = 1000;          // 1M-row stop, so a bug cannot spin forever
      const evq = auditEvent ? `&event=${encodeURIComponent(auditEvent)}` : '';
      const seen = new Set();
      const rows = [];
      for (let page = 0; page < MAX_PAGES; page++) {
        const r = await nodeCall(
          'GET', `/api/audit?limit=${PAGE}&offset=${page * PAGE}${evq}`);
        const batch = r.entries || [];
        for (const e of batch) {
          if (!seen.has(e.id)) { seen.add(e.id); rows.push(e); }
        }
        if (!r.has_more || batch.length === 0) break;
      }

      const cols = ['timestamp', 'event', 'user', 'user_id', 'ip',
        'group', 'group_id', 'detail'];
      const esc = (v) => {
        const s = v == null ? '' : String(v);
        return /[",\n\r]/.test(s) ? '"' + s.replace(/"/g, '""') + '"' : s;
      };
      const lines = [cols.join(',')];
      for (const e of rows) {
        lines.push([
          new Date(e.timestamp * 1000).toISOString(),
          e.event, e.username || '', e.user_id || '', e.ip || '',
          e.group_name || '', e.group_id || '', e.detail || '',
        ].map(esc).join(','));
      }
      const csv = lines.join('\r\n') + '\r\n';
      const stamp = new Date().toISOString().slice(0, 19).replace(/[:T]/g, '-');
      await saveCsv(`node-audit-${stamp}.csv`, csv);
      setActionMsg(t('node.audit_exported', { n: rows.length }));
    } catch (err) {
      setActionMsg(platform.bridgeMessage(err));
    } finally {
      setAuditExporting(false);
    }
  }, [auditEvent]);

  const loadCache = useCallback(async () => {
    setBusy(true);
    try {
      const r = await nodeCall('GET', '/api/index-cache');
      setCacheCount(r.count ?? 0);
    } catch (err) {
      setActionMsg(platform.bridgeMessage(err));
    } finally {
      setBusy(false);
    }
  }, []);

  const pruneCache = useCallback(async () => {
    setBusy(true);
    setActionMsg('');
    try {
      const r = await nodeCall('POST', '/api/index-cache/prune');
      setCacheCount(r.kept ?? null);
      setActionMsg(t('node.maintenance_pruned', { n: r.removed ?? 0 }));
    } catch (err) {
      setActionMsg(platform.bridgeMessage(err));
    } finally {
      setBusy(false);
    }
  }, []);

  const loadNodeRoster = useCallback(async () => {
    setBusy(true);
    try {
      const r = await nodeCall('GET', '/api/roster');
      setNodeRoster(r);
    } catch (err) {
      setActionMsg(platform.bridgeMessage(err));
    } finally {
      setBusy(false);
    }
  }, []);

  const unpinNodeMember = useCallback(async (userId) => {
    if (!confirm(t('node.unpin_confirm', { name: userId }))) return;
    setBusy(true);
    setActionMsg('');
    try {
      await nodeCall('POST', `/api/members/${userId}/unpin`);
      setActionMsg(t('node.unpin_done'));
      await loadNodeRoster();
    } catch (err) {
      setActionMsg(platform.bridgeMessage(err));
    } finally {
      setBusy(false);
    }
  }, [loadNodeRoster]);

  const unlinkNode = useCallback(async () => {
    if (!confirm(t('node.unlink_confirm'))) return;
    setUnlinkBusy(true);
    setActionMsg('');
    try {
      await nodeCall('DELETE', '/api/unlink');
      setActionMsg(t('node.unlink_done'));
      await refresh();
    } catch (err) {
      setActionMsg(platform.bridgeMessage(err));
    } finally {
      setUnlinkBusy(false);
    }
  }, [refresh]);

  // Each read-only tab loads itself on open — no Load button.
  useEffect(() => {
    if (status !== 'connected') return;
    if (tab === 'overview') loadCache();
    else if (tab === 'roster') loadNodeRoster();
    else if (tab === 'peers') loadPeers();
  }, [tab, status, loadCache, loadNodeRoster, loadPeers]);

  // Audit reloads on tab open and whenever the filter or page changes
  // (loadAudit's identity tracks auditEvent / auditPage / auditPageSize).
  useEffect(() => {
    if (status === 'connected' && tab === 'audit') loadAudit();
  }, [tab, status, loadAudit]);

  if (status === 'idle' || status === 'connecting') {
    return html`<div class="page-content">
      <h2>${t('node.title')}</h2>
      <${NodeServicePanel} onChanged=${fetchStatus} />
      <p class="page-message"><span class="spinner"></span>${' '}${t('status.connecting')}</p>
    </div>`;
  }
  if (status === 'error') {
    return html`<div class="page-content">
      <h2>${t('node.title')}</h2>
      <${NodeServicePanel} onChanged=${fetchStatus} />
      <p class="error-msg">${error}</p>
      <button class="btn btn-primary" onClick=${fetchStatus}>
        ${t('node.retry')}</button>
    </div>`;
  }

  return html`
    <div class="page-content node-page">
      <div class="node-header">
        <h2>${t('node.title')}</h2>
        <button class="btn btn-small btn-secondary" disabled=${busy}
          onClick=${reloadConfig}>
          ${t('node.reload')}</button>
      </div>
      <${NodeServicePanel} onChanged=${fetchStatus} />
      ${actionMsg && html`<div class="node-message">${actionMsg}</div>`}
      ${!operatorPaired && html`
        <div class="node-pair-banner">
          <p>${t('node.pair_needed')}</p>
          <button class="btn btn-primary btn-small"
            disabled=${pairBusy}
            onClick=${doPairOperator}>
            ${pairBusy ? t('node.settings_saving') : t('node.pair_button')}</button>
          ${pairStatus === 'paired'
            ? html`<p class="success-msg">${t('node.pair_success')}</p>`
            : pairStatus ? html`<p class="error-msg">${pairStatus}</p>` : null}
        </div>
      `}
      <div class="admin-tabs">
        ${['overview', 'groups', 'roster', 'peers', 'audit', 'settings'].map(k => html`
          <button key=${k} class="admin-tab ${tab === k ? 'active' : ''}"
            onClick=${() => setTab(k)}>${t('node.tab_' + k)}</button>
        `)}
      </div>

      ${tab === 'overview' && nodeInfo && html`
        <div class="node-group">
          <span class="settings-heading">${t('node.overview')}</span>
          <table class="node-table">
            <tbody>
              <tr><td>${t('node.overview_version')}</td><td>${nodeInfo.version || '—'}</td></tr>
              <tr><td>${t('node.overview_node_id')}</td>
                  <td><code>${nodeInfo.endpoint_hint || nodeInfo.pk_node_ed25519 || '—'}</code></td></tr>
              <tr><td>${t('node.overview_quic_port')}</td><td>${nodeInfo.quic_port || '—'}</td></tr>
              <tr><td>${t('node.overview_hub')}</td><td>${nodeInfo.hub_url || '—'}</td></tr>
            </tbody>
          </table>
        </div>
      `}

      ${tab === 'groups' && (() => {
        const hubIds = new Set((groups || []).map(g => g.id));
        return nodeGroups.map(g => {
          const stale = !hubIds.has(g.id);
          return html`
        <div class="node-group ${stale ? 'node-group-stale' : ''}" key=${g.id}>
          <div class="node-group-header">
            <h3>${g.name}${stale ? html` <span class="node-warn">${t('node.stale')}</span>` : ''}</h3>
            <div class="node-group-stats">
              <span>${t('node.files', { n: g.file_count })}</span>
              <span>${t('node.peers', { n: g.peers })}</span>
              ${!g.has_gek && html`
                <span class="node-warn">${t('node.no_gek')}</span>`}
            </div>
          </div>
          <div class="node-roots">
            <div class="node-roots-header">
              <span class="settings-heading">${t('node.roots')}</span>
            </div>
            ${(g.roots || []).map(r => html`
              <div class="node-root ${!r.available ? 'node-root-unavailable' : ''}"
                   key=${r.name}>
                <div class="node-root-info">
                  <span class="node-root-name">
                    <${Icon} name="folder" />
                    ${r.name}
                  </span>
                  ${r.writable && html`
                    <span class="node-root-badge">${t('node.root_rw')}</span>`}
                  ${r.removable && html`
                    <span class="node-root-badge">${t('node.removable')}</span>`}
                  ${r.ejected ? html`
                    <span class="node-root-badge node-root-badge-warn">
                      ${t('group.root_ejected')}</span>`
                  : !r.available && html`
                    <span class="node-root-badge node-root-badge-warn">
                      ${t('node.unavailable')}</span>`}
                </div>
                ${/* Removing a writable root is allowed now — several can be
                      writable, and a group with none is a valid read-only
                      group. The last root is still the one that cannot go. */''}
                ${(g.roots || []).length > 1 && html`
                  <button class="btn btn-small btn-danger"
                    disabled=${busy} onClick=${() => removeRoot(g.id, r.name)}>
                    ${t('node.remove_root')}</button>`}
              </div>
            `)}
            <button class="btn btn-small btn-secondary"
              disabled=${busy} onClick=${() => addRoot(g.id)}>
              <${Icon} name="folder-plus" /> ${t('node.add_root')}
            </button>
          </div>

          <div class="node-section">
            <span class="settings-heading">${t('node.gek')}</span>
            ${g.has_gek ? (g.visibility !== 'public' ? html`
              <button class="btn btn-small btn-secondary" disabled=${busy}
                onClick=${() => rotateGek(g.id)}>
                ${t('node.gek_rotate')}</button>
            ` : html`<p class="node-hint">${t('node.gek_public_hint')}</p>`) : html`
              <p class="node-hint">${t('node.gek_init_hint')}</p>
            `}
          </div>

          <div class="node-section">
            <div class="node-section-header">
              <span class="settings-heading">${t('node.roster')}</span>
              <button class="btn btn-small btn-secondary" disabled=${busy}
                onClick=${() => loadRoster(g.id)}>
                ${t('node.roster_load')}</button>
            </div>
            ${roster && rosterGroup === g.id && html`
              <div class="node-roster">
                ${(roster.members || []).length === 0 ? html`
                  <p class="node-hint">${t('node.roster_empty')}</p>
                ` : html`
                  <table class="node-table">
                    <thead><tr>
                      <th>${t('node.roster_user')}</th>
                      <th>${t('node.roster_role')}</th>
                      <th>${t('node.roster_status')}</th>
                      <th>${t('node.roster_via')}</th>
                      <th></th>
                    </tr></thead>
                    <tbody>
                      ${(roster.members || []).map(m => html`
                        <tr key=${m.user_id}>
                          <td>${m.username || m.user_id.slice(0, 12)}</td>
                          <td>${m.role}</td>
                          <td>${m.status}</td>
                          <td>${m.pinned_via || ''}</td>
                          <td>${m.pk_ed25519 && html`
                            <button class="btn btn-small btn-danger"
                              disabled=${busy}
                              onClick=${() => unpinMember(m.user_id)}>
                              ${t('node.unpin')}</button>
                          `}</td>
                        </tr>
                      `)}
                    </tbody>
                  </table>
                `}
                ${(roster.invites || []).length > 0 && html`
                  <p class="node-hint">${t('node.roster_invites',
                    { n: roster.invites.length })}</p>
                `}
              </div>
            `}
          </div>

          ${stale && html`
            <div class="node-section">
              <button class="btn btn-small btn-danger" disabled=${busy}
                onClick=${() => detachGroup(g.name)}>
                ${t('node.detach_group')}</button>
            </div>
          `}
        </div>
      `;
        });
      })()}

      ${tab === 'roster' && html`
      <div class="node-group">
        <span class="settings-heading">${t('node.node_roster')}</span>
        <p class="node-hint">${t('node.node_roster_hint')}</p>
        ${!nodeRoster ? html`
          <p class="node-hint">${t('node.loading')}</p>
        ` : (nodeRoster.members || []).length === 0 ? html`
          <p class="node-hint">${t('node.roster_empty')}</p>
        ` : html`
          <div class="node-table-scroll">
            <table class="node-table">
              <thead><tr>
                <th>${t('node.roster_user')}</th>
                <th>${t('node.roster_role')}</th>
                <th>${t('node.roster_status')}</th>
                <th>${t('node.roster_scope')}</th>
                <th>${t('node.roster_via')}</th>
                <th></th>
              </tr></thead>
              <tbody>
                ${(nodeRoster.members || []).map(m => html`
                  <tr key=${m.user_id + ':' + (m.group_id || '')}>
                    <td>${m.username || m.user_id.slice(0, 12)}</td>
                    <td>${m.role}</td>
                    <td>${m.status}</td>
                    <td>${m.group_id ? m.group_id.slice(0, 8) : t('node.roster_scope_node')}</td>
                    <td>${m.pinned_via || ''}</td>
                    <td>${m.pk_ed25519 && html`
                      <button class="btn btn-small btn-danger" disabled=${busy}
                        onClick=${() => unpinNodeMember(m.user_id)}>
                        ${t('node.unpin')}</button>
                    `}</td>
                  </tr>
                `)}
              </tbody>
            </table>
          </div>
        `}
      </div>
      `}

      ${tab === 'peers' && html`
      <div class="node-group">
        <span class="settings-heading">${t('node.peers_title')}</span>
        ${!peers ? html`
          <p class="node-hint">${t('node.loading')}</p>
        ` : peers.length === 0 ? html`
          <p class="node-hint">${t('node.peers_empty')}</p>
        ` : html`
          <div class="node-table-scroll">
            <table class="node-table">
              <thead><tr>
                <th>${t('node.peers_user')}</th>
                <th>${t('node.peers_ip')}</th>
                <th>${t('node.peers_group')}</th>
                <th>${t('node.peers_state')}</th>
              </tr></thead>
              <tbody>
                ${peers.map(p => html`
                  <tr key=${p.peer_id}>
                    <td>${p.username || (p.user_id || '').slice(0, 12) || '—'}</td>
                    <td>${p.remote_ip || '—'}</td>
                    <td>${p.group_name || (p.group_id ? p.group_id.slice(0, 8) : '—')}</td>
                    <td>${p.state || '—'}</td>
                  </tr>
                `)}
              </tbody>
            </table>
          </div>
        `}
      </div>
      `}

      ${tab === 'audit' && html`
      <div class="node-group">
        <div class="node-section-header">
          <span class="settings-heading">${t('node.audit_title')}</span>
          <button class="btn btn-small btn-secondary"
            disabled=${auditExporting || busy}
            onClick=${exportAuditCsv}>
            ${auditExporting ? t('node.audit_exporting') : t('node.audit_export')}</button>
        </div>
        <div class="stun-add-row">
          <select value=${auditEvent}
            onChange=${e => { setAuditEvent(e.target.value); setAuditPage(0); }}>
            <option value="">${t('node.audit_all_events')}</option>
            <option value="handshake">handshake</option>
            <option value="file_download">file_download</option>
            <option value="file_upload">file_upload</option>
            <option value="file_delete">file_delete</option>
            <option value="stream_video">stream_video</option>
            <option value="chat_message">chat_message</option>
            <option value="disconnect">disconnect</option>
            <option value="auth_failed">auth_failed</option>
          </select>
          <select value=${String(auditPageSize)}
            onChange=${e => { setAuditPageSize(parseInt(e.target.value) || 100); setAuditPage(0); }}>
            <option value="50">50</option>
            <option value="100">100</option>
            <option value="200">200</option>
            <option value="500">500</option>
          </select>
        </div>
        ${!audit ? html`
          <p class="node-hint">${t('node.loading')}</p>
        ` : audit.length === 0 ? html`
          <p class="node-hint">${t('node.audit_empty')}</p>
        ` : html`
          <div class="node-table-scroll">
            <table class="node-table node-table-audit">
              <thead><tr>
                <th>${t('node.audit_time')}</th>
                <th>${t('node.audit_event')}</th>
                <th>${t('node.audit_user')}</th>
                <th>${t('node.audit_ip')}</th>
                <th>${t('node.audit_group')}</th>
                <th>${t('node.audit_detail')}</th>
              </tr></thead>
              <tbody>
                ${audit.map(e => html`
                  <tr key=${e.id}>
                    <td>${new Date(e.timestamp * 1000).toLocaleString()}</td>
                    <td>${e.event}</td>
                    <td>${e.username || (e.user_id || '').slice(0, 8)}</td>
                    <td>${e.ip || '—'}</td>
                    <td>${e.group_name || (e.group_id ? e.group_id.slice(0, 8) : '—')}</td>
                    <td>${e.detail || ''}</td>
                  </tr>
                `)}
              </tbody>
            </table>
          </div>
        `}
        ${audit && html`
          <div class="node-audit-pager">
            <button class="btn btn-small btn-secondary"
              disabled=${busy || auditPage === 0}
              onClick=${() => setAuditPage(p => Math.max(0, p - 1))}>
              ${t('node.audit_prev')}</button>
            <span class="node-hint">${t('node.audit_page', { n: auditPage + 1 })}</span>
            <button class="btn btn-small btn-secondary"
              disabled=${busy || !auditHasMore}
              onClick=${() => setAuditPage(p => p + 1)}>
              ${t('node.audit_next')}</button>
          </div>
        `}
      </div>
      `}

      ${tab === 'overview' && html`
      <div class="node-group">
        <span class="settings-heading">${t('node.maintenance')}</span>
        ${cacheCount === null ? html`
          <p class="node-hint">${t('node.loading')}</p>
        ` : html`
          <p class="node-hint">${t('node.maintenance_cache', { n: cacheCount })}</p>
          <button class="btn btn-small btn-secondary" disabled=${busy}
            onClick=${pruneCache}>${t('node.maintenance_prune')}</button>
        `}
      </div>
      `}

      ${tab === 'settings' && editSettings && html`
        <div class="node-group">
          <span class="settings-heading">${t('node.settings')}</span>
          <p class="node-hint">${t('node.settings_edit_hint')}</p>
          <div class="node-settings-grid">
            <label class="node-setting">
              <span class="node-setting-label">${t('node.setting_invite_ttl')}</span>
              <div class="node-setting-input">
                <input type="number" min="1" value=${editSettings.invite_ttl_hours}
                  onInput=${e => setEditSettings(s => ({...s, invite_ttl_hours: parseInt(e.target.value) || 1}))} />
                <span class="node-setting-unit">${t('node.setting_unit_hours')}</span>
              </div>
            </label>
            <label class="node-setting">
              <span class="node-setting-label">${t('node.setting_pair_ttl')}</span>
              <div class="node-setting-input">
                <input type="number" min="1" value=${editSettings.pair_ttl_hours}
                  onInput=${e => setEditSettings(s => ({...s, pair_ttl_hours: parseInt(e.target.value) || 1}))} />
                <span class="node-setting-unit">${t('node.setting_unit_hours')}</span>
              </div>
            </label>
            <label class="node-setting">
              <span class="node-setting-label">${t('node.setting_device_ttl')}</span>
              <div class="node-setting-input">
                <input type="number" min="1" value=${editSettings.device_request_ttl_minutes}
                  onInput=${e => setEditSettings(s => ({...s, device_request_ttl_minutes: parseInt(e.target.value) || 1}))} />
                <span class="node-setting-unit">${t('node.setting_unit_minutes')}</span>
              </div>
            </label>
            <label class="node-setting">
              <span class="node-setting-label">${t('node.setting_max_streams')}</span>
              <div class="node-setting-input">
                <input type="number" min="1" value=${editSettings.max_concurrent_streams}
                  onInput=${e => setEditSettings(s => ({...s, max_concurrent_streams: parseInt(e.target.value) || 1}))} />
              </div>
            </label>
            <label class="node-setting">
              <span class="node-setting-label">${t('node.setting_max_downloads')}</span>
              <div class="node-setting-input">
                <input type="number" min="1" value=${editSettings.max_concurrent_downloads}
                  onInput=${e => setEditSettings(s => ({...s, max_concurrent_downloads: parseInt(e.target.value) || 1}))} />
              </div>
            </label>
            <label class="node-setting">
              <span class="node-setting-label">${t('node.setting_max_uploads')}</span>
              <div class="node-setting-input">
                <input type="number" min="1" value=${editSettings.max_concurrent_uploads}
                  onInput=${e => setEditSettings(s => ({...s, max_concurrent_uploads: parseInt(e.target.value) || 1}))} />
              </div>
            </label>
            <label class="node-setting">
              <span class="node-setting-label">${t('node.setting_transcode')}</span>
              <div class="node-setting-input">
                <input type="checkbox" checked=${editSettings.transcode_incompatible_video}
                  onChange=${e => setEditSettings(s => ({...s, transcode_incompatible_video: e.target.checked}))} />
              </div>
            </label>
          </div>
          <div class="node-settings-actions">
            <button class="btn btn-primary btn-small" disabled=${savingSettings || busy}
              onClick=${saveSettings}>
              ${savingSettings ? t('node.settings_saving') : t('node.settings_save')}</button>
          </div>
        </div>
      `}

      ${tab === 'settings' && editStun && html`
        <div class="node-group">
          <span class="settings-heading">${t('node.stun_servers')}</span>
          <p class="node-hint">${t('node.stun_hint')}</p>
          ${editStun.length === 0 ? html`
            <p class="node-hint">${t('node.stun_empty')}</p>
          ` : html`
            <div class="stun-server-list">
              ${editStun.map((url, idx) => html`
                <div class="stun-server-entry" key=${url + idx}>
                  <span class="stun-server-url">${url}</span>
                  <div class="stun-server-actions">
                    <button class="btn btn-small btn-icon" disabled=${idx === 0}
                      onClick=${() => moveStunServer(idx, -1)}
                      title=${t('node.stun_move_up')}>▲</button>
                    <button class="btn btn-small btn-icon" disabled=${idx === editStun.length - 1}
                      onClick=${() => moveStunServer(idx, 1)}
                      title=${t('node.stun_move_down')}>▼</button>
                    <button class="btn btn-small btn-danger btn-icon"
                      onClick=${() => removeStunServer(idx)}
                      title=${t('node.stun_remove')}>✕</button>
                  </div>
                </div>
              `)}
            </div>
          `}
          <div class="stun-add-row">
            <input type="text" placeholder=${t('node.stun_add_placeholder')}
              value=${stunInput}
              onInput=${e => setStunInput(e.target.value)}
              onKeyDown=${e => { if (e.key === 'Enter') addStunServer(); }} />
            <button class="btn btn-small btn-secondary" onClick=${addStunServer}>
              ${t('node.stun_add')}</button>
          </div>
          <div class="node-settings-actions">
            <button class="btn btn-primary btn-small" disabled=${savingStun || busy}
              onClick=${saveStun}>
              ${savingStun ? t('node.stun_saving') : t('node.stun_save')}</button>
            <button class="btn btn-small btn-secondary" disabled=${savingStun || busy}
              onClick=${resetStunDefaults}>
              ${t('node.stun_reset')}</button>
          </div>
        </div>
      `}

      ${tab === 'settings' && editIce && html`
        <div class="node-group">
          <span class="settings-heading">${t('node.ice_interfaces')}</span>
          <p class="node-hint">${editIce.length === 0
            ? t('node.ice_auto_hint')
            : t('node.ice_manual_hint')}</p>
          ${editIce.length > 0 && html`
            <div class="stun-server-list">
              ${editIce.map((name, idx) => html`
                <div class="stun-server-entry" key=${name + idx}>
                  <span class="stun-server-url">${name}</span>
                  <div class="stun-server-actions">
                    <button class="btn btn-small btn-danger btn-icon"
                      onClick=${() => removeIceInterface(idx)}
                      title=${t('node.ice_remove')}>✕</button>
                  </div>
                </div>
              `)}
            </div>
          `}
          <div class="stun-add-row">
            <input type="text" placeholder=${t('node.ice_add_placeholder')}
              value=${iceInput}
              onInput=${e => setIceInput(e.target.value)}
              onKeyDown=${e => { if (e.key === 'Enter') addIceInterface(); }} />
            <button class="btn btn-small btn-secondary" onClick=${addIceInterface}>
              ${t('node.ice_add')}</button>
          </div>
          <div class="node-settings-actions">
            <button class="btn btn-primary btn-small" disabled=${savingIce || busy}
              onClick=${saveIce}>
              ${savingIce ? t('node.ice_saving') : t('node.ice_save')}</button>
            ${editIce.length > 0 && html`
              <button class="btn btn-small btn-secondary" disabled=${savingIce || busy}
                onClick=${resetIceAuto}>
                ${t('node.ice_reset_auto')}</button>
            `}
          </div>
        </div>
      `}

      ${tab === 'settings' && html`
      <div class="node-group">
        <div class="node-section-header">
          <span class="settings-heading">${t('node.denylist')}</span>
          <button class="btn btn-small btn-secondary" disabled=${busy}
            onClick=${loadDenylist}>
            ${t('node.denylist_load')}</button>
        </div>
        ${showDenylist && denylist && html`
          <div class="node-denylist">
            ${denylist.count === 0 ? html`
              <p class="node-hint">${t('node.denylist_empty')}</p>
            ` : html`
              <p class="node-hint">${t('node.denylist_count',
                { n: denylist.count })}</p>
              ${(denylist.users || []).map(u => html`
                <div class="node-deny-entry" key=${'u:' + u}>
                  <span>user: ${u}</span>
                  <button class="btn btn-small btn-danger" disabled=${busy}
                    onClick=${() => clearDenylist(u)}>
                    ${t('node.denylist_remove')}</button>
                </div>
              `)}
              ${(denylist.groups || []).map(g => html`
                <div class="node-deny-entry" key=${'g:' + g}>
                  <span>group: ${g}</span>
                  <button class="btn btn-small btn-danger" disabled=${busy}
                    onClick=${() => clearDenylist(g)}>
                    ${t('node.denylist_remove')}</button>
                </div>
              `)}
              ${(denylist.jtis || []).map(j => html`
                <div class="node-deny-entry" key=${'j:' + j}>
                  <span>token: ${j.slice(0, 16)}</span>
                  <button class="btn btn-small btn-danger" disabled=${busy}
                    onClick=${() => clearDenylist(j)}>
                    ${t('node.denylist_remove')}</button>
                </div>
              `)}
              <button class="btn btn-small btn-danger" disabled=${busy}
                onClick=${() => clearDenylist('')}>
                ${t('node.denylist_clear_all')}</button>
            `}
          </div>
        `}
      </div>
      `}

      ${tab === 'settings' && nodeInfo && nodeInfo.status !== 'waiting_for_node_key' && html`
        <div class="node-group node-group-danger">
          <span class="settings-heading">${t('node.unlink_title')}</span>
          <p class="node-hint">${t('node.unlink_hint')}</p>
          <button class="btn btn-small btn-danger" disabled=${unlinkBusy || busy}
            onClick=${unlinkNode}>${t('node.unlink_button')}</button>
        </div>
      `}
    </div>
  `;
}