import { Icon } from '@/ui/Icon';
import { Image } from '@/ui/Image';
import { Stack } from '@/ui/primitives/Stack';
import { Text } from '@/ui/Text';
import { Crown, Trophy, Users } from 'lucide-react';

interface TeamLeaderboardItemProps {
  position: number;
  name: string;
  logoUrl: string;
  category?: string;
  memberCount: number;
  totalWins: number;
  isRecruiting: boolean;
  rating?: number;
  onClick?: () => void;
  medalColor: string;
  medalBg: string;
  medalBorder: string;
}

export function TeamLeaderboardItem({
  position,
  name,
  logoUrl,
  category,
  memberCount,
  totalWins,
  isRecruiting,
  rating,
  onClick,
  medalColor,
  medalBg,
  medalBorder,
}: TeamLeaderboardItemProps) {
  return (
    <Stack
      as="button"
      type="button"
      onClick={onClick}
      display="flex"
      alignItems="center"
      gap={4}
      px={4}
      py={3}
      fullWidth
      textAlign="left"
      bg="transparent"
      border="none"
      cursor="pointer"
      borderBottom
      style={{ borderColor: 'rgba(38, 38, 38, 0.5)' }}
      className="last:border-0"
    >
      {/* Position */}
      <Stack
        w="8"
        h="8"
        display="flex"
        center
        rounded="full"
        style={{ 
          fontSize: '0.75rem', 
          fontWeight: 'bold', 
          border: `1px solid ${medalBorder}`, 
          backgroundColor: medalBg, 
          color: medalColor 
        }}
      >
        {position <= 3 ? (
          <Icon icon={Crown} size={3.5} />
        ) : (
          position
        )}
      </Stack>

      {/* Team Info */}
      <Stack w="9" h="9" rounded="md" overflow="hidden" bg="bg-deep-graphite" border style={{ borderColor: 'rgba(38, 38, 38, 0.8)' }} flexShrink={0}>
        <Image
          src={logoUrl}
          alt={name}
          width={36}
          height={36}
          style={{ width: '100%', height: '100%', objectFit: 'cover' }}
        />
      </Stack>
      <Stack style={{ flex: 1, minWidth: 0 }}>
        <Text weight="medium" color="text-white" className="truncate" block>
          {name}
        </Text>
        <Stack direction="row" align="center" gap={2} wrap mt={0.5}>
          {category && (
            <Stack direction="row" align="center" gap={1}>
              <Stack w="1.5" h="1.5" rounded="full" bg="bg-purple-500" />
              <Text size="xs" color="text-purple-400">{category}</Text>
            </Stack>
          )}
          <Stack direction="row" align="center" gap={1}>
            <Icon icon={Users} size={3} color="var(--text-gray-600)" />
            <Text size="xs" color="text-gray-500">{memberCount}</Text>
          </Stack>
          <Stack direction="row" align="center" gap={1}>
            <Icon icon={Trophy} size={3} color="var(--text-gray-600)" />
            <Text size="xs" color="text-gray-500">{totalWins} wins</Text>
          </Stack>
          {isRecruiting && (
            <Stack direction="row" align="center" gap={1}>
              <Stack w="1.5" h="1.5" rounded="full" bg="bg-performance-green" />
              <Text size="xs" color="text-performance-green">Recruiting</Text>
            </Stack>
          )}
        </Stack>
      </Stack>

      {/* Rating */}
      <Stack textAlign="right">
        <Text font="mono" weight="semibold" color="text-purple-400" block>
          {typeof rating === 'number' ? Math.round(rating).toLocaleString() : '—'}
        </Text>
        <Text size="xs" color="text-gray-500">Rating</Text>
      </Stack>
    </Stack>
  );
}