import { motion } from 'framer-motion';
import { Card } from '@/components/ui/Card';
import { cn } from '@/lib/cn';
import { staggerContainer, staggerItem } from '@/lib/animations';

interface MapStat {
  map: string;
  wins: number;
  losses: number;
}

interface MapPerformanceProps {
  maps: MapStat[];
}

export function MapPerformance({ maps }: MapPerformanceProps) {
  const sorted = [...maps].sort((a, b) => {
    const rateA = a.wins / Math.max(a.wins + a.losses, 1);
    const rateB = b.wins / Math.max(b.wins + b.losses, 1);
    return rateB - rateA;
  });

  return (
    <Card>
      <h3 className="text-sm font-medium text-text-secondary uppercase tracking-wider mb-4">Map Performance</h3>
      <motion.div
        variants={staggerContainer}
        initial="initial"
        animate="animate"
        className="space-y-3"
      >
        {sorted.map((map) => {
          const total = map.wins + map.losses;
          const rate = total > 0 ? (map.wins / total) * 100 : 0;
          const barColor = rate >= 60 ? 'bg-green-500' : rate >= 45 ? 'bg-amber-500' : 'bg-red-500';
          const mapName = map.map.replace('de_', '');

          return (
            <motion.div key={map.map} variants={staggerItem} className="space-y-1.5">
              <div className="flex items-center justify-between text-sm">
                <span className="text-text-primary font-medium capitalize">{mapName}</span>
                <span className="text-text-secondary">
                  <span className={cn(
                    'font-mono font-medium',
                    rate >= 50 ? 'text-green-400' : 'text-red-400'
                  )}>
                    {rate.toFixed(0)}%
                  </span>
                  <span className="text-text-muted ml-1.5">({total} matches)</span>
                </span>
              </div>
              <div className="h-1.5 bg-white/5 rounded-full overflow-hidden">
                <motion.div
                  className={cn('h-full rounded-full', barColor)}
                  initial={{ width: 0 }}
                  animate={{ width: `${rate}%` }}
                  transition={{ duration: 0.8, ease: 'easeOut' }}
                />
              </div>
            </motion.div>
          );
        })}
      </motion.div>
    </Card>
  );
}
