import { ReactNode } from 'react';
import { Box } from './Box';
import { Heading } from './Heading';
import { Icon } from './Icon';
import { Text } from './Text';

interface LeagueCardProps {
  name: string;
  description?: string;
  coverUrl: string;
  logoUrl?: string;
  badges?: ReactNode;
  championshipBadge?: ReactNode;
  slotLabel: string;
  usedSlots: number;
  maxSlots: number | string;
  fillPercentage: number;
  hasOpenSlots: boolean;
  openSlotsCount: number;
  isTeamLeague?: boolean;
  usedDriverSlots?: number;
  maxDrivers?: number | string;
  timingSummary?: string;
  onClick?: () => void;
}

export function LeagueCard({
  name,
  description,
  coverUrl,
  logoUrl,
  badges,
  championshipBadge,
  slotLabel,
  usedSlots,
  maxSlots,
  fillPercentage,
  hasOpenSlots,
  openSlotsCount,
  isTeamLeague,
  usedDriverSlots,
  maxDrivers,
  timingSummary,
  onClick,
}: LeagueCardProps) {
  return (
    <Box
      position="relative"
      cursor={onClick ? 'pointer' : 'default'}
      h="full"
      onClick={onClick}
      className="group"
    >
      {/* Card Container */}
      <Box 
        position="relative" 
        h="full" 
        rounded="xl" 
        bg="bg-iron-gray" 
        border 
        borderColor="border-charcoal-outline" 
        overflow="hidden" 
        transition 
        className="hover:border-primary-blue/50 hover:shadow-[0_0_30px_rgba(25,140,255,0.15)] hover:bg-iron-gray/80"
      >
        {/* Cover Image */}
        <Box position="relative" h="32" overflow="hidden">
          <img
            src={coverUrl}
            alt={`${name} cover`}
            className="absolute inset-0 h-full w-full object-cover transition-transform duration-300 group-hover:scale-105"
            loading="lazy"
            decoding="async"
          />
          {/* Gradient Overlay */}
          <Box position="absolute" inset="0" bg="bg-gradient-to-t from-iron-gray via-iron-gray/60 to-transparent" />
          
          {/* Badges - Top Left */}
          <Box position="absolute" top="3" left="3" display="flex" alignItems="center" gap={2}>
            {badges}
          </Box>

          {/* Championship Type Badge - Top Right */}
          <Box position="absolute" top="3" right="3">
            {championshipBadge}
          </Box>

          {/* Logo */}
          <Box position="absolute" left="4" bottom="-6" zIndex={10}>
            <Box w="12" h="12" rounded="lg" overflow="hidden" border borderColor="border-iron-gray" bg="bg-deep-graphite" shadow="xl">
              {logoUrl ? (
                <img
                  src={logoUrl}
                  alt={`${name} logo`}
                  width={48}
                  height={48}
                  className="h-full w-full object-cover"
                  loading="lazy"
                  decoding="async"
                />
              ) : (
                <PlaceholderImage size={48} />
              )}
            </Box>
          </Box>
        </Box>

        {/* Content */}
        <Box pt={8} px={4} pb={4} display="flex" flexDirection="col" fullHeight>
          {/* Title & Description */}
          <Heading level={3} className="line-clamp-1 group-hover:text-primary-blue transition-colors" mb={1}>
            {name}
          </Heading>
          <Text size="xs" color="text-gray-500" lineClamp={2} mb={3} style={{ height: '2rem' }} block>
            {description || 'No description available'}
          </Text>

          {/* Stats Row */}
          <Box display="flex" alignItems="center" gap={3} mb={3}>
            {/* Primary Slots (Drivers/Teams/Nations) */}
            <Box flexGrow={1}>
              <Box display="flex" alignItems="center" justifyContent="between" mb={1}>
                <Text size="xs" color="text-gray-500">{slotLabel}</Text>
                <Text size="xs" color="text-gray-400">
                  {usedSlots}/{maxSlots || '∞'}
                </Text>
              </Box>
              <Box h="1.5" rounded="full" bg="bg-charcoal-outline" overflow="hidden">
                <Box
                  h="full"
                  rounded="full"
                  transition
                  bg={
                    fillPercentage >= 90
                      ? 'bg-warning-amber'
                      : fillPercentage >= 70
                      ? 'bg-primary-blue'
                      : 'bg-performance-green'
                  }
                  style={{ width: `${Math.min(fillPercentage, 100)}%` }}
                />
              </Box>
            </Box>

            {/* Open Slots Badge */}
            {hasOpenSlots && (
              <Box display="flex" alignItems="center" gap={1} px={2} py={1} rounded="lg" bg="bg-neon-aqua/10" border borderColor="border-neon-aqua/20">
                <Box w="1.5" h="1.5" rounded="full" bg="bg-neon-aqua" animate="pulse" />
                <Text size="xs" color="text-neon-aqua" weight="medium">
                  {openSlotsCount} open
                </Text>
              </Box>
            )}
          </Box>

          {/* Driver count for team leagues */}
          {isTeamLeague && (
            <Box display="flex" alignItems="center" gap={2} mb={3}>
              <Icon icon={LucideUsers} size={3} color="text-gray-500" />
              <Text size="xs" color="text-gray-500">
                {usedDriverSlots ?? 0}/{maxDrivers ?? '∞'} drivers
              </Text>
            </Box>
          )}

          {/* Spacer to push footer to bottom */}
          <Box flexGrow={1} />

          {/* Footer Info */}
          <Box display="flex" alignItems="center" justifyContent="between" pt={3} borderTop style={{ borderColor: 'rgba(38, 38, 38, 0.5)' }} mt="auto">
            <Box display="flex" alignItems="center" gap={3}>
              {timingSummary && (
                <Box display="flex" alignItems="center" gap={1}>
                  <Icon icon={LucideCalendar} size={3} color="text-gray-500" />
                  <Text size="xs" color="text-gray-500">
                    {timingSummary.split('•')[1]?.trim() || timingSummary}
                  </Text>
                </Box>
              )}
            </Box>
            
            {/* View Arrow */}
            <Box display="flex" alignItems="center" gap={1} className="group-hover:text-primary-blue transition-colors">
              <Text size="xs" color="text-gray-500">View</Text>
              <Icon icon={LucideChevronRight} size={3} color="text-gray-500" className="transition-transform group-hover:translate-x-0.5" />
            </Box>
          </Box>
        </Box>
      </Box>
    </Box>
  );
}

import { Calendar as LucideCalendar, ChevronRight as LucideChevronRight, Users as LucideUsers } from 'lucide-react';