import React from 'react';
import { RAAchievement, RAProgression } from '../api/client';

export const AchievementList = ({ raId, achievements, userProgression }: { 
  raId?: number, 
  achievements?: RAAchievement[], 
  userProgression?: RAProgression | null 
}) => {
  if (!raId || !achievements || achievements.length === 0) {
    return (
      <div className="col-span-6 bg-white/5 rounded-xl p-5 border border-white/5 flex flex-col items-center justify-center opacity-40 h-[30rem]">
        <span className="material-symbols-outlined text-4xl mb-3 text-white/20">trophy</span>
        <div className="text-[0.625rem] geist-mono uppercase tracking-widest text-center">Achievements Unavailable</div>
      </div>
    );
  }

  const gameProgress = userProgression?.results.find(r => r.rom_ra_id === raId);
  const earnedIds = new Set(gameProgress?.earned_achievements.map(a => String(a.id)) || []);
  
  const earnedCount = gameProgress?.num_awarded || 0;
  const totalCount = achievements.length;
  const progressPercent = totalCount > 0 ? (earnedCount / totalCount) * 100 : 0;

  return (
    <div className="col-span-6 bg-white/5 rounded-xl p-5 border border-white/5 flex flex-col shadow-2xl h-[30rem] overflow-hidden">
      {/* Header */}
      <div className="flex items-center justify-between mb-4 shrink-0">
        <div className="flex items-center gap-3">
          <span className="material-symbols-outlined text-[#2563eb] filled">workspace_premium</span>
          <h3 className="text-[0.625rem] geist-mono uppercase tracking-[0.3em] font-black text-white/60">RetroAchievements</h3>
        </div>
        <div className="text-[0.625rem] geist-mono text-[#2563eb] font-bold">
          {earnedCount} / {totalCount}
        </div>
      </div>

      {/* Progress Bar */}
      <div className="h-1 w-full bg-white/5 rounded-full mb-6 overflow-hidden shrink-0">
        <div 
          className="h-full bg-[#2563eb] transition-all duration-1000 ease-out"
          style={{ width: `${progressPercent}%` }}
        ></div>
      </div>

      {/* Achievement List */}
      <div className="flex-1 overflow-y-auto space-y-3 pr-2 scrollbar-none">
        {achievements.map((achievement) => {
          const isEarned = earnedIds.has(String(achievement.ra_id));
          const badgeId = achievement.badge_id || '00000';
          return (
            <div 
              key={achievement.ra_id} 
              className={`flex items-center gap-4 p-3 rounded-lg border transition-all duration-300 ${isEarned ? 'bg-[#2563eb]/10 border-[#2563eb]/30' : 'bg-white/5 border-white/5 opacity-50'}`}
            >
              {/* Badge */}
              <div className="w-10 h-10 rounded-md bg-black/40 flex items-center justify-center overflow-hidden border border-white/10 shrink-0">
                <img 
                  src={`https://media.retroachievements.org/Badge/${badgeId}.png`} 
                  className={`w-full h-full object-contain ${isEarned ? '' : 'grayscale contrast-50 opacity-40'}`}
                  alt="" 
                />
              </div>

              {/* Text */}
              <div className="flex-1 min-w-0">
                <div className="flex items-center justify-between gap-2">
                  <h4 className={`text-[0.6875rem] font-bold uppercase truncate ${isEarned ? 'text-white' : 'text-white/40'}`}>
                    {achievement.title}
                  </h4>
                  <span className="text-[0.5625rem] geist-mono text-[#2563eb] font-black shrink-0">
                    {achievement.points} pts
                  </span>
                </div>
                <p className="text-[0.5625rem] text-white/30 line-clamp-1 leading-tight mt-0.5">
                  {achievement.description}
                </p>
              </div>

              {/* Status Icon */}
              {isEarned && (
                <span className="material-symbols-outlined text-[#2563eb] text-sm filled shrink-0">verified</span>
              )}
            </div>
          );
        })}
      </div>
    </div>
  );
};
