'use client';

import { Input } from '@/components/ui/Input';
import { Button } from '@/components/ui/Button';
import { Tag } from '@/lib/types';
import { Emoji } from '@/components/ui/Emoji';

interface TagsFiltersProps {
  searchQuery: string;
  onSearchChange: (query: string) => void;
  showOnlyUnused: boolean;
  onToggleUnused: () => void;
  showOnlyWithoutIcons: boolean;
  onToggleWithoutIcons: () => void;
  tags: (Tag & { usage?: number })[];
  onReset: () => void;
}

export function TagsFilters({
  searchQuery,
  onSearchChange,
  showOnlyUnused,
  onToggleUnused,
  showOnlyWithoutIcons,
  onToggleWithoutIcons,
  tags,
  onReset,
}: TagsFiltersProps) {
  const unusedCount = tags.filter((tag) => (tag.usage || 0) === 0).length;
  const withoutIconsCount = tags.filter(
    (tag) => !tag.name.match(/^[\p{Emoji}\p{Symbol}]/u)
  ).length;
  const hasFilters = searchQuery || showOnlyUnused || showOnlyWithoutIcons;

  return (
    <div className="space-y-3 mb-4">
      <Input
        placeholder="Rechercher un tag..."
        value={searchQuery}
        onChange={(e) => onSearchChange(e.target.value)}
        className="w-full"
      />

      {/* Filtres rapides */}
      <div className="flex items-center gap-3">
        <Button
          variant={showOnlyUnused ? 'primary' : 'ghost'}
          size="sm"
          onClick={onToggleUnused}
          className="flex items-center gap-2"
        >
          <Emoji emoji="⚠️" />
          Tags non utilisés ({unusedCount})
        </Button>

        <Button
          variant={showOnlyWithoutIcons ? 'primary' : 'ghost'}
          size="sm"
          onClick={onToggleWithoutIcons}
          className="flex items-center gap-2"
        >
          <Emoji emoji="🚫" />
          Tags sans icônes ({withoutIconsCount})
        </Button>

        {hasFilters && (
          <Button
            variant="ghost"
            size="sm"
            onClick={onReset}
            className="text-[var(--muted-foreground)] hover:text-[var(--foreground)]"
          >
            Réinitialiser
          </Button>
        )}
      </div>
    </div>
  );
}
