'use client';

import { SkillLevelHeader } from '@/components/drivers/SkillLevelHeader';
import { TeamCard } from '@/components/teams/TeamCardWrapper';
import { TeamGrid } from '@/components/teams/TeamGrid';
import { Box } from '@/ui/Box';
import { LucideIcon } from 'lucide-react';
import { useState } from 'react';

type SkillLevel = 'pro' | 'advanced' | 'intermediate' | 'beginner';
type TeamSpecialization = 'endurance' | 'sprint' | 'mixed';

interface SkillLevelConfig {
  id: SkillLevel;
  label: string;
  icon: LucideIcon;
  color: string;
  bgColor: string;
  borderColor: string;
  description: string;
}

interface SkillLevelSectionProps {
  level: SkillLevelConfig;
  teams: Array<{
    id: string;
    name: string;
    description?: string;
    logoUrl?: string;
    memberCount: number;
    ratingLabel: string;
    winsLabel: string;
    racesLabel: string;
    performanceLevel: string;
    isRecruiting: boolean;
    specialization?: string;
    region?: string;
    languages: string[];
    category?: string;
  }>;
  onTeamClick: (id: string) => void;
  defaultExpanded?: boolean;
}

export 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);

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

  const specialization = (teamSpecialization: string | undefined): TeamSpecialization | undefined => {
    if (teamSpecialization === 'endurance' || teamSpecialization === 'sprint' || teamSpecialization === 'mixed') {
      return teamSpecialization;
    }
    return undefined;
  };

  return (
    <Box mb={8}>
      <SkillLevelHeader
        label={level.label}
        icon={level.icon}
        bgColor={level.bgColor}
        borderColor={level.borderColor}
        color={level.color}
        description={level.description}
        teamCount={teams.length}
        recruitingCount={recruitingTeams.length}
        isExpanded={isExpanded}
        onToggle={() => setIsExpanded(!isExpanded)}
        showToggle={teams.length > 3}
      />

      <TeamGrid>
        {displayedTeams.map((team) => (
          <TeamCard
            key={team.id}
            id={team.id}
            name={team.name}
            description={team.description ?? ''}
            logo={team.logoUrl}
            memberCount={team.memberCount}
            ratingLabel={team.ratingLabel}
            winsLabel={team.winsLabel}
            racesLabel={team.racesLabel}
            performanceLevel={team.performanceLevel as SkillLevel}
            isRecruiting={team.isRecruiting}
            specialization={specialization(team.specialization)}
            region={team.region ?? ''}
            languages={team.languages}
            category={team.category}
            onClick={() => onTeamClick(team.id)}
          />
        ))}
      </TeamGrid>
    </Box>
  );
}