import { render, screen, fireEvent, cleanup } from "@testing-library/react";
import { it, expect, beforeEach } from "vitest";
import { ThemeToggle, getStoredTheme } from "./ThemeToggle";

beforeEach(() => {
  try {
    localStorage.clear();
  } catch {}
  document.documentElement.removeAttribute("data-seed-color-mode");
});

it("defaults to system, and picks the persisted choice back up on remount", () => {
  expect(getStoredTheme()).toBe("system");

  render(<ThemeToggle />);
  expect(screen.getByText("Систем")).toBeInTheDocument();
  expect(screen.getByText("Гэрэл")).toBeInTheDocument();
  expect(screen.getByText("Харанхуй")).toBeInTheDocument();

  cleanup();
  localStorage.setItem("mercury.theme", "dark");
  render(<ThemeToggle />);
  const darkInput = screen.getByText("Харанхуй").closest("label")!.querySelector("input")!;
  expect(darkInput).toBeChecked();
});

it("selecting dark persists the choice and flips the live data-seed-color-mode attribute", () => {
  render(<ThemeToggle />);

  const darkInput = screen.getByText("Харанхуй").closest("label")!.querySelector("input")!;
  fireEvent.click(darkInput);

  expect(getStoredTheme()).toBe("dark");
  expect(document.documentElement.getAttribute("data-seed-color-mode")).toBe("dark-only");
});

it("selecting light and back to system round-trips through localStorage + the html attribute", () => {
  render(<ThemeToggle />);

  const lightInput = screen.getByText("Гэрэл").closest("label")!.querySelector("input")!;
  fireEvent.click(lightInput);
  expect(getStoredTheme()).toBe("light");
  expect(document.documentElement.getAttribute("data-seed-color-mode")).toBe("light-only");

  const systemInput = screen.getByText("Систем").closest("label")!.querySelector("input")!;
  fireEvent.click(systemInput);
  expect(getStoredTheme()).toBe("system");
  expect(document.documentElement.getAttribute("data-seed-color-mode")).toBe("system");
});