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

test.describe("video modal — transcript/chat toggle", () => {
  test.beforeEach(async ({ page }) => {
    await installRoutes(page);
  });

  test("toggle flips content and only touches vm (not m, tk)", async ({
    page,
  }) => {
    // Land with search-page mode = subs AND vm = chat, with an extra tk hint
    // we expect to remain untouched.
    await page.goto(
      `/?m=subs&tk=foo&v=${CHANNEL_SLUG}/${VIDEO_CHAT_SMALL}&vm=chat`,
    );
    await expectModalOpen(page);
    await expect(page.getByText(/chat message number 0/).first()).toBeVisible();

    // Flip to transcript mode via the modal toggle.
    await page.getByRole("button", { name: "Show transcript" }).click();
    await expect(page.getByText(/alpha line/)).toBeVisible();

    const after = await urlParams(page);
    expect(after.get("vm")).toBeNull(); // transcript = default = absent
    // The search-page params survive untouched.
    expect(after.get("m")).toBe("subs");
    expect(after.get("tk")).toBe("foo");
    expect(after.get("v")).toBe(`${CHANNEL_SLUG}/${VIDEO_CHAT_SMALL}`);
  });

  test("toggle back to chat re-sets vm=chat", async ({ page }) => {
    await page.goto(`/?v=${CHANNEL_SLUG}/${VIDEO_CHAT_SMALL}&vm=chat`);
    await expectModalOpen(page);

    await page.getByRole("button", { name: "Show transcript" }).click();
    await expect(page.getByText(/alpha line/)).toBeVisible();

    await page.getByRole("button", { name: "Show live chat" }).click();
    await expect(page.getByText(/chat message number 0/).first()).toBeVisible();

    const after = await urlParams(page);
    expect(after.get("vm")).toBe("chat");
  });
});