/**
 * TaxiBook Partner - Booking View
 * ================================
 * Main booking interface with destination input, realtime pricing, and custom datepicker
 */

// Custom DateTimePicker Component
const DateTimePicker = ({ value, onChange, minDate }) => {
    const [isOpen, setIsOpen] = useState(false);
    const [currentMonth, setCurrentMonth] = useState(new Date());
    const [selectedDate, setSelectedDate] = useState(value ? new Date(value) : null);
    const [selectedHour, setSelectedHour] = useState(value ? new Date(value).getHours() : 12);
    const [selectedMinute, setSelectedMinute] = useState(value ? Math.floor(new Date(value).getMinutes() / 5) * 5 : 0);
    const pickerRef = useRef(null);

    useEffect(() => {
        const handleClickOutside = (event) => {
            if (pickerRef.current && !pickerRef.current.contains(event.target)) {
                setIsOpen(false);
            }
        };
        document.addEventListener('mousedown', handleClickOutside);
        return () => document.removeEventListener('mousedown', handleClickOutside);
    }, []);

    const daysInMonth = (date) => new Date(date.getFullYear(), date.getMonth() + 1, 0).getDate();
    const firstDayOfMonth = (date) => new Date(date.getFullYear(), date.getMonth(), 1).getDay();
    
    const monthNames = ['Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin', 
                        'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre'];
    const dayNames = ['Dim', 'Lun', 'Mar', 'Mer', 'Jeu', 'Ven', 'Sam'];

    const handleDateClick = (day) => {
        const newDate = new Date(currentMonth.getFullYear(), currentMonth.getMonth(), day);
        setSelectedDate(newDate);
    };

    const handleConfirm = () => {
        if (selectedDate) {
            const finalDate = new Date(selectedDate);
            finalDate.setHours(selectedHour, selectedMinute, 0, 0);
            onChange(finalDate.toISOString());
            setIsOpen(false);
        }
    };

    const renderDays = () => {
        const days = [];
        const totalDays = daysInMonth(currentMonth);
        const firstDay = firstDayOfMonth(currentMonth);
        const today = new Date();
        today.setHours(0, 0, 0, 0);
        
        // Empty cells for days before the first of the month
        for (let i = 0; i < firstDay; i++) {
            days.push(<div key={`empty-${i}`} className="w-10 h-10"></div>);
        }
        
        for (let day = 1; day <= totalDays; day++) {
            const date = new Date(currentMonth.getFullYear(), currentMonth.getMonth(), day);
            const isToday = date.toDateString() === today.toDateString();
            const isPast = date < today;
            const isSelected = selectedDate && date.toDateString() === selectedDate.toDateString();
            
            days.push(
                <button
                    key={day}
                    onClick={() => !isPast && handleDateClick(day)}
                    disabled={isPast}
                    className={`w-10 h-10 rounded-full flex items-center justify-center text-sm font-medium transition-all
                        ${isPast ? 'text-dark-300 cursor-not-allowed' : 'hover:bg-primary-100 cursor-pointer'}
                        ${isToday && !isSelected ? 'border-2 border-primary-500' : ''}
                        ${isSelected ? 'bg-primary-500 text-white' : ''}
                    `}
                >
                    {day}
                </button>
            );
        }
        
        return days;
    };

    const formattedValue = value ? 
        new Date(value).toLocaleDateString('fr-CH', { 
            weekday: 'short', 
            day: 'numeric', 
            month: 'short',
            hour: '2-digit',
            minute: '2-digit'
        }) : 'Sélectionner date et heure';

    return (
        <div className="relative" ref={pickerRef}>
            <button
                type="button"
                onClick={() => setIsOpen(!isOpen)}
                className="w-full p-4 bg-white border-2 border-dark-200 rounded-xl text-left flex items-center gap-3 hover:border-primary-500 transition"
            >
                <i className="fas fa-calendar-alt text-primary-500 text-xl"></i>
                <span className={value ? 'text-dark-900' : 'text-dark-400'}>{formattedValue}</span>
            </button>

            {isOpen && (
                <div className="absolute top-full left-0 mt-2 bg-white rounded-2xl shadow-2xl border-2 border-dark-100 p-4 z-50 min-w-[340px]">
                    {/* Month Navigation */}
                    <div className="flex items-center justify-between mb-4">
                        <button
                            onClick={() => setCurrentMonth(new Date(currentMonth.getFullYear(), currentMonth.getMonth() - 1))}
                            className="w-10 h-10 rounded-full hover:bg-dark-100 flex items-center justify-center"
                        >
                            <i className="fas fa-chevron-left"></i>
                        </button>
                        <span className="font-bold text-dark-900">
                            {monthNames[currentMonth.getMonth()]} {currentMonth.getFullYear()}
                        </span>
                        <button
                            onClick={() => setCurrentMonth(new Date(currentMonth.getFullYear(), currentMonth.getMonth() + 1))}
                            className="w-10 h-10 rounded-full hover:bg-dark-100 flex items-center justify-center"
                        >
                            <i className="fas fa-chevron-right"></i>
                        </button>
                    </div>

                    {/* Day Names */}
                    <div className="grid grid-cols-7 gap-1 mb-2">
                        {dayNames.map(day => (
                            <div key={day} className="w-10 h-8 flex items-center justify-center text-xs font-semibold text-dark-400">
                                {day}
                            </div>
                        ))}
                    </div>

                    {/* Days Grid */}
                    <div className="grid grid-cols-7 gap-1 mb-4">
                        {renderDays()}
                    </div>

                    {/* Time Selection */}
                    <div className="border-t border-dark-100 pt-4">
                        <p className="text-sm font-semibold text-dark-600 mb-3">Heure de prise en charge</p>
                        <div className="flex items-center justify-center gap-4">
                            <div className="flex flex-col items-center">
                                <button
                                    onClick={() => setSelectedHour(h => (h + 1) % 24)}
                                    className="w-12 h-8 hover:bg-dark-100 rounded flex items-center justify-center"
                                >
                                    <i className="fas fa-chevron-up text-dark-400"></i>
                                </button>
                                <span className="text-3xl font-bold text-dark-900 w-12 text-center">
                                    {String(selectedHour).padStart(2, '0')}
                                </span>
                                <button
                                    onClick={() => setSelectedHour(h => (h - 1 + 24) % 24)}
                                    className="w-12 h-8 hover:bg-dark-100 rounded flex items-center justify-center"
                                >
                                    <i className="fas fa-chevron-down text-dark-400"></i>
                                </button>
                            </div>
                            <span className="text-3xl font-bold text-dark-400">:</span>
                            <div className="flex flex-col items-center">
                                <button
                                    onClick={() => setSelectedMinute(m => (m + 5) % 60)}
                                    className="w-12 h-8 hover:bg-dark-100 rounded flex items-center justify-center"
                                >
                                    <i className="fas fa-chevron-up text-dark-400"></i>
                                </button>
                                <span className="text-3xl font-bold text-dark-900 w-12 text-center">
                                    {String(selectedMinute).padStart(2, '0')}
                                </span>
                                <button
                                    onClick={() => setSelectedMinute(m => (m - 5 + 60) % 60)}
                                    className="w-12 h-8 hover:bg-dark-100 rounded flex items-center justify-center"
                                >
                                    <i className="fas fa-chevron-down text-dark-400"></i>
                                </button>
                            </div>
                        </div>
                    </div>

                    {/* Confirm Button */}
                    <button
                        onClick={handleConfirm}
                        disabled={!selectedDate}
                        className="w-full mt-4 py-3 gradient-primary text-white font-bold rounded-xl disabled:opacity-50"
                    >
                        Confirmer
                    </button>
                </div>
            )}
        </div>
    );
};

// Address Autocomplete Component - Uses api.maps.swissapp.net
const AddressAutocomplete = ({ value, onChange, placeholder, icon, iconColor, disabled }) => {
    const [query, setQuery] = useState(value?.address || '');
    const [suggestions, setSuggestions] = useState([]);
    const [isLoading, setIsLoading] = useState(false);
    const [showSuggestions, setShowSuggestions] = useState(false);
    const inputRef = useRef(null);
    const suggestionsRef = useRef(null);
    const debounceRef = useRef(null);

    // Synchroniser le query avec la valeur externe quand elle change
    useEffect(() => {
        if (value?.address && value.address !== query) {
            setQuery(value.address);
        }
    }, [value?.address]);

    useEffect(() => {
        const handleClickOutside = (event) => {
            if (suggestionsRef.current && !suggestionsRef.current.contains(event.target) &&
                inputRef.current && !inputRef.current.contains(event.target)) {
                setShowSuggestions(false);
            }
        };
        document.addEventListener('mousedown', handleClickOutside);
        return () => document.removeEventListener('mousedown', handleClickOutside);
    }, []);

    const searchAddress = async (q) => {
        if (q.length < 3) {
            setSuggestions([]);
            setShowSuggestions(false);
            return;
        }
        
        setIsLoading(true);
        try {
            const result = await window.partnerAPI.autocomplete(q);
            if (result.success && result.predictions && result.predictions.length > 0) {
                setSuggestions(result.predictions.slice(0, 5));
                setShowSuggestions(true);
            } else {
                setSuggestions([]);
                setShowSuggestions(false);
            }
        } catch (error) {
            console.error('Autocomplete error:', error);
            setSuggestions([]);
        } finally {
            setIsLoading(false);
        }
    };

    const handleInputChange = (e) => {
        const newQuery = e.target.value;
        setQuery(newQuery);
        
        if (debounceRef.current) {
            clearTimeout(debounceRef.current);
        }
        
        debounceRef.current = setTimeout(() => {
            searchAddress(newQuery);
        }, 300);
    };

    const handleSelectSuggestion = async (suggestion) => {
        const description = suggestion.description;
        setQuery(description);
        setSuggestions([]);
        setShowSuggestions(false);
        setIsLoading(true);
        
        // Utiliser place_geometry pour obtenir les coordonnées
        try {
            const details = await window.partnerAPI.getPlaceDetails(suggestion.place_id, description);
            if (details.success) {
                onChange({
                    address: details.address || description,
                    latitude: details.lat,
                    longitude: details.lng
                });
            } else {
                // Fallback si pas de coordonnées
                onChange({
                    address: description,
                    latitude: null,
                    longitude: null
                });
            }
        } catch (error) {
            console.error('Place details error:', error);
            onChange({
                address: description,
                latitude: null,
                longitude: null
            });
        } finally {
            setIsLoading(false);
        }
    };

    return (
        <div className="relative">
            <div className="relative">
                <i className={`fas ${icon} absolute left-4 top-1/2 -translate-y-1/2 text-xl ${iconColor}`}></i>
                <input
                    ref={inputRef}
                    type="text"
                    value={query}
                    onChange={handleInputChange}
                    onFocus={() => suggestions.length > 0 && setShowSuggestions(true)}
                    placeholder={placeholder}
                    disabled={disabled}
                    className="w-full pl-12 pr-4 py-4 bg-white border-2 border-dark-200 rounded-xl focus:border-primary-500 focus:outline-none disabled:bg-dark-50 disabled:text-dark-500"
                />
                {isLoading && (
                    <div className="absolute right-4 top-1/2 -translate-y-1/2">
                        <Spinner size="sm" />
                    </div>
                )}
            </div>
            
            {showSuggestions && suggestions.length > 0 && (
                <div 
                    ref={suggestionsRef}
                    className="absolute top-full left-0 right-0 mt-2 bg-white rounded-xl shadow-xl border-2 border-dark-100 z-50 overflow-hidden max-h-64 overflow-y-auto"
                >
                    {suggestions.map((suggestion, index) => (
                        <button
                            key={index}
                            onClick={() => handleSelectSuggestion(suggestion)}
                            className="w-full px-4 py-3 text-left hover:bg-primary-50 flex items-center gap-3 border-b border-dark-100 last:border-b-0 transition-colors"
                        >
                            <i className="fas fa-map-marker-alt text-primary-500"></i>
                            <span className="text-dark-700 text-sm">{suggestion.description}</span>
                        </button>
                    ))}
                </div>
            )}
        </div>
    );
};

const BookingView = ({ partner, packages, vehicles, onBookingCreated, setToast }) => {
    const [step, setStep] = useState('vehicle'); // vehicle, options, package, standard-address, time, confirm
    const [selectedVehicle, setSelectedVehicle] = useState(null);
    const [bookingType, setBookingType] = useState(null); // onetouch, package, standard
    const [selectedPackage, setSelectedPackage] = useState(null);
    const [pickupTime, setPickupTime] = useState(null);
    const [guestInfo, setGuestInfo] = useState({ name: '', phone: '', room: '', notes: '' });
    const [loading, setLoading] = useState(false);
    
    // Standard booking - addresses
    const [pickupAddress, setPickupAddress] = useState(null);
    const [destinationAddress, setDestinationAddress] = useState(null);
    const [calculatedPrice, setCalculatedPrice] = useState(null);
    const [priceLoading, setPriceLoading] = useState(false);
    const [routeInfo, setRouteInfo] = useState(null);

    // Check if we should skip options step
    const hasOneTouch = partner?.onetouch_enabled;
    const hasPackages = packages && packages.length > 0;
    const shouldSkipOptions = !hasOneTouch && !hasPackages;

    // Init pickup address with partner address
    useEffect(() => {
        if (partner) {
            setPickupAddress({
                address: partner.address,
                latitude: partner.latitude,
                longitude: partner.longitude
            });
        }
    }, [partner]);

    const vehicleIcons = {
        standard: '🚕',
        berline: '🚗',
        break: '🚙',
        van: '🚐',
        minibus: '🚌',
        luxe: '✨'
    };

    // Steps configuration for the stepper
    const getSteps = () => {
        const steps = [
            { id: 'vehicle', label: 'Véhicule', icon: 'fa-car' }
        ];
        
        // Only add options step if there are options to choose from
        if (!shouldSkipOptions) {
            steps.push({ id: 'options', label: 'Type de course', icon: 'fa-list' });
        }
        
        // Add appropriate step based on booking type
        if (bookingType === 'package') {
            steps.push({ id: 'package', label: 'Forfait', icon: 'fa-route' });
        } else if (bookingType === 'standard' || shouldSkipOptions) {
            steps.push({ id: 'standard-address', label: 'Trajet', icon: 'fa-map-marked-alt' });
        }
        
        if (step === 'time' || step === 'confirm' || bookingType) {
            steps.push({ id: 'time', label: 'Horaire', icon: 'fa-clock' });
        }
        
        if (step === 'confirm') {
            steps.push({ id: 'confirm', label: 'Confirmation', icon: 'fa-check-circle' });
        }
        
        return steps;
    };

    const handleStepClick = (targetStep) => {
        // Only allow going back to previous steps
        const steps = getSteps();
        const currentIndex = steps.findIndex(s => s.id === step);
        const targetIndex = steps.findIndex(s => s.id === targetStep);
        
        if (targetIndex < currentIndex && targetIndex >= 0) {
            setStep(targetStep);
        }
    };

    const handleVehicleSelect = (vehicle) => {
        setSelectedVehicle(vehicle);
        
        // If no OneTouch and no packages, skip options and go directly to standard-address
        if (shouldSkipOptions) {
            setBookingType('standard');
            setStep('standard-address');
        } else {
            setStep('options');
        }
    };

    const handleBookingTypeSelect = (type) => {
        setBookingType(type);
        if (type === 'onetouch') {
            handleCreateBooking('onetouch');
        } else if (type === 'package') {
            setStep('package');
        } else {
            // Standard reservation - go to address step
            setStep('standard-address');
        }
    };

    const handlePackageSelect = (pkg) => {
        setSelectedPackage(pkg);
        setStep('time');
    };

    // Calculate price when destination changes
    const calculatePrice = async () => {
        console.log('📊 [Booking] calculatePrice called', {
            pickup: pickupAddress,
            destination: destinationAddress,
            vehicle: selectedVehicle?.code
        });
        
        if (!pickupAddress?.latitude || !destinationAddress?.latitude || !selectedVehicle) {
            console.log('📊 [Booking] Missing data for price calculation:', {
                hasPickupLat: !!pickupAddress?.latitude,
                hasDestLat: !!destinationAddress?.latitude,
                hasVehicle: !!selectedVehicle
            });
            return;
        }
        
        setPriceLoading(true);
        try {
            const requestData = {
                pickup_address: pickupAddress.address,
                pickup_latitude: pickupAddress.latitude,
                pickup_longitude: pickupAddress.longitude,
                destination_address: destinationAddress.address,
                destination_latitude: destinationAddress.latitude,
                destination_longitude: destinationAddress.longitude,
                vehicle_type: selectedVehicle.code
            };
            console.log('📊 [Booking] Sending price request:', requestData);
            
            const result = await window.partnerAPI.getRealtimePrice(requestData);
            console.log('📊 [Booking] Price response:', result);
            
            // La réponse peut être soit { success, vehicles, route } soit { success, data: { vehicles, route } }
            const responseData = result.data || result;
            const vehicles = responseData.vehicles || result.vehicles;
            const route = responseData.route || result.route;
            
            if (result.success && vehicles) {
                // Structure API: { vehicle: { code, id, ... }, pricing: { final_price, ... }, eta: {...} }
                const vehicleData = vehicles.find(v => 
                    v.vehicle?.code === selectedVehicle.code || 
                    v.vehicle?.id === selectedVehicle.code ||
                    v.code === selectedVehicle.code // Fallback ancien format
                );
                
                if (vehicleData) {
                    // Nouveau format: vehicleData.pricing.final_price
                    // Ancien format: vehicleData.price ou vehicleData.final_price
                    const price = vehicleData.pricing?.final_price || vehicleData.price || vehicleData.final_price;
                    console.log('📊 [Booking] Price found:', price, 'from vehicleData:', vehicleData);
                    setCalculatedPrice(price);
                    setRouteInfo({
                        distance: route?.distance_km || route?.distance,
                        duration: route?.estimated_duration_minutes || route?.duration_minutes || route?.duration
                    });
                } else {
                    console.warn('📊 [Booking] Vehicle not found in pricing results:', selectedVehicle.code, vehicles);
                }
            } else {
                console.warn('📊 [Booking] Unexpected response format:', result);
            }
        } catch (error) {
            console.error('📊 [Booking] Error calculating price:', error);
        } finally {
            setPriceLoading(false);
        }
    };

    useEffect(() => {
        console.log('📊 [Booking] useEffect triggered - step:', step, 'pickupLat:', pickupAddress?.latitude, 'destLat:', destinationAddress?.latitude);
        if (step === 'standard-address' && pickupAddress?.latitude && destinationAddress?.latitude) {
            calculatePrice();
        }
    }, [step, pickupAddress, destinationAddress, selectedVehicle]);

    const handleAddressContinue = () => {
        if (destinationAddress?.address && calculatedPrice) {
            setStep('time');
        } else if (destinationAddress?.address) {
            setToast({ message: 'Calcul du prix en cours...', type: 'info' });
        } else {
            setToast({ message: 'Veuillez saisir une destination', type: 'warning' });
        }
    };

    const handleTimeSelect = (time) => {
        setPickupTime(time);
        setStep('confirm');
    };

    const handleCreateBooking = async (type = bookingType) => {
        setLoading(true);
        try {
            const data = {
                booking_type: type,
                vehicle_type: selectedVehicle?.code || 'standard',
                package_id: selectedPackage?.id,
                pickup_datetime: pickupTime === 'now' ? new Date().toISOString() : pickupTime,
                is_immediate: pickupTime === 'now' || type === 'onetouch',
                guest_name: guestInfo.name || null,
                guest_phone: guestInfo.phone || null,
                guest_room: guestInfo.room || null,
                guest_notes: guestInfo.notes || null,
                price: calculatedPrice || selectedPackage?.price || selectedVehicle?.estimated_price || 0
            };
            
            // Add addresses for standard bookings
            if (type === 'standard' && pickupAddress && destinationAddress) {
                data.pickup_address = pickupAddress.address;
                data.pickup_latitude = pickupAddress.latitude;
                data.pickup_longitude = pickupAddress.longitude;
                data.destination_address = destinationAddress.address;
                data.destination_latitude = destinationAddress.latitude;
                data.destination_longitude = destinationAddress.longitude;
            }

            const result = await window.partnerAPI.createBooking(data);
            
            if (result.success) {
                setToast({ message: `Réservation confirmée: ${result.data.confirmation_code}`, type: 'success' });
                onBookingCreated(result.data);
                resetForm();
            } else {
                setToast({ message: result.error || 'Erreur lors de la réservation', type: 'error' });
            }
        } catch (error) {
            setToast({ message: 'Erreur de connexion', type: 'error' });
        } finally {
            setLoading(false);
        }
    };

    const resetForm = () => {
        setStep('vehicle');
        setSelectedVehicle(null);
        setBookingType(null);
        setSelectedPackage(null);
        setPickupTime(null);
        setGuestInfo({ name: '', phone: '', room: '', notes: '' });
        setDestinationAddress(null);
        setCalculatedPrice(null);
        setRouteInfo(null);
        // Reset pickup to partner address
        if (partner) {
            setPickupAddress({
                address: partner.address,
                latitude: partner.latitude,
                longitude: partner.longitude
            });
        }
    };

    // Step Indicator Component - memoized to prevent re-renders
    const stepIndicatorContent = React.useMemo(() => {
        const steps = getSteps();
        const currentIndex = steps.findIndex(s => s.id === step);
        
        return (
            <div className="booking-stepper bg-white rounded-2xl p-4 border-2 border-dark-200 sticky top-4">
                <h3 className="text-sm font-semibold text-dark-500 uppercase tracking-wider mb-4">Étapes</h3>
                <div className="space-y-2">
                    {steps.map((s, index) => {
                        const isCompleted = index < currentIndex;
                        const isCurrent = s.id === step;
                        const isClickable = index < currentIndex;
                        
                        return (
                            <button
                                key={s.id}
                                onClick={() => isClickable && handleStepClick(s.id)}
                                disabled={!isClickable}
                                className={`w-full flex items-center gap-3 p-3 rounded-xl transition-all text-left
                                    ${isCurrent ? 'bg-primary-50 border-2 border-primary-500' : ''}
                                    ${isCompleted ? 'bg-emerald-50 hover:bg-emerald-100 cursor-pointer' : ''}
                                    ${!isCurrent && !isCompleted ? 'bg-dark-50 opacity-50' : ''}
                                `}
                            >
                                <div className={`w-8 h-8 rounded-full flex items-center justify-center text-sm font-bold
                                    ${isCurrent ? 'bg-primary-500 text-white' : ''}
                                    ${isCompleted ? 'bg-emerald-500 text-white' : ''}
                                    ${!isCurrent && !isCompleted ? 'bg-dark-200 text-dark-400' : ''}
                                `}>
                                    {isCompleted ? (
                                        <i className="fas fa-check text-xs"></i>
                                    ) : (
                                        <i className={`fas ${s.icon} text-xs`}></i>
                                    )}
                                </div>
                                <div className="flex-1">
                                    <p className={`text-sm font-medium ${isCurrent ? 'text-primary-700' : isCompleted ? 'text-emerald-700' : 'text-dark-400'}`}>
                                        {s.label}
                                    </p>
                                </div>
                                {isClickable && (
                                    <i className="fas fa-chevron-left text-dark-300 text-xs"></i>
                                )}
                            </button>
                        );
                    })}
                </div>
                
                {/* Selected vehicle info */}
                {selectedVehicle && (
                    <div className="mt-6 pt-4 border-t border-dark-100">
                        <p className="text-xs text-dark-400 uppercase tracking-wider mb-2">Véhicule</p>
                        <div className="flex items-center gap-3">
                            {selectedVehicle.image_url && selectedVehicle.image_url.startsWith('http') ? (
                                <img src={selectedVehicle.image_url} alt="" className="h-10 w-auto" />
                            ) : (
                                <span className="text-2xl">{vehicleIcons[selectedVehicle.code] || '🚕'}</span>
                            )}
                            <div>
                                <p className="font-semibold text-dark-900 text-sm">{selectedVehicle.name}</p>
                                <p className="text-xs text-dark-500">{selectedVehicle.capacity} places</p>
                            </div>
                        </div>
                    </div>
                )}
                
                {/* Selected package info */}
                {selectedPackage && (
                    <div className="mt-4 pt-4 border-t border-dark-100">
                        <p className="text-xs text-dark-400 uppercase tracking-wider mb-2">Forfait</p>
                        <p className="font-semibold text-dark-900 text-sm">{selectedPackage.name}</p>
                        <p className="text-primary-600 font-bold text-sm">{selectedPackage.price} CHF</p>
                    </div>
                )}
                
                {/* Price info for standard booking */}
                {bookingType === 'standard' && calculatedPrice && (
                    <div className="mt-4 pt-4 border-t border-dark-100">
                        <p className="text-xs text-dark-400 uppercase tracking-wider mb-2">Prix estimé</p>
                        <p className="font-bold text-primary-600 text-xl">{calculatedPrice} CHF</p>
                        {routeInfo && (
                            <p className="text-xs text-dark-500">{routeInfo.distance?.toFixed(1)} km · {routeInfo.duration} min</p>
                        )}
                    </div>
                )}
            </div>
        );
    }, [step, bookingType, selectedVehicle, selectedPackage, calculatedPrice, routeInfo]);

    // Mobile Step Indicator - memoized
    const mobileStepIndicatorContent = React.useMemo(() => {
        const steps = getSteps();
        const currentIndex = steps.findIndex(s => s.id === step);
        
        return (
            <div className="booking-stepper-mobile lg:hidden">
                {steps.map((s, index) => {
                    const isCompleted = index < currentIndex;
                    const isCurrent = s.id === step;
                    const isClickable = index < currentIndex;
                    
                    return (
                        <button
                            key={s.id}
                            onClick={() => isClickable && handleStepClick(s.id)}
                            disabled={!isClickable}
                            className={`step-item ${isCurrent ? 'current' : ''} ${isCompleted ? 'completed' : ''} ${!isCurrent && !isCompleted ? 'pending' : ''}`}
                        >
                            <div className={`step-icon ${isCurrent ? 'current' : ''} ${isCompleted ? 'completed' : ''} ${!isCurrent && !isCompleted ? 'pending' : ''}`}>
                                {isCompleted ? (
                                    <i className="fas fa-check"></i>
                                ) : (
                                    <i className={`fas ${s.icon}`}></i>
                                )}
                            </div>
                            <span className={isCurrent ? 'font-semibold text-primary-700' : isCompleted ? 'text-emerald-700' : 'text-dark-400'}>
                                {s.label}
                            </span>
                        </button>
                    );
                })}
            </div>
        );
    }, [step, bookingType]);

    // Render layout wrapper - returns JSX with stepper
    const renderWithStepper = (content, showStepper = true) => {
        if (!showStepper || step === 'vehicle') {
            return <div className="animate-fade-in">{content}</div>;
        }
        
        return (
            <div className="animate-fade-in">
                {/* Mobile stepper - horizontal at top */}
                {mobileStepIndicatorContent}
                
                <div className="flex gap-6">
                    <div className="flex-1 min-w-0">
                        {content}
                    </div>
                    {/* Desktop stepper - vertical on right */}
                    <div className="w-64 flex-shrink-0 hidden lg:block">
                        {stepIndicatorContent}
                    </div>
                </div>
            </div>
        );
    };

    // Render Vehicle Selection
    if (step === 'vehicle') {
        return renderWithStepper(
            <>
                <h2 className="text-2xl font-bold text-dark-900 mb-6">Sélectionnez un véhicule</h2>
                <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4">
                    {vehicles.map(vehicle => (
                        <button
                            key={vehicle.id}
                            onClick={() => handleVehicleSelect(vehicle)}
                            className="vehicle-card bg-white rounded-2xl p-6 border-2 border-dark-200 hover:border-primary-500 text-left"
                        >
                            {vehicle.image_url && vehicle.image_url.startsWith('http') ? (
                                <img 
                                    src={vehicle.image_url} 
                                    alt={vehicle.name}
                                    className="h-20 w-auto object-contain mb-4"
                                    onError={(e) => { e.target.style.display = 'none'; e.target.nextSibling.style.display = 'block'; }}
                                />
                            ) : null}
                            <div className={`text-5xl mb-4 ${vehicle.image_url && vehicle.image_url.startsWith('http') ? 'hidden' : ''}`}>
                                {vehicleIcons[vehicle.code] || '🚕'}
                            </div>
                            <h3 className="text-xl font-bold text-dark-900">{vehicle.name}</h3>
                            <p className="text-dark-500">{vehicle.capacity} personnes</p>
                            {vehicle.estimated_price && (
                                <p className="text-primary-600 font-bold mt-2">
                                    dès {vehicle.estimated_price} CHF
                                </p>
                            )}
                        </button>
                    ))}
                </div>
            </>,
            false
        );
    }

    // Render Options
    if (step === 'options') {
        return renderWithStepper(
            <>
                <button onClick={() => setStep('vehicle')} className="mb-6 text-dark-500 hover:text-dark-700 flex items-center gap-2">
                    <i className="fas fa-arrow-left"></i> Retour
                </button>
                
                <div className="flex items-center gap-4 mb-8">
                    {selectedVehicle?.image_url && selectedVehicle.image_url.startsWith('http') ? (
                        <img 
                            src={selectedVehicle.image_url} 
                            alt={selectedVehicle.name}
                            className="h-16 w-auto object-contain"
                            onError={(e) => { e.target.style.display = 'none'; }}
                        />
                    ) : (
                        <div className="text-5xl">{vehicleIcons[selectedVehicle?.code] || '🚕'}</div>
                    )}
                    <div>
                        <h2 className="text-2xl font-bold text-dark-900">{selectedVehicle?.name}</h2>
                        <p className="text-dark-500">{selectedVehicle?.capacity} personnes</p>
                    </div>
                </div>

                <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
                    {/* OneTouch */}
                    {partner?.onetouch_enabled && (
                        <button
                            onClick={() => handleBookingTypeSelect('onetouch')}
                            disabled={loading}
                            className="bg-gradient-to-br from-primary-500 to-primary-600 text-white rounded-2xl p-8 text-left hover:opacity-90 transition disabled:opacity-50"
                        >
                            <i className="fas fa-bolt text-4xl mb-4"></i>
                            <h3 className="text-xl font-bold mb-2">OneTouch</h3>
                            <p className="text-primary-100">Commander maintenant à votre adresse</p>
                        </button>
                    )}

                    {/* Forfaits */}
                    {packages.length > 0 && (
                        <button
                            onClick={() => handleBookingTypeSelect('package')}
                            className="bg-white border-2 border-dark-200 rounded-2xl p-8 text-left hover:border-primary-500 transition"
                        >
                            <i className="fas fa-route text-4xl mb-4 text-emerald-500"></i>
                            <h3 className="text-xl font-bold text-dark-900 mb-2">Forfait</h3>
                            <p className="text-dark-500">Trajets prédéfinis à prix fixe</p>
                        </button>
                    )}

                    {/* Réservation */}
                    <button
                        onClick={() => handleBookingTypeSelect('standard')}
                        className="bg-white border-2 border-dark-200 rounded-2xl p-8 text-left hover:border-primary-500 transition"
                    >
                        <i className="fas fa-calendar-alt text-4xl mb-4 text-blue-500"></i>
                        <h3 className="text-xl font-bold text-dark-900 mb-2">Réservation</h3>
                        <p className="text-dark-500">Planifier une course</p>
                    </button>
                </div>
            </>
        );
    }

    // Render Package Selection
    if (step === 'package') {
        return renderWithStepper(
            <>
                <button onClick={() => setStep('options')} className="mb-6 text-dark-500 hover:text-dark-700 flex items-center gap-2">
                    <i className="fas fa-arrow-left"></i> Retour
                </button>
                
                <h2 className="text-2xl font-bold text-dark-900 mb-6">Sélectionnez un forfait</h2>
                
                <div className="space-y-4">
                    {packages.map(pkg => {
                        const supplement = pkg.vehicle_supplements?.[selectedVehicle?.code] || 0;
                        const totalPrice = pkg.price + supplement;
                        
                        return (
                            <button
                                key={pkg.id}
                                onClick={() => handlePackageSelect(pkg)}
                                className="w-full bg-white rounded-2xl p-6 border-2 border-dark-200 hover:border-primary-500 text-left transition"
                            >
                                <div className="flex justify-between items-start">
                                    <div>
                                        <h3 className="text-lg font-bold text-dark-900">{pkg.name}</h3>
                                        <p className="text-dark-500 text-sm mt-1">{pkg.description}</p>
                                        <div className="flex items-center gap-4 mt-3 text-sm text-dark-400">
                                            <span><i className="fas fa-clock mr-1"></i>{pkg.estimated_duration} min</span>
                                            <span><i className="fas fa-route mr-1"></i>{pkg.estimated_distance} km</span>
                                        </div>
                                    </div>
                                    <div className="text-right">
                                        <p className="text-2xl font-bold text-primary-600">{totalPrice} CHF</p>
                                        {supplement > 0 && (
                                            <p className="text-xs text-dark-400">+{supplement} CHF ({selectedVehicle?.name})</p>
                                        )}
                                    </div>
                                </div>
                                <div className="mt-4 pt-4 border-t border-dark-100">
                                    <p className="text-sm text-dark-600">
                                        <i className="fas fa-map-marker-alt text-emerald-500 mr-2"></i>
                                        {pkg.origin_address}
                                    </p>
                                    <p className="text-sm text-dark-600 mt-1">
                                        <i className="fas fa-flag-checkered text-red-500 mr-2"></i>
                                        {pkg.destination_address}
                                    </p>
                                </div>
                            </button>
                        );
                    })}
                </div>
            </>
        );
    }

    // Render Standard Address Input
    if (step === 'standard-address') {
        // Go back to vehicle if options were skipped, otherwise go to options
        const handleBackFromAddress = () => {
            if (shouldSkipOptions) {
                setBookingType(null);
                setStep('vehicle');
            } else {
                setStep('options');
            }
        };

        return renderWithStepper(
            <>
                <button onClick={handleBackFromAddress} className="mb-6 text-dark-500 hover:text-dark-700 flex items-center gap-2">
                    <i className="fas fa-arrow-left"></i> Retour
                </button>
                
                <h2 className="text-2xl font-bold text-dark-900 mb-2">Définissez le trajet</h2>
                <p className="text-dark-500 mb-6">L'adresse de départ est pré-remplie avec l'adresse du partenaire</p>

                {/* Addresses */}
                <div className="space-y-4 mb-6">
                    {/* Pickup Address (editable with autocomplete) */}
                    <div className="relative">
                        <AddressAutocomplete
                            value={pickupAddress}
                            onChange={setPickupAddress}
                            placeholder="Adresse de départ..."
                            icon="fa-map-marker-alt"
                            iconColor="text-emerald-500"
                        />
                        <span className="absolute right-4 top-1/2 -translate-y-1/2 text-xs text-dark-400 bg-dark-100 px-2 py-1 rounded pointer-events-none z-10">
                            Départ
                        </span>
                    </div>

                    {/* Destination Address */}
                    <div className="relative">
                        <AddressAutocomplete
                            value={destinationAddress}
                            onChange={setDestinationAddress}
                            placeholder="Adresse de destination..."
                            icon="fa-flag-checkered"
                            iconColor="text-red-500"
                        />
                        <span className="absolute right-4 top-1/2 -translate-y-1/2 text-xs text-dark-400 bg-dark-100 px-2 py-1 rounded pointer-events-none z-10">
                            Arrivée
                        </span>
                    </div>
                </div>

                {/* Price Display */}
                {(priceLoading || calculatedPrice) && (
                    <div className="bg-gradient-to-r from-primary-50 to-primary-100 rounded-2xl p-6 mb-6 border-2 border-primary-200">
                        <div className="flex items-center justify-between">
                            <div>
                                <p className="text-sm text-dark-500 mb-1">Prix estimé</p>
                                {priceLoading ? (
                                    <div className="flex items-center gap-2">
                                        <Spinner size="sm" />
                                        <span className="text-dark-500">Calcul en cours...</span>
                                    </div>
                                ) : (
                                    <p className="text-3xl font-bold text-primary-600">{calculatedPrice} CHF</p>
                                )}
                            </div>
                            {routeInfo && (
                                <div className="text-right text-sm text-dark-500">
                                    <p><i className="fas fa-road mr-1"></i> {routeInfo.distance?.toFixed(1) || '?'} km</p>
                                    <p><i className="fas fa-clock mr-1"></i> {routeInfo.duration || '?'} min</p>
                                </div>
                            )}
                        </div>
                        <div className="flex items-center gap-2 mt-4 pt-4 border-t border-primary-200">
                            {selectedVehicle?.image_url && selectedVehicle.image_url.startsWith('http') ? (
                                <img src={selectedVehicle.image_url} alt="" className="h-8 w-auto" />
                            ) : (
                                <span className="text-2xl">{vehicleIcons[selectedVehicle?.code] || '🚕'}</span>
                            )}
                            <span className="text-dark-600 font-medium">{selectedVehicle?.name}</span>
                        </div>
                    </div>
                )}

                {/* Continue Button */}
                <button
                    onClick={handleAddressContinue}
                    disabled={!destinationAddress?.address || priceLoading}
                    className="w-full py-4 gradient-primary text-white font-bold rounded-xl hover:opacity-90 transition disabled:opacity-50 flex items-center justify-center gap-2"
                >
                    {priceLoading ? <Spinner size="sm" /> : <i className="fas fa-arrow-right"></i>}
                    Continuer
                </button>
            </>
        );
    }

    // Render Time Selection
    if (step === 'time') {
        const timeOptions = [
            { value: 'now', label: 'Maintenant', icon: 'fa-bolt' },
            { value: '5min', label: 'Dans 5 min', icon: 'fa-clock' },
            { value: '15min', label: 'Dans 15 min', icon: 'fa-clock' },
            { value: '30min', label: 'Dans 30 min', icon: 'fa-clock' },
        ];

        return renderWithStepper(
            <>
                <button onClick={() => setStep(bookingType === 'package' ? 'package' : 'standard-address')} className="mb-6 text-dark-500 hover:text-dark-700 flex items-center gap-2">
                    <i className="fas fa-arrow-left"></i> Retour
                </button>
                
                <h2 className="text-2xl font-bold text-dark-900 mb-6">Quand souhaitez-vous partir ?</h2>
                
                <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-8">
                    {timeOptions.map(opt => (
                        <button
                            key={opt.value}
                            onClick={() => handleTimeSelect(opt.value === 'now' ? 'now' : new Date(Date.now() + parseInt(opt.value) * 60000).toISOString())}
                            className="bg-white border-2 border-dark-200 rounded-xl p-4 hover:border-primary-500 transition text-center"
                        >
                            <i className={`fas ${opt.icon} text-2xl text-primary-500 mb-2`}></i>
                            <p className="font-semibold text-dark-900">{opt.label}</p>
                        </button>
                    ))}
                </div>

                {/* Custom date/time picker */}
                <div className="bg-dark-50 rounded-xl p-6">
                    <h3 className="font-semibold text-dark-900 mb-4">Ou choisissez une date et heure</h3>
                    <div className="flex flex-col sm:flex-row gap-4">
                        <div className="flex-1">
                            <DateTimePicker
                                value={pickupTime}
                                onChange={(datetime) => {
                                    setPickupTime(datetime);
                                }}
                                minDate={new Date()}
                            />
                        </div>
                        <button
                            onClick={() => pickupTime && setStep('confirm')}
                            disabled={!pickupTime || pickupTime === 'now'}
                            className="px-8 py-4 gradient-primary text-white rounded-xl font-semibold disabled:opacity-50"
                        >
                            Continuer
                        </button>
                    </div>
                </div>
            </>
        );
    }

    // Render Confirmation
    if (step === 'confirm') {
        const displayPrice = calculatedPrice || (selectedPackage ? (selectedPackage.price + (selectedPackage.vehicle_supplements?.[selectedVehicle?.code] || 0)) : null);
        const displayPickup = pickupAddress?.address || selectedPackage?.origin_address || partner?.address;
        const displayDest = destinationAddress?.address || selectedPackage?.destination_address;

        return renderWithStepper(
            <>
                <button onClick={() => setStep('time')} className="mb-6 text-dark-500 hover:text-dark-700 flex items-center gap-2">
                    <i className="fas fa-arrow-left"></i> Retour
                </button>
                
                <h2 className="text-2xl font-bold text-dark-900 mb-6">Confirmer la réservation</h2>

                {/* Summary */}
                <div className="bg-white rounded-2xl p-6 border-2 border-dark-200 mb-6">
                    <div className="flex items-center gap-4 mb-4 pb-4 border-b border-dark-100">
                        {selectedVehicle?.image_url && selectedVehicle.image_url.startsWith('http') ? (
                            <img src={selectedVehicle.image_url} alt="" className="h-12 w-auto" />
                        ) : (
                            <div className="text-4xl">{vehicleIcons[selectedVehicle?.code] || '🚕'}</div>
                        )}
                        <div>
                            <h3 className="font-bold text-dark-900">{selectedVehicle?.name}</h3>
                            {selectedPackage && <p className="text-dark-500">{selectedPackage.name}</p>}
                            {bookingType === 'standard' && <p className="text-dark-500">Réservation</p>}
                        </div>
                        <div className="ml-auto text-right">
                            <p className="text-2xl font-bold text-primary-600">
                                {displayPrice || '~'} CHF
                            </p>
                            {routeInfo && (
                                <p className="text-xs text-dark-400">
                                    {routeInfo.distance?.toFixed(1)} km · {routeInfo.duration} min
                                </p>
                            )}
                        </div>
                    </div>

                    <div className="space-y-2 text-sm">
                        <p><i className="fas fa-map-marker-alt text-emerald-500 w-5"></i> {displayPickup}</p>
                        {displayDest && (
                            <p><i className="fas fa-flag-checkered text-red-500 w-5"></i> {displayDest}</p>
                        )}
                        <p><i className="fas fa-clock text-blue-500 w-5"></i> {pickupTime === 'now' ? 'Maintenant' : formatDateLocal(pickupTime)}</p>
                    </div>
                </div>

                {/* Guest Info (optional) */}
                <div className="bg-dark-50 rounded-2xl p-6 mb-6">
                    <h3 className="font-semibold text-dark-900 mb-4">Informations client (optionnel)</h3>
                    <div className="grid grid-cols-2 gap-4">
                        <input
                            type="text"
                            placeholder="Nom du client"
                            value={guestInfo.name}
                            onChange={(e) => setGuestInfo({...guestInfo, name: e.target.value})}
                            className="p-3 border-2 border-dark-200 rounded-xl focus:border-primary-500 focus:outline-none"
                        />
                        <input
                            type="text"
                            placeholder="N° chambre"
                            value={guestInfo.room}
                            onChange={(e) => setGuestInfo({...guestInfo, room: e.target.value})}
                            className="p-3 border-2 border-dark-200 rounded-xl focus:border-primary-500 focus:outline-none"
                        />
                        <input
                            type="tel"
                            placeholder="Téléphone"
                            value={guestInfo.phone}
                            onChange={(e) => setGuestInfo({...guestInfo, phone: e.target.value})}
                            className="p-3 border-2 border-dark-200 rounded-xl focus:border-primary-500 focus:outline-none"
                        />
                        <input
                            type="text"
                            placeholder="Notes"
                            value={guestInfo.notes}
                            onChange={(e) => setGuestInfo({...guestInfo, notes: e.target.value})}
                            className="p-3 border-2 border-dark-200 rounded-xl focus:border-primary-500 focus:outline-none"
                        />
                    </div>
                </div>

                {/* Actions */}
                <div className="flex gap-4">
                    <button
                        onClick={resetForm}
                        className="flex-1 py-4 bg-dark-100 text-dark-700 font-semibold rounded-xl hover:bg-dark-200 transition"
                    >
                        Annuler
                    </button>
                    <button
                        onClick={() => handleCreateBooking()}
                        disabled={loading}
                        className="flex-1 py-4 gradient-primary text-white font-bold rounded-xl hover:opacity-90 transition disabled:opacity-50 flex items-center justify-center gap-2"
                    >
                        {loading ? <Spinner size="sm" /> : <i className="fas fa-check"></i>}
                        Confirmer
                    </button>
                </div>
            </>
        );
    }

    return null;
};