import { Box } from '@/ui/Box';
import { Image } from '@/ui/Image';
import { Stack } from '@/ui/Stack';
import { Text } from '@/ui/Text';

interface PodiumDriver {
  id: string;
  name: string;
  avatarUrl: string;
  rating: number;
  wins: number;
  podiums: number;
}

interface RankingsPodiumProps {
  podium: PodiumDriver[];
  onDriverClick?: (id: string) => void;
}

export function RankingsPodium({ podium, onDriverClick }: RankingsPodiumProps) {
  return (
    <Box mb={10}>
      <Box display="flex" alignItems="end" justifyContent="center" gap={4}>
        {[1, 0, 2].map((index) => {
          const driver = podium[index];
          if (!driver) return null;
          
          const position = index === 1 ? 1 : index === 0 ? 2 : 3;
          const config = {
            1: { height: '10rem', color: 'rgba(250, 204, 21, 0.2)', borderColor: 'rgba(250, 204, 21, 0.4)', crown: '#facc15' },
            2: { height: '8rem', color: 'rgba(209, 213, 219, 0.2)', borderColor: 'rgba(209, 213, 219, 0.4)', crown: '#d1d5db' },
            3: { height: '6rem', color: 'rgba(217, 119, 6, 0.2)', borderColor: 'rgba(217, 119, 6, 0.4)', crown: '#d97706' },
          }[position] || { height: '6rem', color: 'rgba(217, 119, 6, 0.2)', borderColor: 'rgba(217, 119, 6, 0.4)', crown: '#d97706' };

          return (
            <Box
              key={driver.id}
              as="button"
              type="button"
              onClick={() => onDriverClick?.(driver.id)}
              display="flex"
              flexDirection="col"
              alignItems="center"
              bg="transparent"
              border={false}
              cursor="pointer"
            >
              <Box position="relative" mb={4}>
                <Box 
                  position="relative" 
                  w={position === 1 ? '24' : '20'} 
                  h={position === 1 ? '24' : '20'} 
                  rounded="full" 
                  overflow="hidden" 
                  border 
                  borderColor={config.crown === '#facc15' ? 'border-warning-amber' : config.crown === '#d1d5db' ? 'border-gray-300' : 'border-orange-600'}
                  style={{ borderWidth: '4px', boxShadow: position === 1 ? '0 0 30px rgba(250, 204, 21, 0.3)' : 'none' }}
                >
                  <Image
                    src={driver.avatarUrl}
                    alt={driver.name}
                    width={112}
                    height={112}
                    objectFit="cover"
                  />
                </Box>
                <Box 
                  position="absolute" 
                  bottom="-2" 
                  left="50%" 
                  w="8" 
                  h="8" 
                  rounded="full" 
                  display="flex" 
                  alignItems="center" 
                  justifyContent="center" 
                  border 
                  weight="bold"
                  size="sm"
                  borderColor={config.crown === '#facc15' ? 'border-warning-amber' : config.crown === '#d1d5db' ? 'border-gray-300' : 'border-orange-600'}
                  color={config.crown === '#facc15' ? 'text-warning-amber' : config.crown === '#d1d5db' ? 'text-gray-300' : 'text-orange-600'}
                  style={{ 
                    transform: 'translateX(-50%)',
                    borderWidth: '2px', 
                    background: `linear-gradient(to bottom right, ${config.color}, transparent)`
                  }}
                >
                  {position}
                </Box>
              </Box>

              <Text weight="semibold" color="text-white" size={position === 1 ? 'lg' : 'base'} mb={1} block>
                {driver.name}
              </Text>

              <Text font="mono" weight="bold" size={position === 1 ? 'xl' : 'lg'} block color={position === 1 ? 'text-warning-amber' : 'text-primary-blue'}>
                {driver.rating.toString()}
              </Text>

              <Stack direction="row" align="center" gap={2} mt={1}>
                <Stack direction="row" align="center" gap={1}>
                  <Text>🏆</Text>
                  <Text color="text-gray-400">{driver.wins}</Text>
                </Stack>
                <Text color="text-gray-500">•</Text>
                <Stack direction="row" align="center" gap={1}>
                  <Text>🏅</Text>
                  <Text color="text-gray-400">{driver.podiums}</Text>
                </Stack>
              </Stack>

              <Box 
                mt={4} 
                w={position === 1 ? '28' : '24'} 
                h={config.height} 
                rounded="lg" 
                display="flex" 
                alignItems="end" 
                justifyContent="center" 
                pb={4}
                style={{ 
                  borderRadius: '0.5rem 0.5rem 0 0', 
                  background: `linear-gradient(to top, ${config.color}, transparent)`, 
                  borderTop: `1px solid ${config.borderColor}`, 
                  borderLeft: `1px solid ${config.borderColor}`, 
                  borderRight: `1px solid ${config.borderColor}` 
                }} 
              >
                <Text weight="bold" size={position === 1 ? '4xl' : '3xl'} color={config.crown === '#facc15' ? 'text-warning-amber' : config.crown === '#d1d5db' ? 'text-gray-300' : 'text-orange-600'}>
                  {position}
                </Text>
              </Box>
            </Box>
          );
        })}
      </Box>
    </Box>
  );
}