import { expect, loginAs, test } from "./fixtures";

// Playwright's default browser color-scheme emulation is "light", which
// would make styles.css's `@media (prefers-color-scheme: light)` block
// apply even with no `data-theme` attribute set, collapsing the "dark"
// and "light" reads below into the same value. Pin the emulated OS
// preference to dark so the initial (no localStorage) state is
// deterministic and the toggle's own explicit `data-theme` write -- not
// an OS-preference coincidence -- is what the test is proving out.
test.use({ colorScheme: "dark" });

test.describe("theme toggle", () => {
  test("switching to light theme persists across reload and changes the rendered background", async ({ page }) => {
    await loginAs(page, "hub-viewer");
    await page.goto("/settings");
    const darkBackground = await page.evaluate(() => getComputedStyle(document.documentElement).backgroundColor);
    await page.getByRole("button", { name: "Light" }).click();
    const lightBackground = await page.evaluate(() => getComputedStyle(document.documentElement).backgroundColor);
    expect(lightBackground).not.toBe(darkBackground);
    await page.reload();
    const afterReload = await page.evaluate(() => getComputedStyle(document.documentElement).backgroundColor);
    expect(afterReload).toBe(lightBackground);
    await page.getByRole("button", { name: "Dark" }).click();
  });

  test("appearance toggle exposes which theme is selected, not just the applied state", async ({ page }) => {
    // Regression test alongside the density toggle fix: SettingsPage had no
    // state tracking the current theme at all, so Dark/Light always
    // rendered as the same solid pill regardless of which was active.
    await loginAs(page, "hub-viewer");
    await page.goto("/settings");
    const dark = page.getByRole("button", { name: "Dark" });
    const light = page.getByRole("button", { name: "Light" });
    await expect(dark).toHaveAttribute("aria-pressed", "true");
    await expect(light).toHaveAttribute("aria-pressed", "false");
    await light.click();
    await expect(dark).toHaveAttribute("aria-pressed", "false");
    await expect(light).toHaveAttribute("aria-pressed", "true");
    await dark.click();
  });
});