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
          background="column"
          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>
  );
}
