import { useState, useEffect } from 'react'
import type { Pregunta, Categoria } from '../../types'

interface FeedbackModalProps {
  pregunta: Pregunta
  categoria: Categoria
  feedbackCorrecto: boolean
  tiempoAgotado: boolean
  onCerrar: () => void
}

export default function FeedbackModal({
  pregunta,
  categoria: _categoria,
  feedbackCorrecto,
  tiempoAgotado,
  onCerrar,
}: FeedbackModalProps) {
  const [visible, setVisible] = useState(false)

  useEffect(() => {
    const t = setTimeout(() => setVisible(true), 10)
    return () => clearTimeout(t)
  }, [])

  const esCorrecto = feedbackCorrecto
  const label = esCorrecto ? 'Correcto' : tiempoAgotado ? 'Tiempo agotado' : 'Incorrecto'
  const accentColor = esCorrecto ? '#39ad4a' : '#ed1f24'
  const imgSrc = esCorrecto ? './img/correcto.png' : './img/incorrecto.png'
  const imagenALaIzquierda = !esCorrecto

  const reflexion = pregunta.reflexion ?? pregunta.retroalimentacion
  const datoCurioso = pregunta.datoCurioso

  return (
    <div
      className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 transition-opacity duration-300"
      style={{ opacity: visible ? 1 : 0 }}
    >
      <div className="relative">
        {/* ─── Barra superior flotante (25px sobre el modal) ─── */}
        <div
          className="absolute left-1/2 -translate-x-1/2 z-10 flex items-center gap-3"
          style={{ top: '-90px' }}
        >
          {imagenALaIzquierda && (
            <img
              src={imgSrc}
              alt={label}
              style={{ width: '180px', height: '180px', marginRight: '-80px',zIndex: '5' }}
              className="object-contain"
            />
          )}
          <span
            className="font-extrabold text-white px-8 py-3 rounded-full tracking-wide"
            style={{
              backgroundColor: accentColor,
              fontSize: '40px',
              marginRight: '50px',
              paddingRight: '60px',
              paddingLeft: '60px'
            }}
          >
            {label}
          </span>
          {!imagenALaIzquierda && (
            <img
              src={imgSrc}
              alt={label}
              style={{ width: '120px', height: '120px', marginLeft:'-100px' }}
              className="object-contain"
            />
          )}
        </div>

        {/* ─── Tarjeta del modal ─── */}
        <div
          className="flex flex-col justify-center transition-all duration-300"
          style={{
            width: '1700px',
            maxWidth: '1824px',
            height: '594px',
            background: 'linear-gradient(180deg, #ffffff 0%, #d8dcec 100%)',
            borderRadius: '18px',
            boxShadow: '0 8px 40px rgba(0,0,0,0.18), 0 2px 8px rgba(0,0,0,0.1)',
            opacity: visible ? 1 : 0,
            transform: visible ? 'translateY(0) scale(1)' : 'translateY(12px) scale(0.96)',
            overflow: 'hidden',
          }}
        >
          {/* ─── Botón cerrar ─── */}
          <button
            onClick={onCerrar}
            aria-label="Cerrar"
            className="absolute top-4 right-6 cursor-pointer transition-all duration-200 hover:scale-110 hover:opacity-70 z-10"
            style={{
              background: 'none',
              border: 'none',
              fontSize: '80px',
              color: 'rgb(0, 0, 0)',
              padding: '0',
              lineHeight: '1',
            }}
          >
            ×
          </button>

          {/* ─── Tiempo agotado ─── */}
          {tiempoAgotado && (
            <div className="flex flex-col items-center justify-center flex-1 gap-6">
              <img
                src="./img/incorrecto.png"
                alt="Tiempo agotado"
                style={{ width: '140px', height: '140px' }}
                className="object-contain"
              />
              <p
                className="text-center"
                style={{ color: '#555555', fontSize: '26px', maxWidth: '500px' }}
              >
                No te preocupes, gira la ruleta de nuevo para continuar con la siguiente pregunta.
              </p>
            </div>
          )}

          {/* ─── Reflexión ─── */}
          {!tiempoAgotado && (
            <div className="px-12 pt-10 pb-6">
              <p
                className="leading-relaxed"
                style={{ color: '#333333', fontSize: '22px', lineHeight: '1.6' }}
              >
                <strong>Reflexión:</strong> {reflexion}
              </p>
            </div>
          )}

          {/* ─── ¿Sabías qué? ─── */}
          {!tiempoAgotado && datoCurioso && (
            <div className="flex items-stretch mt-4">
              <div
                className="flex items-center justify-center px-8 py-5 shrink-0"
                style={{ backgroundColor: '#383838', borderRadius:'0px 45px 45px 0px' }}
              >
                <span
                  className="font-bold text-white whitespace-nowrap"
                  style={{ fontSize: '28px' }}
                >
                  ¿Sabías qué?
                </span>
              </div>
              <div className="flex-1 px-6 py-5">
                <p
                  className="leading-relaxed"
                  style={{ color: '#444444', fontSize: '22px', lineHeight: '1.6' }}
                >
                  {datoCurioso}
                </p>
              </div>
            </div>
          )}
        </div>
      </div>
    </div>
  )
}
