'use client';

import React from 'react';
import { Calendar, Clock, Car, Trophy, Zap, ChevronRight, PlayCircle, CheckCircle2, XCircle } from 'lucide-react';
import { Box } from '@/ui/Box';
import { Stack } from '@/ui/Stack';
import { Text } from '@/ui/Text';
import { Link } from '@/ui/Link';
import { Icon } from '@/ui/Icon';
import { Surface } from '@/ui/Surface';

interface Race {
  id: string;
  track: string;
  car: string;
  scheduledAt: string;
  status: 'scheduled' | 'running' | 'completed' | 'cancelled';
  sessionType: string;
  leagueId?: string;
  leagueName?: string;
  strengthOfField?: number | null;
}

interface RaceListItemProps {
  race: Race;
  onClick: (id: string) => void;
}

export function RaceListItem({ race, onClick }: RaceListItemProps) {
  const statusConfig = {
    scheduled: {
      icon: Clock,
      color: '#3b82f6',
      bg: 'rgba(59, 130, 246, 0.1)',
      border: 'rgba(59, 130, 246, 0.3)',
      label: 'Scheduled',
    },
    running: {
      icon: PlayCircle,
      color: '#10b981',
      bg: 'rgba(16, 185, 129, 0.1)',
      border: 'rgba(16, 185, 129, 0.3)',
      label: 'LIVE',
    },
    completed: {
      icon: CheckCircle2,
      color: '#9ca3af',
      bg: 'rgba(156, 163, 175, 0.1)',
      border: 'rgba(156, 163, 175, 0.3)',
      label: 'Completed',
    },
    cancelled: {
      icon: XCircle,
      color: '#ef4444',
      bg: 'rgba(239, 68, 68, 0.1)',
      border: 'rgba(239, 68, 68, 0.3)',
      label: 'Cancelled',
    },
  };

  const config = statusConfig[race.status];
  const StatusIcon = config.icon;

  const formatTime = (date: string) => {
    return new Date(date).toLocaleTimeString('en-US', {
      hour: '2-digit',
      minute: '2-digit',
    });
  };

  return (
    <Surface
      variant="muted"
      rounded="xl"
      border
      padding={4}
      style={{ 
        cursor: 'pointer',
        borderColor: config.border,
        position: 'relative',
        overflow: 'hidden'
      }}
      onClick={() => onClick(race.id)}
    >
      {race.status === 'running' && (
        <Box style={{ position: 'absolute', top: 0, left: 0, right: 0, height: '0.25rem', background: 'linear-gradient(to right, #10b981, rgba(16, 185, 129, 0.5), #10b981)' }} className="animate-pulse" />
      )}

      <Stack direction="row" align="center" gap={4}>
        {/* Date Column */}
        <Box style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', minWidth: '5rem', textAlign: 'center' }}>
          <Text size="xs" color="text-gray-500" style={{ textTransform: 'uppercase' }}>
            {new Date(race.scheduledAt).toLocaleDateString('en-US', { month: 'short' })}
          </Text>
          <Text size="2xl" weight="bold" color="text-white">
            {new Date(race.scheduledAt).getDate()}
          </Text>
          <Text size="xs" color="text-gray-500">
            {formatTime(race.scheduledAt)}
          </Text>
        </Box>

        {/* Divider */}
        <Box style={{ width: '1px', height: '4rem', backgroundColor: '#262626' }} />

        {/* Main Content */}
        <Box style={{ flex: 1, minWidth: 0 }}>
          <Text weight="semibold" color="text-white" block truncate>{race.track}</Text>
          <Stack direction="row" align="center" gap={4} mt={1} wrap>
            <Stack direction="row" align="center" gap={1.5}>
              <Icon icon={Car} size={3.5} color="#9ca3af" />
              <Text size="sm" color="text-gray-400">{race.car}</Text>
            </Stack>
            {race.strengthOfField && (
              <Stack direction="row" align="center" gap={1.5}>
                <Icon icon={Zap} size={3.5} color="#f59e0b" />
                <Text size="sm" color="text-warning-amber">SOF {race.strengthOfField}</Text>
              </Stack>
            )}
          </Stack>
          {race.leagueName && (
            <Box mt={2}>
              <Link href={`/leagues/${race.leagueId}`} onClick={(e) => e.stopPropagation()}>
                <Stack direction="row" align="center" gap={1.5}>
                  <Icon icon={Trophy} size={3.5} color="#3b82f6" />
                  <Text size="sm" color="text-primary-blue">{race.leagueName}</Text>
                </Stack>
              </Link>
            </Box>
          )}
        </Box>

        {/* Status Badge */}
        <Surface variant="muted" rounded="full" border padding={1} style={{ backgroundColor: config.bg, borderColor: config.border, paddingLeft: '0.75rem', paddingRight: '0.75rem' }}>
          <Stack direction="row" align="center" gap={1.5}>
            <Icon icon={StatusIcon} size={3.5} color={config.color} />
            <Text size="xs" weight="medium" style={{ color: config.color }}>{config.label}</Text>
          </Stack>
        </Surface>

        <Icon icon={ChevronRight} size={5} color="#525252" />
      </Stack>
    </Surface>
  );
}