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

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

interface PendingItemProps {
    appointment: PendingAppointment;
}

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

    return (
        <div
            ref={setNodeRef}
            {...listeners}
            {...attributes}
            className={clsx(
                "p-3 bg-white border border-l-4 border-gray-200 border-l-orange-400 rounded shadow-sm cursor-grab 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">{appointment.customerName}</p>
                    <p className="text-xs text-gray-500">{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">
                <Clock size={10} />
                <span>{appointment.durationMinutes} {t('scheduler.min')}</span>
            </div>
        </div>
    );
};

interface PendingSidebarProps {
    appointments: PendingAppointment[];
}

const PendingSidebar: React.FC<PendingSidebarProps> = ({ appointments }) => {
    const { t } = useTranslation();

    return (
        <div className="w-64 bg-gray-50 border-r border-gray-200 flex flex-col h-full shrink-0">
            <div className="p-4 border-b border-gray-200 bg-gray-100">
                <h3 className="text-xs font-bold text-gray-500 uppercase tracking-wider flex items-center gap-2">
                    <Clock size={12} /> {t('scheduler.pendingRequests')} ({appointments.length})
                </h3>
            </div>
            <div className="p-4 overflow-y-auto flex-1">
                {appointments.length === 0 ? (
                    <div className="text-xs text-gray-400 italic text-center py-4">{t('scheduler.noPendingRequests')}</div>
                ) : (
                    appointments.map(apt => (
                        <PendingItem key={apt.id} appointment={apt} />
                    ))
                )}
            </div>
        </div>
    );
};

export default PendingSidebar;