/**
 * XPProgress Component
 * Displays user's XP progress towards next level
 */

import React from 'react';
import { Zap, TrendingUp } from 'lucide-react';
import type { LevelProgress } from '../../types/education.types';

interface XPProgressProps {
  levelProgress: LevelProgress;
  showDetails?: boolean;
  size?: 'sm' | 'md' | 'lg';
}

export const XPProgress: React.FC<XPProgressProps> = ({
  levelProgress,
  showDetails = true,
  size = 'md',
}) => {
  const sizeStyles = {
    sm: {
      container: 'p-3',
      level: 'w-10 h-10 text-lg',
      bar: 'h-2',
      text: 'text-xs',
    },
    md: {
      container: 'p-4',
      level: 'w-14 h-14 text-xl',
      bar: 'h-3',
      text: 'text-sm',
    },
    lg: {
      container: 'p-6',
      level: 'w-20 h-20 text-3xl',
      bar: 'h-4',
      text: 'text-base',
    },
  };

  const styles = sizeStyles[size];

  return (
    <div className={`bg-gray-800 rounded-xl border border-gray-700 ${styles.container}`}>
      <div className="flex items-center gap-4">
        {/* Level Badge */}
        <div
          className={`${styles.level} rounded-full bg-gradient-to-br from-purple-500 to-blue-600 flex items-center justify-center font-bold text-white shadow-lg shadow-purple-500/20`}
        >
          {levelProgress.currentLevel}
        </div>

        {/* Progress Info */}
        <div className="flex-1">
          <div className="flex items-center justify-between mb-2">
            <span className={`${styles.text} font-medium text-white`}>
              Nivel {levelProgress.currentLevel}
            </span>
            <span className={`${styles.text} text-gray-400`}>
              Nivel {levelProgress.currentLevel + 1}
            </span>
          </div>

          {/* Progress Bar */}
          <div className={`w-full bg-gray-700 rounded-full ${styles.bar} overflow-hidden`}>
            <div
              className={`${styles.bar} bg-gradient-to-r from-purple-500 to-blue-500 rounded-full transition-all duration-500`}
              style={{ width: `${levelProgress.progressPercentage}%` }}
            />
          </div>

          {/* XP Info */}
          <div className="flex items-center justify-between mt-2">
            <span className={`${styles.text} text-gray-400 flex items-center gap-1`}>
              <Zap className="w-3 h-3 text-yellow-400" />
              {levelProgress.xpIntoLevel.toLocaleString()} / {levelProgress.xpNeeded.toLocaleString()} XP
            </span>
            <span className={`${styles.text} text-purple-400`}>
              {levelProgress.progressPercentage.toFixed(0)}%
            </span>
          </div>
        </div>
      </div>

      {/* Additional Stats */}
      {showDetails && (
        <div className="mt-4 pt-4 border-t border-gray-700 grid grid-cols-2 gap-4">
          <div className="text-center">
            <div className={`${styles.text} text-gray-400`}>XP Total</div>
            <div className="text-lg font-bold text-white flex items-center justify-center gap-1">
              <Zap className="w-4 h-4 text-yellow-400" />
              {levelProgress.totalXp.toLocaleString()}
            </div>
          </div>
          <div className="text-center">
            <div className={`${styles.text} text-gray-400`}>Para Siguiente Nivel</div>
            <div className="text-lg font-bold text-purple-400 flex items-center justify-center gap-1">
              <TrendingUp className="w-4 h-4" />
              {(levelProgress.xpNeeded - levelProgress.xpIntoLevel).toLocaleString()}
            </div>
          </div>
        </div>
      )}
    </div>
  );
};

export default XPProgress;
