"use client"

import { useState } from "react"
import { Sun, Moon } from "lucide-react"

const STORAGE_KEY = "valabel-theme"

// Le script anti-flash du layout racine a déjà posé data-theme avant l'hydratation :
// on part de cette valeur plutôt que de la relire dans un effet.
function getInitialTheme(): "dark" | "light" {
  if (typeof document === "undefined") return "dark"
  return document.documentElement.getAttribute("data-theme") === "light" ? "light" : "dark"
}

export function ThemeToggle({ className }: { className?: string }) {
  const [theme, setTheme] = useState<"dark" | "light">(getInitialTheme)

  function toggle() {
    const next = theme === "dark" ? "light" : "dark"
    setTheme(next)
    localStorage.setItem(STORAGE_KEY, next)
    document.documentElement.setAttribute("data-theme", next === "light" ? "light" : "dark")
    if (next === "dark") document.documentElement.removeAttribute("data-theme")
  }

  return (
    <button
      type="button"
      onClick={toggle}
      aria-label={theme === "dark" ? "Activer le mode clair" : "Activer le mode sombre"}
      suppressHydrationWarning
      className={`inline-flex items-center justify-center h-10 w-10 border border-[var(--border)] text-[var(--text-secondary)] hover:text-[var(--text)] hover:border-[var(--border-subtle)] transition-colors ${className ?? ""}`}
    >
      {theme === "dark" ? <Sun className="h-4 w-4" /> : <Moon className="h-4 w-4" />}
    </button>
  )
}