function MainComponent() { const [ride, setRide] = useState(null); const [status, setStatus] = useState("en_route"); const [messages, setMessages] = useState([]); const [newMessage, setNewMessage] = useState(""); const [error, setError] = useState(null); const [isOffline, setIsOffline] = useState(!navigator.onLine); const [pendingActions, setPendingActions] = useState([]); const [chatOpen, setChatOpen] = useState(false); const [waitTimer, setWaitTimer] = useState(0); const [showSummary, setShowSummary] = useState(false); useEffect(()=>{ const handleOnline = ()=>setIsOffline(false); const handleOffline = ()=>setIsOffline(true); window.addEventListener("online", handleOnline); window.addEventListener("offline", handleOffline); return ()=>{ window.removeEventListener("online", handleOnline); window.removeEventListener("offline", handleOffline); }; }, []); useEffect(()=>{ const loadInitialData = async ()=>{ try { const response = await fetch("/api/driver/current-ride"); if (!response.ok) throw new Error("Failed to load ride data"); const data = await response.json(); setRide(data); setStatus(data.status); } catch (err) { console.error(err); setError("Impossible de charger les données de la course"); } }; loadInitialData(); }, []); useEffect(()=>{ let interval; if (status === "en_attente") { interval = setInterval(()=>{ setWaitTimer((prev)=>prev + 1); }, 1000); } return ()=>clearInterval(interval); }, [ status ]); useEffect(()=>{ if (status === "arrived") { const audio = new Audio("/notification.mp3"); audio.play().catch(console.error); } }, [ status ]); const updateRideStatus = async (newStatus)=>{ const action = { type: "STATUS_UPDATE", status: newStatus, timestamp: Date.now() }; if (isOffline) { setPendingActions((prev)=>[ ...prev, action ]); setStatus(newStatus); localStorage.setItem("pendingActions", JSON.stringify(pendingActions)); return; } try { const response = await fetch("/api/driver/ride-status", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ driverId: ride.driverId, bookingId: ride.id, newStatus, location: ride.currentLocation }) }); if (!response.ok) throw new Error("Failed to update status"); setStatus(newStatus); if (newStatus === "course_terminee") { setShowSummary(true); } } catch (err) { console.error(err); setPendingActions((prev)=>[ ...prev, action ]); localStorage.setItem("pendingActions", JSON.stringify(pendingActions)); } }; const sendMessage = async (e)=>{ e.preventDefault(); if (!newMessage.trim()) return; const messageData = { text: newMessage, timestamp: Date.now(), sender: "driver" }; if (isOffline) { setMessages((prev)=>[ ...prev, { ...messageData, pending: true } ]); localStorage.setItem("pendingMessages", JSON.stringify(messages)); setNewMessage(""); return; } try { const response = await fetch("/api/driver/send-message", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ message: newMessage, rideId: ride.id }) }); if (!response.ok) throw new Error("Failed to send message"); setMessages((prev)=>[ ...prev, messageData ]); setNewMessage(""); } catch (err) { console.error(err); setMessages((prev)=>[ ...prev, { ...messageData, pending: true } ]); localStorage.setItem("pendingMessages", JSON.stringify(messages)); } }; const formatTimer = (seconds)=>{ const minutes = Math.floor(seconds / 60); const remainingSeconds = seconds % 60; return `${minutes}:${remainingSeconds.toString().padStart(2, "0")}`; }; const progressSteps = [ { id: "en_route", label: "En route", icon: "car" }, { id: "en_attente", label: "En attente", icon: "clock" }, { id: "client_a_bord", label: "Client à bord", icon: "user" }, { id: "course_terminee", label: "Terminée", icon: "flag-checkered" } ]; const currentStepIndex = progressSteps.findIndex((step)=>step.id === status); return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#0a0a0a] text-white", __source: { fileName: "", lineNumber: 151, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "h-[60vh] relative", __source: { fileName: "", lineNumber: 152, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0 bg-[#111]", __source: { fileName: "", lineNumber: 153, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("iframe", { src: `https://maps.create.xyz/embed?origin=${ride?.pickup.lat},${ride?.pickup.lng}&destination=${ride?.destination.lat},${ride?.destination.lng}`, className: "w-full h-full border-0", title: "Carte du trajet", __source: { fileName: "", lineNumber: 154, columnNumber: 11 }, __self: this }), isOffline && /*#__PURE__*/ React.createElement("div", { className: "absolute top-4 left-4 right-4 bg-yellow-900/90 text-yellow-200 p-3 rounded-lg", __source: { fileName: "", lineNumber: 160, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-exclamation-triangle mr-2", __source: { fileName: "", lineNumber: 161, columnNumber: 15 }, __self: this }), "Mode hors ligne - Les actions seront synchronisées une fois la connexion rétablie"))), /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 169, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-6 bg-[#111] rounded-lg p-4", __source: { fileName: "", lineNumber: 170, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between mb-4", __source: { fileName: "", lineNumber: 171, columnNumber: 11 }, __self: this }, progressSteps.map((step, index)=>/*#__PURE__*/ React.createElement("div", { key: step.id, className: "flex flex-col items-center", __source: { fileName: "", lineNumber: 173, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `w-10 h-10 rounded-full flex items-center justify-center ${index <= currentStepIndex ? "bg-[#C9B037] text-[#0a0a0a]" : "bg-[#333] text-white/60"}`, __source: { fileName: "", lineNumber: 174, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fas fa-${step.icon}`, __source: { fileName: "", lineNumber: 177, columnNumber: 19 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "text-xs mt-2 text-center", __source: { fileName: "", lineNumber: 179, columnNumber: 17 }, __self: this }, step.label), index < progressSteps.length - 1 && /*#__PURE__*/ React.createElement("div", { className: `h-[2px] w-16 mt-2 ${index < currentStepIndex ? "bg-[#C9B037]" : "bg-[#333]"}`, __source: { fileName: "", lineNumber: 181, columnNumber: 19 }, __self: this })))), status === "en_attente" && /*#__PURE__*/ React.createElement("div", { className: "text-center text-[#C9B037] font-medium", __source: { fileName: "", lineNumber: 189, columnNumber: 13 }, __self: this }, "Temps d'attente: ", formatTimer(waitTimer))), /*#__PURE__*/ React.createElement("div", { className: "bg-[#111] rounded-lg border border-[#C9B037]/20 p-4 mb-4", __source: { fileName: "", lineNumber: 195, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center space-x-4", __source: { fileName: "", lineNumber: 196, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: ride?.client.photo || "/default-avatar.png", alt: `Photo de ${ride?.client.name}`, className: "w-16 h-16 rounded-full object-cover", __source: { fileName: "", lineNumber: 197, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "flex-1", __source: { fileName: "", lineNumber: 202, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-[#C9B037] font-medium", __source: { fileName: "", lineNumber: 203, columnNumber: 15 }, __self: this }, ride?.client.name), /*#__PURE__*/ React.createElement("p", { className: "text-white/60 text-sm", __source: { fileName: "", lineNumber: 206, columnNumber: 15 }, __self: this }, ride?.destination.address)), /*#__PURE__*/ React.createElement("div", { className: "flex gap-2", __source: { fileName: "", lineNumber: 210, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: `tel:${ride?.client.phone}`, className: "p-3 bg-[#C9B037] text-[#0a0a0a] rounded-full", __source: { fileName: "", lineNumber: 211, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-phone", __source: { fileName: "", lineNumber: 215, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setChatOpen(!chatOpen), className: "p-3 bg-[#C9B037] text-[#0a0a0a] rounded-full", __source: { fileName: "", lineNumber: 217, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-comments", __source: { fileName: "", lineNumber: 221, columnNumber: 17 }, __self: this }))))), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 gap-4 mb-4", __source: { fileName: "", lineNumber: 227, columnNumber: 9 }, __self: this }, status === "en_route" && /*#__PURE__*/ React.createElement("button", { onClick: ()=>updateRideStatus("en_attente"), className: "p-4 rounded-lg bg-[#C9B037] text-[#0a0a0a] font-medium", __source: { fileName: "", lineNumber: 229, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-car mr-2", __source: { fileName: "", lineNumber: 233, columnNumber: 15 }, __self: this }), "Je suis arrivé"), status === "en_attente" && /*#__PURE__*/ React.createElement("button", { onClick: ()=>updateRideStatus("client_a_bord"), className: "p-4 rounded-lg bg-[#C9B037] text-[#0a0a0a] font-medium", __source: { fileName: "", lineNumber: 239, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-user-check mr-2", __source: { fileName: "", lineNumber: 243, columnNumber: 15 }, __self: this }), "Client à bord"), status === "client_a_bord" && /*#__PURE__*/ React.createElement("button", { onClick: ()=>updateRideStatus("course_terminee"), className: "p-4 rounded-lg bg-[#C9B037] text-[#0a0a0a] font-medium", __source: { fileName: "", lineNumber: 249, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-flag-checkered mr-2", __source: { fileName: "", lineNumber: 253, columnNumber: 15 }, __self: this }), "Terminer la course")), chatOpen && /*#__PURE__*/ React.createElement("div", { className: "bg-[#111] rounded-lg border border-[#C9B037]/20 p-4", __source: { fileName: "", lineNumber: 260, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center mb-4", __source: { fileName: "", lineNumber: 261, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-[#C9B037] font-medium", __source: { fileName: "", lineNumber: 262, columnNumber: 15 }, __self: this }, "Messages"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setChatOpen(false), className: "text-white/60", __source: { fileName: "", lineNumber: 263, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-times", __source: { fileName: "", lineNumber: 267, columnNumber: 17 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "h-48 overflow-y-auto mb-4 space-y-2", __source: { fileName: "", lineNumber: 271, columnNumber: 13 }, __self: this }, messages.map((message, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: `p-2 rounded-lg max-w-[80%] ${message.sender === "driver" ? "ml-auto bg-[#C9B037] text-[#0a0a0a]" : "bg-[#333] text-white"} ${message.pending ? "opacity-50" : ""}`, __source: { fileName: "", lineNumber: 273, columnNumber: 17 }, __self: this }, message.text, message.pending && /*#__PURE__*/ React.createElement("span", { className: "ml-2", __source: { fileName: "", lineNumber: 283, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-clock text-xs", __source: { fileName: "", lineNumber: 284, columnNumber: 23 }, __self: this }))))), /*#__PURE__*/ React.createElement("form", { onSubmit: sendMessage, className: "flex gap-2", __source: { fileName: "", lineNumber: 291, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", value: newMessage, onChange: (e)=>setNewMessage(e.target.value), placeholder: isOffline ? "Mode hors ligne - Messages en attente" : "Votre message...", className: "flex-1 bg-[#0a0a0a] border-2 border-[#C9B037]/30 rounded-lg p-2", __source: { fileName: "", lineNumber: 292, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "p-2 bg-[#C9B037] text-[#0a0a0a] rounded-lg", __source: { fileName: "", lineNumber: 303, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-paper-plane", __source: { fileName: "", lineNumber: 307, columnNumber: 17 }, __self: this })))), status === "course_terminee" && /*#__PURE__*/ React.createElement("div", { className: "mt-4 bg-[#111] rounded-lg p-4 border border-[#C9B037]/20", __source: { fileName: "", lineNumber: 314, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-[#C9B037] font-medium mb-4", __source: { fileName: "", lineNumber: 315, columnNumber: 13 }, __self: this }, "Résumé de la course"), /*#__PURE__*/ React.createElement("div", { className: "space-y-2", __source: { fileName: "", lineNumber: 318, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 319, columnNumber: 15 }, __self: this }, "Durée totale: ", formatTimer(waitTimer)), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 320, columnNumber: 15 }, __self: this }, "Distance: ", ride?.distance, " km"), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 321, columnNumber: 15 }, __self: this }, "Prix: ", ride?.price, "€"))), error && /*#__PURE__*/ React.createElement("div", { className: "mt-4 p-4 bg-red-900/20 text-red-200 rounded-lg border border-red-500/20", __source: { fileName: "", lineNumber: 327, columnNumber: 11 }, __self: this }, error))); }