'use client';

import { routes } from '@/lib/routing/RouteConfig';
import { Card } from '@/ui/Card';
import { Icon } from '@/ui/Icon';
import { Link } from '@/ui/Link';
import { Stack } from '@/ui/Stack';
import { Text } from '@/ui/Text';
import { ChevronRight } from 'lucide-react';

interface RaceResultCardProps {
  raceId: string;
  track: string;
  car: string;
  formattedDate: string;
  position: number;
  positionLabel: string;
  startPositionLabel: string;
  incidentsLabel: string;
  positionsGainedLabel?: string;
  leagueName?: string;
  showLeague?: boolean;
  onClick?: () => void;
}

export function RaceResultCard({
  raceId,
  track,
  car,
  formattedDate,
  position,
  positionLabel,
  startPositionLabel,
  incidentsLabel,
  positionsGainedLabel,
  leagueName,
  showLeague = true,
  onClick,
}: RaceResultCardProps) {
  const getPositionStyles = (pos: number) => {
    if (pos === 1) return { color: 'text-warning-amber', bg: 'bg-warning-amber', bgOpacity: 0.2 };
    if (pos === 2) return { color: 'text-gray-300', bg: 'bg-gray-400', bgOpacity: 0.2 };
    if (pos === 3) return { color: 'text-amber-600', bg: 'bg-amber-600', bgOpacity: 0.2 };
    return { color: 'text-gray-400', bg: 'bg-base-black', bgOpacity: 0.5 };
  };

  const positionStyles = getPositionStyles(position);

  return (
    <Link
      href={routes.race.detail(raceId)}
      variant="ghost"
      block
      onClick={onClick}
    >
      <Card p={4} hoverBorderColor="border-primary-accent" transition group bg="bg-surface-charcoal" border borderColor="border-outline-steel">
        <Stack display="flex" alignItems="center" justifyContent="between" mb={2}>
          <Stack direction="row" align="center" gap={3}>
            <Stack 
              width="8" 
              height="8" 
              rounded="md" 
              display="flex" 
              center 
              weight="bold" 
              size="sm"
              color={positionStyles.color}
              bg={positionStyles.bg}
              bgOpacity={positionStyles.bgOpacity}
              border
              borderColor="border-outline-steel"
            >
              {positionLabel}
            </Stack>
            <Stack>
              <Text color="text-white" weight="medium" block groupHoverTextColor="text-primary-accent" transition>
                {track}
              </Text>
              <Text size="sm" color="text-gray-400" block>{car}</Text>
            </Stack>
          </Stack>
          <Stack direction="row" align="center" gap={3}>
            <Stack textAlign="right">
              <Text size="sm" color="text-gray-400" block>
                {formattedDate}
              </Text>
              {showLeague && leagueName && (
                <Text size="xs" color="text-gray-500" block>{leagueName}</Text>
              )}
            </Stack>
            <Icon icon={ChevronRight} size={5} color="text-gray-500" groupHoverTextColor="text-primary-accent" transition />
          </Stack>
        </Stack>
        <Stack direction="row" align="center" gap={4}>
          <Text size="xs" color="text-gray-500">Started {startPositionLabel}</Text>
          <Text size="xs" color="text-gray-500">•</Text>
          <Text size="xs" color="text-gray-500">
            {incidentsLabel}
          </Text>
          {positionsGainedLabel && (
            <>
              <Text size="xs" color="text-gray-500">•</Text>
              <Text size="xs" color="text-success-green">
                {positionsGainedLabel}
              </Text>
            </>
          )}
        </Stack>
      </Card>
    </Link>
  );
}