import Image from 'next/image';
import { UserPlus, Users, Trophy } from 'lucide-react';
import type { TeamSummaryViewModel } from '@/lib/view-models/TeamSummaryViewModel';
import { getMediaUrl } from '@/lib/utilities/media';

const SKILL_LEVELS: {
  id: string;
  label: string;
  icon: React.ElementType;
  color: string;
  bgColor: string;
  borderColor: string;
}[] = [
  {
    id: 'pro',
    label: 'Pro',
    icon: () => null, // We'll import Crown if needed
    color: 'text-yellow-400',
    bgColor: 'bg-yellow-400/10',
    borderColor: 'border-yellow-400/30',
  },
  {
    id: 'advanced',
    label: 'Advanced',
    icon: () => null,
    color: 'text-purple-400',
    bgColor: 'bg-purple-400/10',
    borderColor: 'border-purple-400/30',
  },
  {
    id: 'intermediate',
    label: 'Intermediate',
    icon: () => null,
    color: 'text-primary-blue',
    bgColor: 'bg-primary-blue/10',
    borderColor: 'border-primary-blue/30',
  },
  {
    id: 'beginner',
    label: 'Beginner',
    icon: () => null,
    color: 'text-green-400',
    bgColor: 'bg-green-400/10',
    borderColor: 'border-green-400/30',
  },
];

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

export default function FeaturedRecruiting({ teams, onTeamClick }: FeaturedRecruitingProps) {
  const recruitingTeams = teams.filter((t) => t.isRecruiting).slice(0, 4);

  if (recruitingTeams.length === 0) return null;

  return (
    <div className="mb-10">
      <div className="flex items-center gap-3 mb-4">
        <div className="flex h-10 w-10 items-center justify-center rounded-xl bg-performance-green/10 border border-performance-green/20">
          <UserPlus className="w-5 h-5 text-performance-green" />
        </div>
        <div>
          <h2 className="text-lg font-semibold text-white">Looking for Drivers</h2>
          <p className="text-xs text-gray-500">Teams actively recruiting new members</p>
        </div>
      </div>

      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
        {recruitingTeams.map((team) => {
          const levelConfig = SKILL_LEVELS.find((l) => l.id === team.performanceLevel);

          return (
            <button
              key={team.id}
              type="button"
              onClick={() => onTeamClick(team.id)}
              className="p-4 rounded-xl bg-iron-gray/60 border border-charcoal-outline hover:border-performance-green/40 transition-all duration-200 text-left group"
            >
              <div className="flex items-start justify-between mb-3">
                <div className="flex h-8 w-8 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={32}
                    height={32}
                    className="w-full h-full object-cover"
                  />
                </div>
                <span className="flex items-center gap-1 px-2 py-0.5 rounded-full text-[10px] bg-performance-green/10 text-performance-green border border-performance-green/20">
                  <div className="w-1.5 h-1.5 rounded-full bg-performance-green animate-pulse" />
                  Recruiting
                </span>
              </div>

              <h3 className="text-white font-semibold mb-1 group-hover:text-performance-green transition-colors line-clamp-1">
                {team.name}
              </h3>
              <p className="text-xs text-gray-500 line-clamp-2 mb-3">{team.description}</p>

              <div className="flex items-center gap-2 text-xs text-gray-400 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}
                </span>
                <span className="flex items-center gap-1">
                  <Trophy className="w-3 h-3" />
                  {team.totalWins} wins
                </span>
              </div>
            </button>
          );
        })}
      </div>
    </div>
  );
}