// @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 1
import { introduccion, agentes, factores } from '../../content/modulo1';
import { ejercicios as modulo1Ejercicios } from '../../content/modulo1/ejercicios';

// Importar componentes de ejercicios
import { SimuladorDisyuntivas, QuizBienes, FlujoCircular } from '../../components/exercises/modulo1';

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

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

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

  // Cargar progreso al montar
  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 === 1 && 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 con sus componentes
  const ejerciciosConfig: EjercicioConfig[] = [
    {
      id: 'simulador-disyuntivas',
      titulo: modulo1Ejercicios.ejercicios[0].titulo,
      descripcion: modulo1Ejercicios.ejercicios[0].descripcion,
      componente: (
        <SimuladorDisyuntivas
          ejercicioId="simulador-disyuntivas"
          onComplete={(puntuacion) => handleCompleteEjercicio('simulador-disyuntivas', puntuacion)}
        />
      ),
    },
    {
      id: 'quiz-clasificacion-bienes',
      titulo: modulo1Ejercicios.ejercicios[1].titulo,
      descripcion: modulo1Ejercicios.ejercicios[1].descripcion,
      componente: (
        <QuizBienes
          ejercicioId="quiz-clasificacion-bienes"
          onComplete={(puntuacion) => handleCompleteEjercicio('quiz-clasificacion-bienes', puntuacion)}
        />
      ),
    },
    {
      id: 'juego-flujo-circular',
      titulo: modulo1Ejercicios.ejercicios[2].titulo,
      descripcion: modulo1Ejercicios.ejercicios[2].descripcion,
      componente: (
        <FlujoCircular
          ejercicioId="juego-flujo-circular"
          onComplete={(puntuacion) => handleCompleteEjercicio('juego-flujo-circular', puntuacion)}
        />
      ),
    },
  ];

  const seccionesContenido = {
    introduccion: {
      titulo: introduccion.titulo,
      data: introduccion,
    },
    agentes: {
      titulo: agentes.titulo,
      data: agentes,
    },
    factores: {
      titulo: factores.titulo,
      data: factores,
    },
  };

  const currentSeccion = seccionesContenido[activeSeccion];

  // Calcular progreso del módulo
  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-blue-600 to-blue-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">
              1
            </div>
            <div>
              <h1 className="text-3xl font-bold">Módulo 1: Fundamentos de Economía</h1>
              <p className="text-blue-100 mt-1">
                Introducción a los conceptos básicos, agentes económicos y factores de producción
              </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="activeTab"
                  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-blue-50 text-blue-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.data.contenido.map((seccion, 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">{seccion.titulo}</h3>
                        <div className="prose prose-blue max-w-none">
                          {seccion.contenido.split('\n\n').map((parrafo, pIndex) => (
                            <p key={pIndex} className="text-gray-600 mb-4 leading-relaxed whitespace-pre-line">
                              {parrafo}
                            </p>
                          ))}
                        </div>
                      </div>
                    ))}
                  </div>
                </Card>

                {/* Ejercicios relacionados con la sección */}
                {currentSeccion.data.ejercicios && currentSeccion.data.ejercicios.length > 0 && (
                  <Card className="bg-blue-50 border-blue-200">
                    <h3 className="font-semibold text-blue-900 mb-3">Ejercicios Relacionados</h3>
                    <p className="text-blue-700 text-sm mb-4">
                      Practica lo aprendido con estos ejercicios interactivos
                    </p>
                    <Button
                      onClick={() => setActiveTab('Ejercicios')}
                      variant="outline"
                      className="border-blue-300 text-blue-700 hover:bg-blue-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 ? (
                // Vista de ejercicio activo
                <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>
              ) : (
                // Lista de ejercicios
                <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-blue-100 text-blue-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>
              )}

              {/* Mensaje de completado */}
              {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 Modulo1Page;
