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

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

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

  return (
    <LeaderboardPreviewShell
      title="Team Standings"
      subtitle="Top Performing Teams"
      onViewFull={onNavigateToTeams}
      icon={Users}
      iconColor="var(--ui-color-intent-primary)"
      iconBgGradient="linear-gradient(to bottom right, rgba(25, 140, 255, 0.2), rgba(25, 140, 255, 0.1))"
      viewFullLabel="View All"
    >
      <LeaderboardList>
        {top5.map((team) => {
          const position = team.position;

          return (
            <LeaderboardRow
              key={team.id}
              onClick={() => onTeamClick(team.id)}
              rank={
                <Group gap={4} data-testid={`standing-position-${position}`}>
                  <RankBadge rank={position} />
                </Group>
              }
              identity={
                <Group gap={4} data-testid={`standing-team-${team.id}`}>
                  <Avatar
                    src={team.logoUrl || getMediaUrl('team-logo', team.id)}
                    alt={team.name}
                    size="sm"
                  />
                  <Group direction="column" align="start" gap={0}>
                    <Text
                      weight="bold"
                      variant="high"
                      truncate
                      block
                      data-testid="team-name"
                    >
                      {team.name}
                    </Text>
                    <Group gap={2} wrap>
                      <Text size="xs" variant="low" uppercase weight="bold" letterSpacing="wider" font="mono">{team.performanceLevel}</Text>
                      <Group gap={1}>
                        <Icon icon={Users} size={3} intent="low" />
                        <Text size="xs" variant="low" weight="bold">{team.memberCount}</Text>
                      </Group>
                    </Group>
                  </Group>
                </Group>
              }
              stats={
                <Group gap={8} data-testid="standing-stats">
                  <Group direction="column" align="end" gap={0} data-testid="stat-rating">
                    <Text variant="primary" font="mono" weight="bold" block size="md" align="right">
                      {team.rating?.toFixed(0) || '1000'}
                    </Text>
                    <Text size="xs" variant="low" block uppercase letterSpacing="widest" weight="bold" fontSize="9px" align="right">
                      Rating
                    </Text>
                  </Group>
                  <Group direction="column" align="end" gap={0} data-testid="stat-wins">
                    <Text variant="success" font="mono" weight="bold" block size="md" align="right">
                      {team.totalWins}
                    </Text>
                    <Text size="xs" variant="low" block uppercase letterSpacing="widest" weight="bold" fontSize="9px" align="right">
                      Wins
                    </Text>
                  </Group>
                </Group>
              }
            />
          );
        })}
      </LeaderboardList>
    </LeaderboardPreviewShell>
  );
}