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

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 p={0} overflow="hidden">
      <Table>
        <TableHead>
          <TableRow>
            <TableHeader>
              <Text size="xs" weight="medium" color="text-gray-500" align="center" block>Rank</Text>
            </TableHeader>
            <TableHeader>
              <Text size="xs" weight="medium" color="text-gray-500" block>Team</Text>
            </TableHeader>
            <TableHeader>
              <Stack display={{ base: 'none', lg: 'block' }}>
                <Text size="xs" weight="medium" color="text-gray-500" align="center" block>Members</Text>
              </Stack>
            </TableHeader>
            <TableHeader>
              <Text size="xs" weight="medium" color="text-gray-500" align="center" block>Rating</Text>
            </TableHeader>
            <TableHeader>
              <Text size="xs" weight="medium" color="text-gray-500" align="center" block>Wins</Text>
            </TableHeader>
          </TableRow>
        </TableHead>
        <TableBody>
          {teams.map((team, index) => (
            <TableRow 
              key={team.id} 
              onClick={() => onTeamClick(team.id)}
              clickable
            >
              <TableCell>
                <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>
                <Stack display={{ base: 'none', lg: 'flex' }} alignItems="center" justifyContent="center">
                  <Stack direction="row" align="center" gap={1.5}>
                    <Icon icon={Users} size={3.5} color="text-gray-500" />
                    <Text size="sm" color="text-gray-400">{team.memberCount}</Text>
                  </Stack>
                </Stack>
              </TableCell>
              <TableCell>
                <Stack display="flex" center>
                  <Text font="mono" weight="semibold" color={sortBy === 'rating' ? 'text-primary-blue' : 'text-white'}>
                    0
                  </Text>
                </Stack>
              </TableCell>
              <TableCell>
                <Stack display="flex" center>
                  <Text font="mono" weight="semibold" color={sortBy === 'wins' ? 'text-primary-blue' : 'text-white'}>
                    {team.totalWins}
                  </Text>
                </Stack>
              </TableCell>
            </TableRow>
          ))}
        </TableBody>
      </Table>
    </Card>
  );
}
