import { expect, test } from "@playwright/test";
import { CHANNEL_SLUG, VIDEO_CHAT_SMALL } from "./fixtures/data";
import {
  closeModal,
  expectModalOpen,
  installRoutes,
  urlParams,
} from "./helpers";

test.describe("video modal — close cleans URL state", () => {
  test.beforeEach(async ({ page }) => {
    await installRoutes(page);
  });

  test("close clears v, t, and vm", async ({ page }) => {
    await page.goto(
      `/?v=${CHANNEL_SLUG}/${VIDEO_CHAT_SMALL}&vm=chat&t=11`,
    );
    await expectModalOpen(page);

    await closeModal(page);

    const after = await urlParams(page);
    expect(after.get("v")).toBeNull();
    expect(after.get("t")).toBeNull();
    expect(after.get("vm")).toBeNull();
  });

  test("ESC collapses modal to mini player, then reopen restores chat mode", async ({
    page,
  }) => {
    await page.goto(`/?v=${CHANNEL_SLUG}/${VIDEO_CHAT_SMALL}&vm=chat`);
    await expectModalOpen(page);

    await page.keyboard.press("Escape");
    // The clip button disappears (modal collapsed); the mini reopen control
    // appears with the video title.
    await page
      .getByRole("button", { name: "Mark clip start at current time" })
      .waitFor({ state: "detached" });
    const reopen = page.getByRole("button", { name: "Reopen transcript" });
    await reopen.click();

    await expectModalOpen(page);
    // Still in chat mode after reopen.
    const params = await urlParams(page);
    expect(params.get("vm")).toBe("chat");
    await expect(page.getByText(/chat message number 0/).first()).toBeVisible();
  });
});