gridpilot.gg/apps/website/components/teams/TeamCard.tsx

'use client';

import Image from 'next/image';
import {
  Users,
  Trophy,
  Award,
  Crown,
  Star,
  TrendingUp,
  Shield,
  ChevronRight,
  UserPlus,
  Zap,
  Clock,
  Globe,
  Languages,
} from 'lucide-react';
import { getImageService } from '@/lib/di-container';

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[];
  onClick?: () => void;
}

function getPerformanceBadge(level?: string) {
  switch (level) {
    case 'pro':
      return { icon: Crown, label: 'Pro', color: 'text-yellow-400', bgColor: 'bg-yellow-500/20 border-yellow-500/30' };
    case 'advanced':
      return { icon: Star, label: 'Advanced', color: 'text-purple-400', bgColor: 'bg-purple-500/20 border-purple-500/30' };
    case 'intermediate':
      return { icon: TrendingUp, label: 'Intermediate', color: 'text-primary-blue', bgColor: 'bg-primary-blue/20 border-primary-blue/30' };
    case 'beginner':
      return { icon: Shield, label: 'Beginner', color: 'text-green-400', bgColor: 'bg-green-500/20 border-green-500/30' };
    default:
      return null;
  }
}

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

export default function TeamCard({
  id,
  name,
  description,
  logo,
  memberCount,
  rating,
  totalWins,
  totalRaces,
  performanceLevel,
  isRecruiting,
  specialization,
  region,
  languages,
  onClick,
}: TeamCardProps) {
  const imageService = getImageService();
  const logoUrl = logo || imageService.getTeamLogo(id);
  const performanceBadge = getPerformanceBadge(performanceLevel);
  const specializationBadge = getSpecializationBadge(specialization);

  return (
    <div
      className="group relative cursor-pointer h-full"
      onClick={onClick}
    >
      {/* Card Container */}
      <div className="relative h-full rounded-xl bg-iron-gray border border-charcoal-outline overflow-hidden transition-all duration-200 hover:border-purple-500/50 hover:shadow-[0_0_30px_rgba(168,85,247,0.15)] hover:bg-iron-gray/80 flex flex-col">
        {/* Header with Logo */}
        <div className="relative p-4 pb-0">
          <div className="flex items-start gap-4">
            {/* Logo */}
            <div className="w-14 h-14 rounded-xl bg-charcoal-outline flex items-center justify-center flex-shrink-0 overflow-hidden border border-charcoal-outline">
              <Image
                src={logoUrl}
                alt={name}
                width={56}
                height={56}
                className="w-full h-full object-cover"
              />
            </div>

            {/* Title & Badges */}
            <div className="flex-1 min-w-0">
              <div className="flex items-start justify-between gap-2">
                <h3 className="text-base font-semibold text-white truncate group-hover:text-purple-400 transition-colors">
                  {name}
                </h3>
                {isRecruiting && (
                  <span className="flex items-center gap-1 px-2 py-0.5 rounded-full text-[10px] font-semibold bg-performance-green/20 text-performance-green border border-performance-green/30 whitespace-nowrap">
                    <UserPlus className="w-3 h-3" />
                    Recruiting
                  </span>
                )}
              </div>
              
              {/* Performance Level */}
              {performanceBadge && (
                <div className="mt-1.5 flex items-center gap-2">
                  <span className={`flex items-center gap-1 px-2 py-0.5 rounded-full text-[10px] font-medium border ${performanceBadge.bgColor}`}>
                    <performanceBadge.icon className={`w-3 h-3 ${performanceBadge.color}`} />
                    <span className={performanceBadge.color}>{performanceBadge.label}</span>
                  </span>
                  {specializationBadge && (
                    <span className="flex items-center gap-1 text-[10px] text-gray-500">
                      <specializationBadge.icon className={`w-3 h-3 ${specializationBadge.color}`} />
                      {specializationBadge.label}
                    </span>
                  )}
                </div>
              )}
            </div>
          </div>
        </div>

        {/* Content */}
        <div className="p-4 flex flex-col flex-1">
          {/* Description */}
          <p className="text-xs text-gray-500 line-clamp-2 mb-3">
            {description || 'No description available'}
          </p>

          {/* Region & Languages */}
          {(region || (languages && languages.length > 0)) && (
            <div className="flex flex-wrap items-center gap-2 mb-3">
              {region && (
                <span className="flex items-center gap-1.5 px-2 py-1 rounded-md text-[10px] bg-charcoal-outline/50 text-gray-400 border border-charcoal-outline/30">
                  <Globe className="w-3 h-3 text-neon-aqua" />
                  {region}
                </span>
              )}
              {languages && languages.length > 0 && (
                <span className="flex items-center gap-1.5 px-2 py-1 rounded-md text-[10px] bg-charcoal-outline/50 text-gray-400 border border-charcoal-outline/30">
                  <Languages className="w-3 h-3 text-purple-400" />
                  {languages.slice(0, 2).join(', ')}
                  {languages.length > 2 && ` +${languages.length - 2}`}
                </span>
              )}
            </div>
          )}

          {/* Stats Grid */}
          <div className="grid grid-cols-3 gap-2 mb-4">
            <div className="text-center p-2 rounded-lg bg-charcoal-outline/30">
              <div className="text-[10px] text-gray-500 mb-0.5">Rating</div>
              <div className="text-sm font-semibold text-primary-blue">
                {typeof rating === 'number' ? Math.round(rating).toLocaleString() : '—'}
              </div>
            </div>
            <div className="text-center p-2 rounded-lg bg-charcoal-outline/30">
              <div className="text-[10px] text-gray-500 mb-0.5">Wins</div>
              <div className="text-sm font-semibold text-performance-green">
                {totalWins ?? 0}
              </div>
            </div>
            <div className="text-center p-2 rounded-lg bg-charcoal-outline/30">
              <div className="text-[10px] text-gray-500 mb-0.5">Races</div>
              <div className="text-sm font-semibold text-white">
                {totalRaces ?? 0}
              </div>
            </div>
          </div>

          {/* Spacer */}
          <div className="flex-1" />

          {/* Footer */}
          <div className="flex items-center justify-between pt-3 border-t border-charcoal-outline/50 mt-auto">
            <div className="flex items-center gap-2 text-[10px] text-gray-500">
              <Users className="w-3 h-3" />
              <span>
                {memberCount} {memberCount === 1 ? 'member' : 'members'}
              </span>
            </div>
            
            {/* View Arrow */}
            <div className="flex items-center gap-1 text-[10px] text-gray-500 group-hover:text-purple-400 transition-colors">
              <span>View</span>
              <ChevronRight className="w-3 h-3 transition-transform group-hover:translate-x-0.5" />
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}