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

test.describe("video modal — open + mode inheritance", () => {
  test.beforeEach(async ({ page }) => {
    await installRoutes(page);
  });

  test("transcript hit click opens modal in transcript mode (no vm)", async ({
    page,
  }) => {
    await page.goto(`/?v=${CHANNEL_SLUG}/${VIDEO_TRANSCRIPT_ONLY}`);
    await expectModalOpen(page);

    const params = await urlParams(page);
    expect(params.get("v")).toBe(`${CHANNEL_SLUG}/${VIDEO_TRANSCRIPT_ONLY}`);
    expect(params.get("vm")).toBeNull();

    // Transcript cues from the fixture are visible.
    await expect(page.getByText(/alpha line/)).toBeVisible();

    // Chat toggle button is present, labeled with the target state.
    await expect(
      page.getByRole("button", { name: "Show live chat" }),
    ).toBeVisible();
  });

  test("chat hit click opens modal in chat mode with vm=chat", async ({
    page,
  }) => {
    await page.goto(
      `/?v=${CHANNEL_SLUG}/${VIDEO_CHAT_SMALL}&vm=chat`,
    );
    await expectModalOpen(page);

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

    // First chat cue from the small fixture is rendered.
    await expect(page.getByText(/chat message number 0/).first()).toBeVisible();

    // Toggle button shows the transcript target state.
    await expect(
      page.getByRole("button", { name: "Show transcript" }),
    ).toBeVisible();

    // Chat author is rendered separately in gray.
    const authorEl = page.getByText("@user0:").first();
    await expect(authorEl).toBeVisible();
  });

  test("opening at ?t= highlights the corresponding cue", async ({ page }) => {
    await page.goto(
      `/?v=${CHANNEL_SLUG}/${VIDEO_TRANSCRIPT_ONLY}&t=51`,
    );
    await expectModalOpen(page);

    // The beta line starts at 50, gamma at 100 — t=51 picks beta.
    const beta = page.locator("li", { hasText: "beta line" });
    await expect(beta).toHaveClass(/bg-blue-950/);
  });
});