import { ChevronRight } from 'lucide-react';
import { ReactNode } from 'react';
import { Box } from './Box';
import { Card } from './Card';
import { Icon } from './Icon';
import { Image } from './Image';
import { Text } from './Text';
import { Stack } from './Stack';
import { Group } from './Group';

export interface LeagueCardProps {
  children: ReactNode;
  onClick?: () => void;
  coverUrl: string;
  logo?: ReactNode;
  badges?: ReactNode;
}

export const LeagueCard = ({ children, onClick, coverUrl, logo, badges }: LeagueCardProps) => {
  return (
    <Card 
      variant="precision" 
      onClick={onClick} 
      fullHeight
      padding="none"
    >
      <Box height="10rem" position="relative" overflow="hidden">
        <Image 
          src={coverUrl} 
          alt="Cover" 
          fullWidth 
          fullHeight 
          objectFit="cover" 
          style={{ opacity: 0.4, filter: 'grayscale(0.2)' }} 
        />
        <Box 
          position="absolute" 
          inset={0} 
          style={{ background: 'linear-gradient(to top, var(--ui-color-bg-base), transparent)' }} 
        />
        <Box position="absolute" top={4} left={4}>
          <Group gap={2}>
            {badges}
          </Group>
        </Box>
        {logo && (
          <Box position="absolute" left={6} bottom={-4} zIndex={10}>
            {logo}
          </Box>
        )}
      </Box>
      <Box padding={6} paddingTop={10} display="flex" flexDirection="col" flex={1}>
        {children}
      </Box>
    </Card>
  );
};

export interface LeagueCardStatsProps {
  label: string;
  value: string;
  percentage: number;
  intent?: 'primary' | 'success' | 'warning' | 'telemetry';
}

export const LeagueCardStats = ({ label, value, percentage, intent = 'primary' }: LeagueCardStatsProps) => {
  const intentColors = {
    primary: 'var(--ui-color-intent-primary)',
    success: 'var(--ui-color-intent-success)',
    warning: 'var(--ui-color-intent-warning)',
    telemetry: 'var(--ui-color-intent-telemetry)',
  };

  return (
    <Box marginBottom={6}>
      <Stack gap={2}>
        <Group justify="between" align="end">
          <Text size="xs" variant="low" weight="bold" uppercase letterSpacing="widest">{label}</Text>
          <Text size="sm" variant="high" font="mono" weight="bold">{value}</Text>
        </Group>
        <Box height="2px" bg="var(--ui-color-bg-surface-muted)" rounded="full" overflow="hidden">
          <Box 
            height="100%" 
            bg={intentColors[intent]} 
            style={{ 
              width: `${Math.min(percentage, 100)}%`,
              boxShadow: `0 0 8px ${intentColors[intent]}44`
            }} 
          />
        </Box>
      </Stack>
    </Box>
  );
};

export interface LeagueCardFooterProps {
  children: ReactNode;
}

export const LeagueCardFooter = ({ children }: LeagueCardFooterProps) => (
  <Box 
    marginTop="auto" 
    paddingTop={4} 
    style={{ borderTop: '1px solid var(--ui-color-border-muted)' }}
  >
    <Group justify="between" align="center">
      <Box flex={1}>
        {children}
      </Box>
      <Group gap={1} align="center">
        <Text size="xs" variant="low" weight="bold" uppercase letterSpacing="widest">ACCESS</Text>
        <Icon icon={ChevronRight} size={3} intent="low" />
      </Group>
    </Group>
  </Box>
);
