import type { TeamSummaryViewModel } from '@/lib/view-models/TeamSummaryViewModel';
import { Button } from '@/ui/Button';
import { Icon } from '@/ui/Icon';
import { SkillLevelButton } from '@/ui/SkillLevelButton';
import { Stack } from '@/ui/Stack';
import { TeamHeroSection as UiTeamHeroSection } from '@/ui/TeamHeroSection';
import { TeamHeroStats } from '@/ui/TeamHeroStats';
import { Text } from '@/ui/Text';
import {
    Crown,
    LucideIcon,
    Plus,
    Search,
    Shield,
    Star,
    TrendingUp,
} from 'lucide-react';

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

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

const SKILL_LEVELS: SkillLevelConfig[] = [
  {
    id: 'pro',
    label: 'Pro',
    icon: Crown,
    color: 'text-warning-amber',
    bgColor: 'bg-yellow-400/10',
    borderColor: 'border-yellow-400/30',
    description: 'Elite competition, sponsored teams',
  },
  {
    id: 'advanced',
    label: 'Advanced',
    icon: Star,
    color: 'text-purple-400',
    bgColor: 'bg-purple-900/10',
    borderColor: 'border-purple-900/30',
    description: 'Competitive racing, high consistency',
  },
  {
    id: 'intermediate',
    label: 'Intermediate',
    icon: TrendingUp,
    color: 'text-primary-blue',
    bgColor: 'bg-blue-900/10',
    borderColor: 'border-blue-900/30',
    description: 'Growing skills, regular practice',
  },
  {
    id: 'beginner',
    label: 'Beginner',
    icon: Shield,
    color: 'text-performance-green',
    bgColor: 'bg-green-900/10',
    borderColor: 'border-green-900/30',
    description: 'Learning the basics, friendly environment',
  },
];

interface TeamHeroSectionProps {
  teams: TeamSummaryViewModel[];
  teamsByLevel: Record<string, TeamSummaryViewModel[]>;
  recruitingCount: number;
  onShowCreateForm: () => void;
  onBrowseTeams: () => void;
  onSkillLevelClick: (level: SkillLevel) => void;
}

export function TeamHeroSection({
  teams,
  teamsByLevel,
  recruitingCount,
  onShowCreateForm,
  onBrowseTeams,
  onSkillLevelClick,
}: TeamHeroSectionProps) {
  return (
    <UiTeamHeroSection
      title={
        <>
          Find Your
          <Text color="text-purple-400"> Crew</Text>
        </>
      }
      description="Solo racing is great. Team racing is unforgettable. Join a team that matches your skill level and ambitions."
      statsContent={
        <TeamHeroStats teamCount={teams.length} recruitingCount={recruitingCount} />
      }
      actionsContent={
        <>
          <Button
            variant="primary"
            onClick={onShowCreateForm}
            icon={<Icon icon={Plus} size={4} />}
            bg="bg-purple-600"
          >
            Create Team
          </Button>
          <Button
            variant="secondary"
            onClick={onBrowseTeams}
            icon={<Icon icon={Search} size={4} />}
          >
            Browse Teams
          </Button>
        </>
      }
      sideContent={
        <>
          <Text size="xs" color="text-gray-500" weight="medium" block mb={3} uppercase letterSpacing="0.05em">
            Find Your Level
          </Text>
          <Stack gap={2}>
            {SKILL_LEVELS.map((level) => {
              const count = teamsByLevel[level.id]?.length || 0;

              return (
                <SkillLevelButton
                  key={level.id}
                  label={level.label}
                  icon={level.icon}
                  color={level.color}
                  bgColor={level.bgColor}
                  borderColor={level.borderColor}
                  count={count}
                  onClick={() => onSkillLevelClick(level.id)}
                />
              );
            })}
          </Stack>
        </>
      }
    />
  );
}