import { test, expect } from "@playwright/test";
import { channelVideos, generateReport, resetData } from "./helpers";

// The video workspace: the list on the left, the selected video's detail on the
// right, both always present.
//
// This spec used to assert the opposite — a collapsed-by-default detail strip
// with expand/collapse toggles and a scroll-into-view on selection. All of that
// existed because the pane was squeezed onto a page it shared with the stage
// panels; on a route of its own there is nothing to make room for, so the
// affordances are gone and their absence is what is asserted now.

test("both panes are present, and the selection drives the detail pane", async ({
  page,
}) => {
  await resetData("one-transcribe-channel-with-audio");
  await generateReport(page, "test-transcribe");
  await page.goto(channelVideos("test-transcribe"));

  // Nothing selected: the list is there and the detail pane says what to do.
  await expect(page.getByLabel("videos", { exact: true })).toBeVisible();
  await expect(
    page.getByText("Select a video from the list to view actions."),
  ).toBeVisible();
  await expect(page.getByLabel("pipeline status")).toBeHidden();
  // No collapse machinery survives the move.
  await expect(page.getByLabel("expand video", { exact: true })).toHaveCount(0);
  await expect(page.getByLabel("collapse video", { exact: true })).toHaveCount(0);

  // Clicking a video updates the URL and fills the detail pane.
  await page.getByLabel("open vidA").click();
  await expect(page).toHaveURL(/[?&]video=vidA\b/);
  await expect(page.getByLabel("pipeline status")).toBeVisible();
  await expect(page.getByLabel("files for vidA")).toBeVisible();

  // Selecting a different video swaps the pane's contents.
  await page.getByLabel("open vidB").click();
  await expect(page).toHaveURL(/[?&]video=vidB\b/);
  await expect(page.getByLabel("files for vidB")).toBeVisible();
});

test("a deep link opens straight onto the selected video", async ({ page }) => {
  await resetData("one-transcribe-channel-with-audio");
  await page.goto(channelVideos("test-transcribe", { video: "vidA" }));

  await expect(page.getByLabel("files for vidA")).toBeVisible();
  await expect(page.getByLabel("pipeline status")).toBeVisible();

  // Dropping the selection returns the placeholder.
  await generateReport(page, "test-transcribe");
  await page.goto(channelVideos("test-transcribe"));
  await expect(
    page.getByText("Select a video from the list to view actions."),
  ).toBeVisible();
  await expect(page.getByLabel("pipeline status")).toBeHidden();
});

test("on mobile the panes stack, list first", async ({ page }) => {
  await page.setViewportSize({ width: 600, height: 900 });
  await resetData("one-transcribe-channel-with-audio");
  await generateReport(page, "test-transcribe");
  await page.goto(channelVideos("test-transcribe"));

  await expect(page.getByLabel("videos", { exact: true })).toBeVisible();
  await expect(
    page.getByText("Select a video from the list to view actions."),
  ).toBeVisible();
  await expect(page.getByLabel("expand video", { exact: true })).toHaveCount(0);
});