'use client';

import React from 'react';
import { Medal, Users } from 'lucide-react';
import { Box } from '@/ui/Box';
import { Stack } from '@/ui/Stack';
import { Text } from '@/ui/Text';
import { Image } from '@/ui/Image';
import { Icon } from '@/ui/Icon';
import { Surface } from '@/ui/Surface';
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 (
    <Surface variant="muted" rounded="xl" border className="overflow-hidden">
      {/* Table Header */}
      <Box display="grid" className="grid-cols-12 gap-4 px-4 py-3 bg-iron-gray/50 border-b border-charcoal-outline text-[10px] font-medium text-gray-500 uppercase tracking-wider">
        <Box className="col-span-1 text-center">Rank</Box>
        <Box className="col-span-5">Team</Box>
        <Box className="col-span-2 text-center hidden lg:block">Members</Box>
        <Box className="col-span-2 text-center">Rating</Box>
        <Box className="col-span-2 text-center">Wins</Box>
      </Box>

      {/* Table Body */}
      <Stack gap={0}>
        {teams.map((team, index) => {
          return (
            <Box
              key={team.id}
              as="button"
              type="button"
              onClick={() => onTeamClick(team.id)}
              display="grid"
              className={`grid-cols-12 gap-4 p-4 w-full text-left bg-transparent border-0 cursor-pointer hover:bg-iron-gray/20 transition-colors ${
                index < teams.length - 1 ? 'border-b border-charcoal-outline/50' : ''
              }`}
            >
              {/* Position */}
              <Box className="col-span-1 flex items-center justify-center">
                <Box width={9} height={9} rounded="full" display="flex" center backgroundColor="charcoal-outline">
                  {index < 3 ? <Icon icon={Medal} size={4} color={index === 0 ? 'text-yellow-400' : index === 1 ? 'text-gray-300' : 'text-amber-600'} /> : <Text size="xs" color="text-gray-400">{index + 1}</Text>}
                </Box>
              </Box>

              {/* Team Info */}
              <Box className="col-span-5 flex items-center gap-3">
                <Box width={10} height={10} rounded="lg" className="overflow-hidden" border borderColor="charcoal-outline">
                  <Image
                    src={team.logoUrl || getMediaUrl('team-logo', team.id)}
                    alt={team.name}
                    width={40}
                    height={40}
                    className="w-full h-full object-cover"
                  />
                </Box>
                <Box className="min-w-0 flex-1">
                  <Text weight="semibold" color="text-white" block className="truncate">{team.name}</Text>
                  <Stack direction="row" align="center" gap={2} mt={1} wrap>
                    <Text size="xs" color="text-gray-500">{team.performanceLevel}</Text>
                    {team.category && (
                      <Stack direction="row" align="center" gap={1}>
                        <Box width={1.5} height={1.5} rounded="full" backgroundColor="primary-blue" opacity={0.5} />
                        <Text size="xs" color="text-primary-blue">{team.category}</Text>
                      </Stack>
                    )}
                  </Stack>
                </Box>
              </Box>

              {/* Members */}
              <Box className="col-span-2 flex items-center justify-center hidden lg:flex">
                <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>
              </Box>

              {/* Rating */}
              <Box className="col-span-2 flex items-center justify-center">
                <Text font="mono" weight="semibold" color={sortBy === 'rating' ? 'text-primary-blue' : 'text-white'}>
                  0
                </Text>
              </Box>

              {/* Wins */}
              <Box className="col-span-2 flex items-center justify-center">
                <Text font="mono" weight="semibold" color={sortBy === 'wins' ? 'text-primary-blue' : 'text-white'}>
                  {team.totalWins}
                </Text>
              </Box>
            </Box>
          );
        })}
      </Stack>
    </Surface>
  );
}