import { useEffect } from 'react'
import { useRuleta } from '../../hooks/useRuleta'
import { sounds } from '../../audio/AudioController'
import QuestionModal from '../game/QuestionModal'
import RuletaSVG from '../game/Ruleta/RuletaSVG'

interface GameProps {
  onEnd: (aprobado: boolean, correctas: number) => void
}

export default function Game({ onEnd }: GameProps) {
  const { estado, categorias, girar, responder, cerrarFeedback, MAX_PREGUNTAS } = useRuleta()

  useEffect(() => {
    if (estado.completado) onEnd(estado.aprobado, estado.correctas)
  }, [estado.completado])

  function handleGirar() {
    sounds.click?.play()
    girar()
  }

  return (
    <div className="flex flex-col items-center gap-6 py-6 w-full">

      {/* Instrucciones */}
      <div className="bg-purple-50 border border-purple-200 rounded-xl px-6 py-4 max-w-lg text-center">
        <p className="text-purple-700 font-semibold text-lg">¿Cómo jugar?</p>
        <p className="text-gray-600 mt-1">
          Haz clic en la <strong>ruleta</strong> para girarla y responde correctamente para ganar puntos.
        </p>
      </div>

      <div className="flex flex-col items-center gap-4 w-full">

        {/* Progreso de preguntas */}
        <div className="flex gap-2">
          {Array.from({ length: MAX_PREGUNTAS }).map((_, i) => (
            <div
              key={i}
              className={`w-6 h-6 rounded-full border-2 border-purple-600 transition-all duration-500 ${
                i < estado.preguntasRespondidas ? 'bg-purple-600' : 'bg-white'
              }`}
            />
          ))}
        </div>

        {/* Ruleta SVG */}
        <RuletaSVG
          categorias={categorias}
          rotacion={estado.rotacion}
          isSpinning={estado.isSpinning}
          onClick={handleGirar}
        />

      </div>

      {/* Modal pregunta */}
      {estado.preguntaActual && !estado.completado && (
        <QuestionModal
          pregunta={estado.preguntaActual}
          categoria={estado.categoriaActual!}
          mostrarFeedback={estado.mostrarFeedback}
          feedbackCorrecto={estado.feedbackCorrecto}
          onResponder={responder}
          onCerrar={cerrarFeedback}
        />
      )}

    </div>
  )
}