import { useState, useEffect } from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import { Card, CardHeader } from '../../ui/Card';
import { Button } from '../../ui/Button';
import { CheckCircle, XCircle, ArrowRight, Trophy, BookOpen } from 'lucide-react';

interface QuizBienesProps {
  ejercicioId: string;
  onComplete?: (puntuacion: number) => void;
}

interface Pregunta {
  id: string;
  bien: string;
  descripcion: string;
  opciones: string[];
  respuestaCorrecta: string;
  explicacionDetallada: string;
}

const PREGUNTAS: Pregunta[] = [
  {
    id: 'p1',
    bien: 'Carne de primera calidad',
    descripcion: 'Carne de res premium vendida en supermercados de alta gama',
    opciones: ['Bien normal', 'Bien inferior', 'Bien de lujo'],
    respuestaCorrecta: 'Bien de lujo',
    explicacionDetallada: 'La carne premium es considerada un bien de lujo porque cuando el ingreso aumenta significativamente, las familias aumentan su consumo de este tipo de carne sustituyendo carnes de menor calidad.'
  },
  {
    id: 'p2',
    bien: 'Pan',
    descripcion: 'Pan básico de consumo diario',
    opciones: ['Bien normal', 'Bien inferior', 'Bien de lujo'],
    respuestaCorrecta: 'Bien normal',
    explicacionDetallada: 'El pan es un bien normal porque su consumo aumenta moderadamente con el ingreso, aunque llega un punto donde se estabiliza (saturación).'
  },
  {
    id: 'p3',
    bien: 'Transporte público (autobús)',
    descripcion: 'Servicio de autobuses urbanos',
    opciones: ['Bien normal', 'Bien inferior', 'Bien de lujo'],
    respuestaCorrecta: 'Bien inferior',
    explicacionDetallada: 'El transporte público es un bien inferior porque cuando los ingresos aumentan, las personas tienden a comprar automóviles o usar taxis/Uber, reduciendo el uso del autobús.'
  },
  {
    id: 'p4',
    bien: 'Fideos instantáneos',
    descripcion: 'Comida rápida económica',
    opciones: ['Bien normal', 'Bien inferior', 'Bien de lujo'],
    respuestaCorrecta: 'Bien inferior',
    explicacionDetallada: 'Los fideos instantáneos son claramente un bien inferior. A medida que aumentan los ingresos, las personas prefieren alimentos más nutritivos y de mejor calidad.'
  },
  {
    id: 'p5',
    bien: 'Vacaciones en el extranjero',
    descripcion: 'Viajes turísticos internacionales',
    opciones: ['Bien normal', 'Bien inferior', 'Bien de lujo'],
    respuestaCorrecta: 'Bien de lujo',
    explicacionDetallada: 'Las vacaciones internacionales son un bien de lujo porque su consumo aumenta significativamente cuando el ingreso crece, incluso más que proporcionalmente.'
  },
  {
    id: 'p6',
    bien: 'Ropa de marca',
    descripcion: 'Vestimenta de diseñador',
    opciones: ['Bien normal', 'Bien inferior', 'Bien de lujo'],
    respuestaCorrecta: 'Bien de lujo',
    explicacionDetallada: 'La ropa de marca es un bien de lujo porque su demanda crece más rápido que el ingreso, especialmente en rangos de ingreso altos.'
  },
  {
    id: 'p7',
    bien: 'Cine',
    descripcion: 'Entradas a salas de cine',
    opciones: ['Bien normal', 'Bien inferior', 'Bien de lujo'],
    respuestaCorrecta: 'Bien normal',
    explicacionDetallada: 'El cine es un bien normal. Aunque con el auge del streaming podría debatirse, generalmente el consumo de entretenimiento aumenta con el ingreso de forma moderada.'
  },
  {
    id: 'p8',
    bien: 'Productos de marca blanca',
    descripcion: 'Productos genéricos de supermercado',
    opciones: ['Bien normal', 'Bien inferior', 'Bien de lujo'],
    respuestaCorrecta: 'Bien inferior',
    explicacionDetallada: 'Los productos de marca blanca son bienes inferiores porque son sustituidos por marcas reconocidas cuando el consumidor tiene mayores ingresos.'
  }
];

export function QuizBienes({ ejercicioId: _ejercicioId, onComplete }: QuizBienesProps) {
  const [preguntaActual, setPreguntaActual] = useState(0);
  const [respuestaSeleccionada, setRespuestaSeleccionada] = useState<string | null>(null);
  const [mostrarRetroalimentacion, setMostrarRetroalimentacion] = useState(false);
  const [puntuacion, setPuntuacion] = useState(0);
  const [respuestasCorrectas, setRespuestasCorrectas] = useState(0);
  const [completado, setCompletado] = useState(false);
  const [progreso, setProgreso] = useState(0);

  useEffect(() => {
    setProgreso(((preguntaActual + (completado ? 1 : 0)) / PREGUNTAS.length) * 100);
  }, [preguntaActual, completado]);

  const handleSeleccionarRespuesta = (opcion: string) => {
    if (mostrarRetroalimentacion) return;
    setRespuestaSeleccionada(opcion);
  };

  const handleValidar = () => {
    if (!respuestaSeleccionada) return;
    
    const esCorrecta = respuestaSeleccionada === PREGUNTAS[preguntaActual].respuestaCorrecta;
    setMostrarRetroalimentacion(true);
    
    if (esCorrecta) {
      setRespuestasCorrectas(prev => prev + 1);
      setPuntuacion(prev => prev + 100);
    }
  };

  const handleSiguiente = () => {
    if (preguntaActual < PREGUNTAS.length - 1) {
      setPreguntaActual(prev => prev + 1);
      setRespuestaSeleccionada(null);
      setMostrarRetroalimentacion(false);
    } else {
      setCompletado(true);
      const puntuacionFinal = puntuacion + (respuestaSeleccionada === PREGUNTAS[preguntaActual].respuestaCorrecta ? 100 : 0);
      if (onComplete) {
        onComplete(puntuacionFinal);
      }
    }
  };

  const handleReiniciar = () => {
    setPreguntaActual(0);
    setRespuestaSeleccionada(null);
    setMostrarRetroalimentacion(false);
    setPuntuacion(0);
    setRespuestasCorrectas(0);
    setCompletado(false);
  };

  const pregunta = PREGUNTAS[preguntaActual];
  const esCorrecta = respuestaSeleccionada === pregunta.respuestaCorrecta;

  if (completado) {
    return (
      <Card className="w-full max-w-2xl mx-auto">
        <div className="text-center py-8">
          <motion.div
            initial={{ scale: 0 }}
            animate={{ scale: 1 }}
            transition={{ type: "spring", stiffness: 200 }}
            className="inline-flex items-center justify-center w-20 h-20 bg-yellow-100 rounded-full mb-4"
          >
            <Trophy size={40} className="text-yellow-600" />
          </motion.div>
          
          <h3 className="text-2xl font-bold text-gray-900 mb-2">¡Quiz Completado!</h3>
          <p className="text-gray-600 mb-6">
            Respondiste correctamente {respuestasCorrectas} de {PREGUNTAS.length} preguntas
          </p>
          
          <div className="bg-blue-50 rounded-lg p-6 mb-6">
            <p className="text-sm text-blue-600 mb-1">Puntuación Total</p>
            <p className="text-4xl font-bold text-blue-700">{puntuacion} puntos</p>
          </div>
          
          <Button onClick={handleReiniciar} variant="outline">
            Intentar de Nuevo
          </Button>
        </div>
      </Card>
    );
  }

  return (
    <Card className="w-full max-w-2xl mx-auto">
      <CardHeader
        title="Quiz: Clasificación de Bienes"
        subtitle={`Pregunta ${preguntaActual + 1} de ${PREGUNTAS.length}`}
      />

      <div className="mb-6">
        <div className="flex justify-between text-sm text-gray-600 mb-2">
          <span>Progreso</span>
          <span>{Math.round(progreso)}%</span>
        </div>
        <div className="w-full bg-gray-200 rounded-full h-2.5">
          <motion.div
            className="bg-blue-600 h-2.5 rounded-full"
            initial={{ width: 0 }}
            animate={{ width: `${progreso}%` }}
            transition={{ duration: 0.3 }}
          />
        </div>
      </div>

      <div className="mb-6">
        <div className="flex items-center gap-2 text-blue-600 mb-3">
          <BookOpen size={20} />
          <span className="font-medium">Clasifica el siguiente bien:</span>
        </div>
        
        <h3 className="text-xl font-bold text-gray-900 mb-2">{pregunta.bien}</h3>
        <p className="text-gray-600">{pregunta.descripcion}</p>
      </div>

      <div className="space-y-3 mb-6">
        {pregunta.opciones.map((opcion, index) => {
          const isSelected = respuestaSeleccionada === opcion;
          const isCorrect = opcion === pregunta.respuestaCorrecta;
          const showCorrect = mostrarRetroalimentacion && isCorrect;
          const showIncorrect = mostrarRetroalimentacion && isSelected && !isCorrect;

          return (
            <motion.button
              key={index}
              onClick={() => handleSeleccionarRespuesta(opcion)}
              disabled={mostrarRetroalimentacion}
              whileHover={!mostrarRetroalimentacion ? { scale: 1.02 } : {}}
              whileTap={!mostrarRetroalimentacion ? { scale: 0.98 } : {}}
              className={`w-full p-4 rounded-lg border-2 text-left transition-all ${
                showCorrect
                  ? 'border-green-500 bg-green-50'
                  : showIncorrect
                  ? 'border-red-500 bg-red-50'
                  : isSelected
                  ? 'border-blue-500 bg-blue-50'
                  : 'border-gray-200 hover:border-blue-300'
              }`}
            >
              <div className="flex items-center justify-between">
                <div className="flex items-center gap-3">
                  <span className="flex items-center justify-center w-8 h-8 rounded-full bg-gray-100 text-gray-700 font-semibold text-sm">
                    {String.fromCharCode(65 + index)}
                  </span>
                  <span className="font-medium">{opcion}</span>
                </div>
                {showCorrect && <CheckCircle size={20} className="text-green-600" />}
                {showIncorrect && <XCircle size={20} className="text-red-600" />}
              </div>
            </motion.button>
          );
        })}
      </div>

      <AnimatePresence>
        {mostrarRetroalimentacion && (
          <motion.div
            initial={{ height: 0, opacity: 0 }}
            animate={{ height: 'auto', opacity: 1 }}
            exit={{ height: 0, opacity: 0 }}
            className="overflow-hidden mb-6"
          >
            <div className={`p-4 rounded-lg border ${
              esCorrecta 
                ? 'bg-green-50 border-green-200' 
                : 'bg-red-50 border-red-200'
            }`}>
              <div className="flex items-center gap-2 mb-2">
                {esCorrecta ? (
                  <CheckCircle size={20} className="text-green-600" />
                ) : (
                  <XCircle size={20} className="text-red-600" />
                )}
                <span className={`font-semibold ${
                  esCorrecta ? 'text-green-800' : 'text-red-800'
                }`}>
                  {esCorrecta ? '¡Correcto!' : 'Incorrecto'}
                </span>
              </div>
              <p className={`text-sm ${
                esCorrecta ? 'text-green-700' : 'text-red-700'
              }`}>
                {pregunta.explicacionDetallada}
              </p>
            </div>
          </motion.div>
        )}
      </AnimatePresence>

      <div className="flex justify-between items-center">
        <div className="text-sm text-gray-600">
          Puntuación: <span className="font-bold text-blue-600">{puntuacion}</span> pts
        </div>
        
        {!mostrarRetroalimentacion ? (
          <Button 
            onClick={handleValidar}
            disabled={!respuestaSeleccionada}
          >
            Validar Respuesta
          </Button>
        ) : (
          <Button onClick={handleSiguiente}>
            {preguntaActual < PREGUNTAS.length - 1 ? (
              <>
                Siguiente
                <ArrowRight size={16} className="ml-2" />
              </>
            ) : (
              'Finalizar'
            )}
          </Button>
        )}
      </div>
    </Card>
  );
}

export default QuizBienes;
