// @ts-nocheck
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 { DefinicionEconomiaQuiz } from '../components/exercises/modulo1/DefinicionEconomiaQuiz';
import { EscasezSimulator } from '../components/exercises/modulo1/EscasezSimulator';
import { ProblemaEconomicoFundamental } from '../components/exercises/modulo1/ProblemaEconomicoFundamental';
import { EconomiaPositivaVsNormativa } from '../components/exercises/modulo1/EconomiaPositivaVsNormativa';
import { RazonamientoEconomico } from '../components/exercises/modulo1/RazonamientoEconomico';
import { SistemasEconomicosQuiz } from '../components/exercises/modulo1/SistemasEconomicosQuiz';
import { ComparativaSistemas } from '../components/exercises/modulo1/ComparativaSistemas';
import { CasosPaises } from '../components/exercises/modulo1/CasosPaises';
import { VentajasDesventajasSistemas } from '../components/exercises/modulo1/VentajasDesventajasSistemas';
import { FPPConstructor } from '../components/exercises/modulo1/FPPConstructor';
import { FPPAnalizador } from '../components/exercises/modulo1/FPPAnalizador';
import { CostoOportunidadCalculator } from '../components/exercises/modulo1/CostoOportunidadCalculator';
import { CrecimientoEconomicoFPP } from '../components/exercises/modulo1/CrecimientoEconomicoFPP';
import { AgentesEconomicosQuiz } from '../components/exercises/modulo1/AgentesEconomicosQuiz';
import { RolesAgentesMatching } from '../components/exercises/modulo1/RolesAgentesMatching';
import { FlujoCircularBasico } from '../components/exercises/modulo1/FlujoCircularBasico';
import { FactoresProduccionQuiz } from '../components/exercises/modulo1/FactoresProduccionQuiz';
import { ProductividadCalculator } from '../components/exercises/modulo1/ProductividadCalculator';
import { CostoOportunidadCotidiano } from '../components/exercises/modulo1/CostoOportunidadCotidiano';
import { VentajaComparativaCalculator } from '../components/exercises/modulo1/VentajaComparativaCalculator';
// Imports Módulo 2 - Oferta, Demanda y Equilibrio
import { ConstructorCurvas } from '../components/exercises/modulo2/ConstructorCurvas';
import { IdentificarShocks } from '../components/exercises/modulo2/IdentificarShocks';
import { SimuladorPrecios } from '../components/exercises/modulo2/SimuladorPrecios';
import { LeyDemandaQuiz } from '../components/exercises/modulo2/LeyDemandaQuiz';
import { CurvaDemandaConstructor } from '../components/exercises/modulo2/CurvaDemandaConstructor';
import { TablaDemanda } from '../components/exercises/modulo2/TablaDemanda';
import { DemandaIndividualVsMercado } from '../components/exercises/modulo2/DemandaIndividualVsMercado';
import { DesplazamientoVsMovimiento } from '../components/exercises/modulo2/DesplazamientoVsMovimiento';
import { FactoresDesplazanDemanda } from '../components/exercises/modulo2/FactoresDesplazanDemanda';
import { LeyOfertaQuiz } from '../components/exercises/modulo2/LeyOfertaQuiz';
import { CurvaOfertaConstructor } from '../components/exercises/modulo2/CurvaOfertaConstructor';
import { TablaOferta } from '../components/exercises/modulo2/TablaOferta';
import { FactoresDesplazanOferta } from '../components/exercises/modulo2/FactoresDesplazanOferta';
import { OfertaCortoLargoPlazo } from '../components/exercises/modulo2/OfertaCortoLargoPlazo';
import { EquilibrioFinder } from '../components/exercises/modulo2/EquilibrioFinder';
import { EquilibrioGrafico } from '../components/exercises/modulo2/EquilibrioGrafico';
import { AjusteEquilibrio } from '../components/exercises/modulo2/AjusteEquilibrio';
import { ExcesoDemandaEscasez } from '../components/exercises/modulo2/ExcesoDemandaEscasez';
import { ExcesoOfertaSuperavit } from '../components/exercises/modulo2/ExcesoOfertaSuperavit';
import { CalculoElasticidadPrecio } from '../components/exercises/modulo2/CalculoElasticidadPrecio';
import { ElasticidadElasticaInelastica } from '../components/exercises/modulo2/ElasticidadElasticaInelastica';
import { FactoresElasticidad } from '../components/exercises/modulo2/FactoresElasticidad';
import { ElasticidadIngresoTotal } from '../components/exercises/modulo2/ElasticidadIngresoTotal';
import { PrecioMaximoTecho } from '../components/exercises/modulo2/PrecioMaximoTecho';
import { PrecioMinimoPiso } from '../components/exercises/modulo2/PrecioMinimoPiso';
import { SimuladorControles } from '../components/exercises/modulo2/SimuladorControles';
import { ControlesVidaReal } from '../components/exercises/modulo2/ControlesVidaReal';
import { CambiosEquilibrio } from '../components/exercises/modulo2/CambiosEquilibrio';

// Imports Módulo 3 - Utilidad y Elasticidad
import { ClasificadorBienes } from '../components/exercises/modulo3/ClasificadorBienes';
import { CalculadoraElasticidad } from '../components/exercises/modulo3/CalculadoraElasticidad';
import { EjerciciosExamen } from '../components/exercises/modulo3/EjerciciosExamen';
import { FormulaElasticidad } from '../components/exercises/modulo3/FormulaElasticidad';
import { MetodoPuntoMedio } from '../components/exercises/modulo3/MetodoPuntoMedio';
import { ElasticidadCurva } from '../components/exercises/modulo3/ElasticidadCurva';
import { ElasticidadRectas } from '../components/exercises/modulo3/ElasticidadRectas';
import { ClasificacionElasticidad } from '../components/exercises/modulo3/ClasificacionElasticidad';

import { FormulaElasticidadIngreso } from '../components/exercises/modulo3/FormulaElasticidadIngreso';
import { BienesNormalesInferiores } from '../components/exercises/modulo3/BienesNormalesInferiores';
import { BienesLujoNecesarios } from '../components/exercises/modulo3/BienesLujoNecesarios';
import { CurvaEngel } from '../components/exercises/modulo3/CurvaEngel';
import { FormulaElasticidadCruzada } from '../components/exercises/modulo3/FormulaElasticidadCruzada';
import { SustitutosComplementarios } from '../components/exercises/modulo3/SustitutosComplementarios';
import { GradoRelacion } from '../components/exercises/modulo3/GradoRelacion';
import { UtilidadTotalVsMarginal } from '../components/exercises/modulo3/UtilidadTotalVsMarginal';
import { LeyUtilidadMarginalDecreciente } from '../components/exercises/modulo3/LeyUtilidadMarginalDecreciente';
import { MaximizacionUtilidad } from '../components/exercises/modulo3/MaximizacionUtilidad';
import { CurvasIndiferencia } from '../components/exercises/modulo3/CurvasIndiferencia';
import { CanastaOptima } from '../components/exercises/modulo3/CanastaOptima';
import { DecisionesPrecios } from '../components/exercises/modulo3/DecisionesPrecios';
import { ParadojaAguaDiamantes } from '../components/exercises/modulo3/ParadojaAguaDiamantes';

// Imports Módulo 4 - Teoría del Productor
import { CalculadoraCostos } from '../components/exercises/modulo4/CalculadoraCostos';
import { SimuladorProduccion } from '../components/exercises/modulo4/SimuladorProduccion';
import { VisualizadorExcedentes } from '../components/exercises/modulo4/VisualizadorExcedentes';
import { FuncionProduccion } from '../components/exercises/modulo4/FuncionProduccion';
import { CortoVsLargoPlazo } from '../components/exercises/modulo4/CortoVsLargoPlazo';
import { ProductoTotal } from '../components/exercises/modulo4/ProductoTotal';
import { ProductoMedio } from '../components/exercises/modulo4/ProductoMedio';
import { ProductoMarginal } from '../components/exercises/modulo4/ProductoMarginal';
import { LeyRendimientosDecrecientes } from '../components/exercises/modulo4/LeyRendimientosDecrecientes';
import { EtapasProduccion } from '../components/exercises/modulo4/EtapasProduccion';
import { ProductorRacional } from '../components/exercises/modulo4/ProductorRacional';
import { CostosFijosVsVariables } from '../components/exercises/modulo4/CostosFijosVsVariables';
import { TablaCostos } from '../components/exercises/modulo4/TablaCostos';
import { CurvasCosto } from '../components/exercises/modulo4/CurvasCosto';
import { CostoTotalMedioMarginal } from '../components/exercises/modulo4/CostoTotalMedioMarginal';
import { CostosMedios } from '../components/exercises/modulo4/CostosMedios';
import { RelacionCMgCMe } from '../components/exercises/modulo4/RelacionCMgCMe';
import { CurvaCostoLargoPlazo } from '../components/exercises/modulo4/CurvaCostoLargoPlazo';
import { EconomiasEscala } from '../components/exercises/modulo4/EconomiasEscala';
import { DiseconomiasEscala } from '../components/exercises/modulo4/DiseconomiasEscala';
import { IngresoTotal } from '../components/exercises/modulo4/IngresoTotal';
import { IngresoMarginal } from '../components/exercises/modulo4/IngresoMarginal';
import { IngresoCompetenciaPerfecta } from '../components/exercises/modulo4/IngresoCompetenciaPerfecta';
import { ReglaImgCmg } from '../components/exercises/modulo4/ReglaImgCmg';
import { PuntoCierreEquilibrio } from '../components/exercises/modulo4/PuntoCierreEquilibrio';

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: 'definicion-economia-quiz', titulo: 'Definición de Economía', descripcion: 'Aprende qué es la economía y sus objetivos principales', componente: DefinicionEconomiaQuiz },
    { id: 'escasez-simulator', titulo: 'Simulador de Escasez', descripcion: 'Comprende el concepto de escasez y sus implicaciones', componente: EscasezSimulator },
    { id: 'problema-economico-fundamental', titulo: 'Problema Económico Fundamental', descripcion: 'Explora las preguntas básicas de toda economía', componente: ProblemaEconomicoFundamental },
    { id: 'economia-positiva-vs-normativa', titulo: 'Economía Positiva vs Normativa', descripcion: 'Diferencia entre análisis descriptivo y prescriptivo', componente: EconomiaPositivaVsNormativa },
    { id: 'razonamiento-economico', titulo: 'Razonamiento Económico', descripcion: 'Desarrolla el pensamiento económico lógico', componente: RazonamientoEconomico },
    { id: 'sistemas-economicos-quiz', titulo: 'Sistemas Económicos', descripcion: 'Conoce los diferentes sistemas económicos', componente: SistemasEconomicosQuiz },
    { id: 'comparativa-sistemas', titulo: 'Comparativa de Sistemas', descripcion: 'Compara características de distintos sistemas', componente: ComparativaSistemas },
    { id: 'casos-paises', titulo: 'Casos de Países', descripcion: 'Analiza ejemplos reales de países', componente: CasosPaises },
    { id: 'ventajas-desventajas-sistemas', titulo: 'Ventajas y Desventajas', descripcion: 'Evalúa pros y contras de cada sistema', componente: VentajasDesventajasSistemas },
    { id: 'fpp-constructor', titulo: 'Constructor de FPP', descripcion: 'Construye la Frontera de Posibilidades de Producción', componente: FPPConstructor },
    { id: 'fpp-analizador', titulo: 'Analizador de FPP', descripcion: 'Analiza puntos en la frontera de posibilidades', componente: FPPAnalizador },
    { id: 'costo-oportunidad-calculator', titulo: 'Calculadora de Costo de Oportunidad', descripcion: 'Calcula costos de oportunidad en la FPP', componente: CostoOportunidadCalculator },
    { id: 'crecimiento-economico-fpp', titulo: 'Crecimiento Económico y FPP', descripcion: 'Observa cómo crece la FPP con el desarrollo', componente: CrecimientoEconomicoFPP },
    { id: 'agentes-economicos-quiz', titulo: 'Agentes Económicos', descripcion: 'Identifica hogares, empresas y gobierno', componente: AgentesEconomicosQuiz },
    { id: 'roles-agentes-matching', titulo: 'Roles de Agentes', descripcion: 'Relaciona agentes con sus funciones', componente: RolesAgentesMatching },
    { id: 'flujo-circular-basico', titulo: 'Flujo Circular Básico', descripcion: 'Comprende el flujo real y monetario', componente: FlujoCircularBasico },
    { id: 'factores-produccion-quiz', titulo: 'Factores de Producción', descripcion: 'Tierra, trabajo, capital y tecnología', componente: FactoresProduccionQuiz },
    { id: 'productividad-calculator', titulo: 'Calculadora de Productividad', descripcion: 'Calcula la eficiencia productiva', componente: ProductividadCalculator },
    { id: 'costo-oportunidad-cotidiano', titulo: 'Costo de Oportunidad Cotidiano', descripcion: 'Encuentra costos de oportunidad en tu vida', componente: CostoOportunidadCotidiano },
    { id: 'ventaja-comparativa-calculator', titulo: 'Ventaja Comparativa', descripcion: 'Calcula ventajas comparativas entre países', componente: VentajaComparativaCalculator },
    { 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: 'ley-demanda-quiz', titulo: 'Ley de la Demanda', descripcion: 'Comprende la relación inversa entre precio y cantidad demandada', componente: LeyDemandaQuiz },
    { id: 'curva-demanda-constructor', titulo: 'Constructor de Curva de Demanda', descripcion: 'Construye la curva de demanda paso a paso', componente: CurvaDemandaConstructor },
    { id: 'tabla-demanda', titulo: 'Tabla de Demanda', descripcion: 'Interpreta tablas de demanda y sus variaciones', componente: TablaDemanda },
    { id: 'demanda-individual-vs-mercado', titulo: 'Demanda Individual vs Mercado', descripcion: 'Diferencia entre demanda individual y agregada', componente: DemandaIndividualVsMercado },
    { id: 'desplazamiento-vs-movimiento', titulo: 'Desplazamiento vs Movimiento', descripcion: 'Distingue cambios en la demanda de variaciones en la cantidad', componente: DesplazamientoVsMovimiento },
    { id: 'factores-desplazan-demanda', titulo: 'Factores que Desplazan la Demanda', descripcion: 'Identifica los determinantes de la demanda', componente: FactoresDesplazanDemanda },
    { id: 'ley-oferta-quiz', titulo: 'Ley de la Oferta', descripcion: 'Comprende la relación directa entre precio y cantidad ofrecida', componente: LeyOfertaQuiz },
    { id: 'curva-oferta-constructor', titulo: 'Constructor de Curva de Oferta', descripcion: 'Construye la curva de oferta paso a paso', componente: CurvaOfertaConstructor },
    { id: 'tabla-oferta', titulo: 'Tabla de Oferta', descripcion: 'Interpreta tablas de oferta y sus variaciones', componente: TablaOferta },
    { id: 'factores-desplazan-oferta', titulo: 'Factores que Desplazan la Oferta', descripcion: 'Identifica los determinantes de la oferta', componente: FactoresDesplazanOferta },
    { id: 'oferta-corto-largo-plazo', titulo: 'Oferta a Corto vs Largo Plazo', descripcion: 'Diferencias en la elasticidad de la oferta según el tiempo', componente: OfertaCortoLargoPlazo },
    { id: 'equilibrio-finder', titulo: 'Buscador de Equilibrio', descripcion: 'Encuentra el punto de equilibrio de mercado', componente: EquilibrioFinder },
    { id: 'equilibrio-grafico', titulo: 'Equilibrio Gráfico', descripcion: 'Visualiza el equilibrio en el gráfico de oferta y demanda', componente: EquilibrioGrafico },
    { id: 'constructor-curvas', titulo: 'Constructor de Curvas', descripcion: 'Construye curvas de oferta y demanda', componente: ConstructorCurvas },
    { id: 'ajuste-equilibrio', titulo: 'Ajuste al Equilibrio', descripcion: 'Observa cómo el mercado se ajusta al equilibrio', componente: AjusteEquilibrio },
    { id: 'exceso-demanda-escasez', titulo: 'Exceso de Demanda (Escasez)', descripcion: 'Analiza situaciones de escasez en el mercado', componente: ExcesoDemandaEscasez },
    { id: 'exceso-oferta-superavit', titulo: 'Exceso de Oferta (Superávit)', descripcion: 'Analiza situaciones de superávit en el mercado', componente: ExcesoOfertaSuperavit },
    { id: 'calculo-elasticidad-precio', titulo: 'Cálculo de Elasticidad Precio', descripcion: 'Calcula la elasticidad precio de la demanda', componente: CalculoElasticidadPrecio },
    { id: 'elasticidad-elastica-inelastica', titulo: 'Elástica vs Inelástica', descripcion: 'Distingue entre demanda elástica e inelástica', componente: ElasticidadElasticaInelastica },
    { id: 'factores-elasticidad', titulo: 'Factores de la Elasticidad', descripcion: 'Identifica qué determina la elasticidad de la demanda', componente: FactoresElasticidad },
    { id: 'elasticidad-ingreso-total', titulo: 'Elasticidad e Ingreso Total', descripcion: 'Relación entre elasticidad e ingreso de los productores', componente: ElasticidadIngresoTotal },
    { id: 'precio-maximo-techo', titulo: 'Precio Máximo (Techo)', descripcion: 'Analiza el efecto de los precios máximos', componente: PrecioMaximoTecho },
    { id: 'precio-minimo-piso', titulo: 'Precio Mínimo (Piso)', descripcion: 'Analiza el efecto de los precios mínimos', componente: PrecioMinimoPiso },
    { id: 'simulador-controles', titulo: 'Simulador de Controles de Precios', descripcion: 'Simula diferentes controles de precios', componente: SimuladorControles },
    { id: 'controles-vida-real', titulo: 'Controles en la Vida Real', descripcion: 'Ejemplos reales de controles de precios', componente: ControlesVidaReal },
    { id: 'cambios-equilibrio', titulo: 'Cambios en el Equilibrio', descripcion: 'Analiza cómo cambian los shocks el equilibrio', componente: CambiosEquilibrio },
    { 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: 'formula-elasticidad', titulo: 'Fórmula de Elasticidad', descripcion: 'Aprende la fórmula de elasticidad precio', componente: FormulaElasticidad },
    { id: 'metodo-punto-medio', titulo: 'Método del Punto Medio', descripcion: 'Calcula elasticidad usando el método del punto medio', componente: MetodoPuntoMedio },
    { id: 'calculadora-elasticidad', titulo: 'Calculadora de Elasticidad', descripcion: 'Calcula elasticidades de demanda', componente: CalculadoraElasticidad },
    { id: 'elasticidad-curva', titulo: 'Elasticidad en la Curva', descripcion: 'Analiza la elasticidad en diferentes puntos de la curva', componente: ElasticidadCurva },
    { id: 'elasticidad-rectas', titulo: 'Elasticidad y Rectas', descripcion: 'Relación entre pendiente y elasticidad', componente: ElasticidadRectas },
    { id: 'clasificacion-elasticidad', titulo: 'Clasificación de Elasticidad', descripcion: 'Clasifica bienes según su elasticidad', componente: ClasificacionElasticidad },

    { id: 'clasificador-bienes', titulo: 'Clasificador de Bienes', descripcion: 'Clasifica bienes según su elasticidad', componente: ClasificadorBienes },
    { id: 'formula-elasticidad-ingreso', titulo: 'Elasticidad Ingreso', descripcion: 'Calcula la elasticidad ingreso de la demanda', componente: FormulaElasticidadIngreso },
    { id: 'bienes-normales-inferiores', titulo: 'Bienes Normales vs Inferiores', descripcion: 'Distingue bienes normales de inferiores', componente: BienesNormalesInferiores },
    { id: 'bienes-lujo-necesarios', titulo: 'Bienes de Lujo vs Necesarios', descripcion: 'Clasifica bienes según su elasticidad ingreso', componente: BienesLujoNecesarios },
    { id: 'curva-engel', titulo: 'Curva de Engel', descripcion: 'Relación entre ingreso y consumo', componente: CurvaEngel },
    { id: 'formula-elasticidad-cruzada', titulo: 'Elasticidad Cruzada', descripcion: 'Calcula elasticidad entre bienes relacionados', componente: FormulaElasticidadCruzada },
    { id: 'sustitutos-complementarios', titulo: 'Sustitutos vs Complementarios', descripcion: 'Identifica bienes sustitutos y complementarios', componente: SustitutosComplementarios },
    { id: 'grado-relacion', titulo: 'Grado de Relación', descripcion: 'Mide la fuerza de la relación entre bienes', componente: GradoRelacion },
    { id: 'utilidad-total-vs-marginal', titulo: 'Utilidad Total vs Marginal', descripcion: 'Diferencia entre utilidad total y marginal', componente: UtilidadTotalVsMarginal },
    { id: 'ley-utilidad-marginal-decreciente', titulo: 'Utilidad Marginal Decreciente', descripcion: 'Comprende la ley de utilidad marginal decreciente', componente: LeyUtilidadMarginalDecreciente },
    { id: 'maximizacion-utilidad', titulo: 'Maximización de Utilidad', descripcion: 'Optimiza la canasta de consumo del consumidor', componente: MaximizacionUtilidad },
    { id: 'curvas-indiferencia', titulo: 'Curvas de Indiferencia', descripcion: 'Visualiza preferencias del consumidor', componente: CurvasIndiferencia },
    { id: 'canasta-optima', titulo: 'Canasta Óptima', descripcion: 'Encuentra la combinación óptima de bienes', componente: CanastaOptima },
    { id: 'decisiones-precios', titulo: 'Decisiones de Precios', descripcion: 'Toma decisiones basadas en elasticidad', componente: DecisionesPrecios },
    { id: 'paradoja-agua-diamantes', titulo: 'Paradoja del Agua y los Diamantes', descripcion: 'Resuelve la paradoja del valor', componente: ParadojaAguaDiamantes },
    { id: 'ejercicios-examen', titulo: 'Ejercicios de Examen', descripcion: 'Pon a prueba tus conocimientos', componente: EjerciciosExamen },
  ],
  4: [
    { id: 'funcion-produccion', titulo: 'Función de Producción', descripcion: 'Comprende la relación entre insumos y producto', componente: FuncionProduccion },
    { id: 'corto-vs-largo-plazo', titulo: 'Corto vs Largo Plazo', descripcion: 'Diferencias en el análisis productivo según el tiempo', componente: CortoVsLargoPlazo },
    { id: 'producto-total', titulo: 'Producto Total', descripcion: 'Analiza la producción total de la empresa', componente: ProductoTotal },
    { id: 'producto-medio', titulo: 'Producto Medio', descripcion: 'Calcula el producto por unidad de factor', componente: ProductoMedio },
    { id: 'producto-marginal', titulo: 'Producto Marginal', descripcion: 'Analiza el producto adicional de cada unidad', componente: ProductoMarginal },
    { id: 'ley-rendimientos-decrecientes', titulo: 'Rendimientos Decrecientes', descripcion: 'Comprende la ley de rendimientos decrecientes', componente: LeyRendimientosDecrecientes },
    { id: 'etapas-produccion', titulo: 'Etapas de Producción', descripcion: 'Identifica las etapas de la producción', componente: EtapasProduccion },
    { id: 'productor-racional', titulo: 'Productor Racional', descripcion: 'Determina la zona de producción racional', componente: ProductorRacional },
    { id: 'costos-fijos-vs-variables', titulo: 'Costos Fijos vs Variables', descripcion: 'Distingue entre costos fijos y variables', componente: CostosFijosVsVariables },
    { id: 'tabla-costos', titulo: 'Tabla de Costos', descripcion: 'Interpreta tablas de costos de producción', componente: TablaCostos },
    { id: 'curvas-costo', titulo: 'Curvas de Costo', descripcion: 'Visualiza las curvas de costos', componente: CurvasCosto },
    { id: 'calculadora-costos', titulo: 'Calculadora de Costos', descripcion: 'Calcula costos de producción', componente: CalculadoraCostos },
    { id: 'costo-total-medio-marginal', titulo: 'Costo Total, Medio y Marginal', descripcion: 'Relación entre los diferentes costos', componente: CostoTotalMedioMarginal },
    { id: 'costos-medios', titulo: 'Costos Medios', descripcion: 'Analiza los costos medios de producción', componente: CostosMedios },
    { id: 'relacion-cmg-cme', titulo: 'Relación CMg y CMe', descripcion: 'Relación entre costo marginal y costo medio', componente: RelacionCMgCMe },
    { id: 'curva-costo-largo-plazo', titulo: 'Curva de Costo Largo Plazo', descripcion: 'Analiza costos cuando todos los factores son variables', componente: CurvaCostoLargoPlazo },
    { id: 'economias-escala', titulo: 'Economías de Escala', descripcion: 'Ventajas de la producción a gran escala', componente: EconomiasEscala },
    { id: 'diseconomias-escala', titulo: 'Diseconomías de Escala', descripcion: 'Desventajas de la producción excesiva', componente: DiseconomiasEscala },
    { id: 'ingreso-total', titulo: 'Ingreso Total', descripcion: 'Calcula los ingresos totales de la empresa', componente: IngresoTotal },
    { id: 'ingreso-marginal', titulo: 'Ingreso Marginal', descripcion: 'Analiza el ingreso adicional por unidad vendida', componente: IngresoMarginal },
    { id: 'ingreso-competencia-perfecta', titulo: 'Ingreso en Competencia Perfecta', descripcion: 'Características del ingreso en competencia perfecta', componente: IngresoCompetenciaPerfecta },
    { id: 'regla-img-cmg', titulo: 'Regla IMg = CMg', descripcion: 'Maximización de beneficios: igualar ingreso y costo marginal', componente: ReglaImgCmg },
    { id: 'punto-cierre-equilibrio', titulo: 'Punto de Cierre y Equilibrio', descripcion: 'Determina cuándo cerrar o continuar produciendo', componente: PuntoCierreEquilibrio },
    { 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;