"use client"

import { useEffect, useRef, useState } from "react"
import { Check, MoveVertical } from "lucide-react"
import {
  SCROLL_MODE_EVENT,
  SCROLL_MODE_STORAGE_KEY,
  SCROLL_MODES,
  isScrollMode,
  type ScrollMode,
} from "@/lib/scroll-mode"

function readInitialMode(): ScrollMode {
  if (typeof window === "undefined") return "native"
  const stored = localStorage.getItem(SCROLL_MODE_STORAGE_KEY)
  return isScrollMode(stored) ? stored : "native"
}

// Bouton à menu déroulant, même gabarit que NeonSoundToggle/ThemeToggle,
// pour choisir l'une des trois manières de faire défiler les pages : la
// molette/clavier sont ensuite interceptés globalement par
// ScrollModeController (monté dans le layout racine), pas seulement ici.
export function ScrollModeToggle({ className }: { className?: string }) {
  const [mode, setMode] = useState<ScrollMode>(readInitialMode)
  const [open, setOpen] = useState(false)
  const rootRef = useRef<HTMLDivElement>(null)

  useEffect(() => {
    function onClickOutside(e: MouseEvent) {
      if (rootRef.current && !rootRef.current.contains(e.target as Node)) setOpen(false)
    }
    function onKeyDown(e: KeyboardEvent) {
      if (e.key === "Escape") setOpen(false)
    }
    document.addEventListener("mousedown", onClickOutside)
    window.addEventListener("keydown", onKeyDown)
    return () => {
      document.removeEventListener("mousedown", onClickOutside)
      window.removeEventListener("keydown", onKeyDown)
    }
  }, [])

  function choose(next: ScrollMode) {
    setMode(next)
    setOpen(false)
    localStorage.setItem(SCROLL_MODE_STORAGE_KEY, next)
    window.dispatchEvent(new CustomEvent(SCROLL_MODE_EVENT, { detail: next }))
  }

  return (
    <div ref={rootRef} className={`relative ${className ?? ""}`}>
      <button
        type="button"
        onClick={() => setOpen((o) => !o)}
        aria-label="Choisir le mode de défilement"
        aria-expanded={open}
        aria-haspopup="menu"
        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"
      >
        <MoveVertical className="h-4 w-4" />
      </button>

      {open && (
        <div
          role="menu"
          className="absolute right-0 mt-2 w-52 rounded-lg border border-white/15 bg-white/10 backdrop-blur-xl shadow-2xl overflow-hidden z-40"
        >
          {SCROLL_MODES.map((m) => (
            <button
              key={m.value}
              type="button"
              role="menuitemradio"
              aria-checked={mode === m.value}
              onClick={() => choose(m.value)}
              className="flex w-full items-center justify-between gap-2 px-4 py-3 text-left hover:bg-white/10 transition-colors"
            >
              <span>
                <span className="block font-mono text-xs uppercase tracking-widest text-white">{m.label}</span>
                <span className="block text-[10px] text-white/50 mt-0.5">{m.description}</span>
              </span>
              {mode === m.value && <Check className="h-3.5 w-3.5 text-[var(--accent)] shrink-0" />}
            </button>
          ))}
        </div>
      )}
    </div>
  )
}