// Dashboard tab component listing active, completed, and cancelled bookings with keyword search filters.
import { useState, useEffect, useRef } from 'react';
import DateTimePicker from './DateTimePicker';
import api from '../api';
import {
    Check, X, Calendar, ChevronDown, ChevronUp, User, Mail, Phone,
    MapPin, CreditCard, Tag, FileText, Car, Clock, Shield, Hash,
    Edit, Save, BadgePercent, Wallet, Search, Plus, Bell, AlertCircle, Download
} from 'lucide-react';
import { useNavigate } from "react-router-dom";


// --- UPDATED UTILS WITH FIXED DAY CALCULATION ---
const fmt = (d) => d ? new Date(d).toLocaleDateString('en-GB', { day: '2-digit', month: 'short', year: 'numeric' }) : '—';
const fmtAED = (v) => v != null ? `AED ${Number(v).toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}` : '—';

// FIXED: Proper day calculation using ceil and time reset
const days = (s, e) => {
    if (!s || !e) return 0;
    const start = new Date(s);
    const end = new Date(e);
    start.setHours(0, 0, 0, 0);
    end.setHours(0, 0, 0, 0);
    const diffTime = end - start;
    const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
    return Math.max(1, diffDays);
};

const CC_ICONS = { Visa: '💳', Mastercard: '💳', Amex: '💳', default: '💳' };

const STATUS_COLORS = {
    pending: { bg: 'rgba(234,179,8,0.12)', color: '#eab308' },
    confirmed: { bg: 'rgba(34,197,94,0.12)', color: '#22c55e' },
    cancelled: { bg: 'rgba(239,68,68,0.12)', color: '#ef4444' },
    completed: { bg: 'rgba(168, 85, 247, 0.12)', color: '#a855f7' },
    'on-trip': { bg: 'rgba(59,130,246,0.12)', color: '#3b82f6' },
    returned: { bg: 'rgba(107,114,128,0.12)', color: '#6b7280' },
};

// --- NOTIFICATIONS: pickup/return reminders for today, tomorrow, and OVERDUE ---
const startOfDay = (d) => { const x = new Date(d); x.setHours(0, 0, 0, 0); return x; };
const isSameDay = (d, ref) => startOfDay(d).getTime() === ref.getTime();
const dayDiff = (d, ref) => Math.round((startOfDay(d) - ref) / (1000 * 60 * 60 * 24));

// --- UPDATED: computeReminders with OVERDUE support ---
const computeReminders = (list) => {
    const today = startOfDay(new Date());
    const tomorrow = new Date(today);
    tomorrow.setDate(today.getDate() + 1);

    const reminders = [];
    (list || []).forEach(b => {
        const status = (b.status || '').toLowerCase();
        // Skip cancelled and completed bookings
        if (status === 'cancelled' || status === 'completed') return;

        // --- Check Pickup (Start Date) ---
        if (b.start_date) {
            const startDate = startOfDay(new Date(b.start_date));

            if (isSameDay(startDate, today)) {
                reminders.push({
                    key: `pickup-${b.id}`,
                    type: 'pickup',
                    when: 'today',
                    date: b.start_date,
                    booking: b,
                    isOverdue: false
                });
            } else if (isSameDay(startDate, tomorrow)) {
                reminders.push({
                    key: `pickup-${b.id}`,
                    type: 'pickup',
                    when: 'tomorrow',
                    date: b.start_date,
                    booking: b,
                    isOverdue: false
                });
            } else if (startDate < today && status !== 'returned') {
                // 🚨 OVERDUE PICKUP
                const daysOverdue = Math.round((today - startDate) / (1000 * 60 * 60 * 24));
                reminders.push({
                    key: `pickup-overdue-${b.id}`,
                    type: 'pickup',
                    when: `overdue (${daysOverdue} day${daysOverdue > 1 ? 's' : ''} ago)`,
                    date: b.start_date,
                    booking: b,
                    isOverdue: true,
                    daysOverdue: daysOverdue
                });
            }
        }

        // --- Check Return (End Date) ---
        if (b.end_date) {
            const endDate = startOfDay(new Date(b.end_date));

            if (isSameDay(endDate, today) && status !== 'returned') {
                reminders.push({
                    key: `return-${b.id}`,
                    type: 'return',
                    when: 'today',
                    date: b.end_date,
                    booking: b,
                    isOverdue: false
                });
            } else if (isSameDay(endDate, tomorrow) && status !== 'returned') {
                reminders.push({
                    key: `return-${b.id}`,
                    type: 'return',
                    when: 'tomorrow',
                    date: b.end_date,
                    booking: b,
                    isOverdue: false
                });
            } else if (endDate < today && status !== 'returned' && status !== 'completed') {
                // 🚨 OVERDUE RETURN
                const daysOverdue = Math.round((today - endDate) / (1000 * 60 * 60 * 24));
                reminders.push({
                    key: `return-overdue-${b.id}`,
                    type: 'return',
                    when: `overdue (${daysOverdue} day${daysOverdue > 1 ? 's' : ''} ago)`,
                    date: b.end_date,
                    booking: b,
                    isOverdue: true,
                    daysOverdue: daysOverdue
                });
            }
        }
    });

    // Sort: overdue first, then today, then tomorrow
    reminders.sort((a, b) => {
        const getPriority = (item) => {
            if (item.isOverdue) return 0;
            if (item.when === 'today') return 1;
            if (item.when === 'tomorrow') return 2;
            return 3;
        };
        const aPriority = getPriority(a);
        const bPriority = getPriority(b);
        if (aPriority !== bPriority) return aPriority - bPriority;
        return new Date(a.date) - new Date(b.date);
    });

    return reminders;
};

// Confirmed bookings starting between day 2 and day 7 from today.
// NOTE: day 0 (today) and day 1 (tomorrow) are intentionally excluded here — those pickups
// are already surfaced in the "Pickups & Returns" reminders above. Without this exclusion the
// same booking gets counted twice in the bell badge (once as a reminder, once as "upcoming").
const computeUpcoming = (list) => {
    const today = startOfDay(new Date());
    const upcoming = (list || []).filter(b => {
        const status = (b.status || '').toLowerCase();
        if (status !== 'confirmed') return false;
        if (!b.start_date) return false;
        const diff = dayDiff(b.start_date, today);
        return diff >= 2 && diff <= 7;
    });
    upcoming.sort((a, b) => new Date(a.start_date) - new Date(b.start_date));
    return upcoming;
};

// --- UPDATED: NotificationBell with overdue support ---
const NotificationBell = ({ reminders, upcomingCount, onSelect, onUpcomingClick }) => {
    const [open, setOpen] = useState(false);
    const wrapperRef = useRef(null);

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

    // No overlap between reminders (today/tomorrow) and upcomingCount (day 2-7), so a plain sum is correct.
    const count = reminders.length + upcomingCount;

    return (
        <div ref={wrapperRef} style={{ position: 'relative', height: '42px', display: 'flex', alignItems: 'center' }}>
            <button
                onClick={() => setOpen(o => !o)}
                className="glass-btn"
                style={{ position: 'relative', padding: '0 14px' }}
                title="Notifications: Pickups, Returns & Upcoming Bookings"
            >
                <Bell size={16} />
                {count > 0 && (
                    <span style={{
                        position: 'absolute',
                        top: '-6px',
                        right: '-6px',
                        minWidth: '18px',
                        height: '18px',
                        borderRadius: '50%',
                        background: '#ef4444',
                        color: '#fff',
                        fontSize: '0.65rem',
                        fontWeight: 700,
                        display: 'flex',
                        alignItems: 'center',
                        justifyContent: 'center',
                        padding: '0 4px',
                        boxShadow: '0 0 0 2px rgba(15,23,42,0.9)'
                    }}>
                        {count > 9 ? '9+' : count}
                    </span>
                )}
            </button>

            {open && (
                <div className="glass-dropdown" style={{ width: '380px', maxHeight: '450px', overflowY: 'auto', padding: '0.75rem' }}>
                    <div style={{
                        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
                        padding: '0.25rem 0.5rem 0.75rem', borderBottom: '1px solid rgba(255,255,255,0.06)', marginBottom: '0.5rem'
                    }}>
                        <span style={{ fontSize: '0.8rem', fontWeight: 700, color: '#e2e8f0', textTransform: 'uppercase', letterSpacing: '0.06em' }}>
                            Notifications
                        </span>
                        <span style={{ fontSize: '0.7rem', color: '#94a3b8' }}>{count} total</span>
                    </div>

                    {/* Upcoming Bookings Section */}
                    {upcomingCount > 0 && (
                        <div
                            onClick={onUpcomingClick}
                            style={{
                                display: 'flex', alignItems: 'center', gap: '10px',
                                padding: '10px', borderRadius: '10px',
                                background: 'rgba(168, 85, 247, 0.1)',
                                border: '1px solid rgba(168, 85, 247, 0.3)',
                                cursor: 'pointer', transition: 'all 0.15s ease',
                                marginBottom: '8px'
                            }}
                            onMouseOver={(e) => e.currentTarget.style.background = 'rgba(168, 85, 247, 0.2)'}
                            onMouseOut={(e) => e.currentTarget.style.background = 'rgba(168, 85, 247, 0.1)'}
                        >
                            <div style={{
                                background: 'rgba(168, 85, 247, 0.2)',
                                borderRadius: '8px', width: '28px', height: '28px',
                                display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0
                            }}>
                                <Calendar size={14} color="#a855f7" />
                            </div>
                            <div style={{ flex: 1 }}>
                                <div style={{ fontSize: '0.85rem', color: '#e2e8f0', fontWeight: 600 }}>
                                    Upcoming Bookings
                                    <span style={{
                                        marginLeft: '8px', fontSize: '0.65rem', fontWeight: 700,
                                        color: '#a855f7', textTransform: 'uppercase', letterSpacing: '0.05em'
                                    }}>
                                        {upcomingCount} new
                                    </span>
                                </div>
                                <div style={{ fontSize: '0.8rem', color: '#94a3b8', marginTop: '2px' }}>
                                    {upcomingCount} confirmed booking{upcomingCount !== 1 ? 's' : ''} starting in the next 2–7 days
                                </div>
                            </div>
                            <ChevronDown size={14} color="#64748b" />
                        </div>
                    )}

                    {/* Pickup/Return Reminders Section */}
                    {reminders.length === 0 && upcomingCount === 0 ? (
                        <div style={{ padding: '1.5rem 0.5rem', textAlign: 'center', color: '#64748b', fontSize: '0.85rem' }}>
                            No notifications at this time.
                        </div>
                    ) : (
                        <>
                            {reminders.length > 0 && (
                                <div style={{ marginTop: upcomingCount > 0 ? '8px' : '0' }}>
                                    <div style={{ fontSize: '0.65rem', color: '#64748b', textTransform: 'uppercase', letterSpacing: '0.06em', marginBottom: '6px', padding: '0 4px' }}>
                                        Pickups & Returns
                                    </div>
                                    {reminders.map(r => {
                                        const isPickup = r.type === 'pickup';
                                        const isOverdue = r.isOverdue || false;

                                        // Set color based on type and overdue status
                                        let color = isPickup ? '#22c55e' : '#eab308';
                                        if (isOverdue) color = '#ef4444';

                                        const bgColor = isOverdue ? 'rgba(239, 68, 68, 0.15)' : 'rgba(255,255,255,0.02)';
                                        const borderColor = isOverdue ? '1px solid rgba(239, 68, 68, 0.4)' : '1px solid rgba(255,255,255,0.05)';

                                        return (
                                            <div
                                                key={r.key}
                                                onClick={() => { onSelect(r.booking); setOpen(false); }}
                                                style={{
                                                    display: 'flex', alignItems: 'flex-start', gap: '10px',
                                                    padding: '10px', borderRadius: '10px',
                                                    background: bgColor,
                                                    border: borderColor,
                                                    cursor: 'pointer', transition: 'background 0.15s ease',
                                                    marginBottom: '6px'
                                                }}
                                                onMouseOver={(e) => e.currentTarget.style.background = isOverdue ? 'rgba(239, 68, 68, 0.25)' : 'rgba(255,255,255,0.06)'}
                                                onMouseOut={(e) => e.currentTarget.style.background = bgColor}
                                            >
                                                <div style={{
                                                    marginTop: '2px',
                                                    color: color,
                                                    background: `${color}1f`,
                                                    borderRadius: '8px',
                                                    width: '28px',
                                                    height: '28px',
                                                    display: 'flex',
                                                    alignItems: 'center',
                                                    justifyContent: 'center',
                                                    flexShrink: 0
                                                }}>
                                                    {isOverdue ? <AlertCircle size={14} /> : <Car size={14} />}
                                                </div>
                                                <div style={{ flex: 1 }}>
                                                    <div style={{ fontSize: '0.85rem', color: '#e2e8f0', fontWeight: 600 }}>
                                                        {isPickup ? 'Pickup' : 'Return'}
                                                        <span style={{
                                                            marginLeft: '8px',
                                                            fontSize: '0.65rem',
                                                            fontWeight: 700,
                                                            color: color,
                                                            textTransform: 'uppercase',
                                                            letterSpacing: '0.05em'
                                                        }}>
                                                            {r.when}
                                                        </span>
                                                        {isOverdue && (
                                                            <span style={{
                                                                marginLeft: '8px',
                                                                background: '#ef4444',
                                                                color: 'white',
                                                                padding: '2px 10px',
                                                                borderRadius: '4px',
                                                                fontSize: '0.6rem',
                                                                fontWeight: 700,
                                                                textTransform: 'uppercase'
                                                            }}>
                                                                OVERDUE
                                                            </span>
                                                        )}
                                                    </div>
                                                    <div style={{ fontSize: '0.8rem', color: '#94a3b8', marginTop: '2px' }}>
                                                        {r.booking.customer_name || r.booking.customer || 'Customer'} — {r.booking.brand} {r.booking.model}
                                                    </div>
                                                    <div style={{ fontSize: '0.7rem', color: '#64748b', marginTop: '2px' }}>
                                                        Booking #{r.booking.id} · {fmt(r.date)}
                                                    </div>
                                                </div>
                                            </div>
                                        );
                                    })}
                                </div>
                            )}
                        </>
                    )}
                </div>
            )}
        </div>
    );
};

const InfoRow = ({ icon: Icon, label, value, mono }) => (
    <div style={{ display: 'flex', gap: '10px', alignItems: 'flex-start', marginBottom: '16px' }}>
        <div style={{ marginTop: '2px', color: '#64748b', flexShrink: 0 }}>
            <Icon size={14} strokeWidth={1.5} />
        </div>
        <div>
            <div style={{ fontSize: '0.65rem', color: '#64748b', textTransform: 'uppercase', letterSpacing: '0.08em', fontWeight: 500 }}>{label}</div>
            <div style={{ fontSize: '0.9rem', color: '#e2e8f0', fontFamily: mono ? 'monospace' : 'inherit', marginTop: '2px', fontWeight: 400 }}>{value || '—'}</div>
        </div>
    </div>
);

const SectionTitle = ({ icon: Icon, label }) => (
    <div style={{ display: 'flex', alignItems: 'center', gap: '8px', marginBottom: '1.25rem', paddingBottom: '10px', borderBottom: '1px solid rgba(255,255,255,0.04)' }}>
        <Icon size={14} color="#64748b" strokeWidth={1.5} />
        <span style={{ fontSize: '0.7rem', fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.1em', color: '#cbd5e1' }}>{label}</span>
    </div>
);

// --- EDIT MODAL ---
const EditModal = ({ booking, onClose, onSaved }) => {
    const [form, setForm] = useState({
        customer_name: booking.customer_name || '',
        customer_email: booking.customer_email || '',
        customer_phone: booking.customer_phone || '',
        customer_address: booking.customer_address || '',
        customer_license: booking.customer_license || '',
        cc_holder: booking.cc_holder || '',
        cc_last4: booking.cc_last4 || '',
        cc_expiry: booking.cc_expiry || '',
        cc_type: booking.payment_method || 'Visa',
        discount_code: booking.discount_code || '',
        discount_percent: booking.discount_percent || 0,
        notes: booking.notes || '',
    });
    const [saving, setSaving] = useState(false);

    const basePrice = Number(booking.total_price);
    const discountAmt = (basePrice * Number(form.discount_percent) / 100).toFixed(2);
    const finalPrice = (basePrice - Number(discountAmt)).toFixed(2);

    const handleSave = async () => {
        setSaving(true);
        try {
            await api.put(`/bookings/${booking.id}/details`, {
                ...form,
                discount_amount: discountAmt,
                base_price: basePrice,
            });
            onSaved();
            onClose();
        } catch (err) {
            console.error(err);
            alert('Failed to save changes.');
        } finally {
            setSaving(false);
        }
    };

    const inp = (field, opts = {}) => (
        <input
            {...opts}
            value={form[field]}
            onChange={e => setForm(f => ({ ...f, [field]: e.target.value }))}
            style={{ marginBottom: 0, fontSize: '0.875rem' }}
        />
    );

    return (
        <div style={{
            position: 'fixed', inset: 0, zIndex: 999,
            background: 'rgba(0,0,0,0.7)', backdropFilter: 'blur(4px)',
            display: 'flex', alignItems: 'center', justifyContent: 'center', padding: '1rem'
        }}>
            <div className="glass card" style={{ width: '100%', maxWidth: '680px', maxHeight: '90vh', overflowY: 'auto', position: 'relative' }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '1.5rem' }}>
                    <h3 style={{ margin: 0 }}>Edit Booking #{booking.id}</h3>
                    <button onClick={onClose} style={{ background: 'none', border: 'none', color: '#94a3b8', padding: 0, cursor: 'pointer' }}>
                        <X size={22} />
                    </button>
                </div>

                <SectionTitle icon={User} label="Customer Details" />
                <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '1rem', marginBottom: '1.5rem' }}>
                    <div><label style={{ fontSize: '0.75rem', color: '#94a3b8' }}>Full Name</label>{inp('customer_name', { placeholder: 'Full Name' })}</div>
                    <div><label style={{ fontSize: '0.75rem', color: '#94a3b8' }}>Email</label>{inp('customer_email', { placeholder: 'email@example.com', type: 'email' })}</div>
                    <div><label style={{ fontSize: '0.75rem', color: '#94a3b8' }}>Phone</label>{inp('customer_phone', { placeholder: '+971 50 000 0000' })}</div>
                    <div><label style={{ fontSize: '0.75rem', color: '#94a3b8' }}>Driver's License</label>{inp('customer_license', { placeholder: 'License Number' })}</div>
                    <div style={{ gridColumn: '1/-1' }}><label style={{ fontSize: '0.75rem', color: '#94a3b8' }}>Address</label>{inp('customer_address', { placeholder: 'Full address' })}</div>
                </div>

                <SectionTitle icon={CreditCard} label="Payment / Card Details" color="#a855f7" />
                <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '1rem', marginBottom: '1.5rem' }}>
                    <div><label style={{ fontSize: '0.75rem', color: '#94a3b8' }}>Card Holder Name</label>{inp('cc_holder', { placeholder: 'NAME ON CARD' })}</div>
                    <div>
                        <label style={{ fontSize: '0.75rem', color: '#94a3b8' }}>Card Type</label>
                        <select
                            value={form.cc_type}
                            onChange={e => setForm(f => ({ ...f, cc_type: e.target.value }))}
                            style={{ width: '100%', padding: '10px', borderRadius: '8px', background: 'rgba(255,255,255,0.05)', color: 'white', border: '1px solid rgba(255,255,255,0.2)', marginBottom: 0 }}
                        >
                            {['Visa', 'Mastercard', 'Amex', 'Other'].map(t => <option key={t} value={t}>{t}</option>)}
                        </select>
                    </div>
                    <div><label style={{ fontSize: '0.75rem', color: '#94a3b8' }}>Last 4 Digits</label>{inp('cc_last4', { placeholder: '4242', maxLength: 4 })}</div>
                    <div><label style={{ fontSize: '0.75rem', color: '#94a3b8' }}>Expiry (MM/YY)</label>{inp('cc_expiry', { placeholder: '12/27' })}</div>
                </div>

                <SectionTitle icon={BadgePercent} label="Discount" color="#22c55e" />
                <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '1rem', marginBottom: '1.5rem' }}>
                    <div><label style={{ fontSize: '0.75rem', color: '#94a3b8' }}>Discount Code</label>{inp('discount_code', { placeholder: 'e.g. SUMMER20' })}</div>
                    <div>
                        <label style={{ fontSize: '0.75rem', color: '#94a3b8' }}>Discount %</label>
                        <input
                            type="number" min="0" max="100"
                            value={form.discount_percent}
                            onChange={e => setForm(f => ({ ...f, discount_percent: e.target.value }))}
                            placeholder="0"
                            style={{ marginBottom: 0, fontSize: '0.875rem' }}
                        />
                    </div>
                </div>
                {Number(form.discount_percent) > 0 && (
                    <div style={{ background: 'rgba(34,197,94,0.08)', border: '1px solid rgba(34,197,94,0.2)', borderRadius: '8px', padding: '12px 16px', marginBottom: '1.5rem', fontSize: '0.875rem' }}>
                        <div style={{ display: 'flex', justifyContent: 'space-between' }}>
                            <span style={{ color: '#94a3b8' }}>Base Price:</span>
                            <span>{fmtAED(basePrice)}</span>
                        </div>
                        <div style={{ display: 'flex', justifyContent: 'space-between', color: '#22c55e' }}>
                            <span>Discount ({form.discount_percent}%):</span>
                            <span>− {fmtAED(discountAmt)}</span>
                        </div>
                        <div style={{ display: 'flex', justifyContent: 'space-between', fontWeight: 700, borderTop: '1px solid rgba(255,255,255,0.1)', marginTop: '8px', paddingTop: '8px' }}>
                            <span>Final Price:</span>
                            <span style={{ color: '#22c55e' }}>{fmtAED(finalPrice)}</span>
                        </div>
                    </div>
                )}

                <SectionTitle icon={FileText} label="Notes" color="#64748b" />
                <textarea
                    value={form.notes}
                    onChange={e => setForm(f => ({ ...f, notes: e.target.value }))}
                    placeholder="Additional notes about this booking..."
                    style={{ minHeight: '80px', width: '100%', marginBottom: '1.5rem', fontSize: '0.875rem' }}
                />

                <div style={{ display: 'flex', gap: '1rem' }}>
                    <button onClick={handleSave} disabled={saving} style={{ flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '8px' }}>
                        <Save size={16} /> {saving ? 'Saving...' : 'Save Changes'}
                    </button>
                    <button onClick={onClose} style={{ flex: 0.5, background: 'rgba(255,255,255,0.05)', border: '1px solid rgba(255,255,255,0.1)', color: '#94a3b8' }}>
                        Cancel
                    </button>
                </div>
            </div>
        </div>
    );
};

const BookingManagement = () => {
    const [bookings, setBookings] = useState([]);
    const [expandedId, setExpandedId] = useState(null);
    const [editingBooking, setEditingBooking] = useState(null);
    const [selectedInvoiceTabs, setSelectedInvoiceTabs] = useState({});
    const [filterStatus, setFilterStatus] = useState('all');
    const [searchTerm, setSearchTerm] = useState('');
    const [selectedBooking, setSelectedBooking] = useState(null);
    const [startDate, setStartDate] = useState('');
    const [endDate, setEndDate] = useState('');
    const [showDatePicker, setShowDatePicker] = useState(false);
    const [showLastWeekCompleted, setShowLastWeekCompleted] = useState(false);
    const [currentPage, setCurrentPage] = useState(1);
    const [totalPages, setTotalPages] = useState(1);
    const [totalCount, setTotalCount] = useState(0);
    const [isLoading, setIsLoading] = useState(false);
    const [hasNext, setHasNext] = useState(false);
    const [hasPrevious, setHasPrevious] = useState(false);
    const [statusCounts, setStatusCounts] = useState({ all: 0, pending: 0, confirmed: 0, cancelled: 0, completed: 0, 'on-trip': 0, returned: 0 });
    const [reminders, setReminders] = useState([]);

    // --- Upcoming bookings state (derived from the same full-list fetch used for status counts) ---
    const [upcomingBookings, setUpcomingBookings] = useState([]);
    const [upcomingCount, setUpcomingCount] = useState(0);
    const [showUpcomingOnly, setShowUpcomingOnly] = useState(false);

    const handleRowClick = (booking) => {
        setSelectedBooking(booking);
    };

    const closeDetail = () => {
        setSelectedBooking(null);
    };
    const navigate = useNavigate();

    const fetchBookings = async (paramsOverride = null, page = null) => {
        setIsLoading(true);
        try {
            const params = new URLSearchParams();
            const currentPageToUse = page !== null ? page : currentPage;
            params.append('limit', '5');
            params.append('page', currentPageToUse.toString());

            if (paramsOverride) {
                Object.keys(paramsOverride).forEach(key => {
                    if (paramsOverride[key] !== null && paramsOverride[key] !== undefined && paramsOverride[key] !== '') {
                        params.append(key, paramsOverride[key]);
                    }
                });
            } else {
                if (showLastWeekCompleted) {
                    params.append('filterType', 'lastWeek');
                    if (filterStatus !== 'all') params.append('status', filterStatus);
                } else {
                    if (filterStatus !== 'all') params.append('status', filterStatus);
                }
                if (searchTerm) params.append('search', searchTerm);
                if (startDate) params.append('startDate', startDate);
                if (endDate) params.append('endDate', endDate);
            }

            const res = await api.get(`/bookings?${params.toString()}`);

            setBookings(res.data.bookings || []);
            setTotalPages(res.data.totalPages || 1);
            setTotalCount(res.data.totalCount || 0);
            setHasNext(res.data.hasNext || false);
            setHasPrevious(res.data.hasPrevious || false);

            const countParams = new URLSearchParams();
            countParams.append('limit', '10000');

            if (paramsOverride) {
                Object.keys(paramsOverride).forEach(key => {
                    if (key !== 'status' && paramsOverride[key]) {
                        countParams.append(key, paramsOverride[key]);
                    }
                });
            } else {
                if (showLastWeekCompleted) countParams.append('filterType', 'lastWeek');
                if (searchTerm) countParams.append('search', searchTerm);
                if (startDate) countParams.append('startDate', startDate);
                if (endDate) countParams.append('endDate', endDate);
            }

            const countRes = await api.get(`/bookings?${countParams.toString()}`);
            const list = countRes.data.bookings || [];
            const counts = list.reduce((acc, b) => {
                const sKey = (b.status || '').toLowerCase();
                acc[sKey] = (acc[sKey] || 0) + 1;
                acc.all = (acc.all || 0) + 1;
                return acc;
            }, { all: 0, pending: 0, confirmed: 0, cancelled: 0, completed: 0, 'on-trip': 0, returned: 0 });
            setStatusCounts(counts);

            setReminders(computeReminders(list));
            const upcoming = computeUpcoming(list);
            setUpcomingBookings(upcoming);
            setUpcomingCount(upcoming.length);

        } catch (err) {
            console.error('Error fetching bookings', err);
        } finally {
            setIsLoading(false);
        }
    };

    useEffect(() => {
        setCurrentPage(1);
    }, [showLastWeekCompleted, filterStatus, searchTerm, startDate, endDate]);

    useEffect(() => {
        const timer = setTimeout(() => {
            fetchBookings();
        }, 300);
        return () => clearTimeout(timer);
    }, [currentPage, searchTerm, filterStatus, startDate, endDate, showLastWeekCompleted]);

    useEffect(() => {
        const interval = setInterval(fetchBookings, 300000);
        return () => clearInterval(interval);
    }, [currentPage, searchTerm, filterStatus, startDate, endDate, showLastWeekCompleted]);

    const handleStatusChange = async (id, status) => {
        try {
            await api.patch(`/bookings/${id}`, { status });
            fetchBookings();
        } catch (err) {
            console.error('Error updating booking status', err);
        }
    };

    const getDisplayBookings = () => {
        if (showUpcomingOnly) {
            return upcomingBookings;
        }
        return bookings;
    };

    const filtered = getDisplayBookings();

    const statusFilters = ['all', 'confirmed', 'On-Trip', 'cancelled', 'returned', 'completed'];

    const calculateDays = (startDate, endDate) => {
        if (!startDate || !endDate) return 0;
        const start = new Date(startDate);
        const end = new Date(endDate);
        start.setHours(0, 0, 0, 0);
        end.setHours(0, 0, 0, 0);
        const diffInMs = end - start;
        if (diffInMs <= 0) return 0;
        const days = Math.ceil(diffInMs / (1000 * 60 * 60 * 24));
        return days;
    };

    const goToBookingFromReminder = (booking) => {
        setShowUpcomingOnly(false);
        setFilterStatus('all');
        setSearchTerm('');
        setStartDate('');
        setEndDate('');
        setShowLastWeekCompleted(false);
        setExpandedId(booking.id);
        setCurrentPage(1);
        fetchBookings(null, 1);

        setBookings(prev => {
            const exists = prev.some(b => b.id === booking.id);
            return exists ? prev : [booking, ...prev];
        });

        setTimeout(() => {
            const el = document.getElementById(`booking-${booking.id}`);
            if (el) el.scrollIntoView({ behavior: 'smooth', block: 'center' });
        }, 100);
    };

    // FIXED: Show upcoming bookings from local state
    const goToUpcomingBookings = () => {
        setShowUpcomingOnly(true);
        setFilterStatus('confirmed');
        setStartDate('');
        setEndDate('');
        setShowLastWeekCompleted(false);
        setExpandedId(null);
        setCurrentPage(1);
        // No need to fetch from API, just use the local upcomingBookings state
    };

    const handleStatusPillClick = (status) => {
        setShowUpcomingOnly(false);
        setFilterStatus(status);
        setCurrentPage(1);

        const params = {};
        if (startDate) params.startDate = startDate;
        if (endDate) params.endDate = endDate;
        if (showLastWeekCompleted) params.filterType = 'lastWeek';
        if (status !== 'all') params.status = status;

        if (Object.keys(params).length > 0) {
            fetchBookings(params, 1);
        } else {
            fetchBookings(null, 1);
        }
    };

    return (
        <div className="container-fluid text-white px-3 px-md-4">

            <div className="d-flex flex-wrap justify-content-between align-items-center mb-4 gap-3">
                <h3 className="m-0 fw-bold" style={{ letterSpacing: '-0.5px', background: 'linear-gradient(135deg, #ffffff 0%, #94a3b8 100%)', WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent' }}>Booking Management</h3>

                <div className="d-flex align-items-center gap-3" style={{ flexWrap: 'nowrap' }}>

                    <NotificationBell
                        reminders={reminders}
                        upcomingCount={upcomingCount}
                        onSelect={goToBookingFromReminder}
                        onUpcomingClick={goToUpcomingBookings}
                    />

                    <div style={{ position: 'relative', width: '240px', height: '42px', display: 'flex', alignItems: 'center' }}>
                        <Search size={16} style={{
                            position: 'absolute',
                            left: '14px',
                            color: '#94a3b8',
                            zIndex: 1
                        }} />
                        <input
                            value={searchTerm}
                            onChange={e => setSearchTerm(e.target.value)}
                            placeholder="Search booking or customer..."
                            style={{
                                paddingLeft: '42px',
                                height: '42px',
                                borderRadius: '12px',
                                background: 'rgba(30, 41, 59, 0.4)',
                                border: '1px solid rgba(255,255,255,0.1)',
                                color: 'white',
                                width: '100%',
                                outline: 'none',
                                fontSize: '0.875rem',
                                transition: 'all 0.3s ease',
                                margin: 0,
                                boxSizing: 'border-box'
                            }}
                            onFocus={(e) => { e.target.style.border = '1px solid #a855f7'; e.target.style.boxShadow = '0 0 10px rgba(168,85,247,0.2)'; }}
                            onBlur={(e) => { e.target.style.border = '1px solid rgba(255,255,255,0.1)'; e.target.style.boxShadow = 'none'; }}
                        />
                    </div>

                    <button
                        onClick={() => {
                            const newState = !showLastWeekCompleted;
                            setShowLastWeekCompleted(newState);
                            setStartDate("");
                            setEndDate("");
                            setShowDatePicker(false);
                            setCurrentPage(1);
                            setShowUpcomingOnly(false);

                            const params = {};
                            if (newState) params.filterType = 'lastWeek';
                            if (filterStatus !== 'all') params.status = filterStatus;

                            if (Object.keys(params).length > 0) {
                                fetchBookings(params, 1);
                            } else {
                                fetchBookings(null, 1);
                            }
                        }}
                        className={`glass-btn ${showLastWeekCompleted ? "active-success" : ""}`}
                    >
                        <Clock size={16}/>
                        <span>Last Week</span>
                    </button>

                    <div className="position-relative" style={{ height: '42px', display: 'flex', alignItems: 'center' }}>
                        <button
                            onClick={() => {
                                setShowDatePicker(!showDatePicker);
                                if (showLastWeekCompleted) setShowLastWeekCompleted(false);
                            }}
                            className={`glass-btn ${(startDate || endDate) ? 'active-success' : ''}`}
                        >
                            Filter
                        </button>

                        {showDatePicker && (
                            <div className="glass-dropdown p-3">
                                <label className="small text-secondary">START</label>
                                <DateTimePicker
                                    value={startDate}
                                    onChange={(iso) => setStartDate(iso)}
                                    placeholder="DD-MM-YYYY"
                                    className="mb-2"
                                    dateOnly={true}
                                />

                                <label className="small text-secondary mt-2">END</label>
                                <DateTimePicker
                                    value={endDate}
                                    onChange={(iso) => setEndDate(iso)}
                                    placeholder="DD-MM-YYYY"
                                    className="mb-3"
                                    dateOnly={true}
                                />

                                <div className="d-flex gap-2">
                                    <button
                                        onClick={() => {
                                            setStartDate('');
                                            setEndDate('');
                                            setFilterStatus('all');
                                            setShowDatePicker(false);
                                            setCurrentPage(1);
                                            setShowUpcomingOnly(false);
                                            fetchBookings(null, 1);
                                        }}
                                        className="btn btn-outline-danger w-50"
                                    >
                                        Reset
                                    </button>

                                    <button
                                        onClick={() => {
                                            setShowDatePicker(false);
                                            setCurrentPage(1);
                                            setShowUpcomingOnly(false);
                                            if (startDate || endDate) {
                                                const params = {};
                                                if (startDate) params.startDate = startDate;
                                                if (endDate) params.endDate = endDate;
                                                if (filterStatus !== 'all') params.status = filterStatus;
                                                fetchBookings(params, 1);
                                            } else {
                                                fetchBookings(null, 1);
                                            }
                                        }}
                                        className="btn btn-primary w-50"
                                    >
                                        Apply
                                    </button>
                                </div>
                            </div>
                        )}
                    </div>
                </div>
            </div>

            <div className="d-flex flex-wrap gap-2 mb-4">
                {statusFilters.map(s => {
                    const active = filterStatus === s;
                    const count = statusCounts[s.toLowerCase()] || 0;
                    return (
                        <button
                            key={s}
                            onClick={() => handleStatusPillClick(s)}
                            className={`glass-pill ${active ? "active-pill" : ""}`}
                        >
                            {s} ({count})
                        </button>
                    );
                })}
            </div>

            {showUpcomingOnly && (
                <div style={{
                    padding: '8px 16px',
                    marginBottom: '16px',
                    background: 'rgba(168, 85, 247, 0.1)',
                    border: '1px solid rgba(168, 85, 247, 0.3)',
                    borderRadius: '8px',
                    display: 'flex',
                    alignItems: 'center',
                    justifyContent: 'space-between'
                }}>
                    <span style={{ color: '#a855f7', fontWeight: 600 }}>
                        🔮 Showing {upcomingCount} upcoming booking{upcomingCount !== 1 ? 's' : ''} (confirmed, starting in 2-7 days)
                    </span>
                    <button
                        onClick={() => {
                            setShowUpcomingOnly(false);
                            setFilterStatus('all');
                            fetchBookings(null, 1);
                        }}
                        style={{
                            background: 'transparent',
                            border: '1px solid rgba(255,255,255,0.1)',
                            color: '#94a3b8',
                            padding: '4px 12px',
                            borderRadius: '6px',
                            cursor: 'pointer',
                            fontSize: '0.8rem'
                        }}
                    >
                        Show All
                    </button>
                </div>
            )}

            {/* BOOKINGS */}
            {isLoading ? (
                <div className="text-center my-5">
                    <div className="spinner-border text-primary" role="status">
                        <span className="visually-hidden">Loading...</span>
                    </div>
                    <div className="mt-2 text-secondary">Fetching bookings...</div>
                </div>
            ) : (
                <div className="d-flex flex-column gap-3">
                    {filtered.length === 0 ? (
                        <div className="text-center py-5">
                            <div style={{ fontSize: '3rem', marginBottom: '1rem' }}>📋</div>
                            <h5 style={{ color: '#94a3b8' }}>No bookings found</h5>
                            <p style={{ color: '#64748b', fontSize: '0.9rem' }}>
                                {showUpcomingOnly ? 'No upcoming bookings found in the next 2-7 days' :
                                filterStatus !== 'all' ? `No ${filterStatus} bookings match your criteria` : 'No bookings available'}
                            </p>
                        </div>
                    ) : (
                        filtered.map(booking => {
                            const isExpanded = expandedId === booking.id;
                            const numDays = calculateDays(booking.start_date, booking.end_date);
                            const basePrice = Number(booking.base_price || booking.total_price);
                            const discountAmt = Number(booking.discount_amount || 0);
                            const finalPrice = basePrice - discountAmt;

                            return (
                                <div id={`booking-${booking.id}`} key={booking.id} className="glass-card" style={{
                                    borderLeft: isExpanded ? '4px solid transparent' : `4px solid ${STATUS_COLORS[booking.status?.toLowerCase()]?.color || 'transparent'}`,
                                    overflow: 'hidden',
                                    position: 'relative'
                                }}>

                                    <div
                                        className="row align-items-center g-0 p-4"
                                        onClick={(e) => {
                                            if (e.target.closest('.expand-toggle') || e.target.closest('button') || e.target.closest('.invoice-download-toggle') || e.target.closest('.invoice-dropdown')) return;
                                            navigate(`/AddBooking?id=${booking.id}`);
                                        }}
                                        style={{ cursor: "pointer" }}
                                    >

                                        {/* Car */}
                                        <div className="col-md-3 d-flex align-items-center gap-3 pe-3" style={{ borderRight: '1px solid rgba(255,255,255,0.06)' }}>
                                            <div style={{ position: 'relative', overflow: 'hidden', borderRadius: '10px', border: '1px solid rgba(255,255,255,0.1)' }}>
                                                <img
                                                    src={booking.image_url}
                                                    alt=""
                                                    className="car-img"
                                                    style={{ display: 'block', transition: 'transform 0.4s ease' }}
                                                    onMouseOver={(e) => e.currentTarget.style.transform = 'scale(1.1)'}
                                                    onMouseOut={(e) => e.currentTarget.style.transform = 'scale(1)'}
                                                />
                                            </div>
                                            <div>
                                                <div style={{ fontSize: '0.7rem', color: '#94a3b8', textTransform: 'uppercase', letterSpacing: '0.08em', fontWeight: '700', marginBottom: '2px' }}>Booking #{booking.id}</div>
                                                <div className="fw-bold" style={{ fontSize: '1.05rem', color: '#f8fafc' }}>{booking.brand} {booking.model}</div>
                                            </div>
                                        </div>

                                        {/* Customer */}
                                        <div className="col-md-2 px-3" style={{ borderRight: '1px solid rgba(255,255,255,0.06)' }}>
                                            <div style={{ fontSize: '0.7rem', color: '#94a3b8', textTransform: 'uppercase', letterSpacing: '0.08em', fontWeight: '700', marginBottom: '2px' }}>Customer</div>
                                            <div className="fw-semibold" style={{ fontSize: '0.95rem', color: '#e2e8f0' }}>{booking.customer_name}</div>
                                            <div style={{ fontSize: '0.8rem', color: '#64748b' }}>{booking.customer_email}</div>
                                        </div>

                                        {/* Dates */}
                                        <div className="col-md-2 px-3" style={{ borderRight: '1px solid rgba(255,255,255,0.06)' }}>
                                            <div style={{ fontSize: '0.7rem', color: '#94a3b8', textTransform: 'uppercase', letterSpacing: '0.08em', fontWeight: '700', marginBottom: '2px' }}>Dates & Duration</div>
                                            <div style={{ fontSize: '0.9rem', color: '#e2e8f0', fontWeight: '500' }}>{fmt(booking.start_date)} → {fmt(booking.end_date)}</div>
                                            <div style={{ fontSize: '0.8rem', color: '#a855f7', fontWeight: '600' }}>{numDays} day{numDays !== 1 ? 's' : ''}</div>
                                        </div>

                                        {/* Price & Status */}
                                        <div className="col-md-5 d-flex align-items-center ps-3 pe-2">
                                            <div style={{ minWidth: '85px' }}>
                                                <div style={{ fontSize: '0.7rem', color: '#94a3b8', textTransform: 'uppercase', letterSpacing: '0.08em', fontWeight: '700', marginBottom: '2px' }}>Base Amount</div>
                                                <div className="fw-bold" style={{ fontSize: '1.25rem', background: 'linear-gradient(135deg, #e2e8f0 0%, #94a3b8 100%)', WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent' }}>
                                                    {fmtAED(finalPrice)}
                                                </div>
                                            </div>

                                            <div className="ms-auto d-flex align-items-center">
                                                <span style={{
                                                    display: 'inline-block',
                                                    minWidth: '95px',
                                                    textAlign: 'center',
                                                    textTransform: 'uppercase',
                                                    letterSpacing: '0.05em',
                                                    fontWeight: '700',
                                                    fontSize: '0.75rem',
                                                    padding: '6px 12px',
                                                    borderRadius: '50px',
                                                    background: STATUS_COLORS[booking.status?.toLowerCase()]?.bg || 'rgba(255,255,255,0.1)',
                                                    color: STATUS_COLORS[booking.status?.toLowerCase()]?.color || '#fff',
                                                    border: `1px solid ${STATUS_COLORS[booking.status?.toLowerCase()]?.color || '#fff'}40`,
                                                    boxShadow: `0 4px 10px ${STATUS_COLORS[booking.status?.toLowerCase()]?.bg || 'rgba(0,0,0,0)'}`
                                                }}>
                                                    {booking.status}
                                                </span>

                                                <div className="ms-2 d-flex align-items-center flex-wrap gap-2">
                                                    {Math.ceil(numDays / 30) <= 1 ? (
                                                        <div className="d-flex">
                                                            <div style={{ background: 'rgba(255,255,255,0.05)', border: '1px solid rgba(255,255,255,0.1)', borderRight: 'none', borderRadius: '8px 0 0 8px', padding: '0 10px', height: '28px', color: '#e2e8f0', fontSize: '0.75rem', display: 'flex', alignItems: 'center', justifyContent: 'center', whiteSpace: 'nowrap', margin: 0, boxSizing: 'border-box' }}>
                                                                Invoice 1
                                                            </div>
                                                            <div
                                                                className="invoice-download-toggle"
                                                                onClick={(e) => { e.stopPropagation(); window.open(`/print/invoice/${booking.id}?tab=0`, '_blank'); }}
                                                                style={{ background: 'rgba(168, 85, 247, 0.1)', border: '1px solid rgba(168, 85, 247, 0.3)', borderRadius: '0 8px 8px 0', padding: '0 10px', height: '28px', cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center', transition: 'all 0.2s', margin: 0, boxSizing: 'border-box' }}
                                                                onMouseOver={(e) => e.currentTarget.style.background = 'rgba(168, 85, 247, 0.2)'}
                                                                onMouseOut={(e) => e.currentTarget.style.background = 'rgba(168, 85, 247, 0.1)'}
                                                                title="Download Invoice 1"
                                                            >
                                                                <Download size={14} style={{ color: '#a855f7' }} />
                                                            </div>
                                                        </div>
                                                    ) : (
                                                        <div className="d-flex">
                                                            <select
                                                                className="form-select form-select-sm invoice-dropdown"
                                                                style={{
                                                                    backgroundColor: 'rgba(255,255,255,0.05)',
                                                                    border: '1px solid rgba(255,255,255,0.1)',
                                                                    borderRight: 'none',
                                                                    color: '#e2e8f0',
                                                                    borderRadius: '8px 0 0 8px',
                                                                    fontSize: '0.75rem',
                                                                    width: 'auto',
                                                                    minWidth: '85px',
                                                                    padding: '0 28px 0 10px',
                                                                    height: '28px',
                                                                    lineHeight: '26px',
                                                                    whiteSpace: 'nowrap',
                                                                    margin: 0,
                                                                    boxSizing: 'border-box'
                                                                }}
                                                                value={selectedInvoiceTabs[booking.id] || 0}
                                                                onClick={(e) => e.stopPropagation()}
                                                                onChange={(e) => {
                                                                    e.stopPropagation();
                                                                    setSelectedInvoiceTabs(prev => ({ ...prev, [booking.id]: parseInt(e.target.value) }));
                                                                }}
                                                            >
                                                                {[...Array(Math.ceil(numDays / 30))].map((_, i) => (
                                                                    <option key={i} value={i} style={{ background: '#1e293b', color: '#fff' }}>
                                                                        Invoice {i + 1}
                                                                    </option>
                                                                ))}
                                                            </select>
                                                            <div
                                                                className="invoice-download-toggle d-flex align-items-center justify-content-center"
                                                                onClick={(e) => {
                                                                    e.stopPropagation();
                                                                    const tab = selectedInvoiceTabs[booking.id] || 0;
                                                                    window.open(`/print/invoice/${booking.id}?tab=${tab}`, '_blank');
                                                                }}
                                                                style={{
                                                                    background: 'rgba(168, 85, 247, 0.1)',
                                                                    border: '1px solid rgba(168, 85, 247, 0.3)',
                                                                    borderRadius: '0 8px 8px 0',
                                                                    padding: '0 10px',
                                                                    height: '28px',
                                                                    cursor: 'pointer',
                                                                    transition: 'all 0.2s',
                                                                    display: 'flex',
                                                                    alignItems: 'center',
                                                                    justifyContent: 'center',
                                                                    margin: 0,
                                                                    boxSizing: 'border-box'
                                                                }}
                                                                onMouseOver={(e) => e.currentTarget.style.background = 'rgba(168, 85, 247, 0.2)'}
                                                                onMouseOut={(e) => e.currentTarget.style.background = 'rgba(168, 85, 247, 0.1)'}
                                                                title="Download Selected Invoice"
                                                            >
                                                                <Download size={14} style={{ color: '#a855f7' }} />
                                                            </div>
                                                        </div>
                                                    )}
                                                </div>
                                            </div>
                                            <div
                                                className="ms-2 expand-toggle"
                                                onClick={(e) => {
                                                    e.stopPropagation();
                                                    setExpandedId(isExpanded ? null : booking.id);
                                                }}
                                                style={{ color: isExpanded ? '#a855f7' : '#64748b', transition: 'color 0.2s ease', padding: '10px', marginRight: '-10px', cursor: 'pointer' }}
                                            >
                                                {isExpanded ? <ChevronUp size={20} /> : <ChevronDown size={20} />}
                                            </div>
                                        </div>
                                    </div>

                                    {isExpanded && (
                                        <div style={{ borderTop: '1px solid rgba(255,255,255,0.07)', padding: '1.5rem', background: 'rgba(0,0,0,0.15)' }}>
                                            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))', gap: '1.5rem' }}>

                                                <div style={{ background: 'rgba(255,255,255,0.02)', borderRadius: '12px', padding: '1.5rem', border: '1px solid rgba(255,255,255,0.06)' }}>
                                                    <SectionTitle icon={User} label="Customer Details" color="#a855f7" />
                                                    <InfoRow icon={User} label="Full Name" value={booking.customer_name || booking.user_name} />
                                                    <InfoRow icon={Mail} label="Email" value={booking.customer_email || booking.user_email} />
                                                    <InfoRow icon={Phone} label="Phone" value={booking.customer_phone} />
                                                    <InfoRow icon={MapPin} label="Address" value={booking.customer_address} />
                                                    <InfoRow icon={Shield} label="Driver's License" value={booking.customer_license} mono />
                                                </div>

                                                <div style={{ background: 'rgba(255,255,255,0.02)', borderRadius: '12px', padding: '1.5rem', border: '1px solid rgba(255,255,255,0.06)' }}>
                                                    <SectionTitle icon={CreditCard} label="Payment Details" color="#a855f7" />
                                                    {booking.payment_type !== 'Cash' && booking.payment_method !== 'Cash' && (
                                                        <div style={{
                                                            background: 'linear-gradient(135deg, #4f46e5 0%, #7c3aed 60%, #a855f7 100%)',
                                                            borderRadius: '12px', padding: '1rem 1.25rem', marginBottom: '1rem',
                                                            boxShadow: '0 8px 24px rgba(139,92,246,0.35)',
                                                        }}>
                                                            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '1.5rem' }}>
                                                                <span style={{ fontSize: '0.75rem', fontWeight: 700, opacity: 0.8, letterSpacing: '0.12em' }}>{booking.cc_type || 'CARD'}</span>
                                                                <CreditCard size={20} color="rgba(255,255,255,0.7)" />
                                                            </div>
                                                            <div style={{ fontFamily: 'monospace', fontSize: '1.05rem', letterSpacing: '0.25em', marginBottom: '1rem', color: 'rgba(255,255,255,0.9)' }}>
                                                                •••• •••• •••• {booking.cc_last4 || '****'}
                                                            </div>
                                                            <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: '0.75rem', opacity: 0.85 }}>
                                                                <div>
                                                                    <div style={{ opacity: 0.7, fontSize: '0.65rem', letterSpacing: '0.06em' }}>CARD HOLDER</div>
                                                                    <div style={{ fontWeight: 700, letterSpacing: '0.05em' }}>{booking.cc_holder || '—'}</div>
                                                                </div>
                                                                <div style={{ textAlign: 'right' }}>
                                                                    <div style={{ opacity: 0.7, fontSize: '0.65rem', letterSpacing: '0.06em' }}>EXPIRES</div>
                                                                    <div style={{ fontWeight: 700 }}>{booking.cc_expiry || '—'}</div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    )}

                                                    <InfoRow icon={CreditCard} label="Payment Type" value={booking.payment_type} />
                                                    {booking.status?.toLowerCase() === 'cancelled' ? (
                                                         <InfoRow icon={Wallet} label="Payment Status" value="Trip Cancelled" />
                                                     ) : (
                                                         <>
                                                             <InfoRow icon={Wallet} label="Payment Status" value={booking.payment_status?.toLowerCase() === 'paid' ? 'Paid' : 'Not Paid'} />
                                                             {booking.payment_status?.toLowerCase() === 'paid' ? (
                                                                 <InfoRow icon={Wallet} label="Amount Paid" value={fmtAED(booking.total_price)} />
                                                             ) : (
                                                                 <>
                                                                     <InfoRow icon={Wallet} label="Total Amount" value={fmtAED(booking.total_price)} />
                                                                     <InfoRow icon={Wallet} label="Balance to Pay" value={fmtAED(booking.total_price)} />
                                                                 </>
                                                             )}
                                                         </>
                                                     )}
                                                </div>

                                                <div style={{ background: 'rgba(255,255,255,0.02)', borderRadius: '12px', padding: '1.5rem', border: '1px solid rgba(255,255,255,0.06)' }}>
                                                    <SectionTitle icon={Wallet} label="Pricing Breakdown" color="#a855f7" />
                                                    <div style={{ fontSize: '0.875rem' }}>

                                                        {booking.price_per_hour && (
                                                            <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '8px', color: '#94a3b8' }}>
                                                                <span>Hourly rate</span>
                                                                <span>{fmtAED(booking.price_per_hour)}</span>
                                                            </div>
                                                        )}
                                                        {booking.price_per_week && (
                                                            <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '8px', color: '#94a3b8' }}>
                                                                <span>Weekly rate</span>
                                                                <span>{fmtAED(booking.price_per_week)}</span>
                                                            </div>
                                                        )}
                                                        {booking.price_per_month && (
                                                            <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '8px', color: '#94a3b8' }}>
                                                                <span>Monthly rate</span>
                                                                <span>{fmtAED(booking.price_per_month)}</span>
                                                            </div>
                                                        )}
                                                        <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '8px', color: '#94a3b8' }}>
                                                            <span>Duration</span>
                                                            <span>{numDays} day{numDays !== 1 ? 's' : ''}</span>
                                                        </div>
                                                        <div style={{ height: '1px', background: 'rgba(255,255,255,0.08)', margin: '10px 0' }} />
                                                        <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '6px' }}>
                                                            <span style={{ color: '#94a3b8' }}>Base Price</span>
                                                            <span>{fmtAED(basePrice)}</span>
                                                        </div>
                                                        {discountAmt > 0 && (
                                                            <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '6px', color: '#22c55e' }}>
                                                                <span style={{ display: 'flex', alignItems: 'center', gap: '5px' }}>
                                                                    <Tag size={12} /> {booking.discount_code || 'Discount'} ({booking.discount_percent}%)
                                                                </span>
                                                                <span>− {fmtAED(discountAmt)}</span>
                                                            </div>
                                                        )}
                                                        {booking.tax_amount && parseFloat(booking.tax_amount) > 0 && (
                                                            <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '6px', color: '#f87171' }}>
                                                                <span>Tax ({booking.tax_amount}%)</span>
                                                                <span>+ {fmtAED((basePrice * (parseFloat(booking.tax_amount) || 0)) / 100)}</span>
                                                            </div>
                                                        )}
                                                        <div style={{ height: '1px', background: 'rgba(255,255,255,0.08)', margin: '10px 0' }} />
                                                        <div style={{ display: 'flex', justifyContent: 'space-between', fontWeight: 700, fontSize: '1rem' }}>
                                                            <span>Grand Total</span>
                                                            <span style={{ color: '#a855f7' }}>{fmtAED(booking.total_price)}</span>
                                                        </div>
                                                    </div>

                                                    {booking.discount_code && (
                                                        <div style={{ marginTop: '1rem', display: 'flex', alignItems: 'center', gap: '6px', background: 'rgba(34,197,94,0.1)', borderRadius: '8px', padding: '8px 12px', fontSize: '0.8rem', color: '#22c55e' }}>
                                                            <BadgePercent size={14} />
                                                            Code: <strong>{booking.discount_code}</strong> — saved {fmtAED(discountAmt)}
                                                        </div>
                                                    )}
                                                </div>

                                                <div style={{ background: 'rgba(255,255,255,0.02)', borderRadius: '12px', padding: '1.5rem', border: '1px solid rgba(255,255,255,0.06)' }}>
                                                    <SectionTitle icon={Car} label="Booking Info" color="#94a3b8" />
                                                    <InfoRow icon={Hash} label="Booking ID" value={`#${booking.id}`} mono />
                                                    <InfoRow icon={Car} label="Vehicle" value={`${booking.brand} ${booking.model} (${booking.year})`} />
                                                    <InfoRow icon={Calendar} label="From" value={fmt(booking.start_date)} />
                                                    <InfoRow icon={Calendar} label="To" value={fmt(booking.end_date)} />
                                                    <InfoRow icon={Clock} label="Duration" value={`${numDays} day${numDays !== 1 ? 's' : ''}`} />
                                                    {booking.notes && <InfoRow icon={FileText} label="Notes" value={booking.notes} />}
                                                </div>
                                            </div>

                                            <div style={{ display: 'flex', gap: '10px', marginTop: '1.5rem', flexWrap: 'wrap' }}>
                                                <button
                                                    onClick={(e) => {
                                                        e.stopPropagation();
                                                        navigate(`/AddBooking?id=${booking.id}`);
                                                    }}
                                                    style={{
                                                        display: 'flex',
                                                        alignItems: 'center',
                                                        gap: '8px',
                                                        background: 'transparent',
                                                        border: '1px solid rgba(255,255,255,0.15)',
                                                        color: '#e2e8f0',
                                                        padding: '8px 24px',
                                                        fontSize: '0.85rem',
                                                        fontWeight: '500',
                                                        borderRadius: '50px',
                                                        transition: 'all 0.2s ease'
                                                    }}
                                                    onMouseOver={(e) => { e.currentTarget.style.background = '#fff'; e.currentTarget.style.color = '#000'; e.currentTarget.style.borderColor = '#fff'; }}
                                                    onMouseOut={(e) => { e.currentTarget.style.background = 'transparent'; e.currentTarget.style.color = '#e2e8f0'; e.currentTarget.style.borderColor = 'rgba(255,255,255,0.15)'; }}
                                                >
                                                    <Edit size={14} /> Edit Details
                                                </button>
                                            </div>
                                        </div>
                                    )}

                                </div>
                            );
                        })
                    )}
                </div>
            )}

            {/* PAGINATION */}
            {filtered.length > 0 && !showUpcomingOnly && (
                <div className="d-flex justify-content-center align-items-center gap-4 mt-5 mb-4">
                    <button
                        disabled={!hasPrevious}
                        onClick={() => setCurrentPage(p => p - 1)}
                        className="glass-btn"
                        style={{ opacity: !hasPrevious ? 0.4 : 1, width: '110px', justifyContent: 'center', cursor: !hasPrevious ? 'not-allowed' : 'pointer' }}
                    >
                        Previous
                    </button>

                    <div style={{ fontSize: '0.85rem', color: '#94a3b8', fontWeight: '700', letterSpacing: '0.08em', textTransform: 'uppercase' }}>
                        Page <span style={{ color: '#fff', fontSize: '1rem', margin: '0 4px' }}>{currentPage}</span> of <span style={{ color: '#fff', margin: '0 4px' }}>{totalPages}</span>
                    </div>

                    <button
                        disabled={!hasNext}
                        onClick={() => setCurrentPage(p => p + 1)}
                        className="glass-btn"
                        style={{ opacity: !hasNext ? 0.4 : 1, width: '110px', justifyContent: 'center', cursor: !hasNext ? 'not-allowed' : 'pointer' }}
                    >
                        Next
                    </button>
                </div>
            )}

            <style>{`
                .glass-card {
                    background: linear-gradient(135deg, rgba(30, 41, 59, 0.45) 0%, rgba(15, 23, 42, 0.45) 100%);
                    border: 1px solid rgba(255, 255, 255, 0.08);
                    border-radius: 16px;
                    backdrop-filter: blur(16px);
                    box-shadow: 0 12px 30px -10px rgba(0, 0, 0, 0.6);
                    transition: all 0.3s ease;
                }

                .glass-card:hover {
                    border-color: rgba(255, 255, 255, 0.12);
                    box-shadow: 0 16px 36px -8px rgba(0, 0, 0, 0.7);
                    transform: translateY(-2px);
                }

                .glass-input {
                    background: rgba(255,255,255,0.05);
                    border: 1px solid rgba(255,255,255,0.1);
                    color: white;
                    border-radius: 10px;
                }

                .glass-btn {
                    height: 42px;
                    padding: 0 18px;
                    border-radius: 12px;
                    background: rgba(255,255,255,0.03);
                    border: 1px solid rgba(255,255,255,0.12);
                    color: #cbd5e1;
                    font-weight: 500;
                    transition: all 0.2s ease;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    gap: 8px;
                }

                .glass-pill {
                    padding: 6px 18px;
                    border-radius: 50px;
                    background: rgba(255,255,255,0.03);
                    border: 1px solid rgba(255,255,255,0.12);
                    color: #cbd5e1;
                    font-weight: 500;
                    font-size: 0.85rem;
                    transition: all 0.2s ease;
                    text-transform: capitalize;
                }

                .active-pill {
                    border: 1px solid #a855f7;
                    color: #a855f7;
                    background: rgba(168, 85, 247, 0.1);
                }

                .glass-dropdown {
                    position: absolute;
                    top: 50px;
                    right: 0;
                    width: 260px;
                    background: #1e293b;
                    border-radius: 12px;
                    z-index: 1000;
                    box-shadow: 0 8px 25px rgba(0,0,0,0.5);
                    border: 1px solid rgba(255,255,255,0.08);
                }

                .car-img {
                    width: 70px;
                    height: 50px;
                    object-fit: cover;
                    border-radius: 8px;
                }

                .status-badge {
                    background: rgba(34,197,94,0.15);
                    color: #22c55e;
                    padding: 4px 10px;
                    border-radius: 50px;
                    font-size: 12px;
                }

                .glass-btn:hover,
                .glass-pill:hover,
                .btn-outline-light:hover {
                    background: rgba(255,255,255,0.06) !important;
                    color: white !important;
                    border-color: rgba(255,255,255,0.25) !important;
                    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
                }

                .glass-btn.active-success {
                    background: rgba(168, 85, 247, 0.15) !important;
                    color: #a855f7 !important;
                    border: 1px solid #a855f7 !important;
                    box-shadow: 0 0 10px rgba(168, 85, 247, 0.2);
                }

                .glass-btn.active-success:hover {
                    background: rgba(168, 85, 247, 0.25) !important;
                    color: #a855f7 !important;
                    border-color: #a855f7 !important;
                    box-shadow: 0 0 15px rgba(168, 85, 247, 0.4);
                }

                .glass-pill:hover {
                    transform: translateY(-1px);
                }





           /* ─── BookingManagement Mobile Responsive Styles ─── */

/* Tablet and below */
@media (max-width: 991.98px) {
    /* Header - stack vertically */
    .d-flex.flex-wrap.justify-content-between.align-items-center.mb-4 {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 12px !important;
    }

    .d-flex.flex-wrap.justify-content-between.align-items-center.mb-4 h3 {
        text-align: center !important;
        font-size: 1.3rem !important;
    }

    .d-flex.align-items-center.gap-3 {
        flex-wrap: wrap !important;
        justify-content: center !important;
        width: 100% !important;
    }

    /* Search bar - full width */
    .d-flex.align-items-center.gap-3 > div[style*="position: relative"] {
        flex: 1 !important;
        min-width: 200px !important;
        width: 100% !important;
    }

    .d-flex.align-items-center.gap-3 > div[style*="position: relative"] input {
        width: 100% !important;
    }

    /* Glass buttons - smaller */
    .glass-btn {
        height: 38px !important;
        padding: 0 12px !important;
        font-size: 0.8rem !important;
    }

    .glass-btn svg {
        width: 14px !important;
        height: 14px !important;
    }

    /* Notification bell dropdown */
    .glass-dropdown[style*="width: 380px"] {
        width: 320px !important;
        right: -100px !important;
    }
}

/* Mobile phones */
@media (max-width: 767.98px) {
    /* Container padding */
    .container-fluid {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    /* Header */
    .d-flex.flex-wrap.justify-content-between.align-items-center.mb-4 h3 {
        font-size: 1.1rem !important;
        text-align: left !important;
    }

    .d-flex.align-items-center.gap-3 {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 8px !important;
    }

    .d-flex.align-items-center.gap-3 > div[style*="position: relative"] {
        width: 100% !important;
        min-width: unset !important;
    }

    .d-flex.align-items-center.gap-3 > div[style*="position: relative"] input {
        height: 38px !important;
        font-size: 0.8rem !important;
    }

    /* Filter buttons row - wrap */
    .d-flex.flex-wrap.gap-2.mb-4 {
        gap: 6px !important;
    }

    .d-flex.flex-wrap.gap-2.mb-4 .glass-pill {
        padding: 4px 12px !important;
        font-size: 0.7rem !important;
        flex: 1 0 auto !important;
        text-align: center !important;
        min-width: calc(33.33% - 6px) !important;
    }

    /* Booking cards */
    .glass-card .row.align-items-center.g-0.p-4 {
        padding: 12px !important;
        flex-direction: column !important;
        align-items: stretch !important;
    }

    .glass-card .row.align-items-center.g-0.p-4 > .col-md-3 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        padding: 6px 0 !important;
        border-right: none !important;
        border-bottom: 1px solid rgba(255,255,255,0.05) !important;
    }

    .glass-card .row.align-items-center.g-0.p-4 > .col-md-3:last-child {
        border-bottom: none !important;
    }

    /* Car image in booking card */
    .glass-card .row .col-md-3.d-flex.align-items-center.gap-3 {
        gap: 10px !important;
    }

    .car-img {
        width: 50px !important;
        height: 38px !important;
    }

    .glass-card .row .col-md-3 .fw-bold[style*="font-size: 1.05rem"] {
        font-size: 0.9rem !important;
    }

    .glass-card .row .col-md-3 .fs-6 {
        font-size: 0.8rem !important;
    }

    /* Price & Status section */
    .glass-card .row .col-md-3.d-flex.align-items-center.ps-4 {
        padding-left: 0 !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
        padding-top: 6px !important;
    }

    .glass-card .row .col-md-3.d-flex.align-items-center.ps-4 > div:first-child {
        min-width: auto !important;
        flex: 1 !important;
    }

    .glass-card .row .col-md-3.d-flex.align-items-center.ps-4 > div:first-child .fw-bold {
        font-size: 1rem !important;
    }

    .glass-card .row .col-md-3.d-flex.align-items-center.ps-4 .ms-auto {
        margin-left: 0 !important;
        flex: 1 !important;
        text-align: right !important;
    }

    .glass-card .row .col-md-3.d-flex.align-items-center.ps-4 span[style*="min-width: 95px"] {
        min-width: 70px !important;
        font-size: 0.6rem !important;
        padding: 4px 8px !important;
    }

    /* Expanded view */
    .glass-card > div[style*="borderTop: 1px solid"] {
        padding: 12px !important;
    }

    .glass-card > div[style*="borderTop: 1px solid"] > div[style*="display: grid"] {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    /* Expanded card sections */
    .glass-card > div[style*="borderTop: 1px solid"] > div[style*="display: grid"] > div {
        padding: 12px !important;
    }

    /* Payment card */
    .glass-card > div[style*="borderTop: 1px solid"] > div[style*="display: grid"] > div[style*="background: linear-gradient(135deg, #4f46e5"] {
        padding: 10px 14px !important;
    }

    /* Action buttons */
    .glass-card > div[style*="borderTop: 1px solid"] > div[style*="display: flex"][style*="gap: 10px"] {
        flex-wrap: wrap !important;
    }

    .glass-card > div[style*="borderTop: 1px solid"] > div[style*="display: flex"][style*="gap: 10px"] button {
        flex: 1 0 auto !important;
        min-width: calc(50% - 5px) !important;
        justify-content: center !important;
        padding: 8px 12px !important;
        font-size: 0.75rem !important;
    }

    /* Notification dropdown */
    .glass-dropdown[style*="width: 380px"] {
        width: 280px !important;
        right: -80px !important;
        max-height: 400px !important;
    }

    .glass-dropdown[style*="width: 380px"] > div[style*="display: flex"][style*="padding: 10px"] {
        padding: 8px !important;
        gap: 8px !important;
    }

    .glass-dropdown[style*="width: 380px"] > div[style*="display: flex"][style*="padding: 10px"] > div:first-child {
        width: 24px !important;
        height: 24px !important;
    }

    .glass-dropdown[style*="width: 380px"] > div[style*="display: flex"][style*="padding: 10px"] > div:first-child svg {
        width: 12px !important;
        height: 12px !important;
    }

    .glass-dropdown[style*="width: 380px"] > div[style*="display: flex"][style*="padding: 10px"] > div[style*="flex: 1"] > div:first-child {
        font-size: 0.75rem !important;
    }

    .glass-dropdown[style*="width: 380px"] > div[style*="display: flex"][style*="padding: 10px"] > div[style*="flex: 1"] > div:last-child {
        font-size: 0.7rem !important;
    }

    /* Date picker dropdown */
    .position-relative .glass-dropdown {
        width: 220px !important;
        right: -60px !important;
        padding: 12px !important;
    }

    .position-relative .glass-dropdown .d-flex.gap-2 {
        flex-direction: column !important;
    }

    .position-relative .glass-dropdown .d-flex.gap-2 button {
        width: 100% !important;
    }

    /* Pagination */
    .d-flex.justify-content-center.align-items-center.gap-4.mt-5 {
        gap: 8px !important;
        flex-wrap: wrap !important;
    }

    .d-flex.justify-content-center.align-items-center.gap-4.mt-5 .glass-btn {
        width: 80px !important;
        font-size: 0.7rem !important;
        height: 34px !important;
        padding: 0 8px !important;
    }

    .d-flex.justify-content-center.align-items-center.gap-4.mt-5 > div[style*="font-size: 0.85rem"] {
        font-size: 0.75rem !important;
    }

    /* Status pill counts - hide on mobile */
    .glass-pill span {
        font-size: 0.6rem !important;
    }
}

/* Very small phones */
@media (max-width: 420px) {
    .d-flex.flex-wrap.gap-2.mb-4 .glass-pill {
        min-width: calc(50% - 6px) !important;
        font-size: 0.65rem !important;
        padding: 3px 8px !important;
    }

    .glass-card .row.align-items-center.g-0.p-4 {
        padding: 8px !important;
    }

    .glass-card .row .col-md-3 .fw-bold[style*="font-size: 1.05rem"] {
        font-size: 0.8rem !important;
    }

    .car-img {
        width: 40px !important;
        height: 30px !important;
    }

    .glass-card .row .col-md-3.d-flex.align-items-center.ps-4 > div:first-child .fw-bold {
        font-size: 0.9rem !important;
    }

    .glass-card .row .col-md-3.d-flex.align-items-center.ps-4 span[style*="min-width: 95px"] {
        min-width: 60px !important;
        font-size: 0.55rem !important;
        padding: 3px 6px !important;
    }

    .glass-card .row .col-md-3 > div[style*="font-size: 0.9rem"] {
        font-size: 0.75rem !important;
    }

    .glass-card .row .col-md-3 > div[style*="font-size: 0.8rem"] {
        font-size: 0.65rem !important;
    }

    /* Notification dropdown - full width */
    .glass-dropdown[style*="width: 380px"] {
        width: calc(100vw - 30px) !important;
        right: -15px !important;
        max-height: 350px !important;
    }

    /* Date picker dropdown - full width */
    .position-relative .glass-dropdown {
        width: calc(100vw - 30px) !important;
        right: -15px !important;
    }

    .glass-dropdown .glass-input {
        font-size: 14px !important;
    }
}

/* Landscape mobile */
@media (max-width: 767.98px) and (orientation: landscape) {
    .glass-card .row.align-items-center.g-0.p-4 {
        flex-direction: row !important;
        flex-wrap: wrap !important;
    }

    .glass-card .row.align-items-center.g-0.p-4 > .col-md-3 {
        flex: 0 0 50% !important;
        max-width: 50% !important;
        border-right: 1px solid rgba(255,255,255,0.05) !important;
        border-bottom: none !important;
        padding: 4px 8px !important;
    }

    .glass-card .row.align-items-center.g-0.p-4 > .col-md-3:nth-child(2) {
        border-right: none !important;
    }

    .glass-card .row.align-items-center.g-0.p-4 > .col-md-3:last-child {
        border-right: none !important;
    }

    .d-flex.align-items-center.gap-3 {
        flex-direction: row !important;
        flex-wrap: wrap !important;
    }

    .d-flex.align-items-center.gap-3 > div[style*="position: relative"] {
        flex: 1 !important;
        min-width: 150px !important;
    }
}

/* Touch device optimizations */
@media (hover: none) and (pointer: coarse) {
    /* Larger touch targets */
    .glass-btn,
    .glass-pill,
    .glass-card .row .col-md-3.d-flex.align-items-center.ps-4 .ms-auto span,
    .glass-card > div[style*="borderTop: 1px solid"] > div[style*="display: flex"][style*="gap: 10px"] button {
        min-height: 44px !important;
        min-width: 44px !important;
    }

    /* Remove hover effects on touch */
    .glass-card:hover {
        transform: none !important;
    }

    .car-img {
        transition: none !important;
    }

    .car-img:hover {
        transform: none !important;
    }

    .glass-btn:hover,
    .glass-pill:hover {
        transform: none !important;
    }
}

/* Fix for iOS Safari */
@supports (-webkit-touch-callout: none) {
    .glass-input {
        font-size: 16px !important; /* Prevents iOS zoom */
    }

    .glass-dropdown {
        -webkit-overflow-scrolling: touch !important;
    }
}





            `}</style>
        </div>
    );
};

export default BookingManagement;