import React from 'react';
import {
  Zap,
  Clock,
  Languages,
  Crown,
  Star,
  TrendingUp,
  Shield
} from 'lucide-react';
import { Box } from '@/ui/Box';
import { Stack } from '@/ui/Stack';
import { Text } from '@/ui/Text';
import { Badge } from '@/ui/Badge';
import { TeamCard as UiTeamCard } from '@/ui/TeamCard';
import { Icon } from '@/ui/Icon';
import { TeamStatItem } from '@/ui/TeamStatItem';

interface TeamCardProps {
  id: string;
  name: string;
  description?: string;
  logo?: string;
  memberCount: number;
  rating?: number | null;
  totalWins?: number;
  totalRaces?: number;
  performanceLevel?: 'beginner' | 'intermediate' | 'advanced' | 'pro';
  isRecruiting?: boolean;
  specialization?: 'endurance' | 'sprint' | 'mixed' | undefined;
  region?: string;
  languages?: string[] | undefined;
  leagues?: string[];
  category?: string;
  onClick?: () => void;
}

function getPerformanceBadge(level?: string) {
  switch (level) {
    case 'pro':
      return { icon: Crown, label: 'Pro', variant: 'warning' as const };
    case 'advanced':
      return { icon: Star, label: 'Advanced', variant: 'primary' as const };
    case 'intermediate':
      return { icon: TrendingUp, label: 'Intermediate', variant: 'info' as const };
    case 'beginner':
      return { icon: Shield, label: 'Beginner', variant: 'success' as const };
    default:
      return null;
  }
}

function getSpecializationBadge(specialization?: string) {
  switch (specialization) {
    case 'endurance':
      return { icon: Clock, label: 'Endurance', color: 'var(--warning-amber)' };
    case 'sprint':
      return { icon: Zap, label: 'Sprint', color: 'var(--neon-aqua)' };
    default:
      return null;
  }
}

export function TeamCard({
  name,
  description,
  logo,
  memberCount,
  rating,
  totalWins,
  totalRaces,
  performanceLevel,
  isRecruiting,
  specialization,
  region,
  languages,
  category,
  onClick,
}: TeamCardProps) {
  const performanceBadge = getPerformanceBadge(performanceLevel);
  const specializationBadge = getSpecializationBadge(specialization);

  return (
    <UiTeamCard
      name={name}
      description={description}
      logo={logo}
      memberCount={memberCount}
      isRecruiting={isRecruiting}
      onClick={onClick}
      region={region}
      performanceBadge={performanceBadge && (
        <Badge variant={performanceBadge.variant} icon={performanceBadge.icon}>
          {performanceBadge.label}
        </Badge>
      )}
      specializationContent={specializationBadge && (
        <Stack direction="row" align="center" gap={1}>
          <Icon icon={specializationBadge.icon} size={3} color={specializationBadge.color} />
          <Text size="xs" color="text-gray-500">{specializationBadge.label}</Text>
        </Stack>
      )}
      categoryBadge={category && (
        <Badge variant="primary">
          <Box w="2" h="2" rounded="full" bg="bg-purple-500" mr={1.5} />
          {category}
        </Badge>
      )}
      languagesContent={languages && languages.length > 0 && (
        <Box 
          display="flex" 
          alignItems="center" 
          gap={1.5} 
          px={2} 
          py={1} 
          rounded="md" 
          bg="bg-iron-gray/50" 
          border 
          borderColor="border-charcoal-outline/30"
        >
          <Icon icon={Languages} size={3} color="var(--neon-purple)" />
          <Text size="xs" color="text-gray-400">
            {languages.slice(0, 2).join(', ')}
            {languages.length > 2 && ` +${languages.length - 2}`}
          </Text>
        </Box>
      )}
      statsContent={
        <>
          <TeamStatItem label="Rating" value={typeof rating === 'number' ? Math.round(rating).toLocaleString() : '—'} color="text-primary-blue" align="center" />
          <TeamStatItem label="Wins" value={totalWins ?? 0} color="text-performance-green" align="center" />
          <TeamStatItem label="Races" value={totalRaces ?? 0} color="text-white" align="center" />
        </>
      }
    />
  );
}