gridpilot.gg/apps/website/components/drivers/LeaderboardPreview.tsx

'use client';

import { useRouter } from 'next/navigation';
import { Award, Crown, Flag, ChevronRight } from 'lucide-react';
import Image from 'next/image';
import Button from '@/components/ui/Button';
import { mediaConfig } from '@/lib/config/mediaConfig';
import type { DriverLeaderboardItemViewModel } from '@/lib/view-models/DriverLeaderboardItemViewModel';

const SKILL_LEVELS = [
  { id: 'pro', label: 'Pro', color: 'text-yellow-400' },
  { id: 'advanced', label: 'Advanced', color: 'text-purple-400' },
  { id: 'intermediate', label: 'Intermediate', color: 'text-primary-blue' },
  { id: 'beginner', label: 'Beginner', color: 'text-green-400' },
];

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

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

export function LeaderboardPreview({ drivers, onDriverClick }: LeaderboardPreviewProps) {
  const router = useRouter();
  const top5 = drivers.slice(0, 5);

  const getMedalColor = (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 getMedalBg = (position: number) => {
    switch (position) {
      case 1: return 'bg-yellow-400/10 border-yellow-400/30';
      case 2: return 'bg-gray-300/10 border-gray-300/30';
      case 3: return 'bg-amber-600/10 border-amber-600/30';
      default: return 'bg-iron-gray/50 border-charcoal-outline';
    }
  };

  return (
    <div className="mb-10">
      <div className="flex items-center justify-between mb-4">
        <div className="flex items-center gap-3">
          <div className="flex h-10 w-10 items-center justify-center rounded-xl bg-gradient-to-br from-yellow-400/20 to-amber-600/10 border border-yellow-400/30">
            <Award className="w-5 h-5 text-yellow-400" />
          </div>
          <div>
            <h2 className="text-lg font-semibold text-white">Top Drivers</h2>
            <p className="text-xs text-gray-500">Highest rated competitors</p>
          </div>
        </div>

        <Button
          variant="secondary"
          onClick={() => router.push('/leaderboards/drivers')}
          className="flex items-center gap-2 text-sm"
        >
          Full Rankings
          <ChevronRight className="w-4 h-4" />
        </Button>
      </div>

      <div className="rounded-xl bg-iron-gray/30 border border-charcoal-outline overflow-hidden">
        <div className="divide-y divide-charcoal-outline/50">
          {top5.map((driver, index) => {
            const levelConfig = SKILL_LEVELS.find((l) => l.id === driver.skillLevel);
            const categoryConfig = CATEGORIES.find((c) => c.id === driver.category);
            const position = index + 1;

            return (
              <button
                key={driver.id}
                type="button"
                onClick={() => onDriverClick(driver.id)}
                className="flex items-center gap-4 px-4 py-3 w-full text-left hover:bg-iron-gray/30 transition-colors group"
              >
                {/* Position */}
                <div className={`flex h-8 w-8 items-center justify-center rounded-full text-xs font-bold border ${getMedalBg(position)} ${getMedalColor(position)}`}>
                  {position <= 3 ? <Crown className="w-3.5 h-3.5" /> : position}
                </div>

                {/* Avatar */}
                <div className="relative w-9 h-9 rounded-full overflow-hidden border-2 border-charcoal-outline">
                  <Image src={driver.avatarUrl || mediaConfig.avatars.defaultFallback} alt={driver.name} fill className="object-cover" />
                </div>

                {/* Info */}
                <div className="flex-1 min-w-0">
                  <p className="text-white font-medium truncate group-hover:text-primary-blue transition-colors">
                    {driver.name}
                  </p>
                  <div className="flex items-center gap-2 text-xs text-gray-500">
                    <Flag className="w-3 h-3" />
                    {driver.nationality}
                    {categoryConfig && (
                      <span className={categoryConfig.color}>{categoryConfig.label}</span>
                    )}
                    <span className={levelConfig?.color}>{levelConfig?.label}</span>
                  </div>
                </div>

                {/* Stats */}
                <div className="flex items-center gap-4 text-sm">
                  <div className="text-center">
                    <p className="text-primary-blue font-mono font-semibold">{driver.rating.toLocaleString()}</p>
                    <p className="text-[10px] text-gray-500">Rating</p>
                  </div>
                  <div className="text-center">
                    <p className="text-performance-green font-mono font-semibold">{driver.wins}</p>
                    <p className="text-[10px] text-gray-500">Wins</p>
                  </div>
                </div>
              </button>
            );
          })}
        </div>
      </div>
    </div>
  );
}