@devvistatech/devvista-kit 0.0.9 → 0.0.10

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

@@ -1,837 +1,837 @@
-"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 { StrapiUser, UploadedImage, EditFormState, Category } from "@/components/types";
-
-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: Category
-  ) => 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<EditFormState>({
-    id: 0,
-    documentId: "",
-    title: "",
-    description: "",
-    category: "none",
-    file: null,
-  });
-  const [uploadForm, setUploadForm] = useState<{
-    file: File | null;
-    title: string;
-    description: string;
-    category: Category;
-  }>({ 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 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.removeEventListener("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",
-      file: null,
-    });
-    setIsEditModalOpen(true);
-  };
-
-  const handleCloseEditModal = () => {
-    setIsEditModalOpen(false);
-    setEditForm({ id: 0, documentId: "", title: "", description: "", category: "none", file: null });
-  };
-
-  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 formData = new FormData();
-      formData.append("documentId", editForm.documentId);
-      formData.append("title", editForm.title || `Image ${new Date().toISOString()}`);
-      formData.append("description", editForm.description || "");
-      formData.append("category", editForm.category || "none");
-      if (editForm.file) {
-        formData.append("file", editForm.file);
-      }
-
-      const response = await fetch("/api/gallery-data", {
-        method: "PUT",
-        headers: {
-          Authorization: `Bearer ${token}`,
-        },
-        body: formData,
-      });
-
-      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", file: null });
-    } 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 font-inter">
-      <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 bg-white/10 backdrop-blur-lg border-2 border-transparent shadow-xl rounded-[2rem] p-4 h-24 supports-[not(backdrop-filter:blur(10px))]:bg-white/20">
-            {["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"
-              >
-                {tab === "photos" ? GALLERY_COMPLEX.UI.PHOTOS_TAB : GALLERY_COMPLEX.UI.VIDEOS_TAB}
-              </TabsTrigger>
-            ))}
-          </TabsList>
-          <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 will-change-transform will-change-opacity"
-                            >
-                              <Card className="overflow-hidden bg-white/10 backdrop-blur-lg border-2 border-transparent shadow-xl rounded-[1.5rem] p-2 sm:p-4 relative supports-[not(backdrop-filter:blur(10px))]:bg-white/20">
-                                <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">
-            <div className="space-y-6">
-              <p className="text-center text-gray-700 font-bold text-base sm:text-lg md:text-xl">
-                {GALLERY_COMPLEX.UI.NO_VIDEOS_MESSAGE || "No videos are available"}
-              </p>
-            </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 max-[768px]:p-4 max-[768px]:max-h-[85vh]"
-            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 max-[768px]:p-4 max-[768px]:max-h-[85vh]"
-            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 max-[768px]:p-4 max-[768px]:max-h-[85vh]"
-            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">
-              <div>
-                <label htmlFor="edit-image" className="block text-sm font-medium text-gray-300 mb-1">
-                  Replace Image (optional)
-                </label>
-                <input
-                  id="edit-image"
-                  type="file"
-                  accept="image/jpeg,image/png,image/gif"
-                  onChange={(e) => setEditForm({ ...editForm, file: e.target.files?.[0] || null })}
-                  className="p-2 bg-gray-700 text-white rounded-lg w-full focus:outline-none focus:ring-2 focus:ring-blue-500"
-                  disabled={isLoading}
-                />
-                {editForm.file && (
-                  <p className="mt-2 text-gray-300 text-sm">Selected: {editForm.file.name}</p>
-                )}
-              </div>
-              <div>
-                <label htmlFor="edit-title" className="block text-sm font-medium text-gray-300 mb-1">
-                  Image Title (optional)
-                </label>
-                <input
-                  id="edit-title"
-                  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 w-full focus:outline-none focus:ring-2 focus:ring-blue-500"
-                  disabled={isLoading}
-                />
-              </div>
-              <div>
-                <label htmlFor="edit-description" className="block text-sm font-medium text-gray-300 mb-1">
-                  Image Description (optional)
-                </label>
-                <textarea
-                  id="edit-description"
-                  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 w-full h-24 focus:outline-none focus:ring-2 focus:ring-blue-500"
-                  disabled={isLoading}
-                />
-              </div>
-              <div>
-                <label htmlFor="edit-category" className="block text-sm font-medium text-gray-300 mb-1">
-                  Category
-                </label>
-                <select
-                  id="edit-category"
-                  value={editForm.category || "none"}
-                  onChange={(e) =>
-                    setEditForm({
-                      ...editForm,
-                      category: e.target.value as Category,
-                    })
-                  }
-                  className="p-2 bg-gray-700 text-white rounded-lg w-full focus:outline-none focus:ring-2 focus:ring-blue-500"
-                  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>
-              <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 max-[768px]:p-4 max-[768px]:max-h-[85vh]"
-            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"
-            >
-              <div>
-                <label htmlFor="image-upload" className="block text-sm font-medium text-gray-300 mb-1">
-                  Choose Image
-                </label>
-                <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>
-              </div>
-              <div>
-                <label htmlFor="upload-title" className="block text-sm font-medium text-gray-300 mb-1">
-                  Image Title (optional)
-                </label>
-                <input
-                  id="upload-title"
-                  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 w-full focus:outline-none focus:ring-2 focus:ring-blue-500"
-                  disabled={isLoading}
-                />
-              </div>
-              <div>
-                <label htmlFor="upload-description" className="block text-sm font-medium text-gray-300 mb-1">
-                  Image Description (optional)
-                </label>
-                <textarea
-                  id="upload-description"
-                  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 w-full h-24 focus:outline-none focus:ring-2 focus:ring-blue-500"
-                  disabled={isLoading}
-                />
-              </div>
-              <div>
-                <label htmlFor="upload-category" className="block text-sm font-medium text-gray-300 mb-1">
-                  Category
-                </label>
-                <select
-                  id="upload-category"
-                  value={uploadForm.category || "none"}
-                  onChange={(e) =>
-                    setUploadForm({
-                      ...uploadForm,
-                      category: e.target.value as Category,
-                    })
-                  }
-                  className="p-2 bg-gray-700 text-white rounded-lg w-full focus:outline-none focus:ring-2 focus:ring-blue-500"
-                  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>
-              <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>
-  );
+"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 { StrapiUser, UploadedImage, EditFormState, Category } from "@/components/types";
+
+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: Category
+  ) => 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<EditFormState>({
+    id: 0,
+    documentId: "",
+    title: "",
+    description: "",
+    category: "none",
+    file: null,
+  });
+  const [uploadForm, setUploadForm] = useState<{
+    file: File | null;
+    title: string;
+    description: string;
+    category: Category;
+  }>({ 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 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.removeEventListener("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",
+      file: null,
+    });
+    setIsEditModalOpen(true);
+  };
+
+  const handleCloseEditModal = () => {
+    setIsEditModalOpen(false);
+    setEditForm({ id: 0, documentId: "", title: "", description: "", category: "none", file: null });
+  };
+
+  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 formData = new FormData();
+      formData.append("documentId", editForm.documentId);
+      formData.append("title", editForm.title || `Image ${new Date().toISOString()}`);
+      formData.append("description", editForm.description || "");
+      formData.append("category", editForm.category || "none");
+      if (editForm.file) {
+        formData.append("file", editForm.file);
+      }
+
+      const response = await fetch("/api/gallery-data", {
+        method: "PUT",
+        headers: {
+          Authorization: `Bearer ${token}`,
+        },
+        body: formData,
+      });
+
+      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", file: null });
+    } 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 font-inter">
+      <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 bg-white/10 backdrop-blur-lg border-2 border-transparent shadow-xl rounded-[2rem] p-4 h-24 supports-[not(backdrop-filter:blur(10px))]:bg-white/20">
+            {["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"
+              >
+                {tab === "photos" ? GALLERY_COMPLEX.UI.PHOTOS_TAB : GALLERY_COMPLEX.UI.VIDEOS_TAB}
+              </TabsTrigger>
+            ))}
+          </TabsList>
+          <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 will-change-transform will-change-opacity"
+                            >
+                              <Card className="overflow-hidden bg-white/10 backdrop-blur-lg border-2 border-transparent shadow-xl rounded-[1.5rem] p-2 sm:p-4 relative supports-[not(backdrop-filter:blur(10px))]:bg-white/20">
+                                <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">
+            <div className="space-y-6">
+              <p className="text-center text-gray-700 font-bold text-base sm:text-lg md:text-xl">
+                {GALLERY_COMPLEX.UI.NO_VIDEOS_MESSAGE || "No videos are available"}
+              </p>
+            </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 max-[768px]:p-4 max-[768px]:max-h-[85vh]"
+            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 max-[768px]:p-4 max-[768px]:max-h-[85vh]"
+            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 max-[768px]:p-4 max-[768px]:max-h-[85vh]"
+            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">
+              <div>
+                <label htmlFor="edit-image" className="block text-sm font-medium text-gray-300 mb-1">
+                  Replace Image (optional)
+                </label>
+                <input
+                  id="edit-image"
+                  type="file"
+                  accept="image/jpeg,image/png,image/gif"
+                  onChange={(e) => setEditForm({ ...editForm, file: e.target.files?.[0] || null })}
+                  className="p-2 bg-gray-700 text-white rounded-lg w-full focus:outline-none focus:ring-2 focus:ring-blue-500"
+                  disabled={isLoading}
+                />
+                {editForm.file && (
+                  <p className="mt-2 text-gray-300 text-sm">Selected: {editForm.file.name}</p>
+                )}
+              </div>
+              <div>
+                <label htmlFor="edit-title" className="block text-sm font-medium text-gray-300 mb-1">
+                  Image Title (optional)
+                </label>
+                <input
+                  id="edit-title"
+                  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 w-full focus:outline-none focus:ring-2 focus:ring-blue-500"
+                  disabled={isLoading}
+                />
+              </div>
+              <div>
+                <label htmlFor="edit-description" className="block text-sm font-medium text-gray-300 mb-1">
+                  Image Description (optional)
+                </label>
+                <textarea
+                  id="edit-description"
+                  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 w-full h-24 focus:outline-none focus:ring-2 focus:ring-blue-500"
+                  disabled={isLoading}
+                />
+              </div>
+              <div>
+                <label htmlFor="edit-category" className="block text-sm font-medium text-gray-300 mb-1">
+                  Category
+                </label>
+                <select
+                  id="edit-category"
+                  value={editForm.category || "none"}
+                  onChange={(e) =>
+                    setEditForm({
+                      ...editForm,
+                      category: e.target.value as Category,
+                    })
+                  }
+                  className="p-2 bg-gray-700 text-white rounded-lg w-full focus:outline-none focus:ring-2 focus:ring-blue-500"
+                  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>
+              <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 max-[768px]:p-4 max-[768px]:max-h-[85vh]"
+            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"
+            >
+              <div>
+                <label htmlFor="image-upload" className="block text-sm font-medium text-gray-300 mb-1">
+                  Choose Image
+                </label>
+                <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>
+              </div>
+              <div>
+                <label htmlFor="upload-title" className="block text-sm font-medium text-gray-300 mb-1">
+                  Image Title (optional)
+                </label>
+                <input
+                  id="upload-title"
+                  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 w-full focus:outline-none focus:ring-2 focus:ring-blue-500"
+                  disabled={isLoading}
+                />
+              </div>
+              <div>
+                <label htmlFor="upload-description" className="block text-sm font-medium text-gray-300 mb-1">
+                  Image Description (optional)
+                </label>
+                <textarea
+                  id="upload-description"
+                  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 w-full h-24 focus:outline-none focus:ring-2 focus:ring-blue-500"
+                  disabled={isLoading}
+                />
+              </div>
+              <div>
+                <label htmlFor="upload-category" className="block text-sm font-medium text-gray-300 mb-1">
+                  Category
+                </label>
+                <select
+                  id="upload-category"
+                  value={uploadForm.category || "none"}
+                  onChange={(e) =>
+                    setUploadForm({
+                      ...uploadForm,
+                      category: e.target.value as Category,
+                    })
+                  }
+                  className="p-2 bg-gray-700 text-white rounded-lg w-full focus:outline-none focus:ring-2 focus:ring-blue-500"
+                  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>
+              <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>
+  );
 }