'use client';

import { Heading } from '@/ui/Heading';
import { Icon } from '@/ui/Icon';
import { Image } from '@/ui/Image';
import { PlaceholderImage } from '@/ui/PlaceholderImage';
import { Text } from '@/ui/Text';
import { Box } from '@/ui/Box';
import { Group } from '@/ui/Group';
import { Surface } from '@/ui/Surface';
import { LeagueCard as UILeagueCard, LeagueCardStats, LeagueCardFooter } from '@/ui/LeagueCard';
import { Calendar as LucideCalendar } from 'lucide-react';
import React, { ReactNode } from 'react';

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,
  timingSummary,
  onClick,
}: LeagueCardProps) {
  return (
    <UILeagueCard
      onClick={onClick}
      coverUrl={coverUrl}
      logo={
        <Surface 
          width="3rem" 
          height="3rem" 
          rounded="md" 
          overflow="hidden" 
          border 
          variant="dark"
        >
          {logoUrl ? (
            <Image
              src={logoUrl}
              alt={`${name} logo`}
              width={48}
              height={48}
              objectFit="cover"
            />
          ) : (
            <PlaceholderImage size={48} />
          )}
        </Surface>
      }
      badges={
        <React.Fragment>
          {badges}
          {championshipBadge}
        </React.Fragment>
      }
    >
      <Box marginBottom={1}>
        <Group gap={2}>
          <Box width="0.25rem" height="1rem" bg="var(--ui-color-intent-primary)" />
          <Heading level={3} weight="bold" truncate>{name}</Heading>
        </Group>
      </Box>
      
      <Text size="xs" variant="low" lineClamp={2} style={{ height: '2.5rem' }} block leading="relaxed" marginBottom={4}>
        {description || 'No description available'}
      </Text>

      <LeagueCardStats
        label={slotLabel}
        value={`${usedSlots}/${maxSlots || '∞'}`}
        percentage={fillPercentage}
        intent={fillPercentage >= 90 ? 'warning' : fillPercentage >= 70 ? 'primary' : 'success'}
      />

      {hasOpenSlots && (
        <Box marginBottom={4}>
          <Surface 
            display="flex" 
            alignItems="center" 
            gap={1.5} 
            paddingX={2} 
            paddingY={1} 
            bg="rgba(25, 140, 255, 0.05)" 
            border="1px solid rgba(25, 140, 255, 0.2)" 
            rounded="sm" 
            width="fit-content"
          >
            <Box width="0.375rem" height="0.375rem" rounded="full" bg="var(--ui-color-intent-primary)" />
            <Text size="xs" variant="primary" weight="bold" uppercase>{openSlotsCount} OPEN</Text>
          </Surface>
        </Box>
      )}

      <LeagueCardFooter>
        {timingSummary && (
          <Group gap={2}>
            <Icon icon={LucideCalendar} size={3} intent="low" />
            <Text size="xs" variant="low" font="mono">
              {timingSummary.split('•')[1]?.trim() || timingSummary}
            </Text>
          </Group>
        )}
      </LeagueCardFooter>
    </UILeagueCard>
  );
}