@devvistatech/devvista-kit 0.0.1

package/components/addOns/functional/galleries/GalleryComplex.tsx

@@ -0,0 +1,908 @@
+"use client";
+
+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";
+
+interface StrapiUser {
+    id: number;
+    username: string;
+    email: string;
+    businessAdminId?: string;
+}
+
+interface UploadedImage {
+    id: number;
+    documentId: string;
+    title?: string;
+    description?: string;
+    url: string;
+    createdAt: string;
+    category?: "none" | "indoor" | "outdoor" | "commercial";
+}
+
+interface GallerySectionProps {
+    user: StrapiUser | null;
+    setUser: (user: StrapiUser | null) => void;
+    authLoading: boolean;
+    uploadedImages: UploadedImage[];
+    setUploadedImages: (images: UploadedImage[]) => void;
+    error: string | null;
+    setError: (error: string | null) => void;
+    isLoading: boolean;
+    setIsLoading: (isLoading: boolean) => void;
+    handleImageUpload: (
+        e: React.FormEvent<HTMLFormElement>,
+        file: File | null,
+        title: string,
+        description: string,
+        category: "none" | "indoor" | "outdoor" | "commercial"
+    ) => Promise<void>;
+    handleDeleteImage: (documentId: string) => Promise<void>;
+}
+
+export function GallerySection({
+    user,
+    setUser,
+    authLoading,
+    uploadedImages,
+    setUploadedImages,
+    error,
+    setError,
+    isLoading,
+    setIsLoading,
+    handleImageUpload,
+    handleDeleteImage,
+}: GallerySectionProps) {
+    const { isSignedIn } = useUser();
+    const { getToken } = useAuth();
+    const { checkSession } = useStrapiAuth();
+    const isAdmin = isSignedIn && !!user?.businessAdminId || false;
+    const [activeTab, setActiveTab] = useState("photos");
+    const [activeSubTab, setActiveSubTab] = useState("all");
+    const [selectedImage, setSelectedImage] = useState<UploadedImage | null>(null);
+    const [isMobile, setIsMobile] = useState(false);
+    const [visiblePhotos, setVisiblePhotos] = useState(12);
+    const [isConfirmDeleteOpen, setIsConfirmDeleteOpen] = useState(false);
+    const [documentIdToDelete, setDocumentIdToDelete] = useState<string | null>(null);
+    const [isEditModalOpen, setIsEditModalOpen] = useState(false);
+    const [isUploadModalOpen, setIsUploadModalOpen] = useState(false);
+    const [editForm, setEditForm] = useState<{
+        id: number;
+        documentId: string;
+        title: string;
+        description: string;
+        category?: "none" | "indoor" | "outdoor" | "commercial";
+    }>({ id: 0, documentId: "", title: "", description: "", category: "none" });
+    const [uploadForm, setUploadForm] = useState<{
+        file: File | null;
+        title: string;
+        description: string;
+        category?: "none" | "indoor" | "outdoor" | "commercial";
+    }>({ file: null, title: "", description: "", category: "none" });
+    const containerRef = useRef<HTMLDivElement>(null);
+    const { scrollYProgress } = useScroll({
+        target: containerRef,
+        offset: ["start end", "end start"],
+    });
+    const parallaxY = useTransform(scrollYProgress, [0, 1], [0, -50]);
+
+    const videos = GALLERY_COMPLEX.UI.VIDEO_TITLES.map((title, index) => ({
+        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,
+    }));
+
+    const filteredImages = activeTab === "photos"
+        ? activeSubTab === "all"
+            ? uploadedImages
+            : uploadedImages.filter((img) => (img.category || "none") === activeSubTab)
+        : uploadedImages.filter((img) => (img.category || "none") === activeTab);
+
+    useEffect(() => {
+        const handleLogin = () => checkSession();
+        const handleLogout = () => checkSession();
+        window.addEventListener("user-login", handleLogin);
+        window.addEventListener("user-logout", handleLogout);
+        return () => {
+            window.removeEventListener("user-login", handleLogin);
+            window.removeEventListener("user-logout", handleLogout);
+        };
+    }, [checkSession]);
+
+    useEffect(() => {
+        const checkMobile = () => setIsMobile(window.innerWidth < 768);
+        checkMobile();
+        window.addEventListener("resize", checkMobile);
+        return () => window.removeEventListener("resize", checkMobile);
+    }, []);
+
+    useEffect(() => {
+        if (selectedImage || isConfirmDeleteOpen || isEditModalOpen || isUploadModalOpen) {
+            document.body.classList.add("overflow-hidden");
+        } else {
+            document.body.classList.remove("overflow-hidden");
+        }
+        return () => {
+            document.body.classList.remove("overflow-hidden");
+        };
+    }, [selectedImage, isConfirmDeleteOpen, isEditModalOpen, isUploadModalOpen]);
+
+    useEffect(() => {
+        const event = new CustomEvent("modalStateChange", {
+            detail: { isOpen: !!selectedImage || isConfirmDeleteOpen || isEditModalOpen || isUploadModalOpen },
+        });
+        window.dispatchEvent(event);
+    }, [selectedImage, isConfirmDeleteOpen, isEditModalOpen, isUploadModalOpen]);
+
+    useEffect(() => {
+        const handleEsc = (e: KeyboardEvent) => {
+            if (e.key === "Escape") {
+                if (isConfirmDeleteOpen) {
+                    handleCancelDelete();
+                } else if (selectedImage) {
+                    handleCloseModal();
+                } else if (isEditModalOpen) {
+                    handleCloseEditModal();
+                } else if (isUploadModalOpen) {
+                    handleCloseUploadModal();
+                }
+            }
+        };
+        window.addEventListener("keydown", handleEsc);
+        return () => window.removeEventListener("keydown", handleEsc);
+    }, [isConfirmDeleteOpen, selectedImage, isEditModalOpen, isUploadModalOpen]);
+
+    const openConfirmDelete = (documentId: string) => {
+        if (!isAdmin) {
+            setError(GALLERY_COMPLEX.ERRORS.UNAUTHORIZED_DELETE);
+            return;
+        }
+        setDocumentIdToDelete(documentId);
+        setIsConfirmDeleteOpen(true);
+    };
+
+    const handleConfirmDelete = async () => {
+        if (!isAdmin) {
+            setError(GALLERY_COMPLEX.ERRORS.UNAUTHORIZED_DELETE);
+            setIsConfirmDeleteOpen(false);
+            return;
+        }
+        if (documentIdToDelete !== null) {
+            setIsLoading(true);
+            try {
+                await handleDeleteImage(documentIdToDelete);
+            } finally {
+                setIsLoading(false);
+                setIsConfirmDeleteOpen(false);
+                setDocumentIdToDelete(null);
+            }
+        }
+    };
+
+    const handleCancelDelete = () => {
+        setIsConfirmDeleteOpen(false);
+        setDocumentIdToDelete(null);
+    };
+
+    const handleImageClick = (image: UploadedImage) => {
+        setSelectedImage(image);
+    };
+
+    const handleCloseModal = () => {
+        setSelectedImage(null);
+    };
+
+    const openEditModal = (image: UploadedImage) => {
+        if (!isAdmin) {
+            setError(GALLERY_COMPLEX.ERRORS.UNAUTHORIZED_EDIT);
+            return;
+        }
+        setEditForm({
+            id: image.id,
+            documentId: image.documentId,
+            title: image.title?.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);
+    };
+
+    const handleCloseEditModal = () => {
+        setIsEditModalOpen(false);
+        setEditForm({ id: 0, documentId: "", title: "", description: "", category: "none" });
+    };
+
+    const handleCloseUploadModal = () => {
+        setIsUploadModalOpen(false);
+        setUploadForm({ file: null, title: "", description: "", category: "none" });
+    };
+
+    const handleEditImage = async (e: React.FormEvent<HTMLFormElement>) => {
+        e.preventDefault();
+        if (!isAdmin) {
+            console.error("GallerySection: Unauthorized edit attempt", {
+                isSignedIn,
+                businessAdminId: user?.businessAdminId,
+            });
+            setError(GALLERY_COMPLEX.ERRORS.UNAUTHORIZED_EDIT);
+            return;
+        }
+
+        try {
+            setIsLoading(true);
+            const token = await getToken();
+            if (!token) {
+                console.error("GallerySection: No authentication token available");
+                setError(GALLERY_COMPLEX.ERRORS.AUTHENTICATION_ERROR);
+                setUser(null);
+                return;
+            }
+
+            const payload = {
+                documentId: editForm.documentId,
+                title: editForm.title || `Image ${new Date().toISOString()}`,
+                description: editForm.description || "",
+                category: editForm.category || "none",
+            };
+
+            const response = await fetch("/api/gallery-data", {
+                method: "PUT",
+                headers: {
+                    "Content-Type": "application/json",
+                    Authorization: `Bearer ${token}`,
+                },
+                body: JSON.stringify(payload),
+            });
+
+            if (!response.ok) {
+                const errorData = await response.json();
+                console.error("GallerySection: Edit failed", { status: response.status, errorData });
+                if (response.status === 401) {
+                    setError(GALLERY_COMPLEX.ERRORS.AUTHENTICATION_ERROR);
+                    setUser(null);
+                    return;
+                }
+                throw new Error(errorData.error || GALLERY_COMPLEX.ERRORS.EDIT_FAILED_STATUS.replace("${response.status}", response.status.toString()));
+            }
+
+            const { data } = await response.json();
+            setUploadedImages(data || []);
+            setError(null);
+            setIsEditModalOpen(false);
+            setEditForm({ id: 0, documentId: "", title: "", description: "", category: "none" });
+        } catch (err) {
+            console.error("GallerySection: Edit Error", err);
+            setError(err instanceof Error ? err.message : GALLERY_COMPLEX.ERRORS.EDIT_FAILED);
+        } finally {
+            setIsLoading(false);
+        }
+    };
+
+    const handleUploadSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
+        e.preventDefault();
+        if (!isAdmin) {
+            console.error("GallerySection: Unauthorized upload attempt", {
+                isSignedIn,
+                businessAdminId: user?.businessAdminId,
+            });
+            setError(GALLERY_COMPLEX.ERRORS.UNAUTHORIZED_UPLOAD);
+            return;
+        }
+        setIsLoading(true);
+        try {
+            await handleImageUpload(
+                e,
+                uploadForm.file,
+                uploadForm.title,
+                uploadForm.description,
+                uploadForm.category || "none"
+            );
+            setUploadForm({ file: null, title: "", description: "", category: "none" });
+            setIsUploadModalOpen(false);
+        } catch (err) {
+            console.error("GallerySection: Upload Error", err);
+            setError(err instanceof Error ? err.message : GALLERY_COMPLEX.ERRORS.UPLOAD_FAILED);
+        } finally {
+            setIsLoading(false);
+        }
+    };
+
+    const loadMore = () => {
+        setVisiblePhotos((prev) => prev + 12);
+    };
+
+    const sectionVariants = {
+        hidden: { opacity: 0 },
+        visible: {
+            opacity: 1,
+            transition: { duration: 0.8, ease: [0.16, 1, 0.3, 1], staggerChildren: 0.1 },
+        },
+    };
+
+    const cardVariants = {
+        hidden: { opacity: 0, y: 30 },
+        visible: {
+            opacity: 1,
+            y: 0,
+            transition: { duration: 0.5 },
+        },
+    };
+
+    const 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>{`
+                :root {
+                    --jubilee: #F47C7C;
+                    --exuberant-blue: #FF69B4;
+                    --modern-purple: #D946EF;
+                }
+
+                .glassmorphism {
+                    background: rgba(255, 255, 255, 0.08);
+                    backdrop-filter: blur(10px);
+                    -webkit-backdrop-filter: blur(10px);
+                    border: 2px solid transparent;
+                    border-image: linear-gradient(45deg, var(--exuberant-blue), var(--jubilee), var(--modern-purple)) 1;
+                    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.1);
+                }
+
+                .modal-glassmorphism {
+                    background: rgba(255, 255, 255, 0.08);
+                    backdrop-filter: blur(10px);
+                    -webkit-backdrop-filter: blur(10px);
+                    border: 2px solid transparent;
+                    border-image: linear-gradient(45deg, var(--exuberant-blue), var(--jubilee), var(--modern-purple)) 1;
+                    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.1);
+                    border-radius: 2rem;
+                    max-height: 90vh;
+                    overflow: hidden;
+                }
+
+                @supports not (backdrop-filter: blur(10px)) {
+                    .glassmorphism {
+                        background: rgba(255, 255, 255, 0.2);
+                    }
+                    .modal-glassmorphism {
+                        background: rgba(255, 255, 255, 0.2);
+                    }
+                }
+
+                @media (max-width: 768px) {
+                    .glassmorphism {
+                        backdrop-filter: none;
+                        background: rgba(255, 255, 255, 0.2);
+                    }
+                    .modal-glassmorphism {
+                        padding: 1rem;
+                        max-height: 85vh;
+                    }
+                }
+
+                .motion-card {
+                    will-change: transform, opacity;
+                }
+            `}</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={(value) => 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((tab) => (
+                            <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={(value) => setActiveSubTab(value)}>
+                            {isMobile ? (
+                                <div className="flex justify-center mb-6 max-w-2xl mx-auto">
+                                    <select
+                                        value={activeSubTab}
+                                        onChange={(e) => 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((subTab) => (
+                                            <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((subTab) => (
+                                        <FilterButton
+                                            key={subTab}
+                                            isActive={activeSubTab === subTab}
+                                            useBlueActive={true}
+                                            onClick={() => 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((subTab) => (
+                                <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={() => 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((image, index) => (
+                                                        <motion.div
+                                                            key={image.documentId}
+                                                            variants={cardVariants}
+                                                            initial="hidden"
+                                                            whileInView="visible"
+                                                            viewport={{ once: true, amount: 0.2 }}
+                                                            onClick={() => 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={
+                                                                            image.title?.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={(e) => {
+                                                                                e.stopPropagation();
+                                                                                openEditModal(image);
+                                                                            }}
+                                                                        />
+                                                                        <TrashIconButton
+                                                                            onClick={(e) => {
+                                                                                e.stopPropagation();
+                                                                                openConfirmDelete(image.documentId);
+                                                                            }}
+                                                                        />
+                                                                    </div>
+                                                                )}
+                                                                {(image.title?.trim() &&
+                                                                    !image.title.match(/Image \d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}\.\d{3}Z/) ||
+                                                                    image.description?.trim()) && (
+                                                                        <div className="p-4">
+                                                                            {image.title?.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>
+                                                                                )}
+                                                                            {image.description?.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((video, index) => (
+                                <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={(e) => 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={
+                                    selectedImage.title?.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}
+                            />
+                            {(selectedImage.title?.trim() &&
+                                !selectedImage.title.match(/Image \d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}\.\d{3}Z/) ||
+                                selectedImage.description?.trim()) && (
+                                    <div className="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/80 to-transparent p-3 sm:p-4">
+                                        {selectedImage.title?.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>
+                                            )}
+                                        {selectedImage.description?.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={(e) => 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={(e) => 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={(e) => setEditForm({ ...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={(e) => setEditForm({ ...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={(e) =>
+                                    setEditForm({
+                                        ...editForm,
+                                        category: e.target.value as "none" | "indoor" | "outdoor" | "commercial",
+                                    })
+                                }
+                                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={(e) => 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={(e) => {
+                                    const file = e.target.files?.[0] || null;
+                                    setUploadForm({ ...uploadForm, 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={(e) => setUploadForm({ ...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={(e) => setUploadForm({ ...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={(e) =>
+                                    setUploadForm({
+                                        ...uploadForm,
+                                        category: e.target.value as "none" | "indoor" | "outdoor" | "commercial",
+                                    })
+                                }
+                                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>
+    );
+}