import { useState, useEffect } from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import { Star } from 'lucide-react';
import type { NivelUsuario } from '../../types';

interface ScoreDisplayProps {
  puntos: number;
  animar?: boolean;
  showNivel?: boolean;
  size?: 'sm' | 'md' | 'lg';
}

const NIVELES_CONFIG: Record<NivelUsuario, { color: string; bgColor: string; icon: string }> = {
  Novato: { 
    color: 'text-gray-600', 
    bgColor: 'bg-gray-100',
    icon: '🌱'
  },
  Aprendiz: { 
    color: 'text-blue-600', 
    bgColor: 'bg-blue-100',
    icon: '📚'
  },
  Experto: { 
    color: 'text-purple-600', 
    bgColor: 'bg-purple-100',
    icon: '🏆'
  },
  Maestro: { 
    color: 'text-yellow-600', 
    bgColor: 'bg-yellow-100',
    icon: '👑'
  },
};

function calcularNivel(puntuacion: number): NivelUsuario {
  if (puntuacion >= 2000) return 'Maestro';
  if (puntuacion >= 1000) return 'Experto';
  if (puntuacion >= 300) return 'Aprendiz';
  return 'Novato';
}

function calcularProgresoNivel(puntuacion: number): { actual: number; siguiente: number; porcentaje: number } {
  if (puntuacion >= 2000) {
    return { actual: 2000, siguiente: 2000, porcentaje: 100 };
  } else if (puntuacion >= 1000) {
    return { actual: puntuacion, siguiente: 2000, porcentaje: ((puntuacion - 1000) / 1000) * 100 };
  } else if (puntuacion >= 300) {
    return { actual: puntuacion, siguiente: 1000, porcentaje: ((puntuacion - 300) / 700) * 100 };
  } else {
    return { actual: puntuacion, siguiente: 300, porcentaje: (puntuacion / 300) * 100 };
  }
}

export function ScoreDisplay({ 
  puntos, 
  animar = false, 
  showNivel = true,
  size = 'md' 
}: ScoreDisplayProps) {
  const [puntosAnimados, setPuntosAnimados] = useState(0);
  const [puntosPrevios, setPuntosPrevios] = useState(puntos);
  const [cambioReciente, setCambioReciente] = useState(0);

  const nivel = calcularNivel(puntos);
  const configNivel = NIVELES_CONFIG[nivel];
  const progresoNivel = calcularProgresoNivel(puntos);

  useEffect(() => {
    if (animar && puntos !== puntosPrevios) {
      const diferencia = puntos - puntosPrevios;
      setCambioReciente(diferencia);
      
      // Animar contador
      const duracion = 1500;
      const pasos = 60;
      let pasoActual = 0;

      const intervalo = setInterval(() => {
        pasoActual++;
        const progreso = pasoActual / pasos;
        // Función de easing
        const easeOutQuart = 1 - Math.pow(1 - progreso, 4);
        
        setPuntosAnimados(Math.round(puntosPrevios + (diferencia * easeOutQuart)));

        if (pasoActual >= pasos) {
          clearInterval(intervalo);
          setPuntosAnimados(puntos);
          setPuntosPrevios(puntos);
          
          // Ocultar el cambio después de 3 segundos
          setTimeout(() => setCambioReciente(0), 3000);
        }
      }, duracion / pasos);

      return () => clearInterval(intervalo);
    } else {
      setPuntosAnimados(puntos);
      setPuntosPrevios(puntos);
    }
  }, [puntos, animar, puntosPrevios]);

  const sizeClasses = {
    sm: {
      container: 'p-2',
      puntos: 'text-xl',
      label: 'text-xs',
      icon: 16,
    },
    md: {
      container: 'p-4',
      puntos: 'text-3xl',
      label: 'text-sm',
      icon: 24,
    },
    lg: {
      container: 'p-6',
      puntos: 'text-5xl',
      label: 'text-base',
      icon: 32,
    },
  };

  return (
    <div className={`${sizeClasses[size].container} bg-white rounded-xl border border-gray-200 shadow-sm`}>
      <div className="flex items-center justify-between">
        <div className="flex items-center gap-3">
          <div className={`p-2 rounded-lg ${configNivel.bgColor}`}>
            <Star size={sizeClasses[size].icon} className={configNivel.color} />
          </div>
          <div>
            <p className={`${sizeClasses[size].label} text-gray-500 font-medium`}>Puntuación Total</p>
            <div className="flex items-baseline gap-2">
              <motion.span 
                className={`${sizeClasses[size].puntos} font-bold text-gray-900`}
                key={puntosAnimados}
                initial={animar ? { scale: 1.2 } : false}
                animate={{ scale: 1 }}
                transition={{ type: "spring", stiffness: 300 }}
              >
                {puntosAnimados.toLocaleString()}
              </motion.span>
              <span className="text-sm text-gray-400">pts</span>
              
              <AnimatePresence>
                {cambioReciente !== 0 && (
                  <motion.span
                    initial={{ opacity: 0, y: 20, scale: 0.5 }}
                    animate={{ opacity: 1, y: 0, scale: 1 }}
                    exit={{ opacity: 0, y: -20 }}
                    className={`text-sm font-bold ${cambioReciente > 0 ? 'text-green-600' : 'text-red-600'}`}
                  >
                    {cambioReciente > 0 ? '+' : ''}{cambioReciente}
                  </motion.span>
                )}
              </AnimatePresence>
            </div>
          </div>
        </div>

        {showNivel && (
          <div className="text-right">
            <motion.div
              key={nivel}
              initial={animar ? { rotate: -10 } : false}
              animate={{ rotate: 0 }}
              className={`inline-flex items-center gap-1 px-3 py-1 rounded-full ${configNivel.bgColor}`}
            >
              <span className="text-lg">{configNivel.icon}</span>
              <span className={`text-sm font-bold ${configNivel.color}`}>{nivel}</span>
            </motion.div>
          </div>
        )}
      </div>

      {showNivel && progresoNivel.siguiente > progresoNivel.actual && (
        <div className="mt-4">
          <div className="flex justify-between text-xs text-gray-500 mb-1">
            <span>Progreso hacia {calcularNivel(progresoNivel.siguiente)}</span>
            <span>{Math.round(progresoNivel.porcentaje)}%</span>
          </div>
          <div className="w-full bg-gray-100 rounded-full h-2 overflow-hidden">
            <motion.div
              className={`h-full rounded-full ${configNivel.color.replace('text-', 'bg-')}`}
              initial={{ width: 0 }}
              animate={{ width: `${progresoNivel.porcentaje}%` }}
              transition={{ duration: 0.5, delay: 0.3 }}
            />
          </div>
          <p className="text-xs text-gray-400 mt-1">
            {progresoNivel.siguiente - progresoNivel.actual} puntos para el siguiente nivel
          </p>
        </div>
      )}

      {progresoNivel.porcentaje === 100 && nivel === 'Maestro' && (
        <motion.div
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          className="mt-3 p-2 bg-yellow-50 rounded-lg border border-yellow-200"
        >
          <p className="text-xs text-yellow-700 text-center font-medium">
            🎉 ¡Has alcanzado el nivel máximo!
          </p>
        </motion.div>
      )}
    </div>
  );
}

export default ScoreDisplay;
