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

test("Touch tablet thread entry and window return preserve composer focus", WEB, async ({ t3, app, screen, browser }) => {
  await browser.setViewport({ width: 1194, height: 834 });
  await browser.addInitScript(() => {
    const real = window.matchMedia.bind(window);
    (window as any).proofCoarse = true;
    window.matchMedia = (query) => query === "(pointer: coarse)" ? real((window as any).proofCoarse ? "all" : "not all") : real(query);
  });
  const project = await t3.project("Tablet focus demo");
  await t3.thread({ project, title: "First conversation", messages: ["Explain this demo"] });
  await t3.thread({ project, title: "Second conversation", messages: ["Review this demo"] });
  await t3.open();
  const editor = screen.getByTestId("composer-editor");
  const results: Record<string, boolean> = {};
  const capture = async (label: string) => {
    // Wait for the app's deferred focus work, then show the actual DOM focus in the capture.
    await browser.evaluate(() => new Promise<void>(resolve => requestAnimationFrame(() => requestAnimationFrame(() => requestAnimationFrame(() => resolve())))));
    const focused = await browser.evaluate(() => document.activeElement?.getAttribute("data-testid") === "composer-editor");
    await browser.evaluate(({ label, focused }) => {
      document.getElementById("focus-proof-status")?.remove();
      const badge = document.createElement("div");
      badge.id = "focus-proof-status";
      badge.textContent = `Focus probe · ${label} · Composer ${focused ? "FOCUSED" : "UNFOCUSED"} · ${innerWidth} × ${innerHeight} · pointer ${matchMedia("(pointer: coarse)").matches ? "coarse (emulated)" : "fine"}`;
      badge.style.cssText = "position:fixed;top:48px;right:16px;z-index:2147483647;background:#102238;color:white;padding:12px;font:14px sans-serif;border:2px solid #59baff;pointer-events:none";
      document.body.append(badge);
    }, { label, focused });
    await app.screenshot(label);
    return focused;
  };
  await screen.getByRole("button", { name: /^First conversation,/ }).tap();
  await editor.waitFor({ state: "visible" });
  results.tabletEntry = await capture("tablet-thread-entry");
  await browser.evaluate(() => (document.activeElement as HTMLElement)?.blur());
  await capture("tablet-after-blur");
  await screen.getByRole("button", { name: /^Second conversation,/ }).tap();
  results.tabletSwitch = await capture("tablet-thread-switch");
  await browser.evaluate(() => { (document.activeElement as HTMLElement)?.blur(); window.dispatchEvent(new FocusEvent("blur")); window.dispatchEvent(new FocusEvent("focus")); });
  results.tabletReturn = await capture("tablet-window-return");
  await editor.tap();
  results.explicitTap = await capture("tablet-explicit-tap");
  await browser.evaluate(() => { (document.activeElement as HTMLElement)?.blur(); (window as any).proofCoarse = false; });
  await screen.getByRole("button", { name: /^First conversation,/ }).tap();
  results.desktopEntry = await capture("desktop-thread-entry");
  await browser.evaluate(() => { (document.activeElement as HTMLElement)?.blur(); window.dispatchEvent(new FocusEvent("blur")); window.dispatchEvent(new FocusEvent("focus")); });
  results.desktopReturn = await capture("desktop-window-return");
  expect(results).toEqual({ tabletEntry: false, tabletSwitch: false, tabletReturn: false, explicitTap: true, desktopEntry: true, desktopReturn: true });
});