import type { Pregunta, Categoria } from '../../types'
import { TIEMPO_LIMITE } from '../../hooks/useRuleta'

interface QuestionModalProps {
  pregunta: Pregunta
  categoria: Categoria
  mostrarFeedback: boolean
  feedbackCorrecto: boolean
  tiempoRestante: number
  onResponder: (indice: number | null) => void
  onCerrar: () => void
}

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

export default function QuestionModal({ pregunta, categoria, mostrarFeedback, feedbackCorrecto, tiempoRestante, onResponder, onCerrar }: QuestionModalProps) {
  const porcentaje = (tiempoRestante / TIEMPO_LIMITE) * 100
  const colorBarra = porcentaje > 50 ? '#22c55e' : porcentaje > 25 ? '#f97316' : '#ef4444'

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/70 px-4">
      <div className="bg-white rounded-2xl border-4 w-full max-w-xl shadow-2xl overflow-hidden" style={{ borderColor: categoria.color }}>

        {!mostrarFeedback && (
          <>
            {/* Header con categoría */}
            <div className="px-6 py-4 flex flex-col items-center gap-1" style={{ backgroundColor: categoria.color }}>
              <span className="text-3xl">{categoria.emoji}</span>
              <p className="text-white/80 text-sm font-medium">{categoria.nombre}</p>
              <p className="text-white font-bold text-lg text-center">{pregunta.pregunta}</p>
            </div>

            {/* Temporizador */}
            <div className="px-5 pt-4">
              <div className="flex items-center justify-between mb-1">
                <span className="text-sm font-medium text-gray-500">Tiempo restante</span>
                <span className="text-sm font-bold" style={{ color: colorBarra }}>{tiempoRestante}s</span>
              </div>
              <div className="w-full bg-gray-200 rounded-full h-3 overflow-hidden">
                <div
                  className="h-3 rounded-full transition-all duration-1000"
                  style={{ width: `${porcentaje}%`, backgroundColor: colorBarra }}
                />
              </div>
            </div>

            {/* Opciones */}
            <div className="p-5 flex flex-col gap-3">
              {pregunta.opciones.map((opcion, i) => (
                <button
                  key={i}
                  onClick={() => onResponder(i)}
                  className="flex items-stretch w-full rounded-lg border border-gray-200 bg-gray-50 hover:shadow-md hover:-translate-y-0.5 transition-all duration-200 overflow-hidden text-left"
                >
                  <span
                    className="text-white font-bold w-10 flex items-center justify-center shrink-0"
                    style={{ backgroundColor: categoria.color }}
                  >
                    {LETRAS[i]}
                  </span>
                  <span className="px-4 py-3 text-gray-700 font-medium">{opcion}</span>
                </button>
              ))}
            </div>
          </>
        )}

        {/* Feedback */}
        {mostrarFeedback && (
          <div className="p-8 flex flex-col items-center gap-4 text-center">
            <span className="text-5xl">{feedbackCorrecto ? '🎉' : '❌'}</span>
            <h3 className={`text-2xl font-bold ${feedbackCorrecto ? 'text-green-600' : 'text-red-500'}`}>
              {feedbackCorrecto ? '¡Correcto!' : '¡Incorrecto!'}
            </h3>
            {feedbackCorrecto
              ? <p className="text-gray-600">{pregunta.retroalimentacion}</p>
              : <p className="text-gray-600">{tiempoRestante === 0 ? 'Se agotó el tiempo.' : 'Respuesta incorrecta.'}</p>
            }
            <button
              onClick={onCerrar}
              className="mt-2 text-white font-semibold px-8 py-2.5 rounded-xl transition-colors"
              style={{ backgroundColor: categoria.color }}
            >
              Continuar
            </button>
          </div>
        )}

      </div>
    </div>
  )
}
