"use client";

import { useDroppable } from "@dnd-kit/core";
import {
	SortableContext,
	useSortable,
	verticalListSortingStrategy,
} from "@dnd-kit/sortable";
import { CSS } from "@dnd-kit/utilities";
import { Badge, Button } from "@mdxui/primitives";
import { cn } from "@mdxui/primitives/lib/utils";
import { GripVertical, Plus } from "lucide-react";
import { KanbanCardComponent } from "./kanban-card";
import type { KanbanCard, KanbanColumn } from "./types";

interface KanbanColumnProps {
	column: KanbanColumn;
	draggable: boolean;
	showAddButton: boolean;
	onCardClick?: (card: KanbanCard, columnId: string) => void;
	onAddCard?: (columnId: string) => void;
}

export function KanbanColumnComponent({
	column,
	draggable,
	showAddButton,
	onCardClick,
	onAddCard,
}: KanbanColumnProps) {
	const cardIds = column.cards.map((card) => card.id);

	const {
		attributes,
		listeners,
		setNodeRef: setSortableRef,
		transform,
		transition,
		isDragging: isColumnDragging,
	} = useSortable({
		id: column.id,
		data: {
			type: "column",
			column,
		},
	});

	const { setNodeRef: setDroppableRef } = useDroppable({
		id: column.id,
		data: {
			type: "column",
			column,
		},
	});

	const style = {
		transform: CSS.Transform.toString(transform),
		transition,
	};

	const isOverLimit =
		column.limit !== undefined && column.cards.length >= column.limit;

	return (
		<div
			ref={setSortableRef}
			style={style}
			className={cn(
				"flex w-80 shrink-0 flex-col rounded-lg border bg-muted/30",
				isColumnDragging && "opacity-50",
			)}
		>
			<div className="flex items-center justify-between border-b bg-card p-4">
				<div className="flex items-center gap-2">
					{draggable && (
						<button
							type="button"
							className="cursor-grab touch-none active:cursor-grabbing"
							{...attributes}
							{...listeners}
						>
							<GripVertical className="size-4 text-muted-foreground" />
						</button>
					)}
					<h3 className="font-semibold">{column.title}</h3>
					<Badge variant="secondary" className="text-xs">
						{column.cards.length}
						{column.limit && `/${column.limit}`}
					</Badge>
				</div>
				{showAddButton && onAddCard && (
					<Button
						variant="ghost"
						size="icon-sm"
						onClick={() => onAddCard(column.id)}
						disabled={isOverLimit}
					>
						<Plus className="size-4" />
					</Button>
				)}
			</div>

			<div
				ref={setDroppableRef}
				className="flex-1 space-y-2 overflow-y-auto p-4"
			>
				<SortableContext items={cardIds} strategy={verticalListSortingStrategy}>
					{column.cards.map((card, index) => (
						<KanbanCardComponent
							key={card.id}
							card={card}
							columnId={column.id}
							index={index}
							onClick={() => onCardClick?.(card, column.id)}
						/>
					))}
				</SortableContext>
				{column.cards.length === 0 && (
					<div className="flex h-32 items-center justify-center rounded-md border-2 border-dashed">
						<p className="text-sm text-muted-foreground">No cards</p>
					</div>
				)}
			</div>

			{isOverLimit && (
				<div className="border-t bg-destructive/10 p-2 text-center text-xs text-destructive">
					Column limit reached
				</div>
			)}
		</div>
	);
}