'use client';

import React from 'react';
import { Users, Zap } from 'lucide-react';
import { Card } from '@/ui/Card';
import { Stack } from '@/ui/Stack';
import { Heading } from '@/ui/Heading';
import { Text } from '@/ui/Text';
import { Box } from '@/ui/Box';
import { Image } from '@/ui/Image';
import { Badge } from '@/ui/Badge';
import { Icon } from '@/ui/Icon';
import { Surface } from '@/ui/Surface';
import { CountryFlagDisplay } from '@/lib/display-objects/CountryFlagDisplay';

interface Entry {
  id: string;
  name: string;
  avatarUrl: string;
  country: string;
  rating?: number | null;
  isCurrentUser: boolean;
}

interface RaceEntryListProps {
  entries: Entry[];
  onDriverClick: (driverId: string) => void;
}

export function RaceEntryList({ entries, onDriverClick }: RaceEntryListProps) {
  return (
    <Card>
      <Stack gap={4}>
        <Stack direction="row" align="center" justify="between">
          <Heading level={2} icon={<Icon icon={Users} size={5} color="#3b82f6" />}>Entry List</Heading>
          <Text size="sm" color="text-gray-400">{entries.length} drivers</Text>
        </Stack>

        {entries.length === 0 ? (
          <Stack center py={8} gap={3}>
            <Surface variant="muted" rounded="full" padding={4}>
              <Icon icon={Users} size={6} color="#525252" />
            </Surface>
            <Text color="text-gray-400">No drivers registered yet</Text>
          </Stack>
        ) : (
          <Stack gap={1}>
            {entries.map((driver, index) => (
              <Box
                key={driver.id}
                onClick={() => onDriverClick(driver.id)}
                style={{ display: 'flex', alignItems: 'center', gap: '0.75rem', padding: '0.75rem', borderRadius: '0.75rem', cursor: 'pointer', transition: 'all 0.2s', backgroundColor: driver.isCurrentUser ? 'rgba(59, 130, 246, 0.1)' : 'transparent', border: driver.isCurrentUser ? '1px solid rgba(59, 130, 246, 0.3)' : '1px solid transparent' }}
              >
                <Box style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', width: '2rem', height: '2rem', borderRadius: '0.5rem', fontWeight: 'bold', fontSize: '0.875rem', backgroundColor: '#262626', color: '#737373' }}>
                  {index + 1}
                </Box>

                <Box style={{ position: 'relative', flexShrink: 0 }}>
                  <Box style={{ width: '2.5rem', height: '2.5rem', borderRadius: '9999px', overflow: 'hidden', border: driver.isCurrentUser ? '2px solid #3b82f6' : 'none' }}>
                    <Image src={driver.avatarUrl} alt={driver.name} width={40} height={40} style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
                  </Box>
                  <Box style={{ position: 'absolute', bottom: '-0.125rem', right: '-0.125rem', width: '1.25rem', height: '1.25rem', borderRadius: '9999px', backgroundColor: '#0f1115', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: '0.625rem' }}>
                    {CountryFlagDisplay.fromCountryCode(driver.country).toString()}
                  </Box>
                </Box>

                <Box style={{ flex: 1, minWidth: 0 }}>
                  <Stack direction="row" align="center" gap={2}>
                    <Text weight="semibold" size="sm" color={driver.isCurrentUser ? 'text-primary-blue' : 'text-white'} truncate>{driver.name}</Text>
                    {driver.isCurrentUser && <Badge variant="primary">You</Badge>}
                  </Stack>
                  <Text size="xs" color="text-gray-500">{driver.country}</Text>
                </Box>

                {driver.rating != null && (
                  <Badge variant="warning">
                    <Icon icon={Zap} size={3} />
                    {driver.rating}
                  </Badge>
                )}
              </Box>
            ))}
          </Stack>
        )}
      </Stack>
    </Card>
  );
}