function MainComponent() { const [images, setImages] = useState([]); const [selectedImages, setSelectedImages] = useState([]); const [error, setError] = useState({ type: "", message: "" }); const [showAllImages, setShowAllImages] = useState(false); const [categories, setCategories] = useState([]); const [selectedCategory, setSelectedCategory] = useState("all"); const [searchQuery, setSearchQuery] = useState(""); const [imageToDelete, setImageToDelete] = useState(null); const [showDeleteModal, setShowDeleteModal] = useState(false); const [deletePassword, setDeletePassword] = useState(""); const [isPasswordCorrect, setIsPasswordCorrect] = useState(false); useEffect(()=>{ document.title = "MAZ Digital Cards ❤️"; const link = document.createElement("link"); link.rel = "icon"; link.href = "data:image/svg+xml,"; document.head.appendChild(link); return ()=>document.head.removeChild(link); }, []); useEffect(()=>{ const fetchImages = async ()=>{ try { const response = await fetch("/api/list-images", { method: "POST" }); if (!response.ok) { throw new Error("Failed to fetch images"); } const data = await response.json(); setImages(Array.isArray(data) ? data : []); } catch (err) { console.error("Error fetching images:", err); setError({ type: "fetch", message: "Failed to load images" }); setImages([]); } }; const fetchCategories = async ()=>{ try { const response = await fetch("/api/categories", { method: "POST" }); if (!response.ok) { throw new Error("Failed to fetch categories"); } const data = await response.json(); setCategories(Array.isArray(data) ? data : []); } catch (err) { console.error("Error fetching categories:", err); } }; fetchImages(); fetchCategories(); }, []); const handleImageSelect = (imageUrl)=>{ setSelectedImages((prev)=>prev.includes(imageUrl) ? prev.filter((url)=>url !== imageUrl) : [ ...prev, imageUrl ]); }; const handleDelete = async (image)=>{ setImageToDelete(image); setShowDeleteModal(true); }; const confirmDelete = async ()=>{ try { const response = await fetch("/api/images/delete", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ id: imageToDelete.id, password: deletePassword }) }); if (!response.ok) { throw new Error("Failed to delete image"); } setImages(images.filter((img)=>img.id !== imageToDelete.id)); setShowDeleteModal(false); setDeletePassword(""); setImageToDelete(null); } catch (err) { setError({ type: "delete", message: err.message }); } }; const handleCategoryChange = async (image, categoryId)=>{ if (!isPasswordCorrect) { setError({ type: "auth", message: "Please enter the correct password first" }); return; } try { const response = await fetch("/api/images/category", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ imageId: image.id, categoryId, password: deletePassword }) }); if (!response.ok) throw new Error("Failed to update category"); const updatedImage = await response.json(); setImages(images.map((img)=>img.id === updatedImage.id ? updatedImage : img)); } catch (err) { setError({ type: "category", message: err.message }); } }; const handleDownloadSelected = ()=>{ selectedImages.forEach((imageUrl)=>{ handleDownload(imageUrl); }); setSelectedImages([]); }; const handleSaveSelected = ()=>{ selectedImages.forEach((imageUrl)=>{ const link = document.createElement("a"); link.href = imageUrl; link.download = "digital-card.jpg"; link.target = "_blank"; link.rel = "noopener noreferrer"; document.body.appendChild(link); link.click(); document.body.removeChild(link); }); setSelectedImages([]); }; const handleToggleLike = async (e, imageId)=>{ e.stopPropagation(); try { const response = await fetch("/api/toggle-like", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ imageId }) }); if (!response.ok) { throw new Error("Failed to toggle like"); } const updatedImage = await response.json(); setImages(images.map((img)=>img.id === imageId ? updatedImage : img)); } catch (error) { console.error("Failed to toggle like:", error); } }; const filteredImages = images.filter((image)=>{ if (selectedCategory === "all") return true; if (selectedCategory === "uncategorized") return !image.category_id; return image.category_id === parseInt(selectedCategory); }); return /*#__PURE__*/ React.createElement("div", { className: "bg-gray-50 rounded-lg", __source: { fileName: "", lineNumber: 177, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-7xl mx-auto p-4", __source: { fileName: "", lineNumber: 178, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full", __source: { fileName: "", lineNumber: 179, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-gradient-to-b from-pink-50 to-blue-50 rounded-xl p-4 mb-6 shadow-sm", __source: { fileName: "", lineNumber: 180, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "flex flex-col items-center justify-between gap-3 md:flex-row", __source: { fileName: "", lineNumber: 181, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 182, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "bg-gradient-to-r from-pink-500 to-blue-500 bg-clip-text text-2xl md:text-3xl font-bold text-transparent", __source: { fileName: "", lineNumber: 183, columnNumber: 17 }, __self: this }, "Digital Card Gallery"), /*#__PURE__*/ React.createElement("p", { className: "mt-1 text-sm text-gray-600", __source: { fileName: "", lineNumber: 186, columnNumber: 17 }, __self: this }, "Send heartfelt greetings with our beautiful collection"), /*#__PURE__*/ React.createElement("p", { className: "mt-1 text-base font-medium bg-gradient-to-r from-pink-400 to-blue-400 bg-clip-text text-transparent", __source: { fileName: "", lineNumber: 189, columnNumber: 17 }, __self: this }, "App created by MAZ")), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 193, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("select", { value: selectedCategory, onChange: (e)=>setSelectedCategory(e.target.value), className: "w-full md:w-64 rounded-lg border border-gray-200 px-4 py-2 text-gray-700 bg-white", __source: { fileName: "", lineNumber: 194, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "all", __source: { fileName: "", lineNumber: 199, columnNumber: 19 }, __self: this }, "All Categories"), /*#__PURE__*/ React.createElement("option", { value: "uncategorized", __source: { fileName: "", lineNumber: 200, columnNumber: 19 }, __self: this }, "Uncategorized"), categories.map((category)=>/*#__PURE__*/ React.createElement("option", { key: category.id, value: category.id, __source: { fileName: "", lineNumber: 202, columnNumber: 21 }, __self: this }, category.name)))))), /*#__PURE__*/ React.createElement("div", { className: "mb-4 p-3 bg-blue-50 rounded-lg text-sm text-gray-700", __source: { fileName: "", lineNumber: 211, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 212, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-info-circle mr-2 text-blue-500", __source: { fileName: "", lineNumber: 213, columnNumber: 15 }, __self: this }), 'To save an image: Right-click on the image and select "Save Image As..."')), !Array.isArray(filteredImages) || filteredImages.length === 0 ? /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center rounded-xl bg-white p-6 shadow-sm min-h-[300px]", __source: { fileName: "", lineNumber: 220, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-images mb-3 text-3xl text-gray-300", __source: { fileName: "", lineNumber: 221, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-500", __source: { fileName: "", lineNumber: 222, columnNumber: 15 }, __self: this }, "No images found in this category")) : /*#__PURE__*/ React.createElement("div", { className: "flex flex-col", __source: { fileName: "", lineNumber: 227, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-2 gap-2 sm:grid-cols-3 md:grid-cols-4 lg:gap-3", __source: { fileName: "", lineNumber: 228, columnNumber: 15 }, __self: this }, filteredImages.slice(0, showAllImages ? undefined : 20).map((image, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: `group relative overflow-hidden rounded-lg bg-white p-1 sm:p-2 shadow-sm transition-all hover:shadow-md ${selectedImages.includes(image) ? "ring-2 ring-pink-500" : ""}`, onClick: ()=>handleImageSelect(image), __source: { fileName: "", lineNumber: 232, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "aspect-[3/4]", __source: { fileName: "", lineNumber: 241, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: image.url, alt: `Digital card ${index + 1}`, className: "h-full w-full rounded-lg object-cover", loading: "lazy", __source: { fileName: "", lineNumber: 242, columnNumber: 25 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mt-1 text-center text-xs sm:text-sm text-gray-600 truncate px-1", __source: { fileName: "", lineNumber: 249, columnNumber: 23 }, __self: this }, categories.find((cat)=>cat.id === image.category_id)?.name || "Uncategorized"), selectedImages.includes(image) && /*#__PURE__*/ React.createElement("div", { className: "absolute right-1 top-1 sm:right-2 sm:top-2", __source: { fileName: "", lineNumber: 254, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-check-circle text-base sm:text-lg text-pink-500", __source: { fileName: "", lineNumber: 255, columnNumber: 27 }, __self: this }))))), filteredImages.length > 20 && !showAllImages && /*#__PURE__*/ React.createElement("div", { className: "mt-4 text-center", __source: { fileName: "", lineNumber: 263, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setShowAllImages(true), className: "rounded-full bg-gradient-to-r from-pink-500 to-blue-500 px-5 py-2 text-sm text-white transition-transform hover:scale-105", __source: { fileName: "", lineNumber: 264, columnNumber: 19 }, __self: this }, "Show More (", filteredImages.length - 20, " more cards)")))))); }