import { expect, test, type Page } from "@playwright/test";
import { CHANNEL } from "./fixtures/data";
import { installRoutes, openFilters } from "./helpers";

const STORAGE_KEY = "ytdlp-tb:export-filters";

// Smoke-test the post-refactor search UI:
//   - "slow / medium / fast" cost badges are gone from each layer's scope.
//   - "Reset layers" sits next to Search and reverts the builder to one empty
//     transcripts leaf.
//   - The Profile row renders *above* the QueryBuilder, regardless of the
//     channel count.
//   - Share button lives inside the Profile row.
//   - The dirty-marker uses a `•` glyph rather than the word "(unsaved)".
//   - A "Revert" button shows up only when the active profile is dirty, and
//     restores the saved snapshot.
//   - "Reset everything" wipes both layers and filters (covered with a
//     multi-channel route override so the gated reset row renders).

test.describe("search UI — profile row + reset refinements", () => {
  test.beforeEach(async ({ page }) => {
    await installRoutes(page);
  });

  test("scope dropdown no longer renders slow/medium/fast cost badges", async ({
    page,
  }) => {
    await page.goto("/");
    // Wait for the builder to render (the scope <select> is its
    // first non-input control).
    const scope = page.locator('[data-testid^="leaf-scope-"]').first();
    await expect(scope).toBeVisible();
    // The badge used to sit as a sibling <span> right after the <select>.
    // After the change, no such literal text should be in the DOM.
    await expect(page.getByText(/^slow$/i)).toHaveCount(0);
    await expect(page.getByText(/^medium$/i)).toHaveCount(0);
    await expect(page.getByText(/^fast$/i)).toHaveCount(0);
  });

  test("Reset layers reverts a multi-layer tree to one empty leaf", async ({
    page,
  }) => {
    // Seed a 2-leaf tree via the canonical `?qt=` param.
    const tree = {
      k: "g",
      o: "AND",
      c: [
        { k: "l", q: "alpha", s: "transcripts" },
        { k: "l", q: "beta", s: "transcripts" },
      ],
    };
    await page.goto(`/?qt=${encodeURIComponent(JSON.stringify(tree))}`);

    // The builder should be in full (non-compact) mode with 2 leaves.
    const leafInputs = page.locator('[data-testid^="leaf-query-"]');
    await expect(leafInputs).toHaveCount(2);

    const reset = page.getByTestId("reset-layers");
    await expect(reset).toBeEnabled();
    await reset.click();

    // After reset: one empty leaf, button disabled.
    await expect(leafInputs).toHaveCount(1);
    await expect(leafInputs.first()).toHaveValue("");
    await expect(reset).toBeDisabled();
  });

  test("Profile row lives in the filters panel, even with one channel", async ({
    page,
  }) => {
    await page.goto("/");
    // A profile IS a saved filter+query set, so it sits inside the filters
    // panel rather than as a third row above the search box. Its controls are
    // reachable wherever the panel is placed (inline from xl, a sheet below).
    await openFilters(page);
    const panel = page.getByTestId("filters-panel");
    const profilesRow = panel.getByTestId("profiles-row");
    await expect(profilesRow).toBeVisible();
    await expect(page.getByTestId("query-builder")).toBeVisible();
  });

  test("Share button lives inside the Profile row", async ({ page }) => {
    await page.goto("/");
    await openFilters(page);
    const profilesRow = page.getByTestId("profiles-row");
    const shareInRow = profilesRow.getByRole("button", {
      name: "Share current search",
    });
    await expect(shareInRow).toBeVisible();
  });

  // A profile + URL share-v1 overlay combo that makes committed diverge from
  // the active profile snapshot without going through commitSearch (which
  // would otherwise clear `activeProfileName`). We seed `query` on the
  // profile and pass the *same* `qt=` in the URL so the snapshot's `query`
  // field matches what `committedSnapshot.query` will be — that way the
  // only diverging field is the filter we want to test (nol).
  const ALPHA_TREE_QS = encodeURIComponent(
    JSON.stringify({
      k: "g",
      o: "AND",
      c: [{ k: "l", q: "alpha", s: "transcripts" }],
    }),
  );
  const PROFILE_QUERY = JSON.stringify({
    k: "g",
    o: "AND",
    c: [{ k: "l", q: "alpha", s: "transcripts" }],
  });

  async function seedDirtyProfile(page: Page) {
    await page.goto("/");
    await page.evaluate(
      ({ key, value }) => {
        window.localStorage.setItem(key, value);
      },
      {
        key: STORAGE_KEY,
        value: JSON.stringify({
          v: 1,
          working: {
            channels: { included: [], excluded: [] },
            nol: true,
            query: PROFILE_QUERY,
          },
          profiles: {
            p1: {
              channels: { included: [], excluded: [] },
              nol: true,
              query: PROFILE_QUERY,
            },
          },
          activeProfileName: "p1",
        }),
      },
    );

    // share-v1 overlay: Livestreams selected (nol=false) so committed
    // diverges from the profile (nol=true). Build the QS manually because
    // URLSearchParams.toString re-encodes the already-encoded `qt`.
    const qs = [
      `qt=${ALPHA_TREE_QS}`,
      "fv=1",
      `fc=${encodeURIComponent(CHANNEL)}`,
      "ft=v",
      "ft=l",
      "fa=a",
      "fa=r",
      "fav=a",
      "fav=d",
    ].join("&");
    await page.goto(`/?${qs}`);
  }

  test("dirty marker is a • glyph, not the word '(unsaved)'", async ({
    page,
  }) => {
    await seedDirtyProfile(page);

    // The profile is selected and the dirty dot is visible.
    await expect(page.getByTestId("profile-select")).toHaveValue("p1");
    const dot = page.getByTestId("profile-dirty-dot");
    await expect(dot).toBeVisible();
    await expect(dot).toHaveText("•");
    // "(unsaved)" still appears as the placeholder <option>, but never as a
    // sibling element next to the select. Scope the assertion to <span>s.
    const profilesRow = page.getByTestId("profiles-row");
    await expect(
      profilesRow.locator('span', { hasText: '(unsaved)' }),
    ).toHaveCount(0);
  });

  test("Revert button restores the saved profile snapshot", async ({
    page,
  }) => {
    await seedDirtyProfile(page);

    const livestreams = page.getByRole("checkbox", { name: "Livestreams" });
    await expect(livestreams).toBeChecked(); // URL overlay selected it
    await expect(page.getByTestId("profile-dirty-dot")).toBeVisible();

    await page.getByTestId("profile-revert").click();

    // Profile p1 has nol=true → Livestreams unchecked, dot gone.
    await expect(livestreams).not.toBeChecked();
    await expect(page.getByTestId("profile-dirty-dot")).toHaveCount(0);
  });
});

// "Reset everything" lives in the channel-filters reset row, which is gated
// on `channelOptions.length > 1`. Override the summaries manifest to expose
// two channels so the button renders.
async function installTwoChannelRoutes(page: Page) {
  await installRoutes(page);
  const SECOND = "Second Channel";
  await page.route("**/summaries/manifest.json", async (route) => {
    await route.fulfill({
      status: 200,
      contentType: "application/json",
      body: JSON.stringify({
        version: 2,
        totalCount: 3,
        pageSize: 1000,
        pageCount: 1,
        generatedAt: new Date().toISOString(),
        channels: [
          { name: CHANNEL, count: 3 },
          { name: SECOND, count: 0 },
        ],
      }),
    });
  });
}

test.describe("search UI — Reset everything (multi-channel fixture)", () => {
  test.beforeEach(async ({ page }) => {
    await installTwoChannelRoutes(page);
  });

  test("clears layers AND filters and drops the profile pointer", async ({
    page,
  }) => {
    // Seed a profile so we can verify the pointer gets nulled too.
    await page.goto("/");
    await page.evaluate(
      ({ key, value }) => {
        window.localStorage.setItem(key, value);
      },
      {
        key: STORAGE_KEY,
        value: JSON.stringify({
          v: 1,
          working: { channels: { included: [], excluded: [] } },
          profiles: {
            p1: { channels: { included: [], excluded: [] } },
          },
          activeProfileName: "p1",
        }),
      },
    );

    // Reload with a non-empty `qt=` and a filter overlay so both halves of
    // "everything" are non-default.
    const tree = {
      k: "g",
      o: "AND",
      c: [{ k: "l", q: "alpha", s: "transcripts" }],
    };
    await page.goto(`/?qt=${encodeURIComponent(JSON.stringify(tree))}`);
    await page.getByRole("checkbox", { name: "Livestreams" }).uncheck();

    // Sanity: the leaf input has "alpha" and the Reset everything button
    // is now present (multi-channel fixture).
    const leafInput = page
      .locator('[data-testid^="leaf-query-"]')
      .first();
    await expect(leafInput).toHaveValue("alpha");

    await page.getByTestId("reset-everything").click();

    // Layers reset to one empty leaf.
    await expect(
      page.locator('[data-testid^="leaf-query-"]'),
    ).toHaveCount(1);
    await expect(leafInput).toHaveValue("");

    // Filters back to defaults — Livestreams selected again.
    await expect(
      page.getByRole("checkbox", { name: "Livestreams" }),
    ).toBeChecked();

    // Profile pointer cleared in storage.
    await expect
      .poll(async () =>
        page.evaluate((key) => {
          const raw = window.localStorage.getItem(key);
          if (!raw) return null;
          return (JSON.parse(raw) as { activeProfileName: string | null })
            .activeProfileName;
        }, STORAGE_KEY),
      )
      .toBeNull();
  });
});