import { test, expect, type BrowserContext, type Page } from "@playwright/test";
import { addEntry, loadPopup, makeContext, openSettings, setupVault } from "./helpers/vault";

// Real vault creation runs Argon2id (≈12s with the recovery confirmation).
test.describe.configure({ timeout: 90_000 });

/** Settings is a card deck — only the active card's rows are on screen. */
async function openCard(popup: Page, id: string) {
  await popup.locator(`[data-settings-card-id="${id}"]`).click();
  await expect(popup.locator(`[data-settings-card-id="${id}"][data-active="true"]`)).toBeVisible();
}

test.describe("Settings & Appearance", () => {
  let ctx: BrowserContext;
  test.afterEach(async () => { await ctx.close(); });
  test.beforeEach(async () => { ctx = await makeContext("peach-settings"); });

  test("ST01 - settings panel opens from the chrome bar", async () => {
    const { popup } = await setupVault(ctx);
    await openSettings(popup);
    await expect(popup.locator(".stk-mast-title")).toHaveText("Settings");
  });

  test("ST02 - the deck carries all seven cards", async () => {
    const { popup } = await setupVault(ctx);
    await openSettings(popup);
    await expect(popup.locator("[data-settings-card-id]")).toHaveCount(7);
    await expect(popup.locator(".stk-mast-counter")).toHaveText("1 / 7");
  });

  test("ST03 - protection card carries lock-on-close, auto-lock and breach monitoring", async () => {
    const { popup } = await setupVault(ctx);
    await openSettings(popup);
    await openCard(popup, "protection");
    for (const label of ["Lock on close", "Auto-lock after", "Breach monitoring"]) {
      await expect(popup.locator(".peach-settings-row", { hasText: label })).toHaveCount(1);
    }
  });

  test("ST04 - the vault card reports the entry count", async () => {
    const { popup } = await setupVault(ctx);
    await addEntry(popup, { title: "CountMe", url: "https://count.test", username: "u", password: "p" });
    await openSettings(popup);
    await expect(
      popup.locator('[data-settings-card-id="vault"]'),
    ).toContainText(/\d+ (entry|entries)/);
  });

  test("ST05 - accent swatches are all clickable", async () => {
    const { popup } = await setupVault(ctx);
    await openSettings(popup);
    await openCard(popup, "appearance");
    const swatches = popup.locator(".peach-swatch");
    const count = await swatches.count();
    expect(count).toBeGreaterThanOrEqual(6);
    for (let i = 0; i < count; i++) {
      await swatches.nth(i).click();
      await popup.waitForTimeout(100);
    }
  });

  test("ST06 - import passwords opens the import view", async () => {
    const { popup } = await setupVault(ctx);
    await openSettings(popup);
    await openCard(popup, "vault");
    await popup.locator(".peach-settings-row", { hasText: "Import passwords" }).getByRole("button").click();
    await expect(popup.locator(".peach-overlay-title")).toHaveText(/import/i, { timeout: 10000 });
  });

  test("ST07 - export backup opens the export view", async () => {
    const { popup } = await setupVault(ctx);
    await openSettings(popup);
    await openCard(popup, "vault");
    await popup.locator(".peach-settings-row", { hasText: "Export backup" }).getByRole("button").click();
    await expect(popup.locator(".peach-overlay-title")).toHaveText(/export/i, { timeout: 10000 });
  });

  test("ST08 - onboarding shows the peach wordmark", async () => {
    const { popup } = await loadPopup(ctx);
    await expect(popup.locator(".peach-wordmark-wrap").first()).toBeVisible();
    await expect(popup.locator(".peach-onboarding-card-headline")).toBeVisible();
  });
});