function MainComponent() { const { data: user } = useUser(); const [messages, setMessages] = useState([]); const [newMessage, setNewMessage] = useState(""); const [isLoading, setIsLoading] = useState(true); const [isSubmitting, setIsSubmitting] = useState(false); const [error, setError] = useState(null); const [loadingError, setLoadingError] = useState(null); const [validationError, setValidationError] = useState(""); const [replyingTo, setReplyingTo] = useState(null); const [replyContent, setReplyContent] = useState(""); const [likes, setLikes] = useState({}); const [replies, setReplies] = useState({}); const [isSubmittingReply, setIsSubmittingReply] = useState(false); const [isSubmittingLike, setIsSubmittingLike] = useState(false); const [lastUpdate, setLastUpdate] = useState(Date.now()); const [editingMessageId, setEditingMessageId] = useState(null); const [editingReplyId, setEditingReplyId] = useState(null); const [editContent, setEditContent] = useState(""); const [isSubmittingEdit, setIsSubmittingEdit] = useState(false); const formatUsername = (username)=>{ const preservedUsernames = [ "Jay", "JayceePee", "admin", "jake", "Sarah", "Micheal", "David" ]; if (!username) return "member"; const normalizedUsername = username.trim(); if (normalizedUsername.startsWith("A")) return "member"; return preservedUsernames.includes(normalizedUsername) ? normalizedUsername : normalizedUsername[0].toUpperCase(); }; const loadMessages = useCallback(async ()=>{ try { const response = await fetch("/api/db/messages-31", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ query: ` SELECT m.*, COALESCE(l.like_count, 0) as like_count, COALESCE(r.reply_count, 0) as reply_count FROM messages m LEFT JOIN ( SELECT message_id, COUNT(*) as like_count FROM likes GROUP BY message_id ) l ON m.id = l.message_id LEFT JOIN ( SELECT parent_id, COUNT(*) as reply_count FROM replies GROUP BY parent_id ) r ON m.id = r.parent_id ORDER BY m.timestamp DESC ` }) }); if (!response.ok) { throw new Error(`Error fetching messages: ${response.status}`); } const messages = await response.json(); const messageIds = messages.map((m)=>m.id); const repliesResponse = await fetch("/api/db/messages-31", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ query: ` SELECT r.* FROM replies r WHERE r.parent_id IN (${messageIds.map(()=>"?").join(",")}) ORDER BY r.parent_id, r.timestamp DESC `, values: messageIds }) }); if (!repliesResponse.ok) { throw new Error(`Error fetching replies: ${repliesResponse.status}`); } const allReplies = await repliesResponse.json(); const repliesByParent = {}; allReplies.forEach((reply)=>{ if (!repliesByParent[reply.parent_id]) { repliesByParent[reply.parent_id] = []; } repliesByParent[reply.parent_id].push(reply); }); const messagesWithReplies = messages.map((msg)=>({ ...msg, replies: repliesByParent[msg.id] || [], like_count: parseInt(msg.like_count) || 0, reply_count: parseInt(msg.reply_count) || 0 })); setMessages(messagesWithReplies); setIsLoading(false); setLoadingError(null); } catch (error) { console.error("Error loading messages:", error); setLoadingError("Failed to load messages. Please try again."); setIsLoading(false); } }, []); const handleLike = async (messageId)=>{ if (!user) { window.location.href = "/account/signin?callbackUrl=/forum"; return; } setIsSubmittingLike(true); try { const checkResponse = await fetch("/api/db/messages-31", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ query: "SELECT id FROM likes WHERE message_id = ? AND user_id = ?", values: [ messageId, user.id ] }) }); if (!checkResponse.ok) { throw new Error("Failed to check like status"); } const existingLikes = await checkResponse.json(); if (existingLikes.length > 0) { const unlikeResponse = await fetch("/api/db/messages-31", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ query: "DELETE FROM likes WHERE message_id = ? AND user_id = ?", values: [ messageId, user.id ] }) }); if (!unlikeResponse.ok) { throw new Error("Failed to unlike message"); } } else { const likeResponse = await fetch("/api/db/messages-31", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ query: "INSERT INTO likes (message_id, user_id, timestamp) VALUES (?, ?, CURRENT_TIMESTAMP)", values: [ messageId, user.id ] }) }); if (!likeResponse.ok) { throw new Error("Failed to like message"); } } await loadMessages(); } catch (error) { console.error("Error toggling like:", error); setError("Failed to update like. Please try again."); } finally{ setIsSubmittingLike(false); } }; const handleSubmit = async (e)=>{ e.preventDefault(); if (!user) { window.location.href = "/account/signin?callbackUrl=/forum"; return; } if (!newMessage.trim()) { setValidationError("Message cannot be empty"); return; } if (newMessage.length > 1000) { setValidationError("Message too long (maximum 1000 characters)"); return; } setIsSubmitting(true); setError(null); setValidationError(""); try { const response = await fetch("/api/db/messages-31", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ query: "INSERT INTO messages (content, user_id, username, timestamp) VALUES (?, ?, ?, CURRENT_TIMESTAMP)", values: [ newMessage.trim(), user.id, user.name || user.email.split("@")[0] ] }) }); if (!response.ok) { throw new Error("Failed to post message"); } await loadMessages(); setNewMessage(""); setError(null); } catch (error) { console.error("Error posting message:", error); setError("Failed to post message. Please try again."); } finally{ setIsSubmitting(false); } }; const handleReply = async (e)=>{ e.preventDefault(); if (!user) { window.location.href = "/account/signin?callbackUrl=/forum"; return; } if (!replyingTo || !replyContent.trim()) return; setIsSubmittingReply(true); try { const response = await fetch("/api/db/messages-31", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ query: "INSERT INTO replies (content, parent_id, user_id, username, timestamp) VALUES (?, ?, ?, ?, CURRENT_TIMESTAMP)", values: [ replyContent.trim(), replyingTo, user.id, user.name || user.email.split("@")[0] ] }) }); if (!response.ok) { throw new Error("Failed to post reply"); } await loadMessages(); setReplyContent(""); setReplyingTo(null); } catch (error) { console.error("Error posting reply:", error); setError("Failed to post reply. Please try again."); } finally{ setIsSubmittingReply(false); } }; const handleEditMessage = async (e)=>{ e.preventDefault(); if (!user || !editingMessageId || !editContent.trim()) return; setIsSubmittingEdit(true); try { const response = await fetch("/api/db/messages-31", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ query: ` UPDATE messages SET content = ?, updated_at = CURRENT_TIMESTAMP WHERE id = ? AND user_id = ? `, values: [ editContent.trim(), editingMessageId, user.id ] }) }); if (!response.ok) { throw new Error("Failed to update message"); } await loadMessages(); setEditingMessageId(null); setEditContent(""); } catch (error) { console.error("Error updating message:", error); setError("Failed to update message. Please try again."); } finally{ setIsSubmittingEdit(false); } }; const handleEditReply = async (e)=>{ e.preventDefault(); if (!user || !editingReplyId || !editContent.trim()) return; setIsSubmittingEdit(true); try { const response = await fetch("/api/db/messages-31", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ query: ` UPDATE replies SET content = ?, updated_at = CURRENT_TIMESTAMP WHERE id = ? AND user_id = ? `, values: [ editContent.trim(), editingReplyId, user.id ] }) }); if (!response.ok) { throw new Error("Failed to update reply"); } await loadMessages(); setEditingReplyId(null); setEditContent(""); } catch (error) { console.error("Error updating reply:", error); setError("Failed to update reply. Please try again."); } finally{ setIsSubmittingEdit(false); } }; const startEditing = (content, id, isReply = false)=>{ setEditContent(content); if (isReply) { setEditingReplyId(id); setEditingMessageId(null); } else { setEditingMessageId(id); setEditingReplyId(null); } }; const linkifyText = (text)=>{ const urlRegex = /(https?:\/\/[^\s]+)/g; return text.split(urlRegex).map((part, i)=>{ if (part.match(urlRegex)) { return /*#__PURE__*/ React.createElement("a", { key: i, href: part, target: "_blank", rel: "noopener noreferrer", className: "text-[#9c27b0] hover:text-[#7b1fa2] underline", __source: { fileName: "", lineNumber: 362, columnNumber: 11 }, __self: this }, part); } return part; }); }; const handleRequestInvite = ()=>{ const subject = encodeURIComponent("Request for Live Podcast Invitation"); const body = encodeURIComponent("Hi Ms. Jay,\n\n" + "I would love to be invited to join the live podcast show and I agree to abide by admin rules, " + "to stay muted and save all questions till the end, login at least 5 mins before recording " + "and keep all discussions courteous and topic relevant.\n\n" + "Sincerely,"); window.location.href = `mailto:admin@fivestarsappsolutions.com?subject=${subject}&body=${body}`; }; useEffect(()=>{ loadMessages(); const interval = setInterval(loadMessages, 30000); return ()=>clearInterval(interval); }, [ loadMessages ]); return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("link", { rel: "icon", href: "https://ucarecdn.com/dd4bb944-5cee-45e0-934a-54cda61de1d1/-/format/auto/", __source: { fileName: "", lineNumber: 397, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gradient-to-b from-[#f3e5f5] to-[#f5f5f5]", __source: { fileName: "", lineNumber: 401, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-gradient-to-r from-[#9c27b0] to-[#7b1fa2] text-white p-6 shadow-lg mb-6", __source: { fileName: "", lineNumber: 402, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-4xl mx-auto", __source: { fileName: "", lineNumber: 403, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col md:flex-row justify-between items-center gap-4 mb-6", __source: { fileName: "", lineNumber: 404, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center space-x-6", __source: { fileName: "", lineNumber: 405, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/home", className: "hover:text-[#e1bee7] transition-colors text-lg font-medium hover:scale-105 transform duration-200", __source: { fileName: "", lineNumber: 406, columnNumber: 17 }, __self: this }, "Home"), /*#__PURE__*/ React.createElement("a", { href: "/forum", className: "text-[#e1bee7] border-b-2 border-[#e1bee7] text-lg font-medium hover:scale-105 transform duration-200", __source: { fileName: "", lineNumber: 412, columnNumber: 17 }, __self: this }, "Forum"), /*#__PURE__*/ React.createElement("a", { href: "/chat", className: "hover:text-[#e1bee7] transition-colors text-lg font-medium hover:scale-105 transform duration-200", __source: { fileName: "", lineNumber: 418, columnNumber: 17 }, __self: this }, "Chat")), /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-4", __source: { fileName: "", lineNumber: 425, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: handleRequestInvite, className: "bg-white text-[#9c27b0] px-6 py-2 rounded-full font-medium hover:bg-[#e1bee7] transition-all duration-200 hover:scale-105 transform shadow-md", __source: { fileName: "", lineNumber: 426, columnNumber: 17 }, __self: this }, "Request Invite"), user ? /*#__PURE__*/ React.createElement("a", { href: "/account/logout", className: "hover:text-[#e1bee7] transition-colors font-medium", __source: { fileName: "", lineNumber: 433, columnNumber: 19 }, __self: this }, "Sign Out") : /*#__PURE__*/ React.createElement("a", { href: "/account/signin", className: "bg-[#7b1fa2] px-6 py-2 rounded-full font-medium hover:bg-[#6a1b9a] transition-all duration-200 hover:scale-105 transform shadow-md", __source: { fileName: "", lineNumber: 440, columnNumber: 19 }, __self: this }, "Sign In"))), /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap gap-4 text-sm bg-[#7b1fa2] bg-opacity-40 p-4 rounded-xl", __source: { fileName: "", lineNumber: 450, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "https://goddessrantsliveshow.created.app", className: "hover:text-[#e1bee7] transition-colors hover:scale-105 transform duration-200", __source: { fileName: "", lineNumber: 451, columnNumber: 15 }, __self: this }, "Live Session"), /*#__PURE__*/ React.createElement("a", { href: "https://fivestarbibledreams.created.app", className: "hover:text-[#e1bee7] transition-colors hover:scale-105 transform duration-200", __source: { fileName: "", lineNumber: 457, columnNumber: 15 }, __self: this }, "Dreams"), /*#__PURE__*/ React.createElement("a", { href: "https://imagereference.created.app", className: "hover:text-[#e1bee7] transition-colors hover:scale-105 transform duration-200", __source: { fileName: "", lineNumber: 463, columnNumber: 15 }, __self: this }, "Adam to Jesus"), /*#__PURE__*/ React.createElement("a", { href: "https://www.biblegateway.com/resources/audio", className: "hover:text-[#e1bee7] transition-colors hover:scale-105 transform duration-200", __source: { fileName: "", lineNumber: 469, columnNumber: 15 }, __self: this }, "Audio Bible"), /*#__PURE__*/ React.createElement("a", { href: "https://youtube.com/playlist?list=PLKxeTm073DCr5dyhx92UdIVoCW5KCqn7t&si=hzTByF-z1KA8G3-V", className: "hover:text-[#e1bee7] transition-colors hover:scale-105 transform duration-200", __source: { fileName: "", lineNumber: 475, columnNumber: 15 }, __self: this }, "Easter 🥚 Drops"), /*#__PURE__*/ React.createElement("a", { href: "https://fallinginlovewithyou.created.app", className: "hover:text-[#e1bee7] transition-colors hover:scale-105 transform duration-200", __source: { fileName: "", lineNumber: 481, columnNumber: 15 }, __self: this }, "Val Song")))), /*#__PURE__*/ React.createElement("div", { className: "p-4 md:p-6", __source: { fileName: "", lineNumber: 491, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-4xl mx-auto", __source: { fileName: "", lineNumber: 492, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-2xl shadow-xl p-6 mb-8 transform transition-all duration-200 hover:shadow-2xl", __source: { fileName: "", lineNumber: 493, columnNumber: 13 }, __self: this }, user ? /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 495, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("textarea", { value: newMessage, onChange: (e)=>setNewMessage(e.target.value), placeholder: "Share your thoughts...", className: "w-full p-4 border border-[#e1bee7] rounded-xl resize-none focus:outline-none focus:ring-2 focus:ring-[#9c27b0] focus:border-transparent transition-all duration-200", rows: "3", __source: { fileName: "", lineNumber: 496, columnNumber: 19 }, __self: this }), validationError && /*#__PURE__*/ React.createElement("p", { className: "text-red-500 text-sm mt-2 flex items-center", __source: { fileName: "", lineNumber: 504, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-exclamation-circle mr-2", __source: { fileName: "", lineNumber: 505, columnNumber: 23 }, __self: this }), validationError), /*#__PURE__*/ React.createElement("div", { className: "mt-4 flex justify-end", __source: { fileName: "", lineNumber: 509, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("button", { type: "submit", disabled: isSubmitting, className: "bg-[#9c27b0] text-white px-8 py-3 rounded-full font-medium hover:bg-[#7b1fa2] transition-all duration-200 hover:scale-105 transform shadow-md disabled:opacity-50 disabled:hover:scale-100", __source: { fileName: "", lineNumber: 510, columnNumber: 21 }, __self: this }, isSubmitting ? /*#__PURE__*/ React.createElement("span", { className: "flex items-center", __source: { fileName: "", lineNumber: 516, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-spinner fa-spin mr-2", __source: { fileName: "", lineNumber: 517, columnNumber: 27 }, __self: this }), "Posting...") : "Post Message"))) : /*#__PURE__*/ React.createElement("div", { className: "text-center py-6", __source: { fileName: "", lineNumber: 527, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-gray-600 mb-4", __source: { fileName: "", lineNumber: 528, columnNumber: 19 }, __self: this }, "Sign in to join the discussion!"), /*#__PURE__*/ React.createElement("a", { href: "/account/signin?callbackUrl=/forum", className: "bg-[#9c27b0] text-white px-8 py-3 rounded-full font-medium hover:bg-[#7b1fa2] transition-all duration-200 hover:scale-105 transform shadow-md inline-block", __source: { fileName: "", lineNumber: 531, columnNumber: 19 }, __self: this }, "Sign In to Post"))), isLoading ? /*#__PURE__*/ React.createElement("div", { className: "text-center py-12", __source: { fileName: "", lineNumber: 542, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-spinner fa-spin text-[#9c27b0] text-3xl", __source: { fileName: "", lineNumber: 543, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("p", { className: "mt-4 text-gray-600", __source: { fileName: "", lineNumber: 544, columnNumber: 17 }, __self: this }, "Loading messages...")) : loadingError ? /*#__PURE__*/ React.createElement("div", { className: "text-center py-12 text-red-500", __source: { fileName: "", lineNumber: 547, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-exclamation-circle text-3xl mb-4", __source: { fileName: "", lineNumber: 548, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 549, columnNumber: 17 }, __self: this }, loadingError)) : /*#__PURE__*/ React.createElement("div", { className: "space-y-6", __source: { fileName: "", lineNumber: 552, columnNumber: 15 }, __self: this }, messages.map((message)=>/*#__PURE__*/ React.createElement("div", { key: message.id, className: "bg-white rounded-2xl shadow-lg p-6 transform transition-all duration-200 hover:shadow-xl", __source: { fileName: "", lineNumber: 554, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-start mb-4", __source: { fileName: "", lineNumber: 558, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 559, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-semibold text-lg flex items-center gap-2", __source: { fileName: "", lineNumber: 560, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 561, columnNumber: 27 }, __self: this }, formatUsername(message.username)), message.updated_at && /*#__PURE__*/ React.createElement("span", { className: "text-gray-500 text-xs", __source: { fileName: "", lineNumber: 563, columnNumber: 29 }, __self: this }, "(edited)")), /*#__PURE__*/ React.createElement("p", { className: "text-gray-500 text-sm", __source: { fileName: "", lineNumber: 568, columnNumber: 25 }, __self: this }, new Date(message.timestamp).toLocaleString())), user && user.id === message.user_id && /*#__PURE__*/ React.createElement("button", { onClick: ()=>startEditing(message.content, message.id), className: "text-gray-500 hover:text-[#9c27b0] transition-colors p-2 rounded-full hover:bg-[#f3e5f5]", __source: { fileName: "", lineNumber: 573, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-edit", __source: { fileName: "", lineNumber: 579, columnNumber: 27 }, __self: this }))), editingMessageId === message.id ? /*#__PURE__*/ React.createElement("form", { onSubmit: handleEditMessage, className: "mb-4", __source: { fileName: "", lineNumber: 585, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("textarea", { value: editContent, onChange: (e)=>setEditContent(e.target.value), className: "w-full p-4 border border-[#e1bee7] rounded-xl resize-none focus:outline-none focus:ring-2 focus:ring-[#9c27b0] focus:border-transparent transition-all duration-200", rows: "3", __source: { fileName: "", lineNumber: 586, columnNumber: 25 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "mt-2 flex justify-end gap-2", __source: { fileName: "", lineNumber: 592, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("button", { type: "button", onClick: ()=>{ setEditingMessageId(null); setEditContent(""); }, className: "px-6 py-2 text-gray-600 hover:text-gray-800 rounded-full hover:bg-gray-100 transition-all duration-200", __source: { fileName: "", lineNumber: 593, columnNumber: 27 }, __self: this }, "Cancel"), /*#__PURE__*/ React.createElement("button", { type: "submit", disabled: isSubmittingEdit, className: "bg-[#9c27b0] text-white px-6 py-2 rounded-full font-medium hover:bg-[#7b1fa2] transition-all duration-200 disabled:opacity-50", __source: { fileName: "", lineNumber: 603, columnNumber: 27 }, __self: this }, isSubmittingEdit ? /*#__PURE__*/ React.createElement("span", { className: "flex items-center", __source: { fileName: "", lineNumber: 609, columnNumber: 31 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-spinner fa-spin mr-2", __source: { fileName: "", lineNumber: 610, columnNumber: 33 }, __self: this }), "Saving...") : "Save Changes"))) : /*#__PURE__*/ React.createElement("p", { className: "mb-4 text-gray-800 leading-relaxed", __source: { fileName: "", lineNumber: 620, columnNumber: 23 }, __self: this }, linkifyText(message.content)), /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-4 border-t border-gray-100 pt-4", __source: { fileName: "", lineNumber: 625, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleLike(message.id), disabled: isSubmittingLike || !user, className: `flex items-center gap-2 ${user ? "text-gray-600 hover:text-[#9c27b0]" : "text-gray-400"} transition-colors group`, title: !user ? "Sign in to like posts" : "", __source: { fileName: "", lineNumber: 626, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-heart group-hover:scale-110 transform transition-transform duration-200", __source: { fileName: "", lineNumber: 636, columnNumber: 25 }, __self: this }), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 637, columnNumber: 25 }, __self: this }, message.like_count)), /*#__PURE__*/ React.createElement("button", { onClick: ()=>user ? setReplyingTo(message.id) : window.location.href = "/account/signin?callbackUrl=/forum", className: `flex items-center gap-2 ${user ? "text-gray-600 hover:text-[#9c27b0]" : "text-gray-400"} transition-colors group`, title: !user ? "Sign in to reply to posts" : "", __source: { fileName: "", lineNumber: 639, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-reply group-hover:scale-110 transform transition-transform duration-200", __source: { fileName: "", lineNumber: 653, columnNumber: 25 }, __self: this }), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 654, columnNumber: 25 }, __self: this }, message.reply_count))), message.replies && message.replies.length > 0 && /*#__PURE__*/ React.createElement("div", { className: "mt-4 space-y-3", __source: { fileName: "", lineNumber: 659, columnNumber: 23 }, __self: this }, message.replies.map((reply)=>/*#__PURE__*/ React.createElement("div", { key: reply.id, className: "ml-8 p-4 bg-[#faf5fb] rounded-xl border-l-4 border-[#e1bee7]", __source: { fileName: "", lineNumber: 661, columnNumber: 27 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-start mb-2", __source: { fileName: "", lineNumber: 665, columnNumber: 29 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 666, columnNumber: 31 }, __self: this }, /*#__PURE__*/ React.createElement("h4", { className: "font-medium text-sm flex items-center gap-2", __source: { fileName: "", lineNumber: 667, columnNumber: 33 }, __self: this }, formatUsername(reply.username), reply.updated_at && /*#__PURE__*/ React.createElement("span", { className: "text-gray-500 text-xs", __source: { fileName: "", lineNumber: 670, columnNumber: 37 }, __self: this }, "(edited)")), /*#__PURE__*/ React.createElement("p", { className: "text-gray-500 text-xs", __source: { fileName: "", lineNumber: 675, columnNumber: 33 }, __self: this }, new Date(reply.timestamp).toLocaleString())), user && user.id === reply.user_id && /*#__PURE__*/ React.createElement("button", { onClick: ()=>startEditing(reply.content, reply.id, true), className: "text-gray-500 hover:text-[#9c27b0] transition-colors p-1 rounded-full hover:bg-white", __source: { fileName: "", lineNumber: 680, columnNumber: 33 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-edit", __source: { fileName: "", lineNumber: 686, columnNumber: 35 }, __self: this }))), editingReplyId === reply.id ? /*#__PURE__*/ React.createElement("form", { onSubmit: handleEditReply, __source: { fileName: "", lineNumber: 692, columnNumber: 31 }, __self: this }, /*#__PURE__*/ React.createElement("textarea", { value: editContent, onChange: (e)=>setEditContent(e.target.value), className: "w-full p-3 border border-[#e1bee7] rounded-xl resize-none focus:outline-none focus:ring-2 focus:ring-[#9c27b0] focus:border-transparent transition-all duration-200 bg-white", rows: "2", __source: { fileName: "", lineNumber: 693, columnNumber: 33 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "mt-2 flex justify-end gap-2", __source: { fileName: "", lineNumber: 701, columnNumber: 33 }, __self: this }, /*#__PURE__*/ React.createElement("button", { type: "button", onClick: ()=>{ setEditingReplyId(null); setEditContent(""); }, className: "px-4 py-1 text-sm text-gray-600 hover:text-gray-800 rounded-full hover:bg-white transition-all duration-200", __source: { fileName: "", lineNumber: 702, columnNumber: 35 }, __self: this }, "Cancel"), /*#__PURE__*/ React.createElement("button", { type: "submit", disabled: isSubmittingEdit, className: "bg-[#9c27b0] text-white px-4 py-1 text-sm rounded-full font-medium hover:bg-[#7b1fa2] transition-all duration-200 disabled:opacity-50", __source: { fileName: "", lineNumber: 712, columnNumber: 35 }, __self: this }, isSubmittingEdit ? "Saving..." : "Save Changes"))) : /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-800", __source: { fileName: "", lineNumber: 724, columnNumber: 31 }, __self: this }, linkifyText(reply.content))))), replyingTo === message.id && /*#__PURE__*/ React.createElement("form", { onSubmit: handleReply, className: "mt-4 ml-8", __source: { fileName: "", lineNumber: 734, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("textarea", { value: replyContent, onChange: (e)=>setReplyContent(e.target.value), placeholder: "Write a reply...", className: "w-full p-4 border border-[#e1bee7] rounded-xl resize-none focus:outline-none focus:ring-2 focus:ring-[#9c27b0] focus:border-transparent transition-all duration-200", rows: "2", __source: { fileName: "", lineNumber: 735, columnNumber: 25 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "mt-2 flex justify-end gap-2", __source: { fileName: "", lineNumber: 742, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("button", { type: "button", onClick: ()=>{ setReplyingTo(null); setReplyContent(""); }, className: "px-6 py-2 text-gray-600 hover:text-gray-800 rounded-full hover:bg-gray-100 transition-all duration-200", __source: { fileName: "", lineNumber: 743, columnNumber: 27 }, __self: this }, "Cancel"), /*#__PURE__*/ React.createElement("button", { type: "submit", disabled: isSubmittingReply, className: "bg-[#9c27b0] text-white px-6 py-2 rounded-full font-medium hover:bg-[#7b1fa2] transition-all duration-200 disabled:opacity-50", __source: { fileName: "", lineNumber: 753, columnNumber: 27 }, __self: this }, isSubmittingReply ? /*#__PURE__*/ React.createElement("span", { className: "flex items-center", __source: { fileName: "", lineNumber: 759, columnNumber: 31 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-spinner fa-spin mr-2", __source: { fileName: "", lineNumber: 760, columnNumber: 33 }, __self: this }), "Posting...") : "Post Reply")))))))))); }