import { ChevronRight } from 'lucide-react';
import { Box } from './Box';
import { Card } from './Card';
import { Icon } from './Icon';
import { Link } from './Link';
import { Stack } from './Stack';
import { Text } from './Text';

interface RaceResultCardProps {
  raceId: string;
  track: string;
  car: string;
  scheduledAt: string | Date;
  position: number;
  startPosition: number;
  incidents: number;
  leagueName?: string;
  showLeague?: boolean;
  onClick?: () => void;
}

export function RaceResultCard({
  raceId,
  track,
  car,
  scheduledAt,
  position,
  startPosition,
  incidents,
  leagueName,
  showLeague = true,
  onClick,
}: RaceResultCardProps) {
  const getPositionColor = (pos: number) => {
    if (pos === 1) return 'text-yellow-400 bg-yellow-400/20';
    if (pos === 2) return 'text-gray-300 bg-gray-400/20';
    if (pos === 3) return 'text-amber-600 bg-amber-600/20';
    return 'text-gray-400 bg-charcoal-outline';
  };

  return (
    <Link
      href={`/races/${raceId}`}
      variant="ghost"
      block
      onClick={onClick}
    >
      <Card p={4} className="hover:border-primary-blue/50 transition-colors group">
        <Box display="flex" alignItems="center" justifyContent="between" mb={2}>
          <Stack direction="row" align="center" gap={3}>
            <Box 
              width="8" 
              height="8" 
              rounded="md" 
              display="flex" 
              center 
              weight="bold" 
              size="sm"
              className={getPositionColor(position)}
            >
              P{position}
            </Box>
            <Box>
              <Text color="text-white" weight="medium" block className="group-hover:text-primary-blue transition-colors">
                {track}
              </Text>
              <Text size="sm" color="text-gray-400" block>{car}</Text>
            </Box>
          </Stack>
          <Stack direction="row" align="center" gap={3}>
            <Box textAlign="right">
              <Text size="sm" color="text-gray-400" block>
                {new Date(scheduledAt).toLocaleDateString('en-US', {
                  month: 'short',
                  day: 'numeric',
                  year: 'numeric',
                })}
              </Text>
              {showLeague && leagueName && (
                <Text size="xs" color="text-gray-500" block>{leagueName}</Text>
              )}
            </Box>
            <Icon icon={ChevronRight} size={5} color="text-gray-500" className="group-hover:text-primary-blue transition-colors" />
          </Stack>
        </Box>
        <Stack direction="row" align="center" gap={4} color="text-gray-500">
          <Text size="xs">Started P{startPosition}</Text>
          <Text size="xs">•</Text>
          <Text size="xs" color={incidents === 0 ? 'text-performance-green' : incidents > 2 ? 'text-error-red' : undefined}>
            {incidents}x incidents
          </Text>
          {position < startPosition && (
            <>
              <Text size="xs">•</Text>
              <Text size="xs" color="text-performance-green">
                +{startPosition - position} positions
              </Text>
            </>
          )}
        </Stack>
      </Card>
    </Link>
  );
}