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

import Image from 'next/image';
import { Trophy, Crown, Users } from 'lucide-react';
import type { TeamSummaryViewModel } from '@/lib/view-models/TeamSummaryViewModel';
import { getMediaUrl } from '@/lib/utilities/media';

const SKILL_LEVELS: {
  id: string;
  icon: React.ElementType;
  color: string;
  bgColor: string;
  borderColor: string;
}[] = [
  {
    id: 'pro',
    icon: () => null,
    color: 'text-yellow-400',
    bgColor: 'bg-yellow-400/10',
    borderColor: 'border-yellow-400/30',
  },
  {
    id: 'advanced',
    icon: () => null,
    color: 'text-purple-400',
    bgColor: 'bg-purple-400/10',
    borderColor: 'border-purple-400/30',
  },
  {
    id: 'intermediate',
    icon: () => null,
    color: 'text-primary-blue',
    bgColor: 'bg-primary-blue/10',
    borderColor: 'border-primary-blue/30',
  },
  {
    id: 'beginner',
    icon: () => null,
    color: 'text-green-400',
    bgColor: 'bg-green-400/10',
    borderColor: 'border-green-400/30',
  },
];

interface TopThreePodiumProps {
  teams: TeamSummaryViewModel[];
  onClick: (id: string) => void;
}

export default function TopThreePodium({ teams, onClick }: TopThreePodiumProps) {
  const top3 = teams.slice(0, 3) as [TeamSummaryViewModel, TeamSummaryViewModel, TeamSummaryViewModel];
  if (teams.length < 3) return null;

  // Display order: 2nd, 1st, 3rd
  const podiumOrder: [TeamSummaryViewModel, TeamSummaryViewModel, TeamSummaryViewModel] = [
    top3[1],
    top3[0],
    top3[2],
  ];
  const podiumHeights = ['h-28', 'h-36', 'h-20'];
  const podiumPositions = [2, 1, 3];

  const getPositionColor = (position: number) => {
    switch (position) {
      case 1:
        return 'text-yellow-400';
      case 2:
        return 'text-gray-300';
      case 3:
        return 'text-amber-600';
      default:
        return 'text-gray-500';
    }
  };

  const getGradient = (position: number) => {
    switch (position) {
      case 1:
        return 'from-yellow-400/30 via-yellow-500/20 to-yellow-600/10';
      case 2:
        return 'from-gray-300/30 via-gray-400/20 to-gray-500/10';
      case 3:
        return 'from-amber-500/30 via-amber-600/20 to-amber-700/10';
      default:
        return 'from-gray-600/30 to-gray-700/10';
    }
  };

  const getBorderColor = (position: number) => {
    switch (position) {
      case 1:
        return 'border-yellow-400/50';
      case 2:
        return 'border-gray-300/50';
      case 3:
        return 'border-amber-600/50';
      default:
        return 'border-charcoal-outline';
    }
  };

  return (
    <div className="mb-10 p-8 rounded-2xl bg-gradient-to-br from-iron-gray/60 to-iron-gray/30 border border-charcoal-outline">
      <div className="flex items-center justify-center gap-2 mb-8">
        <Trophy className="w-6 h-6 text-yellow-400" />
        <h2 className="text-xl font-bold text-white">Top 3 Teams</h2>
      </div>

      <div className="flex items-end justify-center gap-4 md:gap-8">
        {podiumOrder.map((team, index) => {
          const position = podiumPositions[index] ?? 0;
          const levelConfig = SKILL_LEVELS.find((l) => l.id === team.performanceLevel);

          return (
            <button
              key={team.id}
              type="button"
              onClick={() => onClick(team.id)}
              className="flex flex-col items-center group"
            >
              {/* Team card */}
              <div
                className={`relative mb-4 p-4 rounded-xl bg-gradient-to-br ${getGradient(position ?? 0)} border ${getBorderColor(position ?? 0)} transition-all group-hover:scale-105 group-hover:shadow-lg`}
              >
                {/* Crown for 1st place */}
                {position === 1 && (
                  <div className="absolute -top-4 left-1/2 -translate-x-1/2">
                    <div className="relative">
                      <Crown className="w-8 h-8 text-yellow-400 animate-pulse" />
                      <div className="absolute inset-0 w-8 h-8 bg-yellow-400/30 blur-md rounded-full" />
                    </div>
                  </div>
                )}

                {/* Team logo */}
                <div className="flex h-16 w-16 md:h-20 md:w-20 items-center justify-center rounded-xl bg-charcoal-outline border border-charcoal-outline overflow-hidden mb-3">
                  <Image
                    src={team.logoUrl || getMediaUrl('team-logo', team.id)}
                    alt={team.name}
                    width={80}
                    height={80}
                    className="w-full h-full object-cover"
                  />
                </div>

                {/* Team name */}
                <p className="text-white font-bold text-sm md:text-base text-center max-w-[120px] truncate group-hover:text-purple-400 transition-colors">
                  {team.name}
                </p>

                {/* Category */}
                {team.category && (
                  <p className="text-xs text-purple-400 text-center mt-1">
                    {team.category}
                  </p>
                )}

                {/* Rating */}
                <p className={`text-lg md:text-xl font-mono font-bold ${getPositionColor(position)} text-center`}>
                  {'—'}
                </p>

                {/* Stats row */}
                <div className="flex items-center justify-center gap-3 mt-2 text-xs text-gray-400">
                  <span className="flex items-center gap-1">
                    <Trophy className="w-3 h-3 text-performance-green" />
                    {team.totalWins}
                  </span>
                  <span className="flex items-center gap-1">
                    <Users className="w-3 h-3 text-purple-400" />
                    {team.memberCount}
                  </span>
                </div>
              </div>

              {/* Podium stand */}
              <div
                className={`${podiumHeights[index]} w-20 md:w-28 rounded-t-lg bg-gradient-to-t ${getGradient(position)} border-t border-x ${getBorderColor(position)} flex items-start justify-center pt-3`}
              >
                <span className={`text-2xl md:text-3xl font-bold ${getPositionColor(position)}`}>
                  {position}
                </span>
              </div>
            </button>
          );
        })}
      </div>
    </div>
  );
}