import { test, 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 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 makeContext() {
  const { chromium } = await import("playwright");
  const userDataDir = join(os.tmpdir(), `peach-diag-${Date.now()}`);
  await fs.mkdir(userDataDir, { recursive: true });
  return chromium.launchPersistentContext(userDataDir, {
    headless: false,
    args: [`--load-extension=${EXTENSION_PATH}`, `--disable-extensions-except=${EXTENSION_PATH}`],
  });
}

test("visual check - extension popup renders correctly", async () => {
  const ctx = await makeContext();
  const extId = await waitForSW(ctx);

  const popup = await ctx.newPage();
  await popup.goto(`chrome-extension://${extId}/src/popup/index.html`);
  await popup.waitForTimeout(3000);

  await popup.screenshot({ path: "/tmp/peach-popup-lock.png", fullPage: false });

  const headline = popup.locator(".peach-unlock-headline, .peach-onboarding-headline").first();
  const headlineText = await headline.textContent().catch(() => "not found");
  console.log("Headline:", headlineText);

  await ctx.close();
});