'use client';

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

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

const SKILL_LEVELS: {
  id: SkillLevel;
  label: string;
  variant: 'warning' | 'primary' | 'default' | 'success';
}[] = [
  { id: 'pro', label: 'Pro', variant: 'warning' },
  { id: 'advanced', label: 'Advanced', variant: 'primary' },
  { id: 'intermediate', label: 'Intermediate', variant: 'default' },
  { 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 TeamFilterProps {
  searchQuery: string;
  onSearchChange: (query: string) => void;
  filterLevel: SkillLevel | 'all';
  onFilterLevelChange: (level: SkillLevel | 'all') => void;
  sortBy: SortBy;
  onSortChange: (sort: SortBy) => void;
}

export function TeamFilter({
  searchQuery,
  onSearchChange,
  filterLevel,
  onFilterLevelChange,
  sortBy,
  onSortChange,
}: TeamFilterProps) {
  return (
    <Group direction="col" align="stretch" gap={4} fullWidth>
      <ControlBar
        leftContent={
          <Input
            type="text"
            placeholder="Search teams..."
            value={searchQuery}
            onChange={(e) => onSearchChange(e.target.value)}
            icon={<Icon icon={Search} size={5} intent="low" />}
            fullWidth
          />
        }
      >
        <ButtonGroup gap={2}>
          <Button
            variant={filterLevel === 'all' ? 'primary' : '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>
            );
          })}
        </ButtonGroup>
      </ControlBar>

      <Group align="center" gap={2}>
        <Text size="sm" variant="low">Sort by:</Text>
        <SegmentedControl
          options={SORT_OPTIONS.map(opt => ({
            id: opt.id,
            label: opt.label,
            icon: <Icon icon={opt.icon} size={3.5} />
          }))}
          activeId={sortBy}
          onChange={(id) => onSortChange(id as SortBy)}
        />
      </Group>
    </Group>
  );
}
