'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 { 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={
        <div style={{ width: '3rem', height: '3rem', borderRadius: '0.5rem', overflow: 'hidden', border: '1px solid var(--ui-color-border-default)', backgroundColor: 'var(--ui-color-bg-base)' }}>
          {logoUrl ? (
            <Image
              src={logoUrl}
              alt={`${name} logo`}
              width={48}
              height={48}
              objectFit="cover"
            />
          ) : (
            <PlaceholderImage size={48} />
          )}
        </div>
      }
      badges={
        <React.Fragment>
          {badges}
          {championshipBadge}
        </React.Fragment>
      }
    >
      <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', marginBottom: '0.25rem' }}>
        <div style={{ width: '0.25rem', height: '1rem', backgroundColor: 'var(--ui-color-intent-primary)' }} />
        <Heading level={3} weight="bold" truncate>{name}</Heading>
      </div>
      
      <Text size="xs" variant="low" lineClamp={2} style={{ height: '2.5rem', marginBottom: '1rem' }} block leading="relaxed">
        {description || 'No description available'}
      </Text>

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

      {hasOpenSlots && (
        <div style={{ display: 'flex', alignItems: 'center', gap: '0.375rem', padding: '0.25rem 0.5rem', backgroundColor: 'rgba(25, 140, 255, 0.05)', border: '1px solid rgba(25, 140, 255, 0.2)', borderRadius: 'var(--ui-radius-sm)', width: 'fit-content', marginBottom: '1rem' }}>
          <div style={{ width: '0.375rem', height: '0.375rem', borderRadius: '9999px', backgroundColor: 'var(--ui-color-intent-primary)' }} />
          <Text size="xs" variant="primary" weight="bold" uppercase>{openSlotsCount} OPEN</Text>
        </div>
      )}

      <LeagueCardFooter>
        {timingSummary && (
          <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
            <Icon icon={LucideCalendar} size={3} intent="low" />
            <Text size="xs" variant="low" font="mono">
              {timingSummary.split('•')[1]?.trim() || timingSummary}
            </Text>
          </div>
        )}
      </LeagueCardFooter>
    </UILeagueCard>
  );
}
