/**
 * mypro.ch · my (espace client) — App principale
 *
 *  Connexion : magic link par email (rôle 'customer').
 *  L'API matche l'email contre les bookings (peut être client de plusieurs centrales).
 *
 *  Vues :
 *   - Dashboard (prochaines courses, raccourcis)
 *   - Courses (par centrale, filtrables : à venir / passées / annulées)
 *   - Factures (par centrale, lien PDF)
 *   - Profil (mes infos, déconnexion)
 */

const { useState, useEffect, useCallback, useMemo, createContext, useContext } = React;

// ============== Toast ==============
const ToastCtx = createContext(null);
function ToastProvider({ children }) {
    const [toasts, setToasts] = useState([]);
    const push = useCallback((message, type = 'success') => {
        const id = Date.now() + Math.random();
        setToasts(t => [...t, { id, message, type }]);
        setTimeout(() => setToasts(t => t.filter(x => x.id !== id)), 3500);
    }, []);
    return (
        <ToastCtx.Provider value={push}>
            {children}
            <div className="toast-container">
                {toasts.map(t => (
                    <div key={t.id} className={'toast ' + t.type}>
                        <i className={t.type === 'success' ? 'fas fa-check-circle text-emerald-500' : 'fas fa-exclamation-circle text-rose-500'}></i>
                        <span className="text-sm">{t.message}</span>
                    </div>
                ))}
            </div>
        </ToastCtx.Provider>
    );
}
const useToast = () => useContext(ToastCtx);

// ============== Modal & Confirm ==============
function Modal({ open, onClose, title, children, footer, size = 'md' }) {
    if (!open) return null;
    const max = { sm: 'max-w-sm', md: 'max-w-md', lg: 'max-w-2xl' }[size] || 'max-w-md';
    return (
        <div className="modal-backdrop" onClick={onClose}>
            <div className={'modal ' + max} onClick={e => e.stopPropagation()}>
                <div className="px-5 py-4 border-b border-slate-200 flex items-center justify-between">
                    <h3 className="font-semibold text-slate-900">{title}</h3>
                    <button onClick={onClose} className="text-slate-400 hover:text-slate-600 p-1">
                        <i className="fas fa-times"></i>
                    </button>
                </div>
                <div className="p-5">{children}</div>
                {footer && <div className="px-5 py-3 border-t border-slate-200 flex justify-end gap-2 bg-slate-50">{footer}</div>}
            </div>
        </div>
    );
}

function ConfirmDialog({ open, onClose, title, message, confirmLabel = 'Confirmer', danger, onConfirm }) {
    return (
        <Modal open={open} onClose={onClose} title={title} size="sm"
            footer={<>
                <button className="btn btn-ghost" onClick={onClose}>Annuler</button>
                <button className={'btn ' + (danger ? 'btn-danger' : 'btn-primary')} onClick={onConfirm}>{confirmLabel}</button>
            </>}>
            <p className="text-slate-600 text-sm">{message}</p>
        </Modal>
    );
}

// ============== Helpers ==============
function fmtDate(value, withTime = true) {
    if (!value) return '—';
    const d = typeof value === 'number' ? new Date(value * 1000) : new Date(String(value).replace(' ', 'T') + (String(value).includes('T') ? '' : 'Z'));
    if (isNaN(d.getTime())) return String(value);
    const dd = String(d.getDate()).padStart(2, '0');
    const mm = String(d.getMonth() + 1).padStart(2, '0');
    const yy = d.getFullYear();
    if (!withTime) return `${dd}.${mm}.${yy}`;
    const hh = String(d.getHours()).padStart(2, '0');
    const mi = String(d.getMinutes()).padStart(2, '0');
    return `${dd}.${mm}.${yy} · ${hh}:${mi}`;
}

function fmtPrice(p, currency = 'CHF') {
    if (p == null) return '—';
    return Number(p).toFixed(2) + ' ' + currency;
}

function getInitials(s) {
    return (s || '?').split(/\s+/).filter(Boolean).map(p => p[0]).slice(0, 2).join('').toUpperCase();
}

function bookingStatusInfo(b) {
    if (b.cancelled) return { label: 'Annulée', cls: 'pill-danger' };
    if (b.is_completed) return { label: 'Effectuée', cls: 'pill-success' };
    if (b.dispatch_status === 'assigned' && b.driver_firstname) return { label: 'Chauffeur assigné', cls: 'pill-info' };
    if (b.dispatch_status === 'searching') return { label: 'Recherche…', cls: 'pill-warning' };
    return { label: 'À venir', cls: 'pill-info' };
}

function paymentBadge(b) {
    if (b.is_paid) return <span className="pill pill-success">Payée</span>;
    if (b.is_completed) return <span className="pill pill-warning">À payer</span>;
    return <span className="pill pill-muted">{b.payment_method || 'Paiement à bord'}</span>;
}

// ============== Login ==============
function LoginScreen() {
    const [email, setEmail] = useState('');
    const [sent, setSent] = useState(false);
    const [loading, setLoading] = useState(false);
    const [error, setError] = useState(null);

    async function submit(e) {
        e.preventDefault();
        setError(null);
        setLoading(true);
        try {
            await MyProAuth.requestMagic(email.trim());
            setSent(true);
        } catch (err) {
            setError(err.message || 'Erreur lors de l\'envoi');
        } finally {
            setLoading(false);
        }
    }

    return (
        <div className="min-h-screen flex items-center justify-center p-6"
             style={{ background: 'linear-gradient(135deg,#e0f2fe 0%,#fef3c7 100%)' }}>
            <div className="card w-full max-w-md p-8 text-center" style={{ borderRadius: 20 }}>
                <div style={{
                    width: 64, height: 64, margin: '0 auto 18px',
                    borderRadius: 16,
                    background: 'linear-gradient(135deg,#0ea5e9,#0284c7)',
                    display: 'flex', alignItems: 'center', justifyContent: 'center',
                    color: 'white', fontSize: 28,
                }}>
                    <i className="fas fa-taxi"></i>
                </div>
                <h1 className="text-2xl font-bold text-slate-900 mb-1">Mes courses</h1>
                <p className="text-sm text-slate-500 mb-6">
                    Retrouvez l'ensemble de vos réservations chez vos centrales partenaires.
                </p>

                {sent ? (
                    <div className="bg-emerald-50 border border-emerald-200 rounded-xl p-5 text-left">
                        <div className="flex items-center gap-2 mb-2">
                            <i className="fas fa-paper-plane text-emerald-600"></i>
                            <h3 className="font-semibold text-emerald-900">Lien envoyé</h3>
                        </div>
                        <p className="text-sm text-emerald-800 mb-3">
                            Nous avons envoyé un lien de connexion à <strong>{email}</strong>.
                            Ouvrez-le depuis ce même navigateur pour accéder à votre espace.
                        </p>
                        <button onClick={() => { setSent(false); setEmail(''); }} className="text-emerald-700 text-sm underline">
                            Envoyer à une autre adresse
                        </button>
                    </div>
                ) : (
                    <form onSubmit={submit} className="text-left">
                        <div className="field">
                            <label htmlFor="email">Votre email</label>
                            <input
                                id="email"
                                type="email"
                                required
                                placeholder="vous@example.ch"
                                value={email}
                                onChange={e => setEmail(e.target.value)}
                                autoComplete="email"
                            />
                        </div>
                        {error && (
                            <div className="bg-rose-50 border border-rose-200 text-rose-700 text-sm rounded-lg p-3 mb-3">
                                {error}
                            </div>
                        )}
                        <button type="submit" className="btn btn-primary w-full" disabled={loading || !email}>
                            {loading ? <span><i className="fas fa-circle-notch fa-spin mr-2"></i>Envoi…</span>
                                     : <span><i className="fas fa-envelope mr-2"></i>Recevoir mon lien</span>}
                        </button>
                        <p className="text-xs text-slate-400 mt-4 text-center">
                            Aucun mot de passe : un lien sécurisé vous est envoyé par email,
                            valable 15 min.
                        </p>
                    </form>
                )}
                <div className="mt-6 pt-5 border-t border-slate-100 text-xs text-slate-400">
                    mypro.ch &middot; Espace client
                </div>
            </div>
        </div>
    );
}

// ============== Layout (logged) ==============
function AppShell({ user, onLogout }) {
    const [tab, setTab] = useState('home');
    return (
        <div className="min-h-screen bg-slate-50">
            <header className="bg-white border-b border-slate-200 sticky top-0 z-30">
                <div className="max-w-3xl mx-auto px-4 py-3 flex items-center justify-between">
                    <div className="flex items-center gap-2">
                        <div style={{
                            width: 32, height: 32, borderRadius: 8,
                            background: 'linear-gradient(135deg,#0ea5e9,#0284c7)',
                            display: 'flex', alignItems: 'center', justifyContent: 'center',
                            color: 'white',
                        }}>
                            <i className="fas fa-taxi text-sm"></i>
                        </div>
                        <span className="font-bold text-slate-900">Mes courses</span>
                    </div>
                    <div className="hidden md:flex items-center gap-1">
                        <NavBtn tab="home" current={tab} setTab={setTab} icon="fa-home" label="Accueil"/>
                        <NavBtn tab="bookings" current={tab} setTab={setTab} icon="fa-list" label="Mes courses"/>
                        <NavBtn tab="invoices" current={tab} setTab={setTab} icon="fa-file-invoice-dollar" label="Factures"/>
                        <NavBtn tab="profile" current={tab} setTab={setTab} icon="fa-user" label="Profil"/>
                    </div>
                    <button onClick={onLogout} className="hidden md:inline-flex btn btn-ghost btn-sm" title="Se déconnecter">
                        <i className="fas fa-sign-out-alt mr-1"></i>Quitter
                    </button>
                </div>
            </header>

            <main className="max-w-3xl mx-auto px-4 py-6 with-bottom-nav">
                {tab === 'home' && <PageHome user={user} setTab={setTab}/>}
                {tab === 'bookings' && <PageBookings/>}
                {tab === 'invoices' && <PageInvoices/>}
                {tab === 'profile' && <PageProfile user={user} onLogout={onLogout}/>}
            </main>

            {/* Bottom nav (mobile) */}
            <nav className="bottom-nav">
                <button className={tab === 'home' ? 'active' : ''} onClick={() => setTab('home')}>
                    <i className="fas fa-home"></i><span>Accueil</span>
                </button>
                <button className={tab === 'bookings' ? 'active' : ''} onClick={() => setTab('bookings')}>
                    <i className="fas fa-list"></i><span>Courses</span>
                </button>
                <button className={tab === 'invoices' ? 'active' : ''} onClick={() => setTab('invoices')}>
                    <i className="fas fa-file-invoice-dollar"></i><span>Factures</span>
                </button>
                <button className={tab === 'profile' ? 'active' : ''} onClick={() => setTab('profile')}>
                    <i className="fas fa-user"></i><span>Profil</span>
                </button>
            </nav>
        </div>
    );
}

function NavBtn({ tab, current, setTab, icon, label }) {
    const active = tab === current;
    return (
        <button onClick={() => setTab(tab)}
            className={'flex items-center gap-2 px-3 py-2 rounded-lg text-sm font-medium ' +
                (active ? 'bg-sky-50 text-sky-700' : 'text-slate-600 hover:bg-slate-100')}>
            <i className={'fas ' + icon}></i>{label}
        </button>
    );
}

// ============== Page : Home ==============
function PageHome({ user, setTab }) {
    const [data, setData] = useState(null);
    const [loading, setLoading] = useState(true);

    useEffect(() => {
        Promise.all([MyProAPI.profile(), MyProAPI.bookings({ status: 'upcoming' }), MyProAPI.centrals()])
            .then(([p, b, c]) => setData({ profile: p, upcoming: b.bookings || [], centrals: c.centrals || [] }))
            .catch(() => setData({ profile: null, upcoming: [], centrals: [] }))
            .finally(() => setLoading(false));
    }, []);

    if (loading) return <Loader/>;
    const stats = data?.profile?.stats || {};

    return (
        <div className="space-y-5">
            <div className="card p-5" style={{ background: 'linear-gradient(135deg,#0ea5e9,#0284c7)', color: 'white' }}>
                <div className="text-sky-100 text-sm">Bonjour</div>
                <div className="text-2xl font-bold">
                    {user.firstname || user.lastname
                        ? `${user.firstname || ''} ${user.lastname || ''}`.trim()
                        : user.email}
                </div>
                <div className="mt-4 grid grid-cols-3 gap-3 text-center">
                    <div className="bg-white/15 rounded-lg p-3">
                        <div className="text-xl font-bold">{stats.upcoming_count || 0}</div>
                        <div className="text-xs text-sky-100">À venir</div>
                    </div>
                    <div className="bg-white/15 rounded-lg p-3">
                        <div className="text-xl font-bold">{stats.completed_count || 0}</div>
                        <div className="text-xs text-sky-100">Effectuées</div>
                    </div>
                    <div className="bg-white/15 rounded-lg p-3">
                        <div className="text-xl font-bold">{(data.centrals || []).length}</div>
                        <div className="text-xs text-sky-100">Centrales</div>
                    </div>
                </div>
            </div>

            <div>
                <div className="flex items-center justify-between mb-2">
                    <h2 className="font-semibold text-slate-900">Vos prochaines courses</h2>
                    <button className="text-sm text-sky-600 font-medium" onClick={() => setTab('bookings')}>
                        Tout voir <i className="fas fa-chevron-right text-xs"></i>
                    </button>
                </div>
                {data.upcoming.length === 0 ? (
                    <div className="card text-center py-8 text-slate-500 text-sm">
                        <i className="fas fa-calendar-check text-3xl text-slate-300 mb-2"></i>
                        <div>Aucune course à venir.</div>
                    </div>
                ) : (
                    <div className="space-y-3">
                        {data.upcoming.slice(0, 3).map(b => (
                            <BookingCard key={b.id} b={b}/>
                        ))}
                    </div>
                )}
            </div>

            {(data.centrals || []).length > 0 && (
                <div>
                    <h2 className="font-semibold text-slate-900 mb-2">Vos centrales</h2>
                    <div className="grid grid-cols-2 gap-3">
                        {data.centrals.map(c => (
                            <div key={c.id} className="card p-4">
                                <div className="flex items-start gap-3">
                                    <div className="centrale-logo">{getInitials(c.label)}</div>
                                    <div className="flex-1 min-w-0">
                                        <div className="font-semibold text-sm text-slate-900 truncate">{c.label || '—'}</div>
                                        <div className="text-xs text-slate-500">{c.canton || ''}</div>
                                        <div className="text-xs text-slate-500 mt-1">{c.bookings_count} course{c.bookings_count > 1 ? 's' : ''}</div>
                                    </div>
                                </div>
                            </div>
                        ))}
                    </div>
                </div>
            )}
        </div>
    );
}

// ============== Page : Bookings ==============
function PageBookings() {
    const [bookings, setBookings] = useState([]);
    const [loading, setLoading] = useState(true);
    const [filter, setFilter] = useState('upcoming');
    const [openBooking, setOpenBooking] = useState(null);

    const reload = useCallback(() => {
        setLoading(true);
        const q = filter === 'all' ? {} : { status: filter };
        MyProAPI.bookings(q)
            .then(r => setBookings(r.bookings || []))
            .catch(() => setBookings([]))
            .finally(() => setLoading(false));
    }, [filter]);

    useEffect(reload, [reload]);

    const grouped = useMemo(() => {
        const m = new Map();
        for (const b of bookings) {
            const key = b.central_id || 0;
            const label = b.website_display_name || b.website_company || b.central_label || 'Centrale';
            if (!m.has(key)) m.set(key, { id: key, label, color: b.website_color, items: [] });
            m.get(key).items.push(b);
        }
        return Array.from(m.values());
    }, [bookings]);

    return (
        <div className="space-y-4">
            <div className="flex items-center justify-between">
                <h2 className="text-lg font-bold text-slate-900">Mes courses</h2>
                <div className="tab-segmented">
                    <button className={filter === 'upcoming' ? 'active' : ''} onClick={() => setFilter('upcoming')}>À venir</button>
                    <button className={filter === 'past' ? 'active' : ''} onClick={() => setFilter('past')}>Passées</button>
                    <button className={filter === 'cancelled' ? 'active' : ''} onClick={() => setFilter('cancelled')}>Annulées</button>
                </div>
            </div>

            {loading ? <Loader/> :
              grouped.length === 0 ? (
                <div className="card empty-state">
                    <div className="icon"><i className="fas fa-route"></i></div>
                    <div className="font-medium">Aucune course {labelFilter(filter)}.</div>
                </div>
              ) : (
                <div className="space-y-6">
                    {grouped.map(g => (
                        <div key={g.id}>
                            <div className="centrale-header">
                                <div className="centrale-logo" style={g.color ? { background: g.color } : null}>
                                    {getInitials(g.label)}
                                </div>
                                <div>
                                    <div className="font-semibold text-slate-900">{g.label}</div>
                                    <div className="text-xs text-slate-500">{g.items.length} course{g.items.length > 1 ? 's' : ''}</div>
                                </div>
                            </div>
                            <div className="space-y-3">
                                {g.items.map(b => (
                                    <BookingCard key={b.id} b={b} onOpen={() => setOpenBooking(b)}/>
                                ))}
                            </div>
                        </div>
                    ))}
                </div>
              )
            }

            {openBooking && (
                <BookingDetailModal b={openBooking} onClose={() => setOpenBooking(null)} onChange={reload}/>
            )}
        </div>
    );
}

function labelFilter(f) {
    return ({ upcoming: 'à venir', past: 'passée', cancelled: 'annulée', all: '' })[f] || '';
}

function BookingCard({ b, onOpen }) {
    const status = bookingStatusInfo(b);
    return (
        <div className={'booking-card ' + (b.cancelled ? 'cancelled' : '')} onClick={onOpen}
             style={onOpen ? { cursor: 'pointer' } : null}>
            <div className="flex items-center justify-between mb-3">
                <div className="text-xs text-slate-500">
                    <i className="far fa-calendar mr-1"></i>{fmtDate(b.dated)}
                </div>
                <span className={'pill ' + status.cls}>{status.label}</span>
            </div>
            <div className="route-line">
                <div className="route-dot"></div>
                <div className="text-sm text-slate-900 truncate">{b.origin_address || '—'}</div>
            </div>
            <div className="route-line">
                <div className="route-vline"></div>
                <div></div>
            </div>
            <div className="route-line">
                <div className="route-dot dest"></div>
                <div className="text-sm text-slate-900 truncate">{b.destination_address || '—'}</div>
            </div>
            <div className="mt-3 pt-3 border-t border-slate-100 flex items-center justify-between">
                <div className="text-xs text-slate-500">
                    {b.distance_km ? Number(b.distance_km).toFixed(1) + ' km · ' : ''}
                    {b.seats || 1} pers.
                </div>
                <div className="flex items-center gap-2">
                    {paymentBadge(b)}
                    <span className="font-bold text-slate-900">{fmtPrice(b.price, 'CHF')}</span>
                </div>
            </div>
        </div>
    );
}

function BookingDetailModal({ b, onClose, onChange }) {
    const toast = useToast();
    const [detail, setDetail] = useState(null);
    const [loading, setLoading] = useState(true);
    const [confirmCancel, setConfirmCancel] = useState(false);

    useEffect(() => {
        MyProAPI.booking(b.md5)
            .then(r => setDetail(r))
            .catch(e => toast(e.message, 'error'))
            .finally(() => setLoading(false));
    }, [b.md5]);

    async function doCancel() {
        try {
            await MyProAPI.cancelBooking(b.id, 'Annulé depuis l\'espace client');
            toast('Course annulée');
            setConfirmCancel(false);
            onClose();
            onChange?.();
        } catch (e) {
            toast(e.message, 'error');
        }
    }

    const bd = detail?.booking || b;
    const status = bookingStatusInfo(bd);

    return (
        <Modal open={true} onClose={onClose} title={'Course ' + (bd.reference || '#' + bd.id)} size="lg"
            footer={<>
                <button className="btn btn-ghost" onClick={onClose}>Fermer</button>
                {!bd.cancelled && (
                    <a className="btn btn-ghost" target="_blank" rel="noopener" href={MyProAPI.pdfBookingUrl(bd.md5)}>
                        <i className="fas fa-file-pdf mr-1"></i>Reçu PDF
                    </a>
                )}
                {b._cancellable && (
                    <button className="btn btn-danger" onClick={() => setConfirmCancel(true)}>
                        <i className="fas fa-times-circle mr-1"></i>Annuler
                    </button>
                )}
            </>}>
            {loading ? <Loader/> : (
                <div className="space-y-4">
                    <div className="flex items-center justify-between">
                        <div className="text-slate-500 text-sm">{fmtDate(bd.dated)}</div>
                        <span className={'pill ' + status.cls}>{status.label}</span>
                    </div>

                    <div className="card border border-slate-200" style={{ boxShadow: 'none', padding: 14 }}>
                        <div className="text-xs font-semibold text-slate-500 mb-1">CENTRALE</div>
                        <div className="font-semibold">{bd.website_display_name || bd.website_company || bd.central_label}</div>
                        {bd.website_phone && <div className="text-sm text-slate-600 mt-1">
                            <i className="fas fa-phone mr-1 text-slate-400"></i>
                            <a href={'tel:' + bd.website_phone} className="text-sky-600">{bd.website_phone}</a>
                        </div>}
                    </div>

                    <div className="card border border-slate-200" style={{ boxShadow: 'none', padding: 14 }}>
                        <div className="text-xs font-semibold text-slate-500 mb-2">TRAJET</div>
                        <div className="route-line">
                            <div className="route-dot"></div>
                            <div className="text-sm">{bd.origin_address || '—'}</div>
                        </div>
                        <div className="route-line"><div className="route-vline"></div><div></div></div>
                        <div className="route-line">
                            <div className="route-dot dest"></div>
                            <div className="text-sm">{bd.destination_address || '—'}</div>
                        </div>
                        {(bd.distance_km || bd.duration_min) && (
                            <div className="text-xs text-slate-500 mt-2">
                                {bd.distance_km ? Number(bd.distance_km).toFixed(1) + ' km' : ''}
                                {bd.duration_min ? ' · ' + bd.duration_min + ' min' : ''}
                            </div>
                        )}
                    </div>

                    {(bd.driver_firstname || bd.driver_lastname) && (
                        <div className="card border border-slate-200" style={{ boxShadow: 'none', padding: 14 }}>
                            <div className="text-xs font-semibold text-slate-500 mb-1">CHAUFFEUR</div>
                            <div className="font-semibold">{bd.driver_firstname} {bd.driver_lastname}</div>
                            {bd.driver_mobile && <a href={'tel:' + bd.driver_mobile} className="text-sm text-sky-600">
                                <i className="fas fa-phone mr-1"></i>{bd.driver_mobile}
                            </a>}
                        </div>
                    )}

                    <div className="card border border-slate-200" style={{ boxShadow: 'none', padding: 14 }}>
                        <div className="flex items-center justify-between mb-2">
                            <div className="text-xs font-semibold text-slate-500">PAIEMENT</div>
                            {paymentBadge(bd)}
                        </div>
                        <div className="text-2xl font-bold text-slate-900">{fmtPrice(bd.price, 'CHF')}</div>
                        {bd.payment_method && (
                            <div className="text-sm text-slate-500 mt-1">
                                Mode : {paymentMethodLabel(bd.payment_method)}
                            </div>
                        )}
                    </div>

                    {b._cancellable && b._minutes_to_cutoff > 0 && (
                        <div className="bg-amber-50 border border-amber-200 text-amber-800 rounded-lg p-3 text-sm">
                            <i className="fas fa-info-circle mr-1"></i>
                            Vous pouvez annuler gratuitement jusqu'à {b._minutes_to_cutoff} min avant la course.
                        </div>
                    )}
                    {!b._cancellable && !bd.cancelled && !bd.is_completed && (
                        <div className="bg-slate-50 border border-slate-200 text-slate-600 rounded-lg p-3 text-sm">
                            <i className="fas fa-clock mr-1"></i>
                            Annulation en ligne fermée. Contactez la centrale par téléphone si besoin.
                        </div>
                    )}
                </div>
            )}

            <ConfirmDialog open={confirmCancel} danger
                title="Annuler la course ?"
                message={`Confirmez-vous l'annulation de la course du ${fmtDate(bd.dated)} ?`}
                confirmLabel="Oui, annuler"
                onClose={() => setConfirmCancel(false)}
                onConfirm={doCancel}/>
        </Modal>
    );
}

function paymentMethodLabel(m) {
    return ({ card: 'Carte', cash: 'Espèces', bill: 'Facture', twint: 'TWINT', manual: 'Manuel' })[m] || m;
}

// ============== Page : Invoices ==============
function PageInvoices() {
    const [invoices, setInvoices] = useState([]);
    const [loading, setLoading] = useState(true);

    useEffect(() => {
        MyProAPI.invoices()
            .then(r => setInvoices(r.invoices || []))
            .catch(() => setInvoices([]))
            .finally(() => setLoading(false));
    }, []);

    if (loading) return <Loader/>;

    return (
        <div className="space-y-4">
            <h2 className="text-lg font-bold text-slate-900">Mes factures</h2>
            {invoices.length === 0 ? (
                <div className="card empty-state">
                    <div className="icon"><i className="fas fa-file-invoice"></i></div>
                    <div className="font-medium">Aucune facture pour le moment.</div>
                    <div className="text-sm mt-1">Vos factures apparaîtront ici dès qu'une centrale vous en émettra une.</div>
                </div>
            ) : (
                <div className="space-y-3">
                    {invoices.map(inv => <InvoiceCard key={inv.id} inv={inv}/>)}
                </div>
            )}
        </div>
    );
}

function InvoiceCard({ inv }) {
    const status = inv.status || 'draft';
    const cls = status === 'paid' ? 'pill-success' : (status === 'overdue' ? 'pill-danger' : (status === 'sent' ? 'pill-info' : 'pill-muted'));
    const label = ({ draft: 'Brouillon', sent: 'À régler', paid: 'Payée', overdue: 'En retard', cancelled: 'Annulée' })[status] || status;
    return (
        <div className="card border border-slate-200" style={{ boxShadow: 'none', padding: 14 }}>
            <div className="flex items-start justify-between gap-3">
                <div className="min-w-0">
                    <div className="font-semibold text-slate-900">N° {inv.invoice_number || ('#' + inv.id)}</div>
                    <div className="text-xs text-slate-500">{inv.central_label || inv.website_display_name || inv.website_company}</div>
                    <div className="text-sm text-slate-600 mt-1">
                        Émis le {fmtDate(inv.issued_date, false)}
                        {inv.due_date ? ` · échéance ${fmtDate(inv.due_date, false)}` : ''}
                    </div>
                    {inv.booking_reference && (
                        <div className="text-xs text-slate-500 mt-1">
                            <i className="fas fa-route mr-1"></i>Course {inv.booking_reference}
                            {inv.booking_dated ? ' · ' + fmtDate(inv.booking_dated) : ''}
                        </div>
                    )}
                </div>
                <div className="text-right shrink-0">
                    <span className={'pill ' + cls}>{label}</span>
                    <div className="font-bold text-lg mt-1">{fmtPrice(inv.amount_ttc, inv.currency || 'CHF')}</div>
                </div>
            </div>
            <div className="mt-3 pt-3 border-t border-slate-100 flex justify-end gap-2">
                <a className="btn btn-ghost btn-sm" target="_blank" rel="noopener"
                   href={MyProAPI.pdfInvoiceUrl(inv.md5)}>
                    <i className="fas fa-file-pdf mr-1"></i>PDF
                </a>
            </div>
        </div>
    );
}

// ============== Page : Profile ==============
function PageProfile({ user, onLogout }) {
    const toast = useToast();
    const [profile, setProfile] = useState(null);
    const [loading, setLoading] = useState(true);
    const [editing, setEditing] = useState(false);
    const [form, setForm] = useState({});

    useEffect(() => {
        MyProAPI.profile()
            .then(r => {
                setProfile(r);
                setForm({
                    firstname: r.profile.firstname || '',
                    lastname: r.profile.lastname || '',
                    mobile: r.profile.mobile || '',
                    address: r.profile.address || '',
                });
            })
            .catch(() => setProfile(null))
            .finally(() => setLoading(false));
    }, []);

    async function save() {
        try {
            await MyProAPI.updateProfile(form);
            toast('Profil mis à jour');
            setEditing(false);
            const fresh = await MyProAPI.profile();
            setProfile(fresh);
        } catch (e) {
            toast(e.message, 'error');
        }
    }

    if (loading) return <Loader/>;
    const stats = profile?.stats || {};

    return (
        <div className="space-y-5">
            <h2 className="text-lg font-bold text-slate-900">Profil</h2>

            <div className="card p-5">
                <div className="flex items-center gap-4">
                    <div style={{ width: 56, height: 56, borderRadius: 14,
                                  background: 'linear-gradient(135deg,#0ea5e9,#0284c7)',
                                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                                  color: 'white', fontWeight: 700, fontSize: 18 }}>
                        {getInitials(`${profile.profile.firstname || ''} ${profile.profile.lastname || ''}` || profile.profile.email)}
                    </div>
                    <div className="min-w-0 flex-1">
                        <div className="font-semibold text-slate-900 truncate">
                            {(profile.profile.firstname || '') + ' ' + (profile.profile.lastname || '')}
                        </div>
                        <div className="text-sm text-slate-500 truncate">{profile.profile.email}</div>
                    </div>
                    {!editing && (
                        <button className="btn btn-ghost btn-sm" onClick={() => setEditing(true)}>
                            <i className="fas fa-pen mr-1"></i>Modifier
                        </button>
                    )}
                </div>

                {editing && (
                    <div className="mt-5">
                        <div className="grid grid-cols-2 gap-3">
                            <div className="field">
                                <label>Prénom</label>
                                <input value={form.firstname} onChange={e => setForm({...form, firstname: e.target.value})}/>
                            </div>
                            <div className="field">
                                <label>Nom</label>
                                <input value={form.lastname} onChange={e => setForm({...form, lastname: e.target.value})}/>
                            </div>
                        </div>
                        <div className="field">
                            <label>Mobile</label>
                            <input value={form.mobile} onChange={e => setForm({...form, mobile: e.target.value})}/>
                        </div>
                        <div className="field">
                            <label>Adresse</label>
                            <input value={form.address} onChange={e => setForm({...form, address: e.target.value})}/>
                        </div>
                        <div className="flex justify-end gap-2 mt-3">
                            <button className="btn btn-ghost" onClick={() => setEditing(false)}>Annuler</button>
                            <button className="btn btn-primary" onClick={save}>Enregistrer</button>
                        </div>
                    </div>
                )}
            </div>

            <div className="card p-5">
                <h3 className="font-semibold text-slate-900 mb-3">Statistiques</h3>
                <div className="grid grid-cols-2 gap-3">
                    <Stat label="Courses totales" value={stats.bookings_count || 0}/>
                    <Stat label="Effectuées" value={stats.completed_count || 0}/>
                    <Stat label="À venir" value={stats.upcoming_count || 0}/>
                    <Stat label="Annulées" value={stats.cancelled_count || 0}/>
                    <Stat label="Total dépensé" value={fmtPrice(stats.total_paid || 0, 'CHF')} wide/>
                </div>
            </div>

            <button onClick={onLogout} className="btn btn-ghost w-full">
                <i className="fas fa-sign-out-alt mr-2"></i>Se déconnecter
            </button>

            <div className="text-center text-xs text-slate-400 pt-2">
                mypro.ch &middot; Espace client &middot; v1.0
            </div>
        </div>
    );
}

function Stat({ label, value, wide }) {
    return (
        <div className={'rounded-xl bg-slate-50 p-3 ' + (wide ? 'col-span-2' : '')}>
            <div className="text-xs text-slate-500">{label}</div>
            <div className="text-xl font-bold text-slate-900">{value}</div>
        </div>
    );
}

function Loader() {
    return (
        <div className="py-10 flex items-center justify-center">
            <div className="loading-spinner"></div>
        </div>
    );
}

// ============== Root ==============
function Root() {
    const [user, setUser] = useState(null);
    const [loading, setLoading] = useState(true);

    useEffect(() => {
        if (!MyProAuth.isAuthenticated()) { setLoading(false); return; }
        MyProAuth.refreshUser()
            .then(u => setUser(u))
            .finally(() => setLoading(false));
    }, []);

    async function handleLogout() {
        await MyProAuth.logout();
    }

    if (loading) return <div className="flex items-center justify-center min-h-screen"><div className="loading-spinner"></div></div>;
    if (!user) return <ToastProvider><LoginScreen/></ToastProvider>;

    return (
        <ToastProvider>
            <AppShell user={user} onLogout={handleLogout}/>
        </ToastProvider>
    );
}

const root = ReactDOM.createRoot(document.getElementById('app'));
root.render(<Root/>);