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

test("Pasted URLs, paths and inline code retain literal characters", WEB, async ({ t3, app, browser, screen }) => {
  const project = await t3.project("Paste demonstration");
  const thread = await t3.thread({ project, title: "Literal paste", messages: ["Ready for a paste demonstration"] });
  const other = await t3.thread({ project, title: "Other thread", messages: ["Another thread"] });
  await t3.open(thread);
  const editor = browser.locator('[contenteditable="true"][data-composer-rich-text="true"]');
  const original = "Read https://example.com/_handle_/status/1 and open src/__test__.tsx";
  const code = "see `**x**` now";
  const results: string[] = [];
  const paste = async (text: string) => {
    await editor.tap();
    await browser.evaluate(async (value) => { await navigator.clipboard.writeText(value); }, text);
    await browser.keyboard.press("Control+V");
  };
  const captureCopy = async (label: string, input: string) => {
    await editor.tap();
    await browser.keyboard.press("Control+A");
    await browser.keyboard.press("Control+C");
    const copied = await browser.evaluate(async () => await navigator.clipboard.readText());
    results.push(copied);
    await browser.evaluate(({ label, input, copied }) => {
      document.getElementById("clipboard-viewer")?.remove();
      const panel = document.createElement("section");
      panel.id = "clipboard-viewer";
      panel.style.cssText = "position:fixed;top:72px;right:24px;width:780px;padding:18px;background:#fff;color:#111;border:2px solid #777;border-radius:8px;z-index:9999;font:16px monospace;box-shadow:0 4px 20px #0003";
      const title = document.createElement("strong"); title.textContent = label + " — plain-text clipboard";
      const source = document.createElement("p"); source.textContent = "Pasted: " + input;
      const text = document.createElement("textarea"); text.readOnly = true; text.value = copied; text.setAttribute("aria-label", "Plain-text clipboard");
      text.style.cssText = "width:100%;height:90px;margin-top:12px;background:#f5f5f5;color:#111;padding:10px;font:16px monospace;white-space:pre-wrap";
      panel.append(title, source, text); document.body.append(panel);
    }, { label, input, copied });
    await app.screenshot(label);
    await browser.evaluate(() => { document.getElementById("clipboard-viewer")?.remove(); });
  };
  await paste(original);
  await captureCopy("immediate-paste", original);
  await t3.open(other);
  await t3.open(thread);
  await captureCopy("restored-draft", original);
  await editor.press("Enter");
  await screen.getByText("second fixture turn complete", { exact: false }).first().waitFor({ state: "visible" });
  await app.screenshot("sent-message");
  await paste(code);
  await captureCopy("inline-code", code);
  expect(results).toEqual([original, original, code]);
});