import React from "react";
import { Badge } from "@/common/components/ui/badge";
import { Plus, MoreVertical } from "lucide-react";
import { Droppable,type DroppableProvided,type DroppableStateSnapshot } from "@hello-pangea/dnd";
import { ShiftStatus } from "@/dataconnect-generated";

interface TaskColumnProps {
    status: string;
    title?: string;
    tasks: any[];
    children: React.ReactNode;
    onAddTask?: (status: string) => void;
}

const columnConfig: Record<string, { bg: string; text: string; border: string; label: string; dot: string }> = {
    [ShiftStatus.OPEN]: { bg: "bg-slate-500/10", text: "text-slate-700", border: "border-slate-500/20", label: "Unassigned", dot: "bg-slate-500" },
    [ShiftStatus.PENDING]: { bg: "bg-blue-500/10", text: "text-blue-700", border: "border-blue-500/20", label: "Pending", dot: "bg-blue-500" },
    [ShiftStatus.CONFIRMED]: { bg: "bg-emerald-500/10", text: "text-emerald-700", border: "border-emerald-500/20", label: "Confirmed", dot: "bg-emerald-500" },
    [ShiftStatus.IN_PROGRESS]: { bg: "bg-amber-500/10", text: "text-amber-700", border: "border-amber-500/20", label: "In Progress", dot: "bg-amber-500" },
    [ShiftStatus.COMPLETED]: { bg: "bg-green-500/10", text: "text-green-700", border: "border-green-500/20", label: "Completed", dot: "bg-green-500" }
};

/**
 * TaskColumn Component
 * Renders a Kanban column with a droppable area for Shifts.
 */
export default function TaskColumn({ status, title, tasks, children, onAddTask }: TaskColumnProps) {
    const config = columnConfig[status] || { bg: "bg-gray-500/10", text: "text-gray-700", border: "border-gray-500/20", label: title || status, dot: "bg-gray-500" };

    return (
        <div className="flex-1 min-w-[320px] flex flex-col h-full group/column">
            {/* Column Header */}
            <div className={`${config.bg} ${config.text} ${config.border} border rounded-t-2xl px-5 py-4 flex items-center justify-between shadow-sm transition-premium`}>
                <div className="flex items-center gap-3">
                    <div className={`w-2 h-2 rounded-full ${config.dot} shadow-[0_0_8px_rgba(var(--primary),0.4)]`} />
                    <span className="font-bold uppercase tracking-widest text-[11px]">{title || config.label}</span>
                    <Badge variant="outline" className="bg-white/50 text-current border-current/20 font-medium px-2 py-0 h-5 text-[10px] shadow-sm">
                        {tasks.length}
                    </Badge>
                </div>
                <div className="flex items-center gap-1.5">
                    {onAddTask && (
                        <button
                            onClick={() => onAddTask(status)}
                            className="w-8 h-8 hover:bg-white/50 rounded-xl flex items-center justify-center transition-premium active:scale-90 border border-transparent hover:border-current/20"
                        >
                            <Plus className="w-4 h-4" />
                        </button>
                    )}
                    <button className="w-8 h-8 hover:bg-white/50 rounded-xl flex items-center justify-center transition-premium border border-transparent hover:border-current/20">
                        <MoreVertical className="w-4 h-4" />
                    </button>
                </div>
            </div>

            {/* Droppable Area */}
            <Droppable droppableId={status}>
                {(provided: DroppableProvided, snapshot: DroppableStateSnapshot) => (
                    <div
                        ref={provided.innerRef}
                        {...provided.droppableProps}
                        className={`flex-1 min-h-[500px] rounded-b-2xl p-4 transition-premium ${snapshot.isDraggingOver
                            ? 'bg-primary/5 border-x-2 border-b-2 border-dashed border-primary/20 shadow-inner'
                            : 'bg-muted/[0.15] border-x border-b border-border/50'
                            }`}
                    >
                        <div className="space-y-1">
                            {children}
                        </div>
                        {provided.placeholder}
                    </div>
                )}
            </Droppable>
        </div>
    );
}
