// @ts-nocheck
import { useState, useEffect } from 'react';
import { useParams, Link } from 'react-router-dom';
import { motion, AnimatePresence } from 'framer-motion';
import { Card } from '../../components/ui/Card';
import { Button } from '../../components/ui/Button';
import { progresoService } from '../../services/api';
import type { Progreso } from '../../types';
import { ArrowLeft, CheckCircle, Play, BookOpen, Trophy, ChevronRight } from 'lucide-react';

// Importar contenido del módulo 3
import { conceptosElasticidad } from '../../content/modulo3/conceptos';
import { tiposElasticidad } from '../../content/modulo3/tipos';
import { clasificacionBienes } from '../../content/modulo3/clasificacion';
import { ejercicios as modulo3Ejercicios } from '../../content/modulo3/ejercicios';

// Importar componentes de ejercicios
import { CalculadoraElasticidad, ClasificadorBienes, EjerciciosExamen } from '../../components/exercises/modulo3';

const TABS = ['Contenido', 'Ejercicios'] as const;
type Tab = typeof TABS[number];

interface EjercicioConfig {
  id: string;
  titulo: string;
  descripcion: string;
  componente: React.ReactNode;
}

interface ContenidoItem {
  titulo: string;
  texto: string;
  interpretacion?: string;
  formula?: { latex?: string; ecuacion?: string } | string;
  interpretaciones?: Array<{
    rango: string;
    clasificacion: string;
    significado?: string;
    descripcion?: string;
    ejemplo?: string;
  }>;
  factores?: Array<{
    factor?: string;
    nombre?: string;
    efecto?: string;
    descripcion?: string;
    explicacion?: string;
  }>;
  reglas?: Array<{
    elasticidad: string;
    efectoPrecioArriba: string;
    efectoPrecioAbajo: string;
  }>;
  clasificacion?: Array<{
    tipo: string;
    descripcion: string;
    condicion: string;
    subtipos?: Array<{ tipo: string; rango: string }>;
  }>;
  categorias?: Array<{
    tipo: string;
    descripcion: string;
    condicion: string;
    ejemplos?: string[];
  }>;
  matriz?: Array<{
    combinacion: string;
    ejemplo: string;
    caracteristicas: string;
  }>;
  determinantes?: string[];
}

export function Modulo3Page() {
  const { numero } = useParams<{ numero: string }>();
  const [activeTab, setActiveTab] = useState<Tab>('Contenido');
  const [activeSeccion, setActiveSeccion] = useState<'conceptos' | 'tipos' | 'clasificacion'>('conceptos');
  const [activeEjercicio, setActiveEjercicio] = useState<string | null>(null);
  const [progresos, setProgresos] = useState<Progreso[]>([]);
  const [loading, setLoading] = useState(false);

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

  const loadProgreso = async () => {
    try {
      const data = await progresoService.getProgreso();
      setProgresos(data);
    } catch {
      // Silenciar error
    }
  };

  const getProgresoForEjercicio = (ejercicioId: string) => {
    return progresos.find(
      (p) => p.modulo_numero === 3 && p.ejercicio_id === ejercicioId
    );
  };

  const handleCompleteEjercicio = async (ejercicioId: string, puntuacion: number) => {
    setLoading(true);
    try {
      await progresoService.saveProgreso(ejercicioId, puntuacion);
      await loadProgreso();
    } catch {
      // Silenciar error
    } finally {
      setLoading(false);
    }
  };

  // Configuración de ejercicios
  const ejerciciosConfig: EjercicioConfig[] = [
    {
      id: 'calculadora-elasticidad',
      titulo: 'Calculadora de Elasticidad',
      descripcion: 'Calcula paso a paso la elasticidad precio, ingreso y cruzada con ejemplos prácticos.',
      componente: (
        <CalculadoraElasticidad
          ejercicioId="calculadora-elasticidad"
          onComplete={(puntuacion) => handleCompleteEjercicio('calculadora-elasticidad', puntuacion)}
        />
      ),
    },
    {
      id: 'clasificador-bienes',
      titulo: 'Clasificador de Bienes',
      descripcion: 'Clasifica bienes según su elasticidad ingreso y cruzada. Identifica normales, inferiores, lujos, sustitutos y complementos.',
      componente: (
        <ClasificadorBienes
          ejercicioId="clasificador-bienes"
          onComplete={(puntuacion) => handleCompleteEjercicio('clasificador-bienes', puntuacion)}
        />
      ),
    },
    {
      id: 'ejercicios-examen',
      titulo: 'Ejercicios Tipo Examen',
      descripcion: 'Resuelve problemas integradores de elasticidad con dificultad de examen.',
      componente: (
        <EjerciciosExamen
          ejercicioId="ejercicios-examen"
          onComplete={(puntuacion) => handleCompleteEjercicio('ejercicios-examen', puntuacion)}
        />
      ),
    },
  ];

  // Estructura de contenido del módulo 3
  const seccionesContenido: {
    conceptos: { titulo: string; contenido: ContenidoItem[] };
    tipos: { titulo: string; contenido: ContenidoItem[] };
    clasificacion: { titulo: string; contenido: ContenidoItem[] };
  } = {
    conceptos: {
      titulo: 'Conceptos Fundamentales',
      contenido: [
        {
          titulo: conceptosElasticidad.definicionElasticidad.titulo,
          texto: conceptosElasticidad.definicionElasticidad.definicion,
          interpretacion: conceptosElasticidad.definicionElasticidad.interpretacionIntuitiva,
          formula: conceptosElasticidad.definicionElasticidad.formulaGeneral,
        },
        {
          titulo: conceptosElasticidad.elasticidadPrecioDemanda.titulo,
          texto: conceptosElasticidad.elasticidadPrecioDemanda.definicion,
          interpretaciones: conceptosElasticidad.elasticidadPrecioDemanda.interpretacion,
        },
        {
          titulo: conceptosElasticidad.determinantesElasticidad.titulo,
          texto: 'Los siguientes factores determinan la elasticidad de un bien:',
          factores: conceptosElasticidad.determinantesElasticidad.factores,
        },
        {
          titulo: conceptosElasticidad.relacionIngresoTotal.titulo,
          texto: conceptosElasticidad.relacionIngresoTotal.definicion,
          reglas: conceptosElasticidad.relacionIngresoTotal.reglas,
        },
      ],
    },
    tipos: {
      titulo: 'Tipos de Elasticidad',
      contenido: [
        {
          titulo: 'Elasticidad Precio de la Demanda (Ed)',
          texto: tiposElasticidad.tipos[0].descripcion,
          formula: tiposElasticidad.tipos[0].formula,
          determinantes: tiposElasticidad.tipos[0].determinantes,
        },
        {
          titulo: 'Elasticidad Ingreso de la Demanda (Ei)',
          texto: tiposElasticidad.tipos[1].descripcion,
          formula: tiposElasticidad.tipos[1].formula,
          clasificacion: tiposElasticidad.tipos[1].clasificacionBienes,
        },
        {
          titulo: 'Elasticidad Cruzada (Exy)',
          texto: tiposElasticidad.tipos[2].descripcion,
          formula: tiposElasticidad.tipos[2].formula,
          categorias: tiposElasticidad.tipos[2].clasificacionBienes,
        },
        {
          titulo: 'Elasticidad Precio de la Oferta (Es)',
          texto: tiposElasticidad.tipos[3].descripcion,
          formula: tiposElasticidad.tipos[3].formula,
          interpretacion: tiposElasticidad.tipos[3].interpretacion,
        },
      ],
    },
    clasificacion: {
      titulo: 'Clasificación de Bienes',
      contenido: [
        {
          titulo: 'Según Elasticidad Ingreso',
          texto: clasificacionBienes.clasificacionPorIngreso.descripcion,
          formula: clasificacionBienes.clasificacionPorIngreso.formulaReferencia,
          categorias: clasificacionBienes.clasificacionPorIngreso.categorias,
        },
        {
          titulo: 'Según Elasticidad Cruzada',
          texto: clasificacionBienes.clasificacionPorElasticidadCruzada.descripcion,
          formula: clasificacionBienes.clasificacionPorElasticidadCruzada.formulaReferencia,
          categorias: clasificacionBienes.clasificacionPorElasticidadCruzada.categorias,
        },
        {
          titulo: 'Matriz de Clasificación Completa',
          texto: clasificacionBienes.matrizClasificacionCompleta.descripcion,
          matriz: clasificacionBienes.matrizClasificacionCompleta.matriz,
        },
      ],
    },
  };

  const currentSeccion = seccionesContenido[activeSeccion];

  // Calcular progreso
  const ejerciciosCompletados = ejerciciosConfig.filter(
    (e) => getProgresoForEjercicio(e.id)?.completado
  ).length;
  const porcentajeProgreso = Math.round((ejerciciosCompletados / ejerciciosConfig.length) * 100);

  return (
    <div className="min-h-screen bg-gray-50">
      {/* Header */}
      <header className="bg-white shadow-sm sticky top-0 z-10">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
          <div className="flex items-center justify-between">
            <Link to="/modulos" className="inline-flex items-center text-blue-600 hover:underline">
              <ArrowLeft className="w-4 h-4 mr-2" />
              Volver a Módulos
            </Link>
            <div className="flex items-center gap-2">
              <span className="text-sm text-gray-600">Progreso:</span>
              <div className="w-32 bg-gray-200 rounded-full h-2">
                <div
                  className="bg-green-500 h-2 rounded-full transition-all"
                  style={{ width: `${porcentajeProgreso}%` }}
                />
              </div>
              <span className="text-sm font-medium text-gray-700">{porcentajeProgreso}%</span>
            </div>
          </div>
        </div>
      </header>

      {/* Título del módulo */}
      <div className="bg-gradient-to-r from-purple-600 to-purple-800 text-white">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
          <div className="flex items-center gap-4">
            <div className="w-16 h-16 bg-white/20 rounded-xl flex items-center justify-center text-3xl font-bold">
              3
            </div>
            <div>
              <h1 className="text-3xl font-bold">Módulo 3: Elasticidad</h1>
              <p className="text-purple-100 mt-1">
                Tipos de elasticidad, clasificación de bienes y análisis de sensibilidad
              </p>
            </div>
          </div>
        </div>
      </div>

      {/* Tabs */}
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
        <div className="flex gap-2 border-b border-gray-200">
          {TABS.map((tab) => (
            <button
              key={tab}
              onClick={() => {
                setActiveTab(tab);
                setActiveEjercicio(null);
              }}
              className={`px-6 py-3 font-medium text-sm transition-colors relative ${
                activeTab === tab
                  ? 'text-blue-600'
                  : 'text-gray-500 hover:text-gray-700'
              }`}
            >
              {tab === 'Contenido' && <BookOpen className="w-4 h-4 inline mr-2" />}
              {tab === 'Ejercicios' && <Trophy className="w-4 h-4 inline mr-2" />}
              {tab}
              {activeTab === tab && (
                <motion.div
                  layoutId="activeTab3"
                  className="absolute bottom-0 left-0 right-0 h-0.5 bg-blue-600"
                />
              )}
            </button>
          ))}
        </div>

        {/* Contenido según tab activo */}
        <AnimatePresence mode="wait">
          {activeTab === 'Contenido' ? (
            <motion.div
              key="contenido"
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              exit={{ opacity: 0, y: -20 }}
              className="mt-6 grid grid-cols-1 lg:grid-cols-4 gap-6"
            >
              {/* Navegación de secciones */}
              <div className="lg:col-span-1">
                <Card className="sticky top-24">
                  <h3 className="font-semibold text-gray-900 mb-4">Secciones</h3>
                  <nav className="space-y-2">
                    {(Object.keys(seccionesContenido) as Array<keyof typeof seccionesContenido>).map((key) => (
                      <button
                        key={key}
                        onClick={() => setActiveSeccion(key)}
                        className={`w-full text-left px-3 py-2 rounded-lg text-sm transition-colors flex items-center justify-between ${
                          activeSeccion === key
                            ? 'bg-purple-50 text-purple-700 font-medium'
                            : 'text-gray-600 hover:bg-gray-50'
                        }`}
                      >
                        {seccionesContenido[key].titulo}
                        <ChevronRight className="w-4 h-4" />
                      </button>
                    ))}
                  </nav>
                </Card>
              </div>

              {/* Contenido de la sección */}
              <div className="lg:col-span-3 space-y-6">
                <Card>
                  <h2 className="text-2xl font-bold text-gray-900 mb-6">{currentSeccion.titulo}</h2>
                  <div className="space-y-6">
                    {currentSeccion.contenido.map((item, index) => (
                      <div key={index} className="border-b border-gray-100 last:border-0 pb-6 last:pb-0">
                        <h3 className="text-lg font-semibold text-gray-800 mb-3">{item.titulo}</h3>
                        <p className="text-gray-600 mb-4 leading-relaxed">{item.texto}</p>

                        {/* Mostrar interpretación si existe */}
                        {item.interpretacion && (
                          <div className="bg-blue-50 p-4 rounded-lg mb-4">
                            <p className="text-blue-800 text-sm">{item.interpretacion}</p>
                          </div>
                        )}

                        {/* Mostrar fórmula si existe */}
                        {item.formula && (
                          <div className="bg-gray-100 p-4 rounded-lg mb-4">
                            <pre className="text-sm text-gray-800 overflow-x-auto">
                              {item.formula.latex || item.formula.ecuacion || item.formula}
                            </pre>
                          </div>
                        )}

                        {/* Mostrar interpretaciones de elasticidad */}
                        {item.interpretaciones && (
                          <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
                            {item.interpretaciones.map((interp: any, i: number) => (
                              <div key={i} className={`p-3 rounded-lg border ${
                                interp.rango === '|Ed| > 1' || interp.rango === 'Es > 1'
                                  ? 'bg-green-50 border-green-200'
                                  : interp.rango === '|Ed| < 1' || interp.rango === 'Es < 1'
                                  ? 'bg-yellow-50 border-yellow-200'
                                  : 'bg-blue-50 border-blue-200'
                              }`}>
                                <h4 className="font-medium text-gray-800">{interp.clasificacion}</h4>
                                <p className="text-sm text-gray-600">{interp.significado || interp.descripcion}</p>
                                {interp.ejemplo && (
                                  <p className="text-sm text-gray-500 mt-1">Ejemplo: {interp.ejemplo}</p>
                                )}
                              </div>
                            ))}
                          </div>
                        )}

                        {/* Mostrar factores determinantes */}
                        {item.factores && (
                          <div className="space-y-2">
                            {item.factores.map((factor: any, i: number) => (
                              <div key={i} className="flex items-start gap-3 p-3 bg-gray-50 rounded-lg">
                                <div className="flex-1">
                                  <h4 className="font-medium text-gray-800">{factor.factor || factor.nombre}</h4>
                                  <p className="text-sm text-gray-600">{factor.efecto || factor.descripcion}</p>
                                  {factor.explicacion && (
                                    <p className="text-sm text-gray-500 mt-1">{factor.explicacion}</p>
                                  )}
                                </div>
                              </div>
                            ))}
                          </div>
                        )}

                        {/* Mostrar reglas de ingreso total */}
                        {item.reglas && (
                          <div className="space-y-3">
                            {item.reglas.map((regla: any, i: number) => (
                              <div key={i} className="bg-purple-50 p-3 rounded-lg border border-purple-200">
                                <h4 className="font-medium text-purple-900">{regla.elasticidad}</h4>
                                <div className="text-sm text-purple-700 mt-1 space-y-1">
                                  <p>Precio ↑: {regla.efectoPrecioArriba}</p>
                                  <p>Precio ↓: {regla.efectoPrecioAbajo}</p>
                                </div>
                              </div>
                            ))}
                          </div>
                        )}

                        {/* Mostrar clasificación de bienes por ingreso */}
                        {item.clasificacion && item.titulo?.includes('Ingreso') && (
                          <div className="space-y-3">
                            {item.clasificacion.map((cat: any, i: number) => (
                              <div key={i} className={`p-3 rounded-lg border ${
                                cat.condicion?.includes('> 0') && !cat.condicion?.includes('<')
                                  ? 'bg-green-50 border-green-200'
                                  : 'bg-red-50 border-red-200'
                              }`}>
                                <h4 className="font-medium text-gray-800">{cat.tipo}</h4>
                                <p className="text-sm text-gray-600">{cat.descripcion}</p>
                                <p className="text-sm font-medium mt-1">Condición: {cat.condicion}</p>
                                {cat.subtipos && (
                                  <div className="mt-2 space-y-1">
                                    {cat.subtipos.map((sub: any, j: number) => (
                                      <div key={j} className="text-sm text-gray-600 pl-3 border-l-2 border-gray-300">
                                        <strong>{sub.tipo}:</strong> {sub.rango}
                                      </div>
                                    ))}
                                  </div>
                                )}
                              </div>
                            ))}
                          </div>
                        )}

                        {/* Mostrar clasificación por elasticidad cruzada */}
                        {item.categorias && item.titulo?.includes('Cruzada') && (
                          <div className="space-y-3">
                            {item.categorias.map((cat: any, i: number) => (
                              <div key={i} className={`p-3 rounded-lg border ${
                                cat.condicion?.includes('> 0')
                                  ? 'bg-green-50 border-green-200'
                                  : cat.condicion?.includes('< 0')
                                  ? 'bg-red-50 border-red-200'
                                  : 'bg-gray-50 border-gray-200'
                              }`}>
                                <h4 className="font-medium text-gray-800">{cat.tipo}</h4>
                                <p className="text-sm text-gray-600">{cat.descripcion}</p>
                                <p className="text-sm font-medium mt-1">Exy {cat.condicion}</p>
                                {cat.ejemplos && (
                                  <p className="text-sm text-gray-500 mt-1">
                                    Ejemplos: {cat.ejemplos.slice(0, 3).join(', ')}
                                  </p>
                                )}
                              </div>
                            ))}
                          </div>
                        )}

                        {/* Mostrar matriz de clasificación */}
                        {item.matriz && (
                          <div className="overflow-x-auto">
                            <table className="min-w-full text-sm">
                              <thead className="bg-gray-50">
                                <tr>
                                  <th className="px-3 py-2 text-left font-medium text-gray-700">Combinación</th>
                                  <th className="px-3 py-2 text-left font-medium text-gray-700">Ejemplo</th>
                                  <th className="px-3 py-2 text-left font-medium text-gray-700">Características</th>
                                </tr>
                              </thead>
                              <tbody className="divide-y divide-gray-100">
                                {item.matriz.map((fila: any, i: number) => (
                                  <tr key={i}>
                                    <td className="px-3 py-2 font-medium text-gray-800">{fila.combinacion}</td>
                                    <td className="px-3 py-2 text-gray-600">{fila.ejemplo}</td>
                                    <td className="px-3 py-2 text-gray-600">{fila.caracteristicas}</td>
                                  </tr>
                                ))}
                              </tbody>
                            </table>
                          </div>
                        )}
                      </div>
                    ))}
                  </div>
                </Card>

                <Card className="bg-purple-50 border-purple-200">
                  <h3 className="font-semibold text-purple-900 mb-3">Ejercicios Relacionados</h3>
                  <p className="text-purple-700 text-sm mb-4">
                    Practica el cálculo y clasificación de elasticidad con ejercicios interactivos
                  </p>
                  <Button
                    onClick={() => setActiveTab('Ejercicios')}
                    variant="outline"
                    className="border-purple-300 text-purple-700 hover:bg-purple-100"
                  >
                    <Play className="w-4 h-4 mr-2" />
                    Ir a Ejercicios
                  </Button>
                </Card>
              </div>
            </motion.div>
          ) : (
            <motion.div
              key="ejercicios"
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              exit={{ opacity: 0, y: -20 }}
              className="mt-6"
            >
              {activeEjercicio ? (
                <div className="space-y-6">
                  <div className="flex items-center justify-between">
                    <Button variant="ghost" onClick={() => setActiveEjercicio(null)}>
                      <ArrowLeft className="w-4 h-4 mr-2" />
                      Volver a ejercicios
                    </Button>
                    {loading && <span className="text-sm text-gray-500">Guardando progreso...</span>}
                  </div>
                  {ejerciciosConfig.find((e) => e.id === activeEjercicio)?.componente}
                </div>
              ) : (
                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                  {ejerciciosConfig.map((ejercicio, index) => {
                    const progreso = getProgresoForEjercicio(ejercicio.id);
                    const completado = progreso?.completado || false;

                    return (
                      <Card
                        key={ejercicio.id}
                        className="hover:shadow-lg transition-shadow cursor-pointer"
                        onClick={() => setActiveEjercicio(ejercicio.id)}
                      >
                        <div className="flex items-start gap-4">
                          <div
                            className={`w-12 h-12 rounded-xl flex items-center justify-center flex-shrink-0 ${
                              completado ? 'bg-green-100 text-green-600' : 'bg-purple-100 text-purple-600'
                            }`}
                          >
                            {completado ? (
                              <CheckCircle className="w-6 h-6" />
                            ) : (
                              <span className="text-xl font-bold">{index + 1}</span>
                            )}
                          </div>
                          <div className="flex-1">
                            <h3 className="font-semibold text-gray-900">{ejercicio.titulo}</h3>
                            <p className="text-sm text-gray-500 mt-1">{ejercicio.descripcion}</p>
                            {completado && progreso && (
                              <div className="mt-3 flex items-center gap-2">
                                <span className="text-xs bg-green-100 text-green-700 px-2 py-1 rounded-full">
                                  Completado
                                </span>
                                <span className="text-xs text-gray-500">
                                  {progreso.puntuacion} pts
                                </span>
                              </div>
                            )}
                          </div>
                        </div>
                        <Button className="w-full mt-4" size="sm">
                          <Play className="w-4 h-4 mr-2" />
                          {completado ? 'Repetir' : 'Comenzar'}
                        </Button>
                      </Card>
                    );
                  })}
                </div>
              )}

              {ejerciciosCompletados === ejerciciosConfig.length && ejerciciosConfig.length > 0 && (
                <Card className="mt-6 bg-green-50 border-green-200">
                  <div className="flex items-center gap-4">
                    <div className="w-12 h-12 bg-green-100 rounded-full flex items-center justify-center">
                      <Trophy className="w-6 h-6 text-green-600" />
                    </div>
                    <div>
                      <h3 className="font-semibold text-green-900">¡Felicitaciones!</h3>
                      <p className="text-green-700 text-sm">
                        Has completado todos los ejercicios de este módulo.
                      </p>
                    </div>
                  </div>
                </Card>
              )}
            </motion.div>
          )}
        </AnimatePresence>
      </div>
    </div>
  );
}

export default Modulo3Page;
