function MainComponent() { const [currentUser, setCurrentUser] = React.useState(null); const [currentView, setCurrentView] = React.useState("login"); const [loading, setLoading] = React.useState(false); const [error, setError] = React.useState(""); // Login/Register states const [walletAddress, setWalletAddress] = React.useState(""); const [username, setUsername] = React.useState(""); const [showPaymentPopup, setShowPaymentPopup] = React.useState(false); const [walletStatus, setWalletStatus] = React.useState(""); // Posts states const [posts, setPosts] = React.useState([]); const [newPostContent, setNewPostContent] = React.useState(""); const [selectedGroup, setSelectedGroup] = React.useState(null); // Groups states const [groups, setGroups] = React.useState([]); const [newGroupName, setNewGroupName] = React.useState(""); const [newGroupDescription, setNewGroupDescription] = React.useState(""); const [showCreateGroup, setShowCreateGroup] = React.useState(false); // Chat states const [chats, setChats] = React.useState([]); const [selectedChat, setSelectedChat] = React.useState(null); const [messages, setMessages] = React.useState([]); const [newMessage, setNewMessage] = React.useState(""); const [users, setUsers] = React.useState([]); // Load data on user login React.useEffect(()=>{ if (currentUser) { loadPosts(); loadGroups(); loadChats(); } }, [ currentUser, selectedGroup ]); // Wallet verification constants and functions const SHEETDB_URL = "https://sheetdb.io/api/v1/uucm3nzitvt3k"; const RECEIVER_WALLET = "4b6c4a219196250d8948cee9f4d0c48a7823cd91f8b3cea65c30b39fbc31374f"; const verifyWallet = ()=>{ const wallet = walletAddress.trim(); if (!wallet) { setWalletStatus("

Enter a wallet address.

"); return; } setLoading(true); setWalletStatus(""); fetch(SHEETDB_URL).then((res)=>res.json()).then((data)=>{ let balance = data.reduce((sum, tx)=>{ if (tx.From === wallet) sum -= parseFloat(tx.Amount) || 0; if (tx.To === wallet) sum += parseFloat(tx.Amount) || 0; return sum; }, 0); if (balance >= 10) { setShowPaymentPopup(true); setLoading(false); } else { setWalletStatus("

Insufficient balance.

"); setLoading(false); } }).catch(()=>{ setWalletStatus("

Error fetching balance.

"); setLoading(false); }); }; const deductPayment = (wallet)=>{ setLoading(true); const transaction = { data: [ { Type: "Payment", From: wallet || walletAddress, To: RECEIVER_WALLET, Amount: "10", Timestamp: new Date().toISOString() } ] }; fetch(SHEETDB_URL, { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(transaction) }).then(()=>{ setWalletStatus("

Payment successful!

"); // Register user after successful payment setTimeout(async ()=>{ try { const registerResponse = await fetch("/api/register", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ wallet_address: walletAddress, username }) }); const registerData = await registerResponse.json(); if (registerData.success) { setCurrentUser(registerData.user); setCurrentView("feed"); setShowPaymentPopup(false); setWalletStatus(""); setError(""); } else { setError(registerData.error); } } catch (err) { setError("Registration failed after payment."); } finally{ setLoading(false); } }, 1000); }).catch(()=>{ setWalletStatus("

Transaction failed.

"); setLoading(false); }); }; const handleLogin = async ()=>{ if (!walletAddress.trim()) { setError("Enter a wallet address."); return; } setLoading(true); setError(""); try { const response = await fetch("/api/login", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ wallet_address: walletAddress }) }); const data = await response.json(); if (data.success) { setCurrentUser(data.user); setCurrentView("feed"); } else { setError(data.error); } } catch (err) { setError("Login failed."); } finally{ setLoading(false); } }; const loadPosts = async ()=>{ try { const response = await fetch("/api/posts/list", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ group_id: selectedGroup?.id }) }); const data = await response.json(); if (data.success) { setPosts(data.posts); } } catch (err) { console.error("Failed to load posts:", err); } }; const createPost = async ()=>{ if (!newPostContent.trim()) return; try { const response = await fetch("/api/posts/create", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ user_id: currentUser.id, content: newPostContent, group_id: selectedGroup?.id }) }); const data = await response.json(); if (data.success) { setNewPostContent(""); loadPosts(); } } catch (err) { console.error("Failed to create post:", err); } }; const loadGroups = async ()=>{ try { const response = await fetch("/api/groups/list", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ user_id: currentUser?.id }) }); const data = await response.json(); if (data.success) { setGroups(data.groups); } } catch (err) { console.error("Failed to load groups:", err); } }; const createGroup = async ()=>{ if (!newGroupName.trim()) return; try { const response = await fetch("/api/groups/create", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ creator_id: currentUser.id, name: newGroupName, description: newGroupDescription }) }); const data = await response.json(); if (data.success) { setNewGroupName(""); setNewGroupDescription(""); setShowCreateGroup(false); loadGroups(); } } catch (err) { console.error("Failed to create group:", err); } }; const loadChats = async ()=>{ try { const response = await fetch("/api/chats/list", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ user_id: currentUser.id }) }); const data = await response.json(); if (data.success) { setChats(data.chats); } } catch (err) { console.error("Failed to load chats:", err); } }; const loadMessages = async (chatId)=>{ try { const response = await fetch("/api/messages/list", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ chat_id: chatId }) }); const data = await response.json(); if (data.success) { setMessages(data.messages); } } catch (err) { console.error("Failed to load messages:", err); } }; const sendMessage = async ()=>{ if (!newMessage.trim() || !selectedChat) return; try { const response = await fetch("/api/messages/send", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ chat_id: selectedChat.id, sender_id: currentUser.id, content: newMessage }) }); const data = await response.json(); if (data.success) { setNewMessage(""); loadMessages(selectedChat.id); } } catch (err) { console.error("Failed to send message:", err); } }; const formatDate = (dateString)=>{ return new Date(dateString).toLocaleDateString("en-US", { month: "short", day: "numeric", hour: "2-digit", minute: "2-digit" }); }; // Login/Register View if (currentView === "login") { return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100 flex items-center justify-center p-4", __source: { fileName: "", lineNumber: 318, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-2xl shadow-xl p-8 w-full max-w-md", __source: { fileName: "", lineNumber: 319, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center mb-8", __source: { fileName: "", lineNumber: 320, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-bold text-gray-800 mb-2", __source: { fileName: "", lineNumber: 321, columnNumber: 13 }, __self: this }, "Social Connect"), /*#__PURE__*/ React.createElement("p", { className: "text-gray-600", __source: { fileName: "", lineNumber: 324, columnNumber: 13 }, __self: this }, "Connect with your wallet")), /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 327, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 328, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-gray-700 mb-2", __source: { fileName: "", lineNumber: 329, columnNumber: 15 }, __self: this }, "Wallet Address"), /*#__PURE__*/ React.createElement("input", { id: "walletInput", type: "text", value: walletAddress, onChange: (e)=>setWalletAddress(e.target.value), className: "w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent", placeholder: "Enter your wallet address", __source: { fileName: "", lineNumber: 332, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 342, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-gray-700 mb-2", __source: { fileName: "", lineNumber: 343, columnNumber: 15 }, __self: this }, "Username (for registration)"), /*#__PURE__*/ React.createElement("input", { type: "text", value: username, onChange: (e)=>setUsername(e.target.value), className: "w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent", placeholder: "Choose a username", __source: { fileName: "", lineNumber: 346, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { id: "walletStatus", dangerouslySetInnerHTML: { __html: walletStatus }, __source: { fileName: "", lineNumber: 356, columnNumber: 13 }, __self: this }), error && /*#__PURE__*/ React.createElement("div", { className: "bg-red-50 border border-red-200 rounded-lg p-3", __source: { fileName: "", lineNumber: 362, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-red-600 text-sm", __source: { fileName: "", lineNumber: 363, columnNumber: 17 }, __self: this }, error)), /*#__PURE__*/ React.createElement("div", { className: "flex space-x-3", __source: { fileName: "", lineNumber: 367, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: handleLogin, disabled: loading, className: "flex-1 bg-blue-600 text-white py-3 px-4 rounded-lg hover:bg-blue-700 disabled:opacity-50 font-medium", __source: { fileName: "", lineNumber: 368, columnNumber: 15 }, __self: this }, loading ? "Loading..." : "Login"), /*#__PURE__*/ React.createElement("button", { onClick: verifyWallet, disabled: loading || !username.trim(), className: "flex-1 bg-green-600 text-white py-3 px-4 rounded-lg hover:bg-green-700 disabled:opacity-50 font-medium", __source: { fileName: "", lineNumber: 375, columnNumber: 15 }, __self: this }, loading ? "Loading..." : "Register")))), showPaymentPopup && /*#__PURE__*/ React.createElement("div", { id: "paymentPopup", className: "fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50", __source: { fileName: "", lineNumber: 388, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-2xl p-6 w-full max-w-sm", __source: { fileName: "", lineNumber: 392, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-xl font-bold text-gray-800 mb-4", __source: { fileName: "", lineNumber: 393, columnNumber: 15 }, __self: this }, "Confirm Registration"), /*#__PURE__*/ React.createElement("p", { className: "text-gray-600 mb-6", __source: { fileName: "", lineNumber: 396, columnNumber: 15 }, __self: this }, "Registration fee: 10 tokens will be deducted from your wallet."), /*#__PURE__*/ React.createElement("div", { className: "flex space-x-3", __source: { fileName: "", lineNumber: 399, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setShowPaymentPopup(false), className: "flex-1 bg-gray-300 text-gray-700 py-2 px-4 rounded-lg hover:bg-gray-400", __source: { fileName: "", lineNumber: 400, columnNumber: 17 }, __self: this }, "Cancel"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>deductPayment(walletAddress), disabled: loading, className: "flex-1 bg-green-600 text-white py-2 px-4 rounded-lg hover:bg-green-700 disabled:opacity-50", __source: { fileName: "", lineNumber: 406, columnNumber: 17 }, __self: this }, loading ? "Processing..." : "Confirm"))))); } // Main App View return /*#__PURE__*/ React.createElement("div", { id: "home", className: "min-h-screen bg-gray-50", __source: { fileName: "", lineNumber: 423, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "bg-white shadow-sm border-b", __source: { fileName: "", lineNumber: 425, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-6xl mx-auto px-4 py-4", __source: { fileName: "", lineNumber: 426, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between", __source: { fileName: "", lineNumber: 427, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold text-gray-800", __source: { fileName: "", lineNumber: 428, columnNumber: 13 }, __self: this }, "Social Connect"), /*#__PURE__*/ React.createElement("div", { className: "flex items-center space-x-4", __source: { fileName: "", lineNumber: 429, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-sm text-gray-600", __source: { fileName: "", lineNumber: 430, columnNumber: 15 }, __self: this }, "Welcome, ", currentUser?.display_name || currentUser?.username), /*#__PURE__*/ React.createElement("button", { onClick: ()=>{ setCurrentUser(null); setCurrentView("login"); setWalletAddress(""); setUsername(""); setWalletStatus(""); setError(""); }, className: "bg-red-500 text-white px-4 py-2 rounded-lg hover:bg-red-600 text-sm", __source: { fileName: "", lineNumber: 433, columnNumber: 15 }, __self: this }, "Logout"))))), /*#__PURE__*/ React.createElement("div", { className: "max-w-6xl mx-auto px-4 py-6", __source: { fileName: "", lineNumber: 451, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex space-x-1 mb-6 bg-white rounded-lg p-1 shadow-sm", __source: { fileName: "", lineNumber: 453, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setCurrentView("feed"), className: `flex-1 py-2 px-4 rounded-md text-sm font-medium transition-colors ${currentView === "feed" ? "bg-blue-500 text-white" : "text-gray-600 hover:text-gray-800"}`, __source: { fileName: "", lineNumber: 454, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-home mr-2", __source: { fileName: "", lineNumber: 462, columnNumber: 13 }, __self: this }), "Feed"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setCurrentView("groups"), className: `flex-1 py-2 px-4 rounded-md text-sm font-medium transition-colors ${currentView === "groups" ? "bg-blue-500 text-white" : "text-gray-600 hover:text-gray-800"}`, __source: { fileName: "", lineNumber: 464, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-users mr-2", __source: { fileName: "", lineNumber: 472, columnNumber: 13 }, __self: this }), "Groups"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setCurrentView("chats"), className: `flex-1 py-2 px-4 rounded-md text-sm font-medium transition-colors ${currentView === "chats" ? "bg-blue-500 text-white" : "text-gray-600 hover:text-gray-800"}`, __source: { fileName: "", lineNumber: 474, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-comments mr-2", __source: { fileName: "", lineNumber: 482, columnNumber: 13 }, __self: this }), "Chats")), currentView === "feed" && /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 lg:grid-cols-4 gap-6", __source: { fileName: "", lineNumber: 488, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "lg:col-span-1", __source: { fileName: "", lineNumber: 490, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg shadow-sm p-4 mb-4", __source: { fileName: "", lineNumber: 491, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-semibold text-gray-800 mb-3", __source: { fileName: "", lineNumber: 492, columnNumber: 17 }, __self: this }, "Groups"), /*#__PURE__*/ React.createElement("div", { className: "space-y-2", __source: { fileName: "", lineNumber: 493, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setSelectedGroup(null), className: `w-full text-left px-3 py-2 rounded-md text-sm ${!selectedGroup ? "bg-blue-50 text-blue-600" : "hover:bg-gray-50"}`, __source: { fileName: "", lineNumber: 494, columnNumber: 19 }, __self: this }, "All Posts"), groups.map((group)=>/*#__PURE__*/ React.createElement("button", { key: group.id, onClick: ()=>setSelectedGroup(group), className: `w-full text-left px-3 py-2 rounded-md text-sm ${selectedGroup?.id === group.id ? "bg-blue-50 text-blue-600" : "hover:bg-gray-50"}`, __source: { fileName: "", lineNumber: 505, columnNumber: 21 }, __self: this }, group.name))))), /*#__PURE__*/ React.createElement("div", { className: "lg:col-span-3", __source: { fileName: "", lineNumber: 522, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg shadow-sm p-4 mb-6", __source: { fileName: "", lineNumber: 524, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-start space-x-3", __source: { fileName: "", lineNumber: 525, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-10 h-10 bg-blue-500 rounded-full flex items-center justify-center", __source: { fileName: "", lineNumber: 526, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-white font-medium", __source: { fileName: "", lineNumber: 527, columnNumber: 21 }, __self: this }, currentUser?.username?.charAt(0).toUpperCase())), /*#__PURE__*/ React.createElement("div", { className: "flex-1", __source: { fileName: "", lineNumber: 531, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("textarea", { value: newPostContent, onChange: (e)=>setNewPostContent(e.target.value), placeholder: `What's on your mind${selectedGroup ? ` in ${selectedGroup.name}` : ""}?`, className: "w-full p-3 border border-gray-200 rounded-lg resize-none focus:ring-2 focus:ring-blue-500 focus:border-transparent", rows: "3", __source: { fileName: "", lineNumber: 532, columnNumber: 21 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center mt-3", __source: { fileName: "", lineNumber: 539, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-sm text-gray-500", __source: { fileName: "", lineNumber: 540, columnNumber: 23 }, __self: this }, selectedGroup ? `Posting to ${selectedGroup.name}` : "Posting to public feed"), /*#__PURE__*/ React.createElement("button", { onClick: createPost, disabled: !newPostContent.trim(), className: "bg-blue-500 text-white px-4 py-2 rounded-lg hover:bg-blue-600 disabled:opacity-50 disabled:cursor-not-allowed", __source: { fileName: "", lineNumber: 545, columnNumber: 23 }, __self: this }, "Post"))))), /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 558, columnNumber: 15 }, __self: this }, posts.map((post)=>/*#__PURE__*/ React.createElement("div", { key: post.id, className: "bg-white rounded-lg shadow-sm p-4", __source: { fileName: "", lineNumber: 560, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-start space-x-3", __source: { fileName: "", lineNumber: 564, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-10 h-10 bg-gray-300 rounded-full flex items-center justify-center", __source: { fileName: "", lineNumber: 565, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-gray-600 font-medium", __source: { fileName: "", lineNumber: 566, columnNumber: 25 }, __self: this }, post.username?.charAt(0).toUpperCase())), /*#__PURE__*/ React.createElement("div", { className: "flex-1", __source: { fileName: "", lineNumber: 570, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center space-x-2 mb-2", __source: { fileName: "", lineNumber: 571, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-medium text-gray-800", __source: { fileName: "", lineNumber: 572, columnNumber: 27 }, __self: this }, post.display_name || post.username), post.group_name && /*#__PURE__*/ React.createElement("span", { className: "text-sm text-gray-500", __source: { fileName: "", lineNumber: 576, columnNumber: 29 }, __self: this }, "in ", post.group_name), /*#__PURE__*/ React.createElement("span", { className: "text-sm text-gray-400", __source: { fileName: "", lineNumber: 580, columnNumber: 27 }, __self: this }, formatDate(post.created_at))), /*#__PURE__*/ React.createElement("p", { className: "text-gray-700 mb-3", __source: { fileName: "", lineNumber: 584, columnNumber: 25 }, __self: this }, post.content), /*#__PURE__*/ React.createElement("div", { className: "flex items-center space-x-4 text-sm text-gray-500", __source: { fileName: "", lineNumber: 585, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 586, columnNumber: 27 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-heart mr-1", __source: { fileName: "", lineNumber: 587, columnNumber: 29 }, __self: this }), post.like_count, " likes"), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 590, columnNumber: 27 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-comment mr-1", __source: { fileName: "", lineNumber: 591, columnNumber: 29 }, __self: this }), post.comment_count, " comments"))))))))), currentView === "groups" && /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 606, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center mb-6", __source: { fileName: "", lineNumber: 607, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold text-gray-800", __source: { fileName: "", lineNumber: 608, columnNumber: 15 }, __self: this }, "Groups"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setShowCreateGroup(true), className: "bg-blue-500 text-white px-4 py-2 rounded-lg hover:bg-blue-600", __source: { fileName: "", lineNumber: 609, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-plus mr-2", __source: { fileName: "", lineNumber: 613, columnNumber: 17 }, __self: this }), "Create Group")), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4", __source: { fileName: "", lineNumber: 617, columnNumber: 13 }, __self: this }, groups.map((group)=>/*#__PURE__*/ React.createElement("div", { key: group.id, className: "bg-white rounded-lg shadow-sm p-4", __source: { fileName: "", lineNumber: 619, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-semibold text-gray-800 mb-2", __source: { fileName: "", lineNumber: 623, columnNumber: 19 }, __self: this }, group.name), /*#__PURE__*/ React.createElement("p", { className: "text-gray-600 text-sm mb-3", __source: { fileName: "", lineNumber: 626, columnNumber: 19 }, __self: this }, group.description), /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between text-sm text-gray-500", __source: { fileName: "", lineNumber: 629, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 630, columnNumber: 21 }, __self: this }, group.member_count, " members"), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 631, columnNumber: 21 }, __self: this }, "by ", group.creator_display_name || group.creator_username))))), showCreateGroup && /*#__PURE__*/ React.createElement("div", { className: "fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50", __source: { fileName: "", lineNumber: 641, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-2xl p-6 w-full max-w-md", __source: { fileName: "", lineNumber: 642, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-xl font-bold text-gray-800 mb-4", __source: { fileName: "", lineNumber: 643, columnNumber: 19 }, __self: this }, "Create New Group"), /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 646, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 647, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-gray-700 mb-2", __source: { fileName: "", lineNumber: 648, columnNumber: 23 }, __self: this }, "Group Name"), /*#__PURE__*/ React.createElement("input", { type: "text", value: newGroupName, onChange: (e)=>setNewGroupName(e.target.value), className: "w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent", placeholder: "Enter group name", __source: { fileName: "", lineNumber: 651, columnNumber: 23 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 659, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-gray-700 mb-2", __source: { fileName: "", lineNumber: 660, columnNumber: 23 }, __self: this }, "Description"), /*#__PURE__*/ React.createElement("textarea", { value: newGroupDescription, onChange: (e)=>setNewGroupDescription(e.target.value), className: "w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent", rows: "3", placeholder: "Describe your group", __source: { fileName: "", lineNumber: 663, columnNumber: 23 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "flex space-x-3 mt-6", __source: { fileName: "", lineNumber: 672, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setShowCreateGroup(false), className: "flex-1 bg-gray-300 text-gray-700 py-2 px-4 rounded-lg hover:bg-gray-400", __source: { fileName: "", lineNumber: 673, columnNumber: 21 }, __self: this }, "Cancel"), /*#__PURE__*/ React.createElement("button", { onClick: createGroup, disabled: !newGroupName.trim(), className: "flex-1 bg-blue-600 text-white py-2 px-4 rounded-lg hover:bg-blue-700 disabled:opacity-50", __source: { fileName: "", lineNumber: 679, columnNumber: 21 }, __self: this }, "Create"))))), currentView === "chats" && /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 lg:grid-cols-3 gap-6 h-[600px]", __source: { fileName: "", lineNumber: 695, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg shadow-sm", __source: { fileName: "", lineNumber: 697, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "p-4 border-b", __source: { fileName: "", lineNumber: 698, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-semibold text-gray-800", __source: { fileName: "", lineNumber: 699, columnNumber: 17 }, __self: this }, "Messages")), /*#__PURE__*/ React.createElement("div", { className: "overflow-y-auto h-[520px]", __source: { fileName: "", lineNumber: 701, columnNumber: 15 }, __self: this }, chats.map((chat)=>/*#__PURE__*/ React.createElement("button", { key: chat.id, onClick: ()=>{ setSelectedChat(chat); loadMessages(chat.id); }, className: `w-full p-4 text-left hover:bg-gray-50 border-b ${selectedChat?.id === chat.id ? "bg-blue-50" : ""}`, __source: { fileName: "", lineNumber: 703, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center space-x-3", __source: { fileName: "", lineNumber: 713, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-10 h-10 bg-gray-300 rounded-full flex items-center justify-center", __source: { fileName: "", lineNumber: 714, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-gray-600 font-medium", __source: { fileName: "", lineNumber: 715, columnNumber: 25 }, __self: this }, chat.other_username?.charAt(0).toUpperCase())), /*#__PURE__*/ React.createElement("div", { className: "flex-1 min-w-0", __source: { fileName: "", lineNumber: 719, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-medium text-gray-800 truncate", __source: { fileName: "", lineNumber: 720, columnNumber: 25 }, __self: this }, chat.other_display_name || chat.other_username), chat.last_message_content && /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-500 truncate", __source: { fileName: "", lineNumber: 724, columnNumber: 27 }, __self: this }, chat.last_message_content))))))), /*#__PURE__*/ React.createElement("div", { className: "lg:col-span-2 bg-white rounded-lg shadow-sm flex flex-col", __source: { fileName: "", lineNumber: 736, columnNumber: 13 }, __self: this }, selectedChat ? /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("div", { className: "p-4 border-b", __source: { fileName: "", lineNumber: 739, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-semibold text-gray-800", __source: { fileName: "", lineNumber: 740, columnNumber: 21 }, __self: this }, selectedChat.other_display_name || selectedChat.other_username)), /*#__PURE__*/ React.createElement("div", { className: "flex-1 overflow-y-auto p-4 space-y-3", __source: { fileName: "", lineNumber: 745, columnNumber: 19 }, __self: this }, messages.map((message)=>/*#__PURE__*/ React.createElement("div", { key: message.id, className: `flex ${message.sender_id === currentUser.id ? "justify-end" : "justify-start"}`, __source: { fileName: "", lineNumber: 747, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `max-w-xs lg:max-w-md px-4 py-2 rounded-lg ${message.sender_id === currentUser.id ? "bg-blue-500 text-white" : "bg-gray-200 text-gray-800"}`, __source: { fileName: "", lineNumber: 755, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 762, columnNumber: 27 }, __self: this }, message.content), /*#__PURE__*/ React.createElement("p", { className: `text-xs mt-1 ${message.sender_id === currentUser.id ? "text-blue-100" : "text-gray-500"}`, __source: { fileName: "", lineNumber: 763, columnNumber: 27 }, __self: this }, formatDate(message.created_at)))))), /*#__PURE__*/ React.createElement("div", { className: "p-4 border-t", __source: { fileName: "", lineNumber: 776, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex space-x-2", __source: { fileName: "", lineNumber: 777, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", value: newMessage, onChange: (e)=>setNewMessage(e.target.value), onKeyPress: (e)=>e.key === "Enter" && sendMessage(), className: "flex-1 px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent", placeholder: "Type a message...", __source: { fileName: "", lineNumber: 778, columnNumber: 23 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: sendMessage, disabled: !newMessage.trim(), className: "bg-blue-500 text-white px-4 py-2 rounded-lg hover:bg-blue-600 disabled:opacity-50", __source: { fileName: "", lineNumber: 786, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-paper-plane", __source: { fileName: "", lineNumber: 791, columnNumber: 25 }, __self: this }))))) : /*#__PURE__*/ React.createElement("div", { className: "flex-1 flex items-center justify-center text-gray-500", __source: { fileName: "", lineNumber: 797, columnNumber: 17 }, __self: this }, "Select a chat to start messaging"))))); }