'use client';

import React from 'react';
import { Crown } from 'lucide-react';
import { Box } from '@/ui/Box';
import { Stack } from '@/ui/Stack';
import { Text } from '@/ui/Text';
import { Image } from '@/ui/Image';
import { Surface } from '@/ui/Surface';

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 style={{ display: 'flex', alignItems: 'end', justifyContent: 'center', gap: '1rem' }}>
        {[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)}
              style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', backgroundColor: 'transparent', border: 'none', cursor: 'pointer' }}
            >
              <Box style={{ position: 'relative', marginBottom: '1rem' }}>
                <Box style={{ position: 'relative', width: position === 1 ? '6rem' : '5rem', height: position === 1 ? '6rem' : '5rem', borderRadius: '9999px', overflow: 'hidden', border: `4px solid ${config.crown}`, boxShadow: position === 1 ? '0 0 30px rgba(250, 204, 21, 0.3)' : 'none' }}>
                  <Image
                    src={driver.avatarUrl}
                    alt={driver.name}
                    width={112}
                    height={112}
                    style={{ width: '100%', height: '100%', objectFit: 'cover' }}
                  />
                </Box>
                <Box style={{ position: 'absolute', bottom: '-0.5rem', left: '50%', transform: 'translateX(-50%)', width: '2rem', height: '2rem', borderRadius: '9999px', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: '0.875rem', fontWeight: 'bold', background: `linear-gradient(to bottom right, ${config.color}, transparent)`, border: `2px solid ${config.crown}`, color: config.crown }}>
                  {position}
                </Box>
              </Box>

              <Text weight="semibold" color="text-white" style={{ fontSize: position === 1 ? '1.125rem' : '1rem', marginBottom: '0.25rem' }}>
                {driver.name}
              </Text>

              <Text font="mono" weight="bold" style={{ fontSize: position === 1 ? '1.25rem' : '1.125rem', color: position === 1 ? '#facc15' : '#3b82f6' }}>
                {driver.rating.toString()}
              </Text>

              <Stack direction="row" align="center" gap={2} style={{ fontSize: '0.75rem', color: '#6b7280', marginTop: '0.25rem' }}>
                <Stack direction="row" align="center" gap={1}>
                  <Text color="text-performance-green">🏆</Text>
                  {driver.wins}
                </Stack>
                <Text>•</Text>
                <Stack direction="row" align="center" gap={1}>
                  <Text color="text-warning-amber">🏅</Text>
                  {driver.podiums}
                </Stack>
              </Stack>

              <Box style={{ marginTop: '1rem', width: position === 1 ? '7rem' : '6rem', height: config.height, 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}`, display: 'flex', alignItems: 'end', justifyContent: 'center', paddingBottom: '1rem' }}>
                <Text weight="bold" style={{ fontSize: position === 1 ? '3rem' : '2.25rem', color: config.crown }}>
                  {position}
                </Text>
              </Box>
            </Box>
          );
        })}
      </Box>
    </Box>
  );
}