"use client"

import { useEffect, useRef, useState } from "react"
import { Volume2, VolumeX } from "lucide-react"
import { startNeonBuzz } from "@/lib/neon-buzz"

// Les navigateurs bloquent l'audio automatique tant qu'il n'y a pas eu
// d'interaction — impossible de lancer le son seul au chargement de la page.
// Ce bouton sert donc à la fois de déclencheur et de coupure.
export function NeonSoundToggle({ className }: { className?: string }) {
  const [on, setOn] = useState(false)
  const ctxRef = useRef<AudioContext | null>(null)
  const stopRef = useRef<(() => void) | null>(null)

  useEffect(() => {
    return () => {
      stopRef.current?.()
      ctxRef.current?.close()
    }
  }, [])

  function toggle() {
    if (on) {
      stopRef.current?.()
      stopRef.current = null
      setOn(false)
      return
    }
    const ctx = ctxRef.current ?? new AudioContext()
    ctxRef.current = ctx
    if (ctx.state === "suspended") ctx.resume()
    stopRef.current = startNeonBuzz(ctx).stop
    setOn(true)
  }

  return (
    <button
      type="button"
      onClick={toggle}
      aria-label={on ? "Couper le son du néon" : "Activer le son du néon"}
      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 ?? ""}`}
    >
      {on ? <Volume2 className="h-4 w-4" /> : <VolumeX className="h-4 w-4" />}
    </button>
  )
}