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

for (const mode of ["visual", "source"] as const) {
  test(`rich-text ${mode} editor stays clean until a real content edit`, async ({ page }) => {
    const pageErrors: string[] = [];
    page.on("pageerror", (error) => pageErrors.push(error.message));
    await page.goto(`/?wysiwyg-lifecycle&mode=${mode}`);
    const changeCount = page.getByTestId("wysiwyg-change-count");
    const value = page.getByTestId("wysiwyg-controlled-value");
    const editor = mode === "visual"
      ? page.locator(".wysiwyg-prosemirror")
      : page.locator(".wysiwyg-editor-source");
    const original = mode === "visual"
      ? "<p>Legacy <i>template</i></p>"
      : '<table style="width: 100%"><tbody><tr><td>Legacy template</td></tr></tbody></table>';

    await expect(editor).toBeVisible();
    // <i> is supported visually but normalized to <em> inside Tiptap. That
    // normalization must not leak into controlled content without a real edit.
    if (mode === "visual") await expect(editor.locator("em")).toHaveText("template");
    await expect(value).toHaveText(original);
    await expect(changeCount).toHaveText("0");

    await page.getByRole("button", { name: "Toggle read-only", exact: true }).click();
    if (mode === "visual") await expect(editor).toHaveAttribute("contenteditable", "false");
    else await expect(editor).toBeDisabled();
    await expect(value).toHaveText(original);
    await expect(changeCount).toHaveText("0");
    await page.getByRole("button", { name: "Toggle read-only", exact: true }).click();

    await page.getByRole("button", { name: "Load another value", exact: true }).click();
    await expect(value).toHaveText(original.replace("Legacy", "Reloaded"));
    await expect(changeCount).toHaveText("0");

    await page.getByRole("button", { name: "Toggle editor mount", exact: true }).click();
    await expect(editor).toHaveCount(0);
    await page.getByRole("button", { name: "Toggle editor mount", exact: true }).click();
    await expect(editor).toBeVisible();
    await expect(value).toHaveText(original.replace("Legacy", "Reloaded"));
    await expect(changeCount).toHaveText("0");

    if (mode === "visual") {
      await page.getByRole("tab", { name: "Source fixture mode", exact: true }).click();
      await expect(page.locator(".wysiwyg-editor-source")).toHaveValue(original.replace("Legacy", "Reloaded"));
      await expect(changeCount).toHaveText("0");
      await page.getByRole("tab", { name: "Visual fixture mode", exact: true }).click();
      await expect(editor).toBeVisible();
      await expect(changeCount).toHaveText("0");
    }

    await editor.fill(mode === "source" ? "<p>Edited content</p>" : "Edited content");
    await expect.poll(async () => Number(await changeCount.textContent())).toBeGreaterThan(0);
    await expect(value).toContainText("Edited content");
    expect(pageErrors).toEqual([]);
  });
}