'use client';

import { Task, TaskStatus } from '@/lib/types';
import { KanbanColumn } from './Column';
import { CreateTaskData } from '@/clients/tasks-client';
import { useMemo, useState } from 'react';
import { useColumnVisibility } from '@/hooks/useColumnVisibility';
import { getAllStatuses } from '@/lib/status-config';
import {
  DndContext,
  DragEndEvent,
  DragOverlay,
  DragStartEvent,
  PointerSensor,
  useSensor,
  useSensors,
} from '@dnd-kit/core';
import { TaskCard } from './TaskCard';

interface KanbanBoardProps {
  tasks: Task[];
  onCreateTask?: (data: CreateTaskData) => Promise<void>;
  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[];
}

export function KanbanBoard({ tasks, onCreateTask, onDeleteTask, onEditTask, onUpdateTitle, onUpdateStatus, compactView = false, visibleStatuses }: KanbanBoardProps) {
  const [activeTask, setActiveTask] = useState<Task | null>(null);
  
  // Gestion de la visibilité des colonnes (utilise les props si disponibles)
  const { getVisibleStatuses } = useColumnVisibility();
  
  // Configuration des capteurs pour le drag & drop
  const sensors = useSensors(
    useSensor(PointerSensor, {
      activationConstraint: {
        distance: 8, // Évite les clics accidentels
      },
    })
  );
  // Organiser les tâches par statut
  const tasksByStatus = useMemo(() => {
    const grouped = tasks.reduce((acc, task) => {
      if (!acc[task.status]) {
        acc[task.status] = [];
      }
      acc[task.status].push(task);
      return acc;
    }, {} as Record<TaskStatus, Task[]>);

    return grouped;
  }, [tasks]);

  // Configuration des colonnes basée sur la config centralisée
  const allColumns = useMemo(() => {
    return getAllStatuses().map(statusConfig => ({
      id: statusConfig.key,
      tasks: tasksByStatus[statusConfig.key] || []
    }));
  }, [tasksByStatus]);

  // Filtrer les colonnes visibles
  const visibleColumns = visibleStatuses ? 
    allColumns.filter(column => visibleStatuses.includes(column.id)) :
    getVisibleStatuses(allColumns);


  // Gestion du début du drag
  const handleDragStart = (event: DragStartEvent) => {
    const { active } = event;
    const task = tasks.find(t => t.id === active.id);
    setActiveTask(task || null);
  };

  // Gestion de la fin du drag
  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;
    
    // Trouver la tâche actuelle
    const task = tasks.find(t => t.id === taskId);
    if (!task || task.status === newStatus) return;

    // Mettre à jour le statut
    await onUpdateStatus(taskId, newStatus);
  };

  return (
    <DndContext
      id="kanban-board"
      sensors={sensors}
      onDragStart={handleDragStart}
      onDragEnd={handleDragEnd}
    >
      <div className="h-full flex flex-col bg-[var(--background)]">
        {/* Espacement supérieur */}
        <div className="pt-4"></div>


        {/* Board tech dark */}
        <div className="flex-1 flex gap-6 overflow-x-auto p-6">
          {visibleColumns.map((column) => (
            <KanbanColumn
              key={column.id}
              id={column.id}
              tasks={column.tasks}
              onCreateTask={onCreateTask}
              onDeleteTask={onDeleteTask}
              onEditTask={onEditTask}
              onUpdateTitle={onUpdateTitle}
              compactView={compactView}
            />
          ))}
        </div>

      </div>

      {/* Overlay pour le drag & drop */}
      <DragOverlay>
        {activeTask ? (
          <div className="rotate-3 opacity-90">
            <TaskCard 
              task={activeTask} 
              onDelete={undefined}
              onEdit={undefined}
              onUpdateTitle={undefined}
            />
          </div>
        ) : null}
      </DragOverlay>
    </DndContext>
  );
}