/**
 * EasyTrack Agent - App React
 * - Login OTP par email (mêmes endpoints que app.prod / manager)
 * - Home : "Scanner un véhicule" ou "Mission en cours" (terminer)
 * - Scanner QR (BarcodeDetector via qr-scanner) + géoloc
 * - Distance warning si > 10m, possibilité de forcer avec raison
 * - Historique des shifts
 */

const { useState, useEffect, useRef, useCallback } = React;

const API_URL = 'https://api.easytrack.ch';
const TOKEN_KEY = 'easytrack_agent_token';

// ============================================================
// API helpers
// ============================================================
function getToken() { try { return localStorage.getItem(TOKEN_KEY); } catch { return null; } }
function setToken(t) { try { localStorage.setItem(TOKEN_KEY, t); } catch {} }
function clearToken() { try { localStorage.removeItem(TOKEN_KEY); } catch {} }

async function api(path, options = {}) {
    const headers = { 'Content-Type': 'application/json', ...(options.headers || {}) };
    const tok = getToken();
    if (tok) headers['Authorization'] = `Bearer ${tok}`;
    const res = await fetch(`${API_URL}${path}`, { ...options, headers });
    let data;
    try { data = await res.json(); } catch { data = null; }
    if (!res.ok) {
        const err = new Error(data?.error || `HTTP ${res.status}`);
        err.status = res.status;
        err.data = data;
        throw err;
    }
    return data;
}

// ============================================================
// Helpers
// ============================================================
function formatDuration(seconds) {
    if (!seconds || seconds < 0) return '0min';
    const h = Math.floor(seconds / 3600);
    const m = Math.floor((seconds % 3600) / 60);
    const s = seconds % 60;
    if (h > 0) return `${h}h${String(m).padStart(2,'0')}`;
    if (m > 0) return `${m}min`;
    return `${s}s`;
}
function parseDate(s) {
    if (!s) return null;
    let d = String(s).replace(' ', 'T');
    if (!d.endsWith('Z') && !d.includes('+')) d += 'Z';
    const dt = new Date(d);
    return isFinite(dt) ? dt : null;
}
function formatDate(s) {
    const d = parseDate(s); if (!d) return '-';
    return d.toLocaleDateString('fr-CH', { day: '2-digit', month: '2-digit', year: '2-digit' });
}
function formatTime(s) {
    const d = parseDate(s); if (!d) return '-';
    return d.toLocaleTimeString('fr-CH', { hour: '2-digit', minute: '2-digit' });
}
function formatDateTime(s) {
    const d = parseDate(s); if (!d) return '-';
    return d.toLocaleDateString('fr-CH', { day: '2-digit', month: '2-digit' }) + ' ' +
           d.toLocaleTimeString('fr-CH', { hour: '2-digit', minute: '2-digit' });
}

function getQrTokenFromUrl() {
    try {
        const url = new URL(window.location.href);
        if (url.pathname === '/scan' || url.pathname === '/scan/') {
            return url.searchParams.get('t');
        }
        const m = url.pathname.match(/^\/scan\/([A-Za-z0-9]+)/);
        if (m) return m[1];
    } catch {}
    return null;
}
function clearScanUrl() {
    try { window.history.replaceState({}, '', '/'); } catch {}
}

// Géolocalisation (Promise) avec timeout
function getCurrentPosition(options = {}) {
    return new Promise((resolve, reject) => {
        if (!navigator.geolocation) {
            reject(new Error('Géolocalisation non disponible'));
            return;
        }
        navigator.geolocation.getCurrentPosition(
            (pos) => resolve(pos),
            (err) => reject(err),
            { enableHighAccuracy: true, timeout: 15000, maximumAge: 5000, ...options }
        );
    });
}

// ============================================================
// Toast notifier
// ============================================================
function useToast() {
    const [toast, setToast] = useState(null);
    const show = useCallback((message, type = 'info', duration = 3500) => {
        setToast({ message, type });
        if (duration > 0) setTimeout(() => setToast(null), duration);
    }, []);
    const hide = useCallback(() => setToast(null), []);
    return { toast, show, hide };
}

function ToastView({ toast, onClose }) {
    if (!toast) return null;
    return (
        <div className={`toast ${toast.type}`} onClick={onClose}>
            {toast.message}
        </div>
    );
}

// ============================================================
// SCREEN: Login
// ============================================================
function LoginScreen({ onSuccess, toast }) {
    const [step, setStep] = useState('email');
    const [email, setEmail] = useState('');
    const [code, setCode] = useState(['', '', '', '', '', '']);
    const [loading, setLoading] = useState(false);
    const inputsRef = useRef([]);

    async function requestCode() {
        const e = email.trim().toLowerCase();
        if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(e)) {
            toast.show('Email invalide', 'error');
            return;
        }
        setLoading(true);
        try {
            await api('/auth/request-code', {
                method: 'POST',
                body: JSON.stringify({ email: e, origin: 'agent' })
            });
            setEmail(e);
            setStep('code');
            toast.show('Code envoyé par email', 'success');
            setTimeout(() => inputsRef.current[0]?.focus(), 100);
        } catch (err) {
            toast.show(err.message || 'Erreur envoi code', 'error');
        } finally {
            setLoading(false);
        }
    }

    function onCodeInput(i, v) {
        const digit = v.replace(/\D/g, '').slice(-1);
        const next = [...code];
        next[i] = digit;
        setCode(next);
        if (digit && i < 5) inputsRef.current[i+1]?.focus();
        if (next.every(c => c.length === 1)) verifyCode(next.join(''));
    }
    function onCodeKey(i, e) {
        if (e.key === 'Backspace' && !code[i] && i > 0) {
            inputsRef.current[i-1]?.focus();
        }
    }
    function onCodePaste(e) {
        const txt = (e.clipboardData.getData('text') || '').replace(/\D/g, '').slice(0,6);
        if (txt.length === 6) {
            const arr = txt.split('');
            setCode(arr);
            e.preventDefault();
            verifyCode(txt);
        }
    }

    async function verifyCode(c) {
        setLoading(true);
        try {
            const r = await api('/auth/verify-code', {
                method: 'POST',
                body: JSON.stringify({ email, code: c })
            });
            if (r.token) {
                setToken(r.token);
                onSuccess(r.user);
            } else {
                toast.show('Code incorrect', 'error');
                setCode(['','','','','','']);
                inputsRef.current[0]?.focus();
            }
        } catch (err) {
            toast.show(err.message || 'Code invalide', 'error');
            setCode(['','','','','','']);
            inputsRef.current[0]?.focus();
        } finally {
            setLoading(false);
        }
    }

    return (
        <div className="h-full flex flex-col items-center justify-center px-6 bg-gradient-to-br from-agent-blue to-agent-blue-dark text-white">
            <div className="w-full max-w-sm">
                <img src="assets/logotype/Easytrack-logotype-wt.svg" alt="EasyTrack" className="w-44 mx-auto mb-2" />
                <div className="text-center text-sm uppercase tracking-widest opacity-80 mb-1">Espace Agent</div>

                {step === 'email' && (
                    <div className="mt-10 space-y-4">
                        <h1 className="text-2xl font-bold text-center">Connexion</h1>
                        <p className="text-center text-white/80 text-sm">Entrez votre email pour recevoir un code de connexion.</p>
                        <input
                            type="email"
                            inputMode="email"
                            autoComplete="email"
                            placeholder="votre.email@exemple.ch"
                            value={email}
                            onChange={e => setEmail(e.target.value)}
                            onKeyDown={e => { if (e.key === 'Enter') requestCode(); }}
                            className="input-field text-gray-900"
                            disabled={loading}
                        />
                        <button onClick={requestCode} disabled={loading || !email} className="btn-primary w-full">
                            {loading ? 'Envoi...' : 'Recevoir un code'}
                        </button>
                    </div>
                )}

                {step === 'code' && (
                    <div className="mt-10 space-y-5">
                        <h1 className="text-2xl font-bold text-center">Code de connexion</h1>
                        <p className="text-center text-white/80 text-sm">Entrez le code à 6 chiffres envoyé à<br/><strong className="text-white">{email}</strong></p>
                        <div className="flex gap-2 justify-center" onPaste={onCodePaste}>
                            {code.map((d, i) => (
                                <input
                                    key={i}
                                    ref={el => inputsRef.current[i] = el}
                                    className="code-input"
                                    inputMode="numeric"
                                    pattern="[0-9]*"
                                    maxLength={1}
                                    value={d}
                                    onChange={e => onCodeInput(i, e.target.value)}
                                    onKeyDown={e => onCodeKey(i, e)}
                                    disabled={loading}
                                />
                            ))}
                        </div>
                        <button onClick={() => { setStep('email'); setCode(['','','','','','']); }} className="w-full text-white/80 text-sm py-2">
                            Changer d'email
                        </button>
                    </div>
                )}
            </div>
        </div>
    );
}

// ============================================================
// SCREEN: Distance warning modal
// ============================================================
function DistanceWarningModal({ scanResult, onConfirm, onCancel, loading }) {
    const [reason, setReason] = useState('');
    if (!scanResult) return null;
    const isUnknown = scanResult.action === 'open_distance_unknown';
    return (
        <div className="fixed inset-0 z-50 bg-black/60 flex items-end sm:items-center justify-center" onClick={onCancel}>
            <div className="bg-white rounded-t-3xl sm:rounded-3xl w-full sm:max-w-md p-6 pb-8 max-h-[90vh] overflow-y-auto" onClick={e=>e.stopPropagation()}>
                <div className="flex items-center gap-3 mb-2">
                    <div className="w-12 h-12 rounded-full bg-amber-100 flex items-center justify-center">
                        <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#F59E0B" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round">
                            <path d="M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z"/>
                            <line x1="12" y1="9" x2="12" y2="13"/>
                            <line x1="12" y1="17" x2="12.01" y2="17"/>
                        </svg>
                    </div>
                    <h3 className="text-lg font-bold text-gray-900">Position éloignée</h3>
                </div>
                <p className="text-gray-700 text-sm mb-4 leading-relaxed">{scanResult.message}</p>
                {scanResult.device && (
                    <div className="bg-gray-50 rounded-xl px-4 py-3 mb-4">
                        <div className="text-xs uppercase text-gray-500 font-semibold tracking-wide">Tracker</div>
                        <div className="font-semibold text-gray-900">{scanResult.device.plate || scanResult.device.imei}</div>
                        {scanResult.device.model && <div className="text-sm text-gray-600">{scanResult.device.model}</div>}
                    </div>
                )}
                <label className="block text-xs uppercase tracking-wider text-gray-500 font-semibold mb-2">
                    {isUnknown ? 'Confirmez votre présence' : 'Raison du forçage'}
                </label>
                <textarea
                    rows="3"
                    placeholder={isUnknown ? 'Ex: véhicule à l\'arrêt depuis longtemps...' : 'Ex: tracker en sous-sol, GPS imprécis...'}
                    value={reason}
                    onChange={e => setReason(e.target.value)}
                    className="input-field text-sm"
                />
                <div className="grid grid-cols-2 gap-3 mt-5">
                    <button onClick={onCancel} disabled={loading} className="btn-secondary">Annuler</button>
                    <button onClick={() => onConfirm(reason)} disabled={loading || !reason.trim()} className="btn-primary">
                        {loading ? '...' : 'Forcer'}
                    </button>
                </div>
            </div>
        </div>
    );
}

// ============================================================
// SCREEN: Scanner overlay
// ============================================================
function ScannerOverlay({ onResult, onCancel }) {
    const videoRef = useRef(null);
    const scannerRef = useRef(null);
    const [error, setError] = useState(null);

    useEffect(() => {
        let cancelled = false;
        async function start() {
            try {
                if (!videoRef.current) return;
                const QrScanner = window.QrScanner;
                if (!QrScanner) { setError('Scanner non disponible'); return; }
                const scanner = new QrScanner(
                    videoRef.current,
                    (result) => {
                        if (cancelled) return;
                        const text = result?.data || '';
                        // Extrait le token : URL https://api.easytrack.ch/scan/XXXX, /scan/XXXX, ou XXXX direct
                        let token = null;
                        const m = text.match(/\/scan\/([A-Za-z0-9]+)/);
                        if (m) token = m[1];
                        else if (/^[A-Za-z0-9]{6,32}$/.test(text)) token = text;
                        if (token) {
                            cancelled = true;
                            scanner.stop();
                            onResult(token);
                        }
                    },
                    {
                        preferredCamera: 'environment',
                        highlightScanRegion: false,
                        highlightCodeOutline: true,
                        maxScansPerSecond: 5,
                    }
                );
                scannerRef.current = scanner;
                await scanner.start();
            } catch (e) {
                setError(e.message || 'Impossible d\'accéder à la caméra');
            }
        }
        start();
        return () => {
            cancelled = true;
            try { scannerRef.current?.stop(); } catch {}
            try { scannerRef.current?.destroy(); } catch {}
        };
    }, []);

    return (
        <div className="scanner-overlay qr-scan-region">
            <div className="scanner-header">
                <div className="text-sm font-semibold">Scanner le QR du véhicule</div>
                <button className="scanner-close-btn" onClick={onCancel}>✕</button>
            </div>
            {error ? (
                <div className="m-auto p-6 text-center text-white">
                    <div className="text-4xl mb-3">📷</div>
                    <p className="mb-4">{error}</p>
                    <p className="text-sm text-white/70 mb-6">Autorisez l'accès à la caméra dans les paramètres de votre navigateur.</p>
                    <button className="btn-primary" onClick={onCancel}>Retour</button>
                </div>
            ) : (
                <>
                    <video ref={videoRef} playsInline muted />
                    <div className="scanner-frame">
                        <i className="c-bl"></i>
                        <i className="c-br"></i>
                    </div>
                    <div className="scanner-footer">
                        <div className="text-sm font-medium">Positionnez le QR code dans le cadre</div>
                        <div className="text-xs text-white/70 mt-1">L'app va détecter votre position GPS pour confirmer la prise en charge</div>
                    </div>
                </>
            )}
        </div>
    );
}

// ============================================================
// SCREEN: Home (active shift OR start)
// ============================================================
function HomeScreen({ user, owners, onLogout, toast, autoScanToken }) {
    const [activeShift, setActiveShift] = useState(null);
    const [devices, setDevices] = useState([]);
    const [loading, setLoading] = useState(true);
    const [showScanner, setShowScanner] = useState(false);
    const [scanProcessing, setScanProcessing] = useState(false);
    const [warningResult, setWarningResult] = useState(null);
    const [pendingToken, setPendingToken] = useState(null);
    const [shiftDuration, setShiftDuration] = useState(0);

    // Recharge les données
    async function refresh() {
        try {
            const [s, d] = await Promise.all([
                api('/agent/active-shift'),
                api('/agent/devices'),
            ]);
            setActiveShift(s?.shift || null);
            setDevices(d?.devices || []);
        } catch (e) {
            console.error(e);
        } finally {
            setLoading(false);
        }
    }
    useEffect(() => { refresh(); }, []);

    // Auto-scan si on a un token dans l'URL
    useEffect(() => {
        if (autoScanToken && !loading) {
            handleScanResult(autoScanToken);
        }
    }, [autoScanToken, loading]);

    // Timer durée de la shift active
    useEffect(() => {
        if (!activeShift) { setShiftDuration(0); return; }
        const tick = () => {
            const start = parseDate(activeShift.started_at);
            if (start) setShiftDuration(Math.max(0, Math.round((Date.now() - start.getTime()) / 1000)));
        };
        tick();
        const id = setInterval(tick, 1000);
        return () => clearInterval(id);
    }, [activeShift]);

    async function handleScanResult(token, force = false, reason = null) {
        setScanProcessing(true);
        setShowScanner(false);
        toast.show('Localisation en cours...', 'info', 0);
        try {
            // Géoloc
            let lat, lng, accuracy = null;
            try {
                const pos = await getCurrentPosition();
                lat = pos.coords.latitude;
                lng = pos.coords.longitude;
                accuracy = pos.coords.accuracy;
            } catch (geoErr) {
                toast.hide();
                toast.show('Position GPS requise. Autorisez la géolocalisation.', 'error');
                setScanProcessing(false);
                return;
            }
            toast.hide();

            const body = { token, latitude: lat, longitude: lng, accuracy };
            if (force) { body.force = true; body.force_reason = reason; }
            const r = await api('/agent/scan', { method: 'POST', body: JSON.stringify(body) });

            if (r.action === 'started') {
                toast.show('Mission démarrée !', 'success');
                setActiveShift(r.shift);
                setWarningResult(null);
                setPendingToken(null);
            } else if (r.action === 'ended') {
                const km = r.shift?.total_distance_km;
                const dur = r.shift?.total_duration_s;
                toast.show(`Mission terminée${km ? ' • ' + km.toFixed(1) + ' km' : ''}${dur ? ' • ' + formatDuration(dur) : ''}`, 'success', 5000);
                setActiveShift(null);
                setWarningResult(null);
                setPendingToken(null);
                refresh();
            } else if (r.action === 'open_distance_warning' || r.action === 'open_distance_unknown' || r.action === 'close_distance_warning') {
                setWarningResult(r);
                setPendingToken(token);
            }
        } catch (e) {
            const code = e.data?.code;
            if (code === 'shift_active_elsewhere' && e.data?.active_shift) {
                toast.show(`Mission déjà active sur ${e.data.active_shift.plate || e.data.active_shift.imei}`, 'warning', 5000);
            } else {
                toast.show(e.message || 'Erreur lors du scan', 'error');
            }
        } finally {
            setScanProcessing(false);
            clearScanUrl();
        }
    }

    return (
        <div className="h-full flex flex-col bg-gray-50 overflow-hidden">
            {/* Header */}
            <header className="bg-white border-b border-gray-100 px-5 py-3 flex items-center justify-between flex-shrink-0">
                <div>
                    <div className="text-xs uppercase tracking-widest text-gray-400 font-semibold">Agent</div>
                    <div className="font-bold text-gray-900 truncate max-w-[200px]">{user.name || user.email}</div>
                </div>
                <button onClick={onLogout} className="text-gray-400 hover:text-gray-600 p-2" aria-label="Déconnexion">
                    <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                        <path d="M9 21H5a2 2 0 01-2-2V5a2 2 0 012-2h4"/><polyline points="16 17 21 12 16 7"/><line x1="21" y1="12" x2="9" y2="12"/>
                    </svg>
                </button>
            </header>

            {/* Content */}
            <main className="flex-1 overflow-y-auto px-5 py-5">
                {loading ? (
                    <div className="flex justify-center pt-20"><div className="spinner"></div></div>
                ) : activeShift ? (
                    <ActiveShiftView shift={activeShift} duration={shiftDuration} onScan={() => setShowScanner(true)} processing={scanProcessing} />
                ) : (
                    <NoShiftView devices={devices} owners={owners} onScan={() => setShowScanner(true)} processing={scanProcessing} />
                )}
            </main>

            {/* Scanner */}
            {showScanner && (
                <ScannerOverlay
                    onResult={(token) => handleScanResult(token)}
                    onCancel={() => setShowScanner(false)}
                />
            )}

            {/* Distance warning */}
            {warningResult && (
                <DistanceWarningModal
                    scanResult={warningResult}
                    loading={scanProcessing}
                    onCancel={() => { setWarningResult(null); setPendingToken(null); }}
                    onConfirm={(reason) => handleScanResult(pendingToken, true, reason)}
                />
            )}
        </div>
    );
}

function ActiveShiftView({ shift, duration, onScan, processing }) {
    return (
        <div className="space-y-5">
            <div className="card shift-active-card">
                <div className="flex items-center gap-2 text-xs uppercase tracking-widest opacity-80 mb-3">
                    <div className="pulse-dot"></div>
                    <span>Mission en cours</span>
                </div>
                <div className="text-3xl font-extrabold mb-1">{shift.plate || shift.imei}</div>
                {shift.vehicle_model && <div className="text-base opacity-90">{shift.vehicle_model}</div>}
                {shift.owner_name && <div className="text-sm opacity-75 mt-3">Pour : {shift.owner_name}</div>}

                <div className="grid grid-cols-2 gap-4 mt-5 pt-5 border-t border-white/20">
                    <div>
                        <div className="text-xs uppercase tracking-wider opacity-80">Durée</div>
                        <div className="text-2xl font-bold mt-1">{formatDuration(duration)}</div>
                    </div>
                    <div>
                        <div className="text-xs uppercase tracking-wider opacity-80">Démarré</div>
                        <div className="text-2xl font-bold mt-1">{formatTime(shift.started_at)}</div>
                    </div>
                </div>
                {shift.started_forced ? (
                    <div className="mt-4 text-xs bg-white/15 rounded-lg px-3 py-2">
                        <strong>⚠️ Démarrage forcé :</strong> {shift.started_force_reason || '-'}
                    </div>
                ) : null}
            </div>

            <button onClick={onScan} disabled={processing} className="btn-danger w-full text-base py-5 flex items-center justify-center gap-3">
                {processing ? <div className="spinner" style={{borderTopColor:'white'}}></div> : (
                    <>
                        <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round">
                            <rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/>
                        </svg>
                        <span>Rescanner pour terminer</span>
                    </>
                )}
            </button>

            <div className="text-center text-xs text-gray-500">
                Rescannez le QR code du même véhicule pour clôturer la mission.
            </div>
        </div>
    );
}

function NoShiftView({ devices, owners, onScan, processing }) {
    return (
        <div className="space-y-6">
            <div className="text-center pt-4">
                <div className="w-24 h-24 mx-auto mb-4 rounded-3xl bg-blue-50 flex items-center justify-center">
                    <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="#1E40AF" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                        <rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/>
                    </svg>
                </div>
                <h2 className="text-xl font-bold text-gray-900 mb-1">Aucune mission en cours</h2>
                <p className="text-gray-500 text-sm">Scannez le QR code d'un véhicule pour démarrer.</p>
            </div>

            <button onClick={onScan} disabled={processing} className="btn-primary w-full text-base py-5 flex items-center justify-center gap-3">
                {processing ? <div className="spinner" style={{borderTopColor:'white'}}></div> : (
                    <>
                        <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round">
                            <rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/>
                        </svg>
                        <span>Scanner un véhicule</span>
                    </>
                )}
            </button>

            {devices.length > 0 && (
                <div>
                    <h3 className="text-xs uppercase tracking-widest text-gray-400 font-semibold px-1 mb-2">Véhicules autorisés ({devices.length})</h3>
                    <div className="space-y-2">
                        {devices.map(d => (
                            <div key={d.id} className="card flex items-center gap-3 py-3">
                                <div className="w-10 h-10 rounded-lg bg-blue-50 flex items-center justify-center text-blue-600">
                                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="10"/><circle cx="12" cy="12" r="3"/></svg>
                                </div>
                                <div className="flex-1 min-w-0">
                                    <div className="font-semibold text-gray-900 truncate">{d.vehicle_plate || d.name || d.imei}</div>
                                    <div className="text-xs text-gray-500 truncate">{d.vehicle_model || d.imei}</div>
                                </div>
                                {d.owner_name && <div className="text-xs text-gray-400 truncate max-w-[100px]">{d.owner_name}</div>}
                            </div>
                        ))}
                    </div>
                </div>
            )}
        </div>
    );
}

// ============================================================
// SCREEN: History
// ============================================================
function HistoryScreen() {
    const [shifts, setShifts] = useState([]);
    const [loading, setLoading] = useState(true);
    useEffect(() => {
        api('/agent/shifts').then(r => setShifts(r.shifts || [])).finally(() => setLoading(false));
    }, []);

    return (
        <div className="h-full flex flex-col bg-gray-50">
            <header className="bg-white border-b border-gray-100 px-5 py-3 flex-shrink-0">
                <h1 className="text-lg font-bold text-gray-900">Historique</h1>
                <p className="text-xs text-gray-500">{shifts.length} missions</p>
            </header>
            <main className="flex-1 overflow-y-auto px-5 py-4 pb-24">
                {loading ? (
                    <div className="flex justify-center pt-10"><div className="spinner"></div></div>
                ) : shifts.length === 0 ? (
                    <div className="text-center text-gray-400 pt-12">
                        <div className="text-4xl mb-3">📋</div>
                        <p>Aucune mission pour l'instant.</p>
                    </div>
                ) : (
                    <div className="space-y-2">
                        {shifts.map(s => (
                            <div key={s.id} className="card">
                                <div className="flex items-center justify-between mb-1">
                                    <div className="font-semibold text-gray-900">{s.plate || s.imei}</div>
                                    {s.status === 'active' ? (
                                        <span className="bg-emerald-100 text-emerald-700 px-2 py-0.5 rounded-full text-xs font-bold">En cours</span>
                                    ) : s.status === 'abandoned' ? (
                                        <span className="bg-gray-100 text-gray-500 px-2 py-0.5 rounded-full text-xs font-semibold">Abandonné</span>
                                    ) : (
                                        <span className="text-xs text-gray-400">{formatDateTime(s.ended_at)}</span>
                                    )}
                                </div>
                                <div className="text-xs text-gray-500">{s.vehicle_model || s.imei} {s.owner_name ? `• ${s.owner_name}` : ''}</div>
                                <div className="flex items-center gap-4 mt-2 text-sm">
                                    <span className="text-gray-700"><strong>{formatDate(s.started_at)}</strong> {formatTime(s.started_at)}{s.ended_at ? ' - ' + formatTime(s.ended_at) : ''}</span>
                                </div>
                                {s.status === 'ended' && (
                                    <div className="flex items-center gap-4 mt-2 text-xs text-gray-600">
                                        {s.total_duration_s != null && <span>⏱ {formatDuration(s.total_duration_s)}</span>}
                                        {s.total_distance_km != null && <span>📏 {s.total_distance_km.toFixed(1)} km</span>}
                                        {(s.started_forced || s.ended_forced) ? <span className="text-amber-600">⚠️ Forcé</span> : null}
                                    </div>
                                )}
                            </div>
                        ))}
                    </div>
                )}
            </main>
        </div>
    );
}

// ============================================================
// APP shell with tab bar
// ============================================================
function App() {
    const [user, setUser] = useState(null);
    const [owners, setOwners] = useState([]);
    const [tab, setTab] = useState('home');
    const [bootLoading, setBootLoading] = useState(true);
    const [autoScanToken, setAutoScanToken] = useState(null);
    const toast = useToast();

    // Boot : vérifie session
    useEffect(() => {
        const initialToken = getQrTokenFromUrl();
        if (initialToken) setAutoScanToken(initialToken);
        const tk = getToken();
        if (!tk) { setBootLoading(false); return; }
        api('/agent/me')
            .then(r => {
                setUser(r.agent);
                setOwners(r.owners || []);
            })
            .catch(err => {
                if (err.status === 401 || err.status === 403) {
                    clearToken();
                    if (err.status === 403) toast.show(err.message, 'error', 6000);
                }
            })
            .finally(() => setBootLoading(false));
    }, []);

    function handleLoginSuccess(u) {
        // Après login, on call /agent/me pour valider qu'il est bien rattaché
        api('/agent/me').then(r => {
            setUser(r.agent);
            setOwners(r.owners || []);
        }).catch(err => {
            clearToken();
            toast.show(err.message || 'Compte agent non trouvé', 'error', 8000);
        });
    }

    function handleLogout() {
        if (!confirm('Se déconnecter ?')) return;
        try { api('/auth/logout', { method: 'POST' }); } catch {}
        clearToken();
        setUser(null);
        setTab('home');
    }

    if (bootLoading) return null;

    if (!user) {
        return (
            <>
                <LoginScreen onSuccess={handleLoginSuccess} toast={toast} />
                <ToastView toast={toast.toast} onClose={toast.hide} />
            </>
        );
    }

    return (
        <>
            <div className="h-full flex flex-col" style={{paddingBottom: '64px'}}>
                {tab === 'home' && (
                    <HomeScreen
                        user={user}
                        owners={owners}
                        onLogout={handleLogout}
                        toast={toast}
                        autoScanToken={autoScanToken}
                    />
                )}
                {tab === 'history' && <HistoryScreen />}
            </div>
            <nav className="tab-bar">
                <div className={`tab-item ${tab === 'home' ? 'active' : ''}`} onClick={() => setTab('home')}>
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                        <rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/>
                    </svg>
                    <div className="label">Scanner</div>
                </div>
                <div className={`tab-item ${tab === 'history' ? 'active' : ''}`} onClick={() => setTab('history')}>
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                        <line x1="8" y1="6" x2="21" y2="6"/><line x1="8" y1="12" x2="21" y2="12"/><line x1="8" y1="18" x2="21" y2="18"/>
                        <line x1="3" y1="6" x2="3.01" y2="6"/><line x1="3" y1="12" x2="3.01" y2="12"/><line x1="3" y1="18" x2="3.01" y2="18"/>
                    </svg>
                    <div className="label">Historique</div>
                </div>
            </nav>
            <ToastView toast={toast.toast} onClose={toast.hide} />
        </>
    );
}

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