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

test.describe("live-chat — large list interaction", () => {
  test.beforeEach(async ({ page }) => {
    await installRoutes(page);
  });

  test("opens a 5k-cue live chat within budget", async ({ page }) => {
    test.setTimeout(20_000);
    const start = Date.now();
    await page.goto(
      `/?v=${CHANNEL_SLUG}/${VIDEO_CHAT_LARGE}&vm=chat`,
    );
    await expectModalOpen(page);

    // At least one chat message visible after open.
    await expect(page.getByText(/\(#0\)/).first()).toBeVisible();
    const elapsed = Date.now() - start;
    // Generous budget — before the perf fixes a 5k list still renders, just
    // slowly. This is a smoke test that we don't blow the test timeout.
    expect(elapsed).toBeLessThan(15_000);
  });

  test("opening at ?t= highlights the corresponding chat cue", async ({
    page,
  }) => {
    // The large chat distributes ~5000 cues across an hour (3600s). Cue at
    // t≈360 should be around index 500.
    await page.goto(
      `/?v=${CHANNEL_SLUG}/${VIDEO_CHAT_LARGE}&vm=chat&t=360`,
    );
    await expectModalOpen(page);

    // Some cue near index 500 should carry the active highlight class.
    // We don't pin the exact index — just that *some* row is highlighted.
    const active = page.locator("li.bg-blue-950\\/50");
    await expect(active.first()).toBeVisible();
  });

  test("clicking a chat cue updates the active row", async ({ page }) => {
    await page.goto(
      `/?v=${CHANNEL_SLUG}/${VIDEO_CHAT_LARGE}&vm=chat`,
    );
    await expectModalOpen(page);

    // Click a row near the start. The corresponding cue becomes active.
    const target = page.getByText(/\(#5\)/).first();
    await target.scrollIntoViewIfNeeded();
    await target.click();
    // The clicked li should now carry the active background.
    const clickedLi = page.locator("li", { has: page.getByText(/\(#5\)/) });
    await expect(clickedLi).toHaveClass(/bg-blue-950/);
  });
});