import { RankBadge } from '@/components/leaderboards/RankBadge';
import { TeamIdentity } from '@/components/teams/TeamIdentity';
import { getMediaUrl } from '@/lib/utilities/media';
import { Card } from '@/ui/Card';
import { Icon } from '@/ui/Icon';
import { Group } from '@/ui/Group';
import { Table, TableBody, TableCell, TableHead, TableHeaderCell, TableRow } from '@/ui/Table';
import { Text } from '@/ui/Text';
import { Users } from 'lucide-react';

interface Team {
  id: string;
  name: string;
  logoUrl?: string;
  performanceLevel: string;
  category?: string;
  region?: string;
  languages?: string[];
  isRecruiting?: boolean;
  memberCount: number;
  totalWins: number;
  totalRaces: number;
}

interface TeamRankingsTableProps {
  teams: Team[];
  sortBy: string;
  onTeamClick: (id: string) => void;
}

export function TeamRankingsTable({ teams, sortBy, onTeamClick }: TeamRankingsTableProps) {
  return (
    <Card padding={0}>
      <Table>
        <TableHead>
          <TableRow>
            <TableHeaderCell textAlign="center">Rank</TableHeaderCell>
            <TableHeaderCell>Team</TableHeaderCell>
            <TableHeaderCell textAlign="center">Members</TableHeaderCell>
            <TableHeaderCell textAlign="center">Rating</TableHeaderCell>
            <TableHeaderCell textAlign="center">Wins</TableHeaderCell>
          </TableRow>
        </TableHead>
        <TableBody>
          {teams.map((team, index) => (
            <TableRow 
              key={team.id} 
              onClick={() => onTeamClick(team.id)}
              clickable
            >
              <TableCell textAlign="center">
                <RankBadge rank={index + 1} />
              </TableCell>
              <TableCell>
                <TeamIdentity 
                  name={team.name}
                  logoUrl={team.logoUrl || getMediaUrl('team-logo', team.id)}
                  performanceLevel={team.performanceLevel}
                  category={team.category}
                />
              </TableCell>
              <TableCell textAlign="center">
                <Group justify="center" gap={1.5}>
                  <Icon icon={Users} size={3.5} intent="low" />
                  <Text size="sm" variant="low">{team.memberCount}</Text>
                </Group>
              </TableCell>
              <TableCell textAlign="center">
                <Text font="mono" weight="semibold" variant={sortBy === 'rating' ? 'primary' : 'high'}>
                  0
                </Text>
              </TableCell>
              <TableCell textAlign="center">
                <Text font="mono" weight="semibold" variant={sortBy === 'wins' ? 'primary' : 'high'}>
                  {team.totalWins}
                </Text>
              </TableCell>
            </TableRow>
          ))}
        </TableBody>
      </Table>
    </Card>
  );
}