'use client';

import { SkillLevelButton } from '@/components/drivers/SkillLevelButton';
import { TeamHeroStats } from '@/components/teams/TeamHeroStats';
import type { TeamSummaryViewModel } from '@/lib/view-models/TeamSummaryViewModel';
import { Button } from '@/ui/Button';
import { Icon } from '@/ui/Icon';
import { TeamHero } from '@/components/teams/TeamHero';
import { Text } from '@/ui/Text';
import { Stack } from '@/ui/Stack';
import {
    Crown,
    Plus,
    Search,
    Shield,
    Star,
    TrendingUp,
} from 'lucide-react';
import React from 'react';

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

const SKILL_LEVELS = [
  {
    id: 'pro',
    label: 'Pro',
    icon: Crown,
    intent: 'warning' as const,
    color: 'text-warning-amber',
    bgColor: 'bg-warning-amber/10',
    borderColor: 'border-warning-amber/20',
  },
  {
    id: 'advanced',
    label: 'Advanced',
    icon: Star,
    intent: 'primary' as const,
    color: 'text-primary-blue',
    bgColor: 'bg-primary-blue/10',
    borderColor: 'border-primary-blue/20',
  },
  {
    id: 'intermediate',
    label: 'Intermediate',
    icon: TrendingUp,
    intent: 'telemetry' as const,
    color: 'text-telemetry-aqua',
    bgColor: 'bg-telemetry-aqua/10',
    borderColor: 'border-telemetry-aqua/20',
  },
  {
    id: 'beginner',
    label: 'Beginner',
    icon: Shield,
    intent: 'success' as const,
    color: 'text-performance-green',
    bgColor: 'bg-performance-green/10',
    borderColor: 'border-performance-green/20',
  },
] as const;

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 (
    <TeamHero
      title={
        <React.Fragment>
          Find Your
          <Text as="span" variant="primary"> Crew</Text>
        </React.Fragment>
      }
      description="Solo racing is great. Team racing is unforgettable. Join a team that matches your skill level and ambitions."
      stats={
        <TeamHeroStats teamCount={teams.length} recruitingCount={recruitingCount} />
      }
      actions={
        <React.Fragment>
          <Button
            variant="primary"
            onClick={onShowCreateForm}
            icon={<Icon icon={Plus} size={4} />}
          >
            Create Team
          </Button>
          <Button
            variant="secondary"
            onClick={onBrowseTeams}
            icon={<Icon icon={Search} size={4} />}
          >
            Browse Teams
          </Button>
        </React.Fragment>
      }
      sideContent={
        <Stack gap={4}>
          <Text size="xs" variant="low" weight="bold" uppercase>
            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 as SkillLevel)}
                />
              );
            })}
          </Stack>
        </Stack>
      }
    />
  );
}