import { Task, TaskStatus } from '@/lib/types';
import { TaskCard } from './TaskCard';
import { QuickAddTask } from './QuickAddTask';
import { Card, CardHeader, CardContent, ColumnHeader, EmptyState, DropZone } from '@/components/ui';
import { CreateTaskData } from '@/clients/tasks-client';
import { useState } from 'react';
import { useDroppable } from '@dnd-kit/core';
import { getStatusConfig, getTechStyle } from '@/lib/status-config';

interface KanbanColumnProps {
  id: TaskStatus;
  tasks: Task[];
  onCreateTask?: (data: CreateTaskData) => Promise<void>;
  onEditTask?: (task: Task) => void;
  compactView?: boolean;
}

export function KanbanColumn({ id, tasks, onCreateTask, onEditTask, compactView = false }: KanbanColumnProps) {
  const [showQuickAdd, setShowQuickAdd] = useState(false);
  
  // Configuration de la zone droppable
  const { setNodeRef, isOver } = useDroppable({
    id: id,
  });

  // Récupération de la config du statut
  const statusConfig = getStatusConfig(id);
  const style = getTechStyle(statusConfig.color);

  return (
    <div className="flex-shrink-0 w-72 md:w-72 lg:w-80 h-full">
      <DropZone ref={setNodeRef} isOver={isOver}>
        <Card variant="column" className="h-full flex flex-col">
          <CardHeader className="pb-4">
            <ColumnHeader
              title={statusConfig.label}
              icon={statusConfig.icon}
              count={tasks.length}
              color={style.accent.replace('text-', '')}
              accentColor={style.accent}
              borderColor={style.border}
              showAddButton={!!onCreateTask}
              onAddClick={() => setShowQuickAdd(true)}
            />
          </CardHeader>

        <CardContent className="flex-1 p-4 h-[calc(100vh-220px)] overflow-y-auto">
          <div className="space-y-3">
            {/* Quick Add Task */}
            {showQuickAdd && onCreateTask && (
              <QuickAddTask
                status={id}
                onSubmit={async (data) => {
                  await onCreateTask(data);
                  // Ne pas fermer automatiquement pour permettre la création en série
                }}
                onCancel={() => setShowQuickAdd(false)}
              />
            )}
            
            {tasks.length === 0 && !showQuickAdd ? (
              <EmptyState
                icon={statusConfig.icon}
                accentColor={style.accent}
                borderColor={style.border}
              />
            ) : (
              tasks.map((task) => (
                <TaskCard key={task.id} task={task} onEdit={onEditTask} compactView={compactView} />
              ))
            )}
          </div>
        </CardContent>
        </Card>
      </DropZone>
    </div>
  );
}
