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

test("Image preview preserves mouse focus and scroll dismisses its hovered path", WEB, async ({ t3, app, screen, browser }) => {
  const capture = async (label: string) => {
    await app.screenshot(`${label}-stability`);
    await browser.evaluate(() => new Promise(resolve => setTimeout(resolve, 500)));
    await app.screenshot(label);
  };
  const project = await t3.project("Image tooltip demo", {
    "preview.svg": '<svg xmlns="http://www.w3.org/2000/svg" width="440" height="180"><rect width="440" height="180" rx="16" fill="#194b65"/><circle cx="80" cy="90" r="44" fill="#68d5c4"/><text x="150" y="100" font-family="sans-serif" font-size="28" fill="white">Preview sample</text></svg>',
  });
  await t3.thread({ project, title: "Image preview and scrolling", messages: [
    Array.from({length: 24}, (_, i) => `Earlier conversation line ${i+1}: preparing the image preview.`).join("\n\n"),
    "![Preview sample](preview.svg)\n\nOpen this file-backed image to inspect it.",
  ] });
  await t3.open();
  await screen.getByRole("button", "Image preview and scrolling, Done, Image tooltip demo").tap();
  await screen.getByRole("button", "Agent Earlier conversation line 1: preparing the image preview.").tap();
  await screen.getByRole("button", "Agent ![Preview sample](preview.svg)").tap();
  await screen.getByRole("button", "Toggle thread details panel").tap();
  const image = browser.locator('img[alt="Preview sample"]');
  await image.scrollIntoView();
  await image.tap();
  await screen.getByRole("button", "Close image preview").hover();
  await capture("mouse-preview");
  await browser.keyboard.press("Escape");
  const mouseFocusVisible = await browser.evaluate(() => document.activeElement?.matches(":focus-visible"));
  await browser.mouse.move(1000, 650);
  await image.hover();
  await browser.evaluate(() => new Promise(resolve => setTimeout(resolve, 900)));
  await capture("mouse-hover-before-scroll");
  await browser.mouse.wheel(0, -100);
  await browser.evaluate(() => new Promise(resolve => setTimeout(resolve, 700)));
  const mouseTooltipAfterScroll = await browser.evaluate(() => !!document.querySelector('[data-slot="tooltip-popup"]'));
  const mouseFocusKept = await browser.evaluate(() => document.activeElement?.getAttribute("alt") === "Preview sample");
  await capture("mouse-hover-after-scroll");
  await browser.keyboard.press("Control+k");
  await browser.evaluate(() => new Promise(resolve => setTimeout(resolve, 700)));
  await capture("command-palette");
  await browser.keyboard.press("Escape");
  await image.tap();
  await browser.keyboard.press("Escape");
  await browser.keyboard.press("Tab");
  await browser.keyboard.press("Shift+Tab");
  await browser.keyboard.press("Enter");
  await screen.getByRole("button", "Close image preview").hover();
  await capture("keyboard-preview");
  await browser.keyboard.press("Escape");
  await browser.mouse.move(1000, 650);
  await image.hover();
  await browser.evaluate(() => new Promise(resolve => setTimeout(resolve, 900)));
  const keyboardFocusVisible = await browser.evaluate(() => document.activeElement?.matches(":focus-visible"));
  await capture("keyboard-hover-before-scroll");
  await browser.mouse.wheel(0, -100);
  await browser.evaluate(() => new Promise(resolve => setTimeout(resolve, 700)));
  const keyboardTooltipAfterScroll = await browser.evaluate(() => !!document.querySelector('[data-slot="tooltip-popup"]'));
  await capture("keyboard-hover-after-scroll");
  expect({mouseFocusVisible, mouseTooltipAfterScroll, mouseFocusKept, keyboardFocusVisible, keyboardTooltipAfterScroll}).toEqual({mouseFocusVisible:false, mouseTooltipAfterScroll:false, mouseFocusKept:true, keyboardFocusVisible:true, keyboardTooltipAfterScroll:true});
});