'use client';

import { useMemo } from 'react';
import { Task, TaskStatus } from '@/lib/types';
import { getAllStatuses } from '@/lib/status-config';

interface ColumnVisibilityToggleProps {
  hiddenStatuses: Set<TaskStatus>;
  onToggleStatus: (status: TaskStatus) => void;
  tasks: Task[];
  className?: string;
}

export function ColumnVisibilityToggle({
  hiddenStatuses,
  onToggleStatus,
  tasks,
  className = ""
}: ColumnVisibilityToggleProps) {
  const statuses = getAllStatuses();

  // Calculer les compteurs pour chaque statut
  const statusCounts = useMemo(() => {
    const counts: Record<string, number> = {};
    statuses.forEach(status => {
      counts[status.key] = tasks.filter(task => task.status === status.key).length;
    });
    return counts;
  }, [tasks, statuses]);

  return (
    <div className={`flex items-center gap-2 ${className}`}>
      <span className="text-sm font-mono font-medium text-[var(--muted-foreground)]">
        Colonnes :
      </span>
      {statuses.map(statusConfig => (
        <button
          key={statusConfig.key}
          onClick={() => onToggleStatus(statusConfig.key)}
          className={`px-3 py-1 rounded-lg text-xs font-mono font-medium transition-colors ${
            hiddenStatuses.has(statusConfig.key)
              ? 'bg-[var(--muted)]/20 text-[var(--muted)] hover:bg-[var(--muted)]/30'
              : 'bg-[var(--primary)]/20 text-[var(--primary)] border border-[var(--primary)]/30 hover:bg-[var(--primary)]/30'
          }`}
          title={hiddenStatuses.has(statusConfig.key) ? `Afficher ${statusConfig.label}` : `Masquer ${statusConfig.label}`}
        >
          {hiddenStatuses.has(statusConfig.key) ? '👁️‍🗨️' : '👁️'} {statusConfig.label} ({statusCounts[statusConfig.key] || 0})
        </button>
      ))}
    </div>
  );
}