admin_frontend/admin.js

/* ============================================================
   PST Archive — Admin panel
   - Login (with MFA)
   - User CRUD: list, create, delete, change role, reset password
   - MFA: begin enrollment, scan QR, confirm 6-digit code, disable
   ============================================================ */

const API = "/api";
const state = {
  user: null,
  users: [],
  folders: [],
  files: [],
  mfaTarget: null,
  folderEdit: null, // {id, name} if renaming, null if creating
  activeTab: "users",
  permissions: { users: [], folders: [], grants: [] },
  permView: "by-user",  // "by-user" or "by-folder"
};

const $ = (id) => document.getElementById(id);

// ---------- helpers ----------
function fmtDate(iso) {
  if (!iso) return "—";
  try {
    const d = new Date(iso);
    if (isNaN(d)) return iso;
    return d.toLocaleDateString("en-US", { year: "numeric", month: "short", day: "numeric" });
  } catch { return iso; }
}

function fmtBytes(n) {
  if (!n && n !== 0) return "—";
  const units = ["B", "KB", "MB", "GB", "TB"];
  let i = 0;
  while (n >= 1024 && i < units.length - 1) { n /= 1024; i++; }
  return `${n.toFixed(i ? 1 : 0)} ${units[i]}`;
}

function fmtDateTime(iso) {
  if (!iso) return "never";
  try {
    const d = new Date(iso);
    if (isNaN(d)) return iso;
    return d.toLocaleString("en-US", { month: "short", day: "numeric", hour: "2-digit", minute: "2-digit" });
  } catch { return iso; }
}

function toast(msg, ms = 3000) {
  const el = $("toast");
  el.textContent = msg;
  el.classList.remove("hidden");
  clearTimeout(toast._t);
  toast._t = setTimeout(() => el.classList.add("hidden"), ms);
}

function escapeHtml(s) {
  if (s == null) return "";
  return String(s)
    .replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;")
    .replace(/"/g, "&quot;").replace(/'/g, "&#39;");
}

// ---------- API ----------
async function api(path, opts = {}) {
  const res = await fetch(API + path, { credentials: "same-origin", ...opts });
  let body = null;
  try { body = await res.json(); } catch {}
  if (!res.ok) {
    const err = new Error((body && body.detail) || res.statusText);
    err.status = res.status;
    err.body = body || {};
    throw err;
  }
  return body;
}

// ---------- screens ----------
function showScreen(which) {
  ["setupNotice", "loginScreen", "adminApp"].forEach((id) => {
    $(id).classList.toggle("hidden", id !== which);
  });
}

// ---------- bootstrap ----------
// The administration section runs inside the main application and shares its
// session cookie. There is no separate admin login: access is reached via the
// "Administration" button in the main app, which is only shown to admins.
// If the visitor is not authenticated, or is authenticated but not an admin,
// we send them back to the main app.
async function bootstrap() {
  try {
    const { user } = await api("/me");
    if (user.role !== "admin") {
      // Authenticated but not an admin — no access to administration.
      window.location.replace("/");
      return;
    }
    state.user = user;
    enterAdmin();
  } catch (e) {
    if (e.status === 401) {
      // Not signed in — go to the main app to log in.
      window.location.replace("/");
      return;
    }
    toast("Connection problem — please retry.");
  }
}

// ---------- login ----------
async function handleLogin(e) {
  e.preventDefault();
  const form = e.target;
  const errEl = $("loginError");
  errEl.classList.add("hidden");

  const payload = {
    username: form.username.value.trim(),
    password: form.password.value,
  };
  const mfa = form.totp_code.value.trim();
  if (mfa) payload.totp_code = mfa;

  try {
    const { user } = await api("/login", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify(payload),
    });
    state.user = user;
    enterAdmin();
  } catch (err) {
    if (err.status === 401 && err.body && err.body.mfa_required) {
      $("mfaField").classList.remove("hidden");
      setTimeout(() => form.totp_code.focus(), 50);
      errEl.textContent = "Enter your authenticator code to continue.";
      errEl.classList.remove("hidden");
      return;
    }
    errEl.textContent = err.message || "Login failed.";
    errEl.classList.remove("hidden");
  }
}

async function handleLogout() {
  try { await api("/logout", { method: "POST" }); } catch {}
  state.user = null;
  // Session is shared with the main app; return there.
  window.location.replace("/");
}

function enterAdmin() {
  showScreen("adminApp");
  $("userChip").textContent = `${state.user.username} · admin`;
  loadUsers();
}

// ---------- users ----------
async function loadUsers() {
  try {
    const users = await api("/admin/users");
    state.users = users;
    renderUsers();
  } catch (e) {
    if (e.status === 401) { handleLogout(); return; }
    toast(`Failed to load users: ${e.message}`);
  }
}

function renderUsers() {
  const tbody = $("userTableBody");
  $("userCount").textContent =
    `${state.users.length} user${state.users.length === 1 ? "" : "s"} · ` +
    `${state.users.filter(u => u.role === "admin").length} admin${state.users.filter(u => u.role === "admin").length === 1 ? "" : "s"}`;

  if (!state.users.length) {
    tbody.innerHTML = '<tr><td colspan="6" class="empty-row">No users yet.</td></tr>';
    return;
  }

  tbody.innerHTML = state.users.map((u) => {
    const isMe = u.id === state.user.id;
    return `
      <tr data-id="${u.id}">
        <td class="username-cell">
          ${escapeHtml(u.username)}
          ${isMe ? '<span class="me-tag">you</span>' : ""}
        </td>
        <td>
          <span class="role-pill ${u.role}" data-action="toggle-role" data-id="${u.id}" title="Click to change role">${escapeHtml(u.role)}</span>
        </td>
        <td>
          <span class="mfa-indicator ${u.mfa_enabled ? 'on' : ''}">
            <span class="mfa-dot"></span>${u.mfa_enabled ? "enabled" : "disabled"}
          </span>
        </td>
        <td class="date-cell">${fmtDate(u.created_at)}</td>
        <td class="date-cell">${fmtDateTime(u.last_login)}</td>
        <td>
          <div class="row-actions">
            <button data-action="mfa" data-id="${u.id}">MFA</button>
            <button data-action="password" data-id="${u.id}">Password</button>
            <button data-action="delete" data-id="${u.id}" class="danger" ${isMe ? "disabled" : ""}>Delete</button>
          </div>
        </td>
      </tr>`;
  }).join("");

  tbody.querySelectorAll("[data-action]").forEach((el) => {
    el.addEventListener("click", handleAction);
  });
}

async function handleAction(e) {
  const action = e.currentTarget.dataset.action;
  const id = e.currentTarget.dataset.id;
  const user = state.users.find((u) => u.id === id);
  if (!user) return;

  switch (action) {
    case "toggle-role":
      await toggleRole(user);
      break;
    case "password":
      openResetPassword(user);
      break;
    case "mfa":
      openMfaModal(user);
      break;
    case "delete":
      await deleteUser(user);
      break;
  }
}

async function toggleRole(user) {
  const newRole = user.role === "admin" ? "user" : "admin";
  if (!confirm(`Change ${user.username}'s role from "${user.role}" to "${newRole}"?`)) return;
  try {
    await api(`/admin/users/${user.id}/role`, {
      method: "PUT",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ role: newRole }),
    });
    toast(`${user.username} is now ${newRole}`);
    loadUsers();
  } catch (err) {
    toast(`Role change failed: ${err.message}`);
  }
}

async function deleteUser(user) {
  if (!confirm(`Permanently delete user "${user.username}"?\n\nThis cannot be undone.`)) return;
  try {
    await api(`/admin/users/${user.id}`, { method: "DELETE" });
    toast(`${user.username} deleted`);
    loadUsers();
  } catch (err) {
    toast(`Delete failed: ${err.message}`);
  }
}

// ---------- create user modal ----------
function openCreateUser() {
  $("createUserForm").reset();
  $("createError").classList.add("hidden");
  $("createUserModal").classList.remove("hidden");
  setTimeout(() => $("createUserForm").username.focus(), 50);
}

async function handleCreateUser(e) {
  e.preventDefault();
  const form = e.target;
  const errEl = $("createError");
  errEl.classList.add("hidden");
  const payload = {
    username: form.username.value.trim(),
    password: form.password.value,
    role: form.role.value,
  };
  try {
    await api("/admin/users", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify(payload),
    });
    toast(`User "${payload.username}" created`);
    closeModals();
    loadUsers();
  } catch (err) {
    errEl.textContent = err.message || "Create failed.";
    errEl.classList.remove("hidden");
  }
}

// ---------- reset password modal ----------
function openResetPassword(user) {
  $("resetPasswordSubject").textContent = `Setting new password for ${user.username}`;
  $("resetPasswordForm").reset();
  $("resetError").classList.add("hidden");
  $("resetPasswordForm").dataset.userId = user.id;
  $("resetPasswordModal").classList.remove("hidden");
  setTimeout(() => $("resetPasswordForm").password.focus(), 50);
}

async function handleResetPassword(e) {
  e.preventDefault();
  const form = e.target;
  const errEl = $("resetError");
  errEl.classList.add("hidden");
  const userId = form.dataset.userId;
  try {
    await api(`/admin/users/${userId}/password`, {
      method: "PUT",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ password: form.password.value }),
    });
    toast("Password updated");
    closeModals();
  } catch (err) {
    errEl.textContent = err.message || "Reset failed.";
    errEl.classList.remove("hidden");
  }
}

// ---------- MFA modal ----------
function openMfaModal(user) {
  state.mfaTarget = { user_id: user.id, username: user.username, mfa_enabled: user.mfa_enabled };
  $("mfaSubject").textContent = `${user.username}`;
  $("mfaEnrollPanel").classList.add("hidden");
  renderMfaPanel();
  $("mfaModal").classList.remove("hidden");
}

function renderMfaPanel() {
  const enabled = state.mfaTarget.mfa_enabled;
  const statusEl = $("mfaCurrentStatus");
  statusEl.className = "mfa-status" + (enabled ? " enabled" : "");
  statusEl.innerHTML = enabled
    ? `<span class="badge">Enabled</span> This user is required to enter a TOTP code at login.`
    : `<span class="badge off">Disabled</span> This user signs in with password only.`;

  const actions = $("mfaActions");
  actions.innerHTML = enabled
    ? `<button data-mfa-action="disable">Disable MFA</button>
       <button data-mfa-action="reenroll" class="primary">Re-enroll</button>`
    : `<button data-mfa-action="enroll" class="primary">Begin enrollment</button>`;

  actions.querySelectorAll("[data-mfa-action]").forEach((b) => {
    b.addEventListener("click", () => handleMfaAction(b.dataset.mfaAction));
  });
}

async function handleMfaAction(action) {
  const userId = state.mfaTarget.user_id;
  if (action === "disable") {
    if (!confirm(`Disable MFA for ${state.mfaTarget.username}?`)) return;
    try {
      await api(`/admin/users/${userId}/mfa/disable`, { method: "POST" });
      toast("MFA disabled");
      state.mfaTarget.mfa_enabled = false;
      renderMfaPanel();
      loadUsers();
    } catch (err) {
      toast(`Disable failed: ${err.message}`);
    }
    return;
  }

  // enroll or re-enroll — generate a fresh secret
  try {
    const res = await api(`/admin/users/${userId}/mfa/begin`, { method: "POST" });
    $("mfaSecretText").textContent = res.secret;
    // Add cache-busting param so the QR re-renders with the new secret
    $("mfaQrImage").src = `${API}/admin/users/${userId}/mfa/qr?t=${Date.now()}`;
    $("mfaEnrollPanel").classList.remove("hidden");
    $("mfaConfirmError").classList.add("hidden");
    $("mfaConfirmForm").reset();
    setTimeout(() => $("mfaConfirmForm").totp_code.focus(), 100);
  } catch (err) {
    toast(`Enrollment failed: ${err.message}`);
  }
}

async function handleMfaConfirm(e) {
  e.preventDefault();
  const form = e.target;
  const errEl = $("mfaConfirmError");
  errEl.classList.add("hidden");
  const userId = state.mfaTarget.user_id;
  try {
    await api(`/admin/users/${userId}/mfa/confirm`, {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ totp_code: form.totp_code.value.trim() }),
    });
    toast(`MFA enabled for ${state.mfaTarget.username}`);
    state.mfaTarget.mfa_enabled = true;
    $("mfaEnrollPanel").classList.add("hidden");
    renderMfaPanel();
    loadUsers();
  } catch (err) {
    errEl.textContent = err.message || "Confirmation failed.";
    errEl.classList.remove("hidden");
  }
}

// ---------- modals ----------
function closeModals() {
  document.querySelectorAll(".modal").forEach((m) => m.classList.add("hidden"));
}

// ---------- Theme ----------
function initTheme() {
  let theme = "light";
  try {
    const saved = localStorage.getItem("pst-theme");
    if (saved === "light" || saved === "dark") {
      theme = saved;
    } else if (window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches) {
      theme = "dark";
    }
  } catch {}
  document.documentElement.dataset.theme = theme;
}

function toggleTheme() {
  const current = document.documentElement.dataset.theme === "dark" ? "dark" : "light";
  const next = current === "dark" ? "light" : "dark";
  document.documentElement.dataset.theme = next;
  try { localStorage.setItem("pst-theme", next); } catch {}
}

initTheme();

// ---------- Tabs ----------
function switchTab(tab) {
  state.activeTab = tab;
  document.querySelectorAll(".admin-tab").forEach((el) => {
    el.classList.toggle("active", el.dataset.tab === tab);
  });
  document.querySelectorAll(".admin-panel").forEach((el) => {
    el.classList.toggle("hidden", el.dataset.panel !== tab);
  });
  if (tab === "users") loadUsers();
  else if (tab === "folders") loadFolders();
  else if (tab === "files") loadFiles();
  else if (tab === "permissions") loadPermissions();
}

// ---------- Folder management ----------
async function loadFolders() {
  try {
    const folders = await api("/admin/folders");
    state.folders = folders;
    renderFolders();
  } catch (e) {
    if (e.status === 401) { handleLogout(); return; }
    toast(`Failed to load folders: ${e.message}`);
  }
}

function renderFolders() {
  const tbody = $("folderTableBody");
  $("folderCount").textContent =
    `${state.folders.length} folder${state.folders.length === 1 ? "" : "s"}`;

  if (!state.folders.length) {
    tbody.innerHTML = '<tr><td colspan="4" class="empty-row">No folders yet. Click "+ New folder" to create one.</td></tr>';
    return;
  }

  tbody.innerHTML = state.folders.map((f) => `
    <tr data-id="${f.id}">
      <td class="username-cell">${escapeHtml(f.name)}</td>
      <td class="num-cell">${f.file_count}</td>
      <td class="date-cell">${fmtDate(f.created_at)}</td>
      <td>
        <div class="row-actions">
          <button data-folder-action="rename" data-id="${f.id}">Rename</button>
          <button data-folder-action="delete" data-id="${f.id}" class="danger">Delete</button>
        </div>
      </td>
    </tr>`).join("");

  tbody.querySelectorAll("[data-folder-action]").forEach((el) => {
    el.addEventListener("click", handleFolderAction);
  });
}

function handleFolderAction(e) {
  const action = e.currentTarget.dataset.folderAction;
  const id = e.currentTarget.dataset.id;
  const folder = state.folders.find((f) => f.id === id);
  if (!folder) return;
  if (action === "rename") openFolderModal(folder);
  else if (action === "delete") deleteFolder(folder);
}

function openFolderModal(folder = null) {
  state.folderEdit = folder;
  $("folderForm").reset();
  $("folderError").classList.add("hidden");
  if (folder) {
    $("folderModalTitle").textContent = "Rename folder";
    $("folderSubmitBtn").textContent = "Save changes";
    $("folderForm").name.value = folder.name;
  } else {
    $("folderModalTitle").textContent = "New folder";
    $("folderSubmitBtn").textContent = "Create folder";
  }
  $("folderModal").classList.remove("hidden");
  setTimeout(() => $("folderForm").name.focus(), 50);
}

async function handleFolderSubmit(e) {
  e.preventDefault();
  const form = e.target;
  const errEl = $("folderError");
  errEl.classList.add("hidden");
  const name = form.name.value.trim();
  try {
    if (state.folderEdit) {
      await api(`/admin/folders/${state.folderEdit.id}`, {
        method: "PUT",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ name }),
      });
      toast("Folder renamed.");
    } else {
      await api("/admin/folders", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ name }),
      });
      toast("Folder created.");
    }
    closeModals();
    loadFolders();
    if (state.activeTab === "files") loadFiles();
    if (state.activeTab === "permissions") loadPermissions();
  } catch (err) {
    errEl.textContent = err.message || "Save failed.";
    errEl.classList.remove("hidden");
  }
}

async function deleteFolder(folder) {
  const msg = folder.file_count > 0
    ? `Delete folder "${folder.name}"?\n\n${folder.file_count} archive${folder.file_count === 1 ? "" : "s"} will be moved to Uncategorized.`
    : `Delete folder "${folder.name}"?`;
  if (!confirm(msg)) return;
  try {
    await api(`/admin/folders/${folder.id}`, { method: "DELETE" });
    toast("Folder deleted.");
    loadFolders();
    if (state.activeTab === "files") loadFiles();
    if (state.activeTab === "permissions") loadPermissions();
  } catch (err) {
    toast(`Delete failed: ${err.message}`);
  }
}

// ---------- File management ----------
async function loadFiles() {
  try {
    const files = await api("/admin/pst-files");
    state.files = files;
    renderFiles();
  } catch (e) {
    if (e.status === 401) { handleLogout(); return; }
    toast(`Failed to load files: ${e.message}`);
  }
}

function renderFiles() {
  const tbody = $("fileTableBody");
  const total = state.files.length;
  const totalSize = state.files.reduce((s, f) => s + (f.size_bytes || 0), 0);
  $("fileCount").textContent = total
    ? `${total} file${total === 1 ? "" : "s"} · ${fmtBytes(totalSize)} total`
    : "no files";

  if (!total) {
    tbody.innerHTML = '<tr><td colspan="7" class="empty-row">No PST files have been uploaded yet.</td></tr>';
    return;
  }

  tbody.innerHTML = state.files.map((f) => `
    <tr data-id="${f.id}">
      <td class="filename-cell" title="${escapeHtml(f.original_name)}">${escapeHtml(f.original_name)}</td>
      <td class="folder-cell ${f.folder_name ? "" : "uncategorized"}">${f.folder_name ? escapeHtml(f.folder_name) : "Uncategorized"}</td>
      <td class="size-cell">${fmtBytes(f.size_bytes)}</td>
      <td><span class="status-pill ${f.status}">${f.status}</span></td>
      <td class="num-cell">${f.status === "ready" ? (f.message_count || 0).toLocaleString() : "—"}</td>
      <td class="date-cell">${fmtDate(f.uploaded_at)}</td>
      <td>
        <div class="row-actions">
          <button data-file-action="delete" data-id="${f.id}" class="danger">Delete</button>
        </div>
      </td>
    </tr>`).join("");

  tbody.querySelectorAll("[data-file-action]").forEach((el) => {
    el.addEventListener("click", handleFileAction);
  });
}

function handleFileAction(e) {
  const action = e.currentTarget.dataset.fileAction;
  const id = e.currentTarget.dataset.id;
  const file = state.files.find((f) => f.id === id);
  if (!file) return;
  if (action === "delete") deleteFile(file);
}

async function deleteFile(file) {
  if (!confirm(`Permanently delete "${file.original_name}"?\n\nThis removes the PST file and all ${(file.message_count || 0).toLocaleString()} indexed messages. Cannot be undone.`)) return;
  try {
    await api(`/admin/pst-files/${file.id}`, { method: "DELETE" });
    toast("File deleted.");
    loadFiles();
    if (state.activeTab === "folders") loadFolders();  // counts change
  } catch (err) {
    toast(`Delete failed: ${err.message}`);
  }
}

// ---------- Permissions ----------
async function loadPermissions() {
  try {
    const data = await api("/admin/permissions");
    state.permissions = data;
    renderPermissions();
  } catch (e) {
    if (e.status === 401) { handleLogout(); return; }
    toast(`Failed to load permissions: ${e.message}`);
  }
}

function hasGrant(userId, folderId) {
  return state.permissions.grants.some(
    (g) => g.user_id === userId && g.folder_id === folderId
  );
}

function renderPermissions() {
  const { users, folders } = state.permissions;
  const nonAdmins = users.filter((u) => u.role !== "admin");
  const adminCount = users.length - nonAdmins.length;

  $("permissionsMeta").textContent =
    `${users.length} user${users.length === 1 ? "" : "s"}` +
    ` (${adminCount} admin${adminCount === 1 ? "" : "s"}) · ` +
    `${folders.length} folder${folders.length === 1 ? "" : "s"}`;

  const thead = $("permMatrixHead");
  const tbody = $("permMatrixBody");

  if (!folders.length) {
    thead.innerHTML = "";
    tbody.innerHTML = `<tr><td class="perm-empty">
      No folders yet. Create one in the Folders tab to start assigning access.
    </td></tr>`;
    return;
  }

  if (state.permView === "by-user") {
    renderPermByUser(thead, tbody, users, folders);
  } else {
    renderPermByFolder(thead, tbody, users, folders, nonAdmins);
  }
}

function renderPermByUser(thead, tbody, users, folders) {
  // Rows = users, Columns = folders
  thead.innerHTML = `
    <tr>
      <th class="rowhead">User</th>
      ${folders.map((f) => `<th class="col-header" title="${escapeHtml(f.name)}">${escapeHtml(f.name)}</th>`).join("")}
    </tr>
  `;

  tbody.innerHTML = users.map((u) => {
    const isAdmin = u.role === "admin";
    const rowClass = isAdmin ? "admin-row" : "";
    return `
      <tr data-user-id="${u.id}">
        <td class="rowhead rowlabel ${rowClass}">
          ${escapeHtml(u.username)}
          ${isAdmin ? '<span class="role-tag">admin</span>' : ""}
        </td>
        ${folders.map((f) => {
          if (isAdmin) {
            return `<td class="cell implicit" title="Admins have access to all folders"></td>`;
          }
          const checked = hasGrant(u.id, f.id) ? "checked" : "";
          return `
            <td class="cell">
              <label>
                <input type="checkbox" data-perm-toggle
                       data-user="${u.id}" data-folder="${f.id}"
                       ${checked} />
              </label>
            </td>
          `;
        }).join("")}
      </tr>
    `;
  }).join("");

  bindPermToggles();
}

function renderPermByFolder(thead, tbody, users, folders, nonAdmins) {
  // Rows = folders, Columns = non-admin users (admins don't need toggles)
  if (!nonAdmins.length) {
    thead.innerHTML = "";
    tbody.innerHTML = `<tr><td class="perm-empty">
      No non-admin users exist yet. Create one in the Users tab to start assigning access.
    </td></tr>`;
    return;
  }

  thead.innerHTML = `
    <tr>
      <th class="rowhead">Folder</th>
      ${nonAdmins.map((u) => `<th class="col-header" title="${escapeHtml(u.username)}">${escapeHtml(u.username)}</th>`).join("")}
    </tr>
  `;

  tbody.innerHTML = folders.map((f) => `
    <tr data-folder-id="${f.id}">
      <td class="rowhead rowlabel">${escapeHtml(f.name)}</td>
      ${nonAdmins.map((u) => {
        const checked = hasGrant(u.id, f.id) ? "checked" : "";
        return `
          <td class="cell">
            <label>
              <input type="checkbox" data-perm-toggle
                     data-user="${u.id}" data-folder="${f.id}"
                     ${checked} />
            </label>
          </td>
        `;
      }).join("")}
    </tr>
  `).join("");

  bindPermToggles();
}

function bindPermToggles() {
  document.querySelectorAll("[data-perm-toggle]").forEach((cb) => {
    cb.addEventListener("change", handlePermToggle);
  });
}

async function handlePermToggle(e) {
  const cb = e.currentTarget;
  const userId = cb.dataset.user;
  const folderId = cb.dataset.folder;
  const granted = cb.checked;

  // Optimistically update local state
  if (granted) {
    if (!hasGrant(userId, folderId)) {
      state.permissions.grants.push({
        user_id: userId, folder_id: folderId,
        granted_at: new Date().toISOString(),
      });
    }
  } else {
    state.permissions.grants = state.permissions.grants.filter(
      (g) => !(g.user_id === userId && g.folder_id === folderId)
    );
  }

  cb.disabled = true;
  try {
    await api(`/admin/permissions/${userId}/${folderId}`, {
      method: "PUT",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ granted }),
    });
    const folder = state.permissions.folders.find((f) => f.id === folderId);
    const user = state.permissions.users.find((u) => u.id === userId);
    toast(
      granted
        ? `Granted "${user?.username}" access to "${folder?.name}"`
        : `Revoked "${user?.username}" access to "${folder?.name}"`
    );
  } catch (err) {
    // Revert on failure
    cb.checked = !granted;
    if (granted) {
      state.permissions.grants = state.permissions.grants.filter(
        (g) => !(g.user_id === userId && g.folder_id === folderId)
      );
    } else {
      state.permissions.grants.push({
        user_id: userId, folder_id: folderId,
        granted_at: new Date().toISOString(),
      });
    }
    toast(`Failed: ${err.message}`);
  } finally {
    cb.disabled = false;
  }
}

function switchPermView(view) {
  state.permView = view;
  document.querySelectorAll(".view-btn").forEach((b) => {
    b.classList.toggle("active", b.dataset.view === view);
  });
  renderPermissions();
}

// ---------- init ----------
function init() {
  $("loginForm").addEventListener("submit", handleLogin);
  $("logoutBtn").addEventListener("click", handleLogout);
  const backBtn = $("backToAppBtn");
  if (backBtn) backBtn.addEventListener("click", () => { window.location.href = "/"; });
  $("newUserBtn").addEventListener("click", openCreateUser);
  $("createUserForm").addEventListener("submit", handleCreateUser);
  $("resetPasswordForm").addEventListener("submit", handleResetPassword);
  $("mfaConfirmForm").addEventListener("submit", handleMfaConfirm);

  // Tab switching
  document.querySelectorAll(".admin-tab").forEach((el) => {
    el.addEventListener("click", () => switchTab(el.dataset.tab));
  });

  // Permissions view switcher (by-user / by-folder)
  document.querySelectorAll(".view-btn").forEach((el) => {
    el.addEventListener("click", () => switchPermView(el.dataset.view));
  });

  // Folder modal
  $("newFolderBtn").addEventListener("click", () => openFolderModal(null));
  $("folderForm").addEventListener("submit", handleFolderSubmit);

  ["themeToggle", "themeToggleFloat"].forEach((id) => {
    const el = document.getElementById(id);
    if (el) el.addEventListener("click", toggleTheme);
  });

  document.querySelectorAll("[data-close]").forEach((el) => {
    el.addEventListener("click", closeModals);
  });
  document.querySelectorAll(".modal").forEach((m) => {
    m.addEventListener("click", (e) => {
      if (e.target === m) closeModals();
    });
  });
  document.addEventListener("keydown", (e) => {
    if (e.key === "Escape") closeModals();
  });

  bootstrap();
}

document.addEventListener("DOMContentLoaded", init);