'use client';

import { useMemo } from 'react';
import { useTasksContext } from '@/contexts/TasksContext';
import { FilterChip } from '@/components/ui';

interface TagFiltersProps {
  selectedTags?: string[];
  onTagToggle: (tagName: string) => void;
}

export function TagFilters({
  selectedTags = [],
  onTagToggle,
}: TagFiltersProps) {
  const { tags: availableTags, regularTasks } = useTasksContext();

  // Calculer les compteurs pour les tags basés sur toutes les tâches
  const tagCounts = useMemo(() => {
    const counts: Record<string, number> = {};
    availableTags.forEach((tag) => {
      counts[tag.name] = regularTasks.filter((task) =>
        task.tags?.includes(tag.name)
      ).length;
    });
    return counts;
  }, [regularTasks, availableTags]);

  // Trier les tags par nombre d'utilisation (décroissant)
  const sortedTags = useMemo(() => {
    return [...availableTags].sort((a, b) => {
      const countA = tagCounts[a.name] || 0;
      const countB = tagCounts[b.name] || 0;
      return countB - countA; // Décroissant
    });
  }, [availableTags, tagCounts]);

  // Montrer tous les tags disponibles (pas seulement ceux avec des tâches visibles)
  const visibleTags = sortedTags;

  if (availableTags.length === 0) {
    return null;
  }

  return (
    <div className="space-y-2">
      <label className="block text-xs font-mono font-medium text-[var(--muted-foreground)] uppercase tracking-wider">
        Tags
      </label>
      {visibleTags.length === 0 ? (
        <div className="text-xs text-[var(--muted-foreground)] italic">
          Aucun tag disponible
        </div>
      ) : (
        <div className="flex flex-wrap gap-1 max-h-32 overflow-y-auto">
          {visibleTags.map((tag) => (
            <FilterChip
              key={tag.id}
              onClick={() => onTagToggle(tag.name)}
              variant={selectedTags.includes(tag.name) ? 'selected' : 'tag'}
              color={tag.color}
              count={tagCounts[tag.name]}
            >
              {tag.name}
            </FilterChip>
          ))}
        </div>
      )}
    </div>
  );
}
