import React, { useState, isValidElement } from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import { Card } from '../ui/Card';
import { Button } from '../ui/Button';
import { Trophy, Star, RotateCcw, Home, ArrowRight, CheckCircle } from 'lucide-react';
import { useEjercicioProgreso } from '../../hooks/useEjercicioProgreso';

interface EjercicioWrapperProps {
  moduloId: string;
  ejercicioId: string;
  titulo: string;
  descripcion: string;
  puntosMaximos: number;
  onComplete?: (puntuacion?: number) => void;
  onRetry?: () => void;
  onExit?: () => void;
  children: React.ReactNode;
}

export function EjercicioWrapper({
  moduloId,
  ejercicioId,
  titulo,
  descripcion,
  puntosMaximos,
  onComplete,
  onRetry,
  onExit,
  children,
}: EjercicioWrapperProps) {
  const { puntuacionAnterior, intentos, guardarProgreso } = useEjercicioProgreso({
    moduloId,
    ejercicioId,
    onComplete,
  });

  const [mostrarCompletado, setMostrarCompletado] = useState(false);
  const [puntuacionActual, setPuntuacionActual] = useState(0);

  const handleCompletar = (puntuacion: number) => {
    guardarProgreso(puntuacion);
    setPuntuacionActual(puntuacion);
    setMostrarCompletado(true);
  };

  const esMejorPuntuacion = puntuacionAnterior !== undefined && puntuacionActual > puntuacionAnterior;

  // Pasar handleCompletar a los hijos
  const childrenWithProps = isValidElement(children)
    ? React.cloneElement(children as React.ReactElement<any>, { onCompletar: handleCompletar })
    : children;

  return (
    <div className="space-y-6">
      <AnimatePresence mode="wait">
        {!mostrarCompletado ? (
          <motion.div
            key="ejercicio"
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            exit={{ opacity: 0 }}
          >
            <div className="mb-6">
              <div className="flex items-start justify-between">
                <div>
                  <h2 className="text-2xl font-bold text-gray-900">{titulo}</h2>
                  <p className="text-gray-600 mt-1">{descripcion}</p>
                </div>
                <div className="text-right">
                  <div className="flex items-center gap-2 text-amber-600 bg-amber-50 px-3 py-1 rounded-full">
                    <Trophy size={16} />
                    <span className="font-semibold">{puntosMaximos} pts máx.</span>
                  </div>
                  {puntuacionAnterior !== undefined && (
                    <div className="mt-2 text-sm text-gray-500">
                      Mejor puntuación: {puntuacionAnterior} pts
                      <span className="text-gray-400"> ({intentos} {intentos === 1 ? 'intento' : 'intentos'})</span>
                    </div>
                  )}
                </div>
              </div>
            </div>

            {childrenWithProps}
          </motion.div>
        ) : (
          <motion.div
            key="completado"
            initial={{ opacity: 0, scale: 0.9 }}
            animate={{ opacity: 1, scale: 1 }}
            transition={{ type: "spring", stiffness: 200 }}
          >
            <Card className="text-center py-12">
              <motion.div
                initial={{ scale: 0 }}
                animate={{ scale: 1 }}
                transition={{ 
                  type: "spring", 
                  stiffness: 200,
                  delay: 0.2 
                }}
                className="inline-flex items-center justify-center w-24 h-24 bg-gradient-to-br from-yellow-400 to-orange-500 rounded-full mb-6 shadow-lg"
              >
                <Trophy size={48} className="text-white" />
              </motion.div>
              
              <h3 className="text-3xl font-bold text-gray-900 mb-2">
                ¡Ejercicio Completado!
              </h3>
              
              <p className="text-gray-600 mb-8 max-w-md mx-auto">
                Has completado el ejercicio. Revisa tu puntuación y decide si quieres intentarlo de nuevo para mejorar tu marca.
              </p>
              
              <div className="grid grid-cols-3 gap-4 max-w-lg mx-auto mb-8">
                <div className="bg-blue-50 rounded-xl p-4">
                  <Star className="w-6 h-6 text-blue-500 mx-auto mb-2" />
                  <p className="text-2xl font-bold text-blue-700">{puntuacionActual}</p>
                  <p className="text-sm text-blue-600">Puntuación</p>
                </div>
                
                <div className="bg-purple-50 rounded-xl p-4">
                  <Trophy className="w-6 h-6 text-purple-500 mx-auto mb-2" />
                  <p className="text-2xl font-bold text-purple-700">{puntosMaximos}</p>
                  <p className="text-sm text-purple-600">Máximo</p>
                </div>
                
                <div className={`rounded-xl p-4 ${esMejorPuntuacion ? 'bg-green-50' : 'bg-gray-50'}`}>
                  <CheckCircle className={`w-6 h-6 mx-auto mb-2 ${esMejorPuntuacion ? 'text-green-500' : 'text-gray-400'}`} />
                  <p className={`text-2xl font-bold ${esMejorPuntuacion ? 'text-green-700' : 'text-gray-700'}`}>
                    {Math.round((puntuacionActual / puntosMaximos) * 100)}%
                  </p>
                  <p className={`text-sm ${esMejorPuntuacion ? 'text-green-600' : 'text-gray-500'}`}>
                    {esMejorPuntuacion ? '¡Récord!' : 'Precisión'}
                  </p>
                </div>
              </div>

              {esMejorPuntuacion && (
                <motion.div
                  initial={{ opacity: 0, y: 20 }}
                  animate={{ opacity: 1, y: 0 }}
                  className="mb-6"
                >
                  <div className="inline-flex items-center gap-2 px-4 py-2 bg-green-100 text-green-700 rounded-full font-medium">
                    <Star size={18} />
                    ¡Nueva mejor puntuación! +{puntuacionActual - (puntuacionAnterior || 0)} pts
                  </div>
                </motion.div>
              )}
              
              <div className="flex flex-wrap justify-center gap-4">
                <Button variant="outline" onClick={onExit}>
                  <Home size={18} className="mr-2" />
                  Volver al módulo
                </Button>
                
                <Button 
                  variant="outline" 
                  onClick={() => {
                    setMostrarCompletado(false);
                    if (onRetry) onRetry();
                  }}
                >
                  <RotateCcw size={18} className="mr-2" />
                  Intentar de nuevo
                </Button>
                
                {!esMejorPuntuacion && puntuacionActual < puntosMaximos && (
                  <Button onClick={onExit}>
                    Siguiente ejercicio
                    <ArrowRight size={18} className="ml-2" />
                  </Button>
                )}
              </div>
            </Card>
          </motion.div>
        )}
      </AnimatePresence>
    </div>
  );
}

export default EjercicioWrapper;
