/**
 * 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

// ── 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, '&amp;').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);
}

// ── 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 ───────────────────────────────────────────────────────────────

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) {
    const refreshed = await tryRefreshToken();
    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) {
      _mfaToken = data.mfa_token;
      await chrome.storage.session.set({ _pending_enc_key_salt: data.enc_key_salt });
      handleMfaStage(password);
      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 () => {
    const code = $('mfa-code').value.trim();
    hideError('mfa-error');
    if (code.length !== 6) { showError('mfa-error', 'Enter the 6-digit code.'); return; }
    $('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({ mfa_token: _mfaToken, totp_code: code }),
      });
      const data = await res.json();
      if (!res.ok) { showError('mfa-error', data.error || 'Verification failed.'); return; }
      _mfaToken = null;
      const { _pending_enc_key_salt } = await chrome.storage.session.get('_pending_enc_key_salt');
      await completeLogin({ ...data, enc_key_salt: _pending_enc_key_salt }, password);
    } catch (err) {
      showError('mfa-error', 'Error: ' + err.message);
    } finally {
      $('btn-mfa-verify').disabled = false;
    }
  };
}

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; _items = [];
  showView('login');
}

// ── 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 to session for the popup's own use (badge, rendering).
    await chrome.storage.session.set({ vault_items: _items });

    // Write a lightweight copy to session storage for content scripts.
    // session storage is memory-only (cleared on browser close) — decrypted
    // vault data must never be persisted to disk via chrome.storage.local.
    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 });

    // Notify background to refresh badges and forward to content scripts.
    chrome.runtime.sendMessage({
      type: 'VAULT_UPDATED',
      vault_items: itemsForContentScript,
    }).catch(() => { });
  } catch (err) {
    console.error('fetchAndDecryptVault:', err);
  } finally {
    $('vault-spinner').classList.add('hidden');
  }
}

// ── 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 color = avatarColor(item.name);
    const emoji = itemEmoji(item.item_type);
    const canFill = item.item_type === 'password' && item.plain?.username && item.plain?.password;
    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}${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', e => {
      e.stopPropagation();
      const item = _items.find(i => i.id === parseInt(btn.dataset.copyPass));
      if (item?.plain?.password) {
        _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 => i.id === parseInt(btn.dataset.copyTotp));
      if (!item?.plain?.totp_uri) return;
      const code = await getTotpCode(item.plain.totp_uri).catch(() => null);
      if (code) {
        navigator.clipboard.writeText(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 => i.id === parseInt(btn.dataset.autofill));
      if (!item?.plain) 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 || '',
        }).catch(() => { });
      }
      window.close();
    })
  );

  // Copy username (dedicated button)
  listEl.querySelectorAll('[data-copy-user]').forEach(btn =>
    btn.addEventListener('click', e => {
      e.stopPropagation();
      const item = _items.find(i => i.id === parseInt(btn.dataset.copyUser));
      if (item?.plain?.username) {
        _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 => i.id === parseInt(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: () => { 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: () => { _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: () => { _copyWithAutoClear(item.plain.password); flyout.remove(); },
        } : null,
      ].filter(Boolean);

      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', e => { e.stopPropagation(); mi.action(); });
        flyout.appendChild(row);
      });

      // Position flyout below the button, right-aligned.
      btn.style.position = 'relative';
      btn.appendChild(flyout);

      // 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: '' };
  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: 'password', 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)]);

  const arr = new Uint32Array(length);
  crypto.getRandomValues(arr);
  const rest = Array.from(arr).map(n => pool[n % 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 };
    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: 'password', 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);