@devvistatech/devvista-kit 0.0.1

package/dist/components/addOns/functional/galleries/GalleryComplex.jsx

@@ -0,0 +1,586 @@
+"use client";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+import { useState, useRef, useEffect } from "react";
+import { Card } from "@/components/other/card";
+import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/other/tabs";
+import { motion, useScroll, useTransform } from "framer-motion";
+import Image from "next/image";
+import { ActionButton, EditIconButton, TrashIconButton, CloseButton, SubmitButton, CancelButton, FilterButton, DeleteButton } from "@/components/other/button";
+import { Upload, X } from "lucide-react";
+import { useUser, useAuth } from "@clerk/nextjs";
+import { useStrapiAuth } from "@/lib/auth-context";
+import { GALLERY_COMPLEX } from "./constants/galleryComplex";
+import { ImageDescCarousel } from "../ImageDescCarousel";
+export function GallerySection(_a) {
+    var _this = this;
+    var _b, _c, _d, _e, _f;
+    var user = _a.user, setUser = _a.setUser, authLoading = _a.authLoading, uploadedImages = _a.uploadedImages, setUploadedImages = _a.setUploadedImages, error = _a.error, setError = _a.setError, isLoading = _a.isLoading, setIsLoading = _a.setIsLoading, handleImageUpload = _a.handleImageUpload, handleDeleteImage = _a.handleDeleteImage;
+    var isSignedIn = useUser().isSignedIn;
+    var getToken = useAuth().getToken;
+    var checkSession = useStrapiAuth().checkSession;
+    var isAdmin = isSignedIn && !!(user === null || user === void 0 ? void 0 : user.businessAdminId) || false;
+    var _g = useState("photos"), activeTab = _g[0], setActiveTab = _g[1];
+    var _h = useState("all"), activeSubTab = _h[0], setActiveSubTab = _h[1];
+    var _j = useState(null), selectedImage = _j[0], setSelectedImage = _j[1];
+    var _k = useState(false), isMobile = _k[0], setIsMobile = _k[1];
+    var _l = useState(12), visiblePhotos = _l[0], setVisiblePhotos = _l[1];
+    var _m = useState(false), isConfirmDeleteOpen = _m[0], setIsConfirmDeleteOpen = _m[1];
+    var _o = useState(null), documentIdToDelete = _o[0], setDocumentIdToDelete = _o[1];
+    var _p = useState(false), isEditModalOpen = _p[0], setIsEditModalOpen = _p[1];
+    var _q = useState(false), isUploadModalOpen = _q[0], setIsUploadModalOpen = _q[1];
+    var _r = useState({ id: 0, documentId: "", title: "", description: "", category: "none" }), editForm = _r[0], setEditForm = _r[1];
+    var _s = useState({ file: null, title: "", description: "", category: "none" }), uploadForm = _s[0], setUploadForm = _s[1];
+    var containerRef = useRef(null);
+    var scrollYProgress = useScroll({
+        target: containerRef,
+        offset: ["start end", "end start"],
+    }).scrollYProgress;
+    var parallaxY = useTransform(scrollYProgress, [0, 1], [0, -50]);
+    var videos = GALLERY_COMPLEX.UI.VIDEO_TITLES.map(function (title, index) { return ({
+        url: [
+            "https://www.youtube.com/embed/Ch5fnKgDZH8",
+            "https://www.youtube.com/embed/XW3zDzMZNv8",
+            "https://www.youtube.com/embed/odC_X6g1uFs",
+            "https://www.youtube.com/embed/DFuBBzMi6ZA",
+            "https://www.youtube.com/embed/zZNMJyMmcFQ",
+            "https://www.youtube.com/embed/VRpbsZGU4a0",
+            "https://www.youtube.com/embed/qE14UbB3-gs",
+            "https://www.youtube.com/embed/QoVE5TqMkvU",
+            "https://www.youtube.com/embed/7Fzgw0SK-8k",
+            "https://www.youtube.com/embed/wN0j6JoliAE",
+            "https://www.youtube.com/embed/vzFZzhB8KvA",
+            "https://www.youtube.com/embed/4thuylOfM9w",
+            "https://www.youtube.com/embed/sm3l_uPtaws",
+            "https://www.youtube.com/embed/xnnlanydT5I",
+            "https://www.youtube.com/embed/jLLePKwiFpI",
+            "https://www.youtube.com/embed/pBlpMq8JbIA",
+        ][index],
+        title: title,
+    }); });
+    var filteredImages = activeTab === "photos"
+        ? activeSubTab === "all"
+            ? uploadedImages
+            : uploadedImages.filter(function (img) { return (img.category || "none") === activeSubTab; })
+        : uploadedImages.filter(function (img) { return (img.category || "none") === activeTab; });
+    useEffect(function () {
+        var handleLogin = function () { return checkSession(); };
+        var handleLogout = function () { return checkSession(); };
+        window.addEventListener("user-login", handleLogin);
+        window.addEventListener("user-logout", handleLogout);
+        return function () {
+            window.removeEventListener("user-login", handleLogin);
+            window.removeEventListener("user-logout", handleLogout);
+        };
+    }, [checkSession]);
+    useEffect(function () {
+        var checkMobile = function () { return setIsMobile(window.innerWidth < 768); };
+        checkMobile();
+        window.addEventListener("resize", checkMobile);
+        return function () { return window.removeEventListener("resize", checkMobile); };
+    }, []);
+    useEffect(function () {
+        if (selectedImage || isConfirmDeleteOpen || isEditModalOpen || isUploadModalOpen) {
+            document.body.classList.add("overflow-hidden");
+        }
+        else {
+            document.body.classList.remove("overflow-hidden");
+        }
+        return function () {
+            document.body.classList.remove("overflow-hidden");
+        };
+    }, [selectedImage, isConfirmDeleteOpen, isEditModalOpen, isUploadModalOpen]);
+    useEffect(function () {
+        var event = new CustomEvent("modalStateChange", {
+            detail: { isOpen: !!selectedImage || isConfirmDeleteOpen || isEditModalOpen || isUploadModalOpen },
+        });
+        window.dispatchEvent(event);
+    }, [selectedImage, isConfirmDeleteOpen, isEditModalOpen, isUploadModalOpen]);
+    useEffect(function () {
+        var handleEsc = function (e) {
+            if (e.key === "Escape") {
+                if (isConfirmDeleteOpen) {
+                    handleCancelDelete();
+                }
+                else if (selectedImage) {
+                    handleCloseModal();
+                }
+                else if (isEditModalOpen) {
+                    handleCloseEditModal();
+                }
+                else if (isUploadModalOpen) {
+                    handleCloseUploadModal();
+                }
+            }
+        };
+        window.addEventListener("keydown", handleEsc);
+        return function () { return window.removeEventListener("keydown", handleEsc); };
+    }, [isConfirmDeleteOpen, selectedImage, isEditModalOpen, isUploadModalOpen]);
+    var openConfirmDelete = function (documentId) {
+        if (!isAdmin) {
+            setError(GALLERY_COMPLEX.ERRORS.UNAUTHORIZED_DELETE);
+            return;
+        }
+        setDocumentIdToDelete(documentId);
+        setIsConfirmDeleteOpen(true);
+    };
+    var handleConfirmDelete = function () { return __awaiter(_this, void 0, void 0, function () {
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    if (!isAdmin) {
+                        setError(GALLERY_COMPLEX.ERRORS.UNAUTHORIZED_DELETE);
+                        setIsConfirmDeleteOpen(false);
+                        return [2 /*return*/];
+                    }
+                    if (!(documentIdToDelete !== null)) return [3 /*break*/, 4];
+                    setIsLoading(true);
+                    _a.label = 1;
+                case 1:
+                    _a.trys.push([1, , 3, 4]);
+                    return [4 /*yield*/, handleDeleteImage(documentIdToDelete)];
+                case 2:
+                    _a.sent();
+                    return [3 /*break*/, 4];
+                case 3:
+                    setIsLoading(false);
+                    setIsConfirmDeleteOpen(false);
+                    setDocumentIdToDelete(null);
+                    return [7 /*endfinally*/];
+                case 4: return [2 /*return*/];
+            }
+        });
+    }); };
+    var handleCancelDelete = function () {
+        setIsConfirmDeleteOpen(false);
+        setDocumentIdToDelete(null);
+    };
+    var handleImageClick = function (image) {
+        setSelectedImage(image);
+    };
+    var handleCloseModal = function () {
+        setSelectedImage(null);
+    };
+    var openEditModal = function (image) {
+        var _a;
+        if (!isAdmin) {
+            setError(GALLERY_COMPLEX.ERRORS.UNAUTHORIZED_EDIT);
+            return;
+        }
+        setEditForm({
+            id: image.id,
+            documentId: image.documentId,
+            title: ((_a = image.title) === null || _a === void 0 ? void 0 : _a.trim()) && !image.title.match(/Image \d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}\.\d{3}Z/) ? image.title : "",
+            description: image.description || "",
+            category: image.category || "none",
+        });
+        setIsEditModalOpen(true);
+    };
+    var handleCloseEditModal = function () {
+        setIsEditModalOpen(false);
+        setEditForm({ id: 0, documentId: "", title: "", description: "", category: "none" });
+    };
+    var handleCloseUploadModal = function () {
+        setIsUploadModalOpen(false);
+        setUploadForm({ file: null, title: "", description: "", category: "none" });
+    };
+    var handleEditImage = function (e) { return __awaiter(_this, void 0, void 0, function () {
+        var token, payload, response, errorData, data, err_1;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    e.preventDefault();
+                    if (!isAdmin) {
+                        console.error("GallerySection: Unauthorized edit attempt", {
+                            isSignedIn: isSignedIn,
+                            businessAdminId: user === null || user === void 0 ? void 0 : user.businessAdminId,
+                        });
+                        setError(GALLERY_COMPLEX.ERRORS.UNAUTHORIZED_EDIT);
+                        return [2 /*return*/];
+                    }
+                    _a.label = 1;
+                case 1:
+                    _a.trys.push([1, 7, 8, 9]);
+                    setIsLoading(true);
+                    return [4 /*yield*/, getToken()];
+                case 2:
+                    token = _a.sent();
+                    if (!token) {
+                        console.error("GallerySection: No authentication token available");
+                        setError(GALLERY_COMPLEX.ERRORS.AUTHENTICATION_ERROR);
+                        setUser(null);
+                        return [2 /*return*/];
+                    }
+                    payload = {
+                        documentId: editForm.documentId,
+                        title: editForm.title || "Image ".concat(new Date().toISOString()),
+                        description: editForm.description || "",
+                        category: editForm.category || "none",
+                    };
+                    return [4 /*yield*/, fetch("/api/gallery-data", {
+                            method: "PUT",
+                            headers: {
+                                "Content-Type": "application/json",
+                                Authorization: "Bearer ".concat(token),
+                            },
+                            body: JSON.stringify(payload),
+                        })];
+                case 3:
+                    response = _a.sent();
+                    if (!!response.ok) return [3 /*break*/, 5];
+                    return [4 /*yield*/, response.json()];
+                case 4:
+                    errorData = _a.sent();
+                    console.error("GallerySection: Edit failed", { status: response.status, errorData: errorData });
+                    if (response.status === 401) {
+                        setError(GALLERY_COMPLEX.ERRORS.AUTHENTICATION_ERROR);
+                        setUser(null);
+                        return [2 /*return*/];
+                    }
+                    throw new Error(errorData.error || GALLERY_COMPLEX.ERRORS.EDIT_FAILED_STATUS.replace("${response.status}", response.status.toString()));
+                case 5: return [4 /*yield*/, response.json()];
+                case 6:
+                    data = (_a.sent()).data;
+                    setUploadedImages(data || []);
+                    setError(null);
+                    setIsEditModalOpen(false);
+                    setEditForm({ id: 0, documentId: "", title: "", description: "", category: "none" });
+                    return [3 /*break*/, 9];
+                case 7:
+                    err_1 = _a.sent();
+                    console.error("GallerySection: Edit Error", err_1);
+                    setError(err_1 instanceof Error ? err_1.message : GALLERY_COMPLEX.ERRORS.EDIT_FAILED);
+                    return [3 /*break*/, 9];
+                case 8:
+                    setIsLoading(false);
+                    return [7 /*endfinally*/];
+                case 9: return [2 /*return*/];
+            }
+        });
+    }); };
+    var handleUploadSubmit = function (e) { return __awaiter(_this, void 0, void 0, function () {
+        var err_2;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    e.preventDefault();
+                    if (!isAdmin) {
+                        console.error("GallerySection: Unauthorized upload attempt", {
+                            isSignedIn: isSignedIn,
+                            businessAdminId: user === null || user === void 0 ? void 0 : user.businessAdminId,
+                        });
+                        setError(GALLERY_COMPLEX.ERRORS.UNAUTHORIZED_UPLOAD);
+                        return [2 /*return*/];
+                    }
+                    setIsLoading(true);
+                    _a.label = 1;
+                case 1:
+                    _a.trys.push([1, 3, 4, 5]);
+                    return [4 /*yield*/, handleImageUpload(e, uploadForm.file, uploadForm.title, uploadForm.description, uploadForm.category || "none")];
+                case 2:
+                    _a.sent();
+                    setUploadForm({ file: null, title: "", description: "", category: "none" });
+                    setIsUploadModalOpen(false);
+                    return [3 /*break*/, 5];
+                case 3:
+                    err_2 = _a.sent();
+                    console.error("GallerySection: Upload Error", err_2);
+                    setError(err_2 instanceof Error ? err_2.message : GALLERY_COMPLEX.ERRORS.UPLOAD_FAILED);
+                    return [3 /*break*/, 5];
+                case 4:
+                    setIsLoading(false);
+                    return [7 /*endfinally*/];
+                case 5: return [2 /*return*/];
+            }
+        });
+    }); };
+    var loadMore = function () {
+        setVisiblePhotos(function (prev) { return prev + 12; });
+    };
+    var sectionVariants = {
+        hidden: { opacity: 0 },
+        visible: {
+            opacity: 1,
+            transition: { duration: 0.8, ease: [0.16, 1, 0.3, 1], staggerChildren: 0.1 },
+        },
+    };
+    var cardVariants = {
+        hidden: { opacity: 0, y: 30 },
+        visible: {
+            opacity: 1,
+            y: 0,
+            transition: { duration: 0.5 },
+        },
+    };
+    var modalVariants = {
+        hidden: { opacity: 0, y: "100vh" },
+        visible: { opacity: 1, y: 0, transition: { duration: 0.5, ease: [0.16, 1, 0.3, 1] } },
+        exit: { opacity: 0, y: "100vh", transition: { duration: 0.3, ease: "easeIn" } },
+    };
+    return (<div className="w-full">
+            <style jsx>{"\n                :root {\n                    --jubilee: #F47C7C;\n                    --exuberant-blue: #FF69B4;\n                    --modern-purple: #D946EF;\n                }\n\n                .glassmorphism {\n                    background: rgba(255, 255, 255, 0.08);\n                    backdrop-filter: blur(10px);\n                    -webkit-backdrop-filter: blur(10px);\n                    border: 2px solid transparent;\n                    border-image: linear-gradient(45deg, var(--exuberant-blue), var(--jubilee), var(--modern-purple)) 1;\n                    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.1);\n                }\n\n                .modal-glassmorphism {\n                    background: rgba(255, 255, 255, 0.08);\n                    backdrop-filter: blur(10px);\n                    -webkit-backdrop-filter: blur(10px);\n                    border: 2px solid transparent;\n                    border-image: linear-gradient(45deg, var(--exuberant-blue), var(--jubilee), var(--modern-purple)) 1;\n                    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.1);\n                    border-radius: 2rem;\n                    max-height: 90vh;\n                    overflow: hidden;\n                }\n\n                @supports not (backdrop-filter: blur(10px)) {\n                    .glassmorphism {\n                        background: rgba(255, 255, 255, 0.2);\n                    }\n                    .modal-glassmorphism {\n                        background: rgba(255, 255, 255, 0.2);\n                    }\n                }\n\n                @media (max-width: 768px) {\n                    .glassmorphism {\n                        backdrop-filter: none;\n                        background: rgba(255, 255, 255, 0.2);\n                    }\n                    .modal-glassmorphism {\n                        padding: 1rem;\n                        max-height: 85vh;\n                    }\n                }\n\n                .motion-card {\n                    will-change: transform, opacity;\n                }\n            "}</style>
+            <motion.div variants={sectionVariants} initial="hidden" whileInView="visible" viewport={{ once: true }} className="p-4 sm:p-8 lg:p-12" ref={containerRef}>
+                <Tabs defaultValue="photos" className="w-full" onValueChange={function (value) { return setActiveTab(value); }}>
+                    <TabsList className="grid w-full md:w-3/4 mx-auto grid-cols-2 mb-12 glassmorphism bg-black/10 rounded-[2rem] p-4 h-24 border-0">
+                        {["photos", "videos"].map(function (tab) { return (<TabsTrigger key={tab} value={tab} className="rounded-[1.5rem] text-xl sm:text-2xl font-bold text-gray-700 data-[state=active]:text-white data-[state=active]:bg-blue-600 h-full flex items-center justify-center transition-all duration-300 content-text">
+                                {tab === "photos" ? GALLERY_COMPLEX.UI.PHOTOS_TAB : GALLERY_COMPLEX.UI.VIDEOS_TAB}
+                            </TabsTrigger>); })}
+                    </TabsList>
+                    {/* Replace the existing photos tab content with ImageDescCarousel */}
+                    <ImageDescCarousel user={user} uploadedImages={filteredImages} setUploadedImages={setUploadedImages} error={error} setError={setError} isLoading={isLoading} setIsLoading={setIsLoading} handleImageUpload={handleImageUpload} handleDeleteImage={handleDeleteImage}/>
+                    <TabsContent value="photos">
+                        <Tabs defaultValue="all" onValueChange={function (value) { return setActiveSubTab(value); }}>
+                            {isMobile ? (<div className="flex justify-center mb-6 max-w-2xl mx-auto">
+                                    <select value={activeSubTab} onChange={function (e) { return setActiveSubTab(e.target.value); }} className="px-4 py-2 text-base font-medium text-gray-600 bg-white rounded-md border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500 w-full max-w-xs">
+                                        {["all", "indoor", "outdoor", "commercial"].map(function (subTab) { return (<option key={subTab} value={subTab}>
+                                                {subTab === "all" ? GALLERY_COMPLEX.UI.ALL_SUB_TAB :
+                    subTab === "indoor" ? GALLERY_COMPLEX.UI.INDOOR_SUB_TAB :
+                        subTab === "outdoor" ? GALLERY_COMPLEX.UI.OUTDOOR_SUB_TAB :
+                            GALLERY_COMPLEX.UI.COMMERCIAL_SUB_TAB}
+                                            </option>); })}
+                                    </select>
+                                </div>) : (<div className="flex justify-center gap-4 mb-12 max-w-2xl mx-auto">
+                                    {["all", "indoor", "outdoor", "commercial"].map(function (subTab) { return (<FilterButton key={subTab} isActive={activeSubTab === subTab} useBlueActive={true} onClick={function () { return setActiveSubTab(subTab); }}>
+                                            {subTab === "all" ? GALLERY_COMPLEX.UI.ALL_SUB_TAB :
+                    subTab === "indoor" ? GALLERY_COMPLEX.UI.INDOOR_SUB_TAB :
+                        subTab === "outdoor" ? GALLERY_COMPLEX.UI.OUTDOOR_SUB_TAB :
+                            GALLERY_COMPLEX.UI.COMMERCIAL_SUB_TAB}
+                                        </FilterButton>); })}
+                                </div>)}
+
+                            {["all", "indoor", "outdoor", "commercial"].map(function (subTab) { return (<TabsContent key={subTab} value={subTab}>
+                                    <div className="space-y-6">
+                                        {error && (<p className="text-red-400 text-base sm:text-lg md:text-xl text-center">{error}</p>)}
+                                        {isAdmin && (<div className="flex justify-center pb-12">
+                                                <ActionButton onClick={function () { return setIsUploadModalOpen(true); }} className="flex items-center gap-2" disabled={isLoading}>
+                                                    <Upload className="h-4 w-4 sm:h-5 sm:w-5"/>
+                                                    {GALLERY_COMPLEX.BUTTONS.UPLOAD_IMAGE_BUTTON}
+                                                </ActionButton>
+                                            </div>)}
+                                        {filteredImages.length > 0 ? (<>
+                                                <motion.div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-2 sm:gap-8" style={{ y: isMobile ? 0 : parallaxY }}>
+                                                    {filteredImages.slice(0, visiblePhotos).map(function (image, index) {
+                    var _a, _b, _c, _d, _e;
+                    return (<motion.div key={image.documentId} variants={cardVariants} initial="hidden" whileInView="visible" viewport={{ once: true, amount: 0.2 }} onClick={function () { return handleImageClick(image); }} className="cursor-pointer motion-card">
+                                                            <Card className="overflow-hidden glassmorphism rounded-[1.5rem] shadow-4xl p-2 sm:p-4 relative">
+                                                                <div className="relative w-full aspect-[3/2]">
+                                                                    <Image src={image.url} alt={((_a = image.title) === null || _a === void 0 ? void 0 : _a.trim()) &&
+                            !image.title.match(/Image \d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}\.\d{3}Z/)
+                            ? image.title
+                            : GALLERY_COMPLEX.UI.DEFAULT_IMAGE_ALT} fill className="object-cover object-center rounded-[1rem] transition-all duration-300" priority={index === 0} loading={index === 0 ? "eager" : "lazy"} quality={85}/>
+                                                                </div>
+                                                                {isAdmin && (<div className="absolute top-2 right-2 flex space-x-2">
+                                                                        <EditIconButton onClick={function (e) {
+                                e.stopPropagation();
+                                openEditModal(image);
+                            }}/>
+                                                                        <TrashIconButton onClick={function (e) {
+                                e.stopPropagation();
+                                openConfirmDelete(image.documentId);
+                            }}/>
+                                                                    </div>)}
+                                                                {(((_b = image.title) === null || _b === void 0 ? void 0 : _b.trim()) &&
+                            !image.title.match(/Image \d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}\.\d{3}Z/) ||
+                            ((_c = image.description) === null || _c === void 0 ? void 0 : _c.trim())) && (<div className="p-4">
+                                                                            {((_d = image.title) === null || _d === void 0 ? void 0 : _d.trim()) &&
+                                !image.title.match(/Image \d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}\.\d{3}Z/) && (<h3 className="text-lg font-semibold text-gray-700">{image.title}</h3>)}
+                                                                            {((_e = image.description) === null || _e === void 0 ? void 0 : _e.trim()) && (<p className="text-sm text-gray-600 line-clamp-2">{image.description}</p>)}
+                                                                        </div>)}
+                                                            </Card>
+                                                        </motion.div>);
+                })}
+                                                </motion.div>
+                                                {visiblePhotos < filteredImages.length && (<div className="mt-8 text-center">
+                                                        <ActionButton onClick={loadMore} className="flex items-center gap-2">
+                                                            {GALLERY_COMPLEX.BUTTONS.LOAD_MORE_BUTTON}
+                                                        </ActionButton>
+                                                    </div>)}
+                                            </>) : (<p className="text-center text-gray-700 font-bold text-base sm:text-lg md:text-xl">
+                                                {GALLERY_COMPLEX.UI.NO_IMAGES_MESSAGE}
+                                            </p>)}
+                                    </div>
+                                </TabsContent>); })}
+                        </Tabs>
+                    </TabsContent>
+
+                    <TabsContent value="videos">
+                        <motion.div className="grid md:grid-cols-2 lg:grid-cols-3 gap-2 sm:gap-4" style={{ y: isMobile ? 0 : parallaxY }}>
+                            {videos.map(function (video, index) { return (<motion.div key={index} variants={cardVariants} initial="hidden" whileInView="visible" viewport={{ once: true, amount: 0.2 }} className="motion-card">
+                                    <Card className="overflow-hidden glassmorphism rounded-[1.5rem] shadow-4xl p-4">
+                                        <div className="relative w-full aspect-[16/9]">
+                                            <iframe width="100%" height="100%" src={video.url} title={video.title} allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowFullScreen className="border-0 rounded-[1rem]" loading="lazy"/>
+                                        </div>
+                                        <p className="text-gray-700 text-xl sm:text-2xl font-bold mt-4 text-center drop-shadow-md content-text">
+                                            {video.title}
+                                        </p>
+                                    </Card>
+                                </motion.div>); })}
+                        </motion.div>
+                    </TabsContent>
+                </Tabs>
+                <div className="mt-4 text-center">
+                    {authLoading || isLoading ? (<p className="text-gray-400 text-sm font-medium">{GALLERY_COMPLEX.UI.LOADING_MESSAGE}</p>) : isAdmin ? (<p className="text-gray-400 text-sm font-medium">{GALLERY_COMPLEX.UI.ADMIN_LOGGED_IN_MESSAGE}</p>) : user ? (<p className="text-gray-400 text-sm font-medium"></p>) : (<p className="text-gray-400 text-sm font-medium"></p>)}
+                </div>
+            </motion.div>
+            {selectedImage && (<motion.div variants={modalVariants} initial="hidden" animate="visible" exit="exit" className="fixed inset-0 bg-black/90 flex items-center justify-center z-[10000] p-2 sm:p-4 isolate" onClick={handleCloseModal} role="dialog" aria-modal="true" aria-labelledby="modal-image">
+                    <div className="relative max-w-5xl w-full mx-2 sm:mx-4 max-h-[90vh] bg-gray-800/50 border border-gray-700/50 rounded-2xl shadow-lg overflow-hidden" onClick={function (e) { return e.stopPropagation(); }}>
+                        <CloseButton variant="close-form" onClick={handleCloseModal}>
+                            <X className="h-6 w-6 sm:h-8 sm:w-8"/>
+                        </CloseButton>
+                        <div className="relative w-full h-[70vh] sm:h-[80vh]">
+                            <Image src={selectedImage.url} alt={((_b = selectedImage.title) === null || _b === void 0 ? void 0 : _b.trim()) &&
+                !selectedImage.title.match(/Image \d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}\.\d{3}Z/)
+                ? selectedImage.title
+                : GALLERY_COMPLEX.UI.DEFAULT_IMAGE_ALT} fill className="object-contain rounded-2xl" quality={85}/>
+                            {(((_c = selectedImage.title) === null || _c === void 0 ? void 0 : _c.trim()) &&
+                !selectedImage.title.match(/Image \d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}\.\d{3}Z/) ||
+                ((_d = selectedImage.description) === null || _d === void 0 ? void 0 : _d.trim())) && (<div className="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/80 to-transparent p-3 sm:p-4">
+                                        {((_e = selectedImage.title) === null || _e === void 0 ? void 0 : _e.trim()) &&
+                    !selectedImage.title.match(/Image \d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}\.\d{3}Z/) && (<h3 className="text-lg sm:text-xl md:text-2xl font-bold text-white drop-shadow-lg">
+                                                    {selectedImage.title}
+                                                </h3>)}
+                                        {((_f = selectedImage.description) === null || _f === void 0 ? void 0 : _f.trim()) && (<p className="text-xs sm:text-sm md:text-base text-gray-200 drop-shadow-md line-clamp-2">
+                                                {selectedImage.description}
+                                            </p>)}
+                                    </div>)}
+                        </div>
+                    </div>
+                </motion.div>)}
+
+            {isConfirmDeleteOpen && isAdmin && (<motion.div variants={modalVariants} initial="hidden" animate="visible" exit="exit" className="fixed inset-0 bg-black/90 flex items-center justify-center z-[10000] p-4 isolate" onClick={handleCancelDelete} role="dialog" aria-modal="true" aria-labelledby="modal-title">
+                    <div className="relative max-w-md w-full mx-4 p-6 bg-gray-800/50 border border-gray-700/50 rounded-lg shadow-lg" onClick={function (e) { return e.stopPropagation(); }}>
+                        <CloseButton onClick={handleCancelDelete}>
+                            <X className="h-6 w-6 sm:h-8 sm:w-8"/>
+                        </CloseButton>
+                        <h3 id="modal-title" className="text-xl font-bold text-white mb-4">
+                            {GALLERY_COMPLEX.UI.DELETE_MODAL_HEADING}
+                        </h3>
+                        <p className="text-gray-300 text-sm mb-4">
+                            {GALLERY_COMPLEX.UI.DELETE_CONFIRMATION_MESSAGE}
+                        </p>
+                        <div className="flex space-x-3">
+                            <DeleteButton onClick={handleConfirmDelete} disabled={isLoading}>
+                                {isLoading ? GALLERY_COMPLEX.BUTTONS.DELETING_BUTTON : GALLERY_COMPLEX.BUTTONS.DELETE_BUTTON}
+                            </DeleteButton>
+                            <CancelButton onClick={handleCancelDelete}/>
+                        </div>
+                    </div>
+                </motion.div>)}
+
+            {isEditModalOpen && isAdmin && (<motion.div variants={modalVariants} initial="hidden" animate="visible" exit="exit" className="fixed inset-0 bg-black/90 flex items-center justify-center z-[10000] p-4 isolate" onClick={handleCloseEditModal} role="dialog" aria-modal="true" aria-labelledby="edit-modal-title">
+                    <div className="relative max-w-md w-full mx-4 p-6 bg-gray-800/50 border border-gray-700/50 rounded-lg shadow-lg" onClick={function (e) { return e.stopPropagation(); }}>
+                        <CloseButton onClick={handleCloseEditModal}>
+                            <X className="h-6 w-6 sm:h-8 sm:w-8"/>
+                        </CloseButton>
+                        <h3 id="edit-modal-title" className="text-xl font-bold text-white mb-4">
+                            {GALLERY_COMPLEX.UI.EDIT_MODAL_HEADING}
+                        </h3>
+                        <form onSubmit={handleEditImage} className="flex flex-col space-y-4">
+                            <input value={editForm.title} onChange={function (e) { return setEditForm(__assign(__assign({}, editForm), { title: e.target.value })); }} placeholder={GALLERY_COMPLEX.UI.TITLE_PLACEHOLDER} className="p-2 bg-gray-700 text-white rounded-lg" disabled={isLoading}/>
+                            <textarea value={editForm.description} onChange={function (e) { return setEditForm(__assign(__assign({}, editForm), { description: e.target.value })); }} placeholder={GALLERY_COMPLEX.UI.DESCRIPTION_PLACEHOLDER} className="p-2 bg-gray-700 text-white rounded-lg h-24" disabled={isLoading}/>
+                            <select value={editForm.category || "none"} onChange={function (e) {
+                return setEditForm(__assign(__assign({}, editForm), { category: e.target.value }));
+            }} className="p-2 bg-gray-700 text-white rounded-lg" disabled={isLoading}>
+                                <option value="none">{GALLERY_COMPLEX.UI.CATEGORY_NONE}</option>
+                                <option value="indoor">{GALLERY_COMPLEX.UI.CATEGORY_INDOOR}</option>
+                                <option value="outdoor">{GALLERY_COMPLEX.UI.CATEGORY_OUTDOOR}</option>
+                                <option value="commercial">{GALLERY_COMPLEX.UI.CATEGORY_COMMERCIAL}</option>
+                            </select>
+                            <div className="flex space-x-3">
+                                <SubmitButton type="submit" disabled={isLoading}>
+                                    {isLoading ? GALLERY_COMPLEX.BUTTONS.SAVING_BUTTON : GALLERY_COMPLEX.BUTTONS.SAVE_BUTTON}
+                                </SubmitButton>
+                                <CancelButton onClick={handleCloseEditModal}/>
+                            </div>
+                        </form>
+                    </div>
+                </motion.div>)}
+
+            {isUploadModalOpen && isAdmin && (<motion.div variants={modalVariants} initial="hidden" animate="visible" exit="exit" className="fixed inset-0 bg-black/90 flex items-center justify-center z-[10000] p-4 isolate" onClick={handleCloseUploadModal} role="dialog" aria-modal="true" aria-labelledby="upload-modal-title">
+                    <div className="relative max-w-md w-full mx-4 p-6 bg-gray-800/50 border border-gray-700/50 rounded-lg shadow-lg" onClick={function (e) { return e.stopPropagation(); }}>
+                        <CloseButton onClick={handleCloseUploadModal}>
+                            <X className="h-6 w-6 sm:h-8 sm:w-8"/>
+                        </CloseButton>
+                        <h3 id="upload-modal-title" className="text-xl font-bold text-white mb-4">
+                            {GALLERY_COMPLEX.UI.UPLOAD_MODAL_HEADING}
+                        </h3>
+                        <form onSubmit={handleUploadSubmit} className="flex flex-col space-y-4">
+                            <input type="file" accept="image/jpeg,image/png,image/gif" onChange={function (e) {
+                var _a;
+                var file = ((_a = e.target.files) === null || _a === void 0 ? void 0 : _a[0]) || null;
+                setUploadForm(__assign(__assign({}, uploadForm), { file: file }));
+            }} disabled={isLoading} className="hidden" id="image-upload"/>
+                            <label htmlFor="image-upload" className="cursor-pointer">
+                                <div className="flex items-center justify-between bg-gray-700 text-white px-4 py-2 rounded-lg">
+                                    <span>{uploadForm.file ? uploadForm.file.name : GALLERY_COMPLEX.UI.CHOOSE_IMAGE_TEXT}</span>
+                                    <Upload className="h-4 w-4"/>
+                                </div>
+                            </label>
+                            <input value={uploadForm.title} onChange={function (e) { return setUploadForm(__assign(__assign({}, uploadForm), { title: e.target.value })); }} placeholder={GALLERY_COMPLEX.UI.TITLE_PLACEHOLDER} className="p-2 bg-gray-700 text-white rounded-lg" disabled={isLoading}/>
+                            <textarea value={uploadForm.description} onChange={function (e) { return setUploadForm(__assign(__assign({}, uploadForm), { description: e.target.value })); }} placeholder={GALLERY_COMPLEX.UI.DESCRIPTION_PLACEHOLDER} className="p-2 bg-gray-700 text-white rounded-lg h-24" disabled={isLoading}/>
+                            <select value={uploadForm.category || "none"} onChange={function (e) {
+                return setUploadForm(__assign(__assign({}, uploadForm), { category: e.target.value }));
+            }} className="p-2 bg-gray-700 text-white rounded-lg" disabled={isLoading}>
+                                <option value="none">{GALLERY_COMPLEX.UI.CATEGORY_NONE}</option>
+                                <option value="indoor">{GALLERY_COMPLEX.UI.CATEGORY_INDOOR}</option>
+                                <option value="outdoor">{GALLERY_COMPLEX.UI.CATEGORY_OUTDOOR}</option>
+                                <option value="commercial">{GALLERY_COMPLEX.UI.CATEGORY_COMMERCIAL}</option>
+                            </select>
+                            <div className="flex space-x-3">
+                                <SubmitButton type="submit" disabled={isLoading || !uploadForm.file}>
+                                    {isLoading ? GALLERY_COMPLEX.BUTTONS.UPLOADING_BUTTON : GALLERY_COMPLEX.BUTTONS.UPLOAD_BUTTON}
+                                </SubmitButton>
+                                <CancelButton onClick={handleCloseUploadModal}/>
+                            </div>
+                        </form>
+                    </div>
+                </motion.div>)}
+
+            <motion.div initial={{ opacity: 0, scale: 0.8 }} animate={{ opacity: 0, scale: 0.8 }} transition={{ duration: 0.3 }} className="fixed bottom-6 right-6 z-40 pb-24"/>
+        </div>);
+}