'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 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 */}
      <div style={{ position: 'relative', flexShrink: 0 }}>
        <div style={{ width: '2.5rem', height: '2.5rem', borderRadius: '9999px', overflow: 'hidden', border: isCurrentUser ? '2px solid var(--ui-color-intent-primary)' : '1px solid var(--ui-color-border-default)' }}>
          <Image src={driverAvatar} alt={driverName} width={40} height={40} objectFit="cover" />
        </div>
        <div style={{ position: 'absolute', bottom: '-0.125rem', right: '-0.125rem', width: '1.25rem', height: '1.25rem', borderRadius: '9999px', backgroundColor: 'var(--ui-color-bg-base)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: '0.625rem' }}>
          {CountryFlagDisplay.fromCountryCode(country).toString()}
        </div>
      </div>

      {/* Driver Info */}
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
          <Text weight="semibold" size="sm" variant={isCurrentUser ? 'primary' : 'high'} truncate>{driverName}</Text>
          {isCurrentUser && (
            <Badge variant="primary" size="sm">YOU</Badge>
          )}
        </div>
        <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', marginTop: '0.25rem' }}>
          <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>
        </div>
      </div>

      {/* Times */}
      <div style={{ textAlign: 'right', minWidth: '100px' }}>
        <Text size="sm" font="mono" variant="high" block>{time}</Text>
        <Text size="xs" variant="success" block style={{ marginTop: '0.25rem' }}>FL: {fastestLap}</Text>
      </div>

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