import { test, expect } from "@playwright/test";
import { openApp } from "./helpers";

// Locks the feed's core contract: it renders cards, a filter re-queries it and surfaces a
// removable chip, and its virtualized list windows in fresh rows as you scroll.
test.describe("feed", () => {
  test("a filter re-queries the feed and surfaces a removable chip", async ({ page }) => {
    await openApp(page);
    await expect(page.getByTestId("video-card").first()).toBeVisible();

    const count = page.getByTestId("feed-result-count");
    await expect(count).toHaveText(/\d/);
    const baseline = await count.innerText();

    // Clean baseline: default filters, so no chips and "unwatched" is the active show.
    await expect(page.getByTestId("active-filter-chip")).toHaveCount(0);
    await expect(page.getByTestId("feed-show-unwatched")).toHaveAttribute("aria-pressed", "true");

    // Narrow to "watched" — the seed guarantees exactly one, a real deterministic change.
    await page.getByTestId("feed-show-watched").click();
    await expect(page.getByTestId("active-filter-chip")).toHaveCount(1);
    await expect(count).not.toHaveText(baseline);

    // Remove the chip → default show restored, chips gone.
    await page.getByTestId("active-filter-chip").click();
    await expect(page.getByTestId("active-filter-chip")).toHaveCount(0);
    await expect(page.getByTestId("feed-show-unwatched")).toHaveAttribute("aria-pressed", "true");
  });

  test("scrolling virtualizes in fresh cards", async ({ page }) => {
    await openApp(page);
    await expect(page.getByTestId("video-card").first()).toBeVisible();

    const renderedIds = () =>
      page
        .getByTestId("video-card")
        .evaluateAll((els) => els.map((e) => e.getAttribute("data-video-id")));

    const before = await renderedIds();
    expect(before.length).toBeGreaterThan(0);

    // The feed scrolls inside <main> (role="main"), not the window.
    await page.getByRole("main").evaluate((el) => el.scrollBy(0, 5000));

    // A windowed list renders different rows once scrolled.
    await expect
      .poll(async () => (await renderedIds()).some((id) => id && !before.includes(id)))
      .toBe(true);
  });

  // Bug 4 (Platform S4): the toolbar (show/content chips, count, sort, view) is fixed chrome — it
  // pins in the shell's toolbar band above the scroller, so it stays put while the cards scroll.
  test("the feed toolbar stays pinned while cards scroll", async ({ page }) => {
    await openApp(page);
    const count = page.getByTestId("feed-result-count");
    await expect(count).toBeVisible();
    const topBefore = await count.evaluate((el) => el.getBoundingClientRect().top);

    await page.getByRole("main").evaluate((el) => el.scrollBy(0, 4000));

    await expect(count).toBeInViewport();
    const topAfter = await count.evaluate((el) => el.getBoundingClientRect().top);
    expect(Math.abs(topAfter - topBefore)).toBeLessThan(4);
  });

  // Bug 3 (Platform S4): changing a filter is a fresh result set, so the scroll jumps back to the
  // top rather than stranding you deep in the old list's offset.
  test("a new filter resets the scroll to the top", async ({ page }) => {
    await openApp(page);
    await expect(page.getByTestId("video-card").first()).toBeVisible();

    await page.getByRole("main").evaluate((el) => el.scrollBy(0, 4000));
    expect(await page.getByRole("main").evaluate((el) => el.scrollTop)).toBeGreaterThan(500);

    // Switch the show filter → a different result set → back to the top.
    await page.getByTestId("feed-show-all").click();
    await expect
      .poll(() => page.getByRole("main").evaluate((el) => el.scrollTop))
      .toBeLessThan(50);
  });
});