function MainComponent() { const [user, setUser] = useState(null); const [messages, setMessages] = useState([]); const [onlineUsers, setOnlineUsers] = useState([]); const [messageInput, setMessageInput] = useState(""); const [selectedMedia, setSelectedMedia] = useState(null); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); const [showSidebar, setShowSidebar] = useState(false); const [currentCall, setCurrentCall] = useState(null); const [upload, { loading: uploading }] = useUpload(); const messagesEndRef = useRef(null); const chatContainerRef = useRef(null); const scrollToBottom = ()=>{ messagesEndRef.current?.scrollIntoView({ behavior: "smooth" }); }; useEffect(()=>{ scrollToBottom(); }, [ messages ]); const fetchMessagesAndUsers = async ()=>{ if (!user) return; try { const [messagesRes, usersRes] = await Promise.all([ fetch("/api/get-messages", { method: "POST" }), fetch("/api/get-online-users", { method: "POST" }) ]); const messagesData = await messagesRes.json(); const usersData = await usersRes.json(); setMessages(messagesData.messages || []); setOnlineUsers(usersData.users || []); setLoading(false); } catch (err) { console.error(err); setError("Failed to load chat data"); setLoading(false); } }; useEffect(()=>{ if (user) { fetchMessagesAndUsers(); const interval = setInterval(fetchMessagesAndUsers, 3000); return ()=>clearInterval(interval); } }, [ user ]); const handleSendMessage = async ()=>{ if (!messageInput.trim() && !selectedMedia) return; try { await fetch("/api/send-message", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ content: messageInput.trim(), senderId: user.id, mediaFile: selectedMedia }) }); setMessageInput(""); setSelectedMedia(null); fetchMessagesAndUsers(); } catch (err) { setError("Failed to send message"); } }; const handleMediaUpload = async (file)=>{ try { const { url, mimeType } = await upload({ file }); setSelectedMedia({ url, mimeType }); } catch (err) { setError("Failed to upload file"); } }; const handleInitiateCall = async (receiverId, callType)=>{ try { const response = await fetch("/api/initiate-call", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ callerId: user.id, receiverId, callType }) }); const data = await response.json(); setCurrentCall(data.call); } catch (err) { setError("Failed to start call"); } }; if (!user) { return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gradient-to-br from-indigo-600 via-purple-600 to-pink-500 flex items-center justify-center p-4", __source: { fileName: "", lineNumber: 106, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-xl shadow-xl p-8 w-full max-w-md", __source: { fileName: "", lineNumber: 107, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-bold text-center mb-8 text-gray-800", __source: { fileName: "", lineNumber: 108, columnNumber: 11 }, __self: this }, "Welcome to Chat"), /*#__PURE__*/ React.createElement("form", { onSubmit: async (e)=>{ e.preventDefault(); const name = e.target.username.value.trim(); if (!name) return; try { const response = await fetch("/api/join-chat", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ name }) }); const data = await response.json(); if (data.error) throw new Error(data.error); setUser(data.user); } catch (err) { setError("Failed to join chat"); } }, __source: { fileName: "", lineNumber: 112, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "username", placeholder: "Enter your name", className: "w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-indigo-400 focus:border-indigo-500 transition-all outline-none mb-4", maxLength: 50, required: true, __source: { fileName: "", lineNumber: 133, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-full bg-gradient-to-r from-indigo-500 to-purple-600 text-white font-semibold py-3 px-6 rounded-lg hover:opacity-90 transition-all transform hover:scale-[1.02] active:scale-[0.98]", __source: { fileName: "", lineNumber: 141, columnNumber: 13 }, __self: this }, "Join Chat")))); } return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gradient-to-br from-indigo-600 via-purple-600 to-pink-500", __source: { fileName: "", lineNumber: 154, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "container mx-auto p-2 sm:p-4 h-screen flex flex-col", __source: { fileName: "", lineNumber: 155, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white/95 backdrop-blur-sm rounded-xl shadow-2xl overflow-hidden flex flex-col h-full", __source: { fileName: "", lineNumber: 156, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-gradient-to-r from-indigo-600 to-purple-600 p-4 flex justify-between items-center", __source: { fileName: "", lineNumber: 157, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-3", __source: { fileName: "", lineNumber: 158, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold text-white", __source: { fileName: "", lineNumber: 159, columnNumber: 15 }, __self: this }, "Chat Room"), /*#__PURE__*/ React.createElement("span", { className: "bg-green-400 text-xs text-white px-2 py-1 rounded-full", __source: { fileName: "", lineNumber: 160, columnNumber: 15 }, __self: this }, onlineUsers.length, " online")), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setShowSidebar(!showSidebar), className: "md:hidden text-white hover:bg-white/10 p-2 rounded-lg", __source: { fileName: "", lineNumber: 164, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-users text-xl", __source: { fileName: "", lineNumber: 168, columnNumber: 15 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "flex-1 flex overflow-hidden", __source: { fileName: "", lineNumber: 172, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex-1 flex flex-col overflow-hidden", __source: { fileName: "", lineNumber: 173, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { ref: chatContainerRef, className: "flex-1 overflow-y-auto p-4 space-y-4", __source: { fileName: "", lineNumber: 174, columnNumber: 15 }, __self: this }, loading ? /*#__PURE__*/ React.createElement("div", { className: "flex justify-center items-center h-full", __source: { fileName: "", lineNumber: 179, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "animate-spin rounded-full h-12 w-12 border-b-2 border-indigo-500", __source: { fileName: "", lineNumber: 180, columnNumber: 21 }, __self: this })) : error ? /*#__PURE__*/ React.createElement("div", { className: "text-center text-red-500 p-4 bg-red-50 rounded-lg", __source: { fileName: "", lineNumber: 183, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-exclamation-circle mr-2", __source: { fileName: "", lineNumber: 184, columnNumber: 21 }, __self: this }), error) : messages.map((msg)=>/*#__PURE__*/ React.createElement("div", { key: msg.id, className: `flex ${msg.sender_id === user.id ? "justify-end" : "justify-start"}`, __source: { fileName: "", lineNumber: 189, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `max-w-[70%] ${msg.sender_id === user.id ? "bg-indigo-500" : "bg-purple-500"} rounded-lg p-3 text-white`, __source: { fileName: "", lineNumber: 193, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-sm opacity-75 mb-1", __source: { fileName: "", lineNumber: 196, columnNumber: 25 }, __self: this }, msg.sender_name), msg.content && /*#__PURE__*/ React.createElement("div", { className: "mb-1", __source: { fileName: "", lineNumber: 200, columnNumber: 27 }, __self: this }, msg.content), msg.media_url && (msg.media_type?.startsWith("image/") ? /*#__PURE__*/ React.createElement("img", { src: msg.media_url, alt: "", className: "rounded max-w-[200px]", __source: { fileName: "", lineNumber: 204, columnNumber: 29 }, __self: this }) : msg.media_type?.startsWith("video/") ? /*#__PURE__*/ React.createElement("video", { src: msg.media_url, controls: true, className: "rounded max-w-[200px]", __source: { fileName: "", lineNumber: 210, columnNumber: 29 }, __self: this }) : /*#__PURE__*/ React.createElement("a", { href: msg.media_url, target: "_blank", rel: "noopener noreferrer", className: "flex items-center space-x-2 bg-white/10 rounded p-2", __source: { fileName: "", lineNumber: 216, columnNumber: 29 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-file", __source: { fileName: "", lineNumber: 222, columnNumber: 31 }, __self: this }), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 223, columnNumber: 31 }, __self: this }, "Download file"))), /*#__PURE__*/ React.createElement("div", { className: "text-xs opacity-50 mt-1", __source: { fileName: "", lineNumber: 226, columnNumber: 25 }, __self: this }, new Date(msg.created_at).toLocaleTimeString())))), /*#__PURE__*/ React.createElement("div", { ref: messagesEndRef, __source: { fileName: "", lineNumber: 233, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "p-4 border-t border-gray-200", __source: { fileName: "", lineNumber: 236, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center space-x-2", __source: { fileName: "", lineNumber: 237, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "file", id: "fileInput", className: "hidden", onChange: (e)=>handleMediaUpload(e.target.files[0]), accept: "image/*,video/*,.pdf,.doc,.docx", __source: { fileName: "", lineNumber: 238, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: ()=>document.getElementById("fileInput").click(), className: "p-2 text-gray-500 hover:text-indigo-600 hover:bg-indigo-50 rounded-lg", disabled: uploading, __source: { fileName: "", lineNumber: 245, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fas fa-${uploading ? "spinner fa-spin" : "paperclip"}`, __source: { fileName: "", lineNumber: 250, columnNumber: 21 }, __self: this })), /*#__PURE__*/ React.createElement("input", { type: "text", value: messageInput, onChange: (e)=>setMessageInput(e.target.value), placeholder: "Type your message...", className: "flex-1 px-4 py-2 border border-gray-200 rounded-lg focus:ring-2 focus:ring-indigo-200 focus:border-indigo-500 outline-none", onKeyPress: (e)=>{ if (e.key === "Enter" && !e.shiftKey) { e.preventDefault(); handleSendMessage(); } }, __source: { fileName: "", lineNumber: 254, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: handleSendMessage, disabled: !messageInput.trim() && !selectedMedia, className: "p-2 bg-indigo-500 text-white rounded-lg hover:bg-indigo-600 disabled:opacity-50", __source: { fileName: "", lineNumber: 267, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-paper-plane", __source: { fileName: "", lineNumber: 272, columnNumber: 21 }, __self: this }))), selectedMedia && /*#__PURE__*/ React.createElement("div", { className: "mt-2 p-2 bg-indigo-50 rounded-lg flex items-center justify-between", __source: { fileName: "", lineNumber: 276, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-sm text-indigo-600", __source: { fileName: "", lineNumber: 277, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-paperclip mr-2", __source: { fileName: "", lineNumber: 278, columnNumber: 23 }, __self: this }), "File ready to send"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setSelectedMedia(null), className: "text-indigo-400 hover:text-indigo-600", __source: { fileName: "", lineNumber: 281, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-times", __source: { fileName: "", lineNumber: 285, columnNumber: 23 }, __self: this }))))), /*#__PURE__*/ React.createElement("div", { className: ` ${showSidebar ? "absolute inset-y-0 right-0 w-72" : "hidden"} md:relative md:block bg-white w-72 border-l border-gray-200 `, __source: { fileName: "", lineNumber: 292, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 298, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-lg font-semibold mb-4", __source: { fileName: "", lineNumber: 299, columnNumber: 17 }, __self: this }, "Online Users"), onlineUsers.map((onlineUser)=>/*#__PURE__*/ React.createElement("div", { key: onlineUser.id, className: "flex items-center justify-between p-2 hover:bg-gray-50 rounded-lg", __source: { fileName: "", lineNumber: 301, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 305, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-2 h-2 bg-green-500 rounded-full mr-2", __source: { fileName: "", lineNumber: 306, columnNumber: 23 }, __self: this }), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 307, columnNumber: 23 }, __self: this }, onlineUser.name)), /*#__PURE__*/ React.createElement("div", { className: "flex space-x-1", __source: { fileName: "", lineNumber: 309, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleInitiateCall(onlineUser.id, "audio"), className: "p-2 text-gray-500 hover:text-indigo-600 rounded-lg", __source: { fileName: "", lineNumber: 310, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-phone", __source: { fileName: "", lineNumber: 316, columnNumber: 25 }, __self: this })), /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleInitiateCall(onlineUser.id, "video"), className: "p-2 text-gray-500 hover:text-indigo-600 rounded-lg", __source: { fileName: "", lineNumber: 318, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-video", __source: { fileName: "", lineNumber: 324, columnNumber: 25 }, __self: this })))))))))), currentCall && /*#__PURE__*/ React.createElement("div", { className: "fixed inset-0 bg-black/50 flex items-center justify-center p-4", __source: { fileName: "", lineNumber: 336, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-xl p-6 w-full max-w-lg", __source: { fileName: "", lineNumber: 337, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-xl font-semibold mb-4", __source: { fileName: "", lineNumber: 338, columnNumber: 13 }, __self: this }, currentCall.call_type === "audio" ? "Audio" : "Video", " Call"), /*#__PURE__*/ React.createElement("div", { className: "aspect-video bg-gray-100 rounded-lg mb-4 flex items-center justify-center", __source: { fileName: "", lineNumber: 341, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fas fa-${currentCall.call_type === "audio" ? "microphone" : "video"} text-4xl text-gray-400`, __source: { fileName: "", lineNumber: 342, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex justify-center space-x-4", __source: { fileName: "", lineNumber: 346, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setCurrentCall(null), className: "px-6 py-2 bg-red-500 text-white rounded-lg hover:bg-red-600", __source: { fileName: "", lineNumber: 347, columnNumber: 15 }, __self: this }, "End Call"))))); }