import { expect } from "e2e";
import { test, WEB } from "./t3.ts";

test("Pasted arithmetic stays verbatim while pasted and dropped Markdown stays styled", WEB, async ({ t3, app, screen, browser }) => {
  await t3.project("Composer demo");
  await t3.open();
  await screen.getByTestId("composer-editor").waitFor({ state: "visible", timeout: 120_000 });
  await app.open("/settings/chat");
  await screen.getByRole("switch", "Rich text composer").waitFor({ state: "visible", timeout: 120_000 });
  await screen.getByRole("switch", "Rich text composer").check();
  await app.open("/");
  const editor = screen.getByRole("textbox");
  const transfer = async (text: string, kind: "paste" | "drop") => {
    await editor.waitFor({ state: "visible", timeout: 120_000 });
    await editor.tap();
    if (kind === "paste") {
      await browser.evaluate((text) => navigator.clipboard.writeText(text), text);
      await editor.press("ControlOrMeta+v");
    } else {
      await browser.evaluate((text) => {
        const target = document.querySelector('[contenteditable="true"][role="textbox"]')!;
        const data = new DataTransfer();
        data.setData("text/plain", text);
        const box = target.getBoundingClientRect();
        target.dispatchEvent(new DragEvent("drop", { dataTransfer: data, clientX: box.left + 10, clientY: box.top + 10, bubbles: true, cancelable: true }));
      }, text);
    }
    await editor.press("Tab");
    await browser.keyboard.press("Escape");
  };
  const styled = () => browser.evaluate(() => {
    const el = document.querySelector('[contenteditable="true"][role="textbox"]')!;
    return el.querySelector("strong")?.textContent === "bold" && el.querySelector("em")?.textContent === "soft";
  });
  const send = async () => {
    await editor.press("Enter");
    await screen.getByRole("button", "Edit from here").waitFor({ state: "visible", timeout: 120_000 });
    await screen.getByRole("button", "Edit from here").waitFor({ state: "visible" });
    // Edit becomes available after the replayed turn completes.
    await screen.getByRole("button", "Stop generation").waitFor({ state: "hidden", timeout: 120_000 });
    await screen.getByRole("button", "Copy message").first().tap();
    const copied = await browser.evaluate(() => navigator.clipboard.readText());
    await screen.getByText("Copied!", { exact: true }).waitFor({ state: "hidden" });
    await browser.evaluate(() => document.querySelector('[data-message-role="user"]')?.scrollIntoView({ block: "center" }));
    await browser.keyboard.press("Escape");
    return copied;
  };
  const freshDraft = async () => {
    await screen.getByRole("button", "New thread", { exact: true }).tap();
    await editor.waitFor({ state: "visible", timeout: 120_000 });
  };
  const arithmetic = "signal = (7 * 2**3 * 5)**4";
  await transfer(arithmetic, "paste");
  await app.screenshot("pasted-arithmetic");
  const submitted = await send();
  await app.screenshot("submitted-arithmetic");
  await freshDraft();
  await transfer(arithmetic, "drop");
  await app.screenshot("dropped-arithmetic");
  const dropped = await send();
  await freshDraft();
  await transfer("a **bold** and *soft* word", "paste");
  await app.screenshot("pasted-markdown");
  const pasteStyled = await styled();
  await send();
  await freshDraft();
  await transfer("a **bold** and *soft* word", "drop");
  await app.screenshot("dropped-markdown");
  const dropStyled = await styled();
  expect(submitted).toBe(arithmetic);
  expect(dropped).toBe(arithmetic);
  expect(pasteStyled).toBe(true);
  expect(dropStyled).toBe(true);
});