function MainComponent() { const [businesses, setBusinesses] = useState([]); const [lastUpdate, setLastUpdate] = useState(null); const [loading, setLoading] = useState(true); const [search, setSearch] = useState(""); const [sortColumn, setSortColumn] = useState("created_at"); const [sortDirection, setSortDirection] = useState("desc"); const [currentPage, setCurrentPage] = useState(0); const [selectedBusiness, setSelectedBusiness] = useState(null); const [chatOpen, setChatOpen] = useState(false); const [messages, setMessages] = useState([]); const [newMessage, setNewMessage] = useState(""); const [chatMinimized, setChatMinimized] = useState(false); const [upload, { loading: uploading }] = useUpload(); const [file, setFile] = useState(null); const messagesEndRef = useRef(null); useEffect(()=>{ fetchBusinesses(); const interval = setInterval(fetchBusinesses, 30000); return ()=>clearInterval(interval); }, []); useEffect(()=>{ if (messagesEndRef.current) { messagesEndRef.current.scrollIntoView({ behavior: "smooth" }); } }, [ messages ]); const fetchBusinesses = async ()=>{ setLoading(true); try { const response = await fetch("/api/db/business", { method: "POST", body: JSON.stringify({ query: "SELECT * FROM `brands` ORDER BY `id` DESC" }) }); const data = await response.json(); setBusinesses(Array.isArray(data) ? data : []); setLastUpdate(new Date().toLocaleTimeString()); } catch (error) { console.error("Error:", error); setBusinesses([]); } setLoading(false); }; const handleSort = (column)=>{ if (sortColumn === column) { setSortDirection(sortDirection === "asc" ? "desc" : "asc"); } else { setSortColumn(column); setSortDirection("asc"); } }; const filteredBusinesses = Array.isArray(businesses) ? businesses.filter((business)=>{ if (!search) return true; const searchLower = search.toLowerCase(); return business.description?.toLowerCase().includes(searchLower) || business.email?.toLowerCase().includes(searchLower) || business.website?.toLowerCase().includes(searchLower); }).sort((a, b)=>{ const direction = sortDirection === "asc" ? 1 : -1; if (a[sortColumn] < b[sortColumn]) return -1 * direction; if (a[sortColumn] > b[sortColumn]) return 1 * direction; return 0; }) : []; const handleChatOpen = (business)=>{ setSelectedBusiness(business); setChatOpen(true); fetchMessages(business.id); }; const fetchMessages = async (businessId)=>{ try { const response = await fetch("/api/db/creator-chats", { method: "POST", body: JSON.stringify({ query: "SELECT c.*, COALESCE(b.email, cr.email) as sender_email FROM `chat_messages` c LEFT JOIN `brands` b ON c.sender_id = b.id LEFT JOIN `creators` cr ON c.sender_id = cr.id WHERE (c.sender_id = ? AND c.receiver_id = ?) OR (c.sender_id = ? AND c.receiver_id = ?) ORDER BY c.timestamp ASC", values: [ 1, businessId, businessId, 1 ] }) }); const data = await response.json(); setMessages(data); } catch (error) { console.error("Error fetching messages:", error); } }; const handleSendMessage = async ()=>{ if (!newMessage.trim() && !file) return; try { let fileUrl = ""; if (file) { const { url, error } = await upload({ file }); if (!error) { fileUrl = url; } } await fetch("/api/db/creator-chats", { method: "POST", body: JSON.stringify({ query: "INSERT INTO `chat_messages` (`sender_id`, `receiver_id`, `message`, `file_url`, `timestamp`) VALUES (?, ?, ?, ?, ?)", values: [ 1, selectedBusiness.id, newMessage, fileUrl, new Date().toISOString() ] }) }); setNewMessage(""); setFile(null); fetchMessages(selectedBusiness.id); } catch (error) { console.error("Error sending message:", error); } }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-white px-4", __source: { fileName: "", lineNumber: 136, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("nav", { className: "flex justify-between items-center py-6 max-w-6xl mx-auto", __source: { fileName: "", lineNumber: 137, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/", className: "font-bold text-2xl bg-[#00ff00] px-4 py-1 rounded-lg", __source: { fileName: "", lineNumber: 138, columnNumber: 9 }, __self: this }, "CreatorConnect"), /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-4", __source: { fileName: "", lineNumber: 144, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: fetchBusinesses, className: "bg-[#00ff00] px-4 py-2 rounded-lg flex items-center gap-2", __source: { fileName: "", lineNumber: 145, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-sync", __source: { fileName: "", lineNumber: 149, columnNumber: 13 }, __self: this }), "Refresh"), lastUpdate && /*#__PURE__*/ React.createElement("span", { className: "text-gray-600", __source: { fileName: "", lineNumber: 153, columnNumber: 13 }, __self: this }, "Last updated: ", lastUpdate))), /*#__PURE__*/ React.createElement("main", { className: "max-w-6xl mx-auto py-12", __source: { fileName: "", lineNumber: 158, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col md:flex-row justify-between items-start md:items-center gap-4 mb-8", __source: { fileName: "", lineNumber: 159, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-bold", __source: { fileName: "", lineNumber: 160, columnNumber: 11 }, __self: this }, "Connect with Businesses"), /*#__PURE__*/ React.createElement("div", { className: "w-full md:w-auto", __source: { fileName: "", lineNumber: 161, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", placeholder: "Search businesses...", value: search, onChange: (e)=>setSearch(e.target.value), className: "w-full md:w-80 px-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:border-[#00ff00]", __source: { fileName: "", lineNumber: 162, columnNumber: 13 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-xl shadow-lg overflow-hidden", __source: { fileName: "", lineNumber: 172, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "overflow-x-auto relative", __source: { fileName: "", lineNumber: 173, columnNumber: 11 }, __self: this }, loading ? /*#__PURE__*/ React.createElement("div", { className: "p-8 text-center", __source: { fileName: "", lineNumber: 175, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-spinner fa-spin text-2xl text-[#00ff00]", __source: { fileName: "", lineNumber: 176, columnNumber: 17 }, __self: this })) : /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 179, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-end p-4", __source: { fileName: "", lineNumber: 180, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex gap-2", __source: { fileName: "", lineNumber: 181, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setCurrentPage(Math.max(0, currentPage - 1)), className: "px-3 py-1 rounded-lg bg-gray-100 hover:bg-gray-200", disabled: currentPage === 0, __source: { fileName: "", lineNumber: 182, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-chevron-left", __source: { fileName: "", lineNumber: 189, columnNumber: 23 }, __self: this })), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setCurrentPage(currentPage + 1), className: "px-3 py-1 rounded-lg bg-gray-100 hover:bg-gray-200", disabled: currentPage === 2, __source: { fileName: "", lineNumber: 191, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-chevron-right", __source: { fileName: "", lineNumber: 196, columnNumber: 23 }, __self: this })))), /*#__PURE__*/ React.createElement("div", { className: "overflow-x-auto", __source: { fileName: "", lineNumber: 200, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("table", { className: "w-full min-w-[800px]", __source: { fileName: "", lineNumber: 201, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("thead", { className: "bg-gray-50", __source: { fileName: "", lineNumber: 202, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("tr", { __source: { fileName: "", lineNumber: 203, columnNumber: 23 }, __self: this }, [ [ "email", "Email" ], [ "website", "Website" ], [ "description", "Description" ], [ "size", "Business Size" ] ].map(([key, label])=>/*#__PURE__*/ React.createElement("th", { key: key, className: "px-6 py-4 text-left text-sm font-bold text-gray-600 cursor-pointer hover:text-[#00ff00]", onClick: ()=>handleSort(key), __source: { fileName: "", lineNumber: 210, columnNumber: 27 }, __self: this }, label, " ", sortColumn === key && /*#__PURE__*/ React.createElement("i", { className: `fas fa-sort-${sortDirection}`, __source: { fileName: "", lineNumber: 217, columnNumber: 31 }, __self: this }))), /*#__PURE__*/ React.createElement("th", { className: "px-6 py-4", __source: { fileName: "", lineNumber: 221, columnNumber: 25 }, __self: this }))), /*#__PURE__*/ React.createElement("tbody", { className: "divide-y divide-gray-200", __source: { fileName: "", lineNumber: 224, columnNumber: 21 }, __self: this }, filteredBusinesses.map((business, index)=>/*#__PURE__*/ React.createElement("tr", { key: index, className: "hover:bg-gray-50", __source: { fileName: "", lineNumber: 226, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("td", { className: "px-6 py-4", __source: { fileName: "", lineNumber: 227, columnNumber: 27 }, __self: this }, business.email || "-"), /*#__PURE__*/ React.createElement("td", { className: "px-6 py-4", __source: { fileName: "", lineNumber: 228, columnNumber: 27 }, __self: this }, business.website || "-"), /*#__PURE__*/ React.createElement("td", { className: "px-6 py-4", __source: { fileName: "", lineNumber: 231, columnNumber: 27 }, __self: this }, business.description || "-"), /*#__PURE__*/ React.createElement("td", { className: "px-6 py-4", __source: { fileName: "", lineNumber: 234, columnNumber: 27 }, __self: this }, business.size || "-"), /*#__PURE__*/ React.createElement("td", { className: "px-6 py-4", __source: { fileName: "", lineNumber: 235, columnNumber: 27 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleChatOpen(business), className: "bg-[#00ff00] text-black px-4 py-2 rounded-lg hover:opacity-90", __source: { fileName: "", lineNumber: 236, columnNumber: 29 }, __self: this }, "Chat Now"))))))))))), chatOpen && /*#__PURE__*/ React.createElement("div", { className: `fixed bottom-0 right-0 md:right-4 w-full md:w-96 bg-white rounded-t-xl shadow-xl ${chatMinimized ? "h-12" : "h-[600px]"}`, __source: { fileName: "", lineNumber: 255, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center p-4 border-b cursor-pointer", onClick: ()=>setChatMinimized(!chatMinimized), __source: { fileName: "", lineNumber: 260, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-bold", __source: { fileName: "", lineNumber: 264, columnNumber: 13 }, __self: this }, selectedBusiness.email), /*#__PURE__*/ React.createElement("div", { className: "flex gap-2", __source: { fileName: "", lineNumber: 265, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setChatMinimized(!chatMinimized), __source: { fileName: "", lineNumber: 266, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fas fa-${chatMinimized ? "expand" : "compress"}`, __source: { fileName: "", lineNumber: 267, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setChatOpen(false), __source: { fileName: "", lineNumber: 271, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-times", __source: { fileName: "", lineNumber: 272, columnNumber: 17 }, __self: this })))), !chatMinimized && /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("div", { className: "h-[460px] overflow-y-auto p-4 flex flex-col gap-4", __source: { fileName: "", lineNumber: 279, columnNumber: 15 }, __self: this }, messages.map((msg, i)=>/*#__PURE__*/ React.createElement("div", { key: i, className: `flex flex-col ${msg.sender_id === 1 ? "items-end" : "items-start"}`, __source: { fileName: "", lineNumber: 281, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-xs text-gray-500 mb-1", __source: { fileName: "", lineNumber: 287, columnNumber: 21 }, __self: this }, msg.sender_email), /*#__PURE__*/ React.createElement("div", { className: `max-w-[80%] rounded-lg p-3 ${msg.sender_id === 1 ? "bg-[#00ff00]" : "bg-gray-100"}`, __source: { fileName: "", lineNumber: 290, columnNumber: 21 }, __self: this }, msg.message, msg.file_url && /*#__PURE__*/ React.createElement("a", { href: msg.file_url, target: "_blank", rel: "noopener noreferrer", className: "block mt-2 text-blue-500 hover:underline", __source: { fileName: "", lineNumber: 297, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-paperclip mr-2", __source: { fileName: "", lineNumber: 303, columnNumber: 27 }, __self: this }), "Attachment")), /*#__PURE__*/ React.createElement("span", { className: "text-xs text-gray-500 mt-1", __source: { fileName: "", lineNumber: 308, columnNumber: 21 }, __self: this }, new Date(msg.timestamp).toLocaleTimeString()), /*#__PURE__*/ React.createElement("div", { ref: messagesEndRef, __source: { fileName: "", lineNumber: 311, columnNumber: 21 }, __self: this })))), /*#__PURE__*/ React.createElement("div", { className: "p-4 border-t", __source: { fileName: "", lineNumber: 316, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex gap-2", __source: { fileName: "", lineNumber: 317, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", value: newMessage, onChange: (e)=>setNewMessage(e.target.value), placeholder: "Type a message...", className: "flex-1 px-4 py-2 rounded-lg border focus:outline-none focus:border-[#00ff00]", __source: { fileName: "", lineNumber: 318, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "file", id: "file-upload", className: "hidden", onChange: (e)=>setFile(e.target.files[0]), __source: { fileName: "", lineNumber: 325, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: ()=>document.getElementById("file-upload").click(), className: "px-3 py-2 rounded-lg bg-gray-100 hover:bg-gray-200", __source: { fileName: "", lineNumber: 331, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-paperclip", __source: { fileName: "", lineNumber: 337, columnNumber: 21 }, __self: this })), /*#__PURE__*/ React.createElement("button", { onClick: handleSendMessage, disabled: !newMessage.trim() && !file, className: "px-4 py-2 rounded-lg bg-[#00ff00] text-black disabled:opacity-50", __source: { fileName: "", lineNumber: 339, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-paper-plane", __source: { fileName: "", lineNumber: 344, columnNumber: 21 }, __self: this }))), file && /*#__PURE__*/ React.createElement("div", { className: "mt-2 text-sm text-gray-600", __source: { fileName: "", lineNumber: 348, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-file mr-2", __source: { fileName: "", lineNumber: 349, columnNumber: 21 }, __self: this }), file.name))))); }