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

/**
 * Playwright spec for https://hizbu.com/regex/
 * Written against the page source (CodeMirror 6 x2, tabs, #fullscreen checkbox).
 *
 * Requires Playwright >= 1.45 (for the "ControlOrMeta" modifier) and network access
 * to esm.sh (the page loads CodeMirror from there).
 *
 * Reading cursor/selection/doc state uses CodeMirror's EditorView, found through the
 * DOM node (`cmView` / `cmTile` property). If a CodeMirror upgrade ever moves that
 * property, only the `__cmView` init script below needs updating.
 */
const URL = "http://localhost:4000/regex/";

const KEY = {
  patterns: "regex_patterns",
  docs: "regex_documents",
  titles: "regex_tab_titles",
  active: "regex_active_tab",
};
const DEFAULT_TITLES = ["Emails & IDs", "Code Snippet", "Server Logs"];
const NEW_TAB_TEXT = "// Type or paste text here...\n";

// ---------- locators ----------
const topEditor = (p: Page) => p.locator("#regex-editor .cm-content");
const mainEditor = (p: Page) => p.locator("#cm6-editor .cm-content");
const tabs = (p: Page) => p.locator('#tab-bar [role="tab"]');
const tabLabel = (p: Page, i: number) =>
  tabs(p).nth(i).locator('span[title="Double-click to rename"]');
const tabClose = (p: Page, i: number) => tabs(p).nth(i).locator(".tab-close");
const addTabBtn = (p: Page) => p.locator("#add-tab-btn");
const fullscreen = (p: Page) => p.locator("#fullscreen");
const matchTexts = (p: Page, n: number) =>
  p.locator(`#cm6-editor .cm-regex-match-${n}`).allTextContents();

// ---------- helpers ----------
const docText = (l: Locator): Promise<string> =>
  l.evaluate((el: any) => {
    try {
      return (window as any).__cmView(el).state.doc.toString();
    } catch {
      return [...el.querySelectorAll(".cm-line")]
        .map((x: any) => x.textContent)
        .join("\n");
    }
  });

const selection = (l: Locator): Promise<{ anchor: number; head: number }> =>
  l.evaluate((el: any) => {
    const s = (window as any).__cmView(el).state.selection.main;
    return { anchor: s.anchor, head: s.head };
  });

/** Focus the editor WITHOUT changing its selection (unlike click). */
const focusEditor = (l: Locator) =>
  l.evaluate((el: any) => (window as any).__cmView(el).focus());

const storage = (p: Page, key: string) =>
  p.evaluate((k) => localStorage.getItem(k), key);
const storageJson = async (p: Page, key: string) =>
  JSON.parse((await storage(p, key)) ?? "null");

async function waitReady(p: Page) {
  await expect(p.locator("#loading")).toHaveCount(0, { timeout: 30_000 });
  await expect(topEditor(p)).toBeVisible();
  await expect(mainEditor(p)).toBeVisible();
}

async function reload(p: Page) {
  await p.reload();
  await waitReady(p);
}

/** Replace the whole content of a CodeMirror editor by typing it. */
async function setDoc(p: Page, editor: Locator, lines: string[]) {
  await editor.click();
  await p.keyboard.press("ControlOrMeta+a");
  await p.keyboard.press("Backspace");
  for (let i = 0; i < lines.length; i++) {
    if (i > 0) await p.keyboard.press("Enter");
    if (lines[i]) await p.keyboard.type(lines[i]);
  }
}

/** Click a tab by its label (switches tab). */
const switchTo = (p: Page, i: number) => tabLabel(p, i).click();

async function redo(p: Page) {
  // CodeMirror historyKeymap: Mod-y = redo (Win/Linux), Mod-Shift-z = redo (Mac).
  // Ctrl+Shift+Z is avoided on purpose: on Linux Chromium it was observed to act as undo.
  const isMac = await p.evaluate(() => /Mac/i.test(navigator.platform));
  await p.keyboard.press(isMac ? "Meta+Shift+z" : "Control+y");
}

/** Close a tab; asserts the native confirm() text, then accepts or dismisses it. */
async function closeTab(
  p: Page,
  index: number,
  accept: boolean,
  expectedName?: string,
) {
  // window.confirm() blocks the page, so click() cannot resolve until the dialog is answered.
  // The handler therefore must be registered BEFORE the click and answer immediately.
  const seen: { type: string; message: string }[] = [];
  const handler = async (d: Dialog) => {
    seen.push({ type: d.type(), message: d.message() });
    await (accept ? d.accept() : d.dismiss());
  };
  p.on("dialog", handler);
  try {
    await tabClose(p, index).click();
  } finally {
    p.off("dialog", handler);
  }

  expect(seen, "expected exactly one confirm() dialog").toHaveLength(1);
  expect(seen[0].type).toBe("confirm");
  if (expectedName)
    expect(seen[0].message).toBe(
      `Are you sure you want to close "${expectedName}"?`,
    );
}

test.beforeEach(async ({ page }) => {
  test.setTimeout(60_000);
  // Exposes CodeMirror's EditorView for a .cm-content node (cmView in older, cmTile in newer builds)
  await page.addInitScript(() => {
    (window as any).__cmView = (el: any) => {
      const t = el.cmView ?? el.cmTile;
      const v = t?.view ?? t?.root?.view ?? t?.rootView?.view;
      if (!v)
        throw new Error(
          "Could not locate CodeMirror EditorView on .cm-content",
        );
      return v;
    };
  });
  await page.goto(URL);
  await page.evaluate(() => localStorage.clear());
  await reload(page);
});

// =====================================================================
// 0. initial state
// =====================================================================
test.describe("initial state", () => {
  test("loads default tabs, regexes and highlights", async ({ page }) => {
    await expect(tabs(page)).toHaveCount(3);
    await expect(tabs(page).nth(0)).toHaveClass(/active/);
    for (let i = 0; i < 3; i++)
      await expect(tabLabel(page, i)).toHaveText(DEFAULT_TITLES[i]);

    await expect(topEditor(page)).toContainText("[0-9]{4}-[0-9]{2}-[0-9]{2}");
    await expect
      .poll(() => matchTexts(page, 0))
      .toContain("support@example.com");
    await expect.poll(() => matchTexts(page, 1)).toContain("2026-10-17");
  });
});

// =====================================================================
// 1. every regex line is reflected in the lower editor
// =====================================================================
test.describe("regex lines -> lower editor highlights", () => {
  test("each line is reflected (highlight class N = line index % 5) as it is typed", async ({
    page,
  }) => {
    await setDoc(page, mainEditor(page), ["abc 123 DEF 456"]);
    await setDoc(page, topEditor(page), []); // clear default regexes, leaves top editor focused

    const lines = [
      { text: "/[a-z]+/", expected: ["abc"] },
      { text: "/[0-9]+/", expected: ["123", "456"] },
      { text: "/[A-Z]+/", expected: ["DEF"] },
      { text: "/zzz/", expected: [] },
      { text: "/ /", expected: [" ", " ", " "] },
    ];

    for (let i = 0; i < lines.length; i++) {
      if (i > 0) await page.keyboard.press("Enter");
      await page.keyboard.type(lines[i].text);

      // lower editor shows this line's matches with its colour class
      await expect.poll(() => matchTexts(page, i)).toEqual(lines[i].expected);
      // top editor line fringe uses the same colour index
      await expect(page.locator("#regex-editor .cm-line").nth(i)).toHaveClass(
        new RegExp(`cm-regex-line-${i % 5}`),
      );
      // all earlier lines are still reflected
      for (let j = 0; j < i; j++)
        expect(await matchTexts(page, j)).toEqual(lines[j].expected);
    }
    await expect
      .poll(() => storage(page, KEY.patterns))
      .toBe(lines.map((l) => l.text).join("\n"));
  });

  test("colour index wraps after 5 lines", async ({ page }) => {
    await setDoc(page, mainEditor(page), ["w0 w1 w2 w3 w4 w5"]);
    await setDoc(
      page,
      topEditor(page),
      [0, 1, 2, 3, 4, 5].map((i) => `/w${i}/`),
    );

    await expect.poll(() => matchTexts(page, 0)).toEqual(["w0", "w5"]);
    for (const n of [1, 2, 3, 4])
      expect(await matchTexts(page, n)).toEqual([`w${n}`]);
    await expect(page.locator("#regex-editor .cm-line").nth(5)).toHaveClass(
      /cm-regex-line-0/,
    );
  });

  test("blank lines are skipped but still consume a line index", async ({
    page,
  }) => {
    await setDoc(page, mainEditor(page), ["abc 123"]);
    await setDoc(page, topEditor(page), ["/abc/", "", "/123/"]);

    await expect.poll(() => matchTexts(page, 0)).toEqual(["abc"]);
    expect(await matchTexts(page, 1)).toEqual([]);
    expect(await matchTexts(page, 2)).toEqual(["123"]);
  });

  test("editing a line updates highlights; deleting all lines removes them", async ({
    page,
  }) => {
    await setDoc(page, mainEditor(page), ["cat dog bird"]);
    await setDoc(page, topEditor(page), ["/cat/"]);
    await expect.poll(() => matchTexts(page, 0)).toEqual(["cat"]);

    // replace line 0
    await page.keyboard.press("ControlOrMeta+Home");
    await page.keyboard.press("Shift+End");
    await page.keyboard.type("/dog/");
    await expect.poll(() => matchTexts(page, 0)).toEqual(["dog"]);

    // delete everything
    await page.keyboard.press("ControlOrMeta+a");
    await page.keyboard.press("Backspace");
    await expect(
      page.locator('#cm6-editor [class*="cm-regex-match-"]'),
    ).toHaveCount(0);
  });

  test("editing the lower editor text refreshes highlights", async ({
    page,
  }) => {
    await setDoc(page, topEditor(page), ["/foo/"]);
    await setDoc(page, mainEditor(page), ["nothing here"]);
    await expect(page.locator("#cm6-editor .cm-regex-match-0")).toHaveCount(0);

    await page.keyboard.type(" foo foo");
    await expect.poll(() => matchTexts(page, 0)).toEqual(["foo", "foo"]);
  });

  test("flags: g default, explicit flags honoured, no-g matches only once", async ({
    page,
  }) => {
    await setDoc(page, mainEditor(page), ["abc ABC abc"]);

    await setDoc(page, topEditor(page), ["/abc/gi"]);
    await expect.poll(() => matchTexts(page, 0)).toEqual(["abc", "ABC", "abc"]);

    await setDoc(page, topEditor(page), ["/abc/i"]); // no g -> first match only
    await expect.poll(() => matchTexts(page, 0)).toEqual(["abc"]);

    await setDoc(page, topEditor(page), ["abc"]); // no slashes -> raw pattern, g flag
    await expect.poll(() => matchTexts(page, 0)).toEqual(["abc", "abc"]);
  });

  test("invalid regex line is ignored without breaking other lines", async ({
    page,
  }) => {
    const errors: string[] = [];
    page.on("pageerror", (e) => errors.push(e.message));

    await setDoc(page, mainEditor(page), ["abc 123"]);
    await setDoc(page, topEditor(page), ["/(/", "/123/"]);

    await expect.poll(() => matchTexts(page, 1)).toEqual(["123"]);
    expect(await matchTexts(page, 0)).toEqual([]);
    expect(errors).toEqual([]);
  });

  test("top editor gets one fringe-coloured line per regex line", async ({
    page,
  }) => {
    await setDoc(page, topEditor(page), ["a", "b", "c", "d", "e", "f"]);
    const lines = page.locator("#regex-editor .cm-line");
    await expect(lines).toHaveCount(6);
    for (let i = 0; i < 6; i++)
      await expect(lines.nth(i)).toHaveClass(
        new RegExp(`cm-regex-line-${i % 5}`),
      );
  });
});

// =====================================================================
// 2. localStorage
// =====================================================================
test.describe("localStorage", () => {
  test("nothing is written until the first change, then all keys exist", async ({
    page,
  }) => {
    expect(await storage(page, KEY.docs)).toBeNull();
    await setDoc(page, topEditor(page), ["/x/"]);
    await expect.poll(() => storage(page, KEY.patterns)).toBe("/x/");
    expect(await storageJson(page, KEY.titles)).toEqual(DEFAULT_TITLES);
    expect(await storage(page, KEY.active)).toBe("0");
    expect((await storageJson(page, KEY.docs)).length).toBe(3);
  });

  test("regex editor text is stored and restored", async ({ page }) => {
    await setDoc(page, topEditor(page), ["/one/", "/two/g"]);
    await expect.poll(() => storage(page, KEY.patterns)).toBe("/one/\n/two/g");
    await reload(page);
    expect(await docText(topEditor(page))).toBe("/one/\n/two/g");
  });

  test("lower editor text is stored per tab and restored", async ({ page }) => {
    await setDoc(page, mainEditor(page), ["tab zero text"]);
    await switchTo(page, 1);
    await setDoc(page, mainEditor(page), ["tab one text"]);

    await expect
      .poll(async () => (await storageJson(page, KEY.docs))?.[0])
      .toBe("tab zero text");
    expect((await storageJson(page, KEY.docs))[1]).toBe("tab one text");
    expect(await storage(page, KEY.active)).toBe("1");

    await reload(page);
    await expect(tabs(page).nth(1)).toHaveClass(/active/); // active tab restored
    expect(await docText(mainEditor(page))).toBe("tab one text");
    await switchTo(page, 0);
    expect(await docText(mainEditor(page))).toBe("tab zero text");
  });

  test("tab titles and tab count are stored and restored", async ({ page }) => {
    await addTabBtn(page).click();
    await tabLabel(page, 0).dblclick();
    await page.locator("#tab-bar input").fill("Renamed");
    await page.keyboard.press("Enter");

    await expect
      .poll(() => storageJson(page, KEY.titles))
      .toEqual(["Renamed", "Code Snippet", "Server Logs", "Dataset 4"]);
    await reload(page);
    await expect(tabs(page)).toHaveCount(4);
    await expect(tabLabel(page, 0)).toHaveText("Renamed");
    await expect(tabLabel(page, 3)).toHaveText("Dataset 4");
  });

  test("highlights are re-applied after reload", async ({ page }) => {
    await setDoc(page, mainEditor(page), ["needle hay needle"]);
    await setDoc(page, topEditor(page), ["/needle/"]);
    await expect.poll(() => matchTexts(page, 0)).toEqual(["needle", "needle"]);
    await reload(page);
    await expect.poll(() => matchTexts(page, 0)).toEqual(["needle", "needle"]);
  });

  test("clearing localStorage resets to defaults", async ({ page }) => {
    await setDoc(page, topEditor(page), ["/wiped/"]);
    await expect.poll(() => storage(page, KEY.patterns)).toBe("/wiped/");
    await page.evaluate(() => localStorage.clear());
    await reload(page);
    await expect(tabs(page)).toHaveCount(3);
    expect(await docText(topEditor(page))).not.toContain("wiped");
  });
});

// =====================================================================
// 3. rename tab on double click
// =====================================================================
test.describe("rename tab", () => {
  const input = (p: Page) => p.locator("#tab-bar input");

  test("double click shows a focused input with the current name selected", async ({
    page,
  }) => {
    await tabLabel(page, 0).dblclick();
    await expect(input(page)).toBeVisible();
    await expect(input(page)).toBeFocused();
    await expect(input(page)).toHaveValue(DEFAULT_TITLES[0]);
    expect(
      await input(page).evaluate(
        (el: HTMLInputElement) => el.selectionEnd! - el.selectionStart!,
      ),
    ).toBe(DEFAULT_TITLES[0].length);
  });

  test("Enter commits, trims, and persists across reload", async ({ page }) => {
    await tabLabel(page, 0).dblclick();
    await input(page).fill("  My Tab  ");
    await page.keyboard.press("Enter");

    await expect(input(page)).toHaveCount(0);
    await expect(tabLabel(page, 0)).toHaveText("My Tab");
    await expect
      .poll(async () => (await storageJson(page, KEY.titles))[0])
      .toBe("My Tab");
    await reload(page);
    await expect(tabLabel(page, 0)).toHaveText("My Tab");
  });

  test("Escape cancels", async ({ page }) => {
    await tabLabel(page, 0).dblclick();
    await input(page).fill("nope");
    await page.keyboard.press("Escape");
    await expect(tabLabel(page, 0)).toHaveText(DEFAULT_TITLES[0]);
  });

  test("blur commits", async ({ page }) => {
    await tabLabel(page, 0).dblclick();
    await input(page).fill("Blurred");
    await mainEditor(page).click();
    await expect(tabLabel(page, 0)).toHaveText("Blurred");
  });

  test("empty / whitespace-only name keeps the old name", async ({ page }) => {
    await tabLabel(page, 0).dblclick();
    await input(page).fill("   ");
    await page.keyboard.press("Enter");
    await expect(tabLabel(page, 0)).toHaveText(DEFAULT_TITLES[0]);
  });

  test("typing in the rename input (incl. Enter) never edits the editors", async ({
    page,
  }) => {
    await setDoc(page, mainEditor(page), ["keep me"]);
    await setDoc(page, topEditor(page), ["/keep/"]);
    await tabLabel(page, 0).dblclick();
    await input(page).fill("abc");
    await page.keyboard.press("Enter");
    expect(await docText(mainEditor(page))).toBe("keep me");
    expect(await docText(topEditor(page))).toBe("/keep/");
  });

  test("renaming a non-active tab also works (and activates it)", async ({
    page,
  }) => {
    await tabLabel(page, 2).dblclick();
    await input(page).fill("Logs!");
    await page.keyboard.press("Enter");
    await expect(tabLabel(page, 2)).toHaveText("Logs!");
    await expect(tabs(page).nth(2)).toHaveClass(/active/);
  });

  test("clicking inside the rename input does not switch tabs", async ({
    page,
  }) => {
    await tabLabel(page, 0).dblclick();
    await input(page).click();
    await expect(input(page)).toBeVisible();
    await expect(tabs(page).nth(0)).toHaveClass(/active/);
  });
});

// =====================================================================
// 4. add / delete tab (with confirmation)
// =====================================================================
test.describe("add and delete tabs", () => {
  test('add creates "Dataset N" with starter text and activates it', async ({
    page,
  }) => {
    await addTabBtn(page).click();
    await expect(tabs(page)).toHaveCount(4);
    await expect(tabLabel(page, 3)).toHaveText("Dataset 4");
    await expect(tabs(page).nth(3)).toHaveClass(/active/);
    expect(await docText(mainEditor(page))).toBe(NEW_TAB_TEXT);

    await addTabBtn(page).click();
    await expect(tabLabel(page, 4)).toHaveText("Dataset 5");
  });

  test("add keeps the previous tab content intact", async ({ page }) => {
    await setDoc(page, mainEditor(page), ["original"]);
    await addTabBtn(page).click();
    await switchTo(page, 0);
    expect(await docText(mainEditor(page))).toBe("original");
  });

  test("delete shows confirm() with the tab name; cancelling keeps the tab", async ({
    page,
  }) => {
    await closeTab(page, 1, false, "Code Snippet");
    await expect(tabs(page)).toHaveCount(3);
    await expect(tabLabel(page, 1)).toHaveText("Code Snippet");
  });

  test("accepting removes the tab and persists", async ({ page }) => {
    await closeTab(page, 1, true, "Code Snippet");
    await expect(tabs(page)).toHaveCount(2);
    await expect(tabLabel(page, 0)).toHaveText("Emails & IDs");
    await expect(tabLabel(page, 1)).toHaveText("Server Logs");

    await expect
      .poll(() => storageJson(page, KEY.titles))
      .toEqual(["Emails & IDs", "Server Logs"]);
    expect((await storageJson(page, KEY.docs)).length).toBe(2);
    await reload(page);
    await expect(tabs(page)).toHaveCount(2);
  });

  test("close click does not switch to the tab being closed when cancelled", async ({
    page,
  }) => {
    await closeTab(page, 2, false);
    await expect(tabs(page).nth(0)).toHaveClass(/active/);
  });

  test("deleting a tab BEFORE the active one keeps the same tab and content active", async ({
    page,
  }) => {
    await switchTo(page, 2);
    const before = await docText(mainEditor(page));
    await closeTab(page, 0, true);
    await expect(tabs(page)).toHaveCount(2);
    await expect(tabs(page).nth(1)).toHaveClass(/active/);
    await expect(tabLabel(page, 1)).toHaveText("Server Logs");
    expect(await docText(mainEditor(page))).toBe(before);
  });

  test("deleting the active LAST tab activates the new last tab", async ({
    page,
  }) => {
    await switchTo(page, 2);
    await closeTab(page, 2, true);
    await expect(tabs(page)).toHaveCount(2);
    await expect(tabs(page).nth(1)).toHaveClass(/active/);
    await expect(tabLabel(page, 1)).toHaveText("Code Snippet");
  });

  test("deleting the active FIRST tab activates the tab that took its place", async ({
    page,
  }) => {
    await closeTab(page, 0, true);
    await expect(tabs(page).nth(0)).toHaveClass(/active/);
    await expect(tabLabel(page, 0)).toHaveText("Code Snippet");
  });

  test("last remaining tab cannot be closed (no close button)", async ({
    page,
  }) => {
    await closeTab(page, 0, true);
    await closeTab(page, 0, true);
    await expect(tabs(page)).toHaveCount(1);
    await expect(page.locator("#tab-bar .tab-close")).toHaveCount(0);
  });

  test("deleted tab edits do not leak into remaining tabs", async ({
    page,
  }) => {
    await switchTo(page, 1);
    await setDoc(page, mainEditor(page), ["doomed"]);
    await closeTab(page, 1, true);
    for (let i = 0; i < 2; i++) {
      await switchTo(page, i);
      expect(await docText(mainEditor(page))).not.toBe("doomed");
    }
  });
});

// =====================================================================
// 5. fullscreen (body margin / padding / max-width)
// =====================================================================
test.describe("fullscreen", () => {
  const bodyMetrics = (p: Page) =>
    p.evaluate(() => {
      const cs = getComputedStyle(document.body);
      return {
        margin: [cs.marginTop, cs.marginRight, cs.marginBottom, cs.marginLeft],
        padding: [
          cs.paddingTop,
          cs.paddingRight,
          cs.paddingBottom,
          cs.paddingLeft,
        ],
        maxWidth: cs.maxWidth,
        inline: ["margin", "padding", "max-width"].map((k) =>
          document.body.style.getPropertyValue(k),
        ),
      };
    });
  const ZERO = ["0px", "0px", "0px", "0px"];

  test("checkbox is unchecked by default", async ({ page }) => {
    await expect(fullscreen(page)).not.toBeChecked();
  });

  test("checking removes body margin & padding and lifts max-width", async ({
    page,
  }) => {
    await fullscreen(page).check();
    const m = await bodyMetrics(page);
    expect(m.margin).toEqual(ZERO);
    expect(m.padding).toEqual(ZERO);
    expect(m.maxWidth).toBe("none");
    expect(m.inline).toEqual(["0px", "0px", "none"]);

    const box = (await page.locator("body").boundingBox())!;
    expect(box.x).toBe(0);
    const clientWidth = await page.evaluate(
      () => document.documentElement.clientWidth,
    );
    expect(Math.round(box.width)).toBe(clientWidth);
  });

  test("unchecking restores the original body styles exactly", async ({
    page,
  }) => {
    const before = await bodyMetrics(page);
    await fullscreen(page).check();
    await fullscreen(page).uncheck();
    expect(await bodyMetrics(page)).toEqual(before);
  });

  test("editors become at least as wide in fullscreen", async ({ page }) => {
    const wBefore = (await page.locator("#regex-editor").boundingBox())!.width;
    await fullscreen(page).check();
    const wAfter = (await page.locator("#regex-editor").boundingBox())!.width;
    expect(wAfter).toBeGreaterThanOrEqual(wBefore);
  });

  test("fullscreen survives tab switching, add/rename and typing", async ({
    page,
  }) => {
    await fullscreen(page).check();
    await switchTo(page, 1);
    await addTabBtn(page).click();
    await setDoc(page, topEditor(page), ["/x/"]);
    await tabLabel(page, 0).dblclick();
    await page.locator("#tab-bar input").fill("FS");
    await page.keyboard.press("Enter");

    const m = await bodyMetrics(page);
    expect(m.margin).toEqual(ZERO);
    expect(m.padding).toEqual(ZERO);
    await expect(fullscreen(page)).toBeChecked();
  });

  test("toggling repeatedly is stable", async ({ page }) => {
    const before = await bodyMetrics(page);
    for (let i = 0; i < 3; i++) {
      await fullscreen(page).check();
      expect((await bodyMetrics(page)).padding).toEqual(ZERO);
      await fullscreen(page).uncheck();
    }
    expect(await bodyMetrics(page)).toEqual(before);
  });
});

// =====================================================================
// 6. undo / redo / selection / cursor preserved across tab movement
//    (each tab has its own EditorState in the lower editor)
// =====================================================================
test.describe("per-tab editor state", () => {
  const HISTORY_GAP = 700; // CodeMirror groups edits within 500ms into one undo step

  test("cursor position is preserved per tab", async ({ page }) => {
    await setDoc(page, mainEditor(page), [
      "line one",
      "line two",
      "line three",
    ]);
    await page.keyboard.press("ControlOrMeta+Home");
    await page.keyboard.press("ArrowDown");
    for (let i = 0; i < 4; i++) await page.keyboard.press("ArrowRight");
    const cursor0 = await selection(mainEditor(page));
    expect(cursor0.head).toBe(9 + 4);
    expect(cursor0.anchor).toBe(cursor0.head);

    await switchTo(page, 1);
    await focusEditor(mainEditor(page));
    await page.keyboard.press("ControlOrMeta+End");
    const len1 = (await docText(mainEditor(page))).length;
    expect((await selection(mainEditor(page))).head).toBe(len1);

    await switchTo(page, 0);
    expect(await selection(mainEditor(page))).toEqual(cursor0);

    // typing at the restored position lands exactly there
    await focusEditor(mainEditor(page));
    await page.keyboard.type("X");
    expect(await docText(mainEditor(page))).toBe(
      "line one\nlineX two\nline three",
    );

    await switchTo(page, 1);
    expect((await selection(mainEditor(page))).head).toBe(len1);
  });

  test("selection range is preserved per tab", async ({ page }) => {
    await setDoc(page, mainEditor(page), ["hello brave new world"]);
    await page.keyboard.press("ControlOrMeta+Home");
    for (let i = 0; i < 6; i++) await page.keyboard.press("ArrowRight");
    for (let i = 0; i < 5; i++) await page.keyboard.press("Shift+ArrowRight"); // "brave"
    expect(await selection(mainEditor(page))).toEqual({ anchor: 6, head: 11 });

    await switchTo(page, 1);
    await focusEditor(mainEditor(page));
    await page.keyboard.press("ControlOrMeta+a");
    const all1 = await selection(mainEditor(page));
    expect(all1.anchor).toBe(0);
    expect(all1.head).toBeGreaterThan(0);

    await switchTo(page, 0);
    expect(await selection(mainEditor(page))).toEqual({ anchor: 6, head: 11 });
    await switchTo(page, 1);
    expect(await selection(mainEditor(page))).toEqual(all1);

    // selection is real: typing replaces exactly the preserved range
    await switchTo(page, 0);
    await focusEditor(mainEditor(page));
    await page.keyboard.type("BRAVE");
    expect(await docText(mainEditor(page))).toBe("hello BRAVE new world");
  });

  test("selection direction (anchor vs head) is preserved", async ({
    page,
  }) => {
    await setDoc(page, mainEditor(page), ["abcdefghij"]);
    await page.keyboard.press("ControlOrMeta+End");
    for (let i = 0; i < 4; i++) await page.keyboard.press("Shift+ArrowLeft"); // backwards
    const sel = await selection(mainEditor(page));
    expect(sel.head).toBeLessThan(sel.anchor);

    await switchTo(page, 1);
    await switchTo(page, 0);
    expect(await selection(mainEditor(page))).toEqual(sel);
  });

  test("undo history is preserved per tab and does not leak between tabs", async ({
    page,
  }) => {
    // tab 0: three separate undo steps
    await setDoc(page, mainEditor(page), ["base"]);
    await page.waitForTimeout(HISTORY_GAP);
    await page.keyboard.type(" one");
    await page.waitForTimeout(HISTORY_GAP);
    await page.keyboard.type(" two");
    await page.waitForTimeout(HISTORY_GAP);
    await page.keyboard.type(" three");
    expect(await docText(mainEditor(page))).toBe("base one two three");

    // tab 1: its own edit
    await switchTo(page, 1);
    const tab1Original = await docText(mainEditor(page));
    await focusEditor(mainEditor(page));
    await page.keyboard.press("ControlOrMeta+End");
    await page.keyboard.type(" T1");
    await page.waitForTimeout(HISTORY_GAP);
    expect(await docText(mainEditor(page))).toBe(tab1Original + " T1");

    // back to tab 0: undo works step by step, with no tab-1 text involved
    await switchTo(page, 0);
    await focusEditor(mainEditor(page));
    await page.keyboard.press("ControlOrMeta+z");
    expect(await docText(mainEditor(page))).toBe("base one two");
    await page.keyboard.press("ControlOrMeta+z");
    expect(await docText(mainEditor(page))).toBe("base one");

    // tab 1: its undo only removes its own edit
    await switchTo(page, 1);
    await focusEditor(mainEditor(page));
    await page.keyboard.press("ControlOrMeta+z");
    expect(await docText(mainEditor(page))).toBe(tab1Original);
    await page.keyboard.press("ControlOrMeta+z"); // nothing more to undo
    expect(await docText(mainEditor(page))).toBe(tab1Original);

    // tab 0 untouched by tab 1's undo
    await switchTo(page, 0);
    expect(await docText(mainEditor(page))).toBe("base one");
  });

  test("redo history is preserved across tab switches", async ({ page }) => {
    await setDoc(page, mainEditor(page), ["alpha"]);
    await page.waitForTimeout(HISTORY_GAP);
    await page.keyboard.type(" beta");
    await page.waitForTimeout(HISTORY_GAP);
    await page.keyboard.type(" gamma");
    await page.keyboard.press("ControlOrMeta+z");
    await page.keyboard.press("ControlOrMeta+z");
    expect(await docText(mainEditor(page))).toBe("alpha");

    await switchTo(page, 2);
    await focusEditor(mainEditor(page));
    await page.keyboard.type("noise");
    await page.waitForTimeout(HISTORY_GAP);

    await switchTo(page, 0);
    expect(await docText(mainEditor(page))).toBe("alpha");
    await focusEditor(mainEditor(page));
    await redo(page);
    expect(await docText(mainEditor(page))).toBe("alpha beta");
    await redo(page);
    expect(await docText(mainEditor(page))).toBe("alpha beta gamma");
  });

  test("undo restores selection/cursor consistently after returning to a tab", async ({
    page,
  }) => {
    await setDoc(page, mainEditor(page), ["12345"]);
    await page.waitForTimeout(HISTORY_GAP);
    await page.keyboard.type("678");
    await page.keyboard.press("Home");
    const cursor = await selection(mainEditor(page));

    await switchTo(page, 1);
    await switchTo(page, 0);
    expect(await selection(mainEditor(page))).toEqual(cursor);

    await focusEditor(mainEditor(page));
    await page.keyboard.press("ControlOrMeta+z");
    expect(await docText(mainEditor(page))).toBe("12345");
  });

  test("a newly added tab has a fresh history (undo is a no-op) and cursor at start", async ({
    page,
  }) => {
    await setDoc(page, mainEditor(page), ["something"]);
    await addTabBtn(page).click();
    await focusEditor(mainEditor(page));
    expect(await selection(mainEditor(page))).toEqual({ anchor: 0, head: 0 });
    await page.keyboard.press("ControlOrMeta+z");
    expect(await docText(mainEditor(page))).toBe(NEW_TAB_TEXT);
  });

  test("state survives many rapid tab switches", async ({ page }) => {
    await setDoc(page, mainEditor(page), ["AAAAAAAAAA"]);
    await page.keyboard.press("ControlOrMeta+Home");
    for (let i = 0; i < 2; i++) await page.keyboard.press("ArrowRight");
    for (let i = 0; i < 3; i++) await page.keyboard.press("Shift+ArrowRight");
    const selA = await selection(mainEditor(page));

    await switchTo(page, 1);
    await setDoc(page, mainEditor(page), ["BBBBBBBBBB"]);
    await page.keyboard.press("ControlOrMeta+Home");
    for (let i = 0; i < 6; i++) await page.keyboard.press("ArrowRight");
    const selB = await selection(mainEditor(page));

    for (let i = 0; i < 5; i++) {
      await switchTo(page, 0);
      await switchTo(page, 1);
    }
    expect(await selection(mainEditor(page))).toEqual(selB);
    await switchTo(page, 0);
    expect(await selection(mainEditor(page))).toEqual(selA);
  });

  test("highlights are refreshed per tab when switching (stale regex queries)", async ({
    page,
  }) => {
    await setDoc(page, topEditor(page), ["/zqx/"]);
    await setDoc(page, mainEditor(page), ["zqx qqq"]);
    await expect.poll(() => matchTexts(page, 0)).toEqual(["zqx"]);

    await switchTo(page, 1);
    await expect(page.locator("#cm6-editor .cm-regex-match-0")).toHaveCount(0);

    // change the regex while on tab 1, then return to tab 0: must use the NEW regex
    await setDoc(page, topEditor(page), ["/qqq/"]);
    await switchTo(page, 0);
    await expect.poll(() => matchTexts(page, 0)).toEqual(["qqq"]);
  });

  test("switching tabs does not alter the regex (top) editor", async ({
    page,
  }) => {
    await setDoc(page, topEditor(page), ["/keep/", "/me/"]);
    await switchTo(page, 1);
    await switchTo(page, 2);
    expect(await docText(topEditor(page))).toBe("/keep/\n/me/");
  });
});