import { expect, test } from "@playwright/test";
import { captureScreenshot, completeOnboarding, signup } from "./helpers";

test("a 1:1 chat keeps name and status in the header instead of a banner", async ({
  page,
}, testInfo) => {
  await page.setViewportSize({ width: 390, height: 844 });
  await signup(page, `oo-header-${Date.now()}@rakazo.test`, "password12", "Header QA");
  await completeOnboarding(page);

  const composer = page.getByRole("combobox", { name: /^Message/ });
  await composer.fill("Please review `shared/PROJECT_CHECKPOINT_WRAPUP.md`.");
  await composer.press("Enter");
  await expect(
    page
      .getByTestId("transcript")
      .locator("[data-message-id]")
      .filter({ hasText: "done. i handled:" }),
  ).toBeVisible({ timeout: 30_000 });

  await expect(page.getByTestId("oo-stage")).toHaveCount(0);
  await expect(page.getByTestId("bot-settings-trigger")).toBeVisible();

  await page.emulateMedia({ colorScheme: "light" });
  await expect(page.locator("html")).toHaveAttribute("data-theme", "light");
  await captureScreenshot(page, testInfo, "oo-chat-header-light");
  await page.emulateMedia({ colorScheme: "dark" });
  await expect(page.locator("html")).toHaveAttribute("data-theme", "dark");
  await captureScreenshot(page, testInfo, "oo-chat-header-dark");
});