'use client';

import Image from 'next/image';
import Card from '../ui/Card';
import { getImageService } from '@/lib/di-container';

interface TeamCardProps {
  id: string;
  name: string;
  logo?: string;
  memberCount: number;
  leagues: string[];
  rating?: number | null;
  totalWins?: number;
  totalRaces?: number;
  performanceLevel?: 'beginner' | 'intermediate' | 'advanced' | 'pro';
  onClick?: () => void;
}

export default function TeamCard({
  id,
  name,
  logo,
  memberCount,
  leagues,
  rating,
  totalWins,
  totalRaces,
  performanceLevel,
  onClick,
}: TeamCardProps) {
  const performanceBadgeColors = {
    beginner: 'bg-green-500/20 text-green-400',
    intermediate: 'bg-blue-500/20 text-blue-400',
    advanced: 'bg-purple-500/20 text-purple-400',
    pro: 'bg-red-500/20 text-red-400',
  };

  return (
    <div
      className="cursor-pointer hover:scale-[1.03] transition-transform duration-150"
      onClick={onClick}
    >
      <Card>
        <div className="space-y-4">
          <div className="flex items-start gap-4">
            <div className="w-16 h-16 bg-charcoal-outline rounded-lg flex items-center justify-center flex-shrink-0 overflow-hidden">
              <Image
                src={logo || getImageService().getTeamLogo(id)}
                alt={name}
                width={64}
                height={64}
                className="w-full h-full object-cover"
              />
            </div>
            <div className="flex-1 min-w-0">
              <h3 className="text-lg font-semibold text-white truncate">
                {name}
              </h3>
              <p className="text-sm text-gray-400">
                {memberCount} {memberCount === 1 ? 'member' : 'members'}
              </p>
              {typeof rating === 'number' && (
                <p className="text-xs text-primary-blue mt-1">
                  Team rating: <span className="font-semibold">{Math.round(rating)}</span>
                </p>
              )}
            </div>
          </div>

          {performanceLevel && (
            <div>
              <span
                className={`inline-block px-3 py-1 rounded-full text-xs font-medium ${
                  performanceBadgeColors[performanceLevel]
                }`}
              >
                {performanceLevel.charAt(0).toUpperCase() + performanceLevel.slice(1)}
              </span>
            </div>
          )}

          <div className="grid grid-cols-3 gap-4 text-center">
            <div>
              <div className="text-sm text-gray-400">Rating</div>
              <div className="text-lg font-semibold text-primary-blue">
                {typeof rating === 'number' ? Math.round(rating) : '—'}
              </div>
            </div>
            <div>
              <div className="text-sm text-gray-400">Wins</div>
              <div className="text-lg font-semibold text-green-400">
                {totalWins ?? 0}
              </div>
            </div>
            <div>
              <div className="text-sm text-gray-400">Races</div>
              <div className="text-lg font-semibold text-white">
                {totalRaces ?? 0}
              </div>
            </div>
          </div>

          <div className="space-y-2">
            <p className="text-sm font-medium text-gray-400">Active in:</p>
            <div className="flex flex-wrap gap-2">
              {leagues.slice(0, 3).map((league, idx) => (
                <span
                  key={idx}
                  className="inline-block px-2 py-1 bg-charcoal-outline text-gray-300 rounded text-xs"
                >
                  {league}
                </span>
              ))}
              {leagues.length > 3 && (
                <span className="inline-block px-2 py-1 bg-charcoal-outline text-gray-400 rounded text-xs">
                  +{leagues.length - 3} more
                </span>
              )}
            </div>
          </div>
        </div>
      </Card>
    </div>
  );
}