import { useState, useEffect } from 'react';
import { useParams, Link } from 'react-router-dom';
import { motion } from 'framer-motion';
import { Card } from '../components/ui/Card';
import { Button } from '../components/ui/Button';
import { Loader } from '../components/ui/Loader';
import { useProgressStore } from '../stores/progressStore';
import { ScoreDisplay } from '../components/progress/ScoreDisplay';
import { 
  ArrowLeft, 
  CheckCircle, 
  Play, 
  Lock, 
  Trophy,
  TrendingUp,
  RotateCcw
} from 'lucide-react';
import type { EjercicioProgreso } from '../stores/progressStore';

// Importar ejercicios reales
import { FlujoCircular } from '../components/exercises/modulo1/FlujoCircular';
import { QuizBienes } from '../components/exercises/modulo1/QuizBienes';
import { SimuladorDisyuntivas } from '../components/exercises/modulo1/SimuladorDisyuntivas';
import { ConstructorCurvas } from '../components/exercises/modulo2/ConstructorCurvas';
import { IdentificarShocks } from '../components/exercises/modulo2/IdentificarShocks';
import { SimuladorPrecios } from '../components/exercises/modulo2/SimuladorPrecios';
import { ClasificadorBienes } from '../components/exercises/modulo3/ClasificadorBienes';
import { CalculadoraElasticidad } from '../components/exercises/modulo3/CalculadoraElasticidad';
import { EjerciciosExamen } from '../components/exercises/modulo3/EjerciciosExamen';
import { CalculadoraCostos } from '../components/exercises/modulo4/CalculadoraCostos';
import { SimuladorProduccion } from '../components/exercises/modulo4/SimuladorProduccion';
import { VisualizadorExcedentes } from '../components/exercises/modulo4/VisualizadorExcedentes';

const MODULOS_INFO: Record<number, { 
  id: string;
  titulo: string; 
  descripcion: string;
  color: string;
}> = {
  1: { 
    id: 'modulo1',
    titulo: 'Fundamentos de Economía', 
    descripcion: 'Introducción a los conceptos básicos de economía',
    color: 'from-blue-500 to-blue-600'
  },
  2: { 
    id: 'modulo2',
    titulo: 'Oferta, Demanda y Equilibrio', 
    descripcion: 'Curvas de oferta y demanda en el mercado',
    color: 'from-green-500 to-green-600'
  },
  3: { 
    id: 'modulo3',
    titulo: 'Utilidad y Elasticidad', 
    descripcion: 'Teoría del consumidor y elasticidades',
    color: 'from-purple-500 to-purple-600'
  },
  4: { 
    id: 'modulo4',
    titulo: 'Teoría del Productor', 
    descripcion: 'Costos de producción y competencia perfecta',
    color: 'from-orange-500 to-orange-600'
  },
};

const EJERCICIOS_POR_MODULO: Record<number, Array<{
  id: string;
  titulo: string;
  descripcion: string;
  componente: React.ComponentType<{ ejercicioId: string; onComplete?: (puntuacion: number) => void }>;
}>> = {
  1: [
    { id: 'simulador-disyuntivas', titulo: 'Simulador de Disyuntivas', descripcion: 'Explora las decisiones económicas fundamentales', componente: SimuladorDisyuntivas },
    { id: 'quiz-bienes', titulo: 'Quiz de Bienes', descripcion: 'Identifica diferentes tipos de bienes', componente: QuizBienes },
    { id: 'flujo-circular', titulo: 'Flujo Circular', descripcion: 'Comprende el flujo de bienes y dinero en la economía', componente: FlujoCircular },
  ],
  2: [
    { id: 'constructor-curvas', titulo: 'Constructor de Curvas', descripcion: 'Construye curvas de oferta y demanda', componente: ConstructorCurvas },
    { id: 'identificar-shocks', titulo: 'Identificar Shocks', descripcion: 'Reconoce cambios en el mercado', componente: IdentificarShocks },
    { id: 'simulador-precios', titulo: 'Simulador de Precios', descripcion: 'Simula el equilibrio de precios', componente: SimuladorPrecios },
  ],
  3: [
    { id: 'clasificador-bienes', titulo: 'Clasificador de Bienes', descripcion: 'Clasifica bienes según su elasticidad', componente: ClasificadorBienes },
    { id: 'calculadora-elasticidad', titulo: 'Calculadora de Elasticidad', descripcion: 'Calcula elasticidades de demanda', componente: CalculadoraElasticidad },
    { id: 'ejercicios-examen', titulo: 'Ejercicios de Examen', descripcion: 'Pon a prueba tus conocimientos', componente: EjerciciosExamen },
  ],
  4: [
    { id: 'calculadora-costos', titulo: 'Calculadora de Costos', descripcion: 'Calcula costos de producción', componente: CalculadoraCostos },
    { id: 'simulador-produccion', titulo: 'Simulador de Producción', descripcion: 'Simula la producción óptima', componente: SimuladorProduccion },
    { id: 'visualizador-excedentes', titulo: 'Visualizador de Excedentes', descripcion: 'Visualiza excedentes del consumidor y productor', componente: VisualizadorExcedentes },
  ],
};

export function Modulo() {
  const { numero } = useParams<{ numero: string }>();
  const num = parseInt(numero || '1', 10);
  
  const {
    puntuacionTotal,
    getProgresoEjercicio,
    saveProgreso,
    calcularPorcentajeModulo,
    loadProgreso,
    isLoading,
    error,
  } = useProgressStore();

  const [ejercicioActivo, setEjercicioActivo] = useState<string | null>(null);

  useEffect(() => {
    loadProgreso();
  }, [loadProgreso]);

  const moduloInfo = MODULOS_INFO[num] || MODULOS_INFO[1];
  const ejercicios = EJERCICIOS_POR_MODULO[num] || [];
  const porcentaje = calcularPorcentajeModulo(moduloInfo.id, ejercicios.length);

  const getProgresoEjercicioLocal = (ejercicioId: string): EjercicioProgreso | undefined => {
    return getProgresoEjercicio(moduloInfo.id, ejercicioId);
  };

  const handleCompleteEjercicio = async (ejercicioId: string, puntuacion: number) => {
    try {
      await saveProgreso(moduloInfo.id, ejercicioId, puntuacion);
      setEjercicioActivo(null);
    } catch (err) {
      console.error('Error al guardar progreso:', err);
    }
  };

  const completados = ejercicios.filter(
    (e) => getProgresoEjercicioLocal(e.id)?.completado
  ).length;

  // Determinar si un ejercicio está bloqueado (el primero siempre desbloqueado)
  const isEjercicioBloqueado = (index: number): boolean => {
    if (index === 0) return false;
    // Ejercicio anterior completado?
    const ejercicioAnterior = ejercicios[index - 1];
    return !getProgresoEjercicioLocal(ejercicioAnterior.id)?.completado;
  };

  if (ejercicioActivo) {
    const ejercicio = ejercicios.find(e => e.id === ejercicioActivo);
    if (!ejercicio) return null;

    const EjercicioComponent = ejercicio.componente;

    return (
      <div className="min-h-screen bg-gray-50">
        <header className="bg-white shadow-sm border-b border-gray-200">
          <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
            <button 
              onClick={() => setEjercicioActivo(null)}
              className="inline-flex items-center text-blue-600 hover:text-blue-700 font-medium"
            >
              <ArrowLeft className="w-4 h-4 mr-2" />
              Volver al módulo
            </button>
          </div>
        </header>

        <main className="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
          <div className="mb-6">
            <h1 className="text-2xl font-bold text-gray-900">{ejercicio.titulo}</h1>
            <p className="text-gray-600">{ejercicio.descripcion}</p>
          </div>

          <EjercicioComponent
            ejercicioId={ejercicio.id}
            onComplete={(puntuacion: number) => handleCompleteEjercicio(ejercicio.id, puntuacion)}
          />
        </main>
      </div>
    );
  }

  if (isLoading) {
    return (
      <div className="min-h-screen bg-gray-50 flex items-center justify-center">
        <div className="text-center">
          <Loader size="lg" className="mx-auto mb-4" />
          <p className="text-gray-600">Cargando ejercicios...</p>
        </div>
      </div>
    );
  }

  if (error) {
    return (
      <div className="min-h-screen bg-gray-50 flex items-center justify-center">
        <div className="text-center max-w-md mx-auto px-4">
          <div className="text-red-500 mb-4">
            <svg className="w-16 h-16 mx-auto" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
            </svg>
          </div>
          <h2 className="text-xl font-bold text-gray-900 mb-2">Error al cargar el progreso</h2>
          <p className="text-gray-600 mb-4">{error}</p>
          <Button onClick={loadProgreso}>Reintentar</Button>
        </div>
      </div>
    );
  }

  return (
    <div className="min-h-screen bg-gray-50">
      <header className="bg-white shadow-sm border-b border-gray-200">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
          <Link to="/" className="inline-flex items-center text-blue-600 hover:text-blue-700 font-medium">
            <ArrowLeft className="w-4 h-4 mr-2" />
            Volver al Dashboard
          </Link>
        </div>
      </header>

      <main className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
        <div className="mb-8">
          <div className="flex items-center gap-4 mb-4">
            <div className={`w-16 h-16 bg-gradient-to-br ${moduloInfo.color} rounded-xl flex items-center justify-center text-white text-2xl font-bold shadow-lg`}>
              {num}
            </div>
            <div>
              <h1 className="text-2xl font-bold text-gray-900">{moduloInfo.titulo}</h1>
              <p className="text-gray-600">{moduloInfo.descripcion}</p>
            </div>
          </div>

          <Card className={`bg-gradient-to-r ${moduloInfo.color} text-white border-none`}>
            <div className="flex items-center justify-between mb-4">
              <div>
                <p className="text-white/80 text-sm">Tu progreso en este módulo</p>
                <p className="text-3xl font-bold mt-1">{porcentaje}%</p>
              </div>
              <div className="text-right">
                <p className="text-white/80 text-sm">Ejercicios</p>
                <p className="text-xl font-bold">{completados}/{ejercicios.length}</p>
              </div>
            </div>
            
            <div className="w-full bg-white/20 rounded-full h-3 overflow-hidden">
              <motion.div
                className="bg-white h-full rounded-full"
                initial={{ width: 0 }}
                animate={{ width: `${porcentaje}%` }}
                transition={{ duration: 0.8, ease: "easeOut" }}
              />
            </div>
          </Card>
        </div>

        <div className="mb-6 flex items-center justify-between">
          <h2 className="text-xl font-bold text-gray-900">Ejercicios</h2>
          <ScoreDisplay puntos={puntuacionTotal} animar={false} showNivel={false} size="sm" />
        </div>

        <div className="space-y-4">
          {ejercicios.map((ejercicio, index) => {
            const progreso = getProgresoEjercicioLocal(ejercicio.id);
            const completado = progreso?.completado || false;
            const bloqueado = isEjercicioBloqueado(index);

            return (
              <motion.div
                key={ejercicio.id}
                initial={{ opacity: 0, x: -20 }}
                animate={{ opacity: 1, x: 0 }}
                transition={{ delay: index * 0.1 }}
              >
                <Card className={`transition-all ${
                  bloqueado 
                    ? 'opacity-60 bg-gray-50' 
                    : 'hover:shadow-md cursor-pointer'
                }`}
                onClick={() => !bloqueado && setEjercicioActivo(ejercicio.id)}
                >
                  <div className="flex items-center gap-4">
                    <div className={`w-12 h-12 rounded-full flex items-center justify-center ${
                      completado 
                        ? 'bg-green-500 text-white' 
                        : bloqueado
                        ? 'bg-gray-200 text-gray-400'
                        : 'bg-blue-100 text-blue-600'
                    }`}>
                      {completado ? (
                        <CheckCircle className="w-6 h-6" />
                      ) : bloqueado ? (
                        <Lock className="w-5 h-5" />
                      ) : (
                        <span className="font-bold">{index + 1}</span>
                      )}
                    </div>

                    <div className="flex-1">
                      <h3 className={`font-semibold ${
                        completado ? 'text-gray-900' : bloqueado ? 'text-gray-500' : 'text-gray-900'
                      }`}>
                        {ejercicio.titulo}
                      </h3>
                      <p className="text-sm text-gray-500">{ejercicio.descripcion}</p>
                      {completado && progreso && progreso.puntuacion > 0 && (
                        <div className="flex items-center gap-2 mt-1">
                          <span className="text-xs font-medium text-green-600">
                            Mejor puntuación: {progreso.puntuacion} pts
                          </span>
                          <span className="text-xs text-gray-400">
                            ({progreso.intentos} {progreso.intentos === 1 ? 'intento' : 'intentos'})
                          </span>
                        </div>
                      )}
                    </div>

                    <Button 
                      size="sm" 
                      disabled={bloqueado}
                      variant={completado ? 'outline' : 'primary'}
                      onClick={(e) => {
                        e.stopPropagation();
                        !bloqueado && setEjercicioActivo(ejercicio.id);
                      }}
                    >
                      {completado ? (
                        <>
                          <RotateCcw className="w-4 h-4 mr-2" />
                          Repetir
                        </>
                      ) : bloqueado ? (
                        'Bloqueado'
                      ) : (
                        <>
                          <Play className="w-4 h-4 mr-2" />
                          Comenzar
                        </>
                      )}
                    </Button>
                  </div>
                </Card>
              </motion.div>
            );
          })}
        </div>

        {porcentaje === 100 && (
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
          >
            <Card className="mt-6 bg-gradient-to-r from-green-500 to-emerald-600 text-white border-none">
              <div className="flex items-center gap-4">
                <div className="w-14 h-14 bg-white/20 rounded-full flex items-center justify-center">
                  <Trophy className="w-7 h-7" />
                </div>
                <div className="flex-1">
                  <h3 className="font-bold text-lg">¡Felicitaciones!</h3>
                  <p className="text-green-100">
                    Has completado todos los ejercicios de este módulo. 
                    {num < 4 ? ' ¡Continúa con el siguiente módulo!' : ' ¡Has completado todos los módulos!'}
                  </p>
                </div>
                {num < 4 && (
                  <Link to={`/modulo/${num + 1}`}>
                    <Button variant="primary" className="bg-white text-green-600 hover:bg-green-50">
                      Siguiente módulo
                      <TrendingUp className="w-4 h-4 ml-2" />
                    </Button>
                  </Link>
                )}
              </div>
            </Card>
          </motion.div>
        )}

      </main>
    </div>
  );
}

export default Modulo;
