/**
 * extension/popup/popup.js — PassKeeper popup UI
 *
 * Storage layout:
 *   chrome.storage.session  — access_token, vault_key_jwk, vault_items  (cleared on browser close)
 *   chrome.storage.local    — refresh_token, enc_key_salt               (persists across restarts)
 *
 * SSO flow (web app → extension):
 *   bridge.js syncs tokens to background → background writes to chrome.storage.
 *   On popup open: if session has no vault_key but local has enc_key_salt + refresh_token,
 *   we refresh the access_token and show the unlock-only view (master password only).
 */

const API_BASE = "https://pwkeeper.ngodanguyen.tech";
const VAULT_URL = "https://pwkeeper.ngodanguyen.tech/vault";
const ALERTS_URL = "https://pwkeeper.ngodanguyen.tech/vault#security";

// ── State ─────────────────────────────────────────────────────────────────────

let _vaultKey = null;
let _items = [];
let _folders = []; // fetched alongside vault items for folder grouping
let _mfaToken = null;
let _currentUrl = "";
let _activeTab = "relevant";
const _collapsedFolders = new Set(); // persists collapsed state across re-renders
let _sharingPrivKey = null;  // decrypted ECDH private key for the session

// ── DOM helpers ───────────────────────────────────────────────────────────────

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

function showView(name) {
  ["login", "mfa", "unlock", "vault", "generator", "account", "add"].forEach(
    (v) => $(`view-${v}`).classList.toggle("hidden", v !== name),
  );
  // Bottom nav visible only in authenticated views.
  const navViews = ["vault", "generator", "account"];
  $("main-bottom-nav").classList.toggle("hidden", !navViews.includes(name));
  // Sync active state on nav buttons.
  ["nav-vault", "nav-generator", "nav-account"].forEach((id) => {
    const btn = $(id);
    if (!btn) return;
    const active =
      (id === "nav-vault" && name === "vault") ||
      (id === "nav-generator" && name === "generator") ||
      (id === "nav-account" && name === "account");
    btn.classList.toggle("active", active);
  });
}

function showError(elId, msg) {
  const el = $(elId);
  el.textContent = msg;
  el.classList.remove("hidden");
}

function hideError(elId) {
  $(elId).classList.add("hidden");
}

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

// Auto-clear clipboard 30 s after a sensitive copy.
let _clipTimer = null;
function _copyWithAutoClear(text) {
  navigator.clipboard.writeText(text).catch(() => { });
  if (_clipTimer) clearTimeout(_clipTimer);
  _clipTimer = setTimeout(() => {
    navigator.clipboard.writeText("").catch(() => { });
    _clipTimer = null;
  }, 30_000);
}

/**
 * Show an in-popup master-password re-prompt overlay.
 * Resolves true if the entered password matches the current vault key,
 * false if the user cancels or enters a wrong password.
 */
async function _repromptMasterPassword() {
  return new Promise((resolve) => {
    // Build the overlay element.
    const overlay = document.createElement("div");
    overlay.id = "pk-reprompt-overlay";
    overlay.className = "reprompt-overlay";
    overlay.innerHTML = `
      <div class="reprompt-card">
        <div class="reprompt-header">
          <svg width="18" height="18" viewBox="0 0 24 24" fill="none">
            <rect x="3" y="10" width="18" height="12" rx="2" stroke="#c0392b" stroke-width="1.8"/>
            <path d="M8 10V7a4 4 0 018 0v3" stroke="#c0392b" stroke-width="1.8" stroke-linecap="round"/>
          </svg>
          <span>Master password required</span>
        </div>
        <p class="reprompt-desc">This item is protected. Enter your master password to continue.</p>
        <div class="form-group">
          <label for="reprompt-pw">Master Password</label>
          <input type="password" id="reprompt-pw" placeholder="Master password" autocomplete="current-password"/>
        </div>
        <p id="reprompt-error" class="pk-error hidden">Incorrect password.</p>
        <div class="reprompt-actions">
          <button id="reprompt-confirm" class="btn-primary btn-sm">Confirm</button>
          <button id="reprompt-cancel"  class="btn-ghost  btn-sm">Cancel</button>
        </div>
      </div>`;

    document.getElementById("app").appendChild(overlay);
    const input = overlay.querySelector("#reprompt-pw");
    const errEl = overlay.querySelector("#reprompt-error");
    input.focus();

    async function attempt() {
      errEl.classList.add("hidden");
      const pw = input.value;
      if (!pw) { errEl.textContent = "Enter your master password."; errEl.classList.remove("hidden"); return; }
      try {
        let { enc_key_salt } = await chrome.storage.session.get("enc_key_salt");
        if (!enc_key_salt) {
          const local = await chrome.storage.local.get("enc_key_salt");
          enc_key_salt = local.enc_key_salt;
        }
        if (!enc_key_salt) { errEl.textContent = "Session expired. Please log in again."; errEl.classList.remove("hidden"); return; }
        // Derive a candidate key and compare its JWK to the stored key.
        const candidate = await ExtCrypto.deriveVaultKey(pw, enc_key_salt);
        const candidateJwk = await ExtCrypto.exportVaultKey(candidate);
        const { vault_key_jwk } = await chrome.storage.session.get("vault_key_jwk");
        if (!vault_key_jwk || JSON.stringify(candidateJwk) !== JSON.stringify(vault_key_jwk)) {
          throw new Error("mismatch");
        }
        cleanup(true);
      } catch {
        errEl.textContent = "Incorrect password.";
        errEl.classList.remove("hidden");
        input.value = "";
        input.focus();
      }
    }

    function cleanup(result) {
      overlay.remove();
      resolve(result);
    }

    overlay.querySelector("#reprompt-confirm").addEventListener("click", attempt);
    overlay.querySelector("#reprompt-cancel").addEventListener("click", () => cleanup(false));
    input.addEventListener("keydown", (e) => { if (e.key === "Enter") attempt(); if (e.key === "Escape") cleanup(false); });
  });
}

// ── Avatar helpers ────────────────────────────────────────────────────────────

const AVATAR_COLORS = [
  "",
  "color-red",
  "color-green",
  "color-purple",
  "color-teal",
];

function avatarColor(str) {
  let h = 0;
  for (const c of str) h = (h * 31 + c.charCodeAt(0)) >>> 0;
  return AVATAR_COLORS[h % AVATAR_COLORS.length];
}

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

function siteLabel(item) {
  if (item.plain?.url) {
    try {
      return new URL(item.plain.url).hostname.replace(/^www\./, "");
    } catch { }
  }
  return item.name;
}

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

// ── Domain matching ───────────────────────────────────────────────────────────

function currentHostname() {
  if (!_currentUrl) return "";
  try {
    return new URL(_currentUrl).hostname.replace(/^www\./, "");
  } catch {
    return "";
  }
}

/**
 * Normalise a stored URL so it is always parseable by `new URL()`.
 * Handles bare domains ("github.com"), protocol-relative, and full URLs.
 */
function _normaliseUrl(raw) {
  if (!raw) return null;
  const s = raw.trim();
  if (/^https?:\/\//i.test(s)) return s;
  if (s.startsWith("//")) return "https:" + s;
  return "https://" + s;
}

function isMatch(item) {
  const host = currentHostname();
  if (!host || item.item_type !== "password" || !item.plain?.url) return false;
  try {
    const normalised = _normaliseUrl(item.plain.url);
    if (!normalised) return false;
    const h = new URL(normalised).hostname.replace(/^www\./, "");
    // Match exact domain or any subdomain relationship.
    return h === host || h.endsWith(`.${host}`) || host.endsWith(`.${h}`);
  } catch {
    return false;
  }
}

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

// Singleton promise for the in-flight token refresh.
// When a 401 triggers a refresh, all concurrent requests that also receive a
// 401 await this same promise instead of starting their own — preventing the
// second refresh from using an already-rotated (and therefore blacklisted)
// refresh token, which would cause an unexpected sign-out.
let _refreshPromise = null;

async function apiFetch(path, options = {}) {
  const { access_token } = await chrome.storage.session.get("access_token");
  const headers = {
    "Content-Type": "application/json",
    ...(options.headers || {}),
  };
  if (access_token) headers["Authorization"] = `Bearer ${access_token}`;

  let res = await fetch(`${API_BASE}${path}`, { ...options, headers });

  if (res.status === 401) {
    // Coalesce concurrent 401 retries onto a single refresh attempt.
    if (!_refreshPromise) {
      _refreshPromise = tryRefreshToken().finally(() => {
        _refreshPromise = null;
      });
    }
    const refreshed = await _refreshPromise;
    if (!refreshed) {
      signOut();
      return null;
    }
    const { access_token: tok } =
      await chrome.storage.session.get("access_token");
    headers["Authorization"] = `Bearer ${tok}`;
    res = await fetch(`${API_BASE}${path}`, { ...options, headers });
  }
  return res;
}

async function tryRefreshToken() {
  const { refresh_token } = await chrome.storage.local.get("refresh_token");
  if (!refresh_token) return false;
  try {
    const res = await fetch(`${API_BASE}/api/auth/refresh`, {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ refresh_token }),
    });
    if (!res.ok) return false;
    const data = await res.json();
    await chrome.storage.session.set({ access_token: data.access_token });
    if (data.refresh_token)
      await chrome.storage.local.set({ refresh_token: data.refresh_token });
    return true;
  } catch {
    return false;
  }
}

// ── Auth ──────────────────────────────────────────────────────────────────────

async function handleLogin() {
  const email = $("login-email").value.trim().toLowerCase();
  const password = $("login-password").value;
  hideError("login-error");
  if (!email || !password) {
    showError("login-error", "Email and master password are required.");
    return;
  }

  const btn = $("btn-login");
  btn.disabled = true;
  btn.textContent = "Unlocking…";
  try {
    const authHash = await ExtCrypto.deriveAuthHash(password, email);
    const res = await fetch(`${API_BASE}/api/auth/login`, {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ email, auth_hash: authHash }),
    });
    const data = await res.json();
    if (!res.ok) {
      showError("login-error", data.error || "Login failed.");
      return;
    }

    if (data.mfa_required) {
      // enc_key_salt is withheld by the server until the second factor is
      // verified — it now arrives with the /mfa/verify response instead.
      _mfaToken = data.mfa_token;
      handleMfaStage(password);
      // Reset MFA view to TOTP mode each time it's shown
      $("mfa-totp-section").classList.remove("hidden");
      $("mfa-backup-section").classList.add("hidden");
      $("btn-mfa-use-backup").classList.remove("hidden");
      $("btn-mfa-use-totp").classList.add("hidden");
      $("mfa-hint").textContent = "Enter your 6-digit authenticator code.";
      $("mfa-code").value = "";
      $("mfa-backup-code").value = "";
      showView("mfa");
      $("mfa-code").focus();
      return;
    }
    await completeLogin(data, password);
  } catch (err) {
    showError("login-error", "Network error: " + err.message);
  } finally {
    btn.disabled = false;
    btn.textContent = "Unlock Vault";
  }
}

function handleMfaStage(password) {
  $("btn-mfa-verify").onclick = async () => {
    hideError("mfa-error");
    const usingBackup = !$("mfa-backup-section").classList.contains("hidden");
    const body = { mfa_token: _mfaToken };

    if (usingBackup) {
      const code = $("mfa-backup-code")
        .value.trim()
        .toLowerCase()
        .replace(/[\s-]/g, "");
      if (!code) {
        showError("mfa-error", "Enter your backup code.");
        return;
      }
      body.backup_code = code;
    } else {
      const code = $("mfa-code").value.trim();
      if (code.length !== 6) {
        showError("mfa-error", "Enter the 6-digit code.");
        return;
      }
      body.totp_code = code;
    }

    $("btn-mfa-verify").disabled = true;
    try {
      const res = await fetch(`${API_BASE}/api/auth/mfa/verify`, {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(body),
      });
      const data = await res.json();
      if (!res.ok) {
        showError("mfa-error", data.error || "Verification failed.");
        return;
      }
      _mfaToken = null;
      await completeLogin(data, password);
    } catch (err) {
      showError("mfa-error", "Error: " + err.message);
    } finally {
      $("btn-mfa-verify").disabled = false;
    }
  };

  $("btn-mfa-use-backup").onclick = () => {
    $("mfa-totp-section").classList.add("hidden");
    $("mfa-backup-section").classList.remove("hidden");
    $("btn-mfa-use-backup").classList.add("hidden");
    $("btn-mfa-use-totp").classList.remove("hidden");
    $("mfa-hint").textContent = "Enter one of your saved backup codes.";
    $("mfa-backup-code").focus();
  };

  $("btn-mfa-use-totp").onclick = () => {
    $("mfa-backup-section").classList.add("hidden");
    $("mfa-totp-section").classList.remove("hidden");
    $("btn-mfa-use-totp").classList.add("hidden");
    $("btn-mfa-use-backup").classList.remove("hidden");
    $("mfa-hint").textContent = "Enter your 6-digit authenticator code.";
    $("mfa-code").focus();
  };
}

async function completeLogin(data, masterPassword) {
  await chrome.storage.session.set({
    access_token: data.access_token,
    enc_key_salt: data.enc_key_salt,
  });
  // enc_key_salt also persisted locally — not sensitive without the master password,
  // needed to show unlock-only view after browser restart.
  await chrome.storage.local.set({
    refresh_token: data.refresh_token,
    enc_key_salt: data.enc_key_salt,
  });

  _vaultKey = await ExtCrypto.deriveVaultKey(masterPassword, data.enc_key_salt);
  const vaultKeyJwk = await ExtCrypto.exportVaultKey(_vaultKey);
  await chrome.storage.session.set({ vault_key_jwk: vaultKeyJwk });

  // Push session to any open web app tabs so they don't need to re-login
  chrome.runtime
    .sendMessage({
      type: "EXT_SESSION_SYNC",
      access_token: data.access_token,
      refresh_token: data.refresh_token,
      enc_key_salt: data.enc_key_salt,
    })
    .catch(() => { });

  showView("vault");
  await checkPendingSave();
  await fetchAndDecryptVault();
  renderList();
}

// ── Unlock-only (tokens from web app, just need master password) ──────────────

async function handleUnlockOnly() {
  const password = $("unlock-password").value;
  hideError("unlock-error");
  if (!password) {
    showError("unlock-error", "Enter your master password.");
    return;
  }

  const btn = $("btn-unlock");
  btn.disabled = true;
  btn.textContent = "Unlocking…";
  try {
    // enc_key_salt may be in session (fresh) or local (after browser restart)
    let { enc_key_salt } = await chrome.storage.session.get("enc_key_salt");
    if (!enc_key_salt) {
      const local = await chrome.storage.local.get("enc_key_salt");
      enc_key_salt = local.enc_key_salt;
    }
    if (!enc_key_salt) {
      showError("unlock-error", "Session expired. Please log in again.");
      return;
    }

    _vaultKey = await ExtCrypto.deriveVaultKey(password, enc_key_salt);
    const vaultKeyJwk = await ExtCrypto.exportVaultKey(_vaultKey);
    await chrome.storage.session.set({ vault_key_jwk: vaultKeyJwk });

    showView("vault");
    await checkPendingSave();
    await fetchAndDecryptVault();
    renderList();
  } catch {
    showError("unlock-error", "Incorrect password or session expired.");
  } finally {
    btn.disabled = false;
    btn.textContent = "Unlock";
  }
}

async function signOut() {
  try {
    const { access_token } = await chrome.storage.session.get("access_token");
    const { refresh_token } = await chrome.storage.local.get("refresh_token");
    if (access_token) {
      fetch(`${API_BASE}/api/auth/logout`, {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
          Authorization: `Bearer ${access_token}`,
        },
        body: JSON.stringify({ refresh_token }),
      }).catch(() => { });
    }
  } catch { }
  await chrome.storage.session.clear();
  await chrome.storage.local.remove(["refresh_token", "enc_key_salt"]);
  // vault_items_cs is now in session storage — cleared by the session.clear() call above.
  _vaultKey = null;
  _sharingPrivKey = null;
  _items = [];
  showView("login");
}

// ── Sharing private key ──────────────────────────────────────────────────────

/**
 * Load and decrypt the ECDH sharing private key into _sharingPrivKey.
 * No-op if already loaded or if the user hasn't set up sharing keys yet.
 * Called once per fetchAndDecryptVault() cycle.
 */
async function _loadSharingPrivKey() {
  if (_sharingPrivKey) return; // already loaded this session
  if (!_vaultKey) return;
  try {
    const res = await apiFetch('/api/sharing/keys');
    if (!res?.ok) return;
    const data = await res.json();
    if (!data.keys_setup || !data.private_key_enc || !data.private_key_iv) return;
    _sharingPrivKey = await ExtSharingCrypto.decryptPrivateKey(
      _vaultKey,
      data.private_key_enc,
      data.private_key_iv,
    );
  } catch (err) {
    console.warn('[PassKeeper] Could not load sharing private key:', err);
  }
}

// ── Vault loading ─────────────────────────────────────────────────────────────

/**
 * Returns:
 *   'vault'  — fully unlocked session restored
 *   'unlock' — tokens exist (from web app SSO) but vault key needs deriving
 *   false    — no session, show login
 */
async function restoreSessionIfAvailable() {
  const data = await chrome.storage.session.get([
    "access_token",
    "vault_key_jwk",
    "vault_items",
    "enc_key_salt",
  ]);

  if (data.access_token) {
    if (data.vault_key_jwk) {
      _vaultKey = await ExtCrypto.importVaultKey(data.vault_key_jwk);
      _items = data.vault_items || [];
      return "vault";
    }
    // Tokens exist (synced from web app) but vault key not yet derived
    if (data.enc_key_salt) return "unlock";
  }

  // Session cleared (e.g. browser restart) — try refreshing with persisted local tokens
  const local = await chrome.storage.local.get([
    "refresh_token",
    "enc_key_salt",
  ]);
  if (local.refresh_token && local.enc_key_salt) {
    const refreshed = await tryRefreshToken();
    if (refreshed) {
      await chrome.storage.session.set({ enc_key_salt: local.enc_key_salt });
      return "unlock";
    }
  }

  return false;
}

async function fetchAndDecryptVault() {
  $("vault-spinner").classList.remove("hidden");
  try {
    const [res, foldersRes] = await Promise.all([
      apiFetch("/api/vault"),
      apiFetch("/api/folders"),
    ]);
    if (!res) return;
    const raw = await res.json();
    try {
      if (foldersRes?.ok) _folders = await foldersRes.json();
    } catch (e) {
      _folders = [];
    }

    _items = await Promise.all(
      raw.map(async (item) => {
        try {
          const plain = await ExtCrypto.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 ExtCrypto.decryptName(
              _vaultKey,
              item.enc_name,
              item.iv_name,
            );
            if (decrypted) displayName = decrypted;
          }
          return { ...item, name: displayName, plain };
        } catch {
          return { ...item, plain: null };
        }
      }),
    );

    // Write own items to session for popup use (badge, rendering).
    // vault_items_cs and VAULT_UPDATED are sent after shared items are merged below.
    await chrome.storage.session.set({ vault_items: _items });

    // Load ECDH sharing private key (no-op if already loaded or keys not set up).
    await _loadSharingPrivKey();

    // Fetch and decrypt accepted shared items, then merge into _items.
    // Shared items are treated like own items for autofill/copy but carry
    // _shared: true and _sharedFrom: ownerEmail for UI differentiation.
    if (_sharingPrivKey) {
      try {
        const inboxRes = await apiFetch('/api/sharing/inbox');
        if (inboxRes?.ok) {
          const inbox = await inboxRes.json();
          const accepted = inbox.filter((s) => s.accepted && s.owner_public_key);
          const sharedItems = (await Promise.all(
            accepted.map(async (s) => {
              try {
                const ownerPub = await ExtSharingCrypto.importPublicKey(s.owner_public_key);
                const sharedKey = await ExtSharingCrypto.deriveSharedKey(_sharingPrivKey, ownerPub);
                const plain = await ExtSharingCrypto.decryptShare(sharedKey, s.enc_data, s.iv);
                let displayName = s.item_name;
                if (s.enc_name && s.iv_name) {
                  const dec = await ExtSharingCrypto.decryptName(sharedKey, s.enc_name, s.iv_name);
                  if (dec) displayName = dec;
                }
                return {
                  // Use a namespaced id so shared items never collide with own items.
                  id: `shared-${s.id}`,
                  _shareId: s.id,
                  _shared: true,
                  _sharedFrom: s.owner_email || 'Unknown',
                  item_type: s.item_type,
                  name: displayName,
                  folder_id: null,
                  created_at: s.created_at,
                  updated_at: s.created_at,
                  enc_data: s.enc_data,
                  iv: s.iv,
                  plain,
                };
              } catch {
                return null;
              }
            }),
          )).filter(Boolean);
          // Append shared items after own items so they don't displace own-item matches.
          _items = [..._items, ...sharedItems];
        }
      } catch (err) {
        console.warn('[PassKeeper] Could not load shared items:', err);
      }
    }

    // Persist the merged list (own + shared) to session for badge/content script use.
    // Shared items use their own namespaced ids so the content script can use them.
    const itemsForContentScript = _items.map((item) => ({
      id: item.id,
      name: item.name,
      item_type: item.item_type,
      plain: item.plain,
    }));
    await chrome.storage.session.set({ vault_items_cs: itemsForContentScript });
    chrome.runtime
      .sendMessage({
        type: 'VAULT_UPDATED',
        vault_items: itemsForContentScript,
      })
      .catch(() => { });

    // Run health checks in the background — sync metrics first, then HIBP.
    // Results are sent to the background SW via HEALTH_UPDATE so the toolbar
    // badge reflects the vault health even when the popup is closed.
    _runPopupHealthCheck();
  } catch (err) {
    console.error("fetchAndDecryptVault:", err);
  } finally {
    $("vault-spinner").classList.add("hidden");
  }
}

// ── Vault health check ────────────────────────────────────────────────────────

/**
 * Compute weak/reused counts synchronously, then run HIBP in parallel.
 * Sends HEALTH_UPDATE to the background service worker so the toolbar
 * badge is updated even after the popup closes.
 * Called once per fetchAndDecryptVault() cycle.
 */
async function _runPopupHealthCheck() {
  try {
    const pwItems = _items.filter(
      (i) => !i._shared && i.item_type === "password" && i.plain?.password,
    );
    if (!pwItems.length) {
      chrome.runtime
        .sendMessage({ type: "HEALTH_UPDATE", breached: 0, weak: 0, reused: 0 })
        .catch(() => { });
      return;
    }

    // Synchronous metrics.
    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();

    // Send sync results immediately so background badge updates quickly.
    chrome.runtime
      .sendMessage({
        type: "HEALTH_UPDATE",
        breached: 0,
        weak: weak.length,
        reused: reused.length,
      })
      .catch(() => { });

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

    // Send final results with breach count.
    chrome.runtime
      .sendMessage({
        type: "HEALTH_UPDATE",
        breached: breachedCount,
        weak: weak.length,
        reused: reused.length,
      })
      .catch(() => { });
  } catch (err) {
    console.error("[PassKeeper] Popup health check failed:", err);
  }
}

/**
 * HIBP k-anonymity check — identical to the web app's checkHibp().
 * Only the first 5 hex chars of SHA-1(password) are sent; the full
 * hash never leaves the browser.
 */
async function _popupCheckHibp(password) {
  try {
    const enc = new TextEncoder().encode(password);
    const hashBuf = await crypto.subtle.digest("SHA-1", enc);
    const hashHex = Array.from(new Uint8Array(hashBuf))
      .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;
  }
}

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

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 {
      return null;
    }
  }
  return uri.toUpperCase().replace(/[\s-]/g, "") || null;
}

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);
}

async function getTotpCode(totpUri) {
  const secret = _extractTotpSecret(totpUri);
  if (!secret) return null;
  const keyBytes = _base32ToBytes(secret);
  if (!keyBytes.length) return null;

  const counter = Math.floor(Date.now() / 1000 / 30);
  const msg = new Uint8Array(8);
  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");
}

function _totpSecondsLeft() {
  return 30 - (Math.floor(Date.now() / 1000) % 30);
}

// Track active TOTP ticker intervals so we can clear them on re-render.
let _totpIntervals = [];

function _clearTotpTickers() {
  _totpIntervals.forEach((id) => clearInterval(id));
  _totpIntervals = [];
}

// ── Rendering ─────────────────────────────────────────────────────────────────

function getTabItems() {
  const q = $("vault-search").value.trim().toLowerCase();

  let items = _items;

  // Text filter
  if (q) {
    items = items.filter(
      (i) =>
        i.name.toLowerCase().includes(q) ||
        (i.plain?.username || "").toLowerCase().includes(q) ||
        (i.plain?.url || "").toLowerCase().includes(q),
    );
  }

  if (_activeTab === "relevant") {
    // Show ONLY items that match the current domain, sorted by name.
    items = items.filter(isMatch).sort((a, b) => a.name.localeCompare(b.name));
  } else if (_activeTab === "recents") {
    items = [...items]
      .sort(
        (a, b) =>
          new Date(b.updated_at || b.created_at) -
          new Date(a.updated_at || a.created_at),
      )
      .slice(0, 20);
  } else if (_activeTab === "favorites") {
    items = items
      .filter((i) => (i.plain?.tags || []).includes("favorite"))
      .sort((a, b) => a.name.localeCompare(b.name));
  } else {
    items = [...items].sort((a, b) => a.name.localeCompare(b.name));
  }

  return items;
}

function renderList() {
  const listEl = $("vault-list");
  const emptyEl = $("vault-empty");
  const items = getTabItems();

  // Stop any running TOTP tickers from a previous render.
  _clearTotpTickers();

  if (!items.length) {
    listEl.innerHTML = "";
    if (_activeTab === "relevant") {
      const host = currentHostname();
      emptyEl.textContent = host
        ? `No saved passwords for ${host}.`
        : "No items match this page.";
    } else {
      emptyEl.textContent = "No items found.";
    }
    emptyEl.classList.remove("hidden");
    return;
  }
  emptyEl.classList.add("hidden");

  // SVG icons for action buttons
  const svgCopy = `<svg viewBox="0 0 24 24" fill="none"><rect x="9" y="9" width="11" height="11" rx="2" stroke="currentColor" stroke-width="1.7"/><path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1" stroke="currentColor" stroke-width="1.7"/></svg>`;
  const svgUser = `<svg viewBox="0 0 24 24" fill="none"><circle cx="12" cy="8" r="4" stroke="currentColor" stroke-width="1.7"/><path d="M4 20c0-4 3.6-7 8-7s8 3 8 7" stroke="currentColor" stroke-width="1.7" stroke-linecap="round"/></svg>`;
  const svgDots = `<svg viewBox="0 0 24 24" fill="currentColor"><circle cx="5" cy="12" r="1.5"/><circle cx="12" cy="12" r="1.5"/><circle cx="19" cy="12" r="1.5"/></svg>`;
  const svgFill = `<svg viewBox="0 0 24 24" fill="none"><path d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5" stroke="currentColor" stroke-width="1.7" stroke-linecap="round"/><path d="M17 3l4 4-9 9H8v-4l9-9z" stroke="currentColor" stroke-width="1.7" stroke-linejoin="round"/></svg>`;
  const svgTotp = `<svg viewBox="0 0 24 24" fill="none" width="16" height="16"><rect x="5" y="2" width="14" height="20" rx="2" stroke="currentColor" stroke-width="1.7"/><circle cx="12" cy="17" r="1" fill="currentColor"/><path d="M9 7h6M9 11h4" stroke="currentColor" stroke-width="1.7" stroke-linecap="round"/></svg>`;

  function buildItemHtml(item) {
    const matched = isMatch(item);
    const site = escHtml(siteLabel(item));
    const name = escHtml(item.name);
    const badge = matched ? '<span class="badge-match">match</span>' : "";
    const sharedBadge = item._shared ? `<span class="badge-shared" title="Shared by ${escHtml(item._sharedFrom)}">shared</span>` : "";
    const color = avatarColor(item.name);
    const emoji = itemEmoji(item.item_type);
    const canFill =
      item.item_type === "password" &&
      item.plain?.username &&
      item.plain?.password &&
      item.plain?.autofill !== false; // respect Advanced Setting
    const canCopy = item.item_type === "password" && item.plain?.password;
    const hasTotp =
      item.item_type === "password" &&
      !!_extractTotpSecret(item.plain?.totp_uri);
    const tags = (item.plain?.tags || []).filter((t) => t !== "favorite");
    const tagHtml = tags
      .map((t) => `<span class="pk-tag">${escHtml(t)}</span>`)
      .join("");
    const isFav = (item.plain?.tags || []).includes("favorite");
    return `<div class="vault-item" data-id="${item.id}">
      <div class="item-avatar ${color}">${emoji}</div>
      <div class="item-info">
        <div class="item-site">${site}${badge}${sharedBadge}${isFav ? '<span class="pk-fav">★</span>' : ""}</div>
        <div class="item-name">${name}</div>
        ${tagHtml ? `<div class="pk-tag-row">${tagHtml}</div>` : ""}
        ${hasTotp ? `<div class="item-totp-row"><span class="totp-code-inline" id="totp-${item.id}">······</span><span class="totp-timer-inline" id="totp-t-${item.id}"></span></div>` : ""}
      </div>
      <div class="item-actions">
        ${item.plain?.username ? `<button class="btn-item-action" data-copy-user="${item.id}" title="Copy username">${svgUser}</button>` : ""}
        ${canCopy ? `<button class="btn-item-action" data-copy-pass="${item.id}" title="Copy password">${svgCopy}</button>` : ""}
        ${hasTotp ? `<button class="btn-item-action totp-btn" data-copy-totp="${item.id}" title="Copy 2FA code">${svgTotp}</button>` : ""}
        ${canFill ? `<button class="btn-item-action" data-autofill="${item.id}" title="Autofill">${svgFill}</button>` : ""}
        <button class="btn-item-action" data-menu="${item.id}" title="More options">${svgDots}</button>
      </div>
    </div>`;
  }

  // Build the vault list — grouped by folder for 'all' tab, flat otherwise.
  if (_activeTab === "all" && _folders.length > 0) {
    const groups = {};
    items.forEach((item) => {
      const key = folderName(item.folder_id);
      if (!groups[key]) groups[key] = [];
      groups[key].push(item);
    });
    const keys = ["(none)", ..._folders.map((f) => f.name)].filter(
      (k) => groups[k],
    );
    Object.keys(groups).forEach((k) => {
      if (!keys.includes(k)) keys.push(k);
    });

    listEl.innerHTML = keys
      .map((groupName) => {
        if (!groups[groupName]) return "";
        const isCollapsed = _collapsedFolders.has(groupName);
        const count = groups[groupName].length;
        const chevron = isCollapsed ? "›" : "⌄";
        const itemsHtml = isCollapsed
          ? ""
          : groups[groupName].map(buildItemHtml).join("");
        return `<div class="pk-group" data-group="${escHtml(groupName)}">
        <div class="pk-group-header">
          <span class="pk-group-name">${escHtml(groupName)}</span>
          <span class="pk-group-meta">
            <span class="pk-group-count">${count}</span>
            <span class="pk-group-chevron">${chevron}</span>
          </span>
        </div>
        <div class="pk-group-items">${itemsHtml}</div>
      </div>`;
      })
      .join("");

    // Wire collapse toggle on group headers.
    listEl.querySelectorAll(".pk-group-header").forEach((hdr) => {
      hdr.addEventListener("click", () => {
        const groupName = hdr.closest(".pk-group").dataset.group;
        if (_collapsedFolders.has(groupName))
          _collapsedFolders.delete(groupName);
        else _collapsedFolders.add(groupName);
        renderList();
      });
    });
  } else {
    listEl.innerHTML = items.map(buildItemHtml).join("");
  }

  // Start TOTP tickers for items that have a totp_uri.
  items.forEach((item) => {
    if (
      item.item_type !== "password" ||
      !_extractTotpSecret(item.plain?.totp_uri)
    )
      return;
    const codeEl = $(`totp-${item.id}`);
    const timerEl = $(`totp-t-${item.id}`);
    if (!codeEl) return;

    async function tick() {
      const code = await getTotpCode(item.plain.totp_uri).catch(() => null);
      if (!code || !codeEl.isConnected) return;
      codeEl.textContent = code.slice(0, 3) + " " + code.slice(3);
      const secs = _totpSecondsLeft();
      timerEl.textContent = " " + secs + "s";
      timerEl.style.color = secs <= 5 ? "#dc2626" : "#9ca3af";
    }
    tick();
    const id = setInterval(tick, 1000);
    _totpIntervals.push(id);
  });

  // Copy password
  listEl.querySelectorAll("[data-copy-pass]").forEach((btn) =>
    btn.addEventListener("click", async (e) => {
      e.stopPropagation();
      const item = _items.find((i) => String(i.id) === btn.dataset.copyPass);
      if (!item?.plain?.password) return;
      if (item.plain?.reprompt) {
        const ok = await _repromptMasterPassword();
        if (!ok) return;
      }
      _copyWithAutoClear(item.plain.password);
      btn.title = "Copied!";
      setTimeout(() => {
        btn.title = "Copy password";
      }, 1500);
    }),
  );

  // Copy TOTP code
  listEl.querySelectorAll("[data-copy-totp]").forEach((btn) =>
    btn.addEventListener("click", async (e) => {
      e.stopPropagation();
      const item = _items.find((i) => String(i.id) === btn.dataset.copyTotp);
      if (!item?.plain?.totp_uri) return;
      const code = await getTotpCode(item.plain.totp_uri).catch(() => null);
      if (code) {
        // Use _copyWithAutoClear so the 2FA code is wiped from the clipboard
        // after 30 s, consistent with password copy behaviour.
        _copyWithAutoClear(code);
        btn.title = "Copied!";
        btn.style.color = "#16a34a";
        setTimeout(() => {
          btn.title = "Copy 2FA code";
          btn.style.color = "";
        }, 1500);
      }
    }),
  );

  // Autofill
  listEl.querySelectorAll("[data-autofill]").forEach((btn) =>
    btn.addEventListener("click", async (e) => {
      e.stopPropagation();
      const item = _items.find((i) => String(i.id) === btn.dataset.autofill);
      if (!item?.plain) return;
      if (item.plain?.reprompt) {
        const ok = await _repromptMasterPassword();
        if (!ok) return;
      }
      const [tab] = await chrome.tabs.query({
        active: true,
        currentWindow: true,
      });
      if (tab?.id) {
        chrome.tabs
          .sendMessage(tab.id, {
            type: "DO_AUTOFILL",
            username: item.plain.username || "",
            password: item.plain.password || "",
            autologin: !!item.plain.autologin,
          })
          .catch(() => { });
      }
      window.close();
    }),
  );

  // Copy username (dedicated button)
  listEl.querySelectorAll("[data-copy-user]").forEach((btn) =>
    btn.addEventListener("click", async (e) => {
      e.stopPropagation();
      const item = _items.find((i) => String(i.id) === btn.dataset.copyUser);
      if (!item?.plain?.username) return;
      if (item.plain?.reprompt) {
        const ok = await _repromptMasterPassword();
        if (!ok) return;
      }
      _copyWithAutoClear(item.plain.username);
      btn.title = "Copied!";
      setTimeout(() => {
        btn.title = "Copy username";
      }, 1500);
    }),
  );

  // Three-dot menu: proper flyout with contextual actions
  listEl.querySelectorAll("[data-menu]").forEach((btn) =>
    btn.addEventListener("click", (e) => {
      e.stopPropagation();
      // Close any already-open flyout first.
      document.querySelectorAll(".pk-flyout").forEach((el) => el.remove());

      const item = _items.find((i) => String(i.id) === btn.dataset.menu);
      if (!item) return;

      const flyout = document.createElement("div");
      flyout.className = "pk-flyout";

      const menuItems = [
        item.plain?.url
          ? {
            label: "Open URL",
            icon: '<svg viewBox="0 0 24 24" fill="none" width="14" height="14"><path d="M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6" stroke="currentColor" stroke-width="1.7" stroke-linecap="round"/><path d="M15 3h6v6M10 14L21 3" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"/></svg>',
            action: async () => {
              chrome.tabs.create({ url: item.plain.url });
              flyout.remove();
            },
          }
          : null,
        item.plain?.username
          ? {
            label: "Copy username",
            icon: '<svg viewBox="0 0 24 24" fill="none" width="14" height="14"><circle cx="12" cy="8" r="4" stroke="currentColor" stroke-width="1.7"/><path d="M4 20c0-4 3.6-7 8-7s8 3 8 7" stroke="currentColor" stroke-width="1.7" stroke-linecap="round"/></svg>',
            action: async () => {
              if (item.plain?.reprompt) {
                const ok = await _repromptMasterPassword();
                if (!ok) return;
              }
              _copyWithAutoClear(item.plain.username);
              flyout.remove();
            },
          }
          : null,
        item.plain?.password
          ? {
            label: "Copy password",
            icon: '<svg viewBox="0 0 24 24" fill="none" width="14" height="14"><rect x="3" y="10" width="18" height="11" rx="2" stroke="currentColor" stroke-width="1.7"/><path d="M8 10V7a4 4 0 018 0v3" stroke="currentColor" stroke-width="1.7" stroke-linecap="round"/></svg>',
            action: async () => {
              if (item.plain?.reprompt) {
                const ok = await _repromptMasterPassword();
                if (!ok) return;
              }
              _copyWithAutoClear(item.plain.password);
              flyout.remove();
            },
          }
          : null,
      ].filter(Boolean);

      // Add a non-action info row showing when the password was last changed.
      // Only shown for password items that have password_changed_at set.
      if (item.item_type === "password" && item.plain?.password_changed_at) {
        const daysAgo = Math.floor(
          (Date.now() - new Date(item.plain.password_changed_at).getTime()) /
          86400000,
        );
        const ageText =
          daysAgo === 0
            ? "Changed today"
            : daysAgo === 1
              ? "Changed yesterday"
              : `Changed ${daysAgo} days ago`;
        const infoRow = document.createElement("div");
        infoRow.className = "pk-flyout-info";
        infoRow.textContent = ageText;
        // Append after action rows are added.
        flyout._ageInfoRow = infoRow;
      }

      menuItems.forEach((mi) => {
        const row = document.createElement("button");
        row.className = "pk-flyout-item";
        row.innerHTML = mi.icon + "<span>" + escHtml(mi.label) + "</span>";
        row.addEventListener("click", async (e) => {
          e.stopPropagation();
          await mi.action();
        });
        flyout.appendChild(row);
      });

      // Append age info row if present.
      if (flyout._ageInfoRow) {
        flyout.appendChild(flyout._ageInfoRow);
      }

      // Position flyout using fixed coords so it escapes vault-list overflow clipping.
      const appEl = document.getElementById("app");
      appEl.appendChild(flyout);

      const btnRect = btn.getBoundingClientRect();
      const flyoutH = flyout.offsetHeight || 120; // estimate if not yet painted
      const spaceBelow = window.innerHeight - btnRect.bottom;
      const flyoutW = flyout.offsetWidth || 160;

      // Flip upward if not enough room below.
      if (spaceBelow < flyoutH + 8) {
        flyout.style.top = (btnRect.top - flyoutH - 4) + "px";
      } else {
        flyout.style.top = (btnRect.bottom + 4) + "px";
      }
      // Right-align with the button, but keep inside the popup.
      const rightEdge = window.innerWidth - btnRect.right;
      flyout.style.right = rightEdge + "px";

      // Close on any outside click.
      setTimeout(() => {
        document.addEventListener("click", function handler() {
          flyout.remove();
          document.removeEventListener("click", handler);
        });
      }, 0);
    }),
  );
}

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

function initTabs() {
  document.querySelectorAll(".tab-btn").forEach((btn) => {
    btn.addEventListener("click", () => {
      _activeTab = btn.dataset.tab;
      document
        .querySelectorAll(".tab-btn")
        .forEach((b) => b.classList.toggle("active", b === btn));
      renderList();
    });
  });
}

// ── Save-prompt modal ─────────────────────────────────────────────────────────

/**
 * Populate the folder <select> inside the save modal.
 * Fetches /api/folders and rebuilds the option list.
 * The first option ("— No folder —") with value "" is always kept.
 */
async function loadFoldersIntoSaveModal() {
  const select = $("save-folder");
  // Reset to just the placeholder option.
  select.innerHTML = '<option value="">— No folder —</option>';
  try {
    const res = await apiFetch("/api/folders");
    if (!res?.ok) return;
    const folders = await res.json();
    folders.forEach((f) => {
      const opt = document.createElement("option");
      opt.value = f.id;
      opt.textContent = f.name;
      select.appendChild(opt);
    });
  } catch (err) {
    console.error("[PassKeeper] loadFoldersIntoSaveModal failed:", err);
  }
}

/**
 * Show the save-prompt overlay.  It is a blocking modal — no backdrop click,
 * no ✕ button — so the user MUST click "Save" or "Not now".
 * Called every time the popup opens while a pending_save is stored.
 *
 * pending_save is stored in chrome.storage.local (not session) so it survives
 * service worker restarts and is reliably present when the popup re-opens.
 */
async function checkPendingSave() {
  const { pending_save } = await chrome.storage.local.get("pending_save");
  if (!pending_save) return;

  // Populate fields.
  $("save-name").value = pending_save.siteName || "";
  $("save-username").value = pending_save.username || "";
  $("save-prompt-subtitle").textContent =
    `${pending_save.username || "(no username)"} on ${pending_save.siteName || pending_save.url || "unknown site"}`;
  $("save-prompt-title").textContent = pending_save._isUpdate
    ? "Update in PassKeeper?"
    : "Save to PassKeeper?";

  // Load folders (non-blocking — modal shows immediately, folders populate async).
  $("save-folder").value = "";
  loadFoldersIntoSaveModal();

  // Show the overlay.
  $("save-prompt-overlay").classList.remove("hidden");
  $("save-name").focus();

  // Wire buttons — use onclick so re-running checkPendingSave never double-binds.
  // Helper to dismiss the overlay, clear storage, and remove the toolbar badge.
  function _clearPendingSave() {
    $("save-prompt-overlay").classList.add("hidden");
    chrome.storage.local.remove("pending_save");
    chrome.runtime.sendMessage({ type: "CLEAR_SAVE_BADGE" }).catch(() => { });
  }

  $("btn-save-yes").onclick = async () => {
    console.log(
      "[PassKeeper] User saved credential for",
      pending_save.siteName,
    );
    await saveCredential(pending_save);
    _clearPendingSave();
  };
  $("btn-save-no").onclick = () => {
    console.log(
      "[PassKeeper] User dismissed save prompt for",
      pending_save.siteName,
    );
    _clearPendingSave();
  };
}

async function saveCredential(data) {
  if (!_vaultKey) return;
  const plain = {
    url: data.url || "",
    username: data.username || "",
    password: data.password || "",
    notes: "",
    password_changed_at: new Date().toISOString(),
  };
  const name = $("save-name").value.trim() || data.siteName || "Untitled";
  // Read selected folder — empty string means no folder (null).
  const folderVal = $("save-folder").value;
  const folder_id = folderVal ? parseInt(folderVal, 10) : null;
  const { enc_data, iv } = await ExtCrypto.encryptItem(_vaultKey, plain);
  const { enc_name, iv_name } = await ExtCrypto.encryptName(_vaultKey, name);
  try {
    const res = await apiFetch("/api/vault", {
      method: "POST",
      body: JSON.stringify({
        name,            // actual site name (plaintext fallback for legacy clients)
        item_type: "password",
        folder_id,
        enc_data,
        iv,
        enc_name,
        iv_name,
      }),
    });
    if (res?.ok) {
      console.log(
        "[PassKeeper] Credential saved to vault:",
        name,
        "(name encrypted), folder_id:",
        folder_id,
      );
      await fetchAndDecryptVault();
      renderList();
    }
  } catch (err) {
    console.error("saveCredential failed:", err);
  }
}

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

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

/**
 * Cryptographically secure random integer in [0, max).
 * Uses crypto.getRandomValues exclusively — Math.random() is never called.
 */
function _cryptoRandInt(max) {
  // Rejection sampling to eliminate modulo bias.
  const limit = Math.floor(0x100000000 / max) * max;
  const buf = new Uint32Array(1);
  do {
    crypto.getRandomValues(buf);
  } while (buf[0] >= limit);
  return buf[0] % max;
}

function generatePassword(length, useLower, useUpper, useNumbers, useSymbols) {
  // Always fall back to lower if nothing selected, preventing infinite loop.
  const pool = [
    useLower ? GEN_SETS.lower : "",
    useUpper ? GEN_SETS.upper : "",
    useNumbers ? GEN_SETS.numbers : "",
    useSymbols ? GEN_SETS.symbols : "",
  ].join("");
  if (!pool) return "";

  // Guarantee at least one character from each selected charset
  // using cryptographically secure random selection.
  const required = [];
  if (useLower)
    required.push(GEN_SETS.lower[_cryptoRandInt(GEN_SETS.lower.length)]);
  if (useUpper)
    required.push(GEN_SETS.upper[_cryptoRandInt(GEN_SETS.upper.length)]);
  if (useNumbers)
    required.push(GEN_SETS.numbers[_cryptoRandInt(GEN_SETS.numbers.length)]);
  if (useSymbols)
    required.push(GEN_SETS.symbols[_cryptoRandInt(GEN_SETS.symbols.length)]);

  // Use _cryptoRandInt() for each character to avoid modulo bias that arises
  // when pool.length is not a power of 2.
  const rest = Array.from({ length }, () => pool[_cryptoRandInt(pool.length)]);

  // Splice required chars into random positions and trim to length.
  const combined = [...rest];
  required.forEach((ch, i) => {
    combined[i] = ch;
  });
  // Fisher-Yates shuffle — fully CSPRNG, no Math.random().
  for (let i = combined.length - 1; i > 0; i--) {
    const j = _cryptoRandInt(i + 1);
    [combined[i], combined[j]] = [combined[j], combined[i]];
  }
  return combined.slice(0, length).join("");
}

function passwordStrength(pw) {
  if (!pw) return { label: "", color: "" };
  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++;
  if (score <= 2) return { label: "Weak", color: "#dc2626" };
  if (score <= 4) return { label: "Fair", color: "#d97706" };
  if (score <= 5) return { label: "Good", color: "#2563eb" };
  if (score <= 6) return { label: "Strong", color: "#16a34a" };
  return { label: "Very Strong", color: "#15803d" };
}

let _genInitialised = false;

function initGenerator() {
  // Only bind events once — subsequent calls just re-generate a password.
  if (!_genInitialised) {
    _genInitialised = true;

    const slider = $("gen-length");
    const numInput = $("gen-length-num");

    // Keep slider and number input in sync.
    slider.addEventListener("input", () => {
      numInput.value = slider.value;
      refreshGen();
    });
    numInput.addEventListener("input", () => {
      const v = Math.min(64, Math.max(8, parseInt(numInput.value) || 16));
      slider.value = v;
      numInput.value = v;
      refreshGen();
    });

    ["gen-lower", "gen-upper", "gen-numbers", "gen-symbols"].forEach((id) => {
      $(id).addEventListener("change", refreshGen);
    });

    $("btn-gen-refresh").addEventListener("click", refreshGen);

    $("btn-gen-copy").addEventListener("click", () => {
      const pw = $("gen-output").textContent;
      if (!pw || pw === "Click refresh to generate") return;
      navigator.clipboard.writeText(pw).then(() => {
        $("btn-gen-copy").title = "Copied!";
        setTimeout(() => {
          $("btn-gen-copy").title = "Copy password";
        }, 1500);
      });
    });
  }

  // Always generate a fresh password when the view opens.
  refreshGen();
}

function refreshGen() {
  const length = Math.min(
    64,
    Math.max(8, parseInt($("gen-length").value) || 16),
  );
  const useLower = $("gen-lower").checked;
  const useUpper = $("gen-upper").checked;
  const useNumbers = $("gen-numbers").checked;
  const useSymbols = $("gen-symbols").checked;

  // Require at least one charset.
  if (!useLower && !useUpper && !useNumbers && !useSymbols) {
    $("gen-output").textContent = "Select at least one character type";
    $("gen-strength-label").textContent = "";
    return;
  }

  const pw = generatePassword(
    length,
    useLower,
    useUpper,
    useNumbers,
    useSymbols,
  );
  $("gen-output").textContent = pw;

  const { label, color } = passwordStrength(pw);
  const strengthEl = $("gen-strength-label");
  strengthEl.textContent = label;
  strengthEl.style.color = color;
}

// ── Add Item view ─────────────────────────────────────────────────────────────

let _addViewInitialised = false;

async function initAddView() {
  // Pre-fill URL from the current active tab.
  try {
    const [tab] = await chrome.tabs.query({
      active: true,
      currentWindow: true,
    });
    if (tab?.url?.startsWith("http")) {
      $("add-url").value = tab.url;
      // Derive a human-friendly site name from the tab title or hostname.
      if (!$("add-name").value) {
        $("add-name").value = tab.title
          ? tab.title.replace(/[-|–].*$/, "").trim() // strip " - Login" suffixes
          : new URL(tab.url).hostname.replace(/^www\./, "");
      }
    }
  } catch (e) { }

  // Load folders into the add-folder select.
  const addFolderSel = $("add-folder");
  addFolderSel.innerHTML = '<option value="">— No folder —</option>';
  try {
    const res = await apiFetch("/api/folders");
    if (res?.ok) {
      const folders = await res.json();
      folders.forEach((f) => {
        const opt = document.createElement("option");
        opt.value = f.id;
        opt.textContent = f.name;
        addFolderSel.appendChild(opt);
      });
    }
  } catch (e) { }

  // Wire one-time event listeners.
  if (!_addViewInitialised) {
    _addViewInitialised = true;

    // Back button.
    $("btn-add-back").addEventListener("click", () => {
      showView("vault");
      hideError("add-error");
    });

    // Show/hide password toggle.
    $("btn-add-toggle-pw").addEventListener("click", () => {
      const pw = $("add-password");
      pw.type = pw.type === "password" ? "text" : "password";
    });

    // Generate password — generates via the generator logic and pastes into field.
    $("btn-add-generate").addEventListener("click", () => {
      const pw = generatePassword(16, true, true, true, true);
      $("add-password").value = pw;
      $("add-password").type = "text"; // show it so the user can see what was generated
    });

    // Save button.
    $("btn-add-save").addEventListener("click", addItemToVault);

    // Allow Enter in any text field to submit.
    ["add-name", "add-url", "add-username", "add-password"].forEach((id) => {
      $(id).addEventListener("keydown", (e) => {
        if (e.key === "Enter") addItemToVault();
      });
    });
  }

  // Clear fields and error each time the view opens.
  ["add-name", "add-url", "add-username", "add-password", "add-notes"].forEach(
    (id) => {
      // Don't reset url/name — already pre-filled above.
      if (id === "add-url" || id === "add-name") return;
      $(id).value = "";
    },
  );
  $("add-password").type = "password";
  hideError("add-error");
  $("add-name").focus();
}

async function addItemToVault() {
  const name = $("add-name").value.trim();
  const url = $("add-url").value.trim();
  const username = $("add-username").value.trim();
  const password = $("add-password").value;
  const notes = $("add-notes").value.trim();
  const folderVal = $("add-folder").value;
  const folder_id = folderVal ? parseInt(folderVal, 10) : null;

  hideError("add-error");

  if (!name) {
    showError("add-error", "Site name is required.");
    return;
  }
  if (!password) {
    showError("add-error", "Password is required.");
    return;
  }
  if (!_vaultKey) {
    showError("add-error", "Vault is locked. Please unlock first.");
    return;
  }

  const btn = $("btn-add-save");
  btn.disabled = true;
  btn.textContent = "Saving…";

  try {
    const plain = { url, username, password, notes, password_changed_at: new Date().toISOString() };
    const { enc_data, iv } = await ExtCrypto.encryptItem(_vaultKey, plain);
    const { enc_name, iv_name } = await ExtCrypto.encryptName(_vaultKey, name);
    const res = await apiFetch("/api/vault", {
      method: "POST",
      body: JSON.stringify({
        name,            // actual site name (plaintext fallback for legacy clients)
        item_type: "password",
        folder_id,
        enc_data,
        iv,
        enc_name,
        iv_name,
      }),
    });
    if (!res?.ok) {
      const data = await res.json().catch(() => ({}));
      showError("add-error", data.error || "Failed to save. Please try again.");
      return;
    }
    console.log("[PassKeeper] Item added to vault:", name, "(name encrypted)");
    // Refresh vault and go back.
    await fetchAndDecryptVault();
    renderList();
    showView("vault");
  } catch (err) {
    showError("add-error", "Network error: " + err.message);
  } finally {
    btn.disabled = false;
    btn.textContent = "Save to Vault";
  }
}

// ── Account view ──────────────────────────────────────────────────────────────

const IDLE_TIMEOUT_KEY = "idle_lock_seconds";

async function initAccountView() {
  // Load saved timeout value and reflect it in the select.
  const stored = await chrome.storage.local.get(IDLE_TIMEOUT_KEY);
  const saved = stored[IDLE_TIMEOUT_KEY];
  if (saved !== undefined) {
    const sel = $("acct-idle-timeout");
    // Find the matching option; fall back to 600 if not found.
    const opt = Array.from(sel.options).find(
      (o) => parseInt(o.value) === saved,
    );
    if (opt) sel.value = String(saved);
  }

  // Save on change and notify the background to apply immediately.
  $("acct-idle-timeout").addEventListener("change", async () => {
    const val = parseInt($("acct-idle-timeout").value);
    await chrome.storage.local.set({ [IDLE_TIMEOUT_KEY]: val });
    // Tell background to re-apply the new interval.
    chrome.runtime
      .sendMessage({ type: "SET_IDLE_TIMEOUT", seconds: val })
      .catch(() => { });
    // Brief "Saved" confirmation.
    const saved = $("acct-idle-saved");
    saved.classList.remove("hidden");
    setTimeout(() => saved.classList.add("hidden"), 2000);
    console.log("[PassKeeper] Idle lock timeout set to", val, "seconds");
  });

  $("acct-open-vault").href = VAULT_URL;
  $("acct-signout").addEventListener("click", signOut);
}

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

async function init() {
  try {
    const [tab] = await chrome.tabs.query({
      active: true,
      currentWindow: true,
    });
    _currentUrl = tab?.url || "";
  } catch { }

  // Set vault link
  $("btn-open-vault").href = VAULT_URL;

  const sessionState = await restoreSessionIfAvailable();

  if (sessionState === "vault") {
    // Check whether the content script requested a specific view (e.g. generator).
    const { popup_nav } = await chrome.storage.session.get("popup_nav");
    if (popup_nav) {
      await chrome.storage.session.remove("popup_nav");
      if (popup_nav === "generator") {
        showView("generator");
        initGenerator();
        // Still load vault data in background so the Vault tab is ready.
        fetchAndDecryptVault().then(() => { });
        // Wire event listeners below, then return early from vault-specific setup.
      } else {
        showView("vault");
        await checkPendingSave();
        if (_items.length) {
          renderList();
          fetchAndDecryptVault().then(() => renderList());
        } else {
          await fetchAndDecryptVault();
          renderList();
        }
      }
    } else {
      showView("vault");
      await checkPendingSave();
      if (_items.length) {
        renderList();
        fetchAndDecryptVault().then(() => renderList());
      } else {
        await fetchAndDecryptVault();
        renderList();
      }
    }
  } else if (sessionState === "unlock") {
    showView("unlock");
    $("unlock-password").focus();
  } else {
    showView("login");
  }

  // Login
  $("btn-login").addEventListener("click", handleLogin);
  $("login-password").addEventListener("keydown", (e) => {
    if (e.key === "Enter") handleLogin();
  });
  $("login-email").addEventListener("keydown", (e) => {
    if (e.key === "Enter") $("login-password").focus();
  });

  // MFA
  $("btn-mfa-back").addEventListener("click", () => {
    _mfaToken = null;
    showView("login");
  });
  $("mfa-code").addEventListener("keydown", (e) => {
    if (e.key === "Enter") $("btn-mfa-verify")?.click();
  });

  // Unlock-only
  $("btn-unlock").addEventListener("click", handleUnlockOnly);
  $("unlock-password").addEventListener("keydown", (e) => {
    if (e.key === "Enter") handleUnlockOnly();
  });
  $("btn-unlock-signout").addEventListener("click", signOut);

  // Vault actions
  $("btn-add-item").addEventListener("click", () => {
    showView("add");
    initAddView();
  });
  $("nav-vault").addEventListener("click", () => {
    showView("vault");
  });
  $("nav-generator").addEventListener("click", () => {
    showView("generator");
    initGenerator();
  });
  $("nav-alerts").addEventListener("click", () => {
    chrome.tabs.create({ url: ALERTS_URL });
  });
  $("nav-account").addEventListener("click", () => {
    showView("account");
    initAccountView();
  });

  // Keep the service worker alive so chrome.storage.session survives while the
  // browser is open.  We ping it every 20 s; the ping itself is a no-op but
  // prevents the SW from being killed between popup openings.
  const _keepalive = setInterval(() => {
    chrome.runtime.sendMessage({ type: "KEEPALIVE" }).catch(() => { });
  }, 20_000);

  // Search
  $("vault-search").addEventListener("input", () => renderList());

  // Tabs
  initTabs();
}

document.addEventListener("DOMContentLoaded", init);