import { RankBadge } from '@/components/leaderboards/RankBadge';
import { RatingFormatter } from '@/lib/formatters/RatingFormatter';
import { SkillLevelFormatter } from '@/lib/formatters/SkillLevelFormatter';
import { Avatar } from '@/ui/Avatar';
import { Group } from '@/ui/Group';
import { LeaderboardList } from '@/ui/LeaderboardList';
import { LeaderboardPreviewShell } from '@/ui/LeaderboardPreviewShell';
import { LeaderboardRow } from '@/ui/LeaderboardRow';
import { Text } from '@/ui/Text';
import { Trophy } from 'lucide-react';

interface DriverLeaderboardPreviewProps {
  title?: string;
  subtitle?: string;
  drivers: {
    id: string;
    name: string;
    rating: number;
    skillLevel: string;
    nationality: string;
    wins: number;
    rank: number;
    avatarUrl: string;
    position: number;
  }[];
  onDriverClick: (id: string) => void;
  onNavigateToDrivers: () => void;
}

export function DriverLeaderboardPreview({ 
  title = "Driver Rankings", 
  subtitle = "Top Performers", 
  drivers, 
  onDriverClick, 
  onNavigateToDrivers 
}: DriverLeaderboardPreviewProps) {
  const top10 = drivers; // Already sliced in builder

  return (
    <LeaderboardPreviewShell
      title={title}
      subtitle={subtitle}
      onViewFull={onNavigateToDrivers}
      icon={Trophy}
      iconColor="var(--ui-color-intent-primary)"
      iconBgGradient="linear-gradient(to bottom right, rgba(25, 140, 255, 0.2), rgba(25, 140, 255, 0.1))"
      viewFullLabel="View All"
    >
      <LeaderboardList>
        {top10.map((driver, index) => {
          const position = index + 1;

          return (
            <LeaderboardRow
              key={driver.id}
              onClick={() => onDriverClick(driver.id)}
              rank={<RankBadge rank={position} />}
              identity={
                <Group gap={4}>
                  <Avatar src={driver.avatarUrl} alt={driver.name} size="sm" />
                  <Group direction="column" align="start" gap={0}>
                    <Text 
                      weight="bold" 
                      variant="high"
                      truncate 
                      block
                    >
                      {driver.name}
                    </Text>
                    <Group gap={2}>
                      <Text size="xs" variant="low" uppercase weight="bold" letterSpacing="wider">{driver.nationality}</Text>
                      <Text size="xs" weight="bold" color={SkillLevelFormatter.getColor(driver.skillLevel)} uppercase letterSpacing="wider">
                        {SkillLevelFormatter.getLabel(driver.skillLevel)}
                      </Text>
                    </Group>
                  </Group>
                </Group>
              }
              stats={
                <Group gap={8}>
                  <Group direction="column" align="end" gap={0}>
                    <Text variant="primary" font="mono" weight="bold" block size="md" align="right">
                      {RatingFormatter.format(driver.rating)}
                    </Text>
                    <Text size="xs" variant="low" block uppercase letterSpacing="widest" weight="bold" fontSize="9px" align="right">
                      Rating
                    </Text>
                  </Group>
                  <Group direction="column" align="end" gap={0}>
                    <Text variant="success" font="mono" weight="bold" block size="md" align="right">
                      {driver.wins}
                    </Text>
                    <Text size="xs" variant="low" block uppercase letterSpacing="widest" weight="bold" fontSize="9px" align="right">
                      Wins
                    </Text>
                  </Group>
                </Group>
              }
            />
          );
        })}
      </LeaderboardList>
    </LeaderboardPreviewShell>
  );
}