// @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 4
import { produccion } from '../../content/modulo4/produccion';
import { costos } from '../../content/modulo4/costos';
import { mercado } from '../../content/modulo4/mercado';

// Importar componentes de ejercicios
import { CalculadoraCostos, SimuladorProduccion, VisualizadorExcedentes } from '../../components/exercises/modulo4';

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

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

export function Modulo4Page() {
  const { numero: _numero } = useParams<{ numero: string }>();
  const [activeTab, setActiveTab] = useState<Tab>('Contenido');
  const [activeSeccion, setActiveSeccion] = useState<'produccion' | 'costos' | 'mercado'>('produccion');
  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 === 4 && 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-costos',
      titulo: 'Calculadora de Costos',
      descripcion: 'Ingresa CF, CV para cada nivel de producción y calcula automáticamente todos los costos medios y marginales.',
      componente: (
        <CalculadoraCostos
          ejercicioId="calculadora-costos"
          onComplete={() => handleCompleteEjercicio('calculadora-costos', 100)}
        />
      ),
    },
    {
      id: 'simulador-produccion',
      titulo: 'Simulador de Producción',
      descripcion: 'Dado un precio de mercado y curva de costos, encuentra la cantidad óptima y determina si debes producir o cerrar.',
      componente: (
        <SimuladorProduccion
          ejercicioId="simulador-produccion"
          onComplete={() => handleCompleteEjercicio('simulador-produccion', 100)}
        />
      ),
    },
    {
      id: 'visualizador-excedentes',
      titulo: 'Visualizador de Excedentes',
      descripcion: 'Interactúa con el gráfico para ver cómo cambia el excedente del productor al variar el precio y la cantidad.',
      componente: (
        <VisualizadorExcedentes
          ejercicioId="visualizador-excedentes"
          onComplete={() => handleCompleteEjercicio('visualizador-excedentes', 100)}
        />
      ),
    },
  ];

  // Estructura de contenido del módulo 4
  const seccionesContenido = {
    produccion: {
      titulo: produccion.titulo,
      contenido: produccion.contenido,
    },
    costos: {
      titulo: costos.titulo,
      contenido: costos.contenido,
    },
    mercado: {
      titulo: mercado.titulo,
      contenido: mercado.contenido,
    },
  };

  const currentSeccion = seccionesContenido[activeSeccion];

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

  // Función auxiliar para renderizar contenido markdown-like
  const renderContenido = (texto: string) => {
    const partes = texto.split(/(\*\*.*?\*\*|\$.*?\$|`.*?`|\n\n)/);
    return partes.map((parte, index) => {
      if (parte.startsWith('**') && parte.endsWith('**')) {
        return <strong key={index}>{parte.slice(2, -2)}</strong>;
      }
      if (parte.startsWith('$') && parte.endsWith('$')) {
        return <code key={index} className="bg-gray-100 px-1 rounded">{parte.slice(1, -1)}</code>;
      }
      if (parte.startsWith('`') && parte.endsWith('`')) {
        return <code key={index} className="bg-gray-100 px-1 rounded text-red-600">{parte.slice(1, -1)}</code>;
      }
      if (parte === '\n\n') {
        return <br key={index} />;
      }
      return <span key={index}>{parte}</span>;
    });
  };

  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-orange-600 to-orange-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">
              4
            </div>
            <div>
              <h1 className="text-3xl font-bold">Módulo 4: Teoría del Productor</h1>
              <p className="text-orange-100 mt-1">
                Producción, costos y competencia perfecta
              </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="activeTab4"
                  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-orange-50 text-orange-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((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-orange max-w-none">
                          {seccion.contenido.split('\n\n').map((parrafo, pIndex) => {
                            // Detectar si es una tabla
                            if (parrafo.includes('|') && parrafo.includes('---')) {
                              const lineas = parrafo.split('\n').filter(l => l.trim() && !l.includes('---'));
                              if (lineas.length >= 2) {
                                return (
                                  <div key={pIndex} className="overflow-x-auto my-4">
                                    <table className="min-w-full text-sm border-collapse">
                                      <thead>
                                        <tr className="bg-gray-50">
                                          {lineas[0].split('|').filter(Boolean).map((cell, cIndex) => (
                                            <th key={cIndex} className="px-3 py-2 text-left font-medium border">
                                              {cell.trim()}
                                            </th>
                                          ))}
                                        </tr>
                                      </thead>
                                      <tbody>
                                        {lineas.slice(1).map((linea, lIndex) => (
                                          <tr key={lIndex} className="border-b">
                                            {linea.split('|').filter(Boolean).map((cell, cIndex) => (
                                              <td key={cIndex} className="px-3 py-2 border">
                                                {cell.trim()}
                                              </td>
                                            ))}
                                          </tr>
                                        ))}
                                      </tbody>
                                    </table>
                                  </div>
                                );
                              }
                            }
                            
                            // Detectar si es código
                            if (parrafo.startsWith('```')) {
                              return (
                                <pre key={pIndex} className="bg-gray-900 text-white p-4 rounded-lg overflow-x-auto my-4">
                                  <code>{parrafo.replace(/```/g, '').trim()}</code>
                                </pre>
                              );
                            }

                            return (
                              <p key={pIndex} className="text-gray-600 mb-4 leading-relaxed whitespace-pre-line">
                                {renderContenido(parrafo)}
                              </p>
                            );
                          })}
                        </div>
                      </div>
                    ))}
                  </div>
                </Card>

                <Card className="bg-orange-50 border-orange-200">
                  <h3 className="font-semibold text-orange-900 mb-3">Ejercicios Relacionados</h3>
                  <p className="text-orange-700 text-sm mb-4">
                    Practica con simuladores interactivos de costos, producción y excedentes
                  </p>
                  <Button
                    onClick={() => setActiveTab('Ejercicios')}
                    variant="outline"
                    className="border-orange-300 text-orange-700 hover:bg-orange-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-orange-100 text-orange-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 Modulo4Page;
