smoothschedule/frontend/src/components/Schedule/Sidebar.tsx

import React from 'react';
import { useDraggable } from '@dnd-kit/core';
import { Clock, GripVertical, Trash2 } from 'lucide-react';
import { clsx } from 'clsx';

export interface PendingAppointment {
    id: number;
    customerName: string;
    serviceName: string;
    durationMinutes: number;
}

export interface ResourceLayout {
    resourceId: number;
    resourceName: string;
    height: number;
    laneCount: number;
}

interface PendingItemProps {
    appointment: PendingAppointment;
}

const PendingItem: React.FC<PendingItemProps> = ({ appointment }) => {
    const { attributes, listeners, setNodeRef, isDragging } = useDraggable({
        id: `pending-${appointment.id}`,
        data: {
            type: 'pending',
            duration: appointment.durationMinutes,
            title: appointment.customerName
        },
    });

    return (
        <div
            ref={setNodeRef}
            {...listeners}
            {...attributes}
            className={clsx(
                "p-3 bg-white dark:bg-gray-700 border border-l-4 border-gray-200 dark:border-gray-600 border-l-orange-400 dark:border-l-orange-500 rounded shadow-sm cursor-grab active:cursor-grabbing hover:shadow-md transition-all mb-2",
                isDragging ? "opacity-50" : ""
            )}
        >
            <div className="flex items-start justify-between">
                <div>
                    <p className="font-semibold text-sm text-gray-900 dark:text-white">{appointment.customerName}</p>
                    <p className="text-xs text-gray-500 dark:text-gray-400">{appointment.serviceName}</p>
                </div>
                <GripVertical size={14} className="text-gray-400" />
            </div>
            <div className="mt-2 flex items-center gap-1 text-xs text-gray-400 dark:text-gray-500">
                <Clock size={10} />
                <span>{appointment.durationMinutes} min</span>
            </div>
        </div>
    );
};

interface SidebarProps {
    resourceLayouts: ResourceLayout[];
    pendingAppointments: PendingAppointment[];
    scrollRef: React.RefObject<HTMLDivElement>;
}

const Sidebar: React.FC<SidebarProps> = ({ resourceLayouts, pendingAppointments, scrollRef }) => {
    return (
        <div className="flex flex-col bg-white dark:bg-gray-800 border-r border-gray-200 dark:border-gray-700 shrink-0 shadow-lg z-20 transition-colors duration-200" style={{ width: 250 }}>
            {/* Resources Header */}
            <div className="border-b border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-900 flex items-center px-4 font-semibold text-gray-500 dark:text-gray-400 text-xs uppercase tracking-wider shrink-0 transition-colors duration-200" style={{ height: 48 }}>
                Resources
            </div>

            {/* Resources List (Synced Scroll) */}
            <div className="flex-1 overflow-hidden flex flex-col">
                <div
                    ref={scrollRef}
                    className="overflow-hidden flex-1" // Hidden scrollbar, controlled by main timeline
                >
                    {resourceLayouts.map(layout => (
                        <div
                            key={layout.resourceId}
                            className="flex items-center px-4 border-b border-gray-100 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-700/50 transition-colors group"
                            style={{ height: layout.height }}
                        >
                            <div className="flex items-center gap-3 w-full">
                                <div className="flex items-center justify-center w-8 h-8 rounded bg-gray-100 dark:bg-gray-700 text-gray-500 dark:text-gray-400 group-hover:bg-brand-100 dark:group-hover:bg-brand-900 group-hover:text-brand-600 dark:group-hover:text-brand-400 transition-colors shrink-0">
                                    <GripVertical size={16} />
                                </div>
                                <div>
                                    <p className="font-medium text-sm text-gray-900 dark:text-white">{layout.resourceName}</p>
                                    <p className="text-xs text-gray-400 dark:text-gray-500 capitalize flex items-center gap-1">
                                        Resource
                                        {layout.laneCount > 1 && (
                                            <span className="text-blue-600 dark:text-blue-400 bg-blue-50 dark:bg-blue-900/50 px-1 rounded text-[10px]">
                                                {layout.laneCount} lanes
                                            </span>
                                        )}
                                    </p>
                                </div>
                            </div>
                        </div>
                    ))}
                </div>
            </div>

            {/* Pending Requests (Fixed Bottom) */}
            <div className="border-t border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800 p-4 h-80 flex flex-col transition-colors duration-200">
                <h3 className="text-xs font-bold text-gray-500 dark:text-gray-400 uppercase tracking-wider mb-3 flex items-center gap-2 shrink-0">
                    <Clock size={12} /> Pending Requests ({pendingAppointments.length})
                </h3>
                <div className="space-y-2 overflow-y-auto flex-1 mb-2">
                    {pendingAppointments.length === 0 ? (
                        <div className="text-xs text-gray-400 italic text-center py-4">No pending requests</div>
                    ) : (
                        pendingAppointments.map(apt => (
                            <PendingItem key={apt.id} appointment={apt} />
                        ))
                    )}
                </div>

                {/* Archive Drop Zone (Visual) */}
                <div className="shrink-0 mt-2 border-t border-gray-200 dark:border-gray-700 pt-2 opacity-50">
                    <div className="flex items-center justify-center gap-2 p-3 rounded-lg border-2 border-dashed border-gray-200 dark:border-gray-700 bg-transparent text-gray-400">
                        <Trash2 size={16} />
                        <span className="text-xs font-medium">Drop here to archive</span>
                    </div>
                </div>
            </div>
        </div>
    );
};

export default Sidebar;