function MainComponent() { const [loading, setLoading] = useState(true); const [stats, setStats] = useState({ totalContracts: 0, totalRevenue: 0, monthlyRevenue: 0, rating: 0, pricePerK: 0 }); const [formData, setFormData] = useState({ name: "", email: "", password: "", tiktok: "", instagram: "", linkedin: "", pricePerK: 0, niches: "", language: "" }); const [upload, { loading: uploading }] = useUpload(); const [resume, setResume] = useState(null); const [error, setError] = useState(""); const [showChats, setShowChats] = useState(false); const [messages, setMessages] = useState([]); const [selectedChat, setSelectedChat] = useState(null); const [chatMinimized, setChatMinimized] = useState(false); const [chatMessages, setChatMessages] = useState([]); const [showToolsPopup, setShowToolsPopup] = useState(true); const [newMessage, setNewMessage] = useState(""); const [sendingMessage, setSendingMessage] = useState(false); const [attachment, setAttachment] = useState(null); const [groupedMessages, setGroupedMessages] = useState({}); useEffect(()=>{ checkAuth(); }, []); useEffect(()=>{ const interval = setInterval(async ()=>{ const creatorEmail = localStorage.getItem("creator_email"); if (creatorEmail && showChats) { const response = await fetch("/api/p-2-p-chat-messenger-ui", { method: "POST", body: JSON.stringify({ action: "fetch", userId: formData.id, receiverId: selectedChat?.chat_partner_id }) }); const data = await response.json(); if (data.messages) { setChatMessages(data.messages); } } }, 5000); return ()=>clearInterval(interval); }, [ showChats, selectedChat, formData.id ]); const checkAuth = async ()=>{ try { const creatorEmail = localStorage.getItem("creator_email"); if (!creatorEmail) { window.location.href = "/login"; return; } const response = await fetch("/api/p-2-p-chat-messenger-ui", { method: "POST", body: JSON.stringify({ action: "login", email: creatorEmail, password: "" }) }); const data = await response.json(); if (!data.success) { window.location.href = "/login"; return; } fetchCreatorData(data.user.email); } catch (error) { window.location.href = "/login"; } }; const fetchMessages = async (creatorEmail)=>{ try { const creatorResponse = await fetch("/api/p-2-p-chat-messenger-ui", { method: "POST", body: JSON.stringify({ action: "login", email: creatorEmail, password: "" }) }); const creatorData = await creatorResponse.json(); if (!creatorData.success) { setError("Failed to fetch creator data"); return; } const response = await fetch("/api/p-2-p-chat-messenger-ui", { method: "POST", body: JSON.stringify({ action: "getAllChats", userId: creatorData.user.id }) }); const { chats } = await response.json(); const grouped = chats.reduce((acc, msg)=>{ const chatPartnerId = msg.sender_id === creatorData.user.id.toString() ? msg.receiver_id : msg.sender_id; if (!acc[chatPartnerId]) { acc[chatPartnerId] = { messages: [], name: msg.sender_id === creatorData.user.id.toString() ? "You" : msg.sender_email }; } acc[chatPartnerId].messages.push({ ...msg, sender_email: msg.sender_id === creatorData.user.id.toString() ? "You" : msg.sender_email }); return acc; }, {}); Object.keys(grouped).forEach((key)=>{ grouped[key].messages.sort((a, b)=>new Date(a.timestamp) - new Date(b.timestamp)); }); setGroupedMessages(grouped); setMessages(chats); } catch (error) { console.error("Error fetching messages:", error); setError("Failed to load messages. Please try again."); } }; const fetchCreatorData = async (email)=>{ try { const response = await fetch("/api/db/creators", { method: "POST", body: JSON.stringify({ query: "SELECT * FROM creators WHERE email = ? LIMIT 1", values: [ email ] }) }); const data = await response.json(); if (data.length > 0) { const creator = data[0]; setFormData({ id: creator.id, name: creator.creator_name || "", email: creator.email || "", password: creator.password || "", tiktok: creator.tiktok || "", instagram: creator.instagram || "", linkedin: creator.linkedin || "", pricePerK: creator.price_per_1k || 0, niches: creator.niches || "", language: creator.language || "" }); setStats({ totalContracts: creator.total_contracts || 0, totalRevenue: creator.total_revenue || 0, monthlyRevenue: creator.monthly_revenue || 0, rating: creator.rating || 0, pricePerK: creator.price_per_1k || 0 }); await fetchMessages(creator.email); } setLoading(false); } catch (error) { console.error("Error:", error); setError("Failed to load profile data"); setLoading(false); } }; const handleChange = (e)=>{ setFormData({ ...formData, [e.target.name]: e.target.value }); }; const handleSubmit = async (e)=>{ e.preventDefault(); setError(""); try { let resumeUrl = ""; if (resume) { const { url, error: uploadError } = await upload({ file: resume }); if (uploadError) { setError("Failed to upload resume"); return; } resumeUrl = url; } await fetch("/api/update-database", { method: "POST" }); await fetch("/api/db/creators", { method: "POST", body: JSON.stringify({ query: `UPDATE creators SET creator_name = ?, email = ?, password = ?, tiktok = ?, instagram = ?, linkedin = ?, price_per_1k = ?, niches = ?, language = ?, resume = ? WHERE id = ?`, values: [ formData.name, formData.email, formData.password, formData.tiktok, formData.instagram, formData.linkedin, formData.pricePerK, formData.niches, formData.language, resumeUrl, formData.id ] }) }); fetchCreatorData(formData.email); } catch (error) { console.error("Error:", error); setError("Failed to update profile"); } }; const formatMessageDate = (timestamp)=>{ const date = new Date(timestamp); const now = new Date(); const diffInMinutes = Math.floor((now - date) / (1000 * 60)); const diffInHours = Math.floor(diffInMinutes / 60); const diffInDays = Math.floor(diffInHours / 24); if (diffInMinutes < 1) { return "Just now"; } else if (diffInMinutes < 60) { return `${diffInMinutes}m ago`; } else if (diffInHours < 24) { return `${diffInHours}h ago`; } else if (diffInDays === 1) { return "Yesterday"; } else if (diffInDays < 7) { return `${diffInDays}d ago`; } else { return date.toLocaleDateString([], { month: "short", day: "numeric", year: date.getFullYear() !== now.getFullYear() ? "numeric" : undefined }); } }; const handleSendMessage = async ()=>{ if (!newMessage.trim() && !attachment) return; setSendingMessage(true); try { let fileUrl = ""; if (attachment) { const { url, error: uploadError } = await upload({ file: attachment }); if (uploadError) { setError("Failed to upload attachment"); return; } fileUrl = url; } const response = await fetch("/api/p-2-p-chat-messenger-ui", { method: "POST", body: JSON.stringify({ action: "send", userId: formData.id, receiverId: selectedChat.chat_partner_id, message: newMessage }) }); const data = await response.json(); if (!data.success) { throw new Error("Failed to send message"); } setNewMessage(""); setAttachment(null); const messagesResponse = await fetch("/api/p-2-p-chat-messenger-ui", { method: "POST", body: JSON.stringify({ action: "fetch", userId: formData.id, receiverId: selectedChat.chat_partner_id }) }); const { messages } = await messagesResponse.json(); setChatMessages(messages); } catch (error) { console.error("Error sending message:", error); setError("Failed to send message. Please try again."); } finally{ setSendingMessage(false); } }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-white px-4", __source: { fileName: "", lineNumber: 328, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("nav", { className: "flex flex-col md:flex-row justify-between items-center py-6 max-w-6xl mx-auto gap-4", __source: { fileName: "", lineNumber: 329, 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: 330, columnNumber: 9 }, __self: this }, "CreatorConnect"), /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap justify-center items-center gap-4", __source: { fileName: "", lineNumber: 336, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("a", { target: "_self", href: "https://trycreatorconnect.com/find-brands", className: "text-lg font-bold text-gray-600 hover:text-gray-900", __source: { fileName: "", lineNumber: 337, columnNumber: 11 }, __self: this }, "Find Brands"), /*#__PURE__*/ React.createElement("a", { target: "_self", href: "https://trycreatorconnect.com/contract-management", className: "text-lg font-bold text-gray-600 hover:text-gray-900", __source: { fileName: "", lineNumber: 344, columnNumber: 11 }, __self: this }, "Contract"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setShowChats(!showChats), className: "text-lg font-bold text-gray-600 hover:text-gray-900", __source: { fileName: "", lineNumber: 351, columnNumber: 11 }, __self: this }, "Check Chats"), /*#__PURE__*/ React.createElement("div", { className: "relative group", __source: { fileName: "", lineNumber: 357, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "text-lg font-bold text-gray-600 hover:text-gray-900", __source: { fileName: "", lineNumber: 358, columnNumber: 13 }, __self: this }, "Tools ", /*#__PURE__*/ React.createElement("i", { className: "fas fa-chevron-down ml-1", __source: { fileName: "", lineNumber: 359, columnNumber: 21 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "absolute right-0 mt-2 w-48 bg-white rounded-lg shadow-lg py-2 hidden group-hover:block transition-opacity duration-300 opacity-0 group-hover:opacity-100", style: { transitionDelay: "0.2s" }, __source: { fileName: "", lineNumber: 361, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "https://www.trycreatorconnect.com/extract-competitor-amazon-product-data", target: "_self", className: "block px-4 py-2 text-gray-800 hover:bg-gray-100", __source: { fileName: "", lineNumber: 365, columnNumber: 15 }, __self: this }, "AI Competitor Analysis"), /*#__PURE__*/ React.createElement("a", { href: "https://trycreatorconnect.com/tiktok-search", target: "_self", className: "block px-4 py-2 text-gray-800 hover:bg-gray-100", __source: { fileName: "", lineNumber: 372, columnNumber: 15 }, __self: this }, "TikTok Data Search"), /*#__PURE__*/ React.createElement("a", { href: "https://trycreatorconnect.com/google-maps-extractor-tool", target: "_self", className: "block px-4 py-2 text-gray-800 hover:bg-gray-100", __source: { fileName: "", lineNumber: 379, columnNumber: 15 }, __self: this }, "Business Lead Finder"), /*#__PURE__*/ React.createElement("a", { href: "https://www.trycreatorconnect.com/job-listings", target: "_self", className: "block px-4 py-2 text-gray-800 hover:bg-gray-100", __source: { fileName: "", lineNumber: 386, columnNumber: 15 }, __self: this }, "Job Listings"))))), showToolsPopup && /*#__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: 399, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-xl p-6 max-w-2xl w-full", __source: { fileName: "", lineNumber: 400, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center mb-6", __source: { fileName: "", lineNumber: 401, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold", __source: { fileName: "", lineNumber: 402, columnNumber: 15 }, __self: this }, "Check Out Our Creator Tools"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setShowToolsPopup(false), className: "text-gray-500 hover:text-gray-700", __source: { fileName: "", lineNumber: 405, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-times text-xl", __source: { fileName: "", lineNumber: 409, columnNumber: 17 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "space-y-6", __source: { fileName: "", lineNumber: 412, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "https://www.trycreatorconnect.com/extract-competitor-amazon-product-data", target: "_self", className: "block p-4 border rounded-lg hover:border-[#00ff00] transition-colors", __source: { fileName: "", lineNumber: 413, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-xl font-bold mb-2", __source: { fileName: "", lineNumber: 418, columnNumber: 17 }, __self: this }, "AI Competitor Analysis"), /*#__PURE__*/ React.createElement("p", { className: "text-gray-600", __source: { fileName: "", lineNumber: 421, columnNumber: 17 }, __self: this }, "Research and analyze competitor products on Amazon to find trending opportunities")), /*#__PURE__*/ React.createElement("a", { href: "https://trycreatorconnect.com/tiktok-search", target: "_self", className: "block p-4 border rounded-lg hover:border-[#00ff00] transition-colors", __source: { fileName: "", lineNumber: 426, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-xl font-bold mb-2", __source: { fileName: "", lineNumber: 431, columnNumber: 17 }, __self: this }, "TikTok Data Search"), /*#__PURE__*/ React.createElement("p", { className: "text-gray-600", __source: { fileName: "", lineNumber: 432, columnNumber: 17 }, __self: this }, "Find viral TikToks and analyze their performance metrics")), /*#__PURE__*/ React.createElement("a", { href: "https://trycreatorconnect.com/google-maps-extractor-tool", target: "_self", className: "block p-4 border rounded-lg hover:border-[#00ff00] transition-colors", __source: { fileName: "", lineNumber: 436, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-xl font-bold mb-2", __source: { fileName: "", lineNumber: 441, columnNumber: 17 }, __self: this }, "Business Lead Finder"), /*#__PURE__*/ React.createElement("p", { className: "text-gray-600", __source: { fileName: "", lineNumber: 442, columnNumber: 17 }, __self: this }, "Discover and connect with local businesses looking for creators")), /*#__PURE__*/ React.createElement("a", { href: "https://www.trycreatorconnect.com/job-listings", target: "_self", className: "block p-4 border rounded-lg hover:border-[#00ff00] transition-colors", __source: { fileName: "", lineNumber: 447, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-xl font-bold mb-2", __source: { fileName: "", lineNumber: 452, columnNumber: 17 }, __self: this }, "Job Listings"), /*#__PURE__*/ React.createElement("p", { className: "text-gray-600", __source: { fileName: "", lineNumber: 453, columnNumber: 17 }, __self: this }, "Browse and apply to creator job opportunities"))))), /*#__PURE__*/ React.createElement("main", { className: "max-w-6xl mx-auto py-12", __source: { fileName: "", lineNumber: 462, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col md:flex-row justify-between items-center gap-4 mb-8", __source: { fileName: "", lineNumber: 463, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-bold", __source: { fileName: "", lineNumber: 464, columnNumber: 11 }, __self: this }, "Profile Settings"), /*#__PURE__*/ React.createElement("button", { onClick: handleSubmit, className: "w-full md:w-auto bg-[#00ff00] text-black px-6 py-2 rounded-lg hover:opacity-90", __source: { fileName: "", lineNumber: 465, columnNumber: 11 }, __self: this }, "Save Changes")), error && /*#__PURE__*/ React.createElement("div", { className: "bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative mb-6", __source: { fileName: "", lineNumber: 474, columnNumber: 11 }, __self: this }, error), /*#__PURE__*/ React.createElement("div", { className: "bg-white p-6 rounded-xl shadow-lg mb-8", __source: { fileName: "", lineNumber: 479, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold mb-6", __source: { fileName: "", lineNumber: 480, columnNumber: 11 }, __self: this }, "Basic Information"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 gap-6", __source: { fileName: "", lineNumber: 481, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "name", placeholder: "Full Name", value: formData.name, onChange: handleChange, className: "px-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:border-[#00ff00]", __source: { fileName: "", lineNumber: 482, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "email", name: "email", placeholder: "Email", value: formData.email, onChange: handleChange, className: "px-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:border-[#00ff00]", __source: { fileName: "", lineNumber: 490, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "password", name: "password", placeholder: "Password", value: formData.password, onChange: handleChange, className: "px-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:border-[#00ff00]", __source: { fileName: "", lineNumber: 498, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "text", name: "tiktok", placeholder: "TikTok Username", value: formData.tiktok, onChange: handleChange, className: "px-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:border-[#00ff00]", __source: { fileName: "", lineNumber: 506, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "text", name: "instagram", placeholder: "Instagram Handle", value: formData.instagram, onChange: handleChange, className: "px-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:border-[#00ff00]", __source: { fileName: "", lineNumber: 514, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "text", name: "linkedin", placeholder: "LinkedIn Profile", value: formData.linkedin, onChange: handleChange, className: "px-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:border-[#00ff00]", __source: { fileName: "", lineNumber: 522, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "number", name: "pricePerK", placeholder: "Price per 1K Views", value: formData.pricePerK, onChange: handleChange, className: "px-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:border-[#00ff00]", __source: { fileName: "", lineNumber: 530, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "text", name: "niches", placeholder: "Niches (comma-separated)", value: formData.niches, onChange: handleChange, className: "px-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:border-[#00ff00]", __source: { fileName: "", lineNumber: 538, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "text", name: "language", placeholder: "Languages (comma-separated)", value: formData.language, onChange: handleChange, className: "px-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:border-[#00ff00]", __source: { fileName: "", lineNumber: 546, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-4", __source: { fileName: "", lineNumber: 554, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "file", accept: ".pdf", onChange: (e)=>setResume(e.target.files[0]), className: "hidden", id: "resume", __source: { fileName: "", lineNumber: 555, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("label", { htmlFor: "resume", className: "w-full px-4 py-2 rounded-lg border border-gray-300 cursor-pointer hover:bg-gray-50 text-center", __source: { fileName: "", lineNumber: 562, columnNumber: 15 }, __self: this }, "Upload Resume (PDF)"), resume && /*#__PURE__*/ React.createElement("span", { className: "text-sm text-gray-600", __source: { fileName: "", lineNumber: 569, columnNumber: 17 }, __self: this }, resume.name)))), loading ? /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 gap-6 mb-8", __source: { fileName: "", lineNumber: 576, columnNumber: 11 }, __self: this }, [ ...Array.from({ length: 3 }) ].map((_, i)=>/*#__PURE__*/ React.createElement("div", { key: i, className: "bg-gray-100 animate-pulse h-40 rounded-xl", __source: { fileName: "", lineNumber: 578, columnNumber: 15 }, __self: this }))) : /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 gap-6 mb-8", __source: { fileName: "", lineNumber: 585, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white p-6 rounded-xl shadow-lg", __source: { fileName: "", lineNumber: 586, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-gray-600", __source: { fileName: "", lineNumber: 587, columnNumber: 15 }, __self: this }, "Total Contracts"), /*#__PURE__*/ React.createElement("div", { className: "text-3xl font-bold mt-2", __source: { fileName: "", lineNumber: 588, columnNumber: 15 }, __self: this }, stats.totalContracts)), /*#__PURE__*/ React.createElement("div", { className: "bg-white p-6 rounded-xl shadow-lg", __source: { fileName: "", lineNumber: 592, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-gray-600", __source: { fileName: "", lineNumber: 593, columnNumber: 15 }, __self: this }, "Total Revenue"), /*#__PURE__*/ React.createElement("div", { className: "text-3xl font-bold mt-2", __source: { fileName: "", lineNumber: 594, columnNumber: 15 }, __self: this }, "$", stats.totalRevenue.toLocaleString())), /*#__PURE__*/ React.createElement("div", { className: "bg-white p-6 rounded-xl shadow-lg", __source: { fileName: "", lineNumber: 598, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-gray-600", __source: { fileName: "", lineNumber: 599, columnNumber: 15 }, __self: this }, "Monthly Revenue"), /*#__PURE__*/ React.createElement("div", { className: "text-3xl font-bold mt-2", __source: { fileName: "", lineNumber: 600, columnNumber: 15 }, __self: this }, "$", stats.monthlyRevenue.toLocaleString()))), loading ? /*#__PURE__*/ React.createElement("div", { className: "bg-white p-6 rounded-xl shadow-lg", __source: { fileName: "", lineNumber: 608, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-gray-100 animate-pulse h-8 w-24 mb-4 rounded", __source: { fileName: "", lineNumber: 609, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "bg-gray-100 animate-pulse h-12 rounded", __source: { fileName: "", lineNumber: 610, columnNumber: 13 }, __self: this })) : /*#__PURE__*/ React.createElement("div", { className: "bg-white p-6 rounded-xl shadow-lg", __source: { fileName: "", lineNumber: 613, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-gray-600", __source: { fileName: "", lineNumber: 614, columnNumber: 13 }, __self: this }, "Rating"), /*#__PURE__*/ React.createElement("div", { className: "text-3xl font-bold mt-2 text-[#00ff00]", __source: { fileName: "", lineNumber: 615, columnNumber: 13 }, __self: this }, stats.rating, "/5.0"))), showChats && /*#__PURE__*/ React.createElement("div", { className: `fixed bottom-0 right-0 left-0 md:left-auto md:right-4 w-full md:w-96 bg-white rounded-t-xl shadow-xl ${chatMinimized ? "h-12" : "h-[600px]"}`, __source: { fileName: "", lineNumber: 623, 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: 628, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-bold", __source: { fileName: "", lineNumber: 632, columnNumber: 13 }, __self: this }, selectedChat ? selectedChat.sender_email : "Messages"), /*#__PURE__*/ React.createElement("div", { className: "flex gap-2", __source: { fileName: "", lineNumber: 635, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setChatMinimized(!chatMinimized), __source: { fileName: "", lineNumber: 636, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fas fa-${chatMinimized ? "expand" : "compress"}`, __source: { fileName: "", lineNumber: 637, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("button", { onClick: ()=>{ setShowChats(false); setSelectedChat(null); }, __source: { fileName: "", lineNumber: 641, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-times", __source: { fileName: "", lineNumber: 647, columnNumber: 17 }, __self: this })))), !chatMinimized && /*#__PURE__*/ React.createElement("div", { className: "flex flex-col h-[calc(100%-64px)]", __source: { fileName: "", lineNumber: 653, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex-1 overflow-y-auto p-4", __source: { fileName: "", lineNumber: 654, columnNumber: 15 }, __self: this }, !selectedChat ? /*#__PURE__*/ React.createElement("div", { className: "flex flex-col gap-4", __source: { fileName: "", lineNumber: 656, columnNumber: 19 }, __self: this }, Object.entries(groupedMessages).map(([otherId, data])=>{ const latestMessage = data.messages[data.messages.length - 1]; return /*#__PURE__*/ React.createElement("div", { key: otherId, onClick: ()=>{ setSelectedChat(latestMessage); setChatMessages(data.messages); }, className: "flex items-center justify-between p-3 border rounded-lg cursor-pointer hover:bg-gray-50", __source: { fileName: "", lineNumber: 661, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 669, columnNumber: 27 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "font-bold", __source: { fileName: "", lineNumber: 670, columnNumber: 29 }, __self: this }, data.name), /*#__PURE__*/ React.createElement("div", { className: "text-sm text-gray-500 truncate w-48", __source: { fileName: "", lineNumber: 671, columnNumber: 29 }, __self: this }, latestMessage.message)), /*#__PURE__*/ React.createElement("div", { className: "text-xs text-gray-500", __source: { fileName: "", lineNumber: 675, columnNumber: 27 }, __self: this }, formatMessageDate(latestMessage.timestamp))); })) : /*#__PURE__*/ React.createElement("div", { className: "flex flex-col gap-4", __source: { fileName: "", lineNumber: 683, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setSelectedChat(null), className: "text-gray-500 hover:text-gray-700", __source: { fileName: "", lineNumber: 684, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-arrow-left mr-2", __source: { fileName: "", lineNumber: 688, columnNumber: 23 }, __self: this }), "Back to messages"), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col gap-4", __source: { fileName: "", lineNumber: 690, columnNumber: 21 }, __self: this }, chatMessages.map((msg, i)=>/*#__PURE__*/ React.createElement("div", { key: i, className: `flex flex-col ${msg.sender_email === "You" ? "items-end" : "items-start"}`, __source: { fileName: "", lineNumber: 692, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-2 mb-1", __source: { fileName: "", lineNumber: 700, columnNumber: 27 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-xs text-gray-500", __source: { fileName: "", lineNumber: 701, columnNumber: 29 }, __self: this }, formatMessageDate(msg.timestamp))), /*#__PURE__*/ React.createElement("div", { className: `rounded-lg p-3 max-w-[80%] ${msg.sender_email === "You" ? "bg-[#00ff00] text-black" : "bg-gray-100"}`, __source: { fileName: "", lineNumber: 705, columnNumber: 27 }, __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: 714, columnNumber: 31 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-paperclip mr-2", __source: { fileName: "", lineNumber: 720, columnNumber: 33 }, __self: this }), "Attachment"))))))), selectedChat && /*#__PURE__*/ React.createElement("div", { className: "p-4 border-t", __source: { fileName: "", lineNumber: 732, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex gap-2 mb-2", __source: { fileName: "", lineNumber: 733, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "file", onChange: (e)=>setAttachment(e.target.files[0]), className: "hidden", id: "attachment", __source: { fileName: "", lineNumber: 734, columnNumber: 21 }, __self: this }), /*#__PURE__*/ React.createElement("label", { htmlFor: "attachment", className: "cursor-pointer text-gray-500 hover:text-gray-700", __source: { fileName: "", lineNumber: 740, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-paperclip", __source: { fileName: "", lineNumber: 744, columnNumber: 23 }, __self: this })), attachment && /*#__PURE__*/ React.createElement("span", { className: "text-sm text-gray-600", __source: { fileName: "", lineNumber: 747, columnNumber: 23 }, __self: this }, attachment.name)), /*#__PURE__*/ React.createElement("div", { className: "flex gap-2", __source: { fileName: "", lineNumber: 752, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", value: newMessage, onChange: (e)=>setNewMessage(e.target.value), placeholder: "Type a message...", className: "flex-1 px-3 py-2 rounded-lg border border-gray-300 focus:outline-none focus:border-[#00ff00]", onKeyPress: (e)=>{ if (e.key === "Enter" && !e.shiftKey) { e.preventDefault(); handleSendMessage(); } }, __source: { fileName: "", lineNumber: 753, columnNumber: 21 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: handleSendMessage, disabled: sendingMessage || !newMessage.trim() && !attachment, className: "bg-[#00ff00] text-black px-4 py-2 rounded-lg disabled:opacity-50", __source: { fileName: "", lineNumber: 766, columnNumber: 21 }, __self: this }, sendingMessage ? /*#__PURE__*/ React.createElement("i", { className: "fas fa-spinner fa-spin", __source: { fileName: "", lineNumber: 774, columnNumber: 25 }, __self: this }) : /*#__PURE__*/ React.createElement("i", { className: "fas fa-paper-plane", __source: { fileName: "", lineNumber: 776, columnNumber: 25 }, __self: this })))))), /*#__PURE__*/ React.createElement("div", { className: "fixed bottom-4 right-4 text-gray-600 hidden md:block", __source: { fileName: "", lineNumber: 787, columnNumber: 7 }, __self: this }, formData.email)); }