import { routes } from '@/lib/routing/RouteConfig';
import { Box } from '@/ui/Box';
import { Button } from '@/ui/Button';
import { Heading } from '@/ui/Heading';
import { Icon } from '@/ui/Icon';
import { LeaderboardItem } from '@/ui/LeaderboardItem';
import { LeaderboardList } from '@/ui/LeaderboardList';
import { Stack } from '@/ui/Stack';
import { Text } from '@/ui/Text';
import { Award, ChevronRight } from 'lucide-react';

const SKILL_LEVELS = [
  { id: 'pro', label: 'Pro', color: 'text-yellow-400' },
  { id: 'advanced', label: 'Advanced', color: 'text-purple-400' },
  { id: 'intermediate', label: 'Intermediate', color: 'text-primary-blue' },
  { id: 'beginner', label: 'Beginner', color: 'text-green-400' },
];

const CATEGORIES = [
  { id: 'beginner', label: 'Beginner', color: 'text-green-400' },
  { id: 'intermediate', label: 'Intermediate', color: 'text-primary-blue' },
  { id: 'advanced', label: 'Advanced', color: 'text-purple-400' },
  { id: 'pro', label: 'Pro', color: 'text-yellow-400' },
  { id: 'endurance', label: 'Endurance', color: 'text-orange-400' },
  { id: 'sprint', label: 'Sprint', color: 'text-red-400' },
];

interface LeaderboardPreviewProps {
  drivers: {
    id: string;
    name: string;
    avatarUrl?: string;
    nationality: string;
    rating: number;
    wins: number;
    skillLevel?: string;
    category?: string;
  }[];
  onDriverClick: (id: string) => void;
  onNavigate: (href: string) => void;
}

export function LeaderboardPreview({ drivers, onDriverClick, onNavigate }: LeaderboardPreviewProps) {
  const top5 = drivers.slice(0, 5);

  return (
    <Stack gap={4} mb={10}>
      <Stack direction="row" align="center" justify="between">
        <Stack direction="row" align="center" gap={3}>
          <Box 
            display="flex" 
            center 
            w="10" 
            h="10" 
            rounded="xl" 
            bg="bg-gradient-to-br from-yellow-400/20 to-amber-600/10" 
            border 
            borderColor="border-yellow-400/30"
          >
            <Icon icon={Award} size={5} color="rgb(250, 204, 21)" />
          </Box>
          <Box>
            <Heading level={2}>Top Drivers</Heading>
            <Text size="xs" color="text-gray-500">Highest rated competitors</Text>
          </Box>
        </Stack>

        <Button
          variant="secondary"
          onClick={() => onNavigate(routes.leaderboards.drivers)}
          icon={<Icon icon={ChevronRight} size={4} />}
        >
          Full Rankings
        </Button>
      </Stack>

      <LeaderboardList>
        {top5.map((driver, index) => {
          const levelConfig = SKILL_LEVELS.find((l) => l.id === driver.skillLevel);
          const categoryConfig = CATEGORIES.find((c) => c.id === driver.category);
          const position = index + 1;

          return (
            <LeaderboardItem
              key={driver.id}
              position={position}
              name={driver.name}
              avatarUrl={driver.avatarUrl}
              nationality={driver.nationality}
              rating={driver.rating}
              wins={driver.wins}
              skillLevelLabel={levelConfig?.label}
              skillLevelColor={levelConfig?.color}
              categoryLabel={categoryConfig?.label}
              categoryColor={categoryConfig?.color}
              onClick={() => onDriverClick(driver.id)}
            />
          );
        })}
      </LeaderboardList>
    </Stack>
  );
}