

import { Icon } from '@/ui/Icon';
import { Image } from '@/ui/Image';
import { Stack } from '@/ui/primitives/Stack';
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/ui/Table';
import { Text } from '@/ui/Text';
import { Medal } from 'lucide-react';

interface Driver {
  id: string;
  name: string;
  avatarUrl: string;
  rank: number;
  nationality: string;
  skillLevel: string;
  racesCompleted: number;
  rating: number;
  wins: number;
  medalBg?: string;
  medalColor?: string;
}

interface RankingsTableProps {
  drivers: Driver[];
  onDriverClick?: (id: string) => void;
}

export function RankingsTable({ drivers, onDriverClick }: RankingsTableProps) {
  if (drivers.length === 0) {
    return (
      <Stack py={16} align="center" bg="bg-iron-gray/30" border borderColor="border-charcoal-outline" rounded="xl">
        <Text size="4xl" block mb={4}>🔍</Text>
        <Text color="text-gray-400" block mb={2}>No drivers found</Text>
        <Text size="sm" color="text-gray-500">There are no drivers in the system yet</Text>
      </Stack>
    );
  }

  return (
    <Stack rounded="xl" bg="bg-iron-gray/30" border borderColor="border-charcoal-outline" overflow="hidden" gap={0}>
      <Table>
        <TableHead>
          <TableRow>
            <TableHeader className="text-center w-16">Rank</TableHeader>
            <TableHeader>Driver</TableHeader>
            <TableHeader className="text-center">Races</TableHeader>
            <TableHeader className="text-center">Rating</TableHeader>
            <TableHeader className="text-center">Wins</TableHeader>
          </TableRow>
        </TableHead>
        <TableBody>
          {drivers.map((driver) => (
            <TableRow
              key={driver.id}
              clickable
              onClick={() => onDriverClick?.(driver.id)}
            >
              <TableCell className="text-center">
                <Stack 
                  direction="row"
                  h="9" 
                  w="9" 
                  align="center" 
                  justify="center" 
                  rounded="full" 
                  border 
                  borderColor="border-charcoal-outline"
                  bg={driver.medalBg}
                  fontSize="sm"
                  fontWeight="bold"
                >
                  {driver.rank <= 3 ? <Icon icon={Medal} size={4} color={driver.medalColor} /> : (
                    <Text color={driver.medalColor}>{driver.rank}</Text>
                  )}
                </Stack>
              </TableCell>

              <TableCell>
                <Stack direction="row" align="center" gap={3}>
                  <Stack position="relative" w="10" h="10" rounded="full" overflow="hidden" border borderColor="border-charcoal-outline" gap={0}>
                    <Image src={driver.avatarUrl} alt={driver.name} width={40} height={40} objectFit="cover" fullWidth fullHeight />
                  </Stack>
                  <Stack minWidth="0" gap={0}>
                    <Text weight="semibold" color="text-white" block truncate>
                      {driver.name}
                    </Text>
                    <Stack direction="row" align="center" gap={2} mt={1}>
                      <Text size="xs" color="text-gray-500">{driver.nationality}</Text>
                      <Text size="xs" color="text-gray-500">{driver.skillLevel}</Text>
                    </Stack>
                  </Stack>
                </Stack>
              </TableCell>

              <TableCell className="text-center">
                <Text color="text-gray-400">{driver.racesCompleted}</Text>
              </TableCell>

              <TableCell className="text-center">
                <Text font="mono" weight="semibold" color="text-white">
                  {driver.rating.toString()}
                </Text>
              </TableCell>

              <TableCell className="text-center">
                <Text font="mono" weight="semibold" color="text-performance-green">
                  {driver.wins}
                </Text>
              </TableCell>
            </TableRow>
          ))}
        </TableBody>
      </Table>
    </Stack>
  );
}
