import React from 'react';
import { useDraggable } from '@dnd-kit/core';
import { CSS } from '@dnd-kit/utilities';
import { format } from 'date-fns';
import { clsx } from 'clsx';
import { GripVertical } from 'lucide-react';

interface DraggableEventProps {
    id: number;
    title: string;
    serviceName?: string;
    status?: 'PENDING' | 'CONFIRMED' | 'COMPLETED' | 'CANCELLED' | 'NO_SHOW' | 'SCHEDULED';
    isPaid?: boolean;
    start: Date;
    end: Date;
    laneIndex: number;
    height: number;
    left: number;
    width: number;
    top: number;
    onResizeStart: (e: React.MouseEvent, direction: 'left' | 'right', id: number) => void;
}

export const DraggableEvent: React.FC<DraggableEventProps> = ({
    id,
    title,
    serviceName,
    status = 'SCHEDULED',
    isPaid = false,
    start,
    end,
    height,
    left,
    width,
    top,
    onResizeStart,
}) => {
    const { attributes, listeners, setNodeRef, transform, isDragging } = useDraggable({
        id: `event-${id}`,
        data: { id, type: 'event', originalStart: start, originalEnd: end },
    });

    const style = {
        transform: CSS.Translate.toString(transform),
        left,
        width,
        top,
        height,
    };

    // Status-based color scheme matching reference UI
    const getBorderColor = () => {
        if (isPaid) return 'border-green-500';
        switch (status) {
            case 'CONFIRMED': return 'border-blue-500';
            case 'COMPLETED': return 'border-green-500';
            case 'CANCELLED': return 'border-red-500';
            case 'NO_SHOW': return 'border-gray-500';
            default: return 'border-brand-500';
        }
    };

    return (
        <div
            ref={setNodeRef}
            style={style}
            className={clsx(
                "absolute rounded-b overflow-hidden group transition-shadow",
                "bg-brand-100 dark:bg-brand-900/50 border-t-4",
                getBorderColor(),
                isDragging ? "shadow-lg ring-2 ring-brand-500 opacity-80 z-50" : "hover:shadow-md z-10"
            )}
        >
            {/* Top Resize Handle */}
            <div
                className="absolute top-0 left-0 right-0 h-2 cursor-ns-resize hover:bg-brand-300/50 dark:hover:bg-brand-700/50"
                onMouseDown={(e) => {
                    e.stopPropagation();
                    onResizeStart(e, 'left', id);
                }}
            />

            {/* Content */}
            <div
                {...listeners}
                {...attributes}
                className="h-full w-full px-2 py-1 cursor-move select-none"
            >
                <div className="flex items-start justify-between mt-1">
                    <div className="text-sm font-medium text-gray-900 dark:text-white truncate">
                        {title}
                    </div>
                    <div className="flex-shrink-0 opacity-0 group-hover:opacity-100 transition-opacity">
                        <GripVertical size={14} className="text-gray-400" />
                    </div>
                </div>
                {serviceName && (
                    <div className="text-xs text-gray-500 dark:text-gray-400 truncate mt-0.5">
                        {serviceName}
                    </div>
                )}
                <div className="text-xs text-gray-500 dark:text-gray-400 mt-0.5">
                    {format(start, 'h:mm a')}
                </div>
            </div>

            {/* Bottom Resize Handle */}
            <div
                className="absolute bottom-0 left-0 right-0 h-2 cursor-ns-resize hover:bg-brand-300/50 dark:hover:bg-brand-700/50"
                onMouseDown={(e) => {
                    e.stopPropagation();
                    onResizeStart(e, 'right', id);
                }}
            />
        </div>
    );
};
