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

test("theme switcher persists the explicit choice and keeps browser metadata in sync", async ({ page, context }) => {
  await context.clearCookies();
  await page.goto("/");

  await expect(page.locator("html")).not.toHaveAttribute("data-theme");
  await expect(page.locator('[data-theme-option="system"]')).toHaveAttribute("aria-pressed", "true");

  await page.locator('[data-theme-option="dark"]').click();
  await expect(page.locator("html")).toHaveAttribute("data-theme", "dark");
  await expect(page.locator('[data-theme-option="dark"]')).toHaveAttribute("aria-pressed", "true");
  await expect(page.locator('meta[data-theme-color="dark"]')).toHaveAttribute("media", "all");
  await expect(page.locator('meta[data-theme-color="light"]')).toHaveAttribute("media", "not all");

  const cookies = await context.cookies();
  expect(cookies.find(cookie => cookie.name === "rf4-theme")).toMatchObject({ value: "dark", sameSite: "Lax" });

  await page.reload();
  await expect(page.locator("html")).toHaveAttribute("data-theme", "dark");
  await expect(page.locator('[data-theme-option="dark"]')).toHaveAttribute("aria-pressed", "true");

  await page.locator('[data-theme-option="system"]').click();
  await expect(page.locator("html")).not.toHaveAttribute("data-theme");
  await expect(page.locator('[data-theme-option="system"]')).toHaveAttribute("aria-pressed", "true");
  await expect(page.locator('meta[data-theme-color="dark"]')).toHaveAttribute("media", "(prefers-color-scheme: dark)");
});

test("reduced motion disables decorative animation loops", async ({ page }) => {
  await page.emulateMedia({ reducedMotion: "reduce" });
  await page.goto("/");

  const motion = await page.locator(".pulse-orb span").evaluate(element => {
    const style = getComputedStyle(element);
    return { duration: style.animationDuration, iterations: style.animationIterationCount };
  });
  expect(motion.duration).toBe("0.01s");
  expect(motion.iterations).toBe("1");
});