import { expect, test, type Page, type Route } from "@playwright/test";
import {
  DENSE_HIT_COUNT,
  DENSE_VIDEO_INDEX,
  VIDEO_COUNT,
  channelTranscriptsManifest,
  slug,
  subsManifest,
  summaries,
  summariesManifest,
  transcriptPage,
} from "./fixtures/many-results";

async function fulfillJson(route: Route, body: unknown) {
  await route.fulfill({
    status: 200,
    contentType: "application/json",
    body: JSON.stringify(body),
  });
}

async function installBulkRoutes(page: Page) {
  await page.route("**/summaries/manifest.json", async (route) => {
    await fulfillJson(route, summariesManifest());
  });
  await page.route("**/summaries/page-*.json", async (route) => {
    await fulfillJson(route, summaries());
  });
  await page.route(
    /\/transcripts\/[^/]+\/manifest\.json$/,
    async (route) => {
      await fulfillJson(route, channelTranscriptsManifest());
    },
  );
  await page.route(/\/transcripts\/[^/]+\/page-\d+\.json$/, async (route) => {
    await fulfillJson(route, transcriptPage());
  });
  await page.route("**/subs/manifest.json", async (route) => {
    await fulfillJson(route, subsManifest());
  });
}

type QtTree = {
  k: "g";
  o: "AND";
  c: Array<{
    k: "l";
    q: string;
    s: "transcripts" | "chat" | "metadata";
  }>;
};

function qt(root: QtTree): string {
  return encodeURIComponent(JSON.stringify(root));
}

const DENSE_SLUG = slug(DENSE_VIDEO_INDEX);
const LAST_SLUG = slug(VIDEO_COUNT - 1);

async function gotoBulkSearch(page: Page) {
  const tree: QtTree = {
    k: "g",
    o: "AND",
    c: [{ k: "l", q: "alpha", s: "transcripts" }],
  };
  await page.goto(`/?qt=${qt(tree)}`);
}

test.describe("search results virtualization", () => {
  test.beforeEach(async ({ page }) => {
    await installBulkRoutes(page);
  });

  test("renders only a virtualized window of cards for a large result set", async ({
    page,
  }) => {
    await gotoBulkSearch(page);
    // Wait for the results summary to show all 120 videos.
    await expect(page.locator('[data-testid="results-summary"]')).toContainText(
      `${VIDEO_COUNT} videos`,
    );

    // First card is on-screen; last card is not yet rendered.
    await expect(
      page.locator(`[data-card-header][data-result-slug="${DENSE_SLUG}"]`),
    ).toBeVisible();
    await expect(
      page.locator(`[data-card-header][data-result-slug="${LAST_SLUG}"]`),
    ).toHaveCount(0);

    // Virtualization should keep the rendered card count far below the total
    // (120 cards plus their leaf headers + hits would otherwise be in the
    // thousands of nodes; we just need any non-trivial reduction).
    const renderedCardCount = await page
      .locator("[data-card-header]")
      .count();
    expect(renderedCardCount).toBeGreaterThan(0);
    expect(renderedCardCount).toBeLessThan(VIDEO_COUNT);
  });

  test("scrolling reveals later cards and recycles earlier ones", async ({
    page,
  }) => {
    await gotoBulkSearch(page);
    await expect(page.locator('[data-testid="results-summary"]')).toContainText(
      `${VIDEO_COUNT} videos`,
    );

    // Initially the dense (first) video is rendered.
    await expect(
      page.locator(`[data-card-header][data-result-slug="${DENSE_SLUG}"]`),
    ).toBeVisible();

    // Scroll to the bottom; the last slug must appear, and the dense first
    // slug should drop out of the DOM (rows recycled).
    await page.evaluate(() => window.scrollTo(0, document.body.scrollHeight));
    await expect(
      page.locator(`[data-card-header][data-result-slug="${LAST_SLUG}"]`),
    ).toBeVisible();
    await expect(
      page.locator(`[data-card-header][data-result-slug="${DENSE_SLUG}"]`),
    ).toHaveCount(0);
  });

  test("dense card renders all its hits when mounted, none when scrolled away", async ({
    page,
  }) => {
    await gotoBulkSearch(page);
    await expect(page.locator('[data-testid="results-summary"]')).toContainText(
      `${VIDEO_COUNT} videos`,
    );

    // The dense card is the first in the list. A card shows the first 8 hits
    // and offers the rest behind one button (the per-card hit cap); once it is
    // expanded, all of its hit rows are in the DOM — intra-card layout is
    // normal flow, not nested virtualization.
    const denseCard = page.locator(
      `[data-card-header][data-result-slug="${DENSE_SLUG}"]`,
    );
    const denseHitButtons = denseCard.locator("li button");
    await expect(denseHitButtons).toHaveCount(8);
    await denseCard
      .getByRole("button", { name: `Show all ${DENSE_HIT_COUNT} hits` })
      .click();
    await expect(denseHitButtons).toHaveCount(DENSE_HIT_COUNT);

    // Scrolling past the dense card unmounts it (along with all of its
    // hit buttons) — that's the per-card virtualization the new
    // structure delivers.
    await page.evaluate(() => window.scrollTo(0, document.body.scrollHeight));
    await expect(
      page.locator(`[data-card-header][data-result-slug="${DENSE_SLUG}"]`),
    ).toHaveCount(0);
    await expect(denseHitButtons).toHaveCount(0);
  });

  test("the legacy Show more videos button is gone", async ({ page }) => {
    await gotoBulkSearch(page);
    await expect(page.locator('[data-testid="results-summary"]')).toContainText(
      `${VIDEO_COUNT} videos`,
    );
    await expect(
      page.getByRole("button", { name: /Show more videos/ }),
    ).toHaveCount(0);
  });

  test("clicking a card header opens the modal for that slug", async ({
    page,
  }) => {
    await gotoBulkSearch(page);
    await expect(page.locator('[data-testid="results-summary"]')).toContainText(
      `${VIDEO_COUNT} videos`,
    );

    // The dense card is the first one rendered; clicking its header title button
    // (data-card-open, not the select checkbox / Ask action or a nested hit-row
    // button) opens the modal for it.
    await page
      .locator(`[data-card-header][data-result-slug="${DENSE_SLUG}"] [data-card-open]`)
      .click();
    await page
      .getByRole("button", { name: "Mark clip start at current time" })
      .waitFor();
    const params = new URLSearchParams(
      await page.evaluate(() => window.location.search),
    );
    expect(params.get("v")).toBe(DENSE_SLUG);
  });
});