towercontrol/components/kanban/SwimlanesBase.tsx

'use client';

import { Task, TaskStatus } from '@/lib/types';
import { TaskCard } from './TaskCard';
import { QuickAddTask } from './QuickAddTask';
import { CreateTaskData } from '@/clients/tasks-client';
import { useState } from 'react';
import { useUserPreferences } from '@/contexts/UserPreferencesContext';
import { useDragAndDrop } from '@/hooks/useDragAndDrop';
import { getAllStatuses } from '@/lib/status-config';
import {
  DndContext,
  DragEndEvent,
  DragOverlay,
  DragStartEvent,
  closestCenter
} from '@dnd-kit/core';
import {
  SortableContext,
  verticalListSortingStrategy,
} from '@dnd-kit/sortable';
import { useDroppable } from '@dnd-kit/core';

// Composant pour les colonnes droppables
function DroppableColumn({ 
  status, 
  tasks, 
  onEditTask, 
  compactView,
  onCreateTask,
  showQuickAdd,
  onToggleQuickAdd,
  swimlaneContext
}: {
  status: TaskStatus;
  tasks: Task[];
  onEditTask?: (task: Task) => void;
  compactView: boolean;
  onCreateTask?: (data: CreateTaskData) => Promise<void>;
  showQuickAdd?: boolean;
  onToggleQuickAdd?: () => void;
  swimlaneContext?: {
    type: 'tag' | 'priority';
    value: string;
  };
}) {
  const { setNodeRef } = useDroppable({
    id: status,
  });

  return (
    <div ref={setNodeRef} className="min-h-[100px] relative group/column">
      <SortableContext items={tasks.map(t => t.id)} strategy={verticalListSortingStrategy}>
        <div className="space-y-3">
          {tasks.map(task => (
            <TaskCard
              key={task.id}
              task={task}
              onEdit={onEditTask}
              compactView={compactView}
            />
          ))}
        </div>
      </SortableContext>
      
      {/* QuickAdd pour cette colonne - hors du flux, apparaît au hover */}
      {onCreateTask && (
        <>
          {showQuickAdd ? (
            <div className="mt-2">
              <QuickAddTask
                status={status}
                onSubmit={onCreateTask}
                onCancel={onToggleQuickAdd || (() => {})}
                swimlaneContext={swimlaneContext}
              />
            </div>
          ) : (
            <div className="h-0 flex justify-center opacity-0 group-hover/column:opacity-100 transition-opacity duration-200 pointer-events-none group-hover/column:pointer-events-auto">
              <button
                onClick={onToggleQuickAdd}
                className="py-1 px-2 transition-colors"
                title="Ajouter une tâche"
              >
                <div className="w-5 h-5 rounded-full bg-[var(--card)] hover:bg-[var(--card-hover)] flex items-center justify-center text-[var(--muted-foreground)] hover:text-[var(--foreground)] transition-all text-sm shadow-lg border border-[var(--border)]/30">
                  +
                </div>
              </button>
            </div>
          )}
        </>
      )}
    </div>
  );
}

// Interface pour une swimlane
export interface SwimlaneData {
  key: string;
  label: string;
  icon?: string;
  color?: string;
  tasks: Task[];
  context?: {
    type: 'tag' | 'priority';
    value: string;
  };
}

interface SwimlanesBaseProps {
  tasks: Task[];
  swimlanes: SwimlaneData[];
  onCreateTask?: (data: CreateTaskData) => Promise<void>;
  onEditTask?: (task: Task) => void;
  onUpdateStatus?: (taskId: string, newStatus: TaskStatus) => Promise<void>;
  compactView?: boolean;
  visibleStatuses?: TaskStatus[];
}

export function SwimlanesBase({ 
  tasks, 
  swimlanes,
  onCreateTask,
  onEditTask, 
  onUpdateStatus, 
  compactView = false,
  visibleStatuses
}: SwimlanesBaseProps) {
  const [activeTask, setActiveTask] = useState<Task | null>(null);
  const [collapsedSwimlanes, setCollapsedSwimlanes] = useState<Set<string>>(new Set());
  const [showQuickAdd, setShowQuickAdd] = useState<{ [key: string]: boolean }>({});
  
  // Gestion de la visibilité des colonnes
  const { isColumnVisible } = useUserPreferences();
  const { isMounted, sensors } = useDragAndDrop();
  const allStatuses = getAllStatuses();
  const statusesToShow = visibleStatuses || 
    allStatuses.filter(status => isColumnVisible(status.key)).map(s => s.key);

  // Handlers pour le drag & drop
  const handleDragStart = (event: DragStartEvent) => {
    const task = tasks.find(t => t.id === event.active.id);
    setActiveTask(task || null);
  };

  const handleDragEnd = async (event: DragEndEvent) => {
    const { active, over } = event;
    setActiveTask(null);

    if (!over || !onUpdateStatus) return;

    const taskId = active.id as string;
    const newStatus = over.id as TaskStatus;
    
    // Vérifier si le statut a changé
    const task = tasks.find(t => t.id === taskId);
    if (task && task.status !== newStatus) {
      await onUpdateStatus(taskId, newStatus);
    }
  };

  // Basculer l'état d'une swimlane
  const toggleSwimlane = (swimlaneKey: string) => {
    const newCollapsed = new Set(collapsedSwimlanes);
    if (newCollapsed.has(swimlaneKey)) {
      newCollapsed.delete(swimlaneKey);
    } else {
      newCollapsed.add(swimlaneKey);
    }
    setCollapsedSwimlanes(newCollapsed);
  };

  // Handlers pour la création de tâches

  const handleQuickAdd = async (data: CreateTaskData, columnId: string) => {
    if (onCreateTask) {
      await onCreateTask(data);
      setShowQuickAdd(prev => ({ ...prev, [columnId]: false }));
    }
  };

  const toggleQuickAdd = (columnId: string) => {
    setShowQuickAdd(prev => ({ ...prev, [columnId]: !prev[columnId] }));
  };

  const content = (
    <div className="flex flex-col h-full bg-[var(--background)]">
      {/* Espacement supérieur */}
      <div className="flex-shrink-0 py-2"></div>


        {/* Headers des colonnes visibles */}
        <div 
          className={`grid gap-4 px-6 py-4 ml-8`}
          style={{ gridTemplateColumns: `repeat(${statusesToShow.length}, minmax(0, 1fr))` }}
        >
          {statusesToShow.map(status => {
            const statusConfig = allStatuses.find(s => s.key === status);
            return (
              <div key={status} className="text-center">
                <h3 className="text-sm font-mono font-bold text-[var(--foreground)] uppercase tracking-wider">
                  {statusConfig?.icon} {statusConfig?.label}
                </h3>
              </div>
            );
          })}
        </div>

        {/* Swimlanes */}
        <div className="flex-1 overflow-y-auto px-6">
          <div className="space-y-3 pb-2">
            {swimlanes.map(swimlane => {
              const isCollapsed = collapsedSwimlanes.has(swimlane.key);
              
              return (
                <div key={swimlane.key} className="border border-[var(--border)]/50 rounded-lg bg-[var(--card-column)]">
                  {/* Header de la swimlane */}
                  <div className="flex items-center p-2 border-b border-[var(--border)]/50">
                    <button
                      onClick={() => toggleSwimlane(swimlane.key)}
                      className="flex items-center gap-2 hover:bg-[var(--card-hover)] rounded p-1 -m-1 transition-colors"
                    >
                      <svg 
                        className={`w-4 h-4 text-[var(--muted-foreground)] transition-transform ${isCollapsed ? '' : 'rotate-90'}`}
                        fill="none" 
                        stroke="currentColor" 
                        viewBox="0 0 24 24"
                      >
                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
                      </svg>
                      {swimlane.color && (
                        <div
                          className="w-3 h-3 rounded-full"
                          style={{ backgroundColor: swimlane.color }}
                        />
                      )}
                      <span className="text-[var(--foreground)] font-medium text-sm">
                        {swimlane.icon && `${swimlane.icon} `}
                        {swimlane.label} ({swimlane.tasks.length})
                      </span>
                    </button>
                  </div>

                  {/* Contenu de la swimlane */}
                  {!isCollapsed && (
                    <div 
                      className={`grid gap-4 p-4`}
                      style={{ gridTemplateColumns: `repeat(${statusesToShow.length}, minmax(0, 1fr))` }}
                    >
                      {statusesToShow.map(status => {
                        const statusTasks = swimlane.tasks.filter(task => task.status === status);
                        
                        const columnId = `${swimlane.key}-${status}`;
                        
                        // Utiliser le contexte défini dans la swimlane
                        const swimlaneContext = swimlane.context;

                        return (
                          <DroppableColumn
                            key={columnId}
                            status={status}
                            tasks={statusTasks}
                            onEditTask={onEditTask}
                            compactView={compactView}
                            onCreateTask={onCreateTask ? (data) => handleQuickAdd(data, columnId) : undefined}
                            showQuickAdd={showQuickAdd[columnId] || false}
                            onToggleQuickAdd={() => toggleQuickAdd(columnId)}
                            swimlaneContext={swimlaneContext}
                          />
                        );
                      })}
                    </div>
                  )}
                </div>
              );
            })}
          </div>
        </div>
      </div>
  );

  if (!isMounted) {
    return content;
  }

  return (
    <DndContext
      sensors={sensors}
      collisionDetection={closestCenter}
      onDragStart={handleDragStart}
      onDragEnd={handleDragEnd}
    >
      {content}
      
      {/* Drag overlay */}
      <DragOverlay>
        {activeTask && (
          <TaskCard
            task={activeTask}
            compactView={compactView}
          />
        )}
      </DragOverlay>
    </DndContext>
  );
}