'use client';

import React from 'react';
import { Trophy, Star, CheckCircle2 } from 'lucide-react';
import { Card } from '@/ui/Card';
import { Box } from '@/ui/Box';
import { Stack } from '@/ui/Stack';
import { Text } from '@/ui/Text';
import { Heading } from '@/ui/Heading';
import { Badge } from '@/ui/Badge';
import { Icon } from '@/ui/Icon';
import { Surface } from '@/ui/Surface';

interface SponsorTierCardProps {
  type: 'main' | 'secondary';
  available: boolean;
  availableCount?: number;
  totalCount?: number;
  price: number;
  benefits: string[];
  isSelected: boolean;
  onClick: () => void;
}

export function SponsorTierCard({
  type,
  available,
  availableCount,
  totalCount,
  price,
  benefits,
  isSelected,
  onClick,
}: SponsorTierCardProps) {
  const isMain = type === 'main';
  const TierIcon = isMain ? Trophy : Star;
  const iconColor = isMain ? '#facc15' : '#a78bfa';

  return (
    <Surface
      variant="muted"
      rounded="xl"
      border
      padding={5}
      style={{ 
        cursor: available ? 'pointer' : 'default',
        opacity: available ? 1 : 0.6,
        borderColor: isSelected ? '#3b82f6' : '#262626',
        boxShadow: isSelected ? '0 0 0 2px rgba(59, 130, 246, 0.2)' : 'none'
      }}
      onClick={available ? onClick : undefined}
    >
      <Stack direction="row" align="start" justify="between" mb={4}>
        <Box>
          <Stack direction="row" align="center" gap={2} mb={1}>
            <Icon icon={TierIcon} size={5} color={iconColor} />
            <Heading level={3}>{isMain ? 'Main Sponsor' : 'Secondary Sponsor'}</Heading>
          </Stack>
          <Text size="sm" color="text-gray-400">
            {isMain ? 'Primary branding position' : 'Supporting branding position'}
          </Text>
        </Box>
        <Badge variant={available ? 'success' : 'default'}>
          {isMain 
            ? (available ? 'Available' : 'Filled')
            : (available ? `${availableCount}/${totalCount} Available` : 'Full')
          }
        </Badge>
      </Stack>
      
      <Box mb={4}>
        <Text size="3xl" weight="bold" color="text-white">
          ${price}
          <Text size="sm" weight="normal" color="text-gray-500">/season</Text>
        </Text>
      </Box>

      <Stack gap={2} mb={4}>
        {benefits.map((benefit, i) => (
          <Stack key={i} direction="row" align="center" gap={2}>
            <Icon icon={CheckCircle2} size={4} color="#10b981" />
            <Text size="sm" color="text-gray-300">{benefit}</Text>
          </Stack>
        ))}
      </Stack>

      {isSelected && available && (
        <Box style={{ position: 'absolute', top: '1rem', right: '1rem' }}>
          <Surface variant="muted" rounded="full" padding={1} style={{ backgroundColor: '#3b82f6', width: '1rem', height: '1rem', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
            <Icon icon={CheckCircle2} size={3} color="white" />
          </Surface>
        </Box>
      )}
    </Surface>
  );
}
