import { expect, test, type Page } from "@playwright/test";
import { readFile } from "node:fs/promises";
import { unzipSync, strFromU8 } from "fflate";

const ORIGIN = "http://127.0.0.1:4202";
async function watchLocalOnly(page: Page) {
  const external: string[] = [];
  await page.route("**/*", async (route) => {
    const url = new URL(route.request().url());
    if (url.origin !== ORIGIN) {
      external.push(url.href);
      await route.abort();
    } else await route.continue();
  });
  return external;
}

test("runs at a nested path, stays local and uses the shared width", async ({
  page,
}) => {
  await page.setViewportSize({ width: 1800, height: 1000 });
  const external = await watchLocalOnly(page);
  await page.goto("/deep/nested/label/");
  await expect(
    page.getByRole("heading", { name: "Label Tools" }),
  ).toBeVisible();
  await expect(page.getByText("2 labels · 1 page")).toBeVisible();
  expect(external).toEqual([]);
  expect(
    await page
      .locator(".toolbox-shell__main")
      .evaluate((node) => getComputedStyle(node).width),
  ).toBe("1440px");
});

test("merges inert CSV and exports vector SVG and deterministic ZIP", async ({
  page,
}) => {
  await page.goto("/deep/nested/label/");
  await page
    .getByTestId("merge-data")
    .fill(
      "name,subtitle,address,code\n<script>alert(1)</script>,Local,No upload,SAFE-1",
    );
  await page.getByRole("button", { name: "Parse and keep rows" }).click();
  await expect(page.getByText(/1 data row parsed locally/iu)).toBeVisible();
  const svgDownload = page.waitForEvent("download");
  await page.getByRole("button", { name: "Current SVG" }).click();
  const svgPath = await (await svgDownload).path();
  const svg = await readFile(svgPath!, "utf8");
  expect(svg).toContain("&lt;script&gt;alert");
  expect(svg).not.toContain("<script>");

  const zipDownload = page.waitForEvent("download");
  await page.getByRole("button", { name: "All SVG + report ZIP" }).click();
  const zipPath = await (await zipDownload).path();
  const files = unzipSync(new Uint8Array(await readFile(zipPath!)));
  expect(Object.keys(files)).toEqual([
    "label-sheet-001.svg",
    "merge-report.json",
  ]);
  expect(JSON.parse(strFromU8(files["merge-report.json"]!))).toMatchObject({
    application: "Label Tools 0.1.0",
    labels: 2,
  });
});

test("exports a local PDF with an explicit raster boundary", async ({
  page,
}) => {
  await page.goto("/deep/nested/label/");
  const pending = page.waitForEvent("download", { timeout: 120_000 });
  await page.getByRole("button", { name: "PDF (144 DPI)" }).click();
  const download = await pending;
  expect(download.suggestedFilename()).toBe("label-tools-merge.pdf");
  const bytes = await readFile((await download.path())!);
  expect(bytes.subarray(0, 5).toString()).toBe("%PDF-");
  await expect(page.getByRole("status")).toContainText("PDF page");
});

test("integrates help, dark theme, PWA identity and hardened headers", async ({
  page,
  request,
}) => {
  await page.goto("/deep/nested/label/");
  await page.getByRole("button", { name: "Help" }).click();
  await expect(
    page.getByRole("dialog", { name: "About Label Tools" }),
  ).toContainText("calibration sheet");
  await page.keyboard.press("Escape");
  await page.getByRole("button", { name: "Personalize" }).click();
  await page.getByRole("button", { name: "Dark" }).click();
  await expect(page.locator(".toolbox-shell").first()).toHaveAttribute(
    "data-toolbox-theme",
    "dark",
  );
  expect(
    await page.evaluate(async () =>
      Boolean(await navigator.serviceWorker.ready),
    ),
  ).toBe(true);
  const index = await request.get("/deep/nested/label/");
  expect(index.headers()["content-security-policy"]).toContain(
    "connect-src 'self'",
  );
  expect(await index.text()).not.toMatch(/\b(?:src|href)=["']\//u);
  const manifest = await request.get("/deep/nested/label/toolbox-app.json");
  await expect(manifest.json()).resolves.toMatchObject({
    id: "de.add-ideas.label-tools",
    version: "0.1.0",
    privacy: { processing: "local", telemetry: false },
  });
});