import { AnimatePresence, LayoutGroup, motion } from "framer-motion";
import { Plus } from "lucide-react";
import { useState } from "react";
import { TaskCard } from "./TaskCard";
import { TaskSchemaModal } from "./TaskSchemaModal";

interface KanbanColumnProps {
  column: any;
  labels?: { name: string; color: string; description: string }[];
  onTaskClick: (taskId: string) => void;
  onAgentClick?: (task: any) => void;
  onTaskDrop?: (taskId: string, newStatus: string) => void;
  boardId?: string;
  projectId?: string;
  onTaskCreated?: () => void;
}

const COLUMN_COLORS: Record<string, string> = {
  todo: "#7c3aed", // Purple
  in_progress: "#f97316", // Orange
  in_review: "#ef4444", // Red / Need Review
  done: "#10b981", // Green / Completed
  cancelled: "#64748b", // Slate / Cancelled
};

export function KanbanColumn({ column, labels = [], onTaskClick, onAgentClick, onTaskDrop, boardId, projectId, onTaskCreated }: KanbanColumnProps) {
  const dotColor = COLUMN_COLORS[column.status] ?? "#64748b";
  const [isDragOver, setIsDragOver] = useState(false);

  return (
    <div
      data-column-status={column.status}
      onDragOver={(e) => {
        e.preventDefault();
        e.dataTransfer.dropEffect = "move";
        if (!isDragOver) setIsDragOver(true);
      }}
      onDragLeave={(e) => {
        if (!e.currentTarget.contains(e.relatedTarget as Node)) {
          setIsDragOver(false);
        }
      }}
      onDrop={(e) => {
        e.preventDefault();
        setIsDragOver(false);
        const taskId = e.dataTransfer.getData("text/plain") || (window as any).__draggedTaskId;
        delete (window as any).__draggedTaskId;
        if (taskId && onTaskDrop) {
          onTaskDrop(taskId, column.status);
        }
      }}
      className={`relative min-w-0 min-h-0 flex flex-col h-full bg-surface-secondary/70 rounded-2xl border transition-all duration-150 shadow-xs overflow-hidden text-content-primary p-2.5 ${
        isDragOver ? "border-accent ring-2 ring-accent/30 bg-accent/5 scale-[1.01]" : "border-border/80 hover:border-accent/40"
      }`}
    >
      {/* Column Header */}
      <div className="relative flex items-center justify-between flex-shrink-0 px-2 py-1.5 mb-2 border-b border-border/40 pb-2">
        <div className="flex items-center gap-2">
          <span className="w-2.5 h-2.5 rounded-xs shrink-0" style={{ backgroundColor: dotColor }} />
          <span className="text-[12px] font-bold uppercase tracking-wider text-content-primary">{column.name}</span>
          <span className="font-mono text-[11px] font-semibold text-content-secondary bg-surface-tertiary border border-border px-2 py-0.5 rounded-full shadow-2xs">
            {column.tasks.length}
          </span>
        </div>
        <div className="flex items-center gap-1 text-content-tertiary hover:text-content-primary">
          {boardId ? (
            <TaskSchemaModal
              boardId={boardId}
              projectId={projectId}
              onTaskCreated={onTaskCreated}
              trigger={
                <button type="button" className="p-1 rounded-md hover:bg-surface-tertiary transition-colors" title="Add item">
                  <Plus className="w-3.5 h-3.5" />
                </button>
              }
            />
          ) : (
            <button type="button" className="p-1 rounded-md hover:bg-surface-tertiary transition-colors" title="Add item">
              <Plus className="w-3.5 h-3.5" />
            </button>
          )}
        </div>
      </div>

      {/* Task List */}
      <div className="flex-1 overflow-y-auto scrollbar-column px-1 pb-1 space-y-2">
        <LayoutGroup>
          <AnimatePresence initial={false} mode="popLayout">
            {column.tasks.map((task: any) => (
              <motion.div
                key={task.id}
                layout
                initial={{ opacity: 0, scale: 0.96, y: -6 }}
                animate={{ opacity: 1, scale: 1, y: 0 }}
                exit={{ opacity: 0, scale: 0.96 }}
                transition={{ duration: 0.2, layout: { duration: 0.25 } }}
              >
                <TaskCard task={task} labels={labels} onClick={() => onTaskClick(task.id)} onAgentClick={onAgentClick} />
              </motion.div>
            ))}
          </AnimatePresence>
        </LayoutGroup>
      </div>
    </div>
  );
}