"use client";

import { useEffect, useState } from "react";
import { Moon, Sun, SunMoon } from "lucide-react";
import { Button } from "@/components/ui/button";
import { useI18n } from "@/lib/i18n";

export function ThemeToggle() {
  const [mounted, setMounted] = useState(false);
  const [isDark, setIsDark] = useState(false);
  const { t } = useI18n();

  useEffect(() => {
    const root = document.documentElement;
    const media = window.matchMedia("(prefers-color-scheme: dark)");
    const syncSystemTheme = () => {
      if (!window.localStorage.getItem("wtr:theme")) {
        root.classList.toggle("dark", media.matches);
        setIsDark(media.matches);
      }
    };
    const animationFrame = window.requestAnimationFrame(() => {
      setIsDark(root.classList.contains("dark"));
      setMounted(true);
    });
    media.addEventListener("change", syncSystemTheme);
    return () => {
      window.cancelAnimationFrame(animationFrame);
      media.removeEventListener("change", syncSystemTheme);
    };
  }, []);

  const toggleTheme = () => {
    const nextIsDark = !isDark;
    document.documentElement.classList.toggle("dark", nextIsDark);
    window.localStorage.setItem("wtr:theme", nextIsDark ? "dark" : "light");
    setIsDark(nextIsDark);
  };

  return (
    <Button
      variant="icon"
      type="button"
      aria-label={!mounted ? t("theme.change") : isDark ? t("theme.light") : t("theme.dark")}
      onClick={toggleTheme}
    >
      {!mounted ? <SunMoon className="size-4" /> : isDark ? <Sun className="size-4" /> : <Moon className="size-4" />}
    </Button>
  );
}