import { RatingDisplay } from '@/lib/display-objects/RatingDisplay';
import { Image } from '@/ui/Image';
import { Stack } from '@/ui/primitives/Stack';
import { TableCell, TableRow } from '@/ui/Table';
import { Text } from '@/ui/Text';
import { DeltaChip } from './DeltaChip';
import { RankMedal } from './RankMedal';

interface RankingRowProps {
  id: string;
  rank: number;
  rankDelta?: number;
  name: string;
  avatarUrl: string;
  nationality: string;
  skillLevel: string;
  racesCompleted: number;
  rating: number;
  wins: number;
  onClick?: () => void;
}

export function RankingRow({
  rank,
  rankDelta,
  name,
  avatarUrl,
  nationality,
  skillLevel,
  racesCompleted,
  rating,
  wins,
  onClick,
}: RankingRowProps) {
  return (
    <TableRow
      clickable={!!onClick}
      onClick={onClick}
      group
    >
      <TableCell>
        <Stack direction="row" align="center" gap={4}>
          <Stack w="8" display="flex" justifyContent="center">
            <RankMedal rank={rank} size="md" />
          </Stack>
          {rankDelta !== undefined && (
            <Stack w="10">
              <DeltaChip value={rankDelta} type="rank" />
            </Stack>
          )}
        </Stack>
      </TableCell>

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

      <TableCell textAlign="center">
        <Text color="text-gray-400" font="mono">{racesCompleted}</Text>
      </TableCell>

      <TableCell textAlign="center">
        <Text font="mono" weight="bold" color="text-primary-blue">
          {RatingDisplay.format(rating)}
        </Text>
      </TableCell>

      <TableCell textAlign="center">
        <Text font="mono" weight="bold" color="text-performance-green">
          {wins}
        </Text>
      </TableCell>
    </TableRow>
  );
}