import React from 'react';
import { Trophy, Crown, Flag, ChevronRight } from 'lucide-react';
import Button from '@/ui/Button';
import Image from 'next/image';
import { SkillLevelDisplay } from '@/lib/display-objects/SkillLevelDisplay';
import { MedalDisplay } from '@/lib/display-objects/MedalDisplay';
import { RatingDisplay } from '@/lib/display-objects/RatingDisplay';

interface DriverLeaderboardPreviewProps {
  drivers: {
    id: string;
    name: string;
    rating: number;
    skillLevel: string;
    nationality: string;
    wins: number;
    rank: number;
    avatarUrl: string;
    position: number;
  }[];
  onDriverClick: (id: string) => void;
  onNavigateToDrivers: () => void;
}

export function DriverLeaderboardPreview({ drivers, onDriverClick, onNavigateToDrivers }: DriverLeaderboardPreviewProps) {
  const top10 = drivers; // Already sliced in builder

  return (
    <div className="rounded-xl bg-iron-gray/30 border border-charcoal-outline overflow-hidden">
      <div className="flex items-center justify-between px-5 py-4 border-b border-charcoal-outline bg-iron-gray/20">
        <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-primary-blue/20 to-primary-blue/5 border border-primary-blue/20">
            <Trophy className="w-5 h-5 text-primary-blue" />
          </div>
          <div>
            <h3 className="text-lg font-semibold text-white">Driver Rankings</h3>
            <p className="text-xs text-gray-500">Top performers across all leagues</p>
          </div>
        </div>
        <Button
          variant="secondary"
          onClick={onNavigateToDrivers}
          className="flex items-center gap-2 text-sm"
        >
          View All
          <ChevronRight className="w-4 h-4" />
        </Button>
      </div>

      <div className="divide-y divide-charcoal-outline/50">
        {top10.map((driver, index) => {
          const position = index + 1;

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

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

              <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}
                  <span className={SkillLevelDisplay.getColor(driver.skillLevel)}>{SkillLevelDisplay.getLabel(driver.skillLevel)}</span>
                </div>
              </div>

              <div className="flex items-center gap-4 text-sm">
                <div className="text-center">
                  <p className="text-primary-blue font-mono font-semibold">{RatingDisplay.format(driver.rating)}</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>
  );
}