'use client';

import React from 'react';
import { Calendar, Clock, ChevronRight } from 'lucide-react';
import { Box } from '@/ui/Box';
import { Stack } from '@/ui/Stack';
import { Text } from '@/ui/Text';
import { Heading } from '@/ui/Heading';
import { Button } from '@/ui/Button';
import { Link } from '@/ui/Link';
import { Surface } from '@/ui/Surface';

interface NextRaceCardProps {
  nextRace: {
    id: string;
    track: string;
    car: string;
    formattedDate: string;
    formattedTime: string;
    timeUntil: string;
    isMyLeague: boolean;
  };
}

export function NextRaceCard({ nextRace }: NextRaceCardProps) {
  return (
    <Surface variant="muted" rounded="xl" border padding={6} style={{ position: 'relative', overflow: 'hidden', background: 'linear-gradient(to bottom right, #262626, rgba(38, 38, 38, 0.8))', borderColor: 'rgba(59, 130, 246, 0.3)' }}>
      <Box style={{ position: 'absolute', top: 0, right: 0, width: '10rem', height: '10rem', background: 'linear-gradient(to bottom left, rgba(59, 130, 246, 0.2), transparent)', borderBottomLeftRadius: '9999px' }} />
      <Box style={{ position: 'relative' }}>
        <Stack direction="row" align="center" gap={2} mb={4}>
          <Surface variant="muted" rounded="full" padding={1} style={{ backgroundColor: 'rgba(59, 130, 246, 0.2)', border: '1px solid rgba(59, 130, 246, 0.3)', paddingLeft: '0.75rem', paddingRight: '0.75rem' }}>
            <Text size="xs" weight="semibold" color="text-primary-blue" style={{ textTransform: 'uppercase', letterSpacing: '0.05em' }}>Next Race</Text>
          </Surface>
          {nextRace.isMyLeague && (
            <Surface variant="muted" rounded="full" padding={1} style={{ backgroundColor: 'rgba(16, 185, 129, 0.2)', color: '#10b981', paddingLeft: '0.5rem', paddingRight: '0.5rem' }}>
              <Text size="xs" weight="medium">Your League</Text>
            </Surface>
          )}
        </Stack>
       
        <Stack direction="row" align="end" justify="between" wrap gap={4}>
          <Box>
            <Heading level={2} style={{ fontSize: '1.5rem', marginBottom: '0.5rem' }}>{nextRace.track}</Heading>
            <Text color="text-gray-400" block mb={3}>{nextRace.car}</Text>
            <Stack direction="row" align="center" gap={4}>
              <Stack direction="row" align="center" gap={1.5}>
                <Calendar style={{ width: '1rem', height: '1rem', color: '#6b7280' }} />
                <Text size="sm" color="text-gray-400">{nextRace.formattedDate}</Text>
              </Stack>
              <Stack direction="row" align="center" gap={1.5}>
                <Clock style={{ width: '1rem', height: '1rem', color: '#6b7280' }} />
                <Text size="sm" color="text-gray-400">{nextRace.formattedTime}</Text>
              </Stack>
            </Stack>
          </Box>
         
          <Stack align="end" gap={3}>
            <Box style={{ textAlign: 'right' }}>
              <Text size="xs" color="text-gray-500" style={{ textTransform: 'uppercase', letterSpacing: '0.05em' }} block mb={1}>Starts in</Text>
              <Text size="3xl" weight="bold" color="text-primary-blue" font="mono">{nextRace.timeUntil}</Text>
            </Box>
            <Box>
              <Link href={`/races/${nextRace.id}`} variant="ghost">
                <Button variant="primary" icon={<ChevronRight style={{ width: '1rem', height: '1rem' }} />}>
                  View Details
                </Button>
              </Link>
            </Box>
          </Stack>
        </Stack>
      </Box>
    </Surface>
  );
}