function MainComponent() { const [selectedCategory, setSelectedCategory] = useState("all"); const [searchTerm, setSearchTerm] = useState(""); const [items, setItems] = useState([]); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); const [bidAmount, setBidAmount] = useState({}); const [timeLeft, setTimeLeft] = useState({}); const [bidLoading, setBidLoading] = useState({}); const [processingAuctions, setProcessingAuctions] = useState(new Set()); const [creatingDeposit, setCreatingDeposit] = useState({}); const { data: user, loading: userLoading } = useUser(); const categories = [ { id: "all", name: "All Items" }, { id: "cars", name: "Cars & Vehicles" }, { id: "property", name: "Real Estate" }, { id: "household", name: "Household Items" }, { id: "electronics", name: "Electronics" }, { id: "collectibles", name: "Collectibles" } ]; const fetchItems = async ()=>{ try { setLoading(true); setError(null); const response = await fetch("/api/auction-items", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ category: selectedCategory, search: searchTerm }) }); if (!response.ok) { throw new Error(`Failed to fetch items: ${response.status}`); } const data = await response.json(); if (data.success) { setItems(data.items); const initialBidAmounts = {}; data.items.forEach((item)=>{ initialBidAmounts[item.id] = item.current_bid + item.min_bid_increment; }); setBidAmount(initialBidAmounts); } else { throw new Error(data.error || "Failed to fetch items"); } } catch (err) { console.error(err); setError("Failed to load auction items"); } finally{ setLoading(false); } }; useEffect(()=>{ fetchItems(); }, [ selectedCategory, searchTerm ]); useEffect(()=>{ const timer = setInterval(()=>{ const now = new Date().getTime(); const newTimeLeft = {}; const endedAuctions = []; items.forEach((item)=>{ const endTime = new Date(item.end_time).getTime(); const difference = endTime - now; if (difference > 0) { const days = Math.floor(difference / (1000 * 60 * 60 * 24)); const hours = Math.floor(difference % (1000 * 60 * 60 * 24) / (1000 * 60 * 60)); const minutes = Math.floor(difference % (1000 * 60 * 60) / (1000 * 60)); const seconds = Math.floor(difference % (1000 * 60) / 1000); newTimeLeft[item.id] = `${days}d ${hours}h ${minutes}m ${seconds}s`; } else { newTimeLeft[item.id] = "ENDED"; if (item.status === "active" && !processingAuctions.has(item.id)) { endedAuctions.push(item.id); } } }); setTimeLeft(newTimeLeft); endedAuctions.forEach((auctionId)=>{ processEndedAuction(auctionId); }); }, 1000); return ()=>clearInterval(timer); }, [ items, processingAuctions ]); const processEndedAuction = async (auctionId)=>{ if (processingAuctions.has(auctionId)) return; setProcessingAuctions((prev)=>new Set(prev).add(auctionId)); try { const response = await fetch("/api/process-auction-end", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ auction_item_id: auctionId }) }); if (response.ok) { const data = await response.json(); if (data.success) { setItems((prevItems)=>prevItems.map((item)=>item.id === auctionId ? { ...item, status: "completed", winner_id: data.winner?.id } : item)); } } } catch (error) { console.error("Error processing ended auction:", error); } finally{ setProcessingAuctions((prev)=>{ const newSet = new Set(prev); newSet.delete(auctionId); return newSet; }); } }; const createBiddingDeposit = async (itemId)=>{ if (!user) { setError("Please sign in to create deposits"); return; } try { setCreatingDeposit((prev)=>({ ...prev, [itemId]: true })); setError(null); const response = await fetch("/api/create-bidding-deposit", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ auction_item_id: itemId }) }); if (!response.ok) { throw new Error(`Failed to create deposit: ${response.status}`); } const data = await response.json(); if (data.success) { setError(null); // Show success message and redirect to deposits page alert(`Deposit created! Amount: $${data.deposit.deposit_amount.toLocaleString()}. Please complete payment within 24 hours.`); window.location.href = "/deposits"; } else { throw new Error(data.error || "Failed to create deposit"); } } catch (err) { console.error(err); setError(err.message); } finally{ setCreatingDeposit((prev)=>({ ...prev, [itemId]: false })); } }; const placeBid = async (itemId, newBidAmount)=>{ if (!user) { setError("Please sign in to place bids"); return; } try { setBidLoading((prev)=>({ ...prev, [itemId]: true })); setError(null); const response = await fetch("/api/place-bid", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ auction_item_id: itemId, bid_amount: newBidAmount }) }); if (!response.ok) { throw new Error(`Failed to place bid: ${response.status}`); } const data = await response.json(); if (data.success) { setItems((prevItems)=>prevItems.map((item)=>item.id === itemId ? { ...item, current_bid: data.new_current_bid } : item)); const item = items.find((i)=>i.id === itemId); setBidAmount((prev)=>({ ...prev, [itemId]: data.new_current_bid + item.min_bid_increment })); } else { if (data.requires_deposit) { const depositMessage = data.deposit_status === "pending" ? `Deposit payment pending. Deadline: ${new Date(data.payment_deadline).toLocaleDateString()}` : `Bidding deposit required: $${data.deposit_amount.toLocaleString()}`; const shouldCreateDeposit = confirm(`${depositMessage}\n\nWould you like to ${data.deposit_status === "pending" ? "view your deposits" : "create a deposit now"}?`); if (shouldCreateDeposit) { if (data.deposit_status === "pending") { window.location.href = "/deposits"; } else { await createBiddingDeposit(itemId); } } } else { throw new Error(data.error || "Failed to place bid"); } } } catch (err) { console.error(err); setError(err.message); } finally{ setBidLoading((prev)=>({ ...prev, [itemId]: false })); } }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-white dark:bg-gray-900", __source: { fileName: "", lineNumber: 253, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "border-b border-gray-200 dark:border-gray-700", __source: { fileName: "", lineNumber: 254, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6", __source: { fileName: "", lineNumber: 255, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center", __source: { fileName: "", lineNumber: 256, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-4", __source: { fileName: "", lineNumber: 257, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "https://raw.createusercontent.com/31e43f9a-66f0-4701-9784-a82b7ada0b32/", alt: "The Great Lesotho Auction House Logo", className: "h-16 w-auto", __source: { fileName: "", lineNumber: 258, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 263, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl md:text-4xl font-bold text-gray-900 dark:text-white font-inter", __source: { fileName: "", lineNumber: 264, columnNumber: 17 }, __self: this }, "The Great Lesotho Auction House"), /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-600 dark:text-gray-400 font-inter", __source: { fileName: "", lineNumber: 267, columnNumber: 17 }, __self: this }, "Premium Auctions in the Mountain Kingdom"))), /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-4", __source: { fileName: "", lineNumber: 272, columnNumber: 13 }, __self: this }, userLoading ? /*#__PURE__*/ React.createElement("div", { className: "animate-pulse bg-gray-200 dark:bg-gray-700 rounded h-8 w-24", __source: { fileName: "", lineNumber: 274, columnNumber: 17 }, __self: this }) : user ? /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-4", __source: { fileName: "", lineNumber: 276, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-gray-700 dark:text-gray-300 font-inter", __source: { fileName: "", lineNumber: 277, columnNumber: 19 }, __self: this }, "Welcome, ", user.email), (user.role === "admin" || user.email === "admin@example.com") && /*#__PURE__*/ React.createElement("a", { href: "/admin", className: "bg-purple-600 hover:bg-purple-700 text-white font-inter px-4 py-2 rounded-md transition-colors", __source: { fileName: "", lineNumber: 282, columnNumber: 21 }, __self: this }, "Admin Panel"), /*#__PURE__*/ React.createElement("a", { href: "/deposits", className: "bg-orange-600 hover:bg-orange-700 text-white font-inter px-4 py-2 rounded-md transition-colors", __source: { fileName: "", lineNumber: 289, columnNumber: 19 }, __self: this }, "Deposits"), /*#__PURE__*/ React.createElement("a", { href: "/payments", className: "bg-blue-600 hover:bg-blue-700 text-white font-inter px-4 py-2 rounded-md transition-colors", __source: { fileName: "", lineNumber: 295, columnNumber: 19 }, __self: this }, "Payments"), /*#__PURE__*/ React.createElement("a", { href: "/account/logout", className: "bg-gray-900 hover:bg-gray-700 text-white font-inter px-4 py-2 rounded-md transition-colors", __source: { fileName: "", lineNumber: 301, columnNumber: 19 }, __self: this }, "Sign Out")) : /*#__PURE__*/ React.createElement("div", { className: "flex gap-2", __source: { fileName: "", lineNumber: 309, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/account/signin", className: "bg-gray-900 hover:bg-gray-700 text-white font-inter px-4 py-2 rounded-md transition-colors", __source: { fileName: "", lineNumber: 310, columnNumber: 19 }, __self: this }, "Sign In"), /*#__PURE__*/ React.createElement("a", { href: "/account/signup", className: "border border-gray-900 hover:bg-gray-900 hover:text-white text-gray-900 dark:text-white dark:border-white font-inter px-4 py-2 rounded-md transition-colors", __source: { fileName: "", lineNumber: 316, columnNumber: 19 }, __self: this }, "Sign Up")))))), /*#__PURE__*/ React.createElement("main", { className: "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8", __source: { fileName: "", lineNumber: 329, columnNumber: 7 }, __self: this }, error && /*#__PURE__*/ React.createElement("div", { className: "mb-6 p-4 bg-red-50 border border-red-200 rounded-md", __source: { fileName: "", lineNumber: 331, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-red-700 font-inter", __source: { fileName: "", lineNumber: 332, columnNumber: 13 }, __self: this }, error)), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col md:flex-row gap-4 mb-8", __source: { fileName: "", lineNumber: 336, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "search", placeholder: "Search auctions...", className: "flex-1 p-2 border border-gray-200 dark:border-gray-700 rounded-md text-gray-900 dark:text-white bg-white dark:bg-gray-800 font-inter", value: searchTerm, onChange: (e)=>setSearchTerm(e.target.value), __source: { fileName: "", lineNumber: 337, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("select", { name: "category", className: "p-2 border border-gray-200 dark:border-gray-700 rounded-md text-gray-900 dark:text-white bg-white dark:bg-gray-800 font-inter", value: selectedCategory, onChange: (e)=>setSelectedCategory(e.target.value), __source: { fileName: "", lineNumber: 346, columnNumber: 11 }, __self: this }, categories.map((category)=>/*#__PURE__*/ React.createElement("option", { key: category.id, value: category.id, __source: { fileName: "", lineNumber: 353, columnNumber: 15 }, __self: this }, category.name)))), loading ? /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6", __source: { fileName: "", lineNumber: 361, columnNumber: 11 }, __self: this }, [ 1, 2, 3 ].map((i)=>/*#__PURE__*/ React.createElement("div", { key: i, className: "animate-pulse bg-gray-200 dark:bg-gray-700 rounded-lg h-[400px]", __source: { fileName: "", lineNumber: 363, columnNumber: 15 }, __self: this }))) : items.length === 0 ? /*#__PURE__*/ React.createElement("div", { className: "text-center py-12", __source: { fileName: "", lineNumber: 370, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-gray-700 dark:text-gray-300 font-inter", __source: { fileName: "", lineNumber: 371, columnNumber: 13 }, __self: this }, "No items found")) : /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6", __source: { fileName: "", lineNumber: 376, columnNumber: 11 }, __self: this }, items.map((item)=>/*#__PURE__*/ React.createElement("div", { key: item.id, className: "border border-gray-200 dark:border-gray-700 rounded-lg overflow-hidden", __source: { fileName: "", lineNumber: 378, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: item.image_url, alt: item.title, className: "w-full h-[200px] object-cover", __source: { fileName: "", lineNumber: 382, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 387, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-xl font-bold text-gray-900 dark:text-white font-inter mb-2", __source: { fileName: "", lineNumber: 388, columnNumber: 19 }, __self: this }, item.title), /*#__PURE__*/ React.createElement("p", { className: "text-gray-700 dark:text-gray-300 font-inter text-sm mb-4", __source: { fileName: "", lineNumber: 391, columnNumber: 19 }, __self: this }, item.description), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 394, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-700 dark:text-gray-300 font-inter", __source: { fileName: "", lineNumber: 395, columnNumber: 21 }, __self: this }, "Time Remaining"), /*#__PURE__*/ React.createElement("p", { className: "text-lg font-bold text-gray-900 dark:text-white font-inter", __source: { fileName: "", lineNumber: 398, columnNumber: 21 }, __self: this }, timeLeft[item.id] || item.time_left)), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col gap-2", __source: { fileName: "", lineNumber: 402, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 403, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-700 dark:text-gray-300 font-inter", __source: { fileName: "", lineNumber: 404, columnNumber: 23 }, __self: this }, "Current Bid"), /*#__PURE__*/ React.createElement("p", { className: "text-xl font-bold text-gray-900 dark:text-white font-inter", __source: { fileName: "", lineNumber: 407, columnNumber: 23 }, __self: this }, "$", item.current_bid.toLocaleString())), item.deposit_required > 0 && /*#__PURE__*/ React.createElement("div", { className: "bg-orange-50 dark:bg-orange-900/20 p-3 rounded-md", __source: { fileName: "", lineNumber: 413, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-sm text-orange-700 dark:text-orange-400 font-inter font-medium", __source: { fileName: "", lineNumber: 414, columnNumber: 25 }, __self: this }, "💰 Deposit Required: $", item.deposit_required.toLocaleString()), /*#__PURE__*/ React.createElement("p", { className: "text-xs text-orange-600 dark:text-orange-500 font-inter mt-1", __source: { fileName: "", lineNumber: 418, columnNumber: 25 }, __self: this }, "Required before bidding")), item.status === "completed" ? /*#__PURE__*/ React.createElement("div", { className: "text-center p-3 bg-green-50 dark:bg-green-900/20 rounded-md", __source: { fileName: "", lineNumber: 425, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-green-700 dark:text-green-400 font-inter text-sm font-medium mb-2", __source: { fileName: "", lineNumber: 426, columnNumber: 25 }, __self: this }, "Auction Ended"), item.winner_id === user?.id ? /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 430, columnNumber: 27 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-green-600 dark:text-green-400 font-inter text-sm mb-2", __source: { fileName: "", lineNumber: 431, columnNumber: 29 }, __self: this }, "🎉 You won this auction!"), /*#__PURE__*/ React.createElement("a", { href: "/payments", className: "bg-green-600 hover:bg-green-700 text-white font-inter px-4 py-2 rounded-md text-sm transition-colors inline-block", __source: { fileName: "", lineNumber: 434, columnNumber: 29 }, __self: this }, "Complete Payment")) : item.seller_id === user?.id ? /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 442, columnNumber: 27 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-green-600 dark:text-green-400 font-inter text-sm mb-2", __source: { fileName: "", lineNumber: 443, columnNumber: 29 }, __self: this }, "Your item sold!"), /*#__PURE__*/ React.createElement("a", { href: "/payments", className: "bg-green-600 hover:bg-green-700 text-white font-inter px-4 py-2 rounded-md text-sm transition-colors inline-block", __source: { fileName: "", lineNumber: 446, columnNumber: 29 }, __self: this }, "View Payment")) : /*#__PURE__*/ React.createElement("p", { className: "text-gray-600 dark:text-gray-400 font-inter text-sm", __source: { fileName: "", lineNumber: 454, columnNumber: 27 }, __self: this }, "This auction has ended")) : timeLeft[item.id] === "ENDED" ? /*#__PURE__*/ React.createElement("div", { className: "text-center p-3 bg-yellow-50 dark:bg-yellow-900/20 rounded-md", __source: { fileName: "", lineNumber: 460, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-yellow-700 dark:text-yellow-400 font-inter text-sm", __source: { fileName: "", lineNumber: 461, columnNumber: 25 }, __self: this }, processingAuctions.has(item.id) ? "Processing auction..." : "Auction ended - processing...")) : user ? /*#__PURE__*/ React.createElement("div", { className: "space-y-2", __source: { fileName: "", lineNumber: 468, columnNumber: 23 }, __self: this }, item.deposit_required > 0 && /*#__PURE__*/ React.createElement("button", { onClick: ()=>createBiddingDeposit(item.id), disabled: creatingDeposit[item.id], className: "w-full bg-orange-600 hover:bg-orange-700 disabled:bg-orange-400 text-white font-inter px-4 py-2 rounded-md transition-colors text-sm", __source: { fileName: "", lineNumber: 470, columnNumber: 27 }, __self: this }, creatingDeposit[item.id] ? "Creating..." : "Create Deposit"), /*#__PURE__*/ React.createElement("div", { className: "flex gap-2", __source: { fileName: "", lineNumber: 480, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "number", name: `bid-${item.id}`, value: bidAmount[item.id] || "", onChange: (e)=>setBidAmount((prev)=>({ ...prev, [item.id]: parseFloat(e.target.value) || 0 })), className: "flex-1 p-2 border border-gray-200 dark:border-gray-700 rounded-md text-gray-900 dark:text-white bg-white dark:bg-gray-800 font-inter", __source: { fileName: "", lineNumber: 481, columnNumber: 27 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: ()=>placeBid(item.id, bidAmount[item.id]), disabled: bidLoading[item.id], className: "bg-gray-900 hover:bg-gray-700 disabled:bg-gray-500 text-white font-inter px-4 py-2 rounded-md transition-colors", __source: { fileName: "", lineNumber: 493, columnNumber: 27 }, __self: this }, bidLoading[item.id] ? "Placing..." : "Place Bid"))) : /*#__PURE__*/ React.createElement("div", { className: "text-center p-3 bg-gray-50 dark:bg-gray-800 rounded-md", __source: { fileName: "", lineNumber: 505, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-gray-600 dark:text-gray-400 font-inter text-sm mb-2", __source: { fileName: "", lineNumber: 506, columnNumber: 25 }, __self: this }, "Sign in to place bids"), /*#__PURE__*/ React.createElement("a", { href: "/account/signin", className: "text-blue-600 hover:text-blue-800 font-inter text-sm underline", __source: { fileName: "", lineNumber: 509, columnNumber: 25 }, __self: this }, "Sign In")), item.status === "active" && /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-600 dark:text-gray-400 font-inter", __source: { fileName: "", lineNumber: 518, columnNumber: 23 }, __self: this }, "Minimum increment: $", item.min_bid_increment.toLocaleString())))))))); }