'use client';

import { Trophy, Crown, Star, TrendingUp, Shield, Flag } from 'lucide-react';
import Image from 'next/image';
import { mediaConfig } from '@/lib/config/mediaConfig';
import type { DriverLeaderboardItemViewModel } from '@/lib/view-models/DriverLeaderboardItemViewModel';

const SKILL_LEVELS = [
  { id: 'pro', label: 'Pro', icon: Crown, color: 'text-yellow-400', bgColor: 'bg-yellow-400/10', borderColor: 'border-yellow-400/30', description: 'Elite competition level' },
  { id: 'advanced', label: 'Advanced', icon: Star, color: 'text-purple-400', bgColor: 'bg-purple-400/10', borderColor: 'border-purple-400/30', description: 'Highly competitive' },
  { id: 'intermediate', label: 'Intermediate', icon: TrendingUp, color: 'text-primary-blue', bgColor: 'bg-primary-blue/10', borderColor: 'border-primary-blue/30', description: 'Developing skills' },
  { id: 'beginner', label: 'Beginner', icon: Shield, color: 'text-green-400', bgColor: 'bg-green-400/10', borderColor: 'border-green-400/30', description: 'Learning the ropes' },
];

const CATEGORIES = [
  { id: 'beginner', label: 'Beginner', color: 'text-green-400', bgColor: 'bg-green-400/10', borderColor: 'border-green-400/30' },
  { id: 'intermediate', label: 'Intermediate', color: 'text-primary-blue', bgColor: 'bg-primary-blue/10', borderColor: 'border-primary-blue/30' },
  { id: 'advanced', label: 'Advanced', color: 'text-purple-400', bgColor: 'bg-purple-400/10', borderColor: 'border-purple-400/30' },
  { id: 'pro', label: 'Pro', color: 'text-yellow-400', bgColor: 'bg-yellow-400/10', borderColor: 'border-yellow-400/30' },
  { id: 'endurance', label: 'Endurance', color: 'text-orange-400', bgColor: 'bg-orange-400/10', borderColor: 'border-orange-400/30' },
  { id: 'sprint', label: 'Sprint', color: 'text-red-400', bgColor: 'bg-red-400/10', borderColor: 'border-red-400/30' },
];

interface FeaturedDriverCardProps {
  driver: DriverLeaderboardItemViewModel;
  position: number;
  onClick: () => void;
}

export function FeaturedDriverCard({ driver, position, onClick }: FeaturedDriverCardProps) {
  const levelConfig = SKILL_LEVELS.find((l) => l.id === driver.skillLevel);
  const categoryConfig = CATEGORIES.find((c) => c.id === driver.category);

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

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

  return (
    <button
      type="button"
      onClick={onClick}
      className={`p-5 rounded-xl bg-iron-gray/60 border-2 ${getBorderColor(position)} transition-all duration-200 text-left group hover:scale-[1.02]`}
    >
      {/* Header with Position */}
      <div className="flex items-start justify-between mb-4">
        <div className={`flex h-10 w-10 items-center justify-center rounded-full ${position <= 3 ? 'bg-gradient-to-br from-yellow-400/20 to-amber-600/10' : 'bg-iron-gray'}`}>
          {position <= 3 ? (
            <Crown className={`w-5 h-5 ${getMedalColor(position)}`} />
          ) : (
            <span className="text-lg font-bold text-gray-400">#{position}</span>
          )}
        </div>
        <div className="flex gap-2">
          {categoryConfig && (
            <span className={`px-2 py-1 rounded-full text-[10px] font-medium ${categoryConfig.bgColor} ${categoryConfig.color} border ${categoryConfig.borderColor}`}>
              {categoryConfig.label}
            </span>
          )}
          <span className={`px-2 py-1 rounded-full text-[10px] font-medium ${levelConfig?.bgColor} ${levelConfig?.color} border ${levelConfig?.borderColor}`}>
            {levelConfig?.label}
          </span>
        </div>
      </div>

      {/* Avatar & Name */}
      <div className="flex items-center gap-4 mb-4">
        <div className="relative w-16 h-16 rounded-full overflow-hidden border-2 border-charcoal-outline group-hover:border-primary-blue transition-colors">
          <Image src={driver.avatarUrl || mediaConfig.avatars.defaultFallback} alt={driver.name} fill className="object-cover" />
        </div>
        <div>
          <h3 className="text-lg font-semibold text-white group-hover:text-primary-blue transition-colors">
            {driver.name}
          </h3>
          <div className="flex items-center gap-2 text-sm text-gray-500">
            <Flag className="w-3.5 h-3.5" />
            {driver.nationality}
          </div>
        </div>
      </div>

      {/* Stats */}
      <div className="grid grid-cols-3 gap-3">
        <div className="text-center p-2 rounded-lg bg-charcoal-outline/30">
          <p className="text-lg font-bold text-primary-blue">{driver.rating.toLocaleString()}</p>
          <p className="text-[10px] text-gray-500">Rating</p>
        </div>
        <div className="text-center p-2 rounded-lg bg-charcoal-outline/30">
          <p className="text-lg font-bold text-performance-green">{driver.wins}</p>
          <p className="text-[10px] text-gray-500">Wins</p>
        </div>
        <div className="text-center p-2 rounded-lg bg-charcoal-outline/30">
          <p className="text-lg font-bold text-warning-amber">{driver.podiums}</p>
          <p className="text-[10px] text-gray-500">Podiums</p>
        </div>
      </div>
    </button>
  );
}