/**
 * TaxiBook Partner - Rides View
 * ==============================
 * All rides with filters
 */

const RidesView = ({ bookings, onCancelBooking, setToast }) => {
    const [filter, setFilter] = useState('active');
    const [selectedBooking, setSelectedBooking] = useState(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 filteredBookings = bookings.filter(b => {
        if (filter === 'all') return true;
        if (filter === 'active') return ['pending', 'confirmed', 'driver_assigned', 'in_progress'].includes(b.status);
        return b.status === filter;
    });

    const activeCount = bookings.filter(b => ['pending', 'confirmed', 'driver_assigned', 'in_progress'].includes(b.status)).length;

    const handleCancelFromModal = (uid) => {
        setSelectedBooking(null);
        onCancelBooking(uid);
    };

    return (
        <div className="animate-fade-in">
            <div className="flex items-center justify-between mb-6">
                <div>
                    <h2 className="text-2xl font-bold text-dark-900">Courses</h2>
                    <p className="text-dark-500">{activeCount} course(s) active(s) • {bookings.length} au total</p>
                </div>
            </div>

            {/* Filtres */}
            <div className="flex gap-2 mb-6 flex-wrap">
                {[
                    { id: 'active', label: 'Actives', icon: 'fa-clock' },
                    { id: 'pending', label: 'En attente', icon: 'fa-hourglass-half' },
                    { id: 'confirmed', label: 'Confirmées', icon: 'fa-check' },
                    { id: 'in_progress', label: 'En cours', icon: 'fa-car' },
                    { id: 'completed', label: 'Terminées', icon: 'fa-flag-checkered' },
                    { id: 'cancelled', label: 'Annulées', icon: 'fa-times' },
                    { id: 'all', label: 'Toutes', icon: 'fa-list' }
                ].map(f => (
                    <button
                        key={f.id}
                        onClick={() => setFilter(f.id)}
                        className={`px-4 py-2 rounded-lg font-medium transition flex items-center gap-2 ${
                            filter === f.id 
                                ? 'bg-primary-500 text-white' 
                                : 'bg-dark-100 text-dark-600 hover:bg-dark-200'
                        }`}
                    >
                        <i className={`fas ${f.icon}`}></i>
                        {f.label}
                    </button>
                ))}
            </div>

            {filteredBookings.length === 0 ? (
                <div className="bg-white rounded-2xl p-12 border-2 border-dark-200 text-center">
                    <div className="w-16 h-16 bg-dark-100 rounded-full flex items-center justify-center mx-auto mb-4">
                        <i className="fas fa-car text-2xl text-dark-400"></i>
                    </div>
                    <h3 className="text-lg font-semibold text-dark-700 mb-2">Aucune course</h3>
                    <p className="text-dark-500">Aucune course ne correspond à ce filtre</p>
                </div>
            ) : (
                <div className="bg-white rounded-2xl border-2 border-dark-200 overflow-hidden">
                    <div className="divide-y divide-dark-100">
                        {filteredBookings.map(booking => (
                            <div 
                                key={booking.id || booking.uid} 
                                className="p-4 hover:bg-dark-50 transition cursor-pointer"
                                onClick={() => setSelectedBooking(booking)}
                            >
                                <div className="flex items-start justify-between gap-4">
                                    <div className="flex-1">
                                        <div className="flex items-center gap-2 flex-wrap mb-2">
                                            <span className={`px-3 py-1 rounded-full text-xs font-semibold border ${statusColors[booking.status] || statusColors.pending}`}>
                                                {statusLabels[booking.status] || booking.status}
                                            </span>
                                            <span className="text-sm text-dark-500">#{booking.confirmation_code || booking.uid?.slice(-8)}</span>
                                            {/* Source badge */}
                                            {booking.source === 'minisite' && (
                                                <span className="px-2 py-0.5 rounded text-xs font-medium bg-purple-100 text-purple-700">
                                                    <i className="fas fa-globe mr-1"></i>
                                                    {booking.minisite_name || booking.source_minisite_slug || 'Mini-site'}
                                                </span>
                                            )}
                                            <span className="text-sm text-dark-400">
                                                {new Date(booking.pickup_datetime).toLocaleDateString('fr-CH', {
                                                    day: '2-digit', month: '2-digit', year: 'numeric', hour: '2-digit', minute: '2-digit'
                                                })}
                                            </span>
                                        </div>
                                        
                                        <div className="flex items-start gap-3 mt-3">
                                            <div className="flex flex-col items-center">
                                                <div className="w-3 h-3 rounded-full bg-emerald-500"></div>
                                                <div className="w-0.5 h-6 bg-dark-200"></div>
                                                <div className="w-3 h-3 rounded-full bg-primary-500"></div>
                                            </div>
                                            <div className="flex-1 min-w-0">
                                                <p className="text-sm font-medium text-dark-800 truncate">
                                                    {booking.pickup_address || booking.package_name || 'Départ'}
                                                </p>
                                                <p className="text-sm text-dark-500 truncate mt-4">
                                                    {booking.destination_address || 'Destination selon forfait'}
                                                </p>
                                            </div>
                                        </div>

                                        {(booking.guest_name || booking.driver_name) && (
                                            <div className="mt-3 flex items-center gap-4 text-sm text-dark-500 flex-wrap">
                                                {booking.guest_name && <span><i className="fas fa-user mr-1"></i> {booking.guest_name}</span>}
                                                {booking.guest_phone && <span><i className="fas fa-phone mr-1"></i> {booking.guest_phone}</span>}
                                                {booking.driver_name && <span className="text-emerald-600"><i className="fas fa-id-badge mr-1"></i> {booking.driver_name}</span>}
                                            </div>
                                        )}
                                    </div>
                                    
                                    <div className="text-right flex flex-col items-end">
                                        <p className="text-xl font-bold text-dark-900">{booking.price || 0} CHF</p>
                                        <p className="text-xs text-dark-500 capitalize">{booking.vehicle_type || 'Standard'}</p>
                                        
                                        {['pending', 'confirmed'].includes(booking.status) && (
                                            <button
                                                onClick={(e) => { e.stopPropagation(); onCancelBooking(booking.uid); }}
                                                className="mt-2 px-3 py-1 text-xs bg-red-50 text-red-600 rounded-lg hover:bg-red-100 transition"
                                            >
                                                <i className="fas fa-times mr-1"></i>
                                                Annuler
                                            </button>
                                        )}
                                        
                                        <span className="mt-2 text-xs text-primary-500">
                                            <i className="fas fa-chevron-right"></i>
                                        </span>
                                    </div>
                                </div>
                            </div>
                        ))}
                    </div>
                </div>
            )}

            {/* Modal détails */}
            {selectedBooking && (
                <BookingDetailsModal 
                    booking={selectedBooking}
                    onClose={() => setSelectedBooking(null)}
                    onCancel={handleCancelFromModal}
                />
            )}
        </div>
    );
};