function MainComponent() { const { data: user, loading } = useUser(); const [messages, setMessages] = useState([ { id: 1, user: "System", message: "Welcome to the Aerial Alliance community chat!", timestamp: new Date(), isSystem: true }, { id: 2, user: "AerialMod", message: "Please keep discussions respectful and on-topic. Share your sighting experiences and theories here.", timestamp: new Date(Date.now() - 3600000), avatar: "https://ucarecdn.com/6c2a93f9-6bfa-4907-a09c-a23632c940e3/-/format/auto/" } ]); const [newMessage, setNewMessage] = useState(""); const [menuOpen, setMenuOpen] = useState(false); const [userStats, setUserStats] = useState({ totalUsers: 0, onlineUsers: 0 }); const [statsLoading, setStatsLoading] = useState(true); const [statsError, setStatsError] = useState(null); const fetchUserStats = async ()=>{ setStatsLoading(true); setStatsError(null); try { const response = await fetch("/api/get-user-stats", { method: "POST" }); if (!response.ok) { throw new Error(`Error: ${response.status}`); } const data = await response.json(); setUserStats(data); } catch (error) { console.error("Failed to fetch user stats:", error); setStatsError("Failed to load user statistics"); } finally{ setStatsLoading(false); } }; const updateOnlineStatus = async (isOnline)=>{ if (!user) return; try { const response = await fetch("/api/update-user-online-status", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ isOnline }) }); if (!response.ok) { console.error("Failed to update online status"); } } catch (error) { console.error("Error updating online status:", error); } }; useEffect(()=>{ fetchUserStats(); if (user) { updateOnlineStatus(true); } return ()=>{ if (user) { updateOnlineStatus(false); } }; }, [ user ]); const handleSendMessage = (e)=>{ e.preventDefault(); if (!newMessage.trim()) return; if (!user) { alert("Please sign in to send messages"); return; } const message = { id: Date.now(), user: user.name || user.email.split("@")[0], message: newMessage, timestamp: new Date(), avatar: user.image || "https://ucarecdn.com/6c2a93f9-6bfa-4907-a09c-a23632c940e3/-/format/auto/" }; setMessages([ ...messages, message ]); setNewMessage(""); }; const formatTime = (date)=>{ return new Date(date).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" }); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#000000] font-orbitron flex flex-col", __source: { fileName: "", lineNumber: 110, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "border-b border-[#4F6BFF] p-4 flex justify-between items-center", __source: { fileName: "", lineNumber: 111, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 112, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-satellite text-white text-2xl mr-3", __source: { fileName: "", lineNumber: 113, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("h1", { className: "text-white text-xl", __source: { fileName: "", lineNumber: 114, columnNumber: 11 }, __self: this }, "A²F")), /*#__PURE__*/ React.createElement("nav", { className: "hidden md:flex space-x-6", __source: { fileName: "", lineNumber: 116, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/", className: "text-[#4F6BFF] hover:text-[#8A9BFF] transition-colors", __source: { fileName: "", lineNumber: 117, columnNumber: 11 }, __self: this }, "HOME"), /*#__PURE__*/ React.createElement("a", { href: "/map", className: "text-[#4F6BFF] hover:text-[#8A9BFF] transition-colors", __source: { fileName: "", lineNumber: 123, columnNumber: 11 }, __self: this }, "MAP"), /*#__PURE__*/ React.createElement("a", { href: "/news", className: "text-[#4F6BFF] hover:text-[#8A9BFF] transition-colors", __source: { fileName: "", lineNumber: 129, columnNumber: 11 }, __self: this }, "NEWS"), /*#__PURE__*/ React.createElement("a", { href: "/report", className: "text-[#4F6BFF] hover:text-[#8A9BFF] transition-colors", __source: { fileName: "", lineNumber: 135, columnNumber: 11 }, __self: this }, "REPORT"), /*#__PURE__*/ React.createElement("a", { href: "/radar", className: "text-[#4F6BFF] hover:text-[#8A9BFF] transition-colors", __source: { fileName: "", lineNumber: 141, columnNumber: 11 }, __self: this }, "FLIGHT RADAR"), /*#__PURE__*/ React.createElement("a", { href: "/chat", className: "text-[#A56BFF] border-b-2 border-[#A56BFF]", __source: { fileName: "", lineNumber: 147, columnNumber: 11 }, __self: this }, "CHAT"), /*#__PURE__*/ React.createElement("a", { href: "/settings", className: "text-[#4F6BFF] hover:text-[#8A9BFF] transition-colors", __source: { fileName: "", lineNumber: 153, columnNumber: 11 }, __self: this }, "SETTINGS")), /*#__PURE__*/ React.createElement("div", { className: "md:hidden cursor-pointer", onClick: ()=>setMenuOpen(!menuOpen), __source: { fileName: "", lineNumber: 160, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-bars text-white text-xl", __source: { fileName: "", lineNumber: 164, columnNumber: 11 }, __self: this }))), menuOpen && /*#__PURE__*/ React.createElement("div", { className: "md:hidden bg-[#000000] border border-[#4F6BFF] p-4 absolute top-16 right-4 z-10 rounded-md", __source: { fileName: "", lineNumber: 169, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col space-y-4", __source: { fileName: "", lineNumber: 170, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/", className: "text-[#4F6BFF] hover:text-[#8A9BFF] transition-colors", __source: { fileName: "", lineNumber: 171, columnNumber: 13 }, __self: this }, "HOME"), /*#__PURE__*/ React.createElement("a", { href: "/map", className: "text-[#4F6BFF] hover:text-[#8A9BFF] transition-colors", __source: { fileName: "", lineNumber: 177, columnNumber: 13 }, __self: this }, "MAP"), /*#__PURE__*/ React.createElement("a", { href: "/news", className: "text-[#4F6BFF] hover:text-[#8A9BFF] transition-colors", __source: { fileName: "", lineNumber: 183, columnNumber: 13 }, __self: this }, "NEWS"), /*#__PURE__*/ React.createElement("a", { href: "/report", className: "text-[#4F6BFF] hover:text-[#8A9BFF] transition-colors", __source: { fileName: "", lineNumber: 189, columnNumber: 13 }, __self: this }, "REPORT"), /*#__PURE__*/ React.createElement("a", { href: "/radar", className: "text-[#4F6BFF] hover:text-[#8A9BFF] transition-colors", __source: { fileName: "", lineNumber: 195, columnNumber: 13 }, __self: this }, "FLIGHT RADAR"), /*#__PURE__*/ React.createElement("a", { href: "/chat", className: "text-[#A56BFF] border-b border-[#A56BFF]", __source: { fileName: "", lineNumber: 201, columnNumber: 13 }, __self: this }, "CHAT"), /*#__PURE__*/ React.createElement("a", { href: "/settings", className: "text-[#4F6BFF] hover:text-[#8A9BFF] transition-colors", __source: { fileName: "", lineNumber: 207, columnNumber: 13 }, __self: this }, "SETTINGS"))), /*#__PURE__*/ React.createElement("div", { className: "flex-1 p-4 flex flex-col", __source: { fileName: "", lineNumber: 217, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center mb-4", __source: { fileName: "", lineNumber: 218, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-comments text-white text-xl mr-2", __source: { fileName: "", lineNumber: 219, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("h2", { className: "text-[#A56BFF] text-xl", __source: { fileName: "", lineNumber: 220, columnNumber: 11 }, __self: this }, "COMMUNITY CHAT")), /*#__PURE__*/ React.createElement("div", { className: "border border-[#4F6BFF] rounded-lg p-4 mb-4 bg-[#000000]", __source: { fileName: "", lineNumber: 223, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center", __source: { fileName: "", lineNumber: 224, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 225, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-users text-white text-lg mr-2", __source: { fileName: "", lineNumber: 226, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("h3", { className: "text-[#4F6BFF] text-lg", __source: { fileName: "", lineNumber: 227, columnNumber: 15 }, __self: this }, "NETWORK STATUS")), /*#__PURE__*/ React.createElement("button", { onClick: fetchUserStats, className: "bg-[#000000] border border-[#4F6BFF] text-[#4F6BFF] p-2 rounded-md hover:bg-[#0A0A20] hover:border-[#A56BFF]", disabled: statsLoading, __source: { fileName: "", lineNumber: 229, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-sync-alt text-white", __source: { fileName: "", lineNumber: 234, columnNumber: 15 }, __self: this }))), statsError ? /*#__PURE__*/ React.createElement("div", { className: "text-[#FF6B8A] mt-2", __source: { fileName: "", lineNumber: 239, columnNumber: 13 }, __self: this }, statsError) : statsLoading ? /*#__PURE__*/ React.createElement("div", { className: "flex justify-center mt-2", __source: { fileName: "", lineNumber: 241, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-spinner fa-spin text-white", __source: { fileName: "", lineNumber: 242, columnNumber: 15 }, __self: this })) : /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-2 gap-4 mt-3", __source: { fileName: "", lineNumber: 245, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "border border-[#4F6BFF] rounded-md p-3 text-center bg-[#0A0A20]", __source: { fileName: "", lineNumber: 246, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-[#8A9BFF] text-sm", __source: { fileName: "", lineNumber: 247, columnNumber: 17 }, __self: this }, "TOTAL MEMBERS"), /*#__PURE__*/ React.createElement("div", { className: "text-[#A56BFF] text-xl mt-1", __source: { fileName: "", lineNumber: 248, columnNumber: 17 }, __self: this }, userStats.totalUsers)), /*#__PURE__*/ React.createElement("div", { className: "border border-[#4F6BFF] rounded-md p-3 text-center bg-[#0A0A20]", __source: { fileName: "", lineNumber: 252, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-[#8A9BFF] text-sm", __source: { fileName: "", lineNumber: 253, columnNumber: 17 }, __self: this }, "ONLINE NOW"), /*#__PURE__*/ React.createElement("div", { className: "text-[#A56BFF] text-xl mt-1", __source: { fileName: "", lineNumber: 254, columnNumber: 17 }, __self: this }, userStats.onlineUsers)))), /*#__PURE__*/ React.createElement("div", { className: "flex-1 flex flex-col border border-[#4F6BFF] rounded-lg p-4 mb-4 overflow-hidden", __source: { fileName: "", lineNumber: 262, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex-1 overflow-y-auto mb-4 space-y-4", __source: { fileName: "", lineNumber: 263, columnNumber: 11 }, __self: this }, messages.map((msg)=>/*#__PURE__*/ React.createElement("div", { key: msg.id, className: `flex ${msg.isSystem ? "justify-center" : "items-start"}`, __source: { fileName: "", lineNumber: 265, columnNumber: 15 }, __self: this }, !msg.isSystem && /*#__PURE__*/ React.createElement("div", { className: "w-10 h-10 rounded-full overflow-hidden mr-3 border border-[#4F6BFF]", __source: { fileName: "", lineNumber: 270, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: msg.avatar || "https://ucarecdn.com/6c2a93f9-6bfa-4907-a09c-a23632c940e3/-/format/auto/", alt: msg.user, className: "w-full h-full object-cover", __source: { fileName: "", lineNumber: 271, columnNumber: 21 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: `${msg.isSystem ? "bg-[#0A0A20] border border-[#4F6BFF] px-4 py-2 rounded-md" : "flex-1"}`, __source: { fileName: "", lineNumber: 281, columnNumber: 17 }, __self: this }, !msg.isSystem && /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center mb-1", __source: { fileName: "", lineNumber: 285, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-[#A56BFF] font-medium", __source: { fileName: "", lineNumber: 286, columnNumber: 23 }, __self: this }, msg.user), /*#__PURE__*/ React.createElement("span", { className: "text-[#8A9BFF] text-xs", __source: { fileName: "", lineNumber: 289, columnNumber: 23 }, __self: this }, formatTime(msg.timestamp))), /*#__PURE__*/ React.createElement("p", { className: `${msg.isSystem ? "text-[#8A9BFF] text-sm" : "text-white"}`, __source: { fileName: "", lineNumber: 294, columnNumber: 19 }, __self: this }, msg.message))))), /*#__PURE__*/ React.createElement("form", { onSubmit: handleSendMessage, className: "flex gap-2", __source: { fileName: "", lineNumber: 304, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", value: newMessage, onChange: (e)=>setNewMessage(e.target.value), placeholder: user ? "Type your message..." : "Sign in to chat", disabled: !user, className: "flex-1 bg-[#0A0A20] border border-[#4F6BFF] rounded-md px-4 py-2 text-white focus:outline-none focus:border-[#A56BFF]", name: "message", __source: { fileName: "", lineNumber: 305, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", disabled: !user, className: "bg-[#0A0A20] border border-[#4F6BFF] text-[#A56BFF] px-4 py-2 rounded-md disabled:opacity-50 hover:bg-[#0A0A20] hover:border-[#A56BFF]", __source: { fileName: "", lineNumber: 314, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-paper-plane mr-2", __source: { fileName: "", lineNumber: 319, columnNumber: 15 }, __self: this }), "SEND"))), !user && !loading && /*#__PURE__*/ React.createElement("div", { className: "text-center p-4 border border-[#4F6BFF] rounded-lg bg-[#0A0A20]", __source: { fileName: "", lineNumber: 326, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-[#8A9BFF] mb-4", __source: { fileName: "", lineNumber: 327, columnNumber: 13 }, __self: this }, "YOU NEED TO SIGN IN TO PARTICIPATE IN THE CHAT"), /*#__PURE__*/ React.createElement("a", { href: "/account/signin?callbackUrl=/chat", className: "inline-block bg-[#000000] border border-[#A56BFF] text-[#A56BFF] px-6 py-2 rounded-md hover:bg-[#0A0A20]", __source: { fileName: "", lineNumber: 330, columnNumber: 13 }, __self: this }, "SIGN IN"))), /*#__PURE__*/ React.createElement("footer", { className: "border-t border-[#4F6BFF] p-4 text-center", __source: { fileName: "", lineNumber: 340, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-[#8A9BFF] text-sm", __source: { fileName: "", lineNumber: 341, columnNumber: 9 }, __self: this }, "© 2025 AERIAL ALLIANCE • ALL RIGHTS RESERVED")), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 346, columnNumber: 7 }, __self: this }, ` @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600;700&display=swap'); * { font-family: 'Orbitron', sans-serif !important; } @keyframes glow { 0% { box-shadow: 0 0 5px rgba(79, 107, 255, 0.3), 0 0 10px rgba(79, 107, 255, 0.2), 0 0 15px rgba(165, 107, 255, 0.1); } 50% { box-shadow: 0 0 10px rgba(79, 107, 255, 0.4), 0 0 20px rgba(165, 107, 255, 0.3), 0 0 30px rgba(79, 107, 255, 0.2); } 100% { box-shadow: 0 0 5px rgba(79, 107, 255, 0.3), 0 0 10px rgba(79, 107, 255, 0.2), 0 0 15px rgba(165, 107, 255, 0.1); } } @keyframes iconGlow { 0% { filter: drop-shadow(0 0 5px rgba(255,255,255,0.4)) drop-shadow(0 0 10px rgba(79,107,255,0.3)); } 50% { filter: drop-shadow(0 0 10px rgba(255,255,255,0.5)) drop-shadow(0 0 20px rgba(165,107,255,0.4)); } 100% { filter: drop-shadow(0 0 5px rgba(255,255,255,0.4)) drop-shadow(0 0 10px rgba(79,107,255,0.3)); } } i.fas { animation: iconGlow 1.5s ease-in-out infinite; } i, button, .border, h1, h2, h3, h4, nav a { text-shadow: 0 0 10px #fff, 0 0 20px #4F6BFF, 0 0 30px #A56BFF; } .border, button, a, input { box-shadow: 0 0 10px rgba(79, 107, 255, 0.2), 0 0 20px rgba(165, 107, 255, 0.1), 0 0 30px rgba(79, 107, 255, 0.1); } button:hover, a:hover { animation: glow 1.5s ease-in-out infinite; } `)); }