import { fireEvent, render, screen, waitFor } from "@testing-library/react";
import { beforeEach, describe, expect, it } from "vitest";

import { ThemeProvider } from "../theme/ThemeProvider";
import { ThemeToggle } from "../components/ThemeToggle";

describe("ThemeToggle", () => {
  beforeEach(() => {
    window.localStorage.clear();
    document.documentElement.removeAttribute("style");
    document.documentElement.classList.remove("dark");
  });

  it("toggles the html dark class", () => {
    render(
      <ThemeProvider>
        <ThemeToggle />
      </ThemeProvider>
    );

    fireEvent.click(screen.getByRole("button"));

    expect(document.documentElement.classList.contains("dark")).toBe(true);
  });

  it("hydrates persisted brand theme values on startup", async () => {
    window.localStorage.setItem(
      "mrp.theme.brand-profile",
      JSON.stringify({
        theme: {
          primaryColor: "#112233",
          accentColor: "#445566",
          surfaceColor: "#778899",
          fontFamily: "Manrope",
        },
      })
    );

    render(
      <ThemeProvider>
        <div>Theme</div>
      </ThemeProvider>
    );

    await waitFor(() => {
      expect(document.documentElement.style.getPropertyValue("--color-brand")).toBe("17 34 51");
      expect(document.documentElement.style.getPropertyValue("--color-accent")).toBe("68 85 102");
      expect(document.documentElement.style.getPropertyValue("--color-surface-brand")).toBe("119 136 153");
      expect(document.documentElement.style.getPropertyValue("--font-family")).toBe("Manrope");
    });
  });
});