import { Users } from 'lucide-react';
import { Box } from '@/ui/Box';
import { Text } from '@/ui/Text';
import { Image } from '@/ui/Image';
import { LeaderboardList } from '@/ui/LeaderboardList';
import { LeaderboardPreviewShell } from '@/ui/LeaderboardPreviewShell';
import { RankBadge } from '@/components/leaderboards/RankBadge';
import { getMediaUrl } from '@/lib/utilities/media';
import { Icon } from '@/ui/Icon';

interface TeamLeaderboardPreviewProps {
  teams: {
    id: string;
    name: string;
    tag: string;
    memberCount: number;
    category?: string;
    totalWins: number;
    logoUrl: string;
    position: number;
  }[];
  onTeamClick: (id: string) => void;
  onNavigateToTeams: () => void;
}

export function TeamLeaderboardPreview({ teams, onTeamClick, onNavigateToTeams }: TeamLeaderboardPreviewProps) {
  const top5 = teams;

  return (
    <LeaderboardPreviewShell
      title="Team Rankings"
      subtitle="Top Performing Teams"
      onViewFull={onNavigateToTeams}
      icon={Users}
      iconColor="var(--neon-purple)"
      iconBgGradient="linear-gradient(to bottom right, rgba(168, 85, 247, 0.2), rgba(168, 85, 247, 0.1))"
      viewFullLabel="View All"
    >
      <LeaderboardList>
        {top5.map((team) => {
          const position = team.position;

          return (
            <Box
              key={team.id}
              as="button"
              type="button"
              onClick={() => onTeamClick(team.id)}
              display="flex"
              alignItems="center"
              gap={4}
              px={5}
              py={3}
              w="full"
              textAlign="left"
              transition
              hoverBg="bg-white/[0.02]"
              group
            >
              <Box w="8" display="flex" justifyContent="center">
                <RankBadge rank={position} />
              </Box>

              <Box 
                display="flex" 
                h="9" 
                w="9" 
                alignItems="center" 
                justifyContent="center" 
                rounded="lg" 
                bg="bg-graphite-black/50" 
                border 
                borderColor="border-charcoal-outline" 
                overflow="hidden" 
                groupHoverBorderColor="purple-400/50" 
                transition
              >
                <Image
                  src={team.logoUrl || getMediaUrl('team-logo', team.id)}
                  alt={team.name}
                  width={36}
                  height={36}
                  fullWidth
                  fullHeight
                  objectFit="cover"
                />
              </Box>

              <Box flexGrow={1} minWidth="0">
                <Text 
                  weight="semibold" 
                  color="text-white" 
                  truncate 
                  groupHoverTextColor="text-purple-400" 
                  transition 
                  block
                >
                  {team.name}
                </Text>
                <Box display="flex" alignItems="center" gap={2} flexWrap="wrap">
                  {team.category && (
                    <Box display="flex" alignItems="center" gap={1} color="text-purple-400">
                      <Box w="1.5" h="1.5" rounded="full" bg="bg-purple-400" />
                      <Text size="xs" weight="medium">{team.category}</Text>
                    </Box>
                  )}
                  <Box w="1" h="1" rounded="full" bg="bg-gray-700" />
                  <Box display="flex" alignItems="center" gap={1}>
                    <Icon icon={Users} size={3} color="text-gray-500" />
                    <Text size="xs" color="text-gray-500">{team.memberCount} members</Text>
                  </Box>
                </Box>
              </Box>

              <Box display="flex" alignItems="center" gap={6}>
                <Box textAlign="right">
                  <Text color="text-purple-400" font="mono" weight="bold" block size="sm">{team.memberCount}</Text>
                  <Text fontSize="10px" color="text-gray-500" block uppercase letterSpacing="wider" weight="bold">Members</Text>
                </Box>
                <Box textAlign="right" minWidth="12">
                  <Text color="text-performance-green" font="mono" weight="bold" block size="sm">{team.totalWins}</Text>
                  <Text fontSize="10px" color="text-gray-500" block uppercase letterSpacing="wider" weight="bold">Wins</Text>
                </Box>
              </Box>
            </Box>
          );
        })}
      </LeaderboardList>
    </LeaderboardPreviewShell>
  );
}