import { readFile } from "node:fs/promises";
import { setTimeout } from "node:timers/promises";
import { expect } from "e2e";
import { test, WEB } from "./t3.ts";

test("Composer and Appearance preview shape ASCII arrows like sent prose", WEB, async ({ t3, app, screen, browser }) => {
  const capture = async (label: string) => {
    let previous = await app.screenshot(`${label}-stability`);
    for (let attempt = 0; attempt < 10; attempt++) {
      await setTimeout(500);
      const current = await app.screenshot(label);
      if ((await readFile(previous)).equals(await readFile(current))) return;
      previous = current;
    }
    throw new Error("Capture did not stabilize");
  };
  const text = "a -> b => c";
  const project = await t3.project("Arrow sample");
  await t3.thread({ project, title: "Arrow comparison", messages: ["Ready"] });
  await t3.open();
  await screen.getByText("Arrow comparison", { exact: true }).first().textContent();
  await app.open("/settings/appearance#prompt-font");
  const interfaceFont = screen.getByRole("textbox", "Interface font family");
  await interfaceFont.fill("Inter Variable");
  await interfaceFont.press("Enter");
  const promptFont = screen.getByRole("textbox", "Prompt font family");
  await promptFont.fill("Inter Variable");
  await promptFont.press("Enter");
  const preview = screen.getByRole("textbox", "Prompt font preview");
  await preview.fill(text);
  await preview.press("Tab");
  await browser.mouse.move(640, 400);
  await preview.scrollIntoView();
  await browser.evaluate(async () => { await document.fonts.ready; });
  await capture("appearance-prompt-preview");
  const previewStyle = await browser.evaluate(() => {
    const el = document.querySelector('[aria-label="Prompt font preview"]')!;
    const style = getComputedStyle(el);
    return { ligatures: style.fontVariantLigatures, features: style.fontFeatureSettings, text: el.textContent };
  });
  await app.open("/");
  await screen.getByRole("button", "Arrow comparison, Done, Arrow sample").tap();
  const composer = screen.getByRole("textbox");
  await composer.fill(text);
  await composer.press("Enter");
  await screen.getByText("second fixture turn complete", { exact: false }).textContent();
  await composer.fill(text);
  await composer.press("Tab");
  await browser.mouse.move(640, 400);
  await browser.evaluate(() => (document.activeElement as HTMLElement)?.blur());
  await capture("sent-message-and-composer");
  const styles = await browser.evaluate((sample: string) => {
    const composer = document.querySelector('.composer-tiptap[contenteditable="true"]')!;
    const sent = [...document.querySelectorAll("span, div, p")].find(el => el.children.length === 0 && el.textContent === sample && !el.closest(".composer-tiptap"))!;
    const read = (el: Element) => {
      const style = getComputedStyle(el);
      return { ligatures: style.fontVariantLigatures, features: style.fontFeatureSettings, text: el.textContent };
    };
    return { composer: read(composer), sent: read(sent) };
  }, text);
  expect.soft(styles.composer).toEqual(styles.sent);
  expect.soft(previewStyle).toEqual(styles.sent);
  expect.soft(styles.composer.text).toBe(text);
  expect.soft(previewStyle.text).toBe(text);
});