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

test("Pasted images keep their insertion point and survive prompt rewrites", WEB, async ({t3, app, screen, browser}) => {
  const project = await t3.project("paste-demo");
  const thread = await t3.thread({project, title:"Image paste proof", messages:["Hello"]});
  await t3.open(thread);
  const editor = screen.getByTestId("composer-editor");
  await editor.tap();
  await browser.keyboard.type("Before paste: ");
  const paste = async () => browser.evaluate(async () => {
    const w = window as any;
    w.originalBitmap ??= window.createImageBitmap.bind(window);
    w.decodeGate = new Promise<void>(resolve => { w.releaseDecode = resolve; });
    window.createImageBitmap = (async (...args: any[]) => {
      await w.decodeGate;
      return w.originalBitmap(...args);
    }) as any;
    w.pasteCount = (w.pasteCount ?? 0) + 1;
    const canvas = document.createElement("canvas"); canvas.width=2600; canvas.height=1800;
    const ctx = canvas.getContext("2d")!; ctx.fillStyle=w.pasteCount === 1 ? "#276c82" : "#835b29"; ctx.fillRect(0,0,2600,1800);
    ctx.fillStyle="white"; ctx.font="110px sans-serif"; ctx.fillText("Picture paste proof",180,850);
    const blob = await new Promise<Blob>(resolve=>canvas.toBlob(b=>resolve(b!),"image/png"));
    const transfer = new DataTransfer(); transfer.items.add(new File([blob],w.pasteCount === 1 ? "picture.png" : "rewrite.png",{type:"image/png"}));
    document.querySelector('[data-testid="composer-editor"]')!.dispatchEvent(new ClipboardEvent("paste",{bubbles:true,cancelable:true,clipboardData:transfer}));
  });
  await paste();
  await browser.keyboard.type("yaz");
  await app.screenshot("typing-during-preparation");
  await browser.evaluate(()=> (window as any).releaseDecode());
  await expect(browser.locator('[data-testid="composer-editor"] .node-composer-context-reference')).toBeVisible();
  await browser.keyboard.type("maya devam");
  await app.screenshot("original-paste-point");
  const first = await browser.evaluate(()=>document.querySelector('[data-testid="composer-editor"]')!.textContent);
  // Run the fallback before asserting the first case so both are recorded on both revisions.
  await browser.evaluate(()=> {
    const editor = (document.querySelector('[data-testid="composer-editor"]') as any).editor;
    editor.commands.setContent('<p>Original draft with paste point</p>');
    editor.commands.setTextSelection(16);
    editor.commands.focus();
  });
  await paste();
  await browser.evaluate(()=> {
    const editor = (document.querySelector('[data-testid="composer-editor"]') as any).editor;
    editor.commands.setContent('<p>Rewritten prompt: </p>', {parseOptions:{preserveWhitespace:'full'}});
    editor.commands.focus('end');
  });
  await browser.keyboard.type("yaz");
  await app.screenshot("prompt-rewrite-preparing");
  await browser.evaluate(()=> (window as any).releaseDecode());
  await expect(browser.locator('[data-testid="composer-editor"] .node-composer-context-reference')).toBeVisible();
  await browser.keyboard.type("maya devam");
  await app.screenshot("prompt-rewrite-fallback");
  const fallback = await browser.evaluate(()=>document.querySelector('[data-testid="composer-editor"]')!.textContent);
  expect(fallback).toMatch(/Rewritten prompt: yaz.*rewrite\.png.*maya devam/);
  expect(first).toMatch(/Before paste:.*picture\.png.*yazmaya devam/);
});