/**
 * AchievementBadge Component
 * Displays an achievement/badge with rarity styling
 */

import React from 'react';
import { Award, Zap, Lock } from 'lucide-react';
import type { Achievement } from '../../types/education.types';

interface AchievementBadgeProps {
  achievement: Achievement;
  locked?: boolean;
  size?: 'sm' | 'md' | 'lg';
  showDetails?: boolean;
}

const rarityStyles = {
  common: {
    bg: 'from-gray-500/20 to-gray-600/20',
    border: 'border-gray-500/30',
    text: 'text-gray-400',
    glow: '',
  },
  uncommon: {
    bg: 'from-green-500/20 to-emerald-600/20',
    border: 'border-green-500/30',
    text: 'text-green-400',
    glow: 'shadow-green-500/20',
  },
  rare: {
    bg: 'from-blue-500/20 to-cyan-600/20',
    border: 'border-blue-500/30',
    text: 'text-blue-400',
    glow: 'shadow-blue-500/30',
  },
  epic: {
    bg: 'from-purple-500/20 to-pink-600/20',
    border: 'border-purple-500/30',
    text: 'text-purple-400',
    glow: 'shadow-purple-500/40',
  },
  legendary: {
    bg: 'from-yellow-500/20 to-orange-600/20',
    border: 'border-yellow-500/30',
    text: 'text-yellow-400',
    glow: 'shadow-yellow-500/50',
  },
};

const rarityLabels = {
  common: 'Común',
  uncommon: 'Poco común',
  rare: 'Raro',
  epic: 'Épico',
  legendary: 'Legendario',
};

export const AchievementBadge: React.FC<AchievementBadgeProps> = ({
  achievement,
  locked = false,
  size = 'md',
  showDetails = true,
}) => {
  const rarity = achievement.rarity || 'common';
  const styles = rarityStyles[rarity];

  const sizeStyles = {
    sm: {
      container: 'p-2',
      icon: 'w-8 h-8',
      iconWrapper: 'w-12 h-12',
      title: 'text-xs',
      desc: 'text-xs',
    },
    md: {
      container: 'p-3',
      icon: 'w-10 h-10',
      iconWrapper: 'w-16 h-16',
      title: 'text-sm',
      desc: 'text-xs',
    },
    lg: {
      container: 'p-4',
      icon: 'w-14 h-14',
      iconWrapper: 'w-20 h-20',
      title: 'text-base',
      desc: 'text-sm',
    },
  };

  const s = sizeStyles[size];

  return (
    <div
      className={`relative bg-gradient-to-br ${styles.bg} rounded-xl border ${styles.border} ${s.container} ${
        locked ? 'opacity-50' : ''
      } ${!locked && rarity !== 'common' ? `shadow-lg ${styles.glow}` : ''} transition-all hover:scale-105`}
    >
      {/* Badge Icon */}
      <div className="flex items-center gap-3">
        <div
          className={`${s.iconWrapper} rounded-full bg-gray-900/50 flex items-center justify-center border ${styles.border}`}
        >
          {locked ? (
            <Lock className={`${s.icon} text-gray-500`} />
          ) : achievement.badgeIconUrl ? (
            <img
              src={achievement.badgeIconUrl}
              alt={achievement.title}
              className={`${s.icon} object-contain`}
            />
          ) : (
            <Award className={`${s.icon} ${styles.text}`} />
          )}
        </div>

        {showDetails && (
          <div className="flex-1 min-w-0">
            <h4 className={`${s.title} font-semibold text-white truncate`}>
              {achievement.title}
            </h4>
            <p className={`${s.desc} text-gray-400 line-clamp-2`}>
              {achievement.description}
            </p>

            {/* XP Bonus & Rarity */}
            <div className="flex items-center gap-2 mt-1">
              {achievement.xpBonus > 0 && (
                <span className="flex items-center gap-0.5 text-xs text-yellow-400">
                  <Zap className="w-3 h-3" />
                  +{achievement.xpBonus}
                </span>
              )}
              <span className={`text-xs ${styles.text}`}>
                {rarityLabels[rarity]}
              </span>
            </div>
          </div>
        )}
      </div>

      {/* Earned Date */}
      {!locked && achievement.earnedAt && showDetails && (
        <div className="mt-2 pt-2 border-t border-gray-700/50 text-xs text-gray-500">
          Obtenido: {new Date(achievement.earnedAt).toLocaleDateString()}
        </div>
      )}

      {/* Locked Overlay */}
      {locked && (
        <div className="absolute inset-0 flex items-center justify-center bg-gray-900/50 rounded-xl">
          <Lock className="w-6 h-6 text-gray-500" />
        </div>
      )}
    </div>
  );
};

export default AchievementBadge;
