import { Box } from '@/ui/Box';
import { Icon } from '@/ui/Icon';
import { Image } from '@/ui/Image';
import { Stack } from '@/ui/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 (
      <Box py={16} textAlign="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>
      </Box>
    );
  }

  return (
    <Box rounded="xl" bg="bg-iron-gray/30" border borderColor="border-charcoal-outline" overflow="hidden">
      <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">
                <Box 
                  display="inline-flex" 
                  h="9" 
                  w="9" 
                  alignItems="center" 
                  justifyContent="center" 
                  rounded="full" 
                  border 
                  borderColor="border-charcoal-outline"
                  bg={driver.medalBg}
                  color={driver.medalColor}
                  className="text-sm font-bold"
                >
                  {driver.rank <= 3 ? <Icon icon={Medal} size={4} /> : driver.rank}
                </Box>
              </TableCell>

              <TableCell>
                <Box display="flex" alignItems="center" gap={3}>
                  <Box position="relative" w="10" h="10" rounded="full" overflow="hidden" border borderColor="border-charcoal-outline" borderTop={false} borderBottom={false} borderLeft={false} borderRight={false}>
                    <Image src={driver.avatarUrl} alt={driver.name} width={40} height={40} className="w-full h-full object-cover" />
                  </Box>
                  <Box minWidth="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>
                  </Box>
                </Box>
              </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>
    </Box>
  );
}