import { test, expect, BrowserContext } from "@playwright/test";
import { fileURLToPath } from "url";
import { dirname, join } from "path";
import os from "os";
import fs from "fs/promises";

const __filename = fileURLToPath(import.meta.url);
const __dirname = dirname(__filename);
const EXTENSION_PATH = join(__dirname, "..", "dist");

async function makeContext() {
  const { chromium } = await import("playwright");
  const userDataDir = join(os.tmpdir(), `peach-set-${Date.now()}`);
  await fs.mkdir(userDataDir, { recursive: true });
  return chromium.launchPersistentContext(userDataDir, {
    headless: false,
    args: [`--load-extension=${EXTENSION_PATH}`, `--disable-extensions-except=${EXTENSION_PATH}`],
  });
}

async function waitForSW(ctx: BrowserContext, maxWait = 15000): Promise<string> {
  const start = Date.now();
  let sw = ctx.serviceWorkers()[0];
  while (!sw && Date.now() - start < maxWait) {
    await new Promise(r => setTimeout(r, 500));
    sw = ctx.serviceWorkers()[0];
  }
  if (!sw) throw new Error(`No SW after ${maxWait}ms`);
  return new URL(sw.url()).host;
}

async function setupVault(ctx: BrowserContext): Promise<{ popup: any, extId: string }> {
  const extId = await waitForSW(ctx);
  const popup = await ctx.newPage();
  await popup.goto(`chrome-extension://${extId}/src/popup/index.html`);
  await popup.waitForTimeout(3000);
  const pw = popup.locator("#master-password");
  if (await pw.isVisible()) {
    await pw.fill("password123");
    await popup.locator("#confirm-password").fill("password123");
    await popup.getByRole("button", { name: /create vault/i }).click();
    await popup.waitForTimeout(2000);
  }
  return { popup, extId };
}

test.describe("Auto-Lock Configuration", () => {
  let ctx: BrowserContext;
  test.afterEach(async () => { await ctx.close(); });
  test.beforeEach(async () => { ctx = await makeContext(); });

  test("AUL01 - auto-lock setting exists in settings", async () => {
    const { popup } = await setupVault(ctx);
    await popup.locator(".peach-icon-btn[aria-label='Settings']").click();
    await popup.waitForTimeout(500);
    const autoLock = popup.locator("text=auto-lock").first();
    await expect(autoLock).toBeVisible();
    await ctx.close();
  });

  test("AUL02 - auto-lock options: 1 minute", async () => {
    const { popup } = await setupVault(ctx);
    await popup.locator(".peach-icon-btn[aria-label='Settings']").click();
    await popup.waitForTimeout(500);
    await popup.locator("text=auto-lock").click();
    await popup.waitForTimeout(300);
    const options = popup.locator("[role='option' i], [role='menuitem' i], .peach-select-option");
    const optionTexts = await options.allTextContents();
    const has1Min = optionTexts.some((t: string) => t.toLowerCase().includes("1 min") || t.toLowerCase().includes("1 minute"));
    expect(has1Min).toBeTruthy();
    await ctx.close();
  });

  test("AUL03 - auto-lock options: 5 minutes", async () => {
    const { popup } = await setupVault(ctx);
    await popup.locator(".peach-icon-btn[aria-label='Settings']").click();
    await popup.waitForTimeout(500);
    await popup.locator("text=auto-lock").click();
    await popup.waitForTimeout(300);
    const options = popup.locator("[role='option' i], [role='menuitem' i], .peach-select-option");
    const optionTexts = await options.allTextContents();
    const has5Min = optionTexts.some((t: string) => t.toLowerCase().includes("5 min") || t.toLowerCase().includes("5 minute"));
    expect(has5Min).toBeTruthy();
    await ctx.close();
  });

  test("AUL04 - auto-lock options: 15 minutes", async () => {
    const { popup } = await setupVault(ctx);
    await popup.locator(".peach-icon-btn[aria-label='Settings']").click();
    await popup.waitForTimeout(500);
    await popup.locator("text=auto-lock").click();
    await popup.waitForTimeout(300);
    const options = popup.locator("[role='option' i], [role='menuitem' i], .peach-select-option");
    const optionTexts = await options.allTextContents();
    const has15Min = optionTexts.some((t: string) => t.toLowerCase().includes("15 min") || t.toLowerCase().includes("15 minute"));
    expect(has15Min).toBeTruthy();
    await ctx.close();
  });

  test("AUL05 - auto-lock options: 1 hour", async () => {
    const { popup } = await setupVault(ctx);
    await popup.locator(".peach-icon-btn[aria-label='Settings']").click();
    await popup.waitForTimeout(500);
    await popup.locator("text=auto-lock").click();
    await popup.waitForTimeout(300);
    const options = popup.locator("[role='option' i], [role='menuitem' i], .peach-select-option");
    const optionTexts = await options.allTextContents();
    const has1Hr = optionTexts.some((t: string) => t.toLowerCase().includes("1 hour") || t.toLowerCase().includes("1 hr"));
    expect(has1Hr).toBeTruthy();
    await ctx.close();
  });

  test("AUL06 - auto-lock options: never", async () => {
    const { popup } = await setupVault(ctx);
    await popup.locator(".peach-icon-btn[aria-label='Settings']").click();
    await popup.waitForTimeout(500);
    await popup.locator("text=auto-lock").click();
    await popup.waitForTimeout(300);
    const options = popup.locator("[role='option' i], [role='menuitem' i], .peach-select-option");
    const optionTexts = await options.allTextContents();
    const hasNever = optionTexts.some((t: string) => t.toLowerCase().includes("never"));
    expect(hasNever).toBeTruthy();
    await ctx.close();
  });

  test("AUL07 - selecting auto-lock option closes dropdown", async () => {
    const { popup } = await setupVault(ctx);
    await popup.locator(".peach-icon-btn[aria-label='Settings']").click();
    await popup.waitForTimeout(500);
    await popup.locator("text=auto-lock").click();
    await popup.waitForTimeout(300);
    const option = popup.locator("[role='option' i], [role='menuitem' i], .peach-select-option").first();
    await option.click();
    await popup.waitForTimeout(300);
    const dropdown = popup.locator("[role='listbox' i], [role='menu' i], .peach-select-dropdown");
    const isHidden = await dropdown.isHidden().catch(() => true);
    expect(isHidden).toBeTruthy();
    await ctx.close();
  });

  test("AUL08 - auto-lock selection persists after reopen", async () => {
    const { popup } = await setupVault(ctx);
    await popup.locator(".peach-icon-btn[aria-label='Settings']").click();
    await popup.waitForTimeout(500);
    await popup.locator("text=auto-lock").click();
    await popup.waitForTimeout(300);
    const options = popup.locator("[role='option' i], [role='menuitem' i], .peach-select-option");
    await options.nth(2).click();
    await popup.waitForTimeout(300);
    await popup.keyboard.press("Escape");
    await popup.waitForTimeout(200);
    await popup.locator(".peach-icon-btn[aria-label='Settings']").click();
    await popup.waitForTimeout(500);
    await popup.locator("text=auto-lock").click();
    await popup.waitForTimeout(300);
    const selectedOption = popup.locator("[role='option' i][aria-selected='true'], .peach-select-option.is-selected").first();
    const hasSelected = await selectedOption.isVisible({ timeout: 2000 }).catch(() => false);
    await ctx.close();
  });
});

test.describe("Clipboard Clear Settings", () => {
  let ctx: BrowserContext;
  test.afterEach(async () => { await ctx.close(); });
  test.beforeEach(async () => { ctx = await makeContext(); });

  test("ACP01 - clipboard clear setting exists", async () => {
    const { popup } = await setupVault(ctx);
    await popup.locator(".peach-icon-btn[aria-label='Settings']").click();
    await popup.waitForTimeout(500);
    await expect(popup.locator("text=clipboard clear")).toBeVisible();
    await ctx.close();
  });

  test("ACP02 - clipboard clear options: 30 seconds", async () => {
    const { popup } = await setupVault(ctx);
    await popup.locator(".peach-icon-btn[aria-label='Settings']").click();
    await popup.waitForTimeout(500);
    await popup.locator("text=clipboard clear").click();
    await popup.waitForTimeout(300);
    const options = popup.locator("[role='option' i], [role='menuitem' i]");
    const optionTexts = await options.allTextContents();
    const has30s = optionTexts.some((t: string) => t.includes("30") || t.includes("30s"));
    expect(has30s).toBeTruthy();
    await ctx.close();
  });

  test("ACP03 - clipboard clear options: 60 seconds", async () => {
    const { popup } = await setupVault(ctx);
    await popup.locator(".peach-icon-btn[aria-label='Settings']").click();
    await popup.waitForTimeout(500);
    await popup.locator("text=clipboard clear").click();
    await popup.waitForTimeout(300);
    const options = popup.locator("[role='option' i], [role='menuitem' i]");
    const optionTexts = await options.allTextContents();
    const has60s = optionTexts.some((t: string) => t.includes("60") || t.includes("1 min"));
    expect(has60s).toBeTruthy();
    await ctx.close();
  });

  test("ACP04 - clipboard clear options: 90 seconds", async () => {
    const { popup } = await setupVault(ctx);
    await popup.locator(".peach-icon-btn[aria-label='Settings']").click();
    await popup.waitForTimeout(500);
    await popup.locator("text=clipboard clear").click();
    await popup.waitForTimeout(300);
    const options = popup.locator("[role='option' i], [role='menuitem' i]");
    const optionTexts = await options.allTextContents();
    const has90s = optionTexts.some((t: string) => t.includes("90"));
    expect(has90s).toBeTruthy();
    await ctx.close();
  });

  test("ACP05 - clipboard clear options: never", async () => {
    const { popup } = await setupVault(ctx);
    await popup.locator(".peach-icon-btn[aria-label='Settings']").click();
    await popup.waitForTimeout(500);
    await popup.locator("text=clipboard clear").click();
    await popup.waitForTimeout(300);
    const options = popup.locator("[role='option' i], [role='menuitem' i]");
    const optionTexts = await options.allTextContents();
    const hasNever = optionTexts.some((t: string) => t.toLowerCase().includes("never"));
    expect(hasNever).toBeTruthy();
    await ctx.close();
  });

  test("ACP06 - clipboard clear persists after close", async () => {
    const { popup } = await setupVault(ctx);
    await popup.locator(".peach-icon-btn[aria-label='Settings']").click();
    await popup.waitForTimeout(500);
    await popup.locator("text=clipboard clear").click();
    await popup.waitForTimeout(300);
    const options = popup.locator("[role='option' i], [role='menuitem' i]");
    await options.first().click();
    await popup.waitForTimeout(300);
    await popup.keyboard.press("Escape");
    await popup.waitForTimeout(200);
    const counter = popup.locator(".peach-search-counter");
    const text = await counter.textContent();
    expect(text).toBeTruthy();
    await ctx.close();
  });
});

test.describe("Lock on Close", () => {
  let ctx: BrowserContext;
  test.afterEach(async () => { await ctx.close(); });
  test.beforeEach(async () => { ctx = await makeContext(); });

  test("ALC01 - lock on close setting exists", async () => {
    const { popup } = await setupVault(ctx);
    await popup.locator(".peach-icon-btn[aria-label='Settings']").click();
    await popup.waitForTimeout(500);
    await expect(popup.locator("text=lock on close")).toBeVisible();
    await ctx.close();
  });

  test("ALC02 - lock on close is a toggle switch", async () => {
    const { popup } = await setupVault(ctx);
    await popup.locator(".peach-icon-btn[aria-label='Settings']").click();
    await popup.waitForTimeout(500);
    const toggle = popup.locator("text=lock on close").locator("..").locator("[role='switch' i], [type='checkbox']").first();
    await expect(toggle).toBeVisible();
    await ctx.close();
  });

  test("ALC03 - lock on close toggle is off by default", async () => {
    const { popup } = await setupVault(ctx);
    await popup.locator(".peach-icon-btn[aria-label='Settings']").click();
    await popup.waitForTimeout(500);
    const toggle = popup.locator("text=lock on close").locator("..").locator("[role='switch' i]").first();
    const isChecked = await toggle.getAttribute("aria-checked");
    expect(isChecked).not.toBe("true");
    await ctx.close();
  });

  test("ALC04 - enabling lock on close changes toggle state", async () => {
    const { popup } = await setupVault(ctx);
    await popup.locator(".peach-icon-btn[aria-label='Settings']").click();
    await popup.waitForTimeout(500);
    const toggle = popup.locator("text=lock on close").locator("..").locator("[role='switch' i]").first();
    await toggle.click();
    await popup.waitForTimeout(300);
    const isChecked = await toggle.getAttribute("aria-checked");
    expect(isChecked).toBe("true");
    await ctx.close();
  });

  test("ALC05 - lock on close persists after settings close", async () => {
    const { popup } = await setupVault(ctx);
    await popup.locator(".peach-icon-btn[aria-label='Settings']").click();
    await popup.waitForTimeout(500);
    const toggle = popup.locator("text=lock on close").locator("..").locator("[role='switch' i]").first();
    await toggle.click();
    await popup.waitForTimeout(300);
    await popup.keyboard.press("Escape");
    await popup.waitForTimeout(200);
    await popup.locator(".peach-icon-btn[aria-label='Settings']").click();
    await popup.waitForTimeout(500);
    const toggle2 = popup.locator("text=lock on close").locator("..").locator("[role='switch' i]").first();
    const isChecked = await toggle2.getAttribute("aria-checked");
    expect(isChecked).toBe("true");
    await ctx.close();
  });
});

test.describe("Breach Monitoring Settings", () => {
  let ctx: BrowserContext;
  test.afterEach(async () => { await ctx.close(); });
  test.beforeEach(async () => { ctx = await makeContext(); });

  test("ABM01 - breach monitoring setting exists", async () => {
    const { popup } = await setupVault(ctx);
    await popup.locator(".peach-icon-btn[aria-label='Settings']").click();
    await popup.waitForTimeout(500);
    await expect(popup.locator("text=breach monitoring")).toBeVisible();
    await ctx.close();
  });

  test("ABM02 - breach monitoring is a toggle switch", async () => {
    const { popup } = await setupVault(ctx);
    await popup.locator(".peach-icon-btn[aria-label='Settings']").click();
    await popup.waitForTimeout(500);
    const toggle = popup.locator("text=breach monitoring").locator("..").locator("[role='switch' i]").first();
    await expect(toggle).toBeVisible();
    await ctx.close();
  });

  test("ABM03 - breach monitoring toggle changes state", async () => {
    const { popup } = await setupVault(ctx);
    await popup.locator(".peach-icon-btn[aria-label='Settings']").click();
    await popup.waitForTimeout(500);
    const toggle = popup.locator("text=breach monitoring").locator("..").locator("[role='switch' i]").first();
    const beforeState = await toggle.getAttribute("aria-checked");
    await toggle.click();
    await popup.waitForTimeout(300);
    const afterState = await toggle.getAttribute("aria-checked");
    expect(beforeState).not.toEqual(afterState);
    await ctx.close();
  });

  test("ABM04 - breach monitoring persists after close", async () => {
    const { popup } = await setupVault(ctx);
    await popup.locator(".peach-icon-btn[aria-label='Settings']").click();
    await popup.waitForTimeout(500);
    const toggle = popup.locator("text=breach monitoring").locator("..").locator("[role='switch' i]").first();
    await toggle.click();
    await popup.waitForTimeout(300);
    await popup.keyboard.press("Escape");
    await popup.waitForTimeout(200);
    await popup.locator(".peach-icon-btn[aria-label='Settings']").click();
    await popup.waitForTimeout(500);
    const toggle2 = popup.locator("text=breach monitoring").locator("..").locator("[role='switch' i]").first();
    const isChecked = await toggle2.getAttribute("aria-checked");
    expect(isChecked).toBe("true");
    await ctx.close();
  });
});

test.describe("Accent Color Settings", () => {
  let ctx: BrowserContext;
  test.afterEach(async () => { await ctx.close(); });
  test.beforeEach(async () => { ctx = await makeContext(); });

  test("AAC01 - accent color section exists in settings", async () => {
    const { popup } = await setupVault(ctx);
    await popup.locator(".peach-icon-btn[aria-label='Settings']").click();
    await popup.waitForTimeout(500);
    const swatches = popup.locator(".peach-swatch");
    const count = await swatches.count();
    expect(count).toBeGreaterThan(0);
    await ctx.close();
  });

  test("AAC02 - all swatches are clickable", async () => {
    const { popup } = await setupVault(ctx);
    await popup.locator(".peach-icon-btn[aria-label='Settings']").click();
    await popup.waitForTimeout(500);
    const swatches = popup.locator(".peach-swatch");
    const count = await swatches.count();
    expect(count).toBeGreaterThanOrEqual(5);
    for (let i = 0; i < count; i++) {
      await swatches.nth(i).click();
      await popup.waitForTimeout(100);
    }
    await ctx.close();
  });

  test("AAC03 - selected swatch shows active state", async () => {
    const { popup } = await setupVault(ctx);
    await popup.locator(".peach-icon-btn[aria-label='Settings']").click();
    await popup.waitForTimeout(500);
    const swatch = popup.locator(".peach-swatch").nth(3);
    await swatch.click();
    await popup.waitForTimeout(200);
    const isActive = await swatch.evaluate((el: Element) => el.classList.contains("is-active"));
    expect(isActive).toBeTruthy();
    await ctx.close();
  });

  test("AAC04 - only one swatch active at a time", async () => {
    const { popup } = await setupVault(ctx);
    await popup.locator(".peach-icon-btn[aria-label='Settings']").click();
    await popup.waitForTimeout(500);
    await popup.locator(".peach-swatch").nth(0).click();
    await popup.waitForTimeout(200);
    await popup.locator(".peach-swatch").nth(2).click();
    await popup.waitForTimeout(200);
    const activeSwatches = popup.locator(".peach-swatch.is-active");
    const count = await activeSwatches.count();
    expect(count).toBe(1);
    await ctx.close();
  });

  test("AAC05 - accent color persists after settings close", async () => {
    const { popup } = await setupVault(ctx);
    await popup.locator(".peach-icon-btn[aria-label='Settings']").click();
    await popup.waitForTimeout(500);
    await popup.locator(".peach-swatch").nth(4).click();
    await popup.waitForTimeout(200);
    await popup.keyboard.press("Escape");
    await popup.waitForTimeout(200);
    await popup.locator(".peach-icon-btn[aria-label='Settings']").click();
    await popup.waitForTimeout(500);
    const activeSwatch = popup.locator(".peach-swatch.is-active");
    const count = await activeSwatch.count();
    expect(count).toBe(1);
    await ctx.close();
  });
});

test.describe("Entry Count & Vault Info", () => {
  let ctx: BrowserContext;
  test.afterEach(async () => { await ctx.close(); });
  test.beforeEach(async () => { ctx = await makeContext(); });

  test("AEV01 - settings shows entry count", async () => {
    const { popup } = await setupVault(ctx);
    await popup.locator(".peach-icon-btn[aria-label='Settings']").click();
    await popup.waitForTimeout(500);
    const entriesText = popup.locator("text=entries").first();
    await expect(entriesText).toBeVisible();
    await ctx.close();
  });

  test("AEV02 - entry count updates when entries added", async () => {
    const { popup } = await setupVault(ctx);
    await popup.locator(".peach-icon-btn[aria-label='Settings']").click();
    await popup.waitForTimeout(500);
    const initialCount = await popup.locator("text=entries").textContent();
    await popup.keyboard.press("Escape");
    await popup.waitForTimeout(200);
    await popup.locator('input[placeholder="search vault..."]').click();
    await popup.getByRole("button", { name: /new entry/i }).click();
    await popup.locator(".peach-new-name-input").fill("CountUpdate");
    await popup.locator('input[placeholder="domain.com"]').fill("https://count.com");
    await popup.locator('input[placeholder="username or email"]').fill("count@user.com");
    await popup.locator(".peach-new-field-input[placeholder='password']").fill("pass");
    await popup.getByRole("button", { name: /create/i }).click();
    await popup.waitForTimeout(1500);
    await popup.locator(".peach-icon-btn[aria-label='Settings']").click();
    await popup.waitForTimeout(500);
    const newCount = await popup.locator("text=entries").textContent();
    expect(newCount).not.toEqual(initialCount);
    await ctx.close();
  });

  test("AEV03 - version number shows in settings", async () => {
    const { popup } = await setupVault(ctx);
    await popup.locator(".peach-icon-btn[aria-label='Settings']").click();
    await popup.waitForTimeout(500);
    const version = popup.locator("text=1.0.");
    const hasVersion = await version.isVisible({ timeout: 2000 }).catch(() => false);
    expect(hasVersion).toBeTruthy();
    await ctx.close();
  });
});

test.describe("Settings Navigation", () => {
  let ctx: BrowserContext;
  test.afterEach(async () => { await ctx.close(); });
  test.beforeEach(async () => { ctx = await makeContext(); });

  test("ASN01 - settings opens with gear icon", async () => {
    const { popup } = await setupVault(ctx);
    await popup.locator(".peach-icon-btn[aria-label='Settings']").click();
    await popup.waitForTimeout(500);
    const title = popup.locator(".peach-overlay-title, text=settings").first();
    await expect(title).toBeVisible();
    await ctx.close();
  });

  test("ASN02 - settings closes with back button", async () => {
    const { popup } = await setupVault(ctx);
    await popup.locator(".peach-icon-btn[aria-label='Settings']").click();
    await popup.waitForTimeout(500);
    const backBtn = popup.locator("button[aria-label='Back']").first();
    await backBtn.click();
    await popup.waitForTimeout(300);
    const overlay = popup.locator(".peach-overlay-view");
    const isHidden = await overlay.isHidden().catch(() => true);
    expect(isHidden).toBeTruthy();
    await ctx.close();
  });

  test("ASN03 - settings closes with escape key", async () => {
    const { popup } = await setupVault(ctx);
    await popup.locator(".peach-icon-btn[aria-label='Settings']").click();
    await popup.waitForTimeout(500);
    await popup.keyboard.press("Escape");
    await popup.waitForTimeout(300);
    const overlay = popup.locator(".peach-overlay-view");
    const isHidden = await overlay.isHidden().catch(() => true);
    expect(isHidden).toBeTruthy();
    await ctx.close();
  });

  test("ASN04 - lock vault button visible in settings", async () => {
    const { popup } = await setupVault(ctx);
    await popup.locator(".peach-icon-btn[aria-label='Settings']").click();
    await popup.waitForTimeout(500);
    const lockBtn = popup.locator("text=lock vault").first();
    await expect(lockBtn).toBeVisible();
    await ctx.close();
  });

  test("ASN05 - lock vault returns to lock screen", async () => {
    const { popup } = await setupVault(ctx);
    await popup.locator(".peach-icon-btn[aria-label='Settings']").click();
    await popup.waitForTimeout(500);
    await popup.locator("text=lock vault").click();
    await popup.waitForTimeout(1500);
    const pwField = popup.locator("#master-password");
    await expect(pwField).toBeVisible({ timeout: 5000 });
    await ctx.close();
  });

  test("ASN06 - export button visible in settings", async () => {
    const { popup } = await setupVault(ctx);
    await popup.locator(".peach-icon-btn[aria-label='Settings']").click();
    await popup.waitForTimeout(500);
    const exportBtn = popup.getByRole("button", { name: /export/i }).first();
    await expect(exportBtn).toBeVisible();
    await ctx.close();
  });

  test("ASN07 - import button visible in settings", async () => {
    const { popup } = await setupVault(ctx);
    await popup.locator(".peach-icon-btn[aria-label='Settings']").click();
    await popup.waitForTimeout(500);
    const importBtn = popup.getByRole("button", { name: /import/i }).first();
    await expect(importBtn).toBeVisible();
    await ctx.close();
  });

  test("ASN08 - generator button visible in settings", async () => {
    const { popup } = await setupVault(ctx);
    await popup.locator(".peach-icon-btn[aria-label='Settings']").click();
    await popup.waitForTimeout(500);
    const genBtn = popup.getByRole("button", { name: /generator/i }).first();
    await expect(genBtn).toBeVisible();
    await ctx.close();
  });
});

test.describe("Settings Persistence", () => {
  let ctx: BrowserContext;
  test.afterEach(async () => { await ctx.close(); });
  test.beforeEach(async () => { ctx = await makeContext(); });

  test("ASP01 - all settings persist after vault lock/unlock", async () => {
    const { popup } = await setupVault(ctx);
    await popup.locator(".peach-icon-btn[aria-label='Settings']").click();
    await popup.waitForTimeout(500);
    const swatch = popup.locator(".peach-swatch").nth(5);
    await swatch.click();
    await popup.waitForTimeout(200);
    await popup.keyboard.press("Escape");
    await popup.waitForTimeout(200);
    const lockBtn = popup.locator(".peach-lock-btn[aria-label='Lock vault']");
    await lockBtn.click();
    await popup.waitForTimeout(1500);
    await popup.locator("#master-password").fill("password123");
    await popup.getByRole("button", { name: /unlock/i }).click();
    await popup.waitForTimeout(2000);
    await popup.locator(".peach-icon-btn[aria-label='Settings']").click();
    await popup.waitForTimeout(500);
    const activeSwatch = popup.locator(".peach-swatch.is-active");
    const count = await activeSwatch.count();
    expect(count).toBe(1);
    await ctx.close();
  });

  test("ASP02 - accent color persists after new entry", async () => {
    const { popup } = await setupVault(ctx);
    await popup.locator(".peach-icon-btn[aria-label='Settings']").click();
    await popup.waitForTimeout(500);
    await popup.locator(".peach-swatch").nth(2).click();
    await popup.waitForTimeout(200);
    await popup.keyboard.press("Escape");
    await popup.waitForTimeout(200);
    await popup.locator('input[placeholder="search vault..."]').click();
    await popup.getByRole("button", { name: /new entry/i }).click();
    await popup.locator(".peach-new-name-input").fill("PersistTest");
    await popup.locator('input[placeholder="domain.com"]').fill("https://persist.com");
    await popup.locator('input[placeholder="username or email"]').fill("persist@user.com");
    await popup.locator(".peach-new-field-input[placeholder='password']").fill("pass");
    await popup.getByRole("button", { name: /create/i }).click();
    await popup.waitForTimeout(1500);
    await popup.locator(".peach-icon-btn[aria-label='Settings']").click();
    await popup.waitForTimeout(500);
    const activeSwatch = popup.locator(".peach-swatch.is-active");
    const count = await activeSwatch.count();
    expect(count).toBe(1);
    await ctx.close();
  });

  test("ASP03 - toggle settings persist after page navigation", async () => {
    const { popup } = await setupVault(ctx);
    await popup.locator(".peach-icon-btn[aria-label='Settings']").click();
    await popup.waitForTimeout(500);
    const lockToggle = popup.locator("text=lock on close").locator("..").locator("[role='switch' i]").first();
    await lockToggle.click();
    await popup.waitForTimeout(200);
    await popup.keyboard.press("Escape");
    await popup.waitForTimeout(200);
    await popup.locator(".peach-entry-name-button").first().click();
    await popup.waitForTimeout(500);
    await popup.locator("button[aria-label='Back']").first().click();
    await popup.waitForTimeout(300);
    await popup.locator(".peach-icon-btn[aria-label='Settings']").click();
    await popup.waitForTimeout(500);
    const isChecked = await lockToggle.getAttribute("aria-checked");
    expect(isChecked).toBe("true");
    await ctx.close();
  });
});