/**
 * TaxiBook Partner - Common Components
 * =====================================
 * Toast, Spinner, BookingDetailsModal
 */

const { useState, useEffect, useRef } = React;

// ============================================================================
// TOAST NOTIFICATION
// ============================================================================

const Toast = ({ message, type = 'success', onClose }) => {
    useEffect(() => {
        const timer = setTimeout(onClose, 4000);
        return () => clearTimeout(timer);
    }, [onClose]);

    const styles = {
        success: 'bg-emerald-500',
        error: 'bg-red-500',
        info: 'bg-blue-500',
        warning: 'bg-amber-500'
    };

    const icons = {
        success: 'fa-check-circle',
        error: 'fa-exclamation-circle',
        info: 'fa-info-circle',
        warning: 'fa-exclamation-triangle'
    };

    return (
        <div className="fixed bottom-6 right-6 z-50 animate-slide-up">
            <div className="bg-white rounded-xl shadow-2xl p-4 flex items-center gap-3 border border-dark-200">
                <div className={`w-10 h-10 ${styles[type]} rounded-full flex items-center justify-center`}>
                    <i className={`fas ${icons[type]} text-white`}></i>
                </div>
                <p className="text-dark-800 font-medium">{message}</p>
                <button onClick={onClose} className="text-dark-400 hover:text-dark-600 ml-2">
                    <i className="fas fa-times"></i>
                </button>
            </div>
        </div>
    );
};

// ============================================================================
// SPINNER
// ============================================================================

const Spinner = ({ size = 'md' }) => {
    const sizes = { sm: 'w-4 h-4', md: 'w-6 h-6', lg: 'w-8 h-8' };
    return (
        <div className={`${sizes[size]} border-2 border-primary-500 border-t-transparent rounded-full animate-spin`}></div>
    );
};

// ============================================================================
// BOOKING DETAILS MODAL
// ============================================================================

const BookingDetailsModal = ({ booking, onClose, onCancel }) => {
    if (!booking) return null;

    const statusColors = {
        pending: 'bg-amber-100 text-amber-700 border-amber-300',
        confirmed: 'bg-blue-100 text-blue-700 border-blue-300',
        driver_assigned: 'bg-indigo-100 text-indigo-700 border-indigo-300',
        in_progress: 'bg-emerald-100 text-emerald-700 border-emerald-300',
        completed: 'bg-gray-100 text-gray-600 border-gray-300',
        cancelled: 'bg-red-100 text-red-600 border-red-300'
    };

    const statusLabels = {
        pending: 'En attente',
        confirmed: 'Confirmée',
        driver_assigned: 'Chauffeur assigné',
        in_progress: 'En cours',
        completed: 'Terminée',
        cancelled: 'Annulée'
    };

    const sourceLabels = {
        partner: 'Réservation directe',
        minisite: 'Mini-site',
        app_client: 'Application client'
    };

    const formatDate = (dateStr) => {
        if (!dateStr) return 'N/A';
        return new Date(dateStr).toLocaleDateString('fr-CH', {
            weekday: 'long',
            day: '2-digit',
            month: 'long',
            year: 'numeric',
            hour: '2-digit',
            minute: '2-digit'
        });
    };

    return (
        <div className="fixed inset-0 bg-black/60 backdrop-blur-sm flex items-center justify-center z-50 p-4" onClick={onClose}>
            <div 
                className="bg-white rounded-3xl w-full max-w-2xl max-h-[90vh] overflow-y-auto shadow-2xl"
                onClick={(e) => e.stopPropagation()}
            >
                {/* Header */}
                <div className="sticky top-0 bg-white border-b border-gray-100 p-6 flex justify-between items-start rounded-t-3xl">
                    <div>
                        <div className="flex items-center gap-3 mb-2">
                            <span className={`px-3 py-1 rounded-full text-sm font-semibold border ${statusColors[booking.status] || statusColors.pending}`}>
                                {statusLabels[booking.status] || booking.status}
                            </span>
                            {booking.source === 'minisite' && (
                                <span className="px-3 py-1 rounded-full text-xs font-medium bg-purple-100 text-purple-700 border border-purple-200">
                                    <i className="fas fa-globe mr-1"></i>
                                    {booking.minisite_name || booking.source_minisite_slug || 'Mini-site'}
                                </span>
                            )}
                        </div>
                        <h2 className="text-xl font-bold text-gray-900">
                            Course #{booking.confirmation_code || booking.uid?.slice(-8)}
                        </h2>
                    </div>
                    <button 
                        onClick={onClose}
                        className="w-10 h-10 rounded-full bg-gray-100 hover:bg-gray-200 flex items-center justify-center transition"
                    >
                        <i className="fas fa-times text-gray-500"></i>
                    </button>
                </div>

                {/* Content */}
                <div className="p-6 space-y-6">
                    {/* Date & Prix */}
                    <div className="grid grid-cols-2 gap-4">
                        <div className="bg-gray-50 rounded-2xl p-4">
                            <p className="text-sm text-gray-500 mb-1">Date & Heure</p>
                            <p className="font-semibold text-gray-900">{formatDate(booking.pickup_datetime)}</p>
                        </div>
                        <div className="bg-primary-50 rounded-2xl p-4">
                            <p className="text-sm text-primary-600 mb-1">Prix</p>
                            <p className="text-2xl font-bold text-primary-700">{booking.price || 0} CHF</p>
                        </div>
                    </div>

                    {/* Trajet */}
                    <div className="bg-gray-50 rounded-2xl p-5">
                        <h3 className="font-semibold text-gray-900 mb-4 flex items-center gap-2">
                            <i className="fas fa-route text-primary-500"></i>
                            Trajet
                        </h3>
                        <div className="space-y-4">
                            <div className="flex items-start gap-3">
                                <div className="w-3 h-3 rounded-full bg-emerald-500 mt-1.5 ring-4 ring-emerald-100"></div>
                                <div>
                                    <p className="text-xs text-gray-500 uppercase tracking-wide">Départ</p>
                                    <p className="font-medium text-gray-900">{booking.pickup_address || 'Non spécifié'}</p>
                                </div>
                            </div>
                            <div className="ml-1.5 h-6 border-l-2 border-dashed border-gray-300"></div>
                            <div className="flex items-start gap-3">
                                <div className="w-3 h-3 rounded-full bg-red-500 mt-1.5 ring-4 ring-red-100"></div>
                                <div>
                                    <p className="text-xs text-gray-500 uppercase tracking-wide">Destination</p>
                                    <p className="font-medium text-gray-900">{booking.destination_address || 'Non spécifiée'}</p>
                                </div>
                            </div>
                        </div>
                    </div>

                    {/* Client */}
                    {(booking.guest_name || booking.guest_phone) && (
                        <div className="bg-blue-50 rounded-2xl p-5">
                            <h3 className="font-semibold text-gray-900 mb-3 flex items-center gap-2">
                                <i className="fas fa-user text-blue-500"></i>
                                Client
                            </h3>
                            <div className="grid grid-cols-2 gap-4 text-sm">
                                {booking.guest_name && (
                                    <div>
                                        <p className="text-gray-500">Nom</p>
                                        <p className="font-medium text-gray-900">{booking.guest_name}</p>
                                    </div>
                                )}
                                {booking.guest_phone && (
                                    <div>
                                        <p className="text-gray-500">Téléphone</p>
                                        <a href={`tel:${booking.guest_phone}`} className="font-medium text-blue-600 hover:underline">
                                            {booking.guest_phone}
                                        </a>
                                    </div>
                                )}
                                {booking.guest_room && (
                                    <div>
                                        <p className="text-gray-500">Chambre</p>
                                        <p className="font-medium text-gray-900">{booking.guest_room}</p>
                                    </div>
                                )}
                            </div>
                        </div>
                    )}

                    {/* Chauffeur (si assigné) */}
                    {booking.driver_name && (
                        <div className="bg-emerald-50 rounded-2xl p-5">
                            <h3 className="font-semibold text-gray-900 mb-3 flex items-center gap-2">
                                <i className="fas fa-id-badge text-emerald-500"></i>
                                Chauffeur
                            </h3>
                            <div className="grid grid-cols-2 gap-4 text-sm">
                                <div>
                                    <p className="text-gray-500">Nom</p>
                                    <p className="font-medium text-gray-900">{booking.driver_name}</p>
                                </div>
                                {booking.driver_phone && (
                                    <div>
                                        <p className="text-gray-500">Téléphone</p>
                                        <a href={`tel:${booking.driver_phone}`} className="font-medium text-emerald-600 hover:underline">
                                            {booking.driver_phone}
                                        </a>
                                    </div>
                                )}
                                {booking.vehicle_plate && (
                                    <div>
                                        <p className="text-gray-500">Véhicule</p>
                                        <p className="font-medium text-gray-900">{booking.vehicle_plate}</p>
                                    </div>
                                )}
                            </div>
                        </div>
                    )}

                    {/* Véhicule */}
                    <div className="flex items-center justify-between p-4 bg-gray-50 rounded-2xl">
                        <div className="flex items-center gap-3">
                            <div className="w-12 h-12 bg-white rounded-xl flex items-center justify-center shadow-sm">
                                <i className="fas fa-car text-xl text-gray-600"></i>
                            </div>
                            <div>
                                <p className="text-sm text-gray-500">Type de véhicule</p>
                                <p className="font-semibold text-gray-900 capitalize">{booking.vehicle_type || 'Standard'}</p>
                            </div>
                        </div>
                    </div>

                    {/* Source */}
                    <div className="flex items-center gap-3 text-sm text-gray-500 pt-4 border-t border-gray-100">
                        <i className="fas fa-info-circle"></i>
                        <span>
                            Source: <strong>{sourceLabels[booking.source] || booking.source || 'Direct'}</strong>
                            {booking.minisite_name && ` - ${booking.minisite_name}`}
                            {booking.source_minisite_slug && !booking.minisite_name && ` - ${booking.source_minisite_slug}`}
                        </span>
                    </div>
                </div>

                {/* Footer Actions */}
                {['pending', 'confirmed'].includes(booking.status) && onCancel && (
                    <div className="sticky bottom-0 bg-white border-t border-gray-100 p-6 rounded-b-3xl">
                        <button
                            onClick={() => onCancel(booking.uid)}
                            className="w-full py-4 bg-red-50 text-red-600 font-semibold rounded-xl hover:bg-red-100 transition flex items-center justify-center gap-2"
                        >
                            <i className="fas fa-times-circle"></i>
                            Annuler cette course
                        </button>
                    </div>
                )}
            </div>
        </div>
    );
};