(function () {
  function basePath() {
    return document.body.getAttribute('data-base-path') || '';
  }

  function canOperate() {
    return document.body.getAttribute('data-can-ra-operate') === '1';
  }

  function canAdmin() {
    return document.body.getAttribute('data-can-ra-admin') === '1';
  }

  function apiUrl(action, params) {
    const q = new URLSearchParams(params || {});
    q.set('action', action);
    return basePath() + '/api/remote_access.php?' + q.toString();
  }

  function setStatus(msg, isError) {
    const el = document.getElementById('ra-status');
    if (!el) return;
    el.textContent = msg;
    el.classList.toggle('error', !!isError);
  }

  async function fetchJson(url, opts) {
    const res = await fetch(url, Object.assign({ credentials: 'same-origin' }, opts || {}));
    const data = await res.json().catch(() => ({}));
    if (!res.ok || data.ok === false) {
      throw new Error(data.error || ('HTTP ' + res.status));
    }
    return data;
  }

  function esc(s) {
    const d = document.createElement('div');
    d.textContent = s == null ? '' : String(s);
    return d.innerHTML;
  }

  function renderDevices(devices) {
    const tbody = document.getElementById('ra-devices-tbody');
    if (!tbody) return;
    tbody.innerHTML = '';
    if (!devices || !devices.length) {
      tbody.innerHTML = '<tr><td colspan="6" class="muted">No devices have polled yet.</td></tr>';
      return;
    }
    (devices || []).forEach((d) => {
      const tr = document.createElement('tr');
      const wl = Number(d.whitelisted) === 1;
      const canOpen = canOperate() && wl && (d.opt_in_mode === 'wireguard' || d.opt_in_mode === 'rssh');
      const openDisabled = canOpen ? '' : ' disabled title="Whitelist device and wait for WireGuard opt-in poll"';
      const wlDisabled = canAdmin() ? '' : ' disabled';
      tr.innerHTML =
        '<td><code class="ra-device-id">' + esc(d.device_id) + '</code></td>' +
        '<td>' + esc(d.opt_in_mode || 'none') + '</td>' +
        '<td>' + (wl ? '<span class="tag-pill">yes</span>' : 'no') + '</td>' +
        '<td>' + esc(d.last_seen_at || '—') + '</td>' +
        '<td>' + esc(d.app_version || '—') + '</td>' +
        '<td>' +
        '<button type="button" class="btn btn-sm btn-primary"' + openDisabled + ' data-open-session="' + esc(d.device_id) + '">Open session</button> ' +
        '<button type="button" class="btn btn-sm"' + wlDisabled + ' data-toggle-wl="' + esc(d.device_id) + '" data-wl="' + (wl ? '0' : '1') + '">' +
        (wl ? 'Revoke WL' : 'Whitelist') + '</button> ' +
        '<button type="button" class="btn btn-sm" data-copy-id="' + esc(d.device_id) + '">Copy ID</button>' +
        '</td>';
      tbody.appendChild(tr);
    });
  }

  function renderSessions(active, inactive) {
    const aBody = document.getElementById('ra-active-tbody');
    const iBody = document.getElementById('ra-inactive-tbody');
    if (aBody) {
      aBody.innerHTML = '';
      if (!active || !active.length) {
        aBody.innerHTML = '<tr><td colspan="6" class="muted">No pending or active sessions.</td></tr>';
      }
      (active || []).forEach((s) => {
        const tr = document.createElement('tr');
        const closeBtn = canOperate()
          ? '<button type="button" class="btn btn-sm" data-close-session="' + esc(s.session_id) + '" data-device="' + esc(s.device_id) + '">Close</button>'
          : '';
        tr.innerHTML =
          '<td><code>' + esc(s.session_id) + '</code></td>' +
          '<td><code>' + esc(s.device_id) + '</code></td>' +
          '<td>' + esc(s.status) + '</td>' +
          '<td>' + esc(s.tunnel) + '</td>' +
          '<td>' + esc(s.endpoint || '—') + '</td>' +
          '<td>' + closeBtn + '</td>';
        aBody.appendChild(tr);
      });
    }
    if (iBody) {
      iBody.innerHTML = '';
      (inactive || []).forEach((s) => {
        const tr = document.createElement('tr');
        tr.innerHTML =
          '<td><code>' + esc(s.session_id) + '</code></td>' +
          '<td><code>' + esc(s.device_id) + '</code></td>' +
          '<td>' + esc(s.status) + '</td>' +
          '<td>' + esc(s.closed_at || '—') + '</td>' +
          '<td>' + esc(s.close_reason || '—') + '</td>';
        iBody.appendChild(tr);
      });
      if (!inactive || !inactive.length) {
        iBody.innerHTML = '<tr><td colspan="5" class="muted">No closed sessions yet.</td></tr>';
      }
    }
  }

  function renderEvents(events) {
    const tbody = document.getElementById('ra-events-tbody');
    if (!tbody) return;
    tbody.innerHTML = '';
    if (!events || !events.length) {
      tbody.innerHTML = '<tr><td colspan="4" class="muted">No audit events.</td></tr>';
      return;
    }
    (events || []).forEach((e) => {
      const tr = document.createElement('tr');
      tr.innerHTML =
        '<td>' + esc(e.created_at) + '</td>' +
        '<td><code>' + esc(e.device_id) + '</code></td>' +
        '<td>' + esc(e.action) + '</td>' +
        '<td>' + esc(e.reason || '—') + '</td>';
      tbody.appendChild(tr);
    });
  }

  let lastConfig = {};

  async function refresh() {
    setStatus('Loading…');
    try {
      const data = await fetchJson(apiUrl('dashboard'));
      lastConfig = data.config || {};
      renderDevices(data.devices);
      renderSessions(data.active_sessions, data.inactive_sessions);
      renderEvents(data.recent_events);
      const ep = lastConfig.wg_endpoint ? ' · WG ' + lastConfig.wg_endpoint : '';
      setStatus('Updated ' + new Date().toLocaleTimeString() + ep);
    } catch (e) {
      setStatus('Failed: ' + e.message, true);
    }
  }

  document.addEventListener('click', async (ev) => {
    const t = ev.target;
    if (!(t instanceof HTMLElement)) return;
    const copyId = t.getAttribute('data-copy-id');
    if (copyId) {
      try {
        await navigator.clipboard.writeText(copyId);
        setStatus('Copied device ID');
      } catch (e) {
        setStatus('Copy failed', true);
      }
      return;
    }
    const openId = t.getAttribute('data-open-session');
    if (openId) {
      if (!canOperate()) return;
      try {
        setStatus('Opening session for ' + openId + '…');
        await fetchJson(apiUrl('open_session'), {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ device_id: openId }),
        });
        setStatus('Session opened — device will connect on next poll (≤7 min)');
        await refresh();
      } catch (e) {
        setStatus('Open session: ' + e.message, true);
      }
      return;
    }
    const closeId = t.getAttribute('data-close-session');
    if (closeId) {
      if (!canOperate()) return;
      try {
        await fetchJson(apiUrl('close_session'), {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({
            session_id: closeId,
            device_id: t.getAttribute('data-device') || '',
          }),
        });
        await refresh();
      } catch (e) {
        setStatus('Close session: ' + e.message, true);
      }
      return;
    }
    const wlDevice = t.getAttribute('data-toggle-wl');
    if (wlDevice) {
      if (!canAdmin()) return;
      try {
        await fetchJson(apiUrl('whitelist'), {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({
            device_id: wlDevice,
            whitelisted: t.getAttribute('data-wl') === '1',
          }),
        });
        await refresh();
      } catch (e) {
        setStatus('Whitelist: ' + e.message, true);
      }
    }
  });

  const form = document.getElementById('ra-whitelist-form');
  if (form) {
    if (!canAdmin()) {
      form.hidden = true;
    }
    form.addEventListener('submit', async (ev) => {
      ev.preventDefault();
      if (!canAdmin()) return;
      const fd = new FormData(form);
      try {
        await fetchJson(apiUrl('whitelist'), {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({
            device_id: fd.get('device_id'),
            notes: fd.get('notes'),
            whitelisted: true,
          }),
        });
        form.reset();
        await refresh();
      } catch (e) {
        setStatus('Whitelist add: ' + e.message, true);
      }
    });
  }

  refresh();
  setInterval(refresh, 30000);
})();
