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

test("The open thread stays active behind Settings and Usage", WEB, async ({ t3, app, screen, browser }) => {
  await browser.setViewport({ width: 1920, height: 1080 });
  const project = await t3.project("Sidebar demo");
  await t3.thread({ project, title: "Keep this thread active", messages: ["Hello"] });
  await t3.open();
  const row = browser.locator('[data-sidebar-row]').filter({ hasText: "Keep this thread active" });
  await row.tap();
  await screen.getByText("first fixture turn complete").waitFor();
  const composer = screen.getByRole("textbox");
  await composer.fill("An unsent draft to keep");
  await app.screenshot("thread-with-draft");
  for (const modal of ["Settings", "Usage"]) {
    await screen.getByRole("button", modal, { exact: true }).tap();
    await screen.getByRole("dialog").waitFor();
    await app.screenshot(`${modal.toLowerCase()}-open`);
    // Capture aid: reveal the background without changing routing or thread state.
    await browser.evaluate(() => {
      document.querySelectorAll<HTMLElement>('[data-slot="dialog-backdrop"]').forEach((element) => {
        element.style.setProperty("display", "none", "important");
      });
    });
    await app.screenshot(`${modal.toLowerCase()}-open-backdrop-hidden`);
    await browser.evaluate(() => {
      document.querySelectorAll<HTMLElement>('[data-slot="dialog-backdrop"]').forEach((element) => {
        element.style.removeProperty("display");
      });
    });
    await expect.soft(row).toHaveAttribute("aria-current", "page", { timeout: 1500 });
    await expect.soft(browser.locator('[aria-label="Unsent draft"]')).toBeHidden({ timeout: 1500 });
    await screen.getByRole("button", "Close", { exact: true }).tap();
    await screen.getByRole("dialog").waitFor({ state: "hidden" });
    await expect.soft(composer).toHaveText("An unsent draft to keep", { timeout: 1500 });
    await app.screenshot(`${modal.toLowerCase()}-closed-draft-intact`);
  }
});