import { useState } from 'react';
import { ChevronRight, Users, Trophy, UserPlus } from 'lucide-react';
import type { TeamSummaryViewModel } from '@/lib/view-models/TeamSummaryViewModel';
import TeamCard from './TeamCard';

type SkillLevel = 'pro' | 'advanced' | 'intermediate' | 'beginner';

interface SkillLevelConfig {
  id: SkillLevel;
  label: string;
  icon: React.ElementType;
  color: string;
  bgColor: string;
  borderColor: string;
  description: string;
}

interface SkillLevelSectionProps {
  level: SkillLevelConfig;
  teams: TeamSummaryViewModel[];
  onTeamClick: (id: string) => void;
  defaultExpanded?: boolean;
}

export default function SkillLevelSection({
  level,
  teams,
  onTeamClick,
  defaultExpanded = false
}: SkillLevelSectionProps) {
  const [isExpanded, setIsExpanded] = useState(defaultExpanded);
  const recruitingTeams = teams.filter((t) => t.isRecruiting);
  const displayedTeams = isExpanded ? teams : teams.slice(0, 3);
  const Icon = level.icon;

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

  return (
    <div className="mb-8">
      {/* Section Header */}
      <div className="flex items-center justify-between mb-4">
        <div className="flex items-center gap-3">
          <div className={`flex h-11 w-11 items-center justify-center rounded-xl ${level.bgColor} border ${level.borderColor}`}>
            <Icon className={`w-5 h-5 ${level.color}`} />
          </div>
          <div>
            <div className="flex items-center gap-2">
              <h2 className="text-xl font-bold text-white">{level.label}</h2>
              <span className="px-2 py-0.5 rounded-full text-xs bg-charcoal-outline/50 text-gray-400">
                {teams.length} {teams.length === 1 ? 'team' : 'teams'}
              </span>
              {recruitingTeams.length > 0 && (
                <span className="flex items-center gap-1 px-2 py-0.5 rounded-full text-xs bg-performance-green/10 text-performance-green border border-performance-green/20">
                  <UserPlus className="w-3 h-3" />
                  {recruitingTeams.length} recruiting
                </span>
              )}
            </div>
            <p className="text-sm text-gray-500">{level.description}</p>
          </div>
        </div>

        {teams.length > 3 && (
          <button
            type="button"
            onClick={() => setIsExpanded(!isExpanded)}
            className="flex items-center gap-1 px-3 py-1.5 rounded-lg text-sm text-gray-400 hover:text-white hover:bg-iron-gray/50 transition-all"
          >
            {isExpanded ? 'Show less' : `View all ${teams.length}`}
            <ChevronRight className={`w-4 h-4 transition-transform ${isExpanded ? 'rotate-90' : ''}`} />
          </button>
        )}
      </div>

      {/* Teams Grid */}
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
        {displayedTeams.map((team) => (
          <TeamCard
            key={team.id}
            id={team.id}
            name={team.name}
            description={team.description ?? ''}
            memberCount={team.memberCount}
            rating={team.rating}
            totalWins={team.totalWins}
            totalRaces={team.totalRaces}
            performanceLevel={team.performanceLevel}
            isRecruiting={team.isRecruiting}
            specialization={team.specialization}
            region={team.region ?? ''}
            languages={team.languages}
            onClick={() => onTeamClick(team.id)}
          />
        ))}
      </div>
    </div>
  );
}