import { Badge } from '@/ui/Badge';
import { Button } from '@/ui/Button';
import { Icon } from '@/ui/Icon';
import { Input } from '@/ui/Input';
import { Stack } from '@/ui/Stack';
import { Text } from '@/ui/Text';
import { Hash, LucideIcon, Percent, Search, Star, Trophy } from 'lucide-react';

type SkillLevel = 'pro' | 'advanced' | 'intermediate' | 'beginner';
type SortBy = 'rating' | 'wins' | 'winRate' | 'races';

const SKILL_LEVELS: {
  id: SkillLevel;
  label: string;
  variant: 'warning' | 'primary' | 'info' | 'success';
}[] = [
  { id: 'pro', label: 'Pro', variant: 'warning' },
  { id: 'advanced', label: 'Advanced', variant: 'primary' },
  { id: 'intermediate', label: 'Intermediate', variant: 'info' },
  { id: 'beginner', label: 'Beginner', variant: 'success' },
];

const SORT_OPTIONS: { id: SortBy; label: string; icon: LucideIcon }[] = [
  { id: 'rating', label: 'Rating', icon: Star },
  { id: 'wins', label: 'Total Wins', icon: Trophy },
  { id: 'winRate', label: 'Win Rate', icon: Percent },
  { id: 'races', label: 'Races', icon: Hash },
];

interface TeamRankingsFilterProps {
  searchQuery: string;
  onSearchChange: (query: string) => void;
  filterLevel: SkillLevel | 'all';
  onFilterLevelChange: (level: SkillLevel | 'all') => void;
  sortBy: SortBy;
  onSortChange: (sort: SortBy) => void;
}

export function TeamRankingsFilter({
  searchQuery,
  onSearchChange,
  filterLevel,
  onFilterLevelChange,
  sortBy,
  onSortChange,
}: TeamRankingsFilterProps) {
  return (
    <Stack mb={6} gap={4}>
      {/* Search and Level Filter Row */}
      <Stack direction="row" align="center" gap={4} wrap>
        <Stack maxWidth="448px" fullWidth>
          <Input
            type="text"
            placeholder="Search teams..."
            value={searchQuery}
            onChange={(e) => onSearchChange(e.target.value)}
            icon={<Icon icon={Search} size={5} color="text-gray-500" />}
          />
        </Stack>

        {/* Level Filter */}
        <Stack direction="row" align="center" gap={2} wrap>
          <Button
            variant={filterLevel === 'all' ? 'race-final' : 'secondary'}
            size="sm"
            onClick={() => onFilterLevelChange('all')}
          >
            All Levels
          </Button>
          {SKILL_LEVELS.map((level) => {
            const isActive = filterLevel === level.id;
            return (
              <Button
                key={level.id}
                variant={isActive ? 'primary' : 'secondary'}
                size="sm"
                onClick={() => onFilterLevelChange(level.id)}
              >
                {isActive ? (
                  <Badge variant={level.variant}>{level.label}</Badge>
                ) : (
                  level.label
                )}
              </Button>
            );
          })}
        </Stack>
      </Stack>

      {/* Sort Options */}
      <Stack direction="row" align="center" gap={2}>
        <Text size="sm" color="text-gray-400">Sort by:</Text>
        <Stack direction="row" align="center" gap={1} p={1} rounded="lg" border borderColor="charcoal-outline" bg="iron-gray" opacity={0.5}>
          {SORT_OPTIONS.map((option) => {
            const isActive = sortBy === option.id;
            return (
              <Button
                key={option.id}
                variant={isActive ? 'race-final' : 'ghost'}
                size="sm"
                onClick={() => onSortChange(option.id)}
                icon={<Icon icon={option.icon} size={3.5} />}
              >
                {option.label}
              </Button>
            );
          })}
        </Stack>
      </Stack>
    </Stack>
  );
}
