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

// A record's other English tracks (lib/captionTracks.ts). VIDEO_TRANSCRIPT_ONLY
// carries an en-orig primary and an uploaded `en` that says "zeppelin" at
// 200 s, which its primary never does; the other fixture videos have no
// alternate.

test.use({
  permissions: ["clipboard-read", "clipboard-write"],
});

const SLUG = `${CHANNEL_SLUG}/${VIDEO_TRANSCRIPT_ONLY}`;
const leafInput = (page: Page) =>
  page.locator('input[data-testid^="leaf-query-"]').first();

test.describe("transcript tracks", () => {
  test.beforeEach(async ({ page }) => {
    await installRoutes(page);
  });

  test("the reader shows the primary and switches to the uploaded captions", async ({ page }) => {
    await page.goto(`/?v=${SLUG}`);
    await expectModalOpen(page);
    const cues = page.getByTestId("cue-list");
    await expect(cues).toContainText("transcript-only video — alpha line");

    const switcher = page.getByTestId("track-switcher");
    await expect(switcher).toHaveValue("en-orig");
    await expect(switcher.locator("option")).toHaveText([
      "original audio captions (default)",
      "uploaded captions",
    ]);
    await switcher.selectOption("en");
    await expect(cues).toContainText("uploaded words about a zeppelin");
    await expect(cues).not.toContainText("alpha line");
    expect(new URL(page.url()).searchParams.get("vt")).toBe("en");

    // The share link reopens this track; back on the primary, it is off the URL.
    await page.getByRole("button", { name: "Copy share link at current time" }).click();
    const clip = new URL(await page.evaluate(() => navigator.clipboard.readText()));
    expect(clip.searchParams.get("vt")).toBe("en");
    await switcher.selectOption("en-orig");
    await expect(cues).toContainText("alpha line");
    expect(new URL(page.url()).searchParams.get("vt")).toBeNull();
  });

  test("a record with no alternate shows no switcher", async ({ page }) => {
    await page.goto(`/?v=${CHANNEL_SLUG}/vid-chat-small`);
    await expectModalOpen(page);
    await expect(page.getByTestId("cue-list")).toContainText("small chat video");
    await expect(page.getByTestId("track-switcher")).toHaveCount(0);
  });

  test("search finds a word only the uploaded captions hold, says so, and opens that track", async ({ page }) => {
    await page.goto("/");
    await leafInput(page).fill("zeppelin");
    await page.getByTestId("search-submit").click();

    const card = page.locator(`[data-result-slug="${SLUG}"]`);
    await expect(card).toBeVisible({ timeout: 15_000 });
    await expect(page.locator("[data-card-header]")).toHaveCount(1);
    const hit = page.getByRole("button", { name: /in uploaded captions/i }).first();
    await expect(hit).toContainText("zeppelin");
    await hit.click();

    await expectModalOpen(page);
    await expect(page.getByTestId("track-switcher")).toHaveValue("en");
    await expect(page.getByTestId("cue-list")).toContainText("uploaded words about a zeppelin");
  });
});