'use client';

import { Box } from '@/ui/Box';
import { Text } from '@/ui/Text';
import { Stack } from '@/ui/Stack';
import { RaceRow } from '@/ui/RaceRow';
import { RaceRowCell } from '@/ui/RaceRowCell';
import { StatusBadge } from '@/ui/StatusBadge';
import { Icon } from '@/ui/Icon';
import { Clock, MapPin, Car as CarIcon } from 'lucide-react';
import Link from 'next/link';

interface RaceListRowProps {
  race: {
    id: string;
    track: string;
    car: string;
    leagueName: string;
    timeLabel: string;
    status: string;
    isLive: boolean;
    isPast: boolean;
  };
  onClick: (id: string) => void;
}

export function RaceListRow({ race, onClick }: RaceListRowProps) {
  const status = race.isLive ? 'live' : (race.isPast ? 'past' : 'upcoming');
  const emphasis = race.isPast ? 'low' : 'medium';

  return (
    <RaceRow 
      as={Link}
      href={`/races/${race.id}`}
      onClick={(e: React.MouseEvent) => {
        e.preventDefault();
        onClick(race.id);
      }} 
      status={status}
      emphasis={emphasis}
    >
      <RaceRowCell width="5rem" align="center">
        <Stack gap={0.5} align="center">
          <Text size="sm" weight="bold" variant={race.isLive ? 'success' : 'high'}>
            {race.timeLabel}
          </Text>
          {race.isLive && (
            <Text size="xs" variant="success" weight="bold" uppercase>Live</Text>
          )}
        </Stack>
      </RaceRowCell>

      <RaceRowCell label="Track">
        <Stack direction="row" align="center" gap={2}>
          <Icon icon={MapPin} size={3} intent="low" />
          <Text size="sm" weight="medium" truncate>{race.track}</Text>
        </Stack>
      </RaceRowCell>

      <RaceRowCell label="League" hideOnMobile>
        <Text size="sm" variant="low" truncate>{race.leagueName}</Text>
      </RaceRowCell>

      <RaceRowCell label="Car" hideOnMobile>
        <Stack direction="row" align="center" gap={2}>
          <Icon icon={CarIcon} size={3} intent="low" />
          <Text size="sm" variant="low" truncate>{race.car}</Text>
        </Stack>
      </RaceRowCell>

      <RaceRowCell width="6rem" align="right">
        <StatusBadge variant={getStatusVariant(race.status)}>
          {race.status}
        </StatusBadge>
      </RaceRowCell>
    </RaceRow>
  );
}

function getStatusVariant(status: string): any {
  switch (status.toLowerCase()) {
    case 'running': return 'success';
    case 'completed': return 'neutral';
    case 'cancelled': return 'error';
    case 'scheduled': return 'info';
    default: return 'neutral';
  }
}