import { Link } from 'react-router-dom';
import { Card } from '../components/ui/Card';
import { Button } from '../components/ui/Button';
import { useProgresoStore } from '../stores/progresoStore';
import { ArrowRight, ArrowLeft, CheckCircle, Lock, Play } from 'lucide-react';

const MODULOS = [
  {
    numero: 1,
    titulo: 'Fundamentos de Economía',
    descripcion: 'Aprende los conceptos básicos: definición de economía, agentes económicos, factores de producción y el flujo circular de la economía.',
    temas: ['Definición de economía', 'Agentes económicos', 'Factores de producción', 'Flujo circular'],
    totalEjercicios: 5,
    bloqueado: false,
  },
  {
    numero: 2,
    titulo: 'Oferta, Demanda y Equilibrio',
    descripcion: 'Domina las curvas de oferta y demanda, aprende cómo se determinan los precios y entiende los controles de mercado.',
    temas: ['Curva de demanda', 'Curva de oferta', 'Equilibrio de mercado', 'Controles de precios'],
    totalEjercicios: 5,
    bloqueado: false,
  },
  {
    numero: 3,
    titulo: 'Utilidad y Elasticidad',
    descripcion: 'Explora la teoría del consumidor, aprende a calcular elasticidades y clasifica diferentes tipos de bienes.',
    temas: ['Utilidad marginal', 'Elasticidad precio', 'Elasticidad ingreso', 'Clasificación de bienes'],
    totalEjercicios: 5,
    bloqueado: false,
  },
  {
    numero: 4,
    titulo: 'Teoría del Productor',
    descripcion: 'Comprende los costos de producción, la toma de decisiones del productor y los fundamentos de la competencia perfecta.',
    temas: ['Costos de producción', 'Producción y costos', 'Competencia perfecta', 'Maximización de beneficios'],
    totalEjercicios: 5,
    bloqueado: false,
  },
];

export function Modulos() {
  const { progresoModulos } = useProgresoStore();

  const getModuloProgress = (moduloNumero: number, totalEjercicios: number) => {
    const progreso = progresoModulos.find(p => p.moduloNumero === moduloNumero);
    const completados = progreso?.ejercicios.filter(e => e.completado).length || 0;
    const porcentaje = Math.round((completados / totalEjercicios) * 100);
    return { completados, porcentaje };
  };

  return (
    <div className="min-h-screen bg-gray-50">
      <header className="bg-white shadow-sm">
        <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-primary hover:underline">
            <ArrowLeft className="w-4 h-4 mr-2" />
            Volver al Dashboard
          </Link>
        </div>
      </header>

      <main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
        <div className="text-center mb-12">
          <h1 className="text-3xl font-bold text-gray-900 mb-4">Módulos Educativos</h1>
          <p className="text-gray-600 max-w-2xl mx-auto">
            Explora los 4 módulos de economía. Cada uno contiene ejercicios interactivos
            para fortalecer tu comprensión de los conceptos.
          </p>
        </div>

        <div className="space-y-6">
          {MODULOS.map((modulo) => {
            const { completados, porcentaje } = getModuloProgress(modulo.numero, modulo.totalEjercicios);
            const estaCompletado = porcentaje === 100;
            
            return (
              <Card key={modulo.numero} className={`hover:shadow-lg transition-shadow ${
                modulo.bloqueado ? 'opacity-75' : ''
              }`}>
                <div className="flex flex-col md:flex-row md:items-center gap-6">
                  <div className="flex items-center gap-4 md:w-32">
                    <div className={`w-16 h-16 rounded-2xl flex items-center justify-center text-white text-2xl font-bold shadow-lg ${
                      estaCompletado 
                        ? 'bg-gradient-to-br from-success to-green-600' 
                        : 'bg-gradient-to-br from-primary to-blue-600'
                    }`}>
                      {modulo.numero}
                    </div>
                  </div>

                  <div className="flex-1">
                    <div className="flex items-center gap-2 mb-2">
                      <h2 className="text-xl font-bold text-gray-900">{modulo.titulo}</h2>
                      {estaCompletado && (
                        <span className="flex items-center gap-1 text-success text-sm">
                          <CheckCircle className="w-4 h-4" />
                          Completado
                        </span>
                      )}
                    </div>
                    <p className="text-gray-600 mb-4">{modulo.descripcion}</p>

                    <div className="flex flex-wrap gap-2 mb-4">
                      {modulo.temas.map((tema) => (
                        <span
                          key={tema}
                          className="px-3 py-1 bg-gray-100 text-gray-700 text-sm rounded-full"
                        >
                          {tema}
                        </span>
                      ))}
                    </div>

                    <div className="w-full bg-gray-200 rounded-full h-2">
                      <div
                        className={`h-2 rounded-full transition-all ${
                          estaCompletado ? 'bg-success' : 'bg-primary'
                        }`}
                        style={{ width: `${porcentaje}%` }}
                      />
                    </div>
                    <p className="text-sm text-gray-500 mt-1">
                      {completados}/{modulo.totalEjercicios} ejercicios completados ({porcentaje}%)
                    </p>
                  </div>

                  <div className="md:text-right">
                    {modulo.bloqueado ? (
                      <Button disabled>
                        <Lock className="w-4 h-4 mr-2" />
                        Bloqueado
                      </Button>
                    ) : (
                      <Link to={`/modulo/${modulo.numero}`}>
                        <Button>
                          {estaCompletado ? (
                            <>
                              <CheckCircle className="w-4 h-4 mr-2" />
                              Revisar
                            </>
                          ) : (
                            <>
                              <Play className="w-4 h-4 mr-2" />
                              Entrar
                            </>
                          )}
                          <ArrowRight className="w-4 h-4 ml-2" />
                        </Button>
                      </Link>
                    )}
                  </div>
                </div>
              </Card>
            );
          })}
        </div>
      </main>
    </div>
  );
}
