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

test("Conversation scrolls after a click, Shift+F6, and an empty conversation gains messages", WEB, async ({ t3, app, screen, browser }) => {
  const project = await t3.project("Keyboard scrolling");
  await t3.thread({ project, title: "Reading history", messages: Array.from({ length: 12 }, (_, i) => `Section ${i + 1}\n\n${Array.from({ length: 12 }, (_, j) => `Reading line ${i + 1}.${j + 1}: synthetic conversation content for keyboard scrolling.`).join("\n\n")}`) });
  await t3.open();
  await screen.getByRole("button", "Reading history, Done, Keyboard scrolling", { exact: true }).tap();
  await browser.locator(".messages-timeline-scroll").waitFor();
  const settle = () => new Promise(resolve => setTimeout(resolve, 700));
  const top = () => browser.evaluate(() => document.querySelector(".messages-timeline-scroll")!.scrollTop);
  const gutter = async () => {
    const point = await browser.evaluate(() => { const r = document.querySelector(".messages-timeline-scroll")!.getBoundingClientRect(); return { x: r.right - 30, y: r.top + r.height / 2 }; });
    await browser.mouse.move(point.x, point.y);
    return point;
  };
  const away = async () => { await gutter(); await browser.mouse.wheel(0, -850); await settle(); };
  const results: Record<string, boolean> = {};
  const keys = async (label: string) => {
    await app.screenshot(`${label}-before-keys`);
    const before = await top();
    await browser.keyboard.press("ArrowDown"); await settle();
    const arrow = await top();
    await browser.keyboard.press("PageDown"); await settle();
    const page = await top();
    results[`${label}-arrow`] = arrow > before;
    results[`${label}-page`] = page > arrow;
    console.log(label, { before, arrow, page });
    await app.screenshot(`${label}-after-keys`);
  };
  await away();
  await screen.tapAt(await gutter());
  await keys("click");
  await away();
  await screen.getByRole("textbox").tap();
  const reading = await top();
  await browser.keyboard.press("Shift+F6"); await settle();
  results["f6-preserves-position"] = Math.abs((await top()) - reading) < 2;
  await keys("shift-f6");
  await browser.keyboard.press("Space");
  results["space-focuses-composer"] = await browser.evaluate(() => document.activeElement?.getAttribute("contenteditable") === "true" || document.activeElement?.getAttribute("role") === "textbox");
  await away();
  await browser.keyboard.press("F6");
  await browser.keyboard.press("F6");
  await browser.keyboard.press("F6"); await settle();
  await keys("forward-f6");
  await screen.getByRole("button", "New thread", { exact: true }).tap();
  await screen.getByRole("textbox").tap();
  await browser.keyboard.press("Shift+F6");
  await app.screenshot("empty-conversation-focus");
  await browser.keyboard.press("Space");
  await screen.getByRole("textbox").fill(Array.from({ length: 35 }, (_, i) => `New reading line ${i + 1}: synthetic conversation history.`).join("\n\n"));
  await screen.getByRole("textbox").press("Enter");
  await screen.getByText("This turn is a replay.", { exact: false }).waitFor();
  await screen.getByRole("button", "Stop generation").waitFor({ state: "hidden" });
  await away();
  await screen.getByRole("textbox").tap();
  await browser.keyboard.press("Shift+F6"); await settle();
  await browser.keyboard.press("F6");
  await browser.keyboard.press("Shift+F6"); await settle();
  await keys("populated-empty-thread");
  console.log("Keyboard reproduction results", results);
  expect(results).toEqual(Object.fromEntries(Object.keys(results).map(key => [key, true])));
});