import { readFile } from "node:fs/promises";
import { chromium } from "playwright-core";
import { expect } from "e2e";

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

test("An untouched sidebar rename preserves an incoming title on Enter and Tab", WEB, async ({ t3, app, screen, browser }) => {
  const original = "Fix the login redirect after signing in";
  const incoming = "Fix login redirect";
  const project = await t3.project("login-demo");
  await t3.thread({ project, title: original, messages: [original] });
  await t3.open();
  await screen.getByTestId("sidebar-row-card").first().tap();
  await screen.getByRole("button", `Thread actions for ${original}`).waitFor();

  const secondBrowser = await chromium.launch({ headless: true });
  try {
    const second = await secondBrowser.newPage({ viewport: { width: 1280, height: 800 } });
    const threadUrl = await browser.url();
    const pairingPath = (await readFile(`${T3_HOME}/pairing-path`, "utf8")).trim();
    await second.goto(new URL(pairingPath, threadUrl).href);
    await second.getByTestId("sidebar-row-card").first().click();
    const renameFromHeader = async (title: string) => {
      await second.getByRole("button", { name: /^Thread actions for / }).click();
      await second.getByRole("menuitem", { name: "Rename thread", exact: true }).click();
      await second.getByRole("textbox", { name: "Thread title", exact: true }).fill(title);
      await second.getByRole("textbox", { name: "Thread title", exact: true }).press("Enter");
      await second.getByRole("button", { name: `Thread actions for ${title}`, exact: true }).waitFor();
    };

    for (const key of ["Enter", "Tab"]) {
      if (key === "Tab") {
        await renameFromHeader(original);
        await screen.getByRole("button", `Thread actions for ${original}`).waitFor();
      }
      await screen.getByTestId("sidebar-row-card").first().doubleTap();
      await screen.getByRole("textbox", "Thread title").waitFor();
      await renameFromHeader(incoming);
      await screen.getByRole("button", `Thread actions for ${incoming}`).waitFor();
      await screen.getByRole("button", `${incoming}, login-demo`).waitFor();
      await browser.mouse.move(800, 400);
      await app.screenshot(`${key.toLowerCase()}-incoming-title-field-untouched`);
      await screen.getByRole("textbox", "Thread title").press(key);
      await screen.getByRole("textbox", "Thread title").waitFor({ state: "hidden" });
      await second.reload();
      const savedHeader = second.getByRole("button", { name: /^Thread actions for / });
      await savedHeader.waitFor();
      const savedLabel = await savedHeader.getAttribute("aria-label");
      await screen.getByRole("button", savedLabel!).waitFor();
      await expect.soft(screen.getByRole("button", `Thread actions for ${incoming}`)).toBeVisible();
      await app.screenshot(`${key.toLowerCase()}-finished-rename`);
    }
  } finally {
    await secondBrowser.close();
  }
});