'use client';

import React from 'react';
import {
  Users,
  ChevronRight,
  UserPlus,
  Zap,
  Clock,
  Globe,
  Languages,
  Crown,
  Star,
  TrendingUp,
  Shield
} 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 { Image } from '@/ui/Image';
import PlaceholderImage from '@/ui/PlaceholderImage';

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: '#f97316' };
    case 'sprint':
      return { icon: Zap, label: 'Sprint', color: '#00f2ff' };
    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 (
    <Box onClick={onClick} style={{ height: '100%', cursor: 'pointer' }}>
      <Card style={{ height: '100%', padding: 0, display: 'flex', flexDirection: 'column', overflow: 'hidden' }}>
        {/* Header with Logo */}
        <Box style={{ padding: '1rem', paddingBottom: 0 }}>
          <Stack direction="row" align="start" gap={4}>
            {/* Logo */}
            <Box style={{ width: '3.5rem', height: '3.5rem', borderRadius: '0.75rem', backgroundColor: '#262626', display: 'flex', alignItems: 'center', justifyContent: 'center', overflow: 'hidden', border: '1px solid #262626' }}>
              {logo ? (
                <Image
                  src={logo}
                  alt={name}
                  width={56}
                  height={56}
                  style={{ width: '100%', height: '100%', objectFit: 'cover' }}
                />
              ) : (
                <PlaceholderImage size={56} />
              )}
            </Box>

            {/* Title & Badges */}
            <Box style={{ flex: 1, minWidth: 0 }}>
              <Stack direction="row" align="start" justify="between" gap={2}>
                <Heading level={3} style={{ fontSize: '1rem', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
                  {name}
                </Heading>
                {isRecruiting && (
                  <Badge variant="success">
                    <UserPlus style={{ width: '0.75rem', height: '0.75rem' }} />
                    Recruiting
                  </Badge>
                )}
              </Stack>
              
              {/* Performance Level & Category */}
              <Stack direction="row" align="center" gap={2} wrap style={{ marginTop: '0.375rem' }}>
                {performanceBadge && (
                  <Badge variant={performanceBadge.variant}>
                    <performanceBadge.icon style={{ width: '0.75rem', height: '0.75rem' }} />
                    {performanceBadge.label}
                  </Badge>
                )}
                {specializationBadge && (
                  <Stack direction="row" align="center" gap={1}>
                    <specializationBadge.icon style={{ width: '0.75rem', height: '0.75rem', color: specializationBadge.color }} />
                    <Text size="xs" color="text-gray-500">{specializationBadge.label}</Text>
                  </Stack>
                )}
                {category && (
                  <Badge variant="primary">
                    <Box style={{ width: '0.5rem', height: '0.5rem', borderRadius: '9999px', backgroundColor: '#a855f7' }} />
                    {category}
                  </Badge>
                )}
              </Stack>
            </Box>
          </Stack>
        </Box>

        {/* Content */}
        <Box style={{ padding: '1rem', display: 'flex', flexDirection: 'column', flex: 1 }}>
          {/* Description */}
          <Text size="xs" color="text-gray-500" style={{ marginBottom: '0.75rem', display: '-webkit-box', WebkitLineClamp: 2, WebkitBoxOrient: 'vertical', overflow: 'hidden' }}>
            {description || 'No description available'}
          </Text>

          {/* Region & Languages */}
          {(region || (languages && languages.length > 0)) && (
            <Stack direction="row" align="center" gap={2} wrap style={{ marginBottom: '0.75rem' }}>
              {region && (
                <Box style={{ display: 'flex', alignItems: 'center', gap: '0.375rem', padding: '0.25rem 0.5rem', borderRadius: '0.375rem', backgroundColor: 'rgba(38, 38, 38, 0.5)', border: '1px solid rgba(38, 38, 38, 0.3)' }}>
                  <Globe style={{ width: '0.75rem', height: '0.75rem', color: '#00f2ff' }} />
                  <Text size="xs" color="text-gray-400">{region}</Text>
                </Box>
              )}
              {languages && languages.length > 0 && (
                <Box style={{ display: 'flex', alignItems: 'center', gap: '0.375rem', padding: '0.25rem 0.5rem', borderRadius: '0.375rem', backgroundColor: 'rgba(38, 38, 38, 0.5)', border: '1px solid rgba(38, 38, 38, 0.3)' }}>
                  <Languages style={{ width: '0.75rem', height: '0.75rem', color: '#a855f7' }} />
                  <Text size="xs" color="text-gray-400">
                    {languages.slice(0, 2).join(', ')}
                    {languages.length > 2 && ` +${languages.length - 2}`}
                  </Text>
                </Box>
              )}
            </Stack>
          )}

          {/* Stats Grid */}
          <Box style={{ display: 'grid', gridTemplateColumns: 'repeat(3, minmax(0, 1fr))', gap: '0.5rem', marginBottom: '1rem' }}>
            <StatItem label="Rating" value={typeof rating === 'number' ? Math.round(rating).toLocaleString() : '—'} color="#3b82f6" />
            <StatItem label="Wins" value={totalWins ?? 0} color="#10b981" />
            <StatItem label="Races" value={totalRaces ?? 0} color="white" />
          </Box>

          {/* Spacer */}
          <Box style={{ flex: 1 }} />

          {/* Footer */}
          <Box style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', paddingTop: '0.75rem', borderTop: '1px solid rgba(38, 38, 38, 0.5)', marginTop: 'auto' }}>
            <Stack direction="row" align="center" gap={2}>
              <Users style={{ width: '0.75rem', height: '0.75rem', color: '#737373' }} />
              <Text size="xs" color="text-gray-500">
                {memberCount} {memberCount === 1 ? 'member' : 'members'}
              </Text>
            </Stack>
            
            <Stack direction="row" align="center" gap={1}>
              <Text size="xs" color="text-gray-500">View</Text>
              <ChevronRight style={{ width: '0.75rem', height: '0.75rem', color: '#737373' }} />
            </Stack>
          </Box>
        </Box>
      </Card>
    </Box>
  );
}

function StatItem({ label, value, color }: { label: string, value: string | number, color: string }) {
  return (
    <Box style={{ textAlign: 'center', padding: '0.5rem', borderRadius: '0.5rem', backgroundColor: 'rgba(38, 38, 38, 0.3)' }}>
      <Text size="xs" color="text-gray-500" style={{ display: 'block', marginBottom: '0.125rem' }}>{label}</Text>
      <Text size="sm" weight="semibold" style={{ color }}>{value}</Text>
    </Box>
  );
}