'use client';

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

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) ? (
            <EyeOff size={14} />
          ) : (
            <Eye size={14} />
          )}{' '}
          {statusConfig.label}
          {statusCounts[statusConfig.key]
            ? ` (${statusCounts[statusConfig.key]})`
            : ''}
        </button>
      ))}
    </div>
  );
}
