/**
 * TaxiBook Partner - History View
 * ================================
 * Booking history with filters
 */

const HistoryView = ({ bookings, onCancelBooking, setToast }) => {
    const [filter, setFilter] = useState('all');
    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-700 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 = filter === 'all' 
        ? bookings 
        : bookings.filter(b => b.status === filter);

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

    return (
        <div className="animate-fade-in">
            <div className="flex justify-between items-center mb-6">
                <div>
                    <h2 className="text-2xl font-bold text-dark-900">Historique des courses</h2>
                    <p className="text-dark-500">{bookings.length} course(s) au total</p>
                </div>
                
                <select
                    value={filter}
                    onChange={(e) => setFilter(e.target.value)}
                    className="px-4 py-2 border-2 border-dark-200 rounded-xl focus:border-primary-500 focus:outline-none bg-white"
                >
                    <option value="all">Toutes ({bookings.length})</option>
                    <option value="pending">En attente</option>
                    <option value="confirmed">Confirmées</option>
                    <option value="in_progress">En cours</option>
                    <option value="completed">Terminées</option>
                    <option value="cancelled">Annulées</option>
                </select>
            </div>

            {filteredBookings.length === 0 ? (
                <div className="bg-white rounded-2xl p-12 text-center border-2 border-dark-200">
                    <div className="w-16 h-16 bg-dark-100 rounded-full flex items-center justify-center mx-auto mb-4">
                        <i className="fas fa-history text-2xl text-dark-300"></i>
                    </div>
                    <h3 className="text-lg font-semibold text-dark-700 mb-2">Aucune réservation</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-5 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-dark-400 text-sm">#{booking.confirmation_code || booking.uid?.slice(-8)}</span>
                                            {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>
                                            )}
                                        </div>
                                        
                                        <p className="text-dark-900 font-semibold">
                                            {new Date(booking.pickup_datetime).toLocaleDateString('fr-CH', {
                                                weekday: 'short', day: '2-digit', month: 'short', year: 'numeric', hour: '2-digit', minute: '2-digit'
                                            })}
                                        </p>

                                        <div className="flex items-start gap-3 mt-3">
                                            <div className="flex flex-col items-center">
                                                <div className="w-2.5 h-2.5 rounded-full bg-emerald-500"></div>
                                                <div className="w-0.5 h-4 bg-dark-200"></div>
                                                <div className="w-2.5 h-2.5 rounded-full bg-primary-500"></div>
                                            </div>
                                            <div className="flex-1 min-w-0 text-sm">
                                                <p className="text-dark-800 truncate">{booking.pickup_address || 'Départ'}</p>
                                                <p className="text-dark-500 truncate mt-2">{booking.destination_address || 'Destination'}</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.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-primary-600">{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>
    );
};