'use client';

import { CountryFlagDisplay } from '@/lib/display-objects/CountryFlagDisplay';
import { Image } from '@/ui/Image';
import { ResultRow, PositionBadge, ResultPoints } from '@/ui/ResultRow';
import { Text } from '@/ui/Text';
import { Badge } from '@/ui/Badge';
import { Box } from '@/ui/Box';
import { Group } from '@/ui/Group';
import { Stack } from '@/ui/Stack';
import { Surface } from '@/ui/Surface';
import React from 'react';

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 (
    <ResultRow isHighlighted={isCurrentUser}>
      <PositionBadge position={position} />

      {/* Avatar */}
      <Box position="relative" flexShrink={0}>
        <Surface 
          width="2.5rem" 
          height="2.5rem" 
          rounded="full" 
          overflow="hidden" 
          border={isCurrentUser ? '2px solid var(--ui-color-intent-primary)' : true}
        >
          <Image src={driverAvatar} alt={driverName} width={40} height={40} objectFit="cover" />
        </Surface>
        <Surface 
          position="absolute" 
          bottom="-0.125rem" 
          right="-0.125rem" 
          width="1.25rem" 
          height="1.25rem" 
          rounded="full" 
          variant="dark" 
          display="flex" 
          alignItems="center" 
          justifyContent="center"
        >
          <Text size="xs" style={{ fontSize: '0.625rem' }}>
            {CountryFlagDisplay.fromCountryCode(country).toString()}
          </Text>
        </Surface>
      </Box>

      {/* Driver Info */}
      <Stack flex={1} minWidth="0" gap={1}>
        <Group gap={2}>
          <Text weight="semibold" size="sm" variant={isCurrentUser ? 'primary' : 'high'} truncate>{driverName}</Text>
          {isCurrentUser && (
            <Badge variant="primary" size="sm">YOU</Badge>
          )}
        </Group>
        <Group gap={2}>
          <Text size="xs" variant="low">{car}</Text>
          <Text size="xs" variant="low">•</Text>
          <Text size="xs" variant="low">Laps: {laps}</Text>
          <Text size="xs" variant="low">•</Text>
          <Text size="xs" variant="low">Incidents: {incidents}</Text>
        </Group>
      </Stack>

      {/* Times */}
      <Stack textAlign="right" minWidth="100px" gap={1}>
        <Text size="sm" font="mono" variant="high" block>{time}</Text>
        <Text size="xs" variant="success" block>FL: {fastestLap}</Text>
      </Stack>

      {/* Points */}
      <ResultPoints points={points} />
    </ResultRow>
  );
}