'use client';

import React from 'react';
import { Medal } 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';

interface Driver {
  id: string;
  name: string;
  avatarUrl: string;
  rank: number;
  nationality: string;
  skillLevel: string;
  racesCompleted: number;
  rating: number;
  wins: number;
  medalBg?: string;
  medalColor?: string;
}

interface RankingsTableProps {
  drivers: Driver[];
  onDriverClick?: (id: string) => void;
}

export function RankingsTable({ drivers, onDriverClick }: RankingsTableProps) {
  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' }}>Driver</Box>
        <Box style={{ gridColumn: 'span 2', textAlign: 'center' }}>Races</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}>
        {drivers.map((driver, index) => {
          const position = driver.rank;

          return (
            <Box
              key={driver.id}
              as="button"
              type="button"
              onClick={() => onDriverClick?.(driver.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 < drivers.length - 1 ? '1px solid rgba(38, 38, 38, 0.5)' : 'none'
              }}
            >
              {/* Position */}
              <Box style={{ gridColumn: 'span 1', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                <Box style={{ display: 'flex', height: '2.25rem', width: '2.25rem', alignItems: 'center', justifyContent: 'center', borderRadius: '9999px', fontSize: '0.875rem', fontWeight: 'bold', border: '1px solid #262626', backgroundColor: driver.medalBg, color: driver.medalColor }}>
                  {position <= 3 ? <Icon icon={Medal} size={4} /> : position}
                </Box>
              </Box>

              {/* Driver Info */}
              <Box style={{ gridColumn: 'span 5', display: 'flex', alignItems: 'center', gap: '0.75rem' }}>
                <Box style={{ position: 'relative', width: '2.5rem', height: '2.5rem', borderRadius: '9999px', overflow: 'hidden', border: '2px solid #262626' }}>
                  <Image src={driver.avatarUrl} alt={driver.name} width={40} height={40} style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
                </Box>
                <Box style={{ minWidth: 0 }}>
                  <Text weight="semibold" color="text-white" block truncate>
                    {driver.name}
                  </Text>
                  <Stack direction="row" align="center" gap={2} mt={1}>
                    <Text size="xs" color="text-gray-500">{driver.nationality}</Text>
                    <Text size="xs" color="text-gray-500">{driver.skillLevel}</Text>
                  </Stack>
                </Box>
              </Box>

              {/* Races */}
              <Box style={{ gridColumn: 'span 2', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                <Text color="text-gray-400">{driver.racesCompleted}</Text>
              </Box>

              {/* Rating */}
              <Box style={{ gridColumn: 'span 2', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                <Text font="mono" weight="semibold" color="text-white">
                  {driver.rating.toString()}
                </Text>
              </Box>

              {/* Wins */}
              <Box style={{ gridColumn: 'span 2', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                <Text font="mono" weight="semibold" color="text-performance-green">
                  {driver.wins}
                </Text>
              </Box>
            </Box>
          );
        })}
      </Stack>

      {/* Empty State */}
      {drivers.length === 0 && (
        <Box style={{ padding: '4rem 0', textAlign: 'center' }}>
          <Text size="4xl" block mb={4}>🔍</Text>
          <Text color="text-gray-400" block mb={2}>No drivers found</Text>
          <Text size="sm" color="text-gray-500">There are no drivers in the system yet</Text>
        </Box>
      )}
    </Box>
  );
}