import type {
  Etape,
  KanbanColumn as KanbanColumnType,
  KanbanTask,
  TaskStatus,
} from "@xtablo/shared-types";
import { Button } from "@xtablo/ui/components/button";
import { Plus } from "lucide-react";
import { InlineTaskCreate } from "./InlineTaskCreate";
import { KanbanTaskCard } from "./KanbanTaskCard";
import type { TabloMember } from "./types";

interface KanbanColumnProps {
  column: KanbanColumnType;
  members: TabloMember[];
  etapes: Etape[];
  onTaskClick: (task: KanbanTask) => void;
  onAddTask: (status: KanbanColumnType["status"]) => void;
  onAddTaskInline: (task: {
    title: string;
    description: string;
    assignee_id?: string;
    status: TaskStatus;
    parent_task_id?: string | null;
  }) => void;
  onDragStart: (e: React.DragEvent, task: KanbanTask) => void;
  onDragOver: (e: React.DragEvent) => void;
  onDrop: (e: React.DragEvent, targetStatus: KanbanColumnType["status"]) => void;
}

export const KanbanColumn = ({
  column,
  members,
  etapes,
  onTaskClick,
  onAddTask,
  onAddTaskInline,
  onDragStart,
  onDragOver,
  onDrop,
}: KanbanColumnProps) => {
  return (
    <div className="flex flex-col bg-muted/30 rounded-lg p-3 h-full">
      {/* Column Header */}
      <div className="flex items-center justify-between mb-3 pb-2 border-b border-border">
        <div className="flex items-center gap-2">
          <h3 className="font-semibold text-foreground">{column.title}</h3>
          <span className="text-xs bg-muted px-2 py-0.5 rounded-full text-muted-foreground font-medium">
            {column.tasks.length}
            {column.task_limit && `/${column.task_limit}`}
          </span>
        </div>
        <Button
          variant="ghost"
          size="sm"
          onClick={() => onAddTask(column.status)}
          className="h-6 w-6 p-0"
        >
          <Plus className="w-4 h-4" />
        </Button>
      </div>

      {/* Tasks */}
      <div
        className="flex-1 space-y-2 overflow-y-auto min-h-[200px]"
        onDragOver={onDragOver}
        onDrop={(e) => onDrop(e, column.status)}
      >
        {column.tasks.length === 0 ? (
          <div className="flex items-center justify-center h-32 text-muted-foreground text-sm">
            Aucune tâche
          </div>
        ) : (
          column.tasks.map((task: KanbanTask) => {
            const etape = etapes.find((e) => e.id === task.parent_task_id);
            return (
              <div
                key={task.id}
                draggable
                onDragStart={(e) => onDragStart(e, task)}
                className="cursor-move"
              >
                <KanbanTaskCard
                  task={task}
                  etapeTitle={etape?.title}
                  onClick={() => onTaskClick(task)}
                />
              </div>
            );
          })
        )}
      </div>

      {/* Inline Task Creation */}
      <div className="mt-2">
        <InlineTaskCreate
          status={column.status}
          members={members}
          etapes={etapes}
          onSubmit={onAddTaskInline}
        />
      </div>
    </div>
  );
};
