import { useEffect } from 'react';
import { Link } from 'react-router-dom';
import { useAuthStore } from '../stores/authStore';
import { useProgressStore } from '../stores/progressStore';
import { Card } from '../components/ui/Card';
import { Button } from '../components/ui/Button';
import { ProgressBar } from '../components/progress/ProgressBar';
import { ScoreDisplay } from '../components/progress/ScoreDisplay';
import { BadgesSection } from '../components/progress/Badges';
import { Loader } from '../components/ui/Loader';
import { BookOpen, User, LogOut, LayoutGrid, Award, Star, Target, CheckCircle, FileText, Headphones } from 'lucide-react';
import { SistemaAnuncios } from '../components/announcements/SistemaAnuncios';

const MODULOS_CONFIG = [
  { id: 'modulo1', numero: 1, titulo: 'Fundamentos de Economía', descripcion: 'Introducción a los conceptos básicos', totalEjercicios: 3 },
  { id: 'modulo2', numero: 2, titulo: 'Oferta, Demanda y Equilibrio', descripcion: 'Curvas de mercado', totalEjercicios: 3 },
  { id: 'modulo3', numero: 3, titulo: 'Utilidad y Elasticidad', descripcion: 'Teoría del consumidor', totalEjercicios: 3 },
  { id: 'modulo4', numero: 4, titulo: 'Teoría del Productor', descripcion: 'Costos y producción', totalEjercicios: 3 },
];

export function Dashboard() {
  const { usuario, logout } = useAuthStore();
  const { 
    puntuacionTotal, 
    nivel, 
    calcularPorcentajeModulo,
    getBadgesDesbloqueados,
    getBadgesBloqueados,
    modulos,
    loadProgreso,
    isLoading,
    error,
  } = useProgressStore();

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

  const handleLogout = async () => {
    await logout();
  };

  if (isLoading && Object.keys(modulos).length === 0) {
    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 tu progreso...</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>
    );
  }

  // Calcular progreso total
  const totalProgreso = Math.round(
    MODULOS_CONFIG.reduce((acc, mod) => {
      return acc + calcularPorcentajeModulo(mod.id, mod.totalEjercicios);
    }, 0) / MODULOS_CONFIG.length
  );

  const badgesDesbloqueados = getBadgesDesbloqueados();
  const badgesBloqueados = getBadgesBloqueados();

  // Calcular ejercicios completados por módulo
  const getEjerciciosCompletados = (moduloId: string) => {
    const modulo = modulos[moduloId];
    if (!modulo) return 0;
    return Object.values(modulo.ejercicios).filter(ej => ej.completado).length;
  };

  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 flex items-center justify-between">
          <div className="flex items-center gap-3">
            <div className="w-10 h-10 bg-blue-600 rounded-lg flex items-center justify-center">
              <BookOpen className="w-5 h-5 text-white" />
            </div>
            <h1 className="text-xl font-bold text-gray-900">Economía Interactiva</h1>
          </div>

          <div className="flex items-center gap-4">
            <div className="flex items-center gap-2 text-gray-600">
              <User className="w-5 h-5" />
              <span className="font-medium">{usuario?.nombre || 'Usuario'}</span>
              <span className="px-2 py-0.5 bg-blue-100 text-blue-700 text-xs rounded-full font-semibold">
                {nivel}
              </span>
              {usuario?.rol === 'admin' && (
                <span className="px-2 py-0.5 bg-purple-100 text-purple-700 text-xs rounded-full font-semibold">
                  Admin
                </span>
              )}
            </div>
            <Button variant="ghost" size="sm" onClick={handleLogout}>
              <LogOut className="w-4 h-4" />
            </Button>
          </div>
        </div>
      </header>

      <main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
        <div className="mb-8">
          <h2 className="text-2xl font-bold text-gray-900">Tu progreso</h2>
          <p className="text-gray-600">Continúa donde lo dejaste y desbloquea nuevos logros</p>
        </div>

        {/* Sistema de Anuncios */}
        <SistemaAnuncios />

        {/* Stats Cards */}
        <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
          <Card className="bg-gradient-to-br from-blue-500 to-blue-600 text-white border-none">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-blue-100 text-sm">Progreso total</p>
                <p className="text-3xl font-bold mt-1">{totalProgreso}%</p>
              </div>
              <Target className="w-12 h-12 text-blue-100 opacity-80" />
            </div>
            <div className="mt-4 w-full bg-white/20 rounded-full h-2">
              <div
                className="bg-white h-2 rounded-full transition-all duration-500"
                style={{ width: `${totalProgreso}%` }}
              />
            </div>
            <p className="mt-2 text-xs text-blue-100">
              {totalProgreso === 100 ? '¡Has completado todos los módulos!' : 'Sigue así, vas por buen camino'}
            </p>
          </Card>

          <Card className="bg-gradient-to-br from-amber-500 to-orange-500 text-white border-none">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-orange-100 text-sm">Puntuación total</p>
                <p className="text-3xl font-bold mt-1">{puntuacionTotal.toLocaleString()}</p>
              </div>
              <Star className="w-12 h-12 text-orange-100 opacity-80" />
            </div>
            <p className="mt-4 text-sm text-orange-100">
              Acumula puntos completando ejercicios para subir de nivel
            </p>
          </Card>

          <Card className="bg-gradient-to-br from-purple-500 to-pink-500 text-white border-none">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-purple-100 text-sm">Logros</p>
                <p className="text-3xl font-bold mt-1">
                  {badgesDesbloqueados.length}/{badgesDesbloqueados.length + badgesBloqueados.length}
                </p>
              </div>
              <Award className="w-12 h-12 text-purple-100 opacity-80" />
            </div>
            <p className="mt-4 text-sm text-purple-100">
              {badgesBloqueados.length === 0 
                ? '¡Todos los logros desbloqueados!' 
                : `${badgesBloqueados.length} logros por desbloquear`}
            </p>
          </Card>
        </div>

        <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
          {/* Columna izquierda - Módulos */}
          <div className="lg:col-span-2 space-y-6">
            {/* Puntuación y Nivel */}
            <ScoreDisplay 
              puntos={puntuacionTotal} 
              animar={false}
              showNivel={true}
              size="md"
            />

            <div className="mb-6 flex items-center justify-between">
              <h2 className="text-xl font-bold text-gray-900">Módulos</h2>
              {usuario?.rol === 'admin' && (
                <Link to="/admin">
                  <Button variant="outline" size="sm">
                    Panel de Admin
                  </Button>
                </Link>
              )}
            </div>

            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
              {MODULOS_CONFIG.map((modulo) => {
                const porcentaje = calcularPorcentajeModulo(modulo.id, modulo.totalEjercicios);
                const completados = getEjerciciosCompletados(modulo.id);

                return (
                  <Link key={modulo.id} to={`/modulo/${modulo.numero}`}>
                    <Card className="hover:shadow-lg transition-shadow cursor-pointer h-full">
                      <div className="flex items-start justify-between mb-4">
                        <div className="flex items-center gap-3">
                          <div className="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center">
                            <span className="text-blue-600 font-bold text-lg">{modulo.numero}</span>
                          </div>
                          <div>
                            <h3 className="font-semibold text-gray-900">{modulo.titulo}</h3>
                            <p className="text-sm text-gray-500">
                              {completados}/{modulo.totalEjercicios} ejercicios
                            </p>
                          </div>
                        </div>
                      </div>

                      <ProgressBar 
                        porcentaje={porcentaje} 
                        moduloNumero={modulo.numero}
                        showLabel={false}
                        size="sm"
                      />

                      <div className="flex items-center justify-between text-sm mt-3">
                        <span className="text-gray-500">{porcentaje}% completado</span>
                        {porcentaje === 100 && (
                          <span className="text-green-600 flex items-center gap-1 font-medium">
                            <CheckCircle className="w-4 h-4" />
                            Completado
                          </span>
                        )}
                      </div>
                    </Card>
                  </Link>
                );
              })}
            </div>

            <div className="mt-8 flex justify-center gap-4">
              <Link to="/modulos">
                <Button variant="outline" size="lg">
                  <LayoutGrid className="w-5 h-5 mr-2" />
                  Ver todos los módulos
                </Button>
              </Link>
              <Link to="/recursos">
                <Button variant="outline" size="lg">
                  <FileText className="w-5 h-5 mr-2" />
                  Material PDF
                </Button>
              </Link>
              <Link to="/clases">
                <Button variant="outline" size="lg" className="bg-gradient-to-r from-purple-50 to-pink-50 border-purple-200 hover:border-purple-300">
                  <Headphones className="w-5 h-5 mr-2 text-purple-600" />
                  <span className="text-purple-700">Clases Grabadas</span>
                </Button>
              </Link>
            </div>
          </div>

          {/* Columna derecha - Logros */}
          <div>
            <BadgesSection 
              badgesDesbloqueados={badgesDesbloqueados}
              badgesBloqueados={badgesBloqueados}
            />
          </div>
        </div>
      </main>
    </div>
  );
}

export default Dashboard;