'use client';

import React from 'react';
import { Box } from '@/ui/Box';
import { Stack } from '@/ui/Stack';
import { Text } from '@/ui/Text';
import { Image } from '@/ui/Image';
import { Surface } from '@/ui/Surface';
import { CountryFlagDisplay } from '@/lib/display-objects/CountryFlagDisplay';

interface ResultEntry {
  position: number;
  driverId: string;
  driverName: string;
  driverAvatar: string;
  country: string;
  car: string;
  laps: number;
  time: string;
  fastestLap: string;
  points: number;
  incidents: number;
  isCurrentUser: boolean;
}

interface RaceResultRowProps {
  result: ResultEntry;
  points: number;
}

export function RaceResultRow({ result, points }: RaceResultRowProps) {
  const { isCurrentUser, position, driverAvatar, driverName, country, car, laps, incidents, time, fastestLap } = result;

  return (
    <Surface
      variant={isCurrentUser ? 'muted' : 'dark'}
      rounded="xl"
      border={isCurrentUser}
      padding={3}
      style={{ 
        background: isCurrentUser ? 'linear-gradient(to right, rgba(59, 130, 246, 0.2), rgba(59, 130, 246, 0.1), transparent)' : undefined,
        borderColor: isCurrentUser ? 'rgba(59, 130, 246, 0.4)' : undefined
      }}
    >
      <Stack direction="row" align="center" gap={3}>
        {/* Position */}
        <Surface 
          variant="muted" 
          rounded="lg" 
          padding={1} 
          style={{ 
            width: '2.5rem', 
            height: '2.5rem', 
            display: 'flex', 
            alignItems: 'center', 
            justifyContent: 'center',
            backgroundColor: position === 1 ? 'rgba(250, 204, 21, 0.2)' : position === 2 ? 'rgba(209, 213, 219, 0.2)' : position === 3 ? 'rgba(217, 119, 6, 0.2)' : 'rgba(38, 38, 38, 0.5)',
            color: position === 1 ? '#facc15' : position === 2 ? '#d1d5db' : position === 3 ? '#d97706' : '#737373'
          }}
        >
          <Text weight="bold">{position}</Text>
        </Surface>

        {/* Avatar */}
        <Box style={{ position: 'relative', flexShrink: 0 }}>
          <Box style={{ width: '2.5rem', height: '2.5rem', borderRadius: '9999px', overflow: 'hidden', border: isCurrentUser ? '2px solid rgba(59, 130, 246, 0.5)' : 'none' }}>
            <Image src={driverAvatar} alt={driverName} 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(country).toString()}
          </Box>
        </Box>

        {/* Driver Info */}
        <Box style={{ flex: 1, minWidth: 0 }}>
          <Stack direction="row" align="center" gap={2}>
            <Text weight="semibold" size="sm" color={isCurrentUser ? 'text-primary-blue' : 'text-white'} truncate>{driverName}</Text>
            {isCurrentUser && (
              <Surface variant="muted" rounded="full" padding={1} style={{ backgroundColor: '#3b82f6', paddingLeft: '0.5rem', paddingRight: '0.5rem' }}>
                <Text size="xs" weight="bold" color="text-white">YOU</Text>
              </Surface>
            )}
          </Stack>
          <Stack direction="row" align="center" gap={2} mt={1}>
            <Text size="xs" color="text-gray-500">{car}</Text>
            <Text size="xs" color="text-gray-500">•</Text>
            <Text size="xs" color="text-gray-500">Laps: {laps}</Text>
            <Text size="xs" color="text-gray-500">•</Text>
            <Text size="xs" color="text-gray-500">Incidents: {incidents}</Text>
          </Stack>
        </Box>

        {/* Times */}
        <Box style={{ textAlign: 'right', minWidth: '100px' }}>
          <Text size="sm" font="mono" color="text-white" block>{time}</Text>
          <Text size="xs" color="text-performance-green" block mt={1}>FL: {fastestLap}</Text>
        </Box>

        {/* Points */}
        <Surface variant="muted" rounded="lg" border padding={2} style={{ backgroundColor: 'rgba(245, 158, 11, 0.1)', borderColor: 'rgba(245, 158, 11, 0.2)', textAlign: 'center', minWidth: '3.5rem' }}>
          <Text size="xs" color="text-gray-500" block>PTS</Text>
          <Text size="sm" weight="bold" color="text-warning-amber">{points}</Text>
        </Surface>
      </Stack>
    </Surface>
  );
}
