import { Filter, Search } from 'lucide-react';

import { getPersonalityDirectoryGroupLabel } from '@/business/personality/selectors';
import type { PersonalityDirectoryFilterGroup } from '@/business/personality/types';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { PERSONALITY_DIRECTORY_FILTER_GROUPS } from '@/shared/constants/personality';

interface PersonalityDirectoryFiltersProps {
  readonly searchQuery: string;
  readonly filterGroup: PersonalityDirectoryFilterGroup;
  readonly onSearchChange: (query: string) => void;
  readonly onFilterGroupChange: (group: PersonalityDirectoryFilterGroup) => void;
}

export function PersonalityDirectoryFilters({
  searchQuery,
  filterGroup,
  onSearchChange,
  onFilterGroupChange,
}: PersonalityDirectoryFiltersProps) {
  return (
    <div className="flex flex-col sm:flex-row gap-3">
      <div className="relative flex-1">
        <Search size={14} className="absolute left-3 top-1/2 -translate-y-1/2 text-slate-500" />
        <Input
          type="text"
          placeholder="Search by type code, name, or nickname..."
          value={searchQuery}
          onChange={(event) => onSearchChange(event.target.value)}
          className="w-full pl-9 pr-4 py-2.5 bg-slate-800/60 border border-slate-700/40 rounded-xl text-sm text-white placeholder-slate-500 focus:outline-none focus:border-violet-500/50 focus:ring-1 focus:ring-violet-500/20"
        />
      </div>
      <div className="flex gap-1.5 flex-wrap">
        {PERSONALITY_DIRECTORY_FILTER_GROUPS.map((group) => (
          <Button
            key={group}
            type="button"
            onClick={() => onFilterGroupChange(group)}
            className={`h-auto px-3 py-2 rounded-lg text-xs font-medium transition-all whitespace-nowrap ${
              filterGroup === group
                ? 'bg-violet-500/20 text-violet-400 border border-violet-500/30'
                : 'bg-slate-800/40 text-slate-400 border border-slate-700/30 hover:bg-slate-700/50'
            }`}
          >
            {group === 'all' ? (
              <span className="flex items-center gap-1"><Filter size={12} /> All</span>
            ) : (
              getPersonalityDirectoryGroupLabel(group)
            )}
          </Button>
        ))}
      </div>
    </div>
  );
}
