// ============================================================================
// mypro · driver - App mobile (single-file SPA)
// ============================================================================
const { useState, useEffect, useRef, useCallback, useMemo, createContext, useContext } = React;
const API = window.MyProAPI;
const CFG = window.MyProConfig;

// ==================== UTILS ====================
const TZ = 'Europe/Zurich';
const fmtDateTime = (s) => {
    if (!s) return '—';
    try {
        return new Date(s.replace(' ', 'T') + 'Z').toLocaleString('fr-CH', {
            timeZone: TZ, day: '2-digit', month: '2-digit', year: '2-digit',
            hour: '2-digit', minute: '2-digit',
        });
    } catch (_) { return s; }
};
const fmtTime = (s) => {
    if (!s) return '—';
    try {
        return new Date(s.replace(' ', 'T') + 'Z').toLocaleTimeString('fr-CH', {
            timeZone: TZ, hour: '2-digit', minute: '2-digit',
        });
    } catch (_) { return s; }
};
const fmtDay = (s) => {
    if (!s) return '—';
    try {
        return new Date(s.replace(' ', 'T') + 'Z').toLocaleDateString('fr-CH', {
            timeZone: TZ, weekday: 'short', day: '2-digit', month: 'short',
        });
    } catch (_) { return s; }
};
const fmtMoney = (n) => 'CHF ' + Number(n || 0).toFixed(2);

// ==================== TOAST ====================
const useToast = () => {
    return useMemo(() => {
        const show = (msg, type) => {
            const el = document.createElement('div');
            el.className = 'toast ' + (type || 'info');
            el.textContent = msg;
            document.body.appendChild(el);
            const remove = () => {
                el.classList.add('slide-out');
                setTimeout(() => el.remove(), 300);
            };
            setTimeout(remove, 3500);
            el.addEventListener('click', remove);
        };
        return {
            success: (m) => show(m, 'success'),
            error:   (m) => show(m, 'error'),
            info:    (m) => show(m, 'info'),
        };
    }, []);
};

// ==================== APP ROOT ====================
function App() {
    const [user, setUser] = useState(API.getUser());
    const [loading, setLoading] = useState(true);

    useEffect(() => {
        if (API.isAuthenticated()) {
            API.me().then(r => {
                setUser(r.user);
                API.setUser(r.user);
            }).catch(() => setUser(null)).finally(() => setLoading(false));
        } else {
            setLoading(false);
        }
    }, []);

    if (loading) return <div className="h-full flex items-center justify-center"><div className="spinner" /></div>;
    if (!user) return <Login onLoggedIn={setUser} />;
    return <Dashboard user={user} onLogout={() => { API.clearAuth(); setUser(null); }} />;
}

// ==================== LOGIN ====================
function Login({ onLoggedIn }) {
    const toast = useToast();
    const [email, setEmail] = useState('');
    const [sent, setSent] = useState(false);
    const [busy, setBusy] = useState(false);

    const submit = async (e) => {
        e.preventDefault();
        if (!email.trim()) return toast.error('Entrez votre email');
        setBusy(true);
        try {
            await API.sendMagic(email.trim());
            setSent(true);
            toast.success('Email envoyé');
        } catch (e) {
            toast.error(e.message || 'Erreur');
        } finally { setBusy(false); }
    };

    return (
        <div className="h-full w-full flex flex-col items-center justify-center px-6"
             style={{background: 'linear-gradient(160deg, #FFB800 0%, #fef3c7 65%, #ffffff 100%)'}}>
            <div className="w-full max-w-sm fade-in-up">
                <div className="text-center mb-8">
                    <div className="w-16 h-16 mx-auto mb-4 rounded-2xl bg-white shadow-lg flex items-center justify-center">
                        <i className="fas fa-taxi text-3xl text-mp-primary" />
                    </div>
                    <h1 className="text-2xl font-bold text-gray-900">mypro · driver</h1>
                    <p className="text-gray-600 text-sm mt-1">Espace chauffeur</p>
                </div>

                <div className="card p-6">
                    {!sent ? (
                        <form onSubmit={submit}>
                            <label className="block text-sm font-medium text-gray-700 mb-2">Email professionnel</label>
                            <input
                                type="email" autoFocus required
                                className="input-field mb-4"
                                placeholder="vous@exemple.ch"
                                value={email}
                                onChange={e => setEmail(e.target.value)}
                                disabled={busy}
                            />
                            <button type="submit" className="btn-primary w-full flex items-center justify-center" disabled={busy}>
                                {busy ? <div className="spinner" style={{width:'1.2rem',height:'1.2rem',borderWidth:'2px'}} /> : (
                                    <><i className="fas fa-paper-plane mr-2" /> Envoyer le lien</>
                                )}
                            </button>
                            <p className="text-xs text-gray-500 mt-4 text-center">
                                Vous recevrez un lien de connexion par email. Pas de mot de passe nécessaire.
                            </p>
                        </form>
                    ) : (
                        <div className="text-center py-4">
                            <div className="w-14 h-14 mx-auto mb-4 rounded-full bg-green-100 flex items-center justify-center">
                                <i className="fas fa-envelope-open-text text-2xl text-green-600" />
                            </div>
                            <h3 className="text-lg font-bold text-gray-900 mb-2">Vérifiez vos emails</h3>
                            <p className="text-gray-600 text-sm mb-4">
                                Un lien de connexion a été envoyé à<br /><strong>{email}</strong>
                            </p>
                            <button className="btn-secondary w-full" onClick={() => { setSent(false); setEmail(''); }}>
                                Renvoyer un autre lien
                            </button>
                        </div>
                    )}
                </div>

                <p className="text-center text-xs text-gray-500 mt-6">mypro.ch · espace chauffeur</p>
            </div>
        </div>
    );
}

// ==================== DASHBOARD ====================
function Dashboard({ user, onLogout }) {
    const [tab, setTab] = useState('today');
    const [detail, setDetail] = useState(null); // booking sélectionné

    return (
        <div className="app-container">
            <Header user={user} onLogout={onLogout} title={detail ? 'Course' : tabTitle(tab)} onBack={detail ? () => setDetail(null) : null} />
            <div className="app-content">
                {detail ? (
                    <BookingDetail booking={detail} onUpdate={(b) => setDetail(b)} onClose={() => setDetail(null)} />
                ) : (
                    <>
                        {tab === 'today'    && <BookingsList key="today"    mode="today"    onSelect={setDetail} emptyLabel="Aucune course aujourd'hui" />}
                        {tab === 'upcoming' && <BookingsList key="upcoming" mode="upcoming" onSelect={setDetail} emptyLabel="Pas de course à venir" />}
                        {tab === 'past'     && <BookingsList key="past"     mode="past"     onSelect={setDetail} emptyLabel="Pas d'historique" />}
                        {tab === 'profile'  && <Profile user={user} onLogout={onLogout} />}
                    </>
                )}
            </div>
            {!detail && <BottomNav tab={tab} onChange={setTab} />}
        </div>
    );
}

function tabTitle(t) {
    return ({
        today: "Aujourd'hui",
        upcoming: 'À venir',
        past: 'Historique',
        profile: 'Profil',
    })[t] || 'mypro';
}

function Header({ user, title, onBack, onLogout }) {
    return (
        <div className="app-header">
            <div className="flex items-center gap-3">
                {onBack && (
                    <button className="btn-ghost" onClick={onBack} aria-label="Retour">
                        <i className="fas fa-arrow-left text-lg" />
                    </button>
                )}
                <div>
                    <div className="text-base font-bold leading-none">{title}</div>
                    <div className="text-xs text-gray-500 mt-0.5">{user.firstname} {user.lastname}</div>
                </div>
            </div>
            <div className="w-9 h-9 rounded-full bg-mp-primary text-white font-bold flex items-center justify-center text-sm">
                {(user.firstname || '?').charAt(0).toUpperCase()}
            </div>
        </div>
    );
}

function BottomNav({ tab, onChange }) {
    const items = [
        { id: 'today',    icon: 'fa-calendar-day',  label: 'Aujourd’hui' },
        { id: 'upcoming', icon: 'fa-calendar-week', label: 'À venir' },
        { id: 'past',     icon: 'fa-clock-rotate-left', label: 'Historique' },
        { id: 'profile',  icon: 'fa-user',          label: 'Profil' },
    ];
    return (
        <nav className="bottom-nav">
            {items.map(i => (
                <button key={i.id} className={'nav-item' + (tab === i.id ? ' active' : '')} onClick={() => onChange(i.id)}>
                    <i className={'fas ' + i.icon} />
                    <span>{i.label}</span>
                </button>
            ))}
        </nav>
    );
}

// ==================== BOOKINGS LIST ====================
function BookingsList({ mode, onSelect, emptyLabel }) {
    const [bookings, setBookings] = useState(null);
    const [error, setError] = useState(null);

    useEffect(() => {
        let alive = true;
        (async () => {
            try {
                let r;
                if (mode === 'today')    r = await API.bookingsToday();
                if (mode === 'upcoming') r = await API.bookingsUpcoming();
                if (mode === 'past')     r = await API.bookingsPast();
                if (alive) setBookings(r.bookings || []);
            } catch (e) {
                if (alive) setError(e.message || 'Erreur de chargement');
            }
        })();
        return () => { alive = false; };
    }, [mode]);

    if (error) return <EmptyState icon="fa-circle-exclamation" title="Erreur" sub={error} />;
    if (bookings === null) return <div className="flex justify-center py-12"><div className="spinner" /></div>;
    if (bookings.length === 0) return <EmptyState icon="fa-calendar-xmark" title="Rien ici" sub={emptyLabel} />;

    return (
        <div className="px-4 py-4 space-y-3 stagger">
            {bookings.map(b => <BookingCard key={b.id} b={b} onClick={() => onSelect(b)} />)}
        </div>
    );
}

function BookingCard({ b, onClick }) {
    const cancelled = b.cancelled === 1;
    const completed = b.is_completed === 1;
    const status = cancelled ? 'cancel' : (completed ? 'done' : 'today');
    const statusLabel = cancelled ? 'Annulée' : (completed ? 'Terminée' : 'Active');

    return (
        <button onClick={onClick} className="card w-full text-left hover:shadow-md transition-shadow active:scale-[0.99]">
            <div className="flex items-start justify-between mb-2">
                <div className="text-sm font-semibold text-gray-900">{b.reference || ('#' + b.id)}</div>
                <span className={'status-pill ' + status}>{statusLabel}</span>
            </div>
            <div className="text-xs text-gray-500 mb-3">{fmtDateTime(b.dated)}</div>

            <div className="space-y-2">
                <div className="flex items-start gap-2.5">
                    <div className="w-2 h-2 rounded-full bg-green-500 mt-2 flex-shrink-0" />
                    <div className="text-sm text-gray-800 leading-tight flex-1 truncate">{b.origin_address || '—'}</div>
                </div>
                <div className="flex items-start gap-2.5">
                    <div className="w-2 h-2 rounded-full bg-red-500 mt-2 flex-shrink-0" />
                    <div className="text-sm text-gray-800 leading-tight flex-1 truncate">{b.destination_address || '—'}</div>
                </div>
            </div>

            <div className="flex items-center justify-between mt-3 pt-3 border-t border-gray-100 text-xs text-gray-500">
                <div className="flex items-center gap-3">
                    {b.distance_km > 0 && <span><i className="fas fa-route mr-1" /> {b.distance_km} km</span>}
                    {b.seats > 0 && <span><i className="fas fa-user-group mr-1" /> {b.seats}</span>}
                </div>
                {b.price > 0 && <div className="font-semibold text-gray-700">{fmtMoney(b.price)}</div>}
            </div>
        </button>
    );
}

function EmptyState({ icon, title, sub }) {
    return (
        <div className="flex flex-col items-center justify-center text-center py-16 px-8">
            <div className="w-16 h-16 rounded-full bg-gray-100 flex items-center justify-center mb-4">
                <i className={'fas ' + icon + ' text-2xl text-gray-400'} />
            </div>
            <div className="font-semibold text-gray-700">{title}</div>
            {sub && <div className="text-sm text-gray-500 mt-1">{sub}</div>}
        </div>
    );
}

// ==================== BOOKING DETAIL ====================
function BookingDetail({ booking, onUpdate, onClose }) {
    const toast = useToast();
    const [b, setB] = useState(booking);
    const [busy, setBusy] = useState(false);

    const refresh = useCallback(async () => {
        try {
            const r = await API.bookingDetail(b.id);
            setB(r.booking); onUpdate(r.booking);
        } catch (e) { toast.error(e.message); }
    }, [b.id]);

    useEffect(() => { refresh(); }, []);

    const updateField = async (data, msg) => {
        setBusy(true);
        try {
            await API.updateBooking(b.id, data);
            await refresh();
            toast.success(msg || 'Mis à jour');
        } catch (e) { toast.error(e.message || 'Erreur'); }
        finally { setBusy(false); }
    };

    const callPhone   = b.customer_mobile && (() => { window.location.href = 'tel:' + b.customer_mobile; });
    const openMapsOrigin = b.origin_address && (() => {
        window.open('https://maps.google.com/?q=' + encodeURIComponent(b.origin_address), '_blank');
    });
    const openMapsDest = b.destination_address && (() => {
        window.open('https://maps.google.com/?q=' + encodeURIComponent(b.destination_address), '_blank');
    });

    return (
        <div className="px-4 py-4 space-y-3 fade-in-up">
            <div className="card">
                <div className="flex items-start justify-between mb-3">
                    <div>
                        <div className="text-xs uppercase font-semibold text-gray-500 tracking-wider">Réservation</div>
                        <div className="text-lg font-bold">{b.reference || ('#' + b.id)}</div>
                    </div>
                    <span className={'status-pill ' + (b.cancelled ? 'cancel' : (b.is_completed ? 'done' : 'today'))}>
                        {b.cancelled ? 'Annulée' : (b.is_completed ? 'Terminée' : 'Active')}
                    </span>
                </div>
                <div className="text-2xl font-bold text-gray-900 mb-1">{fmtTime(b.dated)}</div>
                <div className="text-sm text-gray-500">{fmtDay(b.dated)}</div>
            </div>

            <div className="card">
                <div className="text-xs uppercase font-semibold text-gray-500 tracking-wider mb-3">Trajet</div>

                <button onClick={openMapsOrigin} disabled={!openMapsOrigin}
                        className="w-full flex items-start gap-3 text-left p-2 -m-2 rounded-lg hover:bg-gray-50 transition disabled:hover:bg-transparent">
                    <div className="w-8 h-8 rounded-full bg-green-100 text-green-700 flex items-center justify-center flex-shrink-0 mt-0.5">
                        <i className="fas fa-circle-dot text-sm" />
                    </div>
                    <div className="flex-1 min-w-0">
                        <div className="text-xs text-gray-500 mb-0.5">Départ</div>
                        <div className="text-sm font-medium text-gray-900 leading-snug">{b.origin_address || '—'}</div>
                    </div>
                    {openMapsOrigin && <i className="fas fa-up-right-from-square text-gray-300 mt-2" />}
                </button>

                <div className="border-l-2 border-dashed border-gray-200 ml-[15px] h-3" />

                <button onClick={openMapsDest} disabled={!openMapsDest}
                        className="w-full flex items-start gap-3 text-left p-2 -m-2 rounded-lg hover:bg-gray-50 transition disabled:hover:bg-transparent">
                    <div className="w-8 h-8 rounded-full bg-red-100 text-red-700 flex items-center justify-center flex-shrink-0 mt-0.5">
                        <i className="fas fa-flag-checkered text-sm" />
                    </div>
                    <div className="flex-1 min-w-0">
                        <div className="text-xs text-gray-500 mb-0.5">Destination</div>
                        <div className="text-sm font-medium text-gray-900 leading-snug">{b.destination_address || '—'}</div>
                    </div>
                    {openMapsDest && <i className="fas fa-up-right-from-square text-gray-300 mt-2" />}
                </button>

                <div className="grid grid-cols-3 gap-2 mt-4 pt-3 border-t border-gray-100 text-center">
                    <div>
                        <div className="text-xs text-gray-500">Distance</div>
                        <div className="font-semibold text-sm">{b.distance_km ? b.distance_km + ' km' : '—'}</div>
                    </div>
                    <div>
                        <div className="text-xs text-gray-500">Durée</div>
                        <div className="font-semibold text-sm">{b.duration_min ? b.duration_min + ' min' : '—'}</div>
                    </div>
                    <div>
                        <div className="text-xs text-gray-500">Prix</div>
                        <div className="font-semibold text-sm">{b.price > 0 ? fmtMoney(b.price) : '—'}</div>
                    </div>
                </div>
            </div>

            <div className="card">
                <div className="text-xs uppercase font-semibold text-gray-500 tracking-wider mb-3">Client</div>
                <div className="font-semibold text-gray-900">
                    {(b.customer_firstname || '') + ' ' + (b.customer_lastname || '')}
                </div>
                {b.customer_mobile && (
                    <button onClick={callPhone} className="mt-3 w-full flex items-center justify-center gap-2 btn-secondary">
                        <i className="fas fa-phone" /> {b.customer_mobile}
                    </button>
                )}
                {b.customer_email && (
                    <a href={'mailto:' + b.customer_email} className="block mt-2 text-sm text-blue-600 text-center break-all">
                        {b.customer_email}
                    </a>
                )}
                <div className="grid grid-cols-2 gap-3 mt-4 pt-3 border-t border-gray-100 text-sm">
                    <div>
                        <div className="text-xs text-gray-500">Passagers</div>
                        <div className="font-medium">{b.seats || 1}</div>
                    </div>
                    <div>
                        <div className="text-xs text-gray-500">Bagages</div>
                        <div className="font-medium">{b.luggage || 0}</div>
                    </div>
                </div>
                {b.flight_number && (
                    <div className="mt-3 pt-3 border-t border-gray-100">
                        <div className="text-xs text-gray-500">Vol</div>
                        <div className="font-medium">{b.flight_number}</div>
                    </div>
                )}
                {b.notes && (
                    <div className="mt-3 pt-3 border-t border-gray-100">
                        <div className="text-xs text-gray-500 mb-1">Notes</div>
                        <div className="text-sm text-gray-800 whitespace-pre-wrap">{b.notes}</div>
                    </div>
                )}
            </div>

            {!b.cancelled && !b.is_completed && (
                <div className="space-y-2">
                    <button className="btn-primary w-full" disabled={busy}
                            onClick={() => updateField({ is_completed: 1, completed_at: new Date().toISOString() }, 'Course terminée')}>
                        <i className="fas fa-check mr-2" /> Marquer comme terminée
                    </button>
                    <button className="btn-danger w-full" disabled={busy}
                            onClick={() => {
                                if (confirm('Annuler cette course ?')) {
                                    updateField({ cancelled: 1, cancelled_at: new Date().toISOString() }, 'Course annulée');
                                }
                            }}>
                        <i className="fas fa-xmark mr-2" /> Annuler la course
                    </button>
                </div>
            )}
        </div>
    );
}

// ==================== PROFILE ====================
function Profile({ user, onLogout }) {
    const toast = useToast();
    return (
        <div className="px-4 py-4 space-y-3 fade-in-up">
            <div className="card text-center">
                <div className="w-20 h-20 mx-auto mb-3 rounded-full bg-mp-primary text-white text-3xl font-bold flex items-center justify-center">
                    {(user.firstname || '?').charAt(0).toUpperCase()}
                </div>
                <div className="text-lg font-bold">{user.firstname} {user.lastname}</div>
                <div className="text-sm text-gray-500">{user.email}</div>
                {user.mobile && <div className="text-sm text-gray-500 mt-1">{user.mobile}</div>}
            </div>

            <div className="card">
                <div className="text-xs uppercase font-semibold text-gray-500 tracking-wider mb-3">Compte</div>
                <Row label="Type" value="Chauffeur" />
                <Row label="Centrale" value={'#' + (user.central_id || '—')} />
                <Row label="Email" value={user.email} />
                <Row label="Téléphone" value={user.mobile || '—'} last />
            </div>

            <div className="card">
                <div className="text-xs uppercase font-semibold text-gray-500 tracking-wider mb-3">Application</div>
                <div className="text-xs text-gray-500 mb-1">Version</div>
                <div className="text-sm font-medium mb-3">{CFG.APP_NAME}</div>
                <a href="https://mypro.ch" target="_blank" rel="noopener" className="block text-sm text-blue-600">
                    mypro.ch <i className="fas fa-up-right-from-square text-xs ml-1" />
                </a>
            </div>

            <button className="btn-danger w-full" onClick={() => {
                if (confirm('Vous déconnecter ?')) {
                    API.logout().finally(() => { toast.info('Déconnecté'); onLogout(); });
                }
            }}>
                <i className="fas fa-right-from-bracket mr-2" /> Se déconnecter
            </button>
        </div>
    );
}

function Row({ label, value, last }) {
    return (
        <div className={'flex items-center justify-between py-2.5 ' + (last ? '' : 'border-b border-gray-100')}>
            <div className="text-sm text-gray-500">{label}</div>
            <div className="text-sm font-medium text-gray-900 truncate ml-3">{value}</div>
        </div>
    );
}

// ==================== MOUNT ====================
ReactDOM.createRoot(document.getElementById('root')).render(<App />);