'use client';

import React from 'react';
import { Medal, Users, Globe, Languages } 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 (
    <Box style={{ borderRadius: '0.75rem', backgroundColor: 'rgba(38, 38, 38, 0.3)', border: '1px solid #262626', overflow: 'hidden' }}>
      {/* Table Header */}
      <Box style={{ display: 'grid', gridTemplateColumns: 'repeat(12, minmax(0, 1fr))', gap: '1rem', padding: '0.75rem 1rem', backgroundColor: 'rgba(38, 38, 38, 0.5)', borderBottom: '1px solid #262626', fontSize: '0.75rem', fontWeight: 500, color: '#6b7280', textTransform: 'uppercase', letterSpacing: '0.05em' }}>
        <Box style={{ gridColumn: 'span 1', textAlign: 'center' }}>Rank</Box>
        <Box style={{ gridColumn: 'span 5' }}>Team</Box>
        <Box style={{ gridColumn: 'span 2', textAlign: 'center' }} className="hidden lg:block">Members</Box>
        <Box style={{ gridColumn: 'span 2', textAlign: 'center' }}>Rating</Box>
        <Box style={{ gridColumn: 'span 2', textAlign: 'center' }}>Wins</Box>
      </Box>

      {/* Table Body */}
      <Stack gap={0}>
        {teams.map((team, index) => {
          const winRate = team.totalRaces > 0 ? ((team.totalWins / team.totalRaces) * 100).toFixed(1) : '0.0';

          return (
            <Box
              key={team.id}
              as="button"
              type="button"
              onClick={() => onTeamClick(team.id)}
              style={{ 
                display: 'grid', 
                gridTemplateColumns: 'repeat(12, minmax(0, 1fr))', 
                gap: '1rem', 
                padding: '1rem', 
                width: '100%', 
                textAlign: 'left', 
                backgroundColor: 'transparent', 
                border: 'none', 
                cursor: 'pointer',
                borderBottom: index < teams.length - 1 ? '1px solid rgba(38, 38, 38, 0.5)' : 'none'
              }}
            >
              {/* Position */}
              <Box style={{ gridColumn: 'span 1', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                <Surface variant="muted" rounded="full" padding={1} style={{ width: '2.25rem', height: '2.25rem', display: 'flex', alignItems: 'center', justifyContent: 'center', backgroundColor: '#262626' }}>
                  {index < 3 ? <Icon icon={Medal} size={4} /> : index + 1}
                </Surface>
              </Box>

              {/* Team Info */}
              <Box style={{ gridColumn: 'span 5', display: 'flex', alignItems: 'center', gap: '0.75rem' }}>
                <Box style={{ width: '2.5rem', height: '2.5rem', borderRadius: '0.5rem', overflow: 'hidden', border: '1px solid #262626' }}>
                  <Image
                    src={team.logoUrl || getMediaUrl('team-logo', team.id)}
                    alt={team.name}
                    width={40}
                    height={40}
                    style={{ width: '100%', height: '100%', objectFit: 'cover' }}
                  />
                </Box>
                <Box style={{ minWidth: 0, flex: 1 }}>
                  <Text weight="semibold" color="text-white" block 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 style={{ width: '0.375rem', height: '0.375rem', borderRadius: '9999px', backgroundColor: '#a855f7' }} />
                        <Text size="xs" color="text-purple-400">{team.category}</Text>
                      </Stack>
                    )}
                  </Stack>
                </Box>
              </Box>

              {/* Members */}
              <Box style={{ gridColumn: 'span 2', display: 'flex', alignItems: 'center', justifyContent: 'center' }} className="hidden lg:flex">
                <Stack direction="row" align="center" gap={1.5}>
                  <Icon icon={Users} size={3.5} color="#9ca3af" />
                  <Text size="sm" color="text-gray-400">{team.memberCount}</Text>
                </Stack>
              </Box>

              {/* Rating */}
              <Box style={{ gridColumn: 'span 2', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                <Text font="mono" weight="semibold" color={sortBy === 'rating' ? 'text-primary-blue' : 'text-white'}>
                  0
                </Text>
              </Box>

              {/* Wins */}
              <Box style={{ gridColumn: 'span 2', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                <Text font="mono" weight="semibold" color={sortBy === 'wins' ? 'text-primary-blue' : 'text-white'}>
                  {team.totalWins}
                </Text>
              </Box>
            </Box>
          );
        })}
      </Stack>
    </Box>
  );
}