towercontrol/components/kanban/SwimlanesBoard.tsx

'use client';

import { Task, TaskStatus } from '@/lib/types';
import { CreateTaskData } from '@/clients/tasks-client';
import { useMemo } from 'react';
import { useTasksContext } from '@/contexts/TasksContext';
import { SwimlanesBase, SwimlaneData } from './SwimlanesBase';

interface SwimlanesboardProps {
  tasks: Task[];
  onCreateTask?: (data: CreateTaskData) => Promise<Task | null>;
  onDeleteTask?: (taskId: string) => Promise<void>;
  onEditTask?: (task: Task) => void;
  onUpdateTitle?: (taskId: string, newTitle: string) => Promise<void>;
  onUpdateStatus?: (taskId: string, newStatus: TaskStatus) => Promise<void>;
  compactView?: boolean;
  visibleStatuses?: TaskStatus[];
  loading?: boolean;
}

export function SwimlanesBoard({ 
  tasks, 
  onCreateTask,
  onDeleteTask, 
  onEditTask, 
  onUpdateTitle, 
  onUpdateStatus, 
  compactView = false,
  visibleStatuses,
  loading = false
}: SwimlanesboardProps) {
  const { tags: availableTags } = useTasksContext();

  // Grouper les tâches par tags et créer les données de swimlanes
  const swimlanesData = useMemo((): SwimlaneData[] => {
    const grouped: { [tagName: string]: Task[] } = {};
    
    // Ajouter une catégorie pour les tâches sans tags
    grouped['Sans tag'] = [];
    
    tasks.forEach(task => {
      if (!task.tags || task.tags.length === 0) {
        grouped['Sans tag'].push(task);
      } else {
        task.tags.forEach(tagName => {
          if (!grouped[tagName]) {
            grouped[tagName] = [];
          }
          grouped[tagName].push(task);
        });
      }
    });
    
    // Convertir en format SwimlaneData et trier
    return Object.entries(grouped)
      .sort(([a, tasksA], [b, tasksB]) => {
        // Mettre "Sans tag" à la fin
        if (a === 'Sans tag') return 1;
        if (b === 'Sans tag') return -1;
        // Trier par nombre de tâches (décroissant)
        return tasksB.length - tasksA.length;
      })
      .map(([tagName, tagTasks]) => {
        // Obtenir la couleur du tag
        const getTagColor = (name: string) => {
          if (name === 'Sans tag') return '#64748b'; // slate-500
          const tag = availableTags.find(t => t.name === name);
          return tag?.color || '#64748b';
        };

        return {
          key: tagName,
          label: tagName,
          color: getTagColor(tagName),
          tasks: tagTasks
        };
      });
  }, [tasks, availableTags]);

  return (
    <SwimlanesBase
      tasks={tasks}
      title="Swimlanes par Tag"
      swimlanes={swimlanesData}
      onCreateTask={onCreateTask}
      onDeleteTask={onDeleteTask}
      onEditTask={onEditTask}
      onUpdateTitle={onUpdateTitle}
      onUpdateStatus={onUpdateStatus}
      compactView={compactView}
      visibleStatuses={visibleStatuses}
      loading={loading}
    />
  );
}