import React from 'react';
import { useRouter } from 'next/navigation';
import Image from 'next/image';
import { Users, Crown, Shield, ChevronRight } from 'lucide-react';
import Button from '@/components/ui/Button';
import type { TeamSummaryViewModel } from '@/lib/view-models/TeamSummaryViewModel';
import { getMediaUrl } from '@/lib/utilities/media';

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

const SKILL_LEVELS = [
  { id: 'pro', label: 'Pro', icon: Crown, color: 'text-yellow-400', bgColor: 'bg-yellow-400/10', borderColor: 'border-yellow-400/30' },
  { id: 'advanced', label: 'Advanced', icon: Crown, color: 'text-purple-400', bgColor: 'bg-purple-400/10', borderColor: 'border-purple-400/30' },
  { id: 'intermediate', label: 'Intermediate', icon: Crown, color: 'text-primary-blue', bgColor: 'bg-primary-blue/10', borderColor: 'border-primary-blue/30' },
  { id: 'beginner', label: 'Beginner', icon: Shield, color: 'text-green-400', bgColor: 'bg-green-400/10', borderColor: 'border-green-400/30' },
];

export default function TeamLeaderboardPreview({ teams, onTeamClick }: TeamLeaderboardPreviewProps) {
  const router = useRouter();
  const top5 = [...teams]
    .sort((a, b) => b.memberCount - a.memberCount)
    .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="rounded-xl bg-iron-gray/30 border border-charcoal-outline overflow-hidden">
      {/* Header */}
      <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-purple-500/20 to-purple-500/5 border border-purple-500/20">
            <Users className="w-5 h-5 text-purple-400" />
          </div>
          <div>
            <h3 className="text-lg font-semibold text-white">Team Rankings</h3>
            <p className="text-xs text-gray-500">Top performing racing teams</p>
          </div>
        </div>
        <Button
          variant="secondary"
          onClick={() => router.push('/teams/leaderboard')}
          className="flex items-center gap-2 text-sm"
        >
          View All
          <ChevronRight className="w-4 h-4" />
        </Button>
      </div>

      {/* Leaderboard Rows */}
      <div className="divide-y divide-charcoal-outline/50">
        {top5.map((team, index) => {
          const levelConfig = SKILL_LEVELS.find((l) => l.id === team.performanceLevel);
          const LevelIcon = levelConfig?.icon || Shield;
          const position = index + 1;

          return (
            <button
              key={team.id}
              type="button"
              onClick={() => onTeamClick(team.id)}
              className="flex items-center gap-4 px-5 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>

              {/* Team Logo */}
              <div className="flex h-9 w-9 items-center justify-center rounded-lg bg-charcoal-outline border border-charcoal-outline overflow-hidden">
                <Image
                  src={team.logoUrl || getMediaUrl('team-logo', team.id)}
                  alt={team.name}
                  width={36}
                  height={36}
                  className="w-full h-full object-cover"
                />
              </div>

              {/* Info */}
              <div className="flex-1 min-w-0">
                <p className="text-white font-medium truncate group-hover:text-purple-400 transition-colors">
                  {team.name}
                </p>
                <div className="flex items-center gap-2 text-xs text-gray-500 flex-wrap">
                  {team.category && (
                    <span className="flex items-center gap-1 text-purple-400">
                      <span className="w-1.5 h-1.5 rounded-full bg-purple-400"></span>
                      {team.category}
                    </span>
                  )}
                  <span className="flex items-center gap-1">
                    <Users className="w-3 h-3" />
                    {team.memberCount} members
                  </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-purple-400 font-mono font-semibold">{team.memberCount}</p>
                  <p className="text-[10px] text-gray-500">Members</p>
                </div>
                <div className="text-center">
                  <p className="text-performance-green font-mono font-semibold">{team.totalWins}</p>
                  <p className="text-[10px] text-gray-500">Wins</p>
                </div>
              </div>
            </button>
          );
        })}
      </div>
    </div>
  );
}