import { MoonIcon, SunIcon } from "@octanejs/phosphor-icons";
import { useEffect, useState } from "octane";
import { Button } from "octane-kumo/components/button";

export function ThemeToggle() {
  const [dark, setDark] = useState(false);

  useEffect(() => {
    const system = window.matchMedia("(prefers-color-scheme: dark)");
    const sync = () => {
      setDark(document.documentElement.dataset.mode === "dark");
    };
    const followSystem = () => {
      if (!document.documentElement.dataset.themePreference) {
        document.documentElement.dataset.mode = system.matches
          ? "dark"
          : "light";
        sync();
      }
    };
    sync();
    system.addEventListener("change", followSystem);
    return () => system.removeEventListener("change", followSystem);
  }, []);

  const label = dark ? "Switch to light mode" : "Switch to dark mode";
  return (
    <Button
      variant="ghost"
      shape="square"
      icon={dark ? SunIcon : MoonIcon}
      aria-label={label}
      title={label}
      onClick={() => {
        const mode = dark ? "light" : "dark";
        document.documentElement.dataset.mode = mode;
        document.documentElement.dataset.themePreference = mode;
        setDark(mode === "dark");
        try {
          localStorage.setItem("flarebot-theme", mode);
        } catch {
          // The toggle still works when browser storage is unavailable.
        }
      }}
    />
  );
}