"use client";

import { useSortable } from "@dnd-kit/sortable";
import { CSS } from "@dnd-kit/utilities";
import {
	Avatar,
	AvatarFallback,
	AvatarImage,
	Badge,
	Card,
	CardContent,
} from "@mdxui/primitives";
import { cn } from "@mdxui/primitives/lib/utils";
import { format, isPast, isToday } from "date-fns";
import { AlertCircle, Calendar } from "lucide-react";
import type { KanbanCard } from "./types";

interface KanbanCardProps {
	card: KanbanCard;
	columnId: string;
	index?: number;
	onClick?: () => void;
	isDragging?: boolean;
}

const priorityColors = {
	low: "bg-blue-500/10 text-blue-700 dark:text-blue-400",
	medium: "bg-yellow-500/10 text-yellow-700 dark:text-yellow-400",
	high: "bg-orange-500/10 text-orange-700 dark:text-orange-400",
	urgent: "bg-red-500/10 text-red-700 dark:text-red-400",
};

export function KanbanCardComponent({
	card,
	columnId,
	index = 0,
	onClick,
	isDragging = false,
}: KanbanCardProps) {
	const {
		attributes,
		listeners,
		setNodeRef,
		transform,
		transition,
		isDragging: isSortableDragging,
	} = useSortable({
		id: card.id,
		data: {
			type: "card",
			card,
			columnId,
			index,
		},
	});

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

	const isOverdue =
		card.dueDate && isPast(card.dueDate) && !isToday(card.dueDate);

	return (
		<div
			ref={setNodeRef}
			style={style}
			className={cn(
				"touch-none",
				(isDragging || isSortableDragging) && "opacity-50",
			)}
			{...attributes}
			{...listeners}
		>
			<Card
				className={cn(
					"cursor-pointer transition-all hover:shadow-md",
					isOverdue && "border-destructive",
				)}
				onClick={onClick}
			>
				<CardContent className="space-y-3 p-4">
					<div className="space-y-2">
						<h4 className="font-medium leading-tight">{card.title}</h4>
						{card.description && (
							<p className="line-clamp-2 text-xs text-muted-foreground">
								{card.description}
							</p>
						)}
					</div>

					{card.tags && card.tags.length > 0 && (
						<div className="flex flex-wrap gap-1">
							{card.tags.map((tag) => (
								<Badge key={tag} variant="outline" className="text-xs">
									{tag}
								</Badge>
							))}
						</div>
					)}

					<div className="flex items-center justify-between">
						<div className="flex items-center gap-2">
							{card.priority && (
								<Badge
									variant="secondary"
									className={cn("text-xs", priorityColors[card.priority])}
								>
									{card.priority}
								</Badge>
							)}
							{card.dueDate && (
								<div
									className={cn(
										"flex items-center gap-1 text-xs",
										isOverdue && "text-destructive",
									)}
								>
									{isOverdue && <AlertCircle className="size-3" />}
									<Calendar className="size-3" />
									<span>{format(card.dueDate, "MMM d")}</span>
								</div>
							)}
						</div>

						{card.assignee && (
							<Avatar className="size-6">
								<AvatarImage
									src={card.assignee.avatar}
									alt={card.assignee.name}
								/>
								<AvatarFallback className="text-xs">
									{card.assignee.name
										.split(" ")
										.map((n) => n[0])
										.join("")
										.toUpperCase()
										.slice(0, 2)}
								</AvatarFallback>
							</Avatar>
						)}
					</div>
				</CardContent>
			</Card>
		</div>
	);
}