'use client';

import { useState } from 'react';
import { KanbanBoard } from './Board';
import { EditTaskForm } from '@/components/forms/EditTaskForm';
import { useTasksContext } from '@/contexts/TasksContext';
import { Task, TaskStatus } from '@/lib/types';
import { UpdateTaskData } from '@/clients/tasks-client';

export function KanbanBoardContainer() {
  const { tasks, loading, createTask, deleteTask, updateTask, updateTaskOptimistic } = useTasksContext();

  const [editingTask, setEditingTask] = useState<Task | null>(null);

  const handleEditTask = (task: Task) => {
    setEditingTask(task);
  };

  const handleUpdateTask = async (data: UpdateTaskData) => {
    await updateTask(data);
    setEditingTask(null);
  };

  const handleUpdateTitle = async (taskId: string, newTitle: string) => {
    await updateTask({
      taskId,
      title: newTitle
    });
  };

  const handleUpdateStatus = async (taskId: string, newStatus: TaskStatus) => {
    // Utiliser la mise à jour optimiste pour le drag & drop
    await updateTaskOptimistic({
      taskId,
      status: newStatus
    });
  };

  return (
    <>
      <KanbanBoard 
        tasks={tasks}
        onCreateTask={createTask}
        onDeleteTask={deleteTask}
        onEditTask={handleEditTask}
        onUpdateTitle={handleUpdateTitle}
        onUpdateStatus={handleUpdateStatus}
        loading={loading}
      />
      
      <EditTaskForm
        isOpen={!!editingTask}
        onClose={() => setEditingTask(null)}
        onSubmit={handleUpdateTask}
        task={editingTask}
        loading={loading}
      />
    </>
  );
}