import React from 'react';
import { Trophy, Medal, Crown } from 'lucide-react';
import Image from 'next/image';
import type { DriverLeaderboardItemViewModel } from '@/lib/view-models/DriverLeaderboardItemViewModel';

interface DriverTopThreePodiumProps {
  drivers: DriverLeaderboardItemViewModel[];
  onDriverClick: (id: string) => void;
}

export default function DriverTopThreePodium({ drivers, onDriverClick }: DriverTopThreePodiumProps) {
  if (drivers.length < 3) return null;

  const top3 = drivers.slice(0, 3) as [DriverLeaderboardItemViewModel, DriverLeaderboardItemViewModel, DriverLeaderboardItemViewModel];

  const podiumOrder: [DriverLeaderboardItemViewModel, DriverLeaderboardItemViewModel, DriverLeaderboardItemViewModel] = [
    top3[1],
    top3[0],
    top3[2],
  ]; // 2nd, 1st, 3rd
  const podiumHeights = ['h-32', 'h-40', 'h-24'];
  const podiumColors = [
    'from-gray-400/20 to-gray-500/10 border-gray-400/40',
    'from-yellow-400/20 to-amber-500/10 border-yellow-400/40',
    'from-amber-600/20 to-amber-700/10 border-amber-600/40',
  ];
  const crownColors = ['text-gray-300', 'text-yellow-400', 'text-amber-600'];
  const positions = [2, 1, 3];

  return (
    <div className="mb-10">
      <div className="flex items-end justify-center gap-4 lg:gap-8">
        {podiumOrder.map((driver, index) => {
          const position = positions[index];

          return (
            <button
              key={driver.id}
              type="button"
              onClick={() => onDriverClick(driver.id)}
              className="flex flex-col items-center group"
            >
              {/* Driver Avatar & Info */}
              <div className="relative mb-4">
                {/* Crown for 1st place */}
                {position === 1 && (
                  <div className="absolute -top-6 left-1/2 -translate-x-1/2 animate-bounce">
                    <Crown className="w-8 h-8 text-yellow-400 drop-shadow-[0_0_10px_rgba(250,204,21,0.5)]" />
                  </div>
                )}

                {/* Avatar */}
                <div className={`relative ${position === 1 ? 'w-24 h-24 lg:w-28 lg:h-28' : 'w-20 h-20 lg:w-24 lg:h-24'} rounded-full overflow-hidden border-4 ${position === 1 ? 'border-yellow-400 shadow-[0_0_30px_rgba(250,204,21,0.3)]' : position === 2 ? 'border-gray-300' : 'border-amber-600'} group-hover:scale-105 transition-transform`}>
                  <Image
                    src={driver.avatarUrl}
                    alt={driver.name}
                    fill
                    className="object-cover"
                  />
                </div>

                {/* Position badge */}
                <div className={`absolute -bottom-2 left-1/2 -translate-x-1/2 w-8 h-8 rounded-full flex items-center justify-center text-sm font-bold bg-gradient-to-br ${podiumColors[index]} border-2 ${crownColors[index]}`}>
                  {position}
                </div>
              </div>

              {/* Driver Name */}
              <p className={`text-white font-semibold ${position === 1 ? 'text-lg' : 'text-base'} group-hover:text-primary-blue transition-colors mb-1`}>
                {driver.name}
              </p>

              {/* Rating */}
              <p className={`font-mono font-bold ${position === 1 ? 'text-xl text-yellow-400' : 'text-lg text-primary-blue'}`}>
                {driver.rating.toLocaleString()}
              </p>

              {/* Stats */}
              <div className="flex items-center gap-2 text-xs text-gray-500 mt-1">
                <span className="flex items-center gap-1">
                  <Trophy className="w-3 h-3 text-performance-green" />
                  {driver.wins}
                </span>
                <span>•</span>
                <span className="flex items-center gap-1">
                  <Medal className="w-3 h-3 text-warning-amber" />
                  {driver.podiums}
                </span>
              </div>

              {/* Podium Stand */}
              <div className={`mt-4 w-28 lg:w-36 ${podiumHeights[index]} rounded-t-lg bg-gradient-to-t ${podiumColors[index]} border-t border-x flex items-end justify-center pb-4`}>
                <span className={`text-4xl lg:text-5xl font-black ${crownColors[index]}`}>
                  {position}
                </span>
              </div>
            </button>
          );
        })}
      </div>
    </div>
  );
}