import { motion } from 'framer-motion';
import { Crown } from 'lucide-react';
import { Avatar } from '@/components/ui/Avatar';
import { RankBadge } from '@/components/profile/RankBadge';
import { formatNumber } from '@/lib/constants';
import { cn } from '@/lib/cn';

interface PodiumPlayer {
  username: string;
  mmr: number;
  wins: number;
  losses: number;
  avatar_url?: string;
  placement_done: boolean;
}

interface PodiumProps {
  players: PodiumPlayer[];
}

const podiumConfig = [
  { place: 2, height: 'h-28', delay: 0.2, gradient: 'from-gray-400 to-gray-500', label: '#2' },
  { place: 1, height: 'h-36', delay: 0, gradient: 'from-yellow-400 to-amber-500', label: '#1' },
  { place: 3, height: 'h-24', delay: 0.4, gradient: 'from-orange-700 to-orange-800', label: '#3' },
];

export function Podium({ players }: PodiumProps) {
  const ordered = [players[1], players[0], players[2]].filter(Boolean);
  if (ordered.length < 3) return null;

  return (
    <div className="flex items-end justify-center gap-4 sm:gap-6 py-8">
      {podiumConfig.map((config, i) => {
        const player = ordered[i];
        if (!player) return null;
        const isFirst = config.place === 1;

        return (
          <motion.div
            key={config.place}
            initial={{ opacity: 0, y: 30 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ delay: config.delay, type: 'spring', stiffness: 200, damping: 20 }}
            className="flex flex-col items-center"
          >
            <div className="relative mb-3">
              {isFirst && (
                <motion.div
                  initial={{ opacity: 0, y: -10 }}
                  animate={{ opacity: 1, y: 0 }}
                  transition={{ delay: 0.6 }}
                  className="absolute -top-6 left-1/2 -translate-x-1/2"
                >
                  <Crown className="w-6 h-6 text-yellow-400" />
                </motion.div>
              )}
              <div className={cn(
                'rounded-full p-0.5',
                isFirst
                  ? 'bg-gradient-to-br from-yellow-400 to-amber-500'
                  : config.place === 2
                    ? 'bg-gradient-to-br from-gray-300 to-gray-500'
                    : 'bg-gradient-to-br from-orange-600 to-orange-800'
              )}>
                <Avatar
                  src={player.avatar_url}
                  username={player.username}
                  size={isFirst ? 'xl' : 'lg'}
                />
              </div>
            </div>

            <p className={cn(
              'font-bold text-text-primary mb-0.5',
              isFirst ? 'text-lg' : 'text-sm'
            )}>
              {player.username}
            </p>

            <p className="text-sm font-mono text-amber-400 font-bold">{formatNumber(player.mmr)}</p>

            <motion.div
              initial={{ height: 0 }}
              animate={{ height: 'auto' }}
              transition={{ delay: config.delay + 0.2, duration: 0.5 }}
              className={cn(
                'w-20 sm:w-28 mt-3 rounded-t-xl flex items-center justify-center bg-gradient-to-b',
                config.gradient,
                config.height
              )}
            >
              <span className="text-2xl font-bold text-white/80">{config.label}</span>
            </motion.div>
          </motion.div>
        );
      })}
    </div>
  );
}
