/**
 * vault.js — Vault UI: all views (vault, security, sharing, emergency, settings)
 *
 * All sensitive data is decrypted client-side. The server only ever stores
 * encrypted blobs (zero-knowledge architecture).
 */

const Vault = (() => {
  let _items = [];
  let _folders = [];
  let _currentView = "vault";

  // ── Web-app inactivity / session timeout ──────────────────────────────────
  // Mirrors the extension idle lock. Default 15 min; user can change in
  // Account Settings. Zero means never. Stored in localStorage so it persists
  // across page reloads without a server round-trip.

  const WEB_IDLE_KEY = "web_idle_minutes";
  const WEB_IDLE_DEFAULT = 15; // minutes; 0 = never
  let _webIdleTimer = null;

  function _getWebIdleMinutes() {
    const v = parseInt(localStorage.getItem(WEB_IDLE_KEY), 10);
    return isNaN(v) ? WEB_IDLE_DEFAULT : v;
  }

  function _resetWebIdleTimer() {
    if (_webIdleTimer) clearTimeout(_webIdleTimer);
    const mins = _getWebIdleMinutes();
    if (mins === 0) return;
    _webIdleTimer = setTimeout(() => {
      // Only lock if the vault is currently unlocked.
      if (!VaultSession.getKey()) return;
      console.log("[PassKeeper] Web inactivity lock after", mins, "min");
      VaultSession.clear();
      showUnlockOverlay();
      showToast("Vault locked due to inactivity.", "info");
    }, mins * 60_000);
  }

  function _startWebIdleTracking() {
    const events = [
      "mousemove",
      "mousedown",
      "keydown",
      "touchstart",
      "scroll",
    ];
    const handler = () => _resetWebIdleTimer();
    events.forEach((e) =>
      document.addEventListener(e, handler, { passive: true }),
    );
    _resetWebIdleTimer();

    // Lock when the tab is hidden for longer than the idle timeout.
    // This catches screen-lock, minimize, and long tab switches without
    // requiring the user to wait for the inactivity timer to fire after
    // returning to the tab.
    let _hiddenAt = null;
    document.addEventListener("visibilitychange", () => {
      if (document.visibilityState === "hidden") {
        _hiddenAt = Date.now();
        // Pause the inactivity timer while hidden — user activity is impossible.
        if (_webIdleTimer) {
          clearTimeout(_webIdleTimer);
          _webIdleTimer = null;
        }
      } else {
        // Tab became visible again.
        const mins = _getWebIdleMinutes();
        if (mins > 0 && _hiddenAt !== null) {
          const hiddenMs = Date.now() - _hiddenAt;
          if (hiddenMs >= mins * 60_000 && VaultSession.getKey()) {
            console.log(
              "[PassKeeper] Locking — tab was hidden for",
              Math.round(hiddenMs / 1000),
              "s (idle timeout:",
              mins,
              "min)",
            );
            VaultSession.clear();
            showUnlockOverlay();
            showToast("Vault locked due to inactivity.", "info");
            _hiddenAt = null;
            return;
          }
        }
        _hiddenAt = null;
        // Resume the inactivity timer now that the user is back.
        _resetWebIdleTimer();
      }
    });
  }
  let _activeFilter = null;
  let _sortOrder = "name-asc";
  // ── Bulk selection state ──────────────────────────────────────────────────
  let _selectMode = false;
  let _selectedIds = new Set();

  const FIELD_LABELS = {
    url: "Website URL",
    username: "Username",
    password: "Password",
    notes: "Notes",
    note_body: "Note",
    cardholder_name: "Cardholder Name",
    card_number: "Card Number",
    expiry_month: "Expiry Month",
    expiry_year: "Expiry Year",
    cvv: "CVV",
    bank_name: "Bank Name",
    account_type: "Account Type",
    routing_number: "Routing Number",
    account_number: "Account Number",
    first_name: "First Name",
    last_name: "Last Name",
    company: "Company",
    address_line: "Street Address",
    city: "City",
    state: "State",
    zip: "ZIP",
    country: "Country",
    phone: "Phone",
    email: "Email",
    ssn_number: "Social Security Number",
    // passkey
    rp_id: "RP ID (Domain)",
    credential_id: "Credential ID",
    user_handle: "User Handle",
    device_hint: "Device / Authenticator",
  };
  const SENSITIVE_FIELDS = new Set([
    "password",
    "cvv",
    "card_number",
    "account_number",
    "routing_number",
    "ssn_number",
    "credential_id",
    "user_handle",
  ]);

  // ── API helpers ───────────────────────────────────────────────────────────

  async function apiFetch(path, options = {}) {
    let token = sessionStorage.getItem("access_token");
    if (!token) {
      redirectToLogin();
      return null;
    }

    const defaults = {
      headers: {
        "Content-Type": "application/json",
        Authorization: `Bearer ${token}`,
        "X-CSRFToken": csrfToken(),
      },
    };
    const merged = { ...defaults, ...options };
    merged.headers = { ...defaults.headers, ...(options.headers || {}) };

    let res = await fetch(path, merged);

    if (res.status === 401) {
      const refreshed = await tryRefreshToken();
      if (!refreshed) {
        redirectToLogin();
        return null;
      }
      merged.headers["Authorization"] =
        `Bearer ${sessionStorage.getItem("access_token")}`;
      res = await fetch(path, merged);
    }

    if (!res.ok) {
      const err = await res.json().catch(() => ({}));
      const e = new Error(err.error || `HTTP ${res.status}`);
      e.status = res.status;
      throw e;
    }
    return res;
  }

  let _refreshPromise = null;
  async function tryRefreshToken() {
    // Singleton: if a refresh is already in flight, reuse it so concurrent 401s
    // don't each fire a separate rotation (which would blacklist each other's tokens).
    if (_refreshPromise) return _refreshPromise;
    _refreshPromise = (async () => {
      const refreshToken = localStorage.getItem("refresh_token");
      if (!refreshToken) return false;
      try {
        const res = await fetch("/api/auth/refresh", {
          method: "POST",
          headers: {
            "Content-Type": "application/json",
            "X-CSRFToken": csrfToken(),
          },
          body: JSON.stringify({ refresh_token: refreshToken }),
        });
        if (!res.ok) return false;
        const data = await res.json();
        sessionStorage.setItem("access_token", data.access_token);
        if (data.refresh_token)
          localStorage.setItem("refresh_token", data.refresh_token);
        return true;
      } catch {
        return false;
      }
    })().finally(() => {
      _refreshPromise = null;
    });
    return _refreshPromise;
  }

  function csrfToken() {
    return document.querySelector('meta[name="csrf-token"]')?.content || "";
  }

  function redirectToLogin() {
    VaultSession.clear();
    SharingSession.clear();
    sessionStorage.removeItem("access_token");
    window.dispatchEvent(new CustomEvent("passkeeper:logout"));
    window.location.href = "/login";
  }

  // ── Load ──────────────────────────────────────────────────────────────────

  async function loadVault() {
    const vaultKey = VaultSession.getKey();
    if (!vaultKey) {
      showUnlockOverlay();
      return;
    }
    showLoadingState(true);
    try {
      const [itemsRes, foldersRes] = await Promise.all([
        apiFetch("/api/vault"),
        apiFetch("/api/folders"),
      ]);
      if (!itemsRes || !foldersRes) {
        showUnlockOverlay();
        return;
      }

      const rawItems = await itemsRes.json();
      _folders = await foldersRes.json();

      _items = await Promise.all(
        rawItems.map(async (item) => {
          try {
            const plain = await Crypto.decryptItem(
              vaultKey,
              item.enc_data,
              item.iv,
            );
            // Decrypt the item name if an encrypted version exists.
            // Fall back to the server-stored plaintext name for legacy items.
            let displayName = item.name;
            if (item.enc_name && item.iv_name) {
              const decrypted = await Crypto.decryptName(
                vaultKey,
                item.enc_name,
                item.iv_name,
              );
              if (decrypted) displayName = decrypted;
            }
            return { ...item, name: displayName, plain };
          } catch {
            return { ...item, plain: null, decryptError: true };
          }
        }),
      );

      renderFolderList();
      renderTagList();
      applyCurrentFilter();
      // Reset banner dismissed flag so fresh health results are visible.
      const banner = document.getElementById("health-banner");
      if (banner) banner.dataset.dismissed = "0";
      // Run health checks in the background — updates badge + banner without
      // blocking the vault render. Results are cached so opening the Security
      // tab doesn't re-run HIBP checks.
      runBackgroundHealthCheck();
    } catch (err) {
      showToast("Failed to load vault: " + err.message, "error");
    } finally {
      showLoadingState(false);
    }
  }

  async function loadFolders() {
    try {
      const res = await apiFetch("/api/folders");
      if (!res) return;
      _folders = await res.json();
      renderFolderList();
    } catch (err) {
      showToast("Could not refresh folders: " + err.message, "error");
    }
  }

  // ── View switching ────────────────────────────────────────────────────────

  function switchView(view, { pushState = true } = {}) {
    // Exit bulk-select mode when navigating away from the vault view.
    if (view !== "vault" && _selectMode) _exitSelectMode();
    _currentView = view;
    ["vault", "security", "sharing", "emergency", "import-export"].forEach(
      (v) => {
        document
          .getElementById(`view-${v}`)
          ?.classList.toggle("hidden", v !== view);
      },
    );
    document.querySelectorAll(".sidebar-item[data-view]").forEach((el) => {
      el.classList.toggle("active", el.dataset.view === view);
    });
    if (view !== "vault") {
      document
        .querySelectorAll(
          ".sidebar-item[data-type-filter], .sidebar-item[data-folder-id]",
        )
        .forEach((el) => el.classList.remove("active"));
    }

    // Push to browser history so the back button navigates between views.
    if (pushState) {
      const hash = view === "vault" ? "" : `#${view}`;
      history.pushState({ view }, "", hash || window.location.pathname);
    }

    if (view === "security") renderSecurityDashboard();
    if (view === "sharing") loadSharingView();
    if (view === "emergency") loadEmergencyView();
    if (view === "import-export") loadImportExportView();
  }

  // ── Vault render ──────────────────────────────────────────────────────────

  function renderFolderList() {
    const ul = document.getElementById("sidebar-folders");
    if (!ul) return;
    ul.innerHTML = "";
    _folders.forEach((folder) => {
      const li = document.createElement("li");
      li.className = "sidebar-item folder-item";
      li.dataset.folderId = folder.id;

      const label = document.createElement("span");
      label.className = "folder-label";
      label.innerHTML = `<span class="sidebar-icon">📁</span> <span class="sidebar-label">${escHtml(folder.name)}</span>`;
      label.addEventListener("click", () =>
        filterByFolder(folder.id, folder.name),
      );

      const delBtn = document.createElement("button");
      delBtn.className = "btn-delete-folder";
      delBtn.title = "Delete folder";
      delBtn.textContent = "🗑";
      delBtn.addEventListener("click", (e) => {
        e.stopPropagation();
        confirmDeleteFolder(folder);
      });

      li.appendChild(label);
      li.appendChild(delBtn);
      ul.appendChild(li);
    });
  }

  function getSortedItems(items) {
    const sorted = [...items];
    switch (_sortOrder) {
      case "name-asc":
        sorted.sort((a, b) => a.name.localeCompare(b.name));
        break;
      case "name-desc":
        sorted.sort((a, b) => b.name.localeCompare(a.name));
        break;
      case "date-desc":
        sorted.sort((a, b) => new Date(b.created_at) - new Date(a.created_at));
        break;
      case "date-asc":
        sorted.sort((a, b) => new Date(a.created_at) - new Date(b.created_at));
        break;
      case "folder":
        sorted.sort(
          (a, b) =>
            folderName(a.folder_id).localeCompare(folderName(b.folder_id)) ||
            a.name.localeCompare(b.name),
        );
        break;
    }
    return sorted;
  }

  function folderName(id) {
    if (!id) return "(No folder)";
    return _folders.find((f) => f.id === id)?.name || "Unknown";
  }

  /** Parse a comma-separated tag string into a sorted, deduped lowercase array. */
  function _parseTags(str) {
    return [
      ...new Set(
        (str || "")
          .split(",")
          .map((t) => t.trim().toLowerCase())
          .filter(Boolean),
      ),
    ].sort();
  }

  /** Collect all unique tags across all loaded items. */
  function _allTags() {
    const set = new Set();
    _items.forEach((i) => (i.plain?.tags || []).forEach((t) => set.add(t)));
    return [...set].sort();
  }

  /** Render the tags sidebar list. */
  function renderTagList() {
    const ul = document.getElementById("sidebar-tags");
    if (!ul) return;
    ul.innerHTML = "";
    const tags = _allTags();
    if (!tags.length) {
      ul.innerHTML = '<li class="sidebar-tag-empty">No tags yet</li>';
      return;
    }
    tags.forEach((tag) => {
      const li = document.createElement("li");
      li.className = "sidebar-item sidebar-tag-item";
      li.dataset.tag = tag;
      li.innerHTML = `<span class="sidebar-icon">🏷️</span><span class="sidebar-label">${escHtml(tag)}</span>`;
      li.addEventListener("click", () => {
        document
          .querySelectorAll(".sidebar-item")
          .forEach((el) => el.classList.remove("active"));
        li.classList.add("active");
        _activeFilter = { type: "tag", value: tag };
        switchView("vault");
        updateVaultTitle("#" + tag);
        renderItemList(
          _items.filter((i) => (i.plain?.tags || []).includes(tag)),
        );
      });
      ul.appendChild(li);
    });
  }

  // Persists which folder groups are collapsed across re-renders.
  const _collapsedGroups = new Set();

  function renderItemList(items) {
    const list = document.getElementById("vault-list");
    if (!list) return;
    list.innerHTML = "";

    // Apply or remove select-mode CSS class on the parent wrapper.
    const wrapper = list.closest(".vault-list");
    if (wrapper) wrapper.classList.toggle("select-mode", _selectMode);
    if (items.length === 0) {
      list.innerHTML =
        '<li class="vault-empty">No items found. Click + to add one.</li>';
      return;
    }

    const sorted = getSortedItems(items);
    const groups = {};
    sorted.forEach((item) => {
      const key = folderName(item.folder_id);
      if (!groups[key]) groups[key] = [];
      groups[key].push(item);
    });

    const keys =
      _sortOrder === "folder"
        ? Object.keys(groups).sort()
        : ["(No folder)", ..._folders.map((f) => f.name)].filter(
            (k) => groups[k],
          );
    Object.keys(groups).forEach((k) => {
      if (!keys.includes(k)) keys.push(k);
    });

    keys.forEach((groupName) => {
      if (!groups[groupName]) return;
      const isCollapsed = _collapsedGroups.has(groupName);
      const count = groups[groupName].length;

      // ── Collapsible group header ────────────────────────────────────────────
      const header = document.createElement("li");
      header.className =
        "vault-group-header" + (isCollapsed ? " collapsed" : "");
      header.innerHTML =
        `<span class="group-name">${escHtml(groupName)}</span>` +
        `<span class="group-meta">` +
        `<span class="group-count">${count}</span>` +
        `<span class="group-chevron">${isCollapsed ? "▶" : "▼"}</span>` +
        `</span>`;
      header.addEventListener("click", () => {
        if (_collapsedGroups.has(groupName)) {
          _collapsedGroups.delete(groupName);
        } else {
          _collapsedGroups.add(groupName);
        }
        renderItemList(items); // re-render preserving collapse state
      });
      list.appendChild(header);

      // ── Items (hidden when collapsed) ───────────────────────────────────────
      if (!isCollapsed) {
        groups[groupName].forEach((item) =>
          list.appendChild(createItemElement(item)),
        );
      }
    });
  }

  function createItemElement(item) {
    const li = document.createElement("li");
    li.className = "vault-item";
    li.dataset.id = item.id;

    const iconMap = {
      password: "🔑",
      note: "📝",
      card: "💳",
      bank: "🏦",
      address: "🏠",
      ssn: "🪪",
      passkey: "🔐",
    };
    const icon = iconMap[item.item_type] || "🔑";

    const itemTags = item.plain?.tags || [];
    let subText = "";
    if (item.plain) {
      switch (item.item_type) {
        case "password":
          subText = item.plain.username || item.plain.url || "";
          break;
        case "note":
          subText = (item.plain.note_body || "").slice(0, 60);
          break;
        case "card":
          subText = item.plain.card_number
            ? "•••• " +
              String(item.plain.card_number).replace(/\s/g, "").slice(-4)
            : "";
          break;
        case "bank":
          subText = item.plain.bank_name || "";
          break;
        case "address":
          subText = [item.plain.first_name, item.plain.last_name]
            .filter(Boolean)
            .join(" ");
          break;
        case "ssn":
          subText = "•••-••-••••";
          break;
        case "passkey":
          subText = [
            item.plain.username,
            item.plain.rp_id ? `@ ${item.plain.rp_id}` : "",
          ]
            .filter(Boolean)
            .join(" ");
          break;
      }
    }

    const showCopyUser = item.item_type === "password";
    const showCopyPass = ["password", "card", "bank", "ssn"].includes(
      item.item_type,
    );
    const showLaunch = item.item_type === "password" && item.plain?.url;
    const showTotp =
      item.item_type === "password" &&
      !!extractTotpSecret(item.plain?.totp_uri);

    const isFavorite = itemTags.includes("favorite");
    const visibleTags = itemTags.filter((t) => t !== "favorite");
    const tagBadges = visibleTags
      .map((t) => `<span class="item-tag">${escHtml(t)}</span>`)
      .join("");

    li.innerHTML = `
      <input type="checkbox" class="item-checkbox" data-id="${item.id}" ${_selectedIds.has(item.id) ? "checked" : ""} aria-label="Select ${escHtml(item.name)}"/>
      <div class="item-icon">${icon}</div>
      <div class="item-info">
        <span class="item-name">${escHtml(item.name)}</span>
        <span class="item-sub">${escHtml(subText)}</span>
        ${tagBadges ? `<div class="item-tags">${tagBadges}</div>` : ""}
        ${showTotp ? `<span class="item-totp" id="totp-display-${item.id}"><span class="totp-code">······</span><span class="totp-timer"></span></span>` : ""}
      </div>
      <div class="item-actions">
        ${showLaunch ? `<button class="btn-icon" title="Open URL" data-action="launch">🌐</button>` : ""}
        ${showCopyUser ? `<button class="btn-icon" title="Copy username" data-action="copy-user">👤</button>` : ""}
        ${showCopyPass ? `<button class="btn-icon" title="Copy secret" data-action="copy-pass">📋</button>` : ""}
        ${showTotp ? `<button class="btn-icon" title="Copy 2FA code" data-action="copy-totp">🔐</button>` : ""}
        <button class="btn-icon btn-favorite${isFavorite ? " is-favorite" : ""}" title="${isFavorite ? "Remove from favorites" : "Add to favorites"}" data-action="favorite">${isFavorite ? "★" : "☆"}</button>
        <button class="btn-icon" title="Edit" data-action="edit">✏️</button>
        <button class="btn-icon" title="Delete" data-action="delete">🗑️</button>
      </div>`;

    if (showTotp) {
      // Start a live TOTP ticker for this item.
      const secret = extractTotpSecret(item.plain.totp_uri);
      const displayEl = li.querySelector(`#totp-display-${item.id}`);
      const codeEl = displayEl.querySelector(".totp-code");
      const timerEl = displayEl.querySelector(".totp-timer");

      async function refreshTotp() {
        const code = await getTotpCode(secret).catch(() => null);
        if (!code) return;
        // Insert a space in the middle for readability: 123 456
        codeEl.textContent = code.slice(0, 3) + " " + code.slice(3);
        const secs = totpSecondsLeft();
        timerEl.textContent = " (" + secs + "s)";
        // Colour the timer red when it's about to expire.
        timerEl.classList.toggle("totp-timer--expiring", secs <= 5);
      }
      refreshTotp();
      // Refresh every second. Store interval id on the element for cleanup.
      const intervalId = setInterval(refreshTotp, 1000);
      li.dataset.totpInterval = intervalId;
    }

    // Wire the bulk-select checkbox.
    const checkbox = li.querySelector(".item-checkbox");
    if (checkbox) {
      // Stop the click from bubbling to the li (which would open the modal).
      checkbox.addEventListener("click", (e) => e.stopPropagation());
      checkbox.addEventListener("change", () => {
        if (checkbox.checked) {
          _selectedIds.add(item.id);
          li.classList.add("item-selected");
        } else {
          _selectedIds.delete(item.id);
          li.classList.remove("item-selected");
        }
        _updateBulkToolbar();
      });
      // Apply selected state from module state (survives re-renders).
      if (_selectedIds.has(item.id)) li.classList.add("item-selected");
    }

    if (showLaunch) {
      li.querySelector('[data-action="launch"]').addEventListener(
        "click",
        (e) => {
          e.stopPropagation();
          let url = item.plain?.url || "";
          if (url && !/^https?:\/\//i.test(url)) url = "https://" + url;
          window.open(url, "_blank", "noopener,noreferrer");
        },
      );
    }
    if (showCopyUser) {
      li.querySelector('[data-action="copy-user"]').addEventListener(
        "click",
        (e) => {
          e.stopPropagation();
          copyToClipboard(item.plain?.username || "", "Username copied");
        },
      );
    }
    if (showCopyPass) {
      li.querySelector('[data-action="copy-pass"]').addEventListener(
        "click",
        (e) => {
          e.stopPropagation();
          const s =
            item.item_type === "password"
              ? item.plain?.password
              : item.item_type === "card"
                ? item.plain?.cvv
                : item.item_type === "bank"
                  ? item.plain?.account_number
                  : item.plain?.ssn_number;
          copyToClipboard(s || "", "Copied to clipboard");
        },
      );
    }
    if (showTotp) {
      li.querySelector('[data-action="copy-totp"]').addEventListener(
        "click",
        async (e) => {
          e.stopPropagation();
          const secret = extractTotpSecret(item.plain?.totp_uri);
          const code = await getTotpCode(secret).catch(() => null);
          if (code) copyToClipboard(code, "2FA code copied");
        },
      );
    }
    li.querySelector('[data-action="favorite"]').addEventListener(
      "click",
      (e) => {
        e.stopPropagation();
        toggleFavorite(item);
      },
    );
    li.querySelector('[data-action="edit"]').addEventListener("click", (e) => {
      e.stopPropagation();
      openModal("edit", item);
    });
    li.querySelector('[data-action="delete"]').addEventListener(
      "click",
      (e) => {
        e.stopPropagation();
        confirmDeleteItem(item);
      },
    );
    li.addEventListener("click", (e) => {
      if (_selectMode) {
        // Toggle the checkbox when the row itself is clicked (not the checkbox).
        const cb = li.querySelector(".item-checkbox");
        if (cb && e.target !== cb) {
          cb.checked = !cb.checked;
          cb.dispatchEvent(new Event("change"));
        }
        return;
      }
      openModal("edit", item);
    });
    return li;
  }

  // ── Security Dashboard ────────────────────────────────────────────────────

  /**
   * Check a password against the HaveIBeenPwned Pwned Passwords API
   * using k-anonymity (only the first 5 hex chars of SHA-1 are sent).
   * Returns the breach count (0 = not found in any known breach).
   */
  async function checkHibp(password) {
    try {
      const msgBuffer = new TextEncoder().encode(password);
      const hashBuffer = await crypto.subtle.digest("SHA-1", msgBuffer);
      const hashHex = Array.from(new Uint8Array(hashBuffer))
        .map((b) => b.toString(16).padStart(2, "0"))
        .join("")
        .toUpperCase();
      const prefix = hashHex.slice(0, 5);
      const suffix = hashHex.slice(5);
      const res = await fetch(
        `https://api.pwnedpasswords.com/range/${prefix}`,
        {
          headers: { "Add-Padding": "true" },
        },
      );
      if (!res.ok) return 0;
      const text = await res.text();
      const line = text.split("\n").find((l) => l.startsWith(suffix));
      if (!line) return 0;
      return parseInt(line.split(":")[1], 10) || 0;
    } catch {
      return 0; // network error or API unavailable — fail safe (do not block UI)
    }
  }

  // ── Bulk operations ───────────────────────────────────────────────────────

  function _enterSelectMode() {
    _selectMode = true;
    _selectedIds.clear();
    document.getElementById("btn-select-mode")?.classList.add("active");
    document.getElementById("bulk-toolbar")?.classList.remove("hidden");
    _updateBulkToolbar();
    applyCurrentFilter(); // re-render to show checkboxes
  }

  function _exitSelectMode() {
    _selectMode = false;
    _selectedIds.clear();
    document.getElementById("btn-select-mode")?.classList.remove("active");
    document.getElementById("bulk-toolbar")?.classList.add("hidden");
    applyCurrentFilter(); // re-render to hide checkboxes
  }

  function _updateBulkToolbar() {
    const countEl = document.getElementById("bulk-count");
    const n = _selectedIds.size;
    if (countEl) {
      countEl.textContent = n === 0
        ? "0 selected"
        : `${n} item${n !== 1 ? "s" : ""} selected`;
    }
    // Disable action buttons when nothing is selected.
    ["btn-bulk-move", "btn-bulk-delete", "btn-bulk-export"].forEach((id) => {
      const btn = document.getElementById(id);
      if (btn) btn.disabled = n === 0;
    });
  }

  async function _handleBulkDelete() {
    const ids = [..._selectedIds];
    if (!ids.length) return;
    if (!confirm(`Delete ${ids.length} item${ids.length !== 1 ? "s" : ""}? This cannot be undone.`)) return;
    try {
      await Promise.all(
        ids.map((id) => apiFetch(`/api/vault/${id}`, { method: "DELETE" })),
      );
      showToast(`${ids.length} item${ids.length !== 1 ? "s" : ""} deleted`);
      _exitSelectMode();
      await loadVault();
    } catch (err) {
      showToast("Delete failed: " + err.message, "error");
    }
  }

  async function _handleBulkMove() {
    if (!_selectedIds.size) return;
    // Build a folder picker inline in the bulk toolbar.
    const toolbar = document.getElementById("bulk-toolbar");
    if (!toolbar) return;
    // Remove any existing picker first.
    toolbar.querySelector(".bulk-move-select")?.remove();

    const sel = document.createElement("select");
    sel.className = "bulk-move-select";
    sel.innerHTML =
      '<option value="">— No folder —</option>' +
      _folders.map((f) => `<option value="${f.id}">${escHtml(f.name)}</option>`).join("");

    sel.addEventListener("change", async () => {
      const folderId = sel.value ? parseInt(sel.value) : null;
      sel.remove();
      try {
        await Promise.all(
          [..._selectedIds].map((id) =>
            apiFetch(`/api/vault/${id}`, {
              method: "PUT",
              body: JSON.stringify({ folder_id: folderId }),
            }),
          ),
        );
        const dest = folderId
          ? (_folders.find((f) => f.id === folderId)?.name || "folder")
          : "root";
        showToast(`${_selectedIds.size} item${_selectedIds.size !== 1 ? "s" : ""} moved to ${dest}`);
        _exitSelectMode();
        await loadVault();
      } catch (err) {
        showToast("Move failed: " + err.message, "error");
      }
    });

    // Insert after the Move button.
    const moveBtn = document.getElementById("btn-bulk-move");
    moveBtn?.after(sel);
    sel.focus();
  }

  async function _handleBulkExport() {
    const ids = new Set(_selectedIds);
    if (!ids.size) return;
    const vaultKey = VaultSession.getKey();
    if (!vaultKey) { showUnlockOverlay(); return; }

    const selected = _items.filter((i) => ids.has(i.id));
    const envelope = {
      version: 1,
      exported_at: new Date().toISOString(),
      items: selected.map((i) => ({
        id: i.id,
        name: i.name,
        item_type: i.item_type,
        folder_id: i.folder_id,
        enc_data: i.enc_data,
        iv: i.iv,
        enc_name: i.enc_name || null,
        iv_name: i.iv_name || null,
      })),
    };

    const blob = new Blob([JSON.stringify(envelope, null, 2)], {
      type: "application/json",
    });
    const url = URL.createObjectURL(blob);
    const a = document.createElement("a");
    a.href = url;
    a.download = `passkeeper-selection-${new Date().toISOString().slice(0, 10)}.json`;
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
    URL.revokeObjectURL(url);
    showToast(`${selected.length} item${selected.length !== 1 ? "s" : ""} exported`);
    // Log the export server-side for the audit trail.
    apiFetch("/api/vault/audit-export", {
      method: "POST",
      body: JSON.stringify({ item_ids: selected.map((i) => i.id) }),
    }).catch(() => {}); // best-effort — don't block on this
    _exitSelectMode();
  }

  function _initBulkToolbar() {
    document.getElementById("btn-select-mode")?.addEventListener("click", () => {
      if (_selectMode) _exitSelectMode();
      else _enterSelectMode();
    });

    document.getElementById("btn-bulk-cancel")?.addEventListener("click", _exitSelectMode);

    document.getElementById("btn-bulk-delete")?.addEventListener("click", _handleBulkDelete);

    document.getElementById("btn-bulk-move")?.addEventListener("click", _handleBulkMove);

    document.getElementById("btn-bulk-export")?.addEventListener("click", _handleBulkExport);

    document.getElementById("btn-bulk-select-all")?.addEventListener("click", () => {
      // Select all currently visible items (from the rendered list).
      const list = document.getElementById("vault-list");
      if (!list) return;
      const checkboxes = list.querySelectorAll(".item-checkbox");
      const allChecked = [...checkboxes].every((cb) => cb.checked);
      checkboxes.forEach((cb) => {
        cb.checked = !allChecked;
        const id = parseInt(cb.dataset.id);
        if (!allChecked) {
          _selectedIds.add(id);
          cb.closest(".vault-item")?.classList.add("item-selected");
        } else {
          _selectedIds.delete(id);
          cb.closest(".vault-item")?.classList.remove("item-selected");
        }
      });
      _updateBulkToolbar();
    });
  }

  // ── Background vault health checks ──────────────────────────────────────────
  //
  // Runs after every vault load. Computes weak/reused counts synchronously,
  // then fires HIBP checks in parallel. Updates the Security sidebar badge
  // and a dismissible top banner without requiring the user to open the
  // Security tab. Results are cached so re-opening the tab skips re-checking.

  let _healthCache = null;      // { weak, reused, breached } — populated after first run
  let _hibpRunning = false;     // prevents concurrent HIBP runs

  async function runBackgroundHealthCheck() {
    if (_hibpRunning) return;
    _hibpRunning = true;
    _healthCache = null;

    try {
      const pwItems = _items.filter(
        (i) => i.item_type === "password" && i.plain?.password,
      );
      if (!pwItems.length) {
        _updateHealthUI({ weak: 0, reused: 0, breached: 0 });
        return;
      }

      // Synchronous metrics — instant.
      const weak = pwItems.filter((i) => {
        const p = i.plain.password;
        if (p.length < 10) return true;
        return (
          [/[A-Z]/, /[a-z]/, /[0-9]/, /[^A-Za-z0-9]/].filter((r) => r.test(p))
            .length < 2
        );
      });

      const passCounts = {};
      pwItems.forEach((i) => {
        const p = i.plain.password;
        (passCounts[p] = passCounts[p] || []).push(i);
      });
      const reused = Object.values(passCounts)
        .filter((a) => a.length > 1)
        .flat();

      // Update badge immediately with sync results — HIBP will update again.
      _updateHealthUI({ weak: weak.length, reused: reused.length, breached: null });

      // HIBP — k-anonymity, runs in parallel.
      const hibpResults = await Promise.all(
        pwItems.map(async (item) => ({
          item,
          count: await checkHibp(item.plain.password),
        })),
      );
      const breachedItems = hibpResults.filter((r) => r.count > 0).map((r) => r.item);

      _healthCache = {
        weak: weak.length,
        reused: reused.length,
        breached: breachedItems.length,
        breachedItems,
        hibpResults,
      };

      _updateHealthUI({
        weak: weak.length,
        reused: reused.length,
        breached: breachedItems.length,
      });
    } catch (err) {
      console.error("[PassKeeper] Background health check failed:", err);
    } finally {
      _hibpRunning = false;
    }
  }

  function _updateHealthUI({ weak, reused, breached }) {
    const badge = document.getElementById("security-badge");
    const banner = document.getElementById("health-banner");
    if (!badge || !banner) return;

    const knownBreached = breached !== null;
    const issueCount =
      (weak || 0) + (reused || 0) + (knownBreached ? (breached || 0) : 0);
    const hasBreaches = knownBreached && breached > 0;
    const hasSyncIssues = (weak || 0) + (reused || 0) > 0;

    // ── Sidebar badge ──────────────────────────────────────────────────────
    if (issueCount > 0) {
      badge.textContent = issueCount > 99 ? "99+" : String(issueCount);
      badge.classList.remove("hidden", "badge-warn");
      if (hasBreaches) {
        badge.classList.remove("badge-warn");  // red (default)
      } else {
        badge.classList.add("badge-warn");     // amber
      }
    } else {
      badge.classList.add("hidden");
    }

    // ── Banner ─────────────────────────────────────────────────────────────
    // Don't re-render if user already dismissed it this session.
    if (banner.dataset.dismissed === "1") return;
    if (issueCount === 0) {
      banner.classList.add("hidden");
      return;
    }

    const parts = [];
    if (hasBreaches)
      parts.push(`<strong>${breached}</strong> breached password${breached !== 1 ? "s" : ""}`);
    if ((weak || 0) > 0)
      parts.push(`<strong>${weak}</strong> weak password${weak !== 1 ? "s" : ""}`);
    if ((reused || 0) > 0)
      parts.push(`<strong>${reused}</strong> reused password${reused !== 1 ? "s" : ""}`);

    const severity = hasBreaches ? "danger" : "warn";
    const icon = hasBreaches ? "🚨" : "⚠️";

    banner.className = `health-banner banner-${severity}`;
    banner.innerHTML = `
      <span class="health-banner-icon">${icon}</span>
      <span class="health-banner-text">${parts.join(" · ")}</span>
      <button class="health-banner-link" id="btn-health-banner-view">View report</button>
      <button class="health-banner-dismiss" id="btn-health-banner-dismiss" title="Dismiss">×</button>`;
    banner.classList.remove("hidden");

    document.getElementById("btn-health-banner-view")?.addEventListener("click", () => {
      switchView("security");
    });
    document.getElementById("btn-health-banner-dismiss")?.addEventListener("click", () => {
      banner.classList.add("hidden");
      banner.dataset.dismissed = "1";
    });
  }

  async function renderSecurityDashboard() {
    const summaryEl = document.getElementById("security-summary");
    const sectionsEl = document.getElementById("security-sections");
    if (!summaryEl || !sectionsEl) return;

    // If vault hasn't loaded yet, wait for it then re-render
    if (!_items.length && VaultSession.getKey()) {
      summaryEl.innerHTML = '<div class="sec-notice">Loading…</div>';
      sectionsEl.innerHTML = "";
      loadVault().then(() => renderSecurityDashboard());
      return;
    }

    const pwItems = _items.filter(
      (i) => i.item_type === "password" && i.plain?.password,
    );
    if (!pwItems.length) {
      summaryEl.innerHTML =
        '<div class="sec-notice">No passwords to analyze.</div>';
      sectionsEl.innerHTML = "";
      return;
    }

    const weak = pwItems.filter((i) => {
      const p = i.plain.password;
      if (p.length < 10) return true;
      return (
        [/[A-Z]/, /[a-z]/, /[0-9]/, /[^A-Za-z0-9]/].filter((r) => r.test(p))
          .length < 2
      );
    });

    const passCounts = {};
    pwItems.forEach((i) => {
      const p = i.plain.password;
      (passCounts[p] = passCounts[p] || []).push(i);
    });
    const reused = Object.values(passCounts)
      .filter((a) => a.length > 1)
      .flat();

    const cutoff = Date.now() - 180 * 86400000;
    // "Old" only penalises passwords that are ALSO weak or reused.
    // Uses plain.password_changed_at when available (set on create/edit),
    // falling back to created_at for items saved before this feature.
    const weakOrReusedIds = new Set([
      ...weak.map((i) => i.id),
      ...reused.map((i) => i.id),
    ]);
    const old = pwItems.filter((i) => {
      const ageRef = i.plain?.password_changed_at
        ? new Date(i.plain.password_changed_at).getTime()
        : new Date(i.created_at).getTime();
      return ageRef < cutoff && weakOrReusedIds.has(i.id);
    });

    const total = pwItems.length;
    const score = Math.max(
      0,
      Math.round(
        100 -
          (weak.length / total) * 40 -
          (reused.length / total) * 30 -
          (old.length / total) * 15,
      ),
    );
    const cls =
      score >= 80 ? "score-good" : score >= 50 ? "score-fair" : "score-poor";
    const label =
      score >= 80 ? "Good" : score >= 50 ? "Fair" : "Needs attention";

    summaryEl.innerHTML = `
      <div class="sec-score-card">
        <div class="sec-score ${cls}">${score}</div>
        <div class="sec-score-label">${label}</div>
        <div class="sec-score-desc">Based on ${total} password${total !== 1 ? "s" : ""}</div>
      </div>
      <div class="sec-stats">
        <div class="sec-stat ${weak.length ? "sec-stat-warn" : "sec-stat-ok"}"><span class="sec-stat-num">${weak.length}</span><span class="sec-stat-label">Weak</span></div>
        <div class="sec-stat ${reused.length ? "sec-stat-warn" : "sec-stat-ok"}"><span class="sec-stat-num">${reused.length}</span><span class="sec-stat-label">Reused</span></div>
        <div class="sec-stat ${old.length ? "sec-stat-info" : "sec-stat-ok"}"><span class="sec-stat-num">${old.length}</span><span class="sec-stat-label">Old &amp; Weak</span></div>
      </div>`;

    sectionsEl.innerHTML = "";
    const makeSection = (title, icon, items, desc, renderItem) => {
      if (!items.length) return;
      const sec = document.createElement("div");
      sec.className = "sec-section";
      const defaultRender = (i) => `<li class="sec-item">
            <span class="sec-item-name">${escHtml(i.name)}</span>
            <span class="sec-item-sub">${escHtml(i.plain?.username || "")}</span>
            <button class="btn-secondary btn-sm" data-sec-edit="${i.id}">Edit</button>
          </li>`;
      const renderFn = renderItem || defaultRender;
      sec.innerHTML = `
        <div class="sec-section-header"><span class="sec-section-icon">${icon}</span>
          <div><div class="sec-section-title">${title} (${items.length})</div><div class="sec-section-desc">${desc}</div></div>
        </div>
        <ul class="sec-item-list">
          ${items.map(renderFn).join("")}
        </ul>`;
      sec.querySelectorAll("[data-sec-edit]").forEach((btn) => {
        btn.addEventListener("click", () => {
          const item = _items.find(
            (it) => it.id === parseInt(btn.dataset.secEdit),
          );
          if (item) {
            switchView("vault");
            openModal("edit", item);
          }
        });
      });
      sectionsEl.appendChild(sec);
    };

    makeSection(
      "Weak Passwords",
      "⚠️",
      weak,
      "Short or low-complexity passwords.",
    );
    makeSection(
      "Reused Passwords",
      "♻️",
      [...new Set(reused.map((i) => i.id))]
        .map((id) => _items.find((i) => i.id === id))
        .filter(Boolean),
      "Same password used on multiple sites.",
    );
    makeSection(
      "Old Passwords",
      "🕐",
      old,
      "Weak or reused passwords not changed in over 180 days.",
      (i) => {
        const ref = i.plain?.password_changed_at || i.created_at;
        const daysAgo = ref
          ? Math.floor((Date.now() - new Date(ref).getTime()) / 86400000)
          : null;
        const ageLabel = daysAgo !== null
          ? `Last changed ${daysAgo} day${daysAgo !== 1 ? "s" : ""} ago`
          : "Age unknown";
        return `<li class="sec-item">
            <span class="sec-item-name">${escHtml(i.name)}</span>
            <span class="sec-item-sub">${escHtml(ageLabel)}</span>
            <button class="btn-secondary btn-sm" data-sec-edit="${i.id}">Edit</button>
          </li>`;
      },
    );

    // ── Missing 2FA warning ──────────────────────────────────────────────────
    // Flag password items that have a URL but no TOTP URI saved.
    // These accounts likely support 2FA but the user hasn't stored it.
    const noTotp = pwItems.filter(
      (i) => i.plain?.url && !extractTotpSecret(i.plain?.totp_uri),
    );
    makeSection(
      "No 2FA Saved",
      "🔓",
      noTotp,
      "These accounts may support two-factor authentication but have no TOTP code stored.",
    );

    // ── HaveIBeenPwned breach check ──────────────────────────────────────────
    // Use cached results from the background check when available — avoids
    // re-querying HIBP every time the user opens the Security tab.
    const hibpSection = document.createElement("div");
    hibpSection.className = "sec-section";
    hibpSection.innerHTML = `
      <div class="sec-section-header">
        <span class="sec-section-icon">🔓</span>
        <div>
          <div class="sec-section-title">Checking for known breaches…</div>
          <div class="sec-section-desc">Querying HaveIBeenPwned (k-anonymity — your passwords are never sent).</div>
        </div>
      </div>`;
    sectionsEl.appendChild(hibpSection);

    // Use cached results if available, otherwise run fresh checks.
    let hibpResults;
    if (_healthCache?.hibpResults) {
      hibpResults = _healthCache.hibpResults;
    } else {
      // Run all HIBP checks in parallel — k-anonymity: only 5-char SHA-1 prefix sent.
      hibpResults = await Promise.all(
        pwItems.map(async (item) => ({
          item,
          count: await checkHibp(item.plain.password),
        })),
      );
    }
    const breached = hibpResults.filter((r) => r.count > 0).map((r) => r.item);

    if (!breached.length) {
      hibpSection.innerHTML = `
        <div class="sec-section-header">
          <span class="sec-section-icon">✅</span>
          <div>
            <div class="sec-section-title">No known breaches</div>
            <div class="sec-section-desc">None of your passwords appeared in known data breaches (via HaveIBeenPwned).</div>
          </div>
        </div>`;
    } else {
      hibpSection.innerHTML = `
        <div class="sec-section-header">
          <span class="sec-section-icon">🔓</span>
          <div>
            <div class="sec-section-title">Breached Passwords (${breached.length})</div>
            <div class="sec-section-desc">These passwords appeared in known data breaches. Change them immediately.</div>
          </div>
        </div>
        <ul class="sec-item-list">
          ${breached
            .map((i) => {
              const count =
                hibpResults.find((r) => r.item.id === i.id)?.count || 0;
              return `<li class="sec-item">
              <span class="sec-item-name">${escHtml(i.name)}</span>
              <span class="sec-item-sub">${escHtml(i.plain?.username || "")} — seen ${count.toLocaleString()} time${count !== 1 ? "s" : ""} in breaches</span>
              <button class="btn-secondary btn-sm" data-sec-edit="${i.id}">Change</button>
            </li>`;
            })
            .join("")}
        </ul>`;
      hibpSection.querySelectorAll("[data-sec-edit]").forEach((btn) => {
        btn.addEventListener("click", () => {
          const item = _items.find(
            (it) => it.id === parseInt(btn.dataset.secEdit),
          );
          if (item) {
            switchView("vault");
            openModal("edit", item);
          }
        });
      });
    }
  }

  // ── Import / Export View ─────────────────────────────────────────────────

  // Holds parsed rows from a chosen file, ready for import.
  let _importRows = [];

  /**
   * Parse a Chrome/Bitwarden/1Password CSV into a normalised array of plain objects.
   * Supported column sets:
   *   Chrome:    name, url, username, password
   *   Bitwarden: name, login_uri, login_username, login_password, notes, type
   *   1Password: Title, Url, Username, Password, Notes
   */
  function _parseCsvImport(text) {
    const lines = text.split(/\r?\n/);
    if (lines.length < 2) return [];
    const headers = lines[0]
      .split(",")
      .map((h) => h.trim().replace(/^"|"$/g, "").toLowerCase());

    // Detect format by inspecting header names.
    const col = (candidates) => {
      for (const c of candidates) {
        const idx = headers.indexOf(c);
        if (idx !== -1) return idx;
      }
      return -1;
    };
    const iName = col(["name", "title"]);
    const iUrl = col(["url", "login_uri"]);
    const iUser = col(["username", "login_username"]);
    const iPass = col(["password", "login_password"]);
    const iNotes = col(["notes", "note"]);

    const rows = [];
    for (let i = 1; i < lines.length; i++) {
      const line = lines[i].trim();
      if (!line) continue;
      // RFC 4180-compliant CSV split — handles quoted fields containing commas
      // and embedded double-quotes escaped as "".
      const cells = [];
      let cur = "",
        inQuote = false;
      const src = line + ",";
      for (let ci = 0; ci < src.length; ci++) {
        const ch = src[ci];
        if (ch === '"') {
          if (inQuote && src[ci + 1] === '"') {
            // Escaped quote inside a quoted field: "" → "
            cur += '"';
            ci++; // skip the second quote
          } else {
            inQuote = !inQuote;
          }
        } else if (ch === "," && !inQuote) {
          cells.push(cur.trim());
          cur = "";
        } else {
          cur += ch;
        }
      }
      const get = (idx) =>
        idx !== -1 && cells[idx] != null
          ? cells[idx].replace(/^"|"$/g, "")
          : "";
      const name = get(iName);
      const password = get(iPass);
      if (!name || !password) continue;
      rows.push({
        name,
        url: get(iUrl),
        username: get(iUser),
        password,
        notes: get(iNotes),
      });
    }
    return rows;
  }

  let _importViewInitialised = false;

  function _resetImportView() {
    _importRows = [];
    const fileInput = document.getElementById("import-file-input");
    const fileNameEl = document.getElementById("import-file-name");
    const previewEl = document.getElementById("import-preview");
    const confirmBtn = document.getElementById("btn-import-confirm");
    const resultEl = document.getElementById("import-result");
    if (fileInput) fileInput.value = "";
    if (fileNameEl) fileNameEl.textContent = "No file chosen";
    if (previewEl) {
      previewEl.innerHTML = "";
      previewEl.classList.add("hidden");
    }
    if (confirmBtn) {
      confirmBtn.disabled = true;
      confirmBtn.textContent = "Import items";
      delete confirmBtn.dataset.mode;
    }
    if (resultEl) {
      resultEl.innerHTML = "";
      resultEl.classList.add("hidden");
    }
  }

  function loadImportExportView() {
    // Reset import panel state every time the view is entered so a previous
    // import result or file preview is never shown stale on re-entry.
    _resetImportView();

    if (_importViewInitialised) return;
    _importViewInitialised = true;

    // ── Export ───────────────────────────────────────────────────────────────

    document
      .getElementById("btn-export-json")
      ?.addEventListener("click", async () => {
        try {
          const res = await apiFetch("/api/vault");
          if (!res) return;
          const items = await res.json();
          const payload = JSON.stringify(
            { version: 1, exported_at: new Date().toISOString(), items },
            null,
            2,
          );
          const blob = new Blob([payload], { type: "application/json" });
          const url = URL.createObjectURL(blob);
          const a = document.createElement("a");
          a.href = url;
          a.download = `passkeeper-export-${new Date().toISOString().slice(0, 10)}.json`;
          a.click();
          URL.revokeObjectURL(url);
          showToast("Encrypted vault exported.");
          console.log("[PassKeeper] Vault exported:", items.length, "items");
        } catch (err) {
          showToast("Export failed: " + err.message, "error");
        }
      });

    document
      .getElementById("btn-export-csv")
      ?.addEventListener("click", async () => {
        const vaultKey = VaultSession.getKey();
        if (!vaultKey) {
          showUnlockOverlay();
          return;
        }

        // Warn the user that this export contains plaintext passwords before proceeding.
        const confirmed = await new Promise((resolve) => {
          const overlay = document.createElement("div");
          overlay.style.cssText = [
            "position:fixed",
            "inset:0",
            "background:rgba(0,0,0,0.55)",
            "z-index:9999",
            "display:flex",
            "align-items:center",
            "justify-content:center",
          ].join(";");
          overlay.innerHTML = `
          <div style="background:#fff;border-radius:12px;padding:28px 24px;max-width:380px;width:90%;box-shadow:0 8px 32px rgba(0,0,0,0.22);font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;">
            <div style="display:flex;align-items:center;gap:10px;margin-bottom:14px;">
              <svg width="22" height="22" viewBox="0 0 24 24" fill="none">
                <path d="M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z" stroke="#d97706" stroke-width="1.8" fill="none"/>
                <line x1="12" y1="9" x2="12" y2="13" stroke="#d97706" stroke-width="1.8" stroke-linecap="round"/>
                <line x1="12" y1="17" x2="12.01" y2="17" stroke="#d97706" stroke-width="2" stroke-linecap="round"/>
              </svg>
              <strong style="font-size:15px;color:#111827;">Export plaintext passwords?</strong>
            </div>
            <p style="font-size:13px;color:#374151;margin-bottom:6px;">
              The CSV file will contain <strong>all your passwords in plaintext</strong>.
              Anyone with access to the file can read them.
            </p>
            <p style="font-size:13px;color:#374151;margin-bottom:20px;">
              Store the file in a secure location and delete it when you no longer need it.
            </p>
            <div style="display:flex;gap:10px;justify-content:flex-end;">
              <button id="_csv_cancel" style="padding:8px 18px;border:1px solid #d1d5db;border-radius:7px;background:transparent;cursor:pointer;font-size:13px;color:#374151;">Cancel</button>
              <button id="_csv_confirm" style="padding:8px 18px;border:none;border-radius:7px;background:#c0392b;color:#fff;cursor:pointer;font-size:13px;font-weight:600;">Export anyway</button>
            </div>
          </div>`;
          document.body.appendChild(overlay);
          overlay
            .querySelector("#_csv_cancel")
            .addEventListener("click", () => {
              overlay.remove();
              resolve(false);
            });
          overlay
            .querySelector("#_csv_confirm")
            .addEventListener("click", () => {
              overlay.remove();
              resolve(true);
            });
          overlay.addEventListener("click", (e) => {
            if (e.target === overlay) {
              overlay.remove();
              resolve(false);
            }
          });
        });

        if (!confirmed) return;

        try {
          const res = await apiFetch("/api/vault");
          if (!res) return;
          const raw = await res.json();
          const decrypted = await Promise.all(
            raw.map(async (item) => {
              try {
                const plain = await Crypto.decryptItem(
                  vaultKey,
                  item.enc_data,
                  item.iv,
                );
                let displayName = item.name;
                if (item.enc_name && item.iv_name) {
                  const n = await Crypto.decryptName(
                    vaultKey,
                    item.enc_name,
                    item.iv_name,
                  );
                  if (n) displayName = n;
                }
                return { name: displayName, ...plain };
              } catch {
                return null;
              }
            }),
          );
          const csvRows = [["name", "url", "username", "password", "notes"]];
          decrypted.filter(Boolean).forEach((r) => {
            if (r.password) {
              const esc = (v) => `"${String(v ?? "").replace(/"/g, '""')}"`;
              csvRows.push(
                [r.name, r.url, r.username, r.password, r.notes].map(esc),
              );
            }
          });
          const csv = csvRows.map((r) => r.join(",")).join("\n");
          const blob = new Blob([csv], { type: "text/csv" });
          const url = URL.createObjectURL(blob);
          const a = document.createElement("a");
          a.href = url;
          a.download = `passkeeper-export-${new Date().toISOString().slice(0, 10)}.csv`;
          a.click();
          URL.revokeObjectURL(url);
          showToast("CSV exported — store it securely.");
          console.log(
            "[PassKeeper] CSV export:",
            decrypted.filter(Boolean).length,
            "items",
          );
        } catch (err) {
          showToast("CSV export failed: " + err.message, "error");
        }
      });

    // ── Import ───────────────────────────────────────────────────────────────

    const fileInput = document.getElementById("import-file-input");
    const fileNameEl = document.getElementById("import-file-name");
    const previewEl = document.getElementById("import-preview");
    const confirmBtn = document.getElementById("btn-import-confirm");
    const resultEl = document.getElementById("import-result");

    fileInput?.addEventListener("change", async () => {
      const file = fileInput.files[0];
      if (!file) return;
      fileNameEl.textContent = file.name;
      previewEl.classList.add("hidden");
      resultEl.classList.add("hidden");
      confirmBtn.disabled = true;
      _importRows = [];

      const text = await file.text();
      const isJson = file.name.endsWith(".json");

      try {
        if (isJson) {
          // PassKeeper encrypted JSON export.
          const parsed = JSON.parse(text);
          const items = parsed.items || (Array.isArray(parsed) ? parsed : []);
          if (!items.length) throw new Error("No items found in JSON file.");
          _importRows = items;
          previewEl.innerHTML = `<p>Found <strong>${items.length}</strong> encrypted item(s) ready to import.</p>
            <p class="import-note">These are already encrypted with your vault key — they will be imported as-is.</p>`;
        } else {
          // CSV — decrypt and re-encrypt with current vault key.
          const vaultKey = VaultSession.getKey();
          if (!vaultKey) {
            showUnlockOverlay();
            return;
          }
          const rows = _parseCsvImport(text);
          if (!rows.length)
            throw new Error("No valid rows found. Check the CSV format.");
          _importRows = rows; // stored as plaintext — encrypted on confirm
          previewEl.innerHTML = `<p>Found <strong>${rows.length}</strong> password(s) to import.</p>
            <p class="import-note">Preview (first 5):</p>
            <ul class="import-preview-list">${rows
              .slice(0, 5)
              .map(
                (r) =>
                  `<li><strong>${escHtml(r.name)}</strong> — ${escHtml(r.username || "(no username)")}</li>`,
              )
              .join("")}</ul>
            ${rows.length > 5 ? `<p class="import-note">…and ${rows.length - 5} more.</p>` : ""}`;
        }
        previewEl.classList.remove("hidden");
        confirmBtn.disabled = false;
        confirmBtn.dataset.mode = isJson ? "json" : "csv";
      } catch (err) {
        previewEl.innerHTML = `<p class="import-error">⚠️ ${escHtml(err.message)}</p>`;
        previewEl.classList.remove("hidden");
      }
    });

    confirmBtn?.addEventListener("click", async () => {
      const vaultKey = VaultSession.getKey();
      if (!vaultKey) {
        showUnlockOverlay();
        return;
      }
      confirmBtn.disabled = true;
      confirmBtn.textContent = "Importing…";
      resultEl.classList.add("hidden");

      try {
        let payload;
        if (confirmBtn.dataset.mode === "json") {
          // Already-encrypted items — send directly.
          payload = _importRows;
        } else {
          // Plaintext CSV rows — encrypt each one now.
          // Use the import timestamp as password_changed_at — best available
          // approximation since CSV exports don't carry a change date.
          const importedAt = new Date().toISOString();
          payload = await Promise.all(
            _importRows.map(async (row) => {
              const plain = {
                url: row.url || "",
                username: row.username || "",
                password: row.password,
                notes: row.notes || "",
                password_changed_at: importedAt,
              };
              const { enc_data, iv } = await Crypto.encryptItem(
                vaultKey,
                plain,
              );
              const { enc_name, iv_name } = await Crypto.encryptName(
                vaultKey,
                row.name,
              );
              return {
                name: "password",
                item_type: "password",
                enc_data,
                iv,
                enc_name,
                iv_name,
              };
            }),
          );
        }

        const res = await apiFetch("/api/vault/import", {
          method: "POST",
          body: JSON.stringify(payload),
        });
        if (!res) return;
        const data = await res.json();

        resultEl.innerHTML = `✅ Imported <strong>${data.imported}</strong> item(s)${data.skipped ? `, skipped ${data.skipped} malformed row(s)` : ""}.`;
        resultEl.className = "import-result import-result-ok";
        resultEl.classList.remove("hidden");
        _importRows = [];
        confirmBtn.textContent = "Import items";
        fileInput.value = "";
        fileNameEl.textContent = "No file chosen";
        previewEl.classList.add("hidden");
        console.log(
          "[PassKeeper] Import complete:",
          data.imported,
          "imported,",
          data.skipped,
          "skipped",
        );
        await loadVault();
      } catch (err) {
        resultEl.innerHTML = `⚠️ ${escHtml(err.message)}`;
        resultEl.className = "import-result import-result-err";
        resultEl.classList.remove("hidden");
        confirmBtn.disabled = false;
        confirmBtn.textContent = "Import items";
      }
    });
  }

  // ── Sharing View ──────────────────────────────────────────────────────────

  async function loadSharingView() {
    try {
      const keysRes = await apiFetch("/api/sharing/keys");
      if (!keysRes) return;
      const keysData = await keysRes.json();

      const notice = document.getElementById("sharing-keys-notice");
      if (!keysData.keys_setup) {
        notice.classList.remove("hidden");
      } else {
        notice.classList.add("hidden");
        // Load sharing private key into SharingSession if vault key available
        const vaultKey = VaultSession.getKey();
        if (vaultKey && !SharingSession.isReady()) {
          try {
            const privKey = await SharingCrypto.decryptPrivateKey(
              vaultKey,
              keysData.private_key_enc,
              keysData.private_key_iv,
            );
            SharingSession.setKey(privKey);
          } catch (err) {
            console.warn(
              "[PassKeeper] Could not load sharing private key:",
              err,
            );
          }
        }
      }

      await Promise.all([loadSharedOut(), loadSharedIn()]);
    } catch (err) {
      showToast("Could not load sharing data: " + err.message, "error");
    }
  }

  async function loadSharedOut() {
    try {
      const res = await apiFetch("/api/sharing");
      if (!res) return;
      const shares = await res.json();
      renderSharedOut(shares);
    } catch (err) {
      console.error("loadSharedOut:", err);
    }
  }

  async function loadSharedIn() {
    try {
      const res = await apiFetch("/api/sharing/inbox");
      if (!res) return;
      const shares = await res.json();
      renderSharedIn(shares);
    } catch (err) {
      console.error("loadSharedIn:", err);
    }
  }

  function renderSharedOut(shares) {
    const ul = document.getElementById("shared-out-list");
    if (!ul) return;
    if (!shares.length) {
      ul.innerHTML =
        '<li class="vault-empty">You haven\'t shared any items yet.</li>';
      return;
    }
    ul.innerHTML = shares
      .map(
        (s) => {
          // Resolve the display name: prefer the decrypted name from _items
          // (owner's vault is already in memory), fall back to item_name which
          // is now the item_type label for new shares, or a legacy plaintext
          // name for shares created before the enc_name migration.
          const vaultItem = _items.find((i) => i.id === s.item_id);
          const displayName = vaultItem?.name || s.item_name;
          const expiryLabel = (() => {
            if (!s.expires_at) return "";
            const daysLeft = Math.ceil(
              (new Date(s.expires_at).getTime() - Date.now()) / 86400000,
            );
            if (daysLeft <= 0) return " · <span class=\"badge badge-danger\">Expired</span>";
            if (daysLeft <= 3) return ` · <span class="badge badge-warn">Expires in ${daysLeft}d</span>`;
            return ` · Expires ${new Date(s.expires_at).toLocaleDateString()}`;
          })();
          return `
      <li class="share-item">
        <div class="share-icon">${itemIcon(s.item_type)}</div>
        <div class="share-info">
          <span class="share-name">${escHtml(displayName)}</span>
          <span class="share-meta">Shared with ${escHtml(s.recipient_email)} · ${s.accepted ? "✅ Accepted" : "⏳ Pending"}${expiryLabel}</span>
        </div>
        <button class="btn-icon" title="Revoke share" data-revoke="${s.id}">🗑️</button>
      </li>`;
        },
      )
      .join("");

    ul.querySelectorAll("[data-revoke]").forEach((btn) => {
      btn.addEventListener("click", async () => {
        if (!confirm("Remove this share?")) return;
        try {
          await apiFetch(`/api/sharing/${btn.dataset.revoke}`, {
            method: "DELETE",
          });
          showToast("Share removed");
          loadSharedOut();
        } catch (err) {
          showToast(err.message, "error");
        }
      });
    });
  }

  function renderSharedIn(shares) {
    const ul = document.getElementById("shared-in-list");
    if (!ul) return;
    if (!shares.length) {
      ul.innerHTML =
        '<li class="vault-empty">No items have been shared with you.</li>';
      return;
    }
    ul.innerHTML = shares
      .map(
        (s) => {
          // Expiry label for pending (unaccepted) items.
          const expiryLabel = (() => {
            if (!s.expires_at || s.accepted) return "";
            const daysLeft = Math.ceil(
              (new Date(s.expires_at).getTime() - Date.now()) / 86400000,
            );
            if (daysLeft <= 3)
              return ` · <span class="badge badge-warn">Expires in ${daysLeft}d</span>`;
            return ` · Expires ${new Date(s.expires_at).toLocaleDateString()}`;
          })();
          return `
      <li class="share-item">
        <div class="share-icon">${itemIcon(s.item_type)}</div>
        <div class="share-info">
          <span class="share-name">${escHtml(s.item_name)}</span>
          <span class="share-meta">From ${escHtml(s.owner_email)}${expiryLabel}</span>
        </div>
        ${
          !s.accepted
            ? `<button class="btn-primary btn-sm" data-accept="${s.id}">Accept</button>`
            : `<button class="btn-secondary btn-sm"
                data-view-share="${s.id}"
                data-owner-key="${escHtml(s.owner_public_key || "")}"
                data-enc="${escHtml(s.enc_data)}"
                data-iv="${escHtml(s.iv)}"
                data-enc-name="${escHtml(s.enc_name || "")}"
                data-iv-name="${escHtml(s.iv_name || "")}"
                data-name="${escHtml(s.item_name)}"
                data-type="${escHtml(s.item_type || "")}">View</button>`
        }
      </li>`;
        },
      )
      .join("");

    ul.querySelectorAll("[data-accept]").forEach((btn) => {
      btn.addEventListener("click", async () => {
        try {
          await apiFetch(`/api/sharing/inbox/${btn.dataset.accept}/accept`, {
            method: "POST",
          });
          showToast("Share accepted");
          loadSharedIn();
        } catch (err) {
          showToast(err.message, "error");
        }
      });
    });

    ul.querySelectorAll("[data-view-share]").forEach((btn) => {
      btn.addEventListener("click", async () => {
        if (!SharingSession.isReady()) {
          showToast("Sharing keys not loaded. Check Settings.", "error");
          return;
        }
        try {
          const ownerPubKey = await SharingCrypto.importPublicKey(
            btn.dataset.ownerKey,
          );
          const sharedKey = await SharingCrypto.deriveSharedKey(
            SharingSession.getKey(),
            ownerPubKey,
          );
          const plain = await SharingCrypto.decryptShare(
            sharedKey,
            btn.dataset.enc,
            btn.dataset.iv,
          );
          // Decrypt the item name if an encrypted version is available.
          // Falls back to the non-sensitive label for legacy shares.
          let displayName = btn.dataset.name;
          if (btn.dataset.encName && btn.dataset.ivName) {
            const decrypted = await SharingCrypto.decryptName(
              sharedKey,
              btn.dataset.encName,
              btn.dataset.ivName,
            );
            if (decrypted) displayName = decrypted;
          }
          showSharedItemDetails(displayName, btn.dataset.type, plain);
        } catch (err) {
          showToast("Could not decrypt: " + err.message, "error");
        }
      });
    });
  }

  function showSharedItemDetails(name, itemType, plain) {
    document.getElementById("detail-modal-title").textContent =
      `${itemIcon(itemType || "password")} ${name}`;
    renderDetailFields(document.getElementById("detail-modal-body"), plain);
    document.getElementById("detail-modal").classList.add("open");
  }

  function renderDetailFields(container, plain) {
    container.innerHTML =
      Object.entries(plain)
        .filter(([, v]) => v)
        .map(([k, v]) => {
          const label = FIELD_LABELS[k] || k.replace(/_/g, " ");
          const val = String(v);
          const sensitive = SENSITIVE_FIELDS.has(k);
          const valHtml = sensitive
            ? `<span class="detail-sensitive">
               <span class="detail-masked">••••••••</span>
               <span class="detail-actual hidden">${escHtml(val)}</span>
             </span>
             <button type="button" class="btn-icon btn-reveal" title="Show/hide">👁</button>`
            : `<span class="detail-val">${escHtml(val)}</span>`;
          return `<div class="detail-field">
          <span class="detail-label">${escHtml(label)}</span>
          <div class="detail-val-row">
            ${valHtml}
            <button type="button" class="btn-icon btn-copy-field" data-copy="${escHtml(val)}" title="Copy">📋</button>
          </div>
        </div>`;
        })
        .join("") || '<p class="vault-empty">No fields to display.</p>';

    container.querySelectorAll(".btn-reveal").forEach((btn) => {
      btn.addEventListener("click", () => {
        const span = btn.previousElementSibling;
        const revealed = span.dataset.revealed === "true";
        span.dataset.revealed = String(!revealed);
        span
          .querySelector(".detail-masked")
          .classList.toggle("hidden", !revealed);
        span
          .querySelector(".detail-actual")
          .classList.toggle("hidden", revealed);
      });
    });
    container.querySelectorAll(".btn-copy-field").forEach((btn) => {
      btn.addEventListener("click", () => {
        navigator.clipboard
          .writeText(btn.dataset.copy)
          .then(() => showToast("Copied!"));
      });
    });
  }

  async function handleShareFormSubmit(e) {
    e.preventDefault();
    const errEl = document.getElementById("share-error");
    errEl.classList.add("hidden");

    if (!SharingSession.isReady()) {
      showToast("Set up sharing keys first (Settings)", "error");
      return;
    }

    const itemId = parseInt(document.getElementById("share-item-select").value);
    const recipientEmail = document
      .getElementById("share-recipient-email")
      .value.trim()
      .toLowerCase();

    if (!itemId || !recipientEmail) {
      errEl.textContent = "Please select an item and enter a recipient email.";
      errEl.classList.remove("hidden");
      return;
    }

    try {
      // Fetch recipient's public key
      const pkRes = await apiFetch(
        `/api/sharing/public-key?email=${encodeURIComponent(recipientEmail)}`,
      );
      if (!pkRes) return;
      const pkData = await pkRes.json();

      const recipientPubKey = await SharingCrypto.importPublicKey(
        pkData.public_key,
      );
      const sharedKey = await SharingCrypto.deriveSharedKey(
        SharingSession.getKey(),
        recipientPubKey,
      );

      // Find item plaintext
      const item = _items.find((i) => i.id === itemId);
      if (!item?.plain) {
        showToast("Item not found or not decrypted", "error");
        return;
      }

      const { enc_data, iv } = await SharingCrypto.encryptForShare(
        sharedKey,
        item.plain,
      );

      // Encrypt the display name with the same ECDH shared key so the server
      // never sees the plaintext name. item_name is set to item_type as a
      // non-sensitive fallback label for legacy-compat (server requires the field).
      const { enc_name, iv_name } = await SharingCrypto.encryptName(
        sharedKey,
        item.name,
      );

      const res = await apiFetch("/api/sharing", {
        method: "POST",
        body: JSON.stringify({
          item_id: itemId,
          recipient_email: recipientEmail,
          enc_data,
          iv,
          item_name: item.item_type,  // non-sensitive label; real name is in enc_name
          item_type: item.item_type,
          enc_name,
          iv_name,
          expires_days: (() => {
            const sel = document.getElementById("share-expiry-select");
            const v = sel ? parseInt(sel.value) : NaN;
            return isNaN(v) || v === 0 ? null : v;
          })(),
        }),
      });
      if (!res) return;

      closeModal("share-modal");
      showToast("Item shared successfully");
      loadSharedOut();
    } catch (err) {
      errEl.textContent = err.message;
      errEl.classList.remove("hidden");
    }
  }

  function openShareModal() {
    const sel = document.getElementById("share-item-select");
    sel.innerHTML = _items
      .map(
        (i) =>
          `<option value="${i.id}">${escHtml(i.name)} (${i.item_type})</option>`,
      )
      .join("");
    document.getElementById("share-recipient-email").value = "";
    document.getElementById("share-error").classList.add("hidden");
    document.getElementById("share-modal").classList.add("open");
  }

  // ── Emergency Access View ─────────────────────────────────────────────────

  async function loadEmergencyView() {
    try {
      const res = await apiFetch("/api/emergency");
      if (!res) return;
      const data = await res.json();
      renderEmergencyGrants(data.grants);
      renderEmergencyAccess(data.access);
    } catch (err) {
      showToast(
        "Could not load emergency access data: " + err.message,
        "error",
      );
    }
  }

  function renderEmergencyGrants(grants) {
    const ul = document.getElementById("em-grants-list");
    if (!ul) return;
    if (!grants.length) {
      ul.innerHTML =
        '<li class="vault-empty">No trusted contacts set up yet.</li>';
      return;
    }

    ul.innerHTML = grants
      .map((g) => {
        let actions = "";
        if (g.status === "accepted") {
          actions = `<button class="btn-primary btn-sm" data-provide="${g.id}">Provide Recovery Data</button>`;
        }
        if (g.status === "ready") {
          // Check if the stored snapshot is in the old format (plaintext names).
          if (g.enc_vault_is_legacy) {
            actions = `
              <span class="badge badge-warn" title="Recovery snapshot contains plaintext item names. Re-provision to encrypt them.">⚠ Outdated snapshot</span>
              <button class="btn-primary btn-sm" data-provide="${g.id}">Re-provision</button>`;
          } else {
            actions = `<button class="btn-secondary btn-sm" data-provide="${g.id}">Update Recovery Data</button>`;
          }
        }
        if (g.status === "pending") {
          const waitInfo = g.wait_elapsed
            ? "Wait period elapsed"
            : "Access requested";
          actions = `<span class="badge badge-warn">${waitInfo}</span>
          <button class="btn-secondary btn-sm" data-deny="${g.id}">Deny</button>`;
        }
        return `<li class="share-item">
        <div class="share-icon">🚨</div>
        <div class="share-info">
          <span class="share-name">${escHtml(g.grantee_email)}</span>
          <span class="share-meta">Status: ${escHtml(g.status)} · Wait: ${g.wait_days} day(s)</span>
        </div>
        <div class="share-actions">
          ${actions}
          <button class="btn-icon" title="Remove" data-remove-ea="${g.id}">🗑️</button>
        </div>
      </li>`;
      })
      .join("");

    ul.querySelectorAll("[data-provide]").forEach((btn) => {
      btn.addEventListener("click", () =>
        handleProvideEmergencyData(parseInt(btn.dataset.provide)),
      );
    });
    ul.querySelectorAll("[data-deny]").forEach((btn) => {
      btn.addEventListener("click", async () => {
        if (!confirm("Deny this access request?")) return;
        try {
          await apiFetch(`/api/emergency/${btn.dataset.deny}/deny`, {
            method: "POST",
          });
          showToast("Access request denied");
          loadEmergencyView();
        } catch (err) {
          showToast(err.message, "error");
        }
      });
    });
    ul.querySelectorAll("[data-remove-ea]").forEach((btn) => {
      btn.addEventListener("click", async () => {
        if (!confirm("Remove this emergency access grant?")) return;
        try {
          await apiFetch(`/api/emergency/${btn.dataset.removeEa}`, {
            method: "DELETE",
          });
          showToast("Emergency access removed");
          loadEmergencyView();
        } catch (err) {
          showToast(err.message, "error");
        }
      });
    });
  }

  async function handleProvideEmergencyData(eaId) {
    if (!SharingSession.isReady()) {
      showToast("Set up sharing keys first (Settings → Sharing Keys)", "error");
      return;
    }
    if (
      !confirm(
        "This will create an encrypted snapshot of all your vault items for your trusted contact. Continue?",
      )
    )
      return;

    try {
      // Get grantee's public key from the emergency record
      const listRes = await apiFetch("/api/emergency");
      const listData = await listRes.json();
      const ea = listData.grants.find((g) => g.id === eaId);
      if (!ea) {
        showToast("Emergency access record not found", "error");
        return;
      }

      // Fetch grantee's public key
      const pkRes = await apiFetch(
        `/api/sharing/public-key?email=${encodeURIComponent(ea.grantee_email)}`,
      );
      if (!pkRes) return;
      const pkData = await pkRes.json();

      const granteePubKey = await SharingCrypto.importPublicKey(
        pkData.public_key,
      );
      const sharedKey = await SharingCrypto.deriveSharedKey(
        SharingSession.getKey(),
        granteePubKey,
      );

      // Re-encrypt all decrypted vault items.
      // Item name is encrypted with the same ECDH shared key so the server
      // never sees plaintext names inside enc_vault (zero-knowledge).
      const encItems = await Promise.all(
        _items
          .filter((i) => i.plain)
          .map(async (i) => {
            const { enc_data, iv } = await SharingCrypto.encryptForShare(
              sharedKey,
              i.plain,
            );
            const { enc_name, iv_name } = await SharingCrypto.encryptName(
              sharedKey,
              i.name,
            );
            return {
              id: i.id,
              item_type: i.item_type,
              enc_data,
              iv,
              enc_name,
              iv_name,
            };
          }),
      );

      await apiFetch(`/api/emergency/${eaId}/provide`, {
        method: "POST",
        body: JSON.stringify({ enc_vault: JSON.stringify(encItems) }),
      });

      showToast("Recovery data provided");
      loadEmergencyView();
    } catch (err) {
      showToast("Failed to provide recovery data: " + err.message, "error");
    }
  }

  function renderEmergencyAccess(access) {
    const ul = document.getElementById("em-access-list");
    if (!ul) return;
    if (!access.length) {
      ul.innerHTML =
        '<li class="vault-empty">No one has designated you as an emergency contact.</li>';
      return;
    }

    ul.innerHTML = access
      .map((a) => {
        let actions = "";
        if (a.status === "invited") {
          actions = `<button class="btn-primary btn-sm" data-accept-ea="${a.id}">Accept</button>`;
        } else if (a.status === "ready") {
          actions = `<button class="btn-primary btn-sm" data-request-ea="${a.id}">Request Access</button>`;
        } else if (a.status === "pending") {
          let daysLeft = a.wait_days;
          if (a.request_initiated_at) {
            const elapsed =
              (Date.now() - new Date(a.request_initiated_at).getTime()) /
              86400000;
            daysLeft = Math.max(0, Math.ceil(a.wait_days - elapsed));
          }
          actions = a.wait_elapsed
            ? `<button class="btn-primary btn-sm" data-get-vault="${a.id}">View Vault</button>`
            : `<span class="badge badge-info">Waiting (~${daysLeft} day${daysLeft !== 1 ? "s" : ""} left)</span>`;
        }
        return `<li class="share-item">
        <div class="share-icon">🔐</div>
        <div class="share-info">
          <span class="share-name">${escHtml(a.grantor_email || "Unknown")}</span>
          <span class="share-meta">Status: ${escHtml(a.status)} · Wait: ${a.wait_days} day(s)</span>
        </div>
        <div class="share-actions">${actions}</div>
      </li>`;
      })
      .join("");

    ul.querySelectorAll("[data-accept-ea]").forEach((btn) => {
      btn.addEventListener("click", async () => {
        try {
          await apiFetch(`/api/emergency/${btn.dataset.acceptEa}/accept`, {
            method: "POST",
          });
          showToast("Emergency access accepted");
          loadEmergencyView();
        } catch (err) {
          showToast(err.message, "error");
        }
      });
    });
    ul.querySelectorAll("[data-request-ea]").forEach((btn) => {
      btn.addEventListener("click", async () => {
        if (
          !confirm(
            "Request emergency access? This will start the waiting period. The vault owner will be notified.",
          )
        )
          return;
        try {
          await apiFetch(`/api/emergency/${btn.dataset.requestEa}/request`, {
            method: "POST",
          });
          showToast("Access request sent — wait period has started");
          loadEmergencyView();
        } catch (err) {
          showToast(err.message, "error");
        }
      });
    });
    ul.querySelectorAll("[data-get-vault]").forEach((btn) => {
      btn.addEventListener("click", () =>
        handleGetEmergencyVault(parseInt(btn.dataset.getVault)),
      );
    });
  }

  async function handleGetEmergencyVault(eaId) {
    if (!SharingSession.isReady()) {
      showToast("Set up sharing keys first (Settings → Sharing Keys)", "error");
      return;
    }
    try {
      const res = await apiFetch(`/api/emergency/${eaId}/vault`);
      if (!res) return;
      const data = await res.json();

      const grantorPubKey = await SharingCrypto.importPublicKey(
        data.grantor_public_key,
      );
      const sharedKey = await SharingCrypto.deriveSharedKey(
        SharingSession.getKey(),
        grantorPubKey,
      );

      const encItems = JSON.parse(data.enc_vault);
      const decItems = await Promise.all(
        encItems.map(async (i) => {
          try {
            const plain = await SharingCrypto.decryptShare(
              sharedKey,
              i.enc_data,
              i.iv,
            );
            // Decrypt the item display name if available (new format).
            // Fall back to item_type label for legacy enc_vault snapshots.
            let displayName = i.item_type || "password";
            if (i.enc_name && i.iv_name) {
              const decName = await SharingCrypto.decryptName(
                sharedKey,
                i.enc_name,
                i.iv_name,
              );
              if (decName) displayName = decName;
            }
            return { ...i, name: displayName, plain };
          } catch {
            return { ...i, name: i.item_type || "password", plain: null };
          }
        }),
      );

      renderEmergencyVaultPanel(decItems);
    } catch (err) {
      showToast("Could not retrieve vault: " + err.message, "error");
    }
  }

  function renderEmergencyVaultPanel(items) {
    const list = document.getElementById("em-access-list");
    const panel = document.getElementById("em-vault-panel");
    const vaultList = document.getElementById("em-vault-list");
    if (!panel || !vaultList) return;

    list.classList.add("hidden");
    panel.classList.remove("hidden");

    if (!items.length) {
      vaultList.innerHTML =
        '<li class="vault-empty">No items in emergency vault.</li>';
      return;
    }

    vaultList.innerHTML = items
      .map((item, idx) => {
        const icon = itemIcon(item.item_type);
        const hasFields =
          item.plain && Object.values(item.plain).some((v) => v);
        return `<li class="em-vault-item">
        <button type="button" class="em-vault-item-header" data-em-idx="${idx}" aria-expanded="false">
          <span class="em-vault-icon">${icon}</span>
          <span class="em-vault-name">${escHtml(item.name)}</span>
          <span class="em-vault-type">${escHtml(item.item_type)}</span>
          <span class="em-vault-chevron">▸</span>
        </button>
        <div class="em-vault-item-body hidden" id="em-vault-body-${idx}">
          ${
            hasFields
              ? '<div class="detail-body em-detail-body"></div>'
              : '<p class="vault-empty">Could not decrypt this item.</p>'
          }
        </div>
      </li>`;
      })
      .join("");

    // Populate detail fields and wire expand/collapse
    items.forEach((item, idx) => {
      const header = vaultList.querySelector(`[data-em-idx="${idx}"]`);
      const body = document.getElementById(`em-vault-body-${idx}`);
      const detailBody = body?.querySelector(".em-detail-body");
      if (detailBody && item.plain) renderDetailFields(detailBody, item.plain);

      header?.addEventListener("click", () => {
        const expanded = header.getAttribute("aria-expanded") === "true";
        header.setAttribute("aria-expanded", String(!expanded));
        header.querySelector(".em-vault-chevron").textContent = expanded
          ? "▸"
          : "▾";
        body?.classList.toggle("hidden", expanded);
      });
    });

    document
      .getElementById("btn-em-vault-back")
      ?.addEventListener("click", () => {
        panel.classList.add("hidden");
        list.classList.remove("hidden");
      });
  }

  // ── Password Generator ────────────────────────────────────────────────

  const GEN_CHARSETS = {
    upper: "ABCDEFGHIJKLMNOPQRSTUVWXYZ",
    lower: "abcdefghijklmnopqrstuvwxyz",
    digits: "0123456789",
    symbols: "!@#$%^&*()-_=+[]{}|;:,.<>?",
  };

  function generatePassword(
    length = 20,
    opts = { upper: true, lower: true, digits: true, symbols: true },
  ) {
    let pool = "";
    const required = [];
    if (opts.upper) {
      pool += GEN_CHARSETS.upper;
      required.push(GEN_CHARSETS.upper);
    }
    if (opts.lower) {
      pool += GEN_CHARSETS.lower;
      required.push(GEN_CHARSETS.lower);
    }
    if (opts.digits) {
      pool += GEN_CHARSETS.digits;
      required.push(GEN_CHARSETS.digits);
    }
    if (opts.symbols) {
      pool += GEN_CHARSETS.symbols;
      required.push(GEN_CHARSETS.symbols);
    }
    if (!pool) pool = GEN_CHARSETS.lower;

    const arr = new Uint32Array(length + required.length);
    window.crypto.getRandomValues(arr);

    // Guarantee at least one char from each required charset
    const chars = required.map((cs, i) => cs[arr[i] % cs.length]);
    for (let i = required.length; i < length + required.length; i++) {
      chars.push(pool[arr[i] % pool.length]);
    }
    // Fisher-Yates shuffle using crypto random
    const shuffle = new Uint32Array(chars.length);
    window.crypto.getRandomValues(shuffle);
    for (let i = chars.length - 1; i > 0; i--) {
      const j = shuffle[i] % (i + 1);
      [chars[i], chars[j]] = [chars[j], chars[i]];
    }
    return chars.slice(0, length).join("");
  }

  function scorePassword(pw) {
    if (!pw) return { score: 0, label: "", cls: "" };
    let score = 0;
    if (pw.length >= 8) score++;
    if (pw.length >= 12) score++;
    if (pw.length >= 16) score++;
    if (/[A-Z]/.test(pw)) score++;
    if (/[a-z]/.test(pw)) score++;
    if (/[0-9]/.test(pw)) score++;
    if (/[^A-Za-z0-9]/.test(pw)) score++;
    // clamp to 5 bands
    const band = Math.min(5, Math.ceil((score / 7) * 5));
    const labels = ["", "Very Weak", "Weak", "Fair", "Strong", "Very Strong"];
    const clses = [
      "",
      "strength-1",
      "strength-2",
      "strength-3",
      "strength-4",
      "strength-5",
    ];
    return { score: band, label: labels[band], cls: clses[band] };
  }

  // Attach strength meter + generate button to the password field in the item modal
  function initPasswordFieldEnhancements() {
    const pwInput = document.getElementById("field-password");
    if (!pwInput) return;

    // Strength bar below the password field
    if (!document.getElementById("field-password-strength")) {
      const bar = document.createElement("div");
      bar.id = "field-password-strength";
      bar.className = "password-strength";
      pwInput
        .closest(".input-with-toggle")
        .insertAdjacentElement("afterend", bar);
    }

    pwInput.addEventListener("input", () => {
      const { label, cls } = scorePassword(pwInput.value);
      const bar = document.getElementById("field-password-strength");
      bar.textContent = pwInput.value ? label : "";
      bar.className = "password-strength " + (pwInput.value ? cls : "");
    });

    // Generate button — add only once
    if (!document.getElementById("btn-generate-pass")) {
      const btn = document.createElement("button");
      btn.type = "button";
      btn.id = "btn-generate-pass";
      btn.className = "btn-secondary btn-sm btn-generate";
      btn.textContent = "⚡ Generate";
      pwInput.closest(".form-group").appendChild(btn);
    }

    document.getElementById("btn-generate-pass").onclick = () => {
      const pw = generatePassword(20);
      pwInput.value = pw;
      pwInput.type = "text"; // reveal so user can see what was generated
      pwInput.dispatchEvent(new Event("input")); // trigger strength bar
    };
  }

  function openPasswordGeneratorModal() {
    // Build modal content dynamically — keeps the HTML lean
    let modal = document.getElementById("gen-modal");
    if (!modal) {
      modal = document.createElement("div");
      modal.id = "gen-modal";
      modal.className = "modal-overlay";
      modal.setAttribute("role", "dialog");
      modal.setAttribute("aria-modal", "true");
      modal.innerHTML = `
        <div class="modal gen-modal-inner">
          <div class="modal-header">
            <h3>⚡ Password Generator</h3>
            <button class="btn-icon btn-close" id="btn-close-gen-modal" aria-label="Close">✕</button>
          </div>
          <div class="form-group gen-form-group">
            <label>Length: <strong id="gen-length-display">20</strong></label>
            <input type="range" id="gen-length" min="8" max="64" value="20">
          </div>
          <div class="gen-options">
            <label class="gen-opt"><input type="checkbox" id="gen-upper"   checked> Uppercase</label>
            <label class="gen-opt"><input type="checkbox" id="gen-lower"   checked> Lowercase</label>
            <label class="gen-opt"><input type="checkbox" id="gen-digits"  checked> Numbers</label>
            <label class="gen-opt"><input type="checkbox" id="gen-symbols" checked> Symbols</label>
          </div>
          <div class="form-group">
            <label>Generated Password</label>
            <div class="input-with-toggle gen-input-wrap">
              <input type="text" id="gen-output" readonly>
              <button type="button" class="btn-show-pass" id="btn-gen-copy" title="Copy">📋</button>
            </div>
            <div id="gen-strength" class="password-strength"></div>
          </div>
          <div class="modal-actions">
            <button type="button" class="btn-secondary" id="btn-close-gen-modal2">Close</button>
            <button type="button" class="btn-primary"   id="btn-regenerate">↺ Regenerate</button>
          </div>
        </div>`;
      document.body.appendChild(modal);

      const lengthSlider = document.getElementById("gen-length");
      const lengthDisplay = document.getElementById("gen-length-display");
      const output = document.getElementById("gen-output");
      const strengthEl = document.getElementById("gen-strength");

      function refreshGen() {
        const pw = generatePassword(parseInt(lengthSlider.value), {
          upper: document.getElementById("gen-upper").checked,
          lower: document.getElementById("gen-lower").checked,
          digits: document.getElementById("gen-digits").checked,
          symbols: document.getElementById("gen-symbols").checked,
        });
        output.value = pw;
        const { label, cls } = scorePassword(pw);
        strengthEl.textContent = label;
        strengthEl.className = "password-strength " + cls;
      }

      lengthSlider.addEventListener("input", () => {
        lengthDisplay.textContent = lengthSlider.value;
        refreshGen();
      });
      ["gen-upper", "gen-lower", "gen-digits", "gen-symbols"].forEach((id) => {
        document.getElementById(id).addEventListener("change", refreshGen);
      });
      document
        .getElementById("btn-regenerate")
        .addEventListener("click", refreshGen);
      document.getElementById("btn-gen-copy").addEventListener("click", () => {
        navigator.clipboard
          .writeText(output.value)
          .then(() => showToast("Password copied"));
      });
      const closeGen = () => modal.classList.remove("open");
      document
        .getElementById("btn-close-gen-modal")
        .addEventListener("click", closeGen);
      document
        .getElementById("btn-close-gen-modal2")
        .addEventListener("click", closeGen);
      modal.addEventListener("click", (e) => {
        if (e.target === modal) closeGen();
      });

      refreshGen();
    }
    modal.classList.add("open");
    // Regenerate fresh password each time modal opens
    const lengthSlider = document.getElementById("gen-length");
    document.getElementById("gen-length-display").textContent =
      lengthSlider.value;
    const pw = generatePassword(parseInt(lengthSlider.value), {
      upper: document.getElementById("gen-upper").checked,
      lower: document.getElementById("gen-lower").checked,
      digits: document.getElementById("gen-digits").checked,
      symbols: document.getElementById("gen-symbols").checked,
    });
    document.getElementById("gen-output").value = pw;
    const { label, cls } = scorePassword(pw);
    const strengthEl = document.getElementById("gen-strength");
    strengthEl.textContent = label;
    strengthEl.className = "password-strength " + cls;
  }

  // ── Account Settings ──────────────────────────────────────────────────────

  let _pendingMfaSecret = null;

  async function openSettingsModal() {
    document.getElementById("settings-modal").classList.add("open");
    // Populate web-app session timeout select with saved value.
    const idleSel = document.getElementById("web-idle-select");
    if (idleSel) idleSel.value = String(_getWebIdleMinutes());
    // Reset change password fields
    ["cp-current", "cp-new", "cp-confirm"].forEach((id) => {
      const el = document.getElementById(id);
      if (el) el.value = "";
    });
    document.getElementById("cp-error")?.classList.add("hidden");
    // Reset delete account area
    document.getElementById("delete-confirm-area")?.classList.add("hidden");
    document.getElementById("btn-delete-account")?.classList.remove("hidden");
    document.getElementById("delete-password").value = "";
    document.getElementById("delete-error")?.classList.add("hidden");
    // Reset recovery display
    document.getElementById("recovery-code-display")?.classList.add("hidden");
    await Promise.all([
      loadMfaStatus(),
      loadSharingKeysStatus(),
      loadRecoveryStatus(),
      loadAuditLog(0, true),
      loadPasskeys(),
    ]);
  }

  async function loadMfaStatus() {
    try {
      const res = await apiFetch("/api/auth/mfa/status");
      if (!res) return;
      const data = await res.json();
      renderMfaStatus(data.totp_enabled, data.backup_codes_remaining);
    } catch (err) {
      console.error("loadMfaStatus:", err);
    }
  }

  const _auditPageSize = 20;
  let _auditOffset = 0;
  let _auditTotal = 0;

  // ── Passkey (WebAuthn) management ────────────────────────────────────────────

  async function loadPasskeys() {
    const listEl = document.getElementById("passkeys-list");
    const errEl = document.getElementById("passkeys-error");
    if (!listEl) return;
    errEl?.classList.add("hidden");

    // Hide the section if WebAuthn is not supported in this browser.
    if (!window.PublicKeyCredential) {
      document.getElementById("passkeys-section")?.classList.add("hidden");
      return;
    }

    try {
      const res = await apiFetch("/api/webauthn/credentials");
      const creds = await res.json();
      if (!Array.isArray(creds) || !creds.length) {
        listEl.innerHTML = '<p class="settings-desc">No passkeys registered yet.</p>';
      } else {
        listEl.innerHTML = creds
          .map((c) => {
            const created = c.created_at
              ? new Date(c.created_at).toLocaleDateString()
              : "";
            const lastUsed = c.last_used_at
              ? `Last used ${new Date(c.last_used_at).toLocaleDateString()}`
              : "Never used";
            const transports = c.transports || [];
            const typeLabel = transports.includes("internal")
              ? "📱 Device"
              : transports.some((t) => ["usb", "nfc", "ble", "smart-card"].includes(t))
              ? "🔑 Security key"
              : "🔑 Passkey";
            return `<div class="passkey-item" data-cred-id="${c.id}">
              <div class="passkey-info">
                <span class="passkey-name">${escHtml(c.name)}</span>
                <span class="passkey-meta">${typeLabel} · ${lastUsed} · Added ${escHtml(created)}</span>
              </div>
              <div class="passkey-actions">
                <button class="btn-text btn-sm btn-rename-passkey" data-id="${c.id}" data-name="${escHtml(c.name)}">Rename</button>
                <button class="btn-danger-text btn-sm btn-delete-passkey" data-id="${c.id}" data-name="${escHtml(c.name)}">Remove</button>
              </div>
            </div>`;
          })
          .join("");

        // Wire rename buttons.
        listEl.querySelectorAll(".btn-rename-passkey").forEach((btn) => {
          btn.addEventListener("click", async () => {
            const newName = prompt("New passkey name:", btn.dataset.name);
            if (!newName?.trim()) return;
            try {
              await apiFetch(`/api/webauthn/credentials/${btn.dataset.id}`, {
                method: "PATCH",
                body: JSON.stringify({ name: newName.trim() }),
              });
              await loadPasskeys();
            } catch (e) {
              showToast("Failed to rename passkey", "error");
            }
          });
        });

        // Wire delete buttons.
        listEl.querySelectorAll(".btn-delete-passkey").forEach((btn) => {
          btn.addEventListener("click", async () => {
            if (!confirm(`Remove passkey "${btn.dataset.name}"?`)) return;
            try {
              await apiFetch(`/api/webauthn/credentials/${btn.dataset.id}`, {
                method: "DELETE",
              });
              showToast("Passkey removed");
              await loadPasskeys();
            } catch (e) {
              showToast("Failed to remove passkey", "error");
            }
          });
        });
      }
    } catch (e) {
      listEl.innerHTML = '<p class="settings-desc">Could not load passkeys.</p>';
    }

    // Wire register button (only bind once).
    const registerBtn = document.getElementById("btn-register-passkey");
    if (registerBtn && !registerBtn.dataset.bound) {
      registerBtn.dataset.bound = "1";
      registerBtn.addEventListener("click", async () => {
        const nameInput = document.getElementById("passkey-name-input");
        const attachSel = document.getElementById("passkey-attachment-select");
        const name = (nameInput?.value || "").trim() || "Passkey";
        const attachment = attachSel?.value || "platform";
        const errEl = document.getElementById("passkeys-error");
        errEl?.classList.add("hidden");
        registerBtn.disabled = true;
        registerBtn.textContent = "Waiting…";

        const result = await PasskeyAuth.registerPasskey(name, attachment);

        registerBtn.disabled = false;
        registerBtn.textContent = "+ Add passkey";

        if (result.error) {
          if (errEl) {
            errEl.textContent = result.error;
            errEl.classList.remove("hidden");
          }
          return;
        }
        if (nameInput) nameInput.value = "";
        showToast(`Passkey "${escHtml(result.credential.name)}" registered`);
        await loadPasskeys();
      });
    }
  }

  async function loadAuditLog(offset = 0, reset = false) {
    try {
      const res = await apiFetch(
        `/api/auth/audit-log?limit=${_auditPageSize}&offset=${offset}`,
      );
      if (!res) return;
      const data = await res.json();
      _auditTotal = data.total || 0;
      _auditOffset = offset + (data.entries || []).length;

      const listEl = document.getElementById("audit-log-list");
      if (!listEl) return;

      if (reset) listEl.innerHTML = "";

      if (!data.entries || !data.entries.length) {
        if (reset)
          listEl.innerHTML =
            '<p style="color:#6b7280;font-size:12px;">No activity recorded yet.</p>';
        document.getElementById("btn-load-more-audit").style.display = "none";
        return;
      }

      // Action label map for friendly display
      const ACTION_LABELS = {
        "auth.login": "Signed in",
        "auth.login_failed": "Failed sign-in attempt",
        "auth.login_blocked": "Sign-in blocked (account locked)",
        "auth.account_locked": "Account locked",
        "auth.logout": "Signed out",
        "auth.mfa_verify": "MFA verified",
        "auth.mfa_backup_code_used": "MFA backup code used",
        "auth.mfa_enable": "MFA enabled",
        "auth.mfa_disable": "MFA disabled",
        "auth.mfa_backup_codes_regenerated": "Backup codes regenerated",
        "auth.change_password": "Password changed",
        "auth.recovery_setup": "Recovery code configured",
        "auth.recovery_success": "Account recovered",
        "auth.recovery_failed": "Failed recovery attempt",
        "vault.create": "Vault item created",
        "vault.update": "Vault item updated",
        "vault.delete": "Vault item deleted",
      };

      data.entries.forEach((e) => {
        const label = ACTION_LABELS[e.action] || e.action;
        const date = new Date(e.created_at).toLocaleString();
        const isAlert =
          e.action.includes("failed") ||
          e.action.includes("blocked") ||
          e.action.includes("locked");
        const row = document.createElement("div");
        row.style.cssText = `display:flex;justify-content:space-between;align-items:flex-start;padding:7px 0;border-bottom:1px solid #f3f4f6;gap:8px;`;
        row.innerHTML = `
          <span style="font-size:12px;${isAlert ? "color:#b91c1c;font-weight:600;" : "color:#111827;"}">${label}</span>
          <span style="font-size:11px;color:#9ca3af;white-space:nowrap;text-align:right;">${date}<br>${e.ip_address || ""}</span>`;
        listEl.appendChild(row);
      });

      const loadMoreBtn = document.getElementById("btn-load-more-audit");
      if (_auditOffset < _auditTotal) {
        loadMoreBtn.style.display = "inline-block";
        loadMoreBtn.onclick = () => loadAuditLog(_auditOffset, false);
      } else {
        loadMoreBtn.style.display = "none";
      }
    } catch (err) {
      console.error("loadAuditLog:", err);
    }
  }

  function renderMfaStatus(enabled, backupCodesRemaining) {
    const statusText = document.getElementById("mfa-status-text");
    const actions = document.getElementById("mfa-actions");
    document.getElementById("mfa-setup-area").classList.add("hidden");
    document.getElementById("mfa-disable-area").classList.add("hidden");

    if (enabled) {
      const remaining =
        backupCodesRemaining != null ? backupCodesRemaining : "?";
      statusText.innerHTML = `✅ Two-factor authentication is enabled. <span style="font-size:12px;color:#6b7280;">(${remaining} backup code${remaining !== 1 ? "s" : ""} remaining)</span>`;
      actions.innerHTML =
        '<button class="btn-secondary" id="btn-mfa-disable">Disable MFA</button>' +
        ' <button class="btn-secondary" id="btn-regen-backup-codes">Regenerate backup codes</button>';
      document
        .getElementById("btn-mfa-disable")
        ?.addEventListener("click", () => {
          document
            .getElementById("mfa-disable-area")
            .classList.remove("hidden");
          document.getElementById("mfa-actions").innerHTML = "";
          document.getElementById("mfa-disable-code").focus();
        });
      document
        .getElementById("btn-regen-backup-codes")
        ?.addEventListener("click", handleRegenerateBackupCodes);
    } else {
      statusText.textContent = "Two-factor authentication is not enabled.";
      actions.innerHTML =
        '<button class="btn-primary" id="btn-mfa-setup">Set up MFA</button>';
      document
        .getElementById("btn-mfa-setup")
        ?.addEventListener("click", handleMfaSetup);
    }
  }

  async function handleMfaSetup() {
    try {
      const res = await apiFetch("/api/auth/mfa/setup");
      if (!res) return;
      const data = await res.json();
      _pendingMfaSecret = data.secret;

      document.getElementById("mfa-qr-img").src = data.qr_code;
      document.getElementById("mfa-secret-display").textContent = data.secret;
      document.getElementById("mfa-setup-area").classList.remove("hidden");
      document.getElementById("mfa-actions").innerHTML = "";
      document.getElementById("mfa-status-text").textContent =
        "Scan the QR code below with your authenticator app.";
      document.getElementById("mfa-verify-code").value = "";
      document.getElementById("mfa-verify-code").focus();
    } catch (err) {
      showToast("Could not start MFA setup: " + err.message, "error");
    }
  }

  async function handleMfaConfirm() {
    const code = document.getElementById("mfa-verify-code").value.trim();
    if (!code || !_pendingMfaSecret) return;
    try {
      const res = await apiFetch("/api/auth/mfa/enable", {
        method: "POST",
        body: JSON.stringify({ secret: _pendingMfaSecret, totp_code: code }),
      });
      if (!res) return;
      const data = await res.json();
      if (!res.ok) {
        showToast(data.error || "Failed to enable MFA", "error");
        return;
      }
      _pendingMfaSecret = null;
      document.getElementById("mfa-setup-area").classList.add("hidden");

      // Display one-time backup codes immediately after enabling
      if (data.backup_codes && data.backup_codes.length) {
        showBackupCodesModal(data.backup_codes, true);
      } else {
        showToast("MFA enabled successfully");
        renderMfaStatus(true);
      }
    } catch (err) {
      showToast("Failed to enable MFA: " + err.message, "error");
    }
  }

  /**
   * Show backup codes in a modal. When `isFirstTime` is true the modal
   * emphasises that these will not be shown again.
   */
  function showBackupCodesModal(codes, isFirstTime = false) {
    const existing = document.getElementById("__pk_backup_modal__");
    if (existing) existing.remove();

    const codesHtml = codes
      .map(
        (c) =>
          `<code style="display:inline-block;background:#f3f4f6;border-radius:4px;padding:3px 8px;font-family:monospace;font-size:13px;letter-spacing:0.05em;">${c}</code>`,
      )
      .join(" ");

    const overlay = document.createElement("div");
    overlay.id = "__pk_backup_modal__";
    overlay.style.cssText =
      "position:fixed;inset:0;background:rgba(0,0,0,0.55);z-index:9999;display:flex;align-items:center;justify-content:center;";
    overlay.innerHTML = `
      <div style="background:#fff;border-radius:12px;padding:28px 24px;max-width:420px;width:90%;box-shadow:0 8px 32px rgba(0,0,0,0.22);font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;">
        <h3 style="margin:0 0 8px;font-size:16px;color:#111827;">
          ${isFirstTime ? "🔐 MFA enabled — save your backup codes" : "🔐 New backup codes"}
        </h3>
        ${
          isFirstTime
            ? `<p style="font-size:13px;color:#374151;margin-bottom:12px;">
          These codes let you sign in if you lose access to your authenticator app.
          <strong>Save them now — they will not be shown again.</strong>
        </p>`
            : `<p style="font-size:13px;color:#374151;margin-bottom:12px;">
          Your previous codes have been invalidated. Save these new codes securely.
        </p>`
        }
        <div style="background:#f9fafb;border:1px solid #e5e7eb;border-radius:8px;padding:12px;display:flex;flex-wrap:wrap;gap:6px;margin-bottom:16px;">
          ${codesHtml}
        </div>
        <div style="display:flex;gap:10px;justify-content:flex-end;">
          <button id="__pk_copy_codes__" style="padding:8px 16px;border:1px solid #d1d5db;border-radius:7px;background:#fff;cursor:pointer;font-size:13px;">Copy all</button>
          <button id="__pk_close_backup__" style="padding:8px 16px;border:none;border-radius:7px;background:#c0392b;color:#fff;cursor:pointer;font-size:13px;font-weight:600;">I've saved them</button>
        </div>
      </div>`;
    document.body.appendChild(overlay);

    document
      .getElementById("__pk_copy_codes__")
      .addEventListener("click", () => {
        navigator.clipboard
          .writeText(codes.join("\n"))
          .then(() => showToast("Backup codes copied"));
      });
    document
      .getElementById("__pk_close_backup__")
      .addEventListener("click", () => {
        overlay.remove();
        renderMfaStatus(true);
      });
  }

  async function handleRegenerateBackupCodes() {
    const code = prompt(
      "Enter your current authenticator code to regenerate backup codes:",
    );
    if (!code) return;
    try {
      const res = await apiFetch("/api/auth/mfa/backup-codes/regenerate", {
        method: "POST",
        body: JSON.stringify({ totp_code: code.trim() }),
      });
      if (!res) return;
      const data = await res.json();
      if (!res.ok) {
        showToast(data.error || "Failed to regenerate", "error");
        return;
      }
      showBackupCodesModal(data.backup_codes, false);
      console.log("[PassKeeper] MFA backup codes regenerated");
    } catch (err) {
      showToast("Failed to regenerate backup codes: " + err.message, "error");
    }
  }

  async function handleMfaDisableConfirm() {
    const code = document.getElementById("mfa-disable-code").value.trim();
    if (!code) return;
    try {
      const res = await apiFetch("/api/auth/mfa/disable", {
        method: "POST",
        body: JSON.stringify({ totp_code: code }),
      });
      if (!res) return;
      showToast("MFA disabled");
      renderMfaStatus(false);
    } catch (err) {
      showToast("Failed to disable MFA: " + err.message, "error");
    }
  }

  async function loadSharingKeysStatus() {
    try {
      const res = await apiFetch("/api/sharing/keys");
      if (!res) return;
      const data = await res.json();
      const statusEl = document.getElementById("sharing-keys-status");
      const actionsEl = document.getElementById("sharing-keys-actions");

      if (data.keys_setup) {
        statusEl.textContent =
          "✅ Sharing keys are set up. You can share items and use emergency access.";
        actionsEl.innerHTML =
          '<button class="btn-secondary" id="btn-regen-keys">Regenerate keys</button>';
        document
          .getElementById("btn-regen-keys")
          ?.addEventListener("click", handleGenerateKeys);
      } else {
        statusEl.textContent =
          "No sharing keys set up. Generate keys to enable item sharing and emergency access.";
        actionsEl.innerHTML =
          '<button class="btn-primary" id="btn-gen-keys">Generate sharing keys</button>';
        document
          .getElementById("btn-gen-keys")
          ?.addEventListener("click", handleGenerateKeys);
      }
    } catch (err) {
      console.error("loadSharingKeysStatus:", err);
    }
  }

  async function handleGenerateKeys() {
    const vaultKey = VaultSession.getKey();
    if (!vaultKey) {
      showToast("Vault is locked. Unlock first.", "error");
      return;
    }

    try {
      const keyPair = await SharingCrypto.generateKeyPair();
      const public_key = await SharingCrypto.exportPublicKey(keyPair.publicKey);
      const { private_key_enc, private_key_iv } =
        await SharingCrypto.encryptPrivateKey(vaultKey, keyPair.privateKey);

      const res = await apiFetch("/api/sharing/keys", {
        method: "POST",
        body: JSON.stringify({ public_key, private_key_enc, private_key_iv }),
      });
      if (!res) return;

      // Cache private key in session
      SharingSession.setKey(keyPair.privateKey);

      showToast("Sharing keys generated");
      await loadSharingKeysStatus();
    } catch (err) {
      showToast("Key generation failed: " + err.message, "error");
    }
  }

  // ── Change Password ───────────────────────────────────────────────────────

  async function handleChangePassword() {
    const cpError = document.getElementById("cp-error");
    cpError.classList.add("hidden");

    const currentPass = document.getElementById("cp-current").value;
    const newPass = document.getElementById("cp-new").value;
    const confirmPass = document.getElementById("cp-confirm").value;

    if (!currentPass || !newPass || !confirmPass) {
      cpError.textContent = "All fields are required.";
      cpError.classList.remove("hidden");
      return;
    }
    if (newPass !== confirmPass) {
      cpError.textContent = "New passwords do not match.";
      cpError.classList.remove("hidden");
      return;
    }
    if (newPass.length < 12) {
      cpError.textContent = "New password must be at least 12 characters.";
      cpError.classList.remove("hidden");
      return;
    }
    if (currentPass === newPass) {
      cpError.textContent =
        "New password must be different from the current password.";
      cpError.classList.remove("hidden");
      return;
    }

    const btn = document.getElementById("btn-change-password");
    const originalText = btn.textContent;
    btn.disabled = true;
    btn.textContent = "Re-encrypting vault…";

    try {
      const vaultKey = VaultSession.getKey();
      if (!vaultKey) {
        showToast("Vault is locked. Reload and unlock first.", "error");
        return;
      }

      // Fetch current user email from session storage
      const encKeySalt = sessionStorage.getItem("enc_key_salt");

      // We need the email to derive auth hashes — fetch it from the profile
      const profileRes = await apiFetch("/api/auth/me");
      if (!profileRes) return;
      const profile = await profileRes.json();
      const email = profile.email;

      // Derive both auth hashes
      const currentAuthHash = await Crypto.deriveAuthHash(currentPass, email);
      const newAuthHash = await Crypto.deriveAuthHash(newPass, email);
      const newEncKeySalt = Crypto.generateSalt(16);
      const newVaultKey = await Crypto.deriveVaultKey(newPass, newEncKeySalt);

      // Fetch all vault items and re-encrypt
      const itemsRes = await apiFetch("/api/vault");
      if (!itemsRes) return;
      const items = await itemsRes.json();

      btn.textContent = `Re-encrypting ${items.length} item(s)…`;

      const reEncrypted = [];
      for (const item of items) {
        const plain = await Crypto.decryptItem(
          vaultKey,
          item.enc_data,
          item.iv,
        );
        const { enc_data, iv } = await Crypto.encryptItem(newVaultKey, plain);
        // Re-encrypt the name if it was previously encrypted.
        let encNamePayload = {};
        if (item.enc_name && item.iv_name) {
          const plainName = await Crypto.decryptName(
            vaultKey,
            item.enc_name,
            item.iv_name,
          );
          if (plainName) {
            const { enc_name, iv_name } = await Crypto.encryptName(
              newVaultKey,
              plainName,
            );
            encNamePayload = { enc_name, iv_name };
          }
        }
        reEncrypted.push({ id: item.id, enc_data, iv, ...encNamePayload });
      }

      // Submit atomic password change
      const res = await apiFetch("/api/auth/change-password", {
        method: "POST",
        body: JSON.stringify({
          current_auth_hash: currentAuthHash,
          new_auth_hash: newAuthHash,
          new_enc_key_salt: newEncKeySalt,
          items: reEncrypted,
        }),
      });
      if (!res) return;
      const data = await res.json();
      if (!res.ok) {
        cpError.textContent = data.error || "Password change failed.";
        cpError.classList.remove("hidden");
        return;
      }

      showToast("Password changed. Please log in again.");
      setTimeout(() => redirectToLogin(), 1500);
    } catch (err) {
      cpError.textContent = "An error occurred: " + err.message;
      cpError.classList.remove("hidden");
      console.error(err);
    } finally {
      btn.disabled = false;
      btn.textContent = originalText;
    }
  }

  // ── Account Recovery Setup ────────────────────────────────────────────────

  async function loadRecoveryStatus() {
    try {
      const res = await apiFetch("/api/auth/recovery/status");
      if (!res) return;
      const data = await res.json();
      const statusEl = document.getElementById("recovery-status-text");
      const actionsEl = document.getElementById("recovery-actions");

      if (data.recovery_configured) {
        statusEl.textContent =
          "✅ A recovery code is configured for your account.";
        actionsEl.innerHTML =
          '<button class="btn-secondary" id="btn-regen-recovery">Generate new recovery code</button>';
      } else {
        statusEl.textContent =
          "No recovery code set up. If you forget your master password, your vault cannot be recovered.";
        actionsEl.innerHTML =
          '<button class="btn-primary" id="btn-gen-recovery">Generate recovery code</button>';
      }
      document
        .getElementById("btn-gen-recovery")
        ?.addEventListener("click", handleSetupRecovery);
      document
        .getElementById("btn-regen-recovery")
        ?.addEventListener("click", handleSetupRecovery);
    } catch (err) {
      console.error("loadRecoveryStatus:", err);
    }
  }

  async function handleSetupRecovery() {
    const vaultKey = VaultSession.getKey();
    if (!vaultKey) {
      showToast("Vault is locked. Unlock first.", "error");
      return;
    }

    try {
      const encKeySalt = sessionStorage.getItem("enc_key_salt");
      if (!encKeySalt) {
        showToast("Session error. Please reload.", "error");
        return;
      }

      // Generate a random 128-bit (16-byte) recovery code displayed as hex
      const rawBytes = window.crypto.getRandomValues(new Uint8Array(16));
      const recoveryCode = Array.from(rawBytes)
        .map((b) => b.toString(16).padStart(2, "0"))
        .join("");

      // Derive recovery key from the code
      const recoveryKeyMaterial = await window.crypto.subtle.importKey(
        "raw",
        new TextEncoder().encode(recoveryCode),
        "PBKDF2",
        false,
        ["deriveKey"],
      );
      const recoveryKey = await window.crypto.subtle.deriveKey(
        {
          name: "PBKDF2",
          salt: new TextEncoder().encode("passkeeper-recovery"),
          iterations: 200_000,
          hash: "SHA-256",
        },
        recoveryKeyMaterial,
        { name: "AES-GCM", length: 256 },
        false,
        ["encrypt"],
      );

      // Encrypt enc_key_salt with recovery key
      const iv = window.crypto.getRandomValues(new Uint8Array(12));
      const ciphertext = await window.crypto.subtle.encrypt(
        { name: "AES-GCM", iv },
        recoveryKey,
        new TextEncoder().encode(encKeySalt),
      );

      function bytesToBase64(bytes) {
        let bin = "";
        new Uint8Array(bytes).forEach((b) => (bin += String.fromCharCode(b)));
        return btoa(bin);
      }

      const recovery_enc_salt = bytesToBase64(ciphertext);
      const recovery_iv = bytesToBase64(iv);

      // Store on server
      const res = await apiFetch("/api/auth/recovery/setup", {
        method: "POST",
        body: JSON.stringify({ recovery_enc_salt, recovery_iv }),
      });
      if (!res) return;

      // Display the code to the user — formatted in groups of 4
      const formatted = recoveryCode.match(/.{1,4}/g).join("-");
      document.getElementById("recovery-code-value").textContent = formatted;
      document
        .getElementById("recovery-code-display")
        .classList.remove("hidden");
      document.getElementById("recovery-actions").innerHTML = "";
      document.getElementById("recovery-status-text").textContent =
        "Your new recovery code is shown below.";
    } catch (err) {
      showToast("Recovery code generation failed: " + err.message, "error");
      console.error(err);
    }
  }

  // ── Delete Account ────────────────────────────────────────────────────────

  async function handleDeleteAccount() {
    const deleteError = document.getElementById("delete-error");
    deleteError.classList.add("hidden");
    const password = document.getElementById("delete-password").value;
    if (!password) {
      deleteError.textContent = "Please enter your master password.";
      deleteError.classList.remove("hidden");
      return;
    }

    const btn = document.getElementById("btn-delete-confirm");
    const originalText = btn.textContent;
    btn.disabled = true;
    btn.textContent = "Deleting…";

    try {
      const profileRes = await apiFetch("/api/auth/me");
      if (!profileRes) return;
      const profile = await profileRes.json();
      const authHash = await Crypto.deriveAuthHash(password, profile.email);

      const res = await apiFetch("/api/auth/account", {
        method: "DELETE",
        body: JSON.stringify({ auth_hash: authHash }),
      });
      if (!res) return;
      const data = await res.json();
      if (!res.ok) {
        deleteError.textContent = data.error || "Deletion failed.";
        deleteError.classList.remove("hidden");
        return;
      }

      // Clear all local state and redirect
      sessionStorage.clear();
      localStorage.clear();
      window.location.href = "/login";
    } catch (err) {
      deleteError.textContent = "An error occurred: " + err.message;
      deleteError.classList.remove("hidden");
      console.error(err);
    } finally {
      btn.disabled = false;
      btn.textContent = originalText;
    }
  }

  // ── Folder CRUD ───────────────────────────────────────────────────────────

  function showNewFolderRow() {
    document.getElementById("new-folder-row").classList.remove("hidden");
    document.getElementById("new-folder-input").focus();
  }

  function hideNewFolderRow() {
    document.getElementById("new-folder-row").classList.add("hidden");
    document.getElementById("new-folder-input").value = "";
  }

  async function handleNewFolder(e) {
    e.preventDefault();
    const name = document.getElementById("new-folder-input").value.trim();
    if (!name) return;
    try {
      const res = await apiFetch("/api/folders", {
        method: "POST",
        body: JSON.stringify({ name }),
      });
      if (!res) return;
      hideNewFolderRow();
      await loadFolders();
      showToast("Folder created");
    } catch (err) {
      showToast("Could not create folder: " + err.message, "error");
    }
  }

  async function confirmDeleteFolder(folder) {
    if (
      !confirm(
        `Delete folder "${folder.name}"?\nItems will be moved to No Folder.`,
      )
    )
      return;
    try {
      const res = await apiFetch(`/api/folders/${folder.id}`, {
        method: "DELETE",
      });
      if (!res) return;
      _items = _items.map((i) =>
        i.folder_id === folder.id ? { ...i, folder_id: null } : i,
      );
      if (
        _activeFilter?.type === "folder" &&
        _activeFilter.value === folder.id
      ) {
        _activeFilter = null;
        updateVaultTitle("All Items");
      }
      await loadFolders();
      applyCurrentFilter();
      showToast("Folder deleted");
    } catch (err) {
      showToast("Could not delete folder: " + err.message, "error");
    }
  }

  // ── Filtering / Search ────────────────────────────────────────────────────

  function applyCurrentFilter() {
    if (!_activeFilter) {
      renderItemList(_items);
      return;
    }
    if (_activeFilter.type === "itemType")
      renderItemList(_items.filter((i) => i.item_type === _activeFilter.value));
    else if (_activeFilter.type === "folder")
      renderItemList(_items.filter((i) => i.folder_id === _activeFilter.value));
    else if (_activeFilter.type === "tag")
      renderItemList(
        _items.filter((i) =>
          (i.plain?.tags || []).includes(_activeFilter.value),
        ),
      );
  }

  function filterByFolder(folderId, name) {
    _activeFilter = { type: "folder", value: folderId };
    switchView("vault");
    document
      .querySelectorAll(".sidebar-item")
      .forEach((el) => el.classList.remove("active"));
    document
      .querySelector(`[data-folder-id="${folderId}"]`)
      ?.classList.add("active");
    updateVaultTitle(name);
    renderItemList(_items.filter((i) => i.folder_id === folderId));
  }

  function handleSearch(e) {
    const q = e.target.value.trim().toLowerCase();
    if (!q) {
      applyCurrentFilter();
      return;
    }
    const pool = !_activeFilter
      ? _items
      : _activeFilter.type === "itemType"
      ? _items.filter((i) => i.item_type === _activeFilter.value)
      : _activeFilter.type === "folder"
      ? _items.filter((i) => i.folder_id === _activeFilter.value)
      : _activeFilter.type === "tag"
      ? _items.filter((i) =>
          (i.plain?.tags || []).includes(_activeFilter.value),
        )
      : _items;
    renderItemList(
      pool.filter((item) => {
        const p = item.plain || {};
        return (
          item.name.toLowerCase().includes(q) ||
          (p.username || "").toLowerCase().includes(q) ||
          (p.url || "").toLowerCase().includes(q) ||
          (p.note_body || "").toLowerCase().includes(q) ||
          (p.rp_id || "").toLowerCase().includes(q) ||
          (p.notes || "").toLowerCase().includes(q) ||
          (p.cardholder_name || "").toLowerCase().includes(q) ||
          (p.email || "").toLowerCase().includes(q) ||
          (p.tags || []).some((t) => t.toLowerCase().includes(q))
        );
      }),
    );
  }

  function updateVaultTitle(text) {
    const el = document.getElementById("vault-title");
    if (el) el.textContent = text;
  }

  // ── Item Modal ────────────────────────────────────────────────────────────

  const TYPE_LABELS = {
    password: "🔑 Password",
    note: "📝 Secure Note",
    card: "💳 Payment Card",
    bank: "🏦 Bank Account",
    address: "🏠 Address",
    ssn: "🪪 Identity (SSN)",
    passkey: "🔐 Passkey",
  };

  function switchModalType(type) {
    document.querySelectorAll(".type-fields").forEach((el) => {
      el.classList.toggle(
        "hidden",
        !el.dataset.forTypes.split(" ").includes(type),
      );
    });
  }

  function openModal(mode, item = null) {
    const form = document.getElementById("item-form");
    form.reset();
    form.dataset.mode = mode;
    form.dataset.itemId = item ? item.id : "";

    // Always start Advanced Settings collapsed when the modal opens.
    const advBody = document.getElementById("adv-settings-body");
    const advToggle = document.getElementById("adv-settings-toggle");
    if (advBody) advBody.classList.add("hidden");
    if (advToggle) {
      advToggle.setAttribute("aria-expanded", "false");
      const chevron = advToggle.querySelector(".adv-section-chevron");
      if (chevron) chevron.textContent = "\u2964";
    }

    const folderSel = document.getElementById("field-folder");
    folderSel.innerHTML = '<option value="">— No folder —</option>';
    _folders.forEach((f) => {
      const opt = document.createElement("option");
      opt.value = f.id;
      opt.textContent = f.name;
      folderSel.appendChild(opt);
    });

    if (mode === "add") {
      document.getElementById("type-selector-group").classList.remove("hidden");
      document.getElementById("modal-title").textContent = "Add Item";
      switchModalType(
        document.getElementById("field-type").value || "password",
      );
    } else {
      document.getElementById("type-selector-group").classList.add("hidden");
      const t = item.item_type || "password";
      document.getElementById("modal-title").textContent =
        `Edit ${TYPE_LABELS[t] || "Item"}`;
      switchModalType(t);
      form.dataset.itemType = t;
      setVal("field-name", item.name);
      setVal("field-folder", item.folder_id || "");
      if (item.plain) {
        const p = item.plain;
        switch (t) {
          case "password":
            setVal("field-url", p.url);
            setVal("field-username", p.username);
            setVal("field-password", p.password);
            setVal("field-totp-uri", p.totp_uri || "");
            setVal("field-notes", p.notes);
            setVal("field-tags", (p.tags || []).join(", "));
            // Advanced Settings
            document.getElementById("field-autofill").checked =
              p.autofill !== false; // default true
            document.getElementById("field-autologin").checked =
              !!p.autologin;
            document.getElementById("field-reprompt").checked =
              !!p.reprompt;
            break;
          case "note":
            setVal("field-note-body", p.note_body);
            break;
          case "card":
            setVal("field-cardholder", p.cardholder_name);
            setVal("field-card-number", p.card_number);
            setVal("field-expiry-month", p.expiry_month);
            setVal("field-expiry-year", p.expiry_year);
            setVal("field-cvv", p.cvv);
            setVal("field-notes", p.notes);
            break;
          case "bank":
            setVal("field-bank-name", p.bank_name);
            setVal("field-account-type", p.account_type);
            setVal("field-routing", p.routing_number);
            setVal("field-account-number", p.account_number);
            setVal("field-notes", p.notes);
            break;
          case "address":
            [
              "first_name",
              "last_name",
              "company",
              "address_line",
              "city",
              "state",
              "zip",
              "country",
              "phone",
              "email",
            ].forEach((k) => setVal("field-" + k.replace(/_/g, "-"), p[k]));
            setVal("field-notes", p.notes);
            break;
          case "ssn":
            setVal("field-ssn-number", p.ssn_number);
            setVal("field-notes", p.notes);
            break;
          case "passkey":
            setVal("field-pk-rp-id", p.rp_id);
            setVal("field-pk-username", p.username);
            setVal("field-pk-credential-id", p.credential_id);
            setVal("field-pk-user-handle", p.user_handle);
            setVal("field-pk-device-hint", p.device_hint);
            setVal("field-pk-notes", p.notes);
            setVal("field-tags", (p.tags || []).join(", "));
            break;
        }
      }
    }
    document.getElementById("item-modal").classList.add("open");
    document.getElementById("field-name").focus();

    // Render password history panel for password items in edit mode.
    const historyPanel = document.getElementById("password-history-panel");
    if (historyPanel) {
      if (mode === "edit" && item?.item_type === "password") {
        const history = item.plain?.password_history || [];
        if (history.length) {
          historyPanel.classList.remove("hidden");

          // Store plaintext passwords in a WeakMap keyed by button element so
          // they never appear in the DOM (no data-pw attributes to scrape).
          const _historyPasswords = new WeakMap();

          historyPanel.innerHTML =
            `<div class="pw-history-title">🕐 Previous passwords (${history.length})</div>` +
            history.map((h, idx) => {
              const date = h.changed_at
                ? new Date(h.changed_at).toLocaleDateString()
                : "Unknown date";
              return `<div class="pw-history-row" data-hist-idx="${idx}">
                <span class="pw-history-masked">••••••••</span>
                <span class="pw-history-date">${escHtml(date)}</span>
                <button class="btn-text btn-sm pw-history-reveal" title="Reveal">👁</button>
                <button class="btn-text btn-sm pw-history-restore" title="Restore this password">↩ Restore</button>
              </div>`;
            }).join("");

          // Register passwords in the WeakMap after DOM elements exist.
          historyPanel.querySelectorAll(".pw-history-row").forEach((row) => {
            const idx = parseInt(row.dataset.histIdx);
            const pw = history[idx]?.password || "";
            const revealBtn = row.querySelector(".pw-history-reveal");
            const restoreBtn = row.querySelector(".pw-history-restore");
            _historyPasswords.set(revealBtn, pw);
            _historyPasswords.set(restoreBtn, pw);

            revealBtn.addEventListener("click", () => {
              const masked = row.querySelector(".pw-history-masked");
              if (masked.textContent === "••••••••") {
                masked.textContent = _historyPasswords.get(revealBtn);
                revealBtn.textContent = "🙈";
              } else {
                masked.textContent = "••••••••";
                revealBtn.textContent = "👁";
              }
            });

            restoreBtn.addEventListener("click", () => {
              const pwField = document.getElementById("field-password");
              if (pwField) {
                pwField.value = _historyPasswords.get(restoreBtn);
                pwField.dispatchEvent(new Event("input"));
                showToast("Password restored — click Save to apply");
              }
            });
          });
        } else {
          historyPanel.classList.add("hidden");
          historyPanel.innerHTML = "";
        }
      } else {
        historyPanel.classList.add("hidden");
        historyPanel.innerHTML = "";
      }
    }
    if (
      (mode === "add" &&
        (document.getElementById("field-type").value || "password") ===
          "password") ||
      (mode === "edit" && (item?.item_type || "password") === "password")
    ) {
      initPasswordFieldEnhancements();
    }
  }

  function setVal(id, val) {
    const el = document.getElementById(id);
    if (el) el.value = val || "";
  }
  function getVal(id) {
    const el = document.getElementById(id);
    return el ? el.value : "";
  }

  function closeModal(id = "item-modal") {
    document.getElementById(id)?.classList.remove("open");
  }

  function buildPlainData(t) {
    switch (t) {
      case "password":
        return {
          url: getVal("field-url").trim(),
          username: getVal("field-username").trim(),
          password: getVal("field-password"),
          totp_uri: getVal("field-totp-uri").trim(),
          notes: getVal("field-notes").trim(),
          tags: _parseTags(getVal("field-tags")),
          autofill: document.getElementById("field-autofill")?.checked ?? true,
          autologin: !!document.getElementById("field-autologin")?.checked,
          reprompt: !!document.getElementById("field-reprompt")?.checked,
        };
      case "note":
        return { note_body: getVal("field-note-body") };
      case "card":
        return {
          cardholder_name: getVal("field-cardholder").trim(),
          card_number: getVal("field-card-number").trim(),
          expiry_month: getVal("field-expiry-month"),
          expiry_year: getVal("field-expiry-year").trim(),
          cvv: getVal("field-cvv").trim(),
          notes: getVal("field-notes").trim(),
        };
      case "bank":
        return {
          bank_name: getVal("field-bank-name").trim(),
          account_type: getVal("field-account-type"),
          routing_number: getVal("field-routing").trim(),
          account_number: getVal("field-account-number").trim(),
          notes: getVal("field-notes").trim(),
        };
      case "address":
        return {
          first_name: getVal("field-first-name").trim(),
          last_name: getVal("field-last-name").trim(),
          company: getVal("field-company").trim(),
          address_line: getVal("field-address-line").trim(),
          city: getVal("field-city").trim(),
          state: getVal("field-state").trim(),
          zip: getVal("field-zip").trim(),
          country: getVal("field-country").trim(),
          phone: getVal("field-phone").trim(),
          email: getVal("field-email").trim(),
          notes: getVal("field-notes").trim(),
        };
      case "ssn":
        return {
          ssn_number: getVal("field-ssn-number"),
          notes: getVal("field-notes").trim(),
        };
      case "passkey":
        return {
          rp_id: getVal("field-pk-rp-id").trim(),
          username: getVal("field-pk-username").trim(),
          credential_id: getVal("field-pk-credential-id").trim(),
          user_handle: getVal("field-pk-user-handle").trim(),
          device_hint: getVal("field-pk-device-hint").trim(),
          notes: getVal("field-pk-notes").trim(),
          tags: _parseTags(getVal("field-tags")),
        };
      default:
        return {};
    }
  }

  async function handleFormSubmit(e) {
    e.preventDefault();
    try {
      const vaultKey = VaultSession.getKey();
      if (!vaultKey) {
        closeModal();
        showUnlockOverlay();
        return;
      }
      const form = e.target;
      const mode = form.dataset.mode;
      const itemId = form.dataset.itemId;
      const name = getVal("field-name").trim();
      if (!name) {
        showToast("Name is required", "error");
        return;
      }

      const itemType =
        mode === "add"
          ? getVal("field-type")
          : form.dataset.itemType || "password";

      const plainData = buildPlainData(itemType);

      // Track when the password was last changed — stored inside the encrypted
      // blob so the server never sees it. Used by the security dashboard to
      // accurately flag old passwords vs. old items that had their password changed.
      if (itemType === "password") {
        if (mode === "add") {
          // New item — set password_changed_at to now.
          plainData.password_changed_at = new Date().toISOString();
          plainData.password_history = [];
        } else {
          // Edit — only update if the password field actually changed.
          const existingItem = _items.find((i) => i.id === parseInt(itemId));
          const existingPassword = existingItem?.plain?.password ?? null;
          const existingChangedAt = existingItem?.plain?.password_changed_at ?? null;
          const existingHistory = existingItem?.plain?.password_history ?? [];

          if (plainData.password !== existingPassword) {
            // Password changed — push the old password onto history (max 5 entries).
            const historyEntry = {
              password: existingPassword,
              changed_at: existingChangedAt || existingItem?.created_at || new Date().toISOString(),
            };
            const newHistory = [historyEntry, ...existingHistory].slice(0, 5);
            plainData.password_changed_at = new Date().toISOString();
            plainData.password_history = newHistory;
          } else {
            // Password unchanged — preserve existing tracking data.
            if (existingChangedAt) plainData.password_changed_at = existingChangedAt;
            plainData.password_history = existingHistory;
          }
        }
      }

      const { enc_data, iv } = await Crypto.encryptItem(vaultKey, plainData);
      // Encrypt the item name client-side so it is never stored in plaintext.
      const { enc_name, iv_name } = await Crypto.encryptName(vaultKey, name);
      const folderVal = getVal("field-folder");
      const payload = {
        name: itemType, // non-sensitive server-side label — real name is in enc_name
        item_type: itemType,
        folder_id: folderVal ? parseInt(folderVal) : null,
        enc_data,
        iv,
        enc_name,
        iv_name,
      };

      if (mode === "add") {
        const res = await apiFetch("/api/vault", {
          method: "POST",
          body: JSON.stringify(payload),
        });
        if (!res) return;
        showToast("Item added");
      } else {
        const res = await apiFetch(`/api/vault/${itemId}`, {
          method: "PUT",
          body: JSON.stringify(payload),
        });
        if (!res) return;
        showToast("Item updated");
      }
      closeModal();
      await loadVault();
    } catch (err) {
      showToast("Save failed: " + err.message, "error");
    }
  }

  async function confirmDeleteItem(item) {
    if (!confirm(`Delete "${item.name}"? This cannot be undone.`)) return;
    try {
      const res = await apiFetch(`/api/vault/${item.id}`, { method: "DELETE" });
      if (!res) return;
      showToast("Item deleted");
      await loadVault();
    } catch (err) {
      showToast("Delete failed: " + err.message, "error");
    }
  }

  /**
   * Toggle the "favorite" tag on a vault item.
   * Re-encrypts and PUTs the item in-place, then patches _items and
   * re-renders so the star flips instantly without a full vault reload.
   */
  async function toggleFavorite(item) {
    const vaultKey = VaultSession.getKey();
    if (!vaultKey) {
      showUnlockOverlay();
      return;
    }
    if (!item.plain) {
      showToast("Item could not be decrypted", "error");
      return;
    }

    const currentTags = item.plain.tags || [];
    const isFavorite = currentTags.includes("favorite");
    const newTags = isFavorite
      ? currentTags.filter((t) => t !== "favorite")
      : [...currentTags, "favorite"].sort();

    const updatedPlain = { ...item.plain, tags: newTags };

    try {
      const { enc_data, iv } = await Crypto.encryptItem(vaultKey, updatedPlain);
      const { enc_name, iv_name } = await Crypto.encryptName(vaultKey, item.name);

      const payload = {
        name: item.item_type,
        item_type: item.item_type,
        folder_id: item.folder_id || null,
        enc_data,
        iv,
        enc_name,
        iv_name,
      };

      const res = await apiFetch(`/api/vault/${item.id}`, {
        method: "PUT",
        body: JSON.stringify(payload),
      });
      if (!res) return;

      // Patch the in-memory item so the re-render is instant.
      const idx = _items.findIndex((i) => i.id === item.id);
      if (idx !== -1) {
        _items[idx] = { ..._items[idx], plain: updatedPlain };
      }

      showToast(isFavorite ? "Removed from favorites" : "Added to favorites ★");

      // Refresh the sidebar tag list ("favorite" tag may appear/disappear).
      renderTagList();
      // Re-render the current view preserving the active filter.
      applyCurrentFilter();
    } catch (err) {
      showToast("Could not update favorite: " + err.message, "error");
    }
  }

  // ── Logout ────────────────────────────────────────────────────────────────

  async function handleLogout() {
    const refreshToken = localStorage.getItem("refresh_token");
    await fetch("/api/auth/logout", {
      method: "POST",
      headers: {
        Authorization: `Bearer ${sessionStorage.getItem("access_token") || ""}`,
        "Content-Type": "application/json",
        "X-CSRFToken": csrfToken(),
      },
      body: JSON.stringify({ refresh_token: refreshToken }),
    }).catch(() => {});
    VaultSession.clear();
    SharingSession.clear();
    sessionStorage.removeItem("access_token");
    localStorage.removeItem("refresh_token");
    window.dispatchEvent(new CustomEvent("passkeeper:logout"));
    window.location.href = "/login";
  }

  // ── Utilities ─────────────────────────────────────────────────────────────

  // ── TOTP (RFC 6238) ── pure Web Crypto, no external library ──────────────

  /**
   * Extract the base32 secret from either a plain base32 string or an
   * otpauth://totp/... URI (both are common when users scan a QR code).
   */
  function extractTotpSecret(uri) {
    if (!uri) return null;
    uri = uri.trim();
    if (uri.startsWith("otpauth://")) {
      try {
        const secret = new URL(uri).searchParams.get("secret");
        return secret ? secret.toUpperCase().replace(/\s+/g, "") : null;
      } catch (e) {
        return null;
      }
    }
    // Plain base32 secret (spaces and hyphens stripped for convenience).
    return uri.toUpperCase().replace(/[\s-]/g, "") || null;
  }

  /** Decode a base32 string to a Uint8Array. */
  function base32ToBytes(b32) {
    const CHARS = "ABCDEFGHIJKLMNOPQRSTUVWXYZ234567";
    b32 = b32.replace(/=+$/, "");
    let bits = 0,
      val = 0;
    const out = [];
    for (const c of b32) {
      const idx = CHARS.indexOf(c);
      if (idx === -1) continue;
      val = (val << 5) | idx;
      bits += 5;
      if (bits >= 8) {
        bits -= 8;
        out.push((val >> bits) & 0xff);
      }
    }
    return new Uint8Array(out);
  }

  /**
   * Compute the current TOTP code (6 digits, 30-second window).
   * Returns a Promise<string>.
   */
  async function getTotpCode(secret) {
    const keyBytes = base32ToBytes(secret);
    if (!keyBytes.length) return null;

    const counter = Math.floor(Date.now() / 1000 / 30);
    const msg = new Uint8Array(8);
    // Write counter as big-endian 64-bit integer.
    let c = counter;
    for (let i = 7; i >= 0; i--) {
      msg[i] = c & 0xff;
      c = Math.floor(c / 256);
    }

    const cryptoKey = await crypto.subtle.importKey(
      "raw",
      keyBytes,
      { name: "HMAC", hash: "SHA-1" },
      false,
      ["sign"],
    );
    const sig = new Uint8Array(
      await crypto.subtle.sign("HMAC", cryptoKey, msg),
    );
    const offset = sig[19] & 0x0f;
    const code =
      (((sig[offset] & 0x7f) << 24) |
        (sig[offset + 1] << 16) |
        (sig[offset + 2] << 8) |
        sig[offset + 3]) %
      1_000_000;
    return String(code).padStart(6, "0");
  }

  /** Seconds remaining in the current 30-second TOTP window. */
  function totpSecondsLeft() {
    return 30 - (Math.floor(Date.now() / 1000) % 30);
  }

  // Track the clipboard clear timer so multiple rapid copies don't stack.
  let _clipboardClearTimer = null;

  function copyToClipboard(text, msg) {
    navigator.clipboard
      .writeText(text)
      .then(() => {
        showToast(msg);
        // Auto-clear clipboard after 30 seconds — industry-standard hygiene.
        if (_clipboardClearTimer) clearTimeout(_clipboardClearTimer);
        _clipboardClearTimer = setTimeout(() => {
          navigator.clipboard.writeText("").catch(() => {});
          _clipboardClearTimer = null;
        }, 30_000);
      })
      .catch(() => {});
  }

  function escHtml(str) {
    return String(str)
      .replace(/&/g, "&amp;")
      .replace(/</g, "&lt;")
      .replace(/>/g, "&gt;")
      .replace(/"/g, "&quot;");
  }

  function itemIcon(type) {
    return (
      {
        password: "🔑",
        note: "📝",
        card: "💳",
        bank: "🏦",
        address: "🏠",
        ssn: "🪪",
        passkey: "🔐",
      }[type] || "🔑"
    );
  }

  function showToast(message, type = "success") {
    const toast = document.getElementById("toast");
    if (!toast) return;
    toast.textContent = message;
    toast.className = `toast toast-${type} show`;
    clearTimeout(toast._timer);
    toast._timer = setTimeout(() => toast.classList.remove("show"), 2500);
  }

  function showLoadingState(loading) {
    document
      .getElementById("vault-spinner")
      ?.classList.toggle("hidden", !loading);
  }

  // ── Unlock overlay ────────────────────────────────────────────────────────

  function showUnlockOverlay() {
    document.getElementById("unlock-overlay").classList.add("open");
    document.getElementById("unlock-password").focus();
  }

  async function handleUnlock(e) {
    e.preventDefault();
    const password = document.getElementById("unlock-password").value;
    const enc_key_salt = sessionStorage.getItem("enc_key_salt");
    const btn = e.target.querySelector('[type="submit"]');
    const errEl = document.getElementById("unlock-error");
    if (!enc_key_salt) {
      redirectToLogin();
      return;
    }

    btn.disabled = true;
    btn.textContent = "Unlocking…";
    errEl.classList.add("hidden");
    try {
      const vaultKey = await Crypto.deriveVaultKey(password, enc_key_salt);
      VaultSession.setKey(vaultKey);
      document.getElementById("unlock-overlay").classList.remove("open");
      await loadFolders();
      await loadVault();
    } catch {
      errEl.classList.remove("hidden");
    } finally {
      btn.disabled = false;
      btn.textContent = "Unlock";
      document.getElementById("unlock-password").value = "";
    }
  }

  // ── Tabs ──────────────────────────────────────────────────────────────────

  function initTabs(container) {
    const tabs = container.querySelectorAll(".tab-btn");
    tabs.forEach((btn) => {
      btn.addEventListener("click", () => {
        tabs.forEach((t) => t.classList.remove("active"));
        btn.classList.add("active");
        const target = btn.dataset.tab;
        container.querySelectorAll(".tab-pane").forEach((pane) => {
          pane.classList.toggle("hidden", !pane.id.endsWith(target));
        });
      });
    });
  }

  // ── Init ──────────────────────────────────────────────────────────────────

  async function init() {
    if (!sessionStorage.getItem("access_token")) {
      // Give the extension bridge up to 800 ms to inject a session before redirecting
      await new Promise((resolve) => {
        const timer = setTimeout(resolve, 800);
        window.addEventListener(
          "passkeeper:ext-login",
          () => {
            clearTimeout(timer);
            resolve();
          },
          { once: true },
        );
      });

      // Still no token — try a silent refresh using the persisted refresh_token
      // before giving up and redirecting. This handles hard-refresh / new-tab scenarios.
      if (!sessionStorage.getItem("access_token")) {
        const refreshed = await tryRefreshToken();
        if (!refreshed) {
          window.location.href = "/login";
          return;
        }
      }
    }

    // Vault
    document
      .getElementById("unlock-form")
      ?.addEventListener("submit", handleUnlock);
    document
      .getElementById("btn-new-folder")
      ?.addEventListener("click", showNewFolderRow);
    document
      .getElementById("btn-cancel-folder")
      ?.addEventListener("click", hideNewFolderRow);
    document
      .getElementById("new-folder-form")
      ?.addEventListener("submit", handleNewFolder);
    document
      .getElementById("search-input")
      ?.addEventListener("input", handleSearch);
    document
      .getElementById("btn-add-item")
      ?.addEventListener("click", () => openModal("add"));
    document
      .getElementById("btn-close-modal")
      ?.addEventListener("click", () => closeModal());
    document
      .getElementById("btn-cancel-modal")
      ?.addEventListener("click", () => closeModal());
    document
      .getElementById("item-form")
      ?.addEventListener("submit", handleFormSubmit);
    document
      .getElementById("btn-logout")
      ?.addEventListener("click", handleLogout);

    document.getElementById("sort-select")?.addEventListener("change", (e) => {
      _sortOrder = e.target.value;
      applyCurrentFilter();
    });
    document.getElementById("field-type")?.addEventListener("change", (e) => {
      switchModalType(e.target.value);
      if (e.target.value === "password") initPasswordFieldEnhancements();
    });
    document
      .getElementById("btn-toggle-pass")
      ?.addEventListener("click", () => {
        const el = document.getElementById("field-password");
        el.type = el.type === "password" ? "text" : "password";
      });
    document.getElementById("btn-toggle-ssn")?.addEventListener("click", () => {
      const el = document.getElementById("field-ssn-number");
      el.type = el.type === "password" ? "text" : "password";
    });

    // Live tag preview in the item modal.
    document.getElementById("field-tags")?.addEventListener("input", (e) => {
      const preview = document.getElementById("field-tags-preview");
      if (!preview) return;
      const tags = _parseTags(e.target.value);
      preview.innerHTML = tags
        .map((t) => `<span class="item-tag">${escHtml(t)}</span>`)
        .join("");
    });

    // Advanced Settings collapsible toggle
    document
      .getElementById("adv-settings-toggle")
      ?.addEventListener("click", () => {
        const body = document.getElementById("adv-settings-body");
        const btn = document.getElementById("adv-settings-toggle");
        const chevron = btn.querySelector(".adv-section-chevron");
        const isOpen = !body.classList.contains("hidden");
        body.classList.toggle("hidden", isOpen);
        btn.setAttribute("aria-expanded", String(!isOpen));
        chevron.textContent = isOpen ? "\u2964" : "\u2963";
      });

    // Sidebar navigation
    document.getElementById("sidebar-all")?.addEventListener("click", () => {
      _activeFilter = null;
      switchView("vault");
      document
        .querySelectorAll(".sidebar-item")
        .forEach((el) => el.classList.remove("active"));
      document.getElementById("sidebar-all").classList.add("active");
      updateVaultTitle("All Items");
      renderItemList(_items);
    });
    document.getElementById("sidebar-favorites")?.addEventListener("click", () => {
      _activeFilter = { type: "tag", value: "favorite" };
      switchView("vault");
      document
        .querySelectorAll(".sidebar-item")
        .forEach((el) => el.classList.remove("active"));
      document.getElementById("sidebar-favorites").classList.add("active");
      updateVaultTitle("⭐ Favorites");
      renderItemList(_items.filter((i) => (i.plain?.tags || []).includes("favorite")));
    });
    document
      .getElementById("sidebar-security")
      ?.addEventListener("click", () => switchView("security"));
    document
      .getElementById("sidebar-sharing")
      ?.addEventListener("click", () => switchView("sharing"));
    document
      .getElementById("sidebar-emergency")
      ?.addEventListener("click", () => switchView("emergency"));
    document
      .getElementById("sidebar-import-export")
      ?.addEventListener("click", () => switchView("import-export"));
    document
      .getElementById("sidebar-generator")
      ?.addEventListener("click", () => openPasswordGeneratorModal());

    document.querySelectorAll("[data-type-filter]").forEach((el) => {
      el.addEventListener("click", () => {
        const type = el.dataset.typeFilter;
        const labels = {
          password: "Passwords",
          note: "Secure Notes",
          card: "Payment Cards",
          bank: "Bank Accounts",
          address: "Addresses",
          ssn: "Identities",
          passkey: "Passkeys",
        };
        _activeFilter = { type: "itemType", value: type };
        switchView("vault");
        document
          .querySelectorAll(".sidebar-item")
          .forEach((s) => s.classList.remove("active"));
        el.classList.add("active");
        updateVaultTitle(labels[type] || type);
        renderItemList(_items.filter((i) => i.item_type === type));
      });
    });

    document.getElementById("item-modal")?.addEventListener("click", (e) => {
      /* backdrop click intentionally disabled — modal closes only via Cancel or Save */
    });
    document.addEventListener("keydown", (e) => {
      if (e.key === "Escape") {
        closeModal("share-modal");
        closeModal("emergency-modal");
        closeModal("settings-modal");
        closeModal("detail-modal");
        closeModal("gen-modal");
      }
    });

    // Detail modal (shared item view)
    const closeDetailModal = () => closeModal("detail-modal");
    document
      .getElementById("btn-close-detail-modal")
      ?.addEventListener("click", closeDetailModal);
    document
      .getElementById("btn-detail-done")
      ?.addEventListener("click", closeDetailModal);
    document.getElementById("detail-modal")?.addEventListener("click", (e) => {
      if (e.target.id === "detail-modal") closeDetailModal();
    });

    document
      .getElementById("field-card-number")
      ?.addEventListener("input", (e) => {
        let v = e.target.value.replace(/\D/g, "").slice(0, 16);
        e.target.value = v.replace(/(.{4})/g, "$1 ").trim();
      });

    // Settings modal
    document
      .getElementById("btn-settings")
      ?.addEventListener("click", openSettingsModal);
    document
      .getElementById("btn-close-settings")
      ?.addEventListener("click", () => closeModal("settings-modal"));

    // Web-app session timeout setting.
    document
      .getElementById("web-idle-select")
      ?.addEventListener("change", (e) => {
        const mins = parseInt(e.target.value, 10);
        localStorage.setItem(WEB_IDLE_KEY, mins);
        _resetWebIdleTimer();
        const label = mins === 0 ? "never" : mins + " min";
        showToast("Auto-lock set to " + label + ".");
        console.log("[PassKeeper] Web idle timeout set to", label);
      });
    document
      .getElementById("settings-modal")
      ?.addEventListener("click", (e) => {
        if (e.target.id === "settings-modal") closeModal("settings-modal");
      });
    document
      .getElementById("btn-mfa-confirm")
      ?.addEventListener("click", handleMfaConfirm);
    document
      .getElementById("btn-mfa-cancel-setup")
      ?.addEventListener("click", () => {
        document.getElementById("mfa-setup-area").classList.add("hidden");
        loadMfaStatus();
      });
    document
      .getElementById("btn-mfa-disable-confirm")
      ?.addEventListener("click", handleMfaDisableConfirm);
    document
      .getElementById("btn-mfa-disable-cancel")
      ?.addEventListener("click", () => {
        document.getElementById("mfa-disable-area").classList.add("hidden");
        loadMfaStatus();
      });
    document
      .getElementById("btn-change-password")
      ?.addEventListener("click", handleChangePassword);
    document
      .getElementById("btn-delete-account")
      ?.addEventListener("click", () => {
        document.getElementById("btn-delete-account").classList.add("hidden");
        document
          .getElementById("delete-confirm-area")
          .classList.remove("hidden");
        document.getElementById("delete-password").focus();
      });
    document
      .getElementById("btn-delete-cancel")
      ?.addEventListener("click", () => {
        document.getElementById("delete-confirm-area").classList.add("hidden");
        document
          .getElementById("btn-delete-account")
          .classList.remove("hidden");
        document.getElementById("delete-password").value = "";
        document.getElementById("delete-error").classList.add("hidden");
      });
    document
      .getElementById("btn-delete-confirm")
      ?.addEventListener("click", handleDeleteAccount);
    document
      .getElementById("btn-copy-recovery-code")
      ?.addEventListener("click", () => {
        const code = document.getElementById("recovery-code-value").textContent;
        navigator.clipboard
          .writeText(code)
          .then(() => showToast("Recovery code copied"));
      });
    document
      .getElementById("btn-recovery-done")
      ?.addEventListener("click", () => {
        document
          .getElementById("recovery-code-display")
          .classList.add("hidden");
        loadRecoveryStatus();
      });

    // Share modal
    document
      .getElementById("btn-share-item")
      ?.addEventListener("click", openShareModal);
    document
      .getElementById("btn-close-share-modal")
      ?.addEventListener("click", () => closeModal("share-modal"));
    document
      .getElementById("btn-cancel-share")
      ?.addEventListener("click", () => closeModal("share-modal"));
    document.getElementById("share-modal")?.addEventListener("click", (e) => {
      if (e.target.id === "share-modal") closeModal("share-modal");
    });
    document
      .getElementById("share-form")
      ?.addEventListener("submit", handleShareFormSubmit);
    document
      .getElementById("btn-setup-keys-from-sharing")
      ?.addEventListener("click", () => {
        closeModal("share-modal");
        openSettingsModal();
      });

    // Emergency modal
    document
      .getElementById("btn-add-emergency")
      ?.addEventListener("click", () => {
        document.getElementById("emergency-error").classList.add("hidden");
        document.getElementById("emergency-modal").classList.add("open");
      });
    document
      .getElementById("btn-close-emergency-modal")
      ?.addEventListener("click", () => closeModal("emergency-modal"));
    document
      .getElementById("btn-cancel-emergency")
      ?.addEventListener("click", () => closeModal("emergency-modal"));
    document
      .getElementById("emergency-modal")
      ?.addEventListener("click", (e) => {
        if (e.target.id === "emergency-modal") closeModal("emergency-modal");
      });
    document
      .getElementById("emergency-form")
      ?.addEventListener("submit", handleEmergencyFormSubmit);

    // Tabs
    document.querySelectorAll(".panel-tabs").forEach((c) => initTabs(c));

    // Sidebar collapse toggle — desktop only (mobile uses hamburger instead)
    const sidebar = document.getElementById("sidebar");
    const toggleBtn = document.getElementById("btn-sidebar-toggle");
    if (
      sidebar &&
      toggleBtn &&
      document.body.classList.contains("is-desktop")
    ) {
      const STORAGE_KEY = "sidebar_collapsed";
      if (localStorage.getItem(STORAGE_KEY) === "1") {
        sidebar.classList.add("collapsed");
        toggleBtn.setAttribute("aria-label", "Expand sidebar");
        toggleBtn.setAttribute("title", "Expand sidebar");
      }
      toggleBtn.addEventListener("click", () => {
        const isCollapsed = sidebar.classList.toggle("collapsed");
        localStorage.setItem(STORAGE_KEY, isCollapsed ? "1" : "0");
        toggleBtn.setAttribute(
          "aria-label",
          isCollapsed ? "Expand sidebar" : "Collapse sidebar",
        );
        toggleBtn.setAttribute(
          "title",
          isCollapsed ? "Expand sidebar" : "Collapse sidebar",
        );
      });
    }

    // Mobile sidebar: hamburger opens overlay, backdrop/item-click closes it
    const backdrop = document.getElementById("sidebar-backdrop");
    const mobileMenuBtn = document.getElementById("btn-mobile-menu");

    function openMobileSidebar() {
      sidebar?.classList.add("mobile-open");
      backdrop?.classList.add("open");
      document.documentElement.classList.add("sidebar-open");
    }
    function closeMobileSidebar() {
      sidebar?.classList.remove("mobile-open");
      backdrop?.classList.remove("open");
      document.documentElement.classList.remove("sidebar-open");
    }

    mobileMenuBtn?.addEventListener("click", openMobileSidebar);
    backdrop?.addEventListener("click", closeMobileSidebar);
    backdrop?.addEventListener("touchstart", closeMobileSidebar, {
      passive: true,
    });

    // Close mobile sidebar when a nav item is tapped (mobile only)
    document.querySelectorAll(".sidebar-item").forEach((item) => {
      item.addEventListener("click", () => {
        if (document.body.classList.contains("is-mobile")) closeMobileSidebar();
      });
    });

    // Escape key closes the sidebar
    document.addEventListener("keydown", (e) => {
      if (e.key === "Escape" && sidebar?.classList.contains("mobile-open"))
        closeMobileSidebar();
    });

    // Mobile FAB mirrors the desktop add-item button
    document
      .getElementById("btn-add-item-mobile")
      ?.addEventListener("click", () => {
        document.getElementById("btn-add-item")?.click();
      });

    // ── Browser history / back-button support ─────────────────────────────────
    const _hashToView = (hash) => {
      const v = (hash || "").replace("#", "").trim();
      const valid = [
        "vault",
        "security",
        "sharing",
        "emergency",
        "import-export",
      ];
      return valid.includes(v) ? v : "vault";
    };
    const _initialView = _hashToView(window.location.hash);
    history.replaceState({ view: _initialView }, "", window.location.href);
    window.addEventListener("popstate", (e) => {
      const view = e.state?.view || _hashToView(window.location.hash);
      switchView(view, { pushState: false });
    });

    // Start web-app inactivity tracking.
    _startWebIdleTracking();
    _initBulkToolbar();

    if (!VaultSession.getKey()) {
      showUnlockOverlay();
    } else {
      loadVault();
      // Restore view from hash after vault loads (avoids rendering before decrypt).
      if (_initialView !== "vault")
        switchView(_initialView, { pushState: false });
    }
  }

  async function handleEmergencyFormSubmit(e) {
    e.preventDefault();
    const errEl = document.getElementById("emergency-error");
    errEl.classList.add("hidden");
    const email = document
      .getElementById("emergency-email")
      .value.trim()
      .toLowerCase();
    const waitDays = document.getElementById("emergency-wait-days").value;
    if (!email) {
      errEl.textContent = "Email is required.";
      errEl.classList.remove("hidden");
      return;
    }
    try {
      const res = await apiFetch("/api/emergency", {
        method: "POST",
        body: JSON.stringify({
          grantee_email: email,
          wait_days: parseInt(waitDays),
        }),
      });
      if (!res) return;
      closeModal("emergency-modal");
      showToast("Invitation sent");
      loadEmergencyView();
    } catch (err) {
      errEl.textContent = err.message;
      errEl.classList.remove("hidden");
    }
  }

  return {
    init,
    // Exposed for inline onclick on the sidebar li — ensures the click reaches
    // switchView regardless of addEventListener binding order or timing.
    switchToImportExport: () => switchView("import-export"),
  };
})();

/**
 * Mobile/desktop mode detection.
 *
 * Sets body.is-mobile or body.is-desktop BEFORE first paint so CSS
 * scoped to those classes takes effect without any flash or transition.
 * Uses matchMedia (same source of truth as CSS media queries) rather
 * than window.innerWidth (unreliable on some Android Chrome builds).
 *
 * MOBILE_BP must match the CSS breakpoint. 768px covers all phones and
 * iPad Mini portrait (744px). iPad Air portrait (820px) and larger get
 * the desktop sidebar layout.
 */
(function initLayout() {
  const MOBILE_BP = 768;
  const mq = window.matchMedia(`(max-width: ${MOBILE_BP}px)`);

  function applyMode(isMobile) {
    document.body.classList.toggle("is-mobile", isMobile);
    document.body.classList.toggle("is-desktop", !isMobile);
  }

  // Set immediately — body class is applied before CSS is rendered
  applyMode(mq.matches);

  // Re-apply on orientation change / window resize (e.g. split-screen, rotation)
  mq.addEventListener("change", (e) => {
    applyMode(e.matches);
    // If switching to desktop, ensure mobile sidebar is closed
    if (!e.matches) {
      document.getElementById("sidebar")?.classList.remove("mobile-open");
      document.getElementById("sidebar-backdrop")?.classList.remove("open");
      document.documentElement.classList.remove("sidebar-open");
    }
  });
})();

/**
 * Viewport height fix for Chrome on Android.
 *
 * Chrome's 100vh includes the address bar height; window.innerHeight does not.
 * Setting --vh from innerHeight and using calc(var(--vh,1vh)*100) in CSS
 * gives the true usable viewport height on all browsers.
 */
(function setViewportHeight() {
  function update() {
    document.documentElement.style.setProperty(
      "--vh",
      `${window.innerHeight * 0.01}px`,
    );
  }
  update();
  window.addEventListener("resize", update, { passive: true });
  window.addEventListener("orientationchange", () => setTimeout(update, 100), {
    passive: true,
  });
  if (window.ResizeObserver) {
    new ResizeObserver(update).observe(document.documentElement);
  }
})();

document.addEventListener("DOMContentLoaded", Vault.init);