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

async function setQueueViaCustom(
  page: import("@playwright/test").Page,
  actionLabel: string,
  value: string,
) {
  await page
    .getByLabel(`queue for ${actionLabel}`, { exact: true })
    .selectOption({ label: "Custom…" });
  await page
    .getByLabel(`custom queue for ${actionLabel}`, { exact: true })
    .fill(value);
  await page
    .getByRole("button", { name: `save custom queue for ${actionLabel}` })
    .click();
}

test("the live head lists running before queued, oldest running first", async ({
  page,
}) => {
  await resetData("two-slow-channels");

  await generateReport(page, "slow-a");
  await page.goto(channelStage("slow-a", "playlist"));
  await setQueueViaCustom(page, "Sync", "qShared");
  await page.getByRole("button", { name: "Sync" }).click();
  await expect(page.getByLabel("Sync output")).toContainText("test-slow", {
    timeout: 15_000,
  });

  await generateReport(page, "slow-b");
  await page.goto(channelStage("slow-b", "playlist"));
  await page
    .getByLabel("queue for Sync", { exact: true })
    .selectOption({ label: "qShared" });
  await page.getByRole("button", { name: "Sync" }).click();
  await expect(page.getByLabel("Sync queue status")).toContainText("qShared", {
    timeout: 10_000,
  });

  await page.goto("/jobs");

  const rows = page.locator("tbody tr[data-live]");
  await expect(rows).toHaveCount(2, { timeout: 15_000 });
  await expect(rows.nth(0)).toContainText("slow-a");
  await expect(rows.nth(1)).toContainText("slow-b");
  await expect(rows.nth(0).getByText("running", { exact: true })).toBeVisible();
  await expect(rows.nth(1).getByText("queued", { exact: true })).toBeVisible();

  // Nav badge: Jobs counts running + queued; the separate Active badge is gone
  // with the page.
  await expect(page.getByLabel("2 active jobs")).toHaveText("2");
});