import { expect, test, type Page } from "@playwright/test";

async function setEditor(page: Page, testId: string, value: string) {
  await page.getByTestId(testId).locator(".cm-content").fill(value);
}

async function waitForSyntax(page: Page) {
  await expect(
    page.getByRole("button", { name: "Run", exact: true }),
  ).toBeEnabled({ timeout: 15_000 });
}

test("real ECMAScript workers validate, confirm and apply an exact formatter candidate", async ({
  page,
}) => {
  const pageErrors: string[] = [];
  page.on("pageerror", (error) => pageErrors.push(error.message));
  await page.goto("./");
  await page.getByLabel("Live").uncheck();
  await page.getByRole("checkbox", { name: "Scan all" }).check();
  await setEditor(page, "editor-regular-expression-pattern", "a/b");
  await setEditor(page, "editor-test-text", "a/b a/b");
  await waitForSyntax(page);
  await page.getByRole("button", { name: "Run", exact: true }).click();
  await expect(page.locator(".run-status")).toHaveClass(/status-ready/u, {
    timeout: 15_000,
  });

  await page.getByRole("button", { name: "Unit tests", exact: true }).click();
  await page.getByRole("button", { name: "Add current result" }).click();
  await expect(page.locator(".test-list li")).toHaveCount(1);

  await page.getByRole("button", { name: "Format", exact: true }).click();
  const dialog = page.getByRole("dialog", {
    name: "Format pattern",
  });
  await expect(dialog).toBeVisible();
  await expect(dialog).toBeInViewport();
  await expect(dialog.getByTestId("formatted-pattern-preview")).toHaveText(
    "a\\/b",
  );
  await dialog
    .getByRole("button", { name: "Validate exact snapshots" })
    .click();

  await expect(dialog.locator(".formatter-status")).toContainText(
    "All completed safety gates retained the same observable behavior.",
    { timeout: 20_000 },
  );
  await expect(dialog).toContainText("Native ECMAScript RegExp");
  await expect(dialog).toContainText("1 / 1 applicable");
  await expect(
    dialog.getByRole("checkbox", {
      name: /I understand that this bounded validation/u,
    }),
  ).toBeEnabled();
  await expect(
    dialog.getByRole("button", { name: "Apply formatted pattern" }),
  ).toBeDisabled();
  await dialog
    .getByRole("checkbox", {
      name: /I understand that this bounded validation/u,
    })
    .check();
  await dialog.getByRole("button", { name: "Apply formatted pattern" }).click();

  await expect(dialog).not.toBeVisible();
  await expect(
    page
      .getByTestId("editor-regular-expression-pattern")
      .locator(".cm-content"),
  ).toHaveText("a\\/b");
  await page.getByRole("button", { name: "Match", exact: true }).click();
  await waitForSyntax(page);
  await page.getByRole("button", { name: "Run", exact: true }).click();
  await expect(page.locator(".run-status")).toContainText("2 matches", {
    timeout: 15_000,
  });
  expect(pageErrors).toEqual([]);
});

test("PCRE2 formatter reports unavailable without reinterpreting syntax", async ({
  page,
}) => {
  await page.goto("./");
  await page.getByLabel("Live").uncheck();
  await page.getByRole("combobox", { name: "Flavour" }).selectOption("pcre2");
  await waitForSyntax(page);
  await page.getByRole("button", { name: "Format", exact: true }).click();

  const dialog = page.getByRole("dialog", {
    name: "Format pattern",
  });
  await expect(dialog).toContainText("currently available only for ECMAScript");
  await expect(
    dialog.getByRole("button", { name: "Validate exact snapshots" }),
  ).toHaveCount(0);
});