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

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

const LETRAS = ['A', 'B', 'C', 'D']

/** Mapeo de nombre de categoría → imagen PNG */
const CAT_IMG: Record<string, string> = {
  'Agua': 'agua.png',
  'Residuos': 'residuos.png',
  'Energía': 'energia.png',
  'Electromovilidad': 'movilidad.png',
}

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()
  }

  const pregunta = estado.preguntaActual
  const categoria = estado.categoriaActual

  return (
    <div className="flex flex-col h-full w-full px-0 pt-8 relative">

      {/* ─── Contenedor rojo con imagen + nombre de categoría (top-right) ─── */}
      {categoria && (
        <div
          className="absolute top-0 right-0 z-20 flex items-center gap-3 pl-5 pr-6"
          style={{
            backgroundColor: '#ed1f24',
            borderRadius: '0px 0px 0px 25px',
            boxShadow: '0 4px 12px rgba(0,0,0,0.3)',
            maxWidth: '520px',
          }}
        >
          {/* Círculo blanco con imagen de categoría */}
          {CAT_IMG[categoria.nombre] && (
            <div
              className="rounded-full flex items-center justify-center shrink-0"
              style={{
                width: '52px',
                height: '52px',
                backgroundColor: '#FFFFFF',
                boxShadow: '0 2px 8px rgba(0,0,0,0.2)',
              }}
            >
              <img
                src={`./img/${CAT_IMG[categoria.nombre]}`}
                alt={categoria.nombre}
                className="object-contain"
                style={{ width: '36px', height: '36px' }}
              />
            </div>
          )}
          <span
            className="text-white font-extrabold tracking-wide py-3 whitespace-nowrap"
            style={{ fontSize: '22px' }}
          >
            {categoria.nombre}
          </span>
        </div>
      )}

      {/* ─── Contenido principal: Ruleta + Panel de pregunta ─── */}
      <div className="flex-1 flex items-center justify-center min-h-0">

        {/* ─── Columna izquierda: Ruleta 40% ─── */}
        <div className="flex flex-col items-center justify-center z-10" style={{ width: '40%', marginRight: '-170px' }}>
          <RuletaSVG
            categorias={categorias}
            rotacion={estado.rotacion}
            isSpinning={estado.isSpinning}
            onClick={handleGirar}
          />
        </div>

        {/* ─── Columna derecha: Panel de pregunta 60% ─── */}
        <div className="flex flex-col justify-center pl-16 pr-10" style={{ width: '60%' }}>
          {pregunta && !estado.completado && (
            <div
              className="rounded-2xl shadow-xl overflow-hidden"
              style={{
                background: 'linear-gradient(180deg, #ffffff 0%, #d8dcec 100%)',
                marginLeft: '-80px',
              }}
            >
              {/* Header con pregunta (fondo transparente) */}
              <div
                className="px-6 py-4 flex flex-col items-center gap-1"
                style={{ marginLeft: '50px' }}
              >
                <p className="font-bold text-center" style={{ color: '#ed1f24', fontSize: '25px' }}>{pregunta.pregunta}</p>
              </div>

              {/* Opciones */}
              <div className="p-5 flex flex-col gap-3" style={{ marginLeft: '115px' }}>
                {pregunta.opciones.map((opcion, i) => (
                  <button
                    key={i}
                    onClick={() => responder(i)}
                    disabled={estado.mostrarFeedback}
                    className="group flex items-stretch w-full rounded-lg border border-gray-200 bg-gray-50 hover:bg-[#383838] hover:shadow-md hover:-translate-y-0.5 transition-all duration-200 overflow-hidden text-left disabled:opacity-50 disabled:cursor-not-allowed"
                  >
                    <span
                      className="text-white font-bold w-10 flex items-center justify-center shrink-0 group-hover:text-white"
                      style={{ backgroundColor: '#ed1f24' }}
                    >
                      {LETRAS[i]}
                    </span>
                    <span className="px-4 py-3 text-gray-700 font-medium group-hover:text-white" style={{ fontSize: '22px' }}>{opcion}</span>
                  </button>
                ))}
              </div>
            </div>
          )}

          {/* Temporizador debajo del panel */}
          {pregunta && !estado.completado && (
            <div className="flex justify-center mt-3">
              <span
                className="font-bold text-white bg-black rounded-md px-[10px] py-[10px]"
                style={{ fontSize: '22px' }}
              >
                {estado.tiempoRestante}seg
              </span>
            </div>
          )}

          {/* Sin pregunta activa: placeholder */}
          {!pregunta && !estado.completado && (
            <div
              className="flex flex-col items-center justify-center text-center p-10 rounded-2xl shadow-xl"
              style={{
                background: 'linear-gradient(180deg, #ffffff 0%, #d8dcec 100%)',
              }}
            >
              <p className="text-gray-700 font-medium" style={{ fontSize: '22px' }}>
                Gira la ruleta para obtener una pregunta
              </p>
              <p className="text-gray-500 mt-2" style={{ fontSize: '22px' }}>
                Cada respuesta correcta te acerca al objetivo de {MAX_PREGUNTAS} preguntas
              </p>
            </div>
          )}
        </div>

      </div>

      {/* ─── Modal de feedback ─── */}
      {estado.mostrarFeedback && pregunta && categoria && (
        <FeedbackModal
          pregunta={pregunta}
          categoria={categoria}
          feedbackCorrecto={estado.feedbackCorrecto}
          tiempoAgotado={estado.tiempoRestante === 0}
          onCerrar={cerrarFeedback}
        />
      )}

    </div>
  )
}
