"use client";
import { useEffect, useState } from "react";
import { Moon, Sun, Monitor } from "lucide-react";

type Theme = "light" | "dark" | "system";

function apply(theme: Theme) {
  const dark = theme === "dark" || (theme === "system" && window.matchMedia("(prefers-color-scheme: dark)").matches);
  document.documentElement.classList.toggle("dark", dark);
}

export function ThemeToggle({ className }: { className?: string }) {
  const [theme, setTheme] = useState<Theme>("light");
  useEffect(() => {
    setTheme((localStorage.getItem("immbot-theme") as Theme) || "light");
  }, []);
  const cycle = () => {
    const order: Theme[] = ["light", "dark", "system"];
    const next = order[(order.indexOf(theme) + 1) % 3];
    setTheme(next);
    localStorage.setItem("immbot-theme", next);
    apply(next);
  };
  const label = theme === "light" ? "Thème clair" : theme === "dark" ? "Thème sombre" : "Thème système";
  return (
    <button
      onClick={cycle}
      title={label + " — cliquer pour changer"}
      aria-label={label}
      className={`p-2 rounded-lg text-muted hover:text-fg hover:bg-surface-2 dark:hover:bg-brand-900/40 transition-colors ${className ?? ""}`}
    >
      {theme === "light" ? <Sun size={17} /> : theme === "dark" ? <Moon size={17} /> : <Monitor size={17} />}
    </button>
  );
}