@devvistatech/devvista-kit 0.0.12 → 0.0.13

package/components/addOns/functional/ProductList.tsx

@@ -0,0 +1,1027 @@
+"use client";
+
+import { useState, useEffect, useRef } from "react";
+import {
+    ActionButton,
+    EditIconButton,
+    TrashIconButton,
+    CloseButton,
+    SubmitButton,
+    CancelButton,
+    DeleteButton,
+} from "@/components/other/button";
+import { Card } from "@/components/other/card";
+import Image from "next/image";
+import { Upload, X } from "lucide-react";
+import { motion, useScroll, useTransform, Variants } from "framer-motion";
+import { useAuth, useUser } from "@clerk/nextjs";
+import { isAdminUser } from "@/lib/auth/auth-utils";
+import { StrapiUser, UploadedImage, FormState, EditFormState, Category } from "@/lib/types";
+import { compressImage } from "@/lib/utils/compressImage";
+import { PRODUCT_DESC } from "./carousels/constants.ts/productDescCarousel";
+
+const getValidCategory = (category: string | undefined, fallback: Category): Category => {
+    const VALID_CATEGORIES: Category[] = [
+        "none",
+        "indoor",
+        "outdoor",
+        "commercial",
+    ];
+    return category && VALID_CATEGORIES.includes(category as Category) ? (category as Category) : fallback;
+};
+
+const validateSubCategory = (subCategory: string): string | null => {
+    if (!subCategory.trim()) return PRODUCT_DESC.ERRORS.SUBCATEGORY_EMPTY;
+    if (subCategory.toLowerCase() === "none") return PRODUCT_DESC.ERRORS.SUBCATEGORY_INVALID;
+    if (subCategory.length > 50) return PRODUCT_DESC.ERRORS.SUBCATEGORY_TOO_LONG;
+    if (!/^[a-zA-Z0-9\s\-]+$/.test(subCategory)) return PRODUCT_DESC.ERRORS.SUBCATEGORY_INVALID;
+    return null;
+};
+
+interface ProductListProps {
+    user: StrapiUser | null;
+    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,
+        subCategory: string
+    ) => Promise<void>;
+    handleDeleteImage: (documentId: string) => Promise<void>;
+    visibleCategories?: string[];
+    category: Category; 
+    visibleSubCategories: string[];
+    setVisibleSubCategories: (subCategories: string[]) => void;
+}
+
+interface ModalState {
+    upload: boolean;
+    edit: boolean;
+    delete: boolean;
+    view: boolean;
+    documentIdToDelete: string | null;
+    selectedImage: UploadedImage | null;
+}
+
+const modalVariants: Variants = {
+    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" } },
+};
+
+const cardVariants: Variants = {
+    hidden: { opacity: 0, y: 20 },
+    visible: { opacity: 1, y: 0, transition: { duration: 0.5, ease: [0.16, 1, 0.3, 1] } },
+};
+
+// Upload Modal Component
+const UploadModal = ({
+    isOpen,
+    onClose,
+    uploadForm,
+    setUploadForm,
+    isSubmitting,
+    setIsSubmitting,
+    handleImageUpload,
+    error,
+    setError,
+    visibleCategories = ["butcherblock"],
+    visibleSubCategories = [],
+    setVisibleSubCategories,
+    category,
+}: {
+    isOpen: boolean;
+    onClose: () => void;
+    uploadForm: FormState;
+    setUploadForm: React.Dispatch<React.SetStateAction<FormState>>;
+    isSubmitting: boolean;
+    setIsSubmitting: React.Dispatch<React.SetStateAction<boolean>>;
+    handleImageUpload: (
+        e: React.FormEvent<HTMLFormElement>,
+        file: File | null,
+        title: string,
+        description: string,
+        category: Category,
+        subCategory: string
+    ) => Promise<void>;
+    error: string | null;
+    setError: (error: string | null) => void;
+    visibleCategories?: string[];
+    visibleSubCategories?: string[];
+    setVisibleSubCategories: (subCategories: string[]) => void;
+    category: Category;
+}) => {
+    const [subCategoryError, setSubCategoryError] = useState<string | null>(null);
+
+    if (!isOpen) return null;
+
+    const handleSubCategoryChange = (value: string) => {
+        setUploadForm({ ...uploadForm, subCategory: value });
+        const error = validateSubCategory(value);
+        setSubCategoryError(error);
+    };
+
+    const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
+        e.preventDefault();
+        const error = validateSubCategory(uploadForm.subCategory);
+        if (error) {
+            setSubCategoryError(error);
+            return;
+        }
+        setIsSubmitting(true);
+        try {
+            const compressedFile = uploadForm.file ? await compressImage(uploadForm.file) : null;
+            await handleImageUpload(
+                e,
+                compressedFile,
+                uploadForm.title,
+                uploadForm.description,
+                category, 
+                uploadForm.subCategory
+            );
+            if (uploadForm.subCategory && !visibleSubCategories.includes(uploadForm.subCategory)) {
+                setVisibleSubCategories([...visibleSubCategories, uploadForm.subCategory]);
+            }
+            onClose();
+        } catch (err) {
+            console.error("Upload error in UploadModal:", { error: err instanceof Error ? err.message : "Unknown error", timestamp: new Date().toISOString() });
+            setError(err instanceof Error ? err.message : PRODUCT_DESC.ERRORS.UPLOAD_FAILED);
+        } finally {
+            setIsSubmitting(false);
+        }
+    };
+
+    return (
+        <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={onClose}
+            aria-modal="true"
+            role="dialog"
+        >
+            <div
+                className="relative max-w-5xl w-full mx-4 p-6 bg-gray-800/50 border border-gray-700/50 rounded-lg shadow-lg max-h-[90vh] overflow-y-auto"
+                onClick={(e) => e.stopPropagation()}
+            >
+                <CloseButton onClick={onClose}>
+                    <X className="h-6 w-6 sm:h-8 sm:w-8" />
+                </CloseButton>
+                <h3 className="text-xl font-bold text-white mb-4">{PRODUCT_DESC.UI.UPLOAD_MODAL_HEADING}</h3>
+                <form onSubmit={handleSubmit} className="space-y-4">
+                    <div>
+                        <label htmlFor="image-upload" className="block text-sm font-medium text-gray-300 mb-1">
+                            {PRODUCT_DESC.UI.CHOOSE_IMAGE_LABEL}
+                        </label>
+                        <input
+                            type="file"
+                            accept="image/jpeg,image/png,image/gif"
+                            onChange={(e) => setUploadForm({ ...uploadForm, file: e.target.files?.[0] || null })}
+                            className="w-full p-2 rounded bg-gray-700 text-white border border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm"
+                            id="image-upload"
+                            required
+                        />
+                        {uploadForm.file && (
+                            <p className="mt-2 text-gray-300 text-sm">{PRODUCT_DESC.UI.SELECTED_IMAGE_TEXT.replace("${formImage.name}", uploadForm.file.name)}</p>
+                        )}
+                    </div>
+                    <div>
+                        <label htmlFor="image-title" className="block text-sm font-medium text-gray-300 mb-1">
+                            {PRODUCT_DESC.UI.TITLE_LABEL}
+                        </label>
+                        <input
+                            id="image-title"
+                            value={uploadForm.title}
+                            onChange={(e) => setUploadForm({ ...uploadForm, title: e.target.value })}
+                            placeholder={PRODUCT_DESC.UI.TITLE_PLACEHOLDER}
+                            className="w-full p-2 rounded bg-gray-700 text-white border border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm"
+                            required
+                        />
+                    </div>
+                    <div>
+                        <label htmlFor="image-description" className="block text-sm font-medium text-gray-300 mb-1">
+                            {PRODUCT_DESC.UI.DESCRIPTION_LABEL}
+                        </label>
+                        <textarea
+                            id="image-description"
+                            value={uploadForm.description}
+                            onChange={(e) => setUploadForm({ ...uploadForm, description: e.target.value })}
+                            placeholder={PRODUCT_DESC.UI.DESCRIPTION_PLACEHOLDER}
+                            className="w-full p-2 rounded bg-gray-700 text-white border border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm min-h-[80px]"
+                            required
+                        />
+                    </div>
+                    <div>
+                        <label htmlFor="image-category" className="block text-sm font-medium text-gray-300 mb-1">
+                            {PRODUCT_DESC.UI.CATEGORY_LABEL}
+                        </label>
+                        <select
+                            id="image-category"
+                            value={uploadForm.category}
+                            onChange={(e) =>
+                                setUploadForm({
+                                    ...uploadForm,
+                                    category: e.target.value as Category,
+                                })
+                            }
+                            className="w-full p-2 rounded bg-gray-700 text-white border border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm"
+                            required
+                        >
+                            {visibleCategories.map((category) => (
+                                <option key={category} value={category}>
+                                    {category
+                                        .split("-")
+                                        .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+                                        .join(" ")}
+                                </option>
+                            ))}
+                        </select>
+                    </div>
+                    <div>
+                        <label htmlFor="image-subcategory" className="block text-sm font-medium text-gray-300 mb-1">
+                            {PRODUCT_DESC.UI.SUBCATEGORY_LABEL}
+                        </label>
+                        <input
+                            id="image-subcategory"
+                            type="text"
+                            value={uploadForm.subCategory}
+                            onChange={(e) => handleSubCategoryChange(e.target.value)}
+                            placeholder={PRODUCT_DESC.UI.SUBCATEGORY_PLACEHOLDER}
+                            className="w-full p-2 pr-8 rounded bg-gray-700 text-white border border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm"
+                            autoComplete="off"
+                            name="product-subcategory"
+                            required
+                        />
+                        {subCategoryError && <p className="text-red-400 text-sm font-medium mt-1 w-full text-left">{subCategoryError}</p>}
+                    </div>
+                    <div className="flex flex-col sm:flex-row space-y-2 sm:space-y-0 sm:space-x-3">
+                        <SubmitButton
+                            type="submit"
+                            disabled={isSubmitting || !uploadForm.file || !uploadForm.title.trim() || !uploadForm.description.trim() || !uploadForm.category || !uploadForm.subCategory.trim() || !!subCategoryError}
+                        >
+                            {isSubmitting ? PRODUCT_DESC.BUTTONS.UPLOADING_BUTTON : PRODUCT_DESC.BUTTONS.UPLOAD_BUTTON}
+                        </SubmitButton>
+                        <CancelButton onClick={onClose} />
+                    </div>
+                    {error && <p className="text-red-400 text-sm font-medium">{error}</p>}
+                </form>
+            </div>
+        </motion.div>
+    );
+};
+
+// Edit Modal Component
+const EditModal = ({
+    isOpen,
+    onClose,
+    editForm,
+    setEditForm,
+    isSubmitting,
+    setIsSubmitting,
+    handleEditImage,
+    error,
+    setError,
+    visibleCategories = ["butcherblock"],
+    visibleSubCategories = [],
+    setVisibleSubCategories,
+    category,
+}: {
+    isOpen: boolean;
+    onClose: () => void;
+    editForm: EditFormState;
+    setEditForm: React.Dispatch<React.SetStateAction<EditFormState>>;
+    isSubmitting: boolean;
+    setIsSubmitting: React.Dispatch<React.SetStateAction<boolean>>;
+    handleEditImage: (e: React.FormEvent<HTMLFormElement>, subCategory: string) => Promise<void>;
+    error: string | null;
+    setError: (error: string | null) => void;
+    visibleCategories?: string[];
+    visibleSubCategories?: string[];
+    setVisibleSubCategories: (subCategories: string[]) => void;
+    category: Category;
+}) => {
+    const [subCategoryError, setSubCategoryError] = useState<string | null>(null);
+
+    if (!isOpen) return null;
+
+    const handleSubCategoryChange = (value: string) => {
+        setEditForm({ ...editForm, subCategory: value });
+        const error = validateSubCategory(value);
+        setSubCategoryError(error);
+    };
+
+    const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
+        e.preventDefault();
+        const error = validateSubCategory(editForm.subCategory);
+        if (error) {
+            setSubCategoryError(error);
+            return;
+        }
+        setIsSubmitting(true);
+        try {
+            await handleEditImage(e, editForm.subCategory);
+            if (editForm.subCategory && !visibleSubCategories.includes(editForm.subCategory)) {
+                setVisibleSubCategories([...visibleSubCategories, editForm.subCategory]);
+            }
+            onClose();
+        } catch (err) {
+            console.error("Edit error in EditModal:", { error: err instanceof Error ? err.message : "Unknown error", timestamp: new Date().toISOString() });
+            setError(err instanceof Error ? err.message : PRODUCT_DESC.ERRORS.EDIT_FAILED);
+        } finally {
+            setIsSubmitting(false);
+        }
+    };
+
+    return (
+        <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={onClose}
+            aria-modal="true"
+            role="dialog"
+        >
+            <div
+                className="relative max-w-5xl w-full mx-4 p-6 bg-gray-800/50 border border-gray-700/50 rounded-lg shadow-lg max-h-[90vh] overflow-y-auto"
+                onClick={(e) => e.stopPropagation()}
+            >
+                <CloseButton onClick={onClose}>
+                    <X className="h-6 w-6 sm:h-8 sm:w-8" />
+                </CloseButton>
+                <h3 className="text-xl font-bold text-white mb-4">{PRODUCT_DESC.UI.EDIT_MODAL_HEADING}</h3>
+                <form onSubmit={handleSubmit} className="space-y-4">
+                    <div>
+                        <label htmlFor="edit-image" className="block text-sm font-medium text-gray-300 mb-1">
+                            {PRODUCT_DESC.UI.REPLACE_IMAGE_LABEL}
+                        </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="w-full p-2 rounded bg-gray-700 text-white border border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm"
+                        />
+                        {editForm.file && (
+                            <p className="mt-2 text-gray-300 text-sm">{PRODUCT_DESC.UI.SELECTED_IMAGE_TEXT.replace("${formImage.name}", editForm.file.name)}</p>
+                        )}
+                    </div>
+                    <div>
+                        <label htmlFor="edit-title" className="block text-sm font-medium text-gray-300 mb-1">
+                            {PRODUCT_DESC.UI.TITLE_LABEL}
+                        </label>
+                        <input
+                            id="edit-title"
+                            value={editForm.title}
+                            onChange={(e) => setEditForm({ ...editForm, title: e.target.value })}
+                            placeholder={PRODUCT_DESC.UI.TITLE_PLACEHOLDER}
+                            className="w-full p-2 rounded bg-gray-700 text-white border border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm"
+                            required
+                        />
+                    </div>
+                    <div>
+                        <label htmlFor="edit-description" className="block text-sm font-medium text-gray-300 mb-1">
+                            {PRODUCT_DESC.UI.DESCRIPTION_LABEL}
+                        </label>
+                        <textarea
+                            id="edit-description"
+                            value={editForm.description}
+                            onChange={(e) => setEditForm({ ...editForm, description: e.target.value })}
+                            placeholder={PRODUCT_DESC.UI.DESCRIPTION_PLACEHOLDER}
+                            className="w-full p-2 rounded bg-gray-700 text-white border border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm min-h-[80px]"
+                            required
+                        />
+                    </div>
+                    <div>
+                        <label htmlFor="edit-category" className="block text-sm font-medium text-gray-300 mb-1">
+                            {PRODUCT_DESC.UI.CATEGORY_LABEL}
+                        </label>
+                        <select
+                            id="edit-category"
+                            value={editForm.category}
+                            onChange={(e) =>
+                                setEditForm({
+                                    ...editForm,
+                                    category: e.target.value as Category,
+                                })
+                            }
+                            className="w-full p-2 rounded bg-gray-700 text-white border border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm"
+                            required
+                        >
+                            {visibleCategories.map((category) => (
+                                <option key={category} value={category}>
+                                    {category
+                                        .split("-")
+                                        .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+                                        .join(" ")}
+                                </option>
+                            ))}
+                        </select>
+                    </div>
+                    <div>
+                        <label htmlFor="edit-subcategory" className="block text-sm font-medium text-gray-300 mb-1">
+                            {PRODUCT_DESC.UI.SUBCATEGORY_LABEL}
+                        </label>
+                        <input
+                            id="edit-subcategory"
+                            type="text"
+                            value={editForm.subCategory}
+                            onChange={(e) => handleSubCategoryChange(e.target.value)}
+                            placeholder={PRODUCT_DESC.UI.SUBCATEGORY_PLACEHOLDER}
+                            className="w-full p-2 pr-8 rounded bg-gray-700 text-white border border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm"
+                            autoComplete="off"
+                            name="product-subcategory"
+                            required
+                        />
+                        {subCategoryError && <p className="text-red-400 text-sm font-medium mt-1 w-full text-left">{subCategoryError}</p>}
+                    </div>
+                    <div className="flex flex-col sm:flex-row space-y-2 sm:space-y-0 sm:space-x-3">
+                        <SubmitButton
+                            type="submit"
+                            disabled={isSubmitting || !editForm.title.trim() || !editForm.description.trim() || !editForm.category || !editForm.subCategory.trim() || !!subCategoryError}
+                        >
+                            {isSubmitting ? PRODUCT_DESC.BUTTONS.SAVING_BUTTON : PRODUCT_DESC.BUTTONS.SAVE_BUTTON}
+                        </SubmitButton>
+                        <CancelButton onClick={onClose} />
+                    </div>
+                    {error && <p className="text-red-400 text-sm font-medium">{error}</p>}
+                </form>
+            </div>
+        </motion.div>
+    );
+};
+
+// Delete Confirmation Modal Component (Unchanged)
+const DeleteModal = ({
+    isOpen,
+    onClose,
+    onConfirm,
+    isSubmitting,
+}: {
+    isOpen: boolean;
+    onClose: () => void;
+    onConfirm: () => Promise<void>;
+    isSubmitting: boolean;
+}) => {
+    if (!isOpen) return null;
+
+    return (
+        <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={onClose}
+            aria-modal="true"
+            role="dialog"
+        >
+            <div
+                className="relative max-w-sm w-full mx-4 p-6 bg-gray-800/50 border border-gray-700/50 rounded-lg shadow-lg max-h-[90vh] overflow-y-auto"
+                onClick={(e) => e.stopPropagation()}
+            >
+                <CloseButton onClick={onClose}>
+                    <X className="h-6 w-6 sm:h-8 sm:w-8" />
+                </CloseButton>
+                <h3 className="text-xl font-bold text-white mb-4">{PRODUCT_DESC.UI.DELETE_MODAL_HEADING}</h3>
+                <p className="text-gray-300 mb-6">{PRODUCT_DESC.UI.DELETE_CONFIRMATION_MESSAGE}</p>
+                <div className="flex flex-col sm:flex-row space-y-2 sm:space-y-0 sm:space-x-3">
+                    <DeleteButton onClick={onConfirm} disabled={isSubmitting}>
+                        {isSubmitting ? PRODUCT_DESC.BUTTONS.DELETING_BUTTON : PRODUCT_DESC.BUTTONS.DELETE_BUTTON}
+                    </DeleteButton>
+                    <CancelButton onClick={onClose} />
+                </div>
+            </div>
+        </motion.div>
+    );
+};
+
+// View Image Modal Component (Unchanged)
+const ViewImageModal = ({
+    isOpen,
+    onClose,
+    selectedImage,
+}: {
+    isOpen: boolean;
+    onClose: () => void;
+    selectedImage: UploadedImage | null;
+}) => {
+    if (!isOpen || !selectedImage) return null;
+
+    return (
+        <motion.div
+            variants={modalVariants}
+            initial="hidden"
+            animate="visible"
+            exit="exit"
+            className="fixed inset-0 bg-black/90 flex items-center justify-center z-[10001] p-2 sm:p-4 isolate"
+            onClick={onClose}
+            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={onClose}>
+                    <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 || PRODUCT_DESC.UI.DEFAULT_IMAGE_ALT}
+                        fill
+                        className="object-contain rounded-2xl"
+                        quality={85}
+                    />
+                    {(selectedImage.title || selectedImage.description) && (
+                        <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 && (
+                                <h3 className="text-lg sm:text-xl md:text-2xl font-bold text-white drop-shadow-lg">
+                                    {selectedImage.title}
+                                </h3>
+                            )}
+                            {selectedImage.description && (
+                                <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>
+    );
+};
+
+// Main Component
+export function ProductList({
+    user,
+    uploadedImages,
+    setUploadedImages,
+    error,
+    setError,
+    isLoading,
+    setIsLoading,
+    handleImageUpload,
+    handleDeleteImage,
+    visibleCategories = ["butcherblock"],
+    category, // Use dynamic category
+    visibleSubCategories,
+    setVisibleSubCategories,
+}: ProductListProps) {
+    const { isSignedIn } = useUser();
+    const { getToken } = useAuth();
+    const [modalState, setModalState] = useState<ModalState>({
+        upload: false,
+        edit: false,
+        delete: false,
+        view: false,
+        documentIdToDelete: null,
+        selectedImage: null,
+    });
+    const [uploadForm, setUploadForm] = useState<FormState>({
+        file: null,
+        title: "",
+        description: "",
+        category: category, 
+        subCategory: "",
+        favorite: false,
+        banner: false,
+    });
+    const [editForm, setEditForm] = useState<EditFormState>({
+        id: 0,
+        documentId: "",
+        title: "",
+        description: "",
+        category: category, 
+        subCategory: visibleSubCategories[0] ?? "",
+        file: null,
+        favorite: false,
+        banner: false,
+    });
+    const [isSubmitting, setIsSubmitting] = useState(false);
+    const [isAdmin, setIsAdmin] = useState(false);
+
+    const containerRef = useRef<HTMLDivElement>(null);
+    const { scrollYProgress } = useScroll({
+        target: containerRef,
+        offset: ["start end", "end start"] as ["start end", "end start"],
+    });
+    const parallaxY = useTransform(scrollYProgress, [0, 1], [0, -50]);
+
+    // Compute isAdmin with retry logic
+    useEffect(() => {
+        let isMounted = true;
+        const checkAdmin = async (retries = 3, delay = 1000) => {
+            if (!isSignedIn || !user?.authId) {
+                if (isMounted) setIsAdmin(false);
+                return;
+            }
+
+            for (let attempt = 1; attempt <= retries; attempt++) {
+                try {
+                    const adminStatus = await isAdminUser(isSignedIn, user);
+                    if (isMounted) {
+                        setIsAdmin(adminStatus);
+                        setError(null);
+                    }
+                    return;
+                } catch (error) {
+                    console.error("ProductList: Admin check failed:", {
+                        error: error instanceof Error ? error.message : "Unknown error",
+                        attempt,
+                        timestamp: new Date().toISOString(),
+                    });
+                    if (attempt < retries) {
+                        await new Promise(resolve => setTimeout(resolve, delay));
+                    } else if (isMounted) {
+                        setIsAdmin(false);
+                        setError(PRODUCT_DESC.ERRORS.ADMIN_CHECK_FAILED);
+                    }
+                }
+            }
+        };
+        checkAdmin();
+        return () => {
+            isMounted = false;
+        };
+    }, [isSignedIn, user, setError]);
+
+    useEffect(() => {
+        const isAnyModalOpen = modalState.upload || modalState.edit || modalState.delete || modalState.view;
+        document.body.style.overflow = isAnyModalOpen ? "hidden" : "";
+        window.dispatchEvent(
+            new CustomEvent("modalStateChange", { detail: { isOpen: isAnyModalOpen } })
+        );
+        return () => {
+            document.body.style.overflow = "";
+        };
+    }, [modalState]);
+
+    const groupedImages = uploadedImages
+        .filter((img) => img.category === category && img.subCategory && img.subCategory.trim() && img.subCategory.toLowerCase() !== "none")
+        .reduce((acc, img) => {
+            const key = img.subCategory!;
+            if (!acc[key]) acc[key] = [];
+            acc[key].push(img);
+            return acc;
+        }, {} as Record<string, UploadedImage[]>);
+
+    const checkAdmin = (action: string): boolean => {
+        if (!isAdmin) {
+            console.error(`ProductList: Unauthorized ${action} attempt`, {
+                isSignedIn,
+                authId: user?.authId,
+                businessAdminId: user?.businessAdminId,
+                userRole: user?.userRole,
+                businessOwner: user?.businessOwner ?? null,
+                timestamp: new Date().toISOString(),
+            });
+            setError(PRODUCT_DESC.ERRORS[`UNAUTHORIZED_${action.toUpperCase()}` as keyof typeof PRODUCT_DESC.ERRORS]);
+            return false;
+        }
+        return true;
+    };
+
+    const handleImageClick = (image: UploadedImage) => {
+        setModalState((prev) => ({ ...prev, view: true, selectedImage: image }));
+    };
+
+    const closeModal = () => {
+        setModalState((prev) => ({ ...prev, view: false, selectedImage: null }));
+    };
+
+    const openEditModal = (image: UploadedImage) => {
+        if (!checkAdmin("edit")) return;
+        setEditForm({
+            id: image.id,
+            documentId: image.documentId,
+            title: image.title?.trim() || "",
+            description: image.description || "",
+            category: image.category || category, 
+            subCategory: image.subCategory || "",
+            file: null,
+            favorite: image.favorite ?? false,
+            banner: image.banner ?? false,
+        });
+        setModalState((prev) => ({ ...prev, edit: true }));
+    };
+
+    const closeEditModal = () => {
+        setModalState((prev) => ({ ...prev, edit: false }));
+        setEditForm({
+            id: 0,
+            documentId: "",
+            title: "",
+            description: "",
+            category: category,
+            subCategory: "",
+            file: null,
+            favorite: false,
+            banner: false,
+        });
+    };
+
+    const closeUploadModal = () => {
+        setModalState((prev) => ({ ...prev, upload: false }));
+        setUploadForm({
+            file: null,
+            title: "",
+            description: "",
+            category: category, 
+            subCategory: "",
+            favorite: false,
+            banner: false,
+        });
+    };
+
+    const openConfirmDelete = (documentId: string) => {
+        if (!checkAdmin("delete")) return;
+        setModalState((prev) => ({ ...prev, delete: true, documentIdToDelete: documentId }));
+    };
+
+    const handleConfirmDelete = async () => {
+        if (!checkAdmin("delete")) {
+            setModalState((prev) => ({ ...prev, delete: false }));
+            return;
+        }
+        if (modalState.documentIdToDelete) {
+            setIsLoading(true);
+            try {
+                await handleDeleteImage(modalState.documentIdToDelete);
+            } finally {
+                setIsLoading(false);
+                setModalState((prev) => ({ ...prev, delete: false, documentIdToDelete: null }));
+            }
+        }
+    };
+
+    const handleCancelDelete = () => {
+        setModalState((prev) => ({ ...prev, delete: false, documentIdToDelete: null }));
+    };
+
+    const handleEditImage = async (e: React.FormEvent<HTMLFormElement>, subCategory: string) => {
+        e.preventDefault();
+        if (!checkAdmin("edit")) return;
+
+        try {
+            setIsLoading(true);
+            setIsSubmitting(true);
+            const token = await getToken();
+            if (!token) {
+                console.error("ProductList: No authentication token available", { timestamp: new Date().toISOString() });
+                setError(PRODUCT_DESC.ERRORS.NO_AUTH_TOKEN);
+                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 || category); 
+            formData.append("subCategory", editForm.subCategory || "");
+            formData.append("favorite", String(editForm.favorite));
+            formData.append("banner", String(editForm.banner));
+            if (editForm.file) {
+                const compressedFile = await compressImage(editForm.file);
+                formData.append("file", compressedFile);
+            }
+
+            const response = await fetch("/api/gallery-data", {
+                method: "PUT",
+                headers: { Authorization: `Bearer ${token}` },
+                credentials: "include",
+                body: formData,
+            });
+
+            if (!response.ok) {
+                const errorData = await response.json();
+                console.error("ProductList: Edit failed", { status: response.status, errorData, timestamp: new Date().toISOString() });
+                if (response.status === 401) {
+                    setError(PRODUCT_DESC.ERRORS.AUTHENTICATION_ERROR);
+                    return;
+                }
+                throw new Error(errorData.error || PRODUCT_DESC.ERRORS.EDIT_FAILED_STATUS.replace("${response.status}", response.status.toString()));
+            }
+
+            const { data }: { data: UploadedImage[] } = await response.json();
+            setUploadedImages(data || []);
+
+            const oldSubCategory = uploadedImages.find(
+                (img) => img.documentId === editForm.documentId
+            )?.subCategory;
+
+            let updatedSubCategories = [...visibleSubCategories];
+            if (subCategory && !updatedSubCategories.includes(subCategory)) {
+                updatedSubCategories = [...updatedSubCategories, subCategory];
+            }
+
+            if (oldSubCategory && oldSubCategory !== subCategory) {
+                const hasImagesWithOldSubCategory = data.some(
+                    (img) => img.subCategory === oldSubCategory && img.category === category && img.subCategory && img.subCategory.trim() && img.subCategory.toLowerCase() !== "none"
+                );
+                if (!hasImagesWithOldSubCategory) {
+                    updatedSubCategories = updatedSubCategories.filter(
+                        (cat) => cat !== oldSubCategory
+                    );
+                }
+            }
+
+            setVisibleSubCategories(updatedSubCategories);
+            setError(null);
+            setModalState((prev) => ({ ...prev, edit: false }));
+            setEditForm({
+                id: 0,
+                documentId: "",
+                title: "",
+                description: "",
+                category: category, 
+                subCategory: "",
+                file: null,
+                favorite: false,
+                banner: false,
+            });
+        } catch (err) {
+            console.error("ProductList: Edit Error", { error: err instanceof Error ? err.message : "Unknown error", timestamp: new Date().toISOString() });
+            setError(err instanceof Error ? err.message : PRODUCT_DESC.ERRORS.EDIT_FAILED);
+        } finally {
+            setIsLoading(false);
+            setIsSubmitting(false);
+        }
+    };
+
+    const sectionVariants: Variants = {
+        hidden: { opacity: 0 },
+        visible: {
+            opacity: 1,
+            transition: { duration: 0.8, ease: [0.16, 1, 0.3, 1], staggerChildren: 0.1 },
+        },
+    };
+
+    return (
+        <div className="w-full">
+            <motion.section
+                variants={sectionVariants}
+                initial="hidden"
+                whileInView="visible"
+                viewport={{ once: true }}
+                className="relative py-12 sm:py-16 lg:pb-24 w-full bg-gray-50/50 backdrop-blur-sm"
+                ref={containerRef}
+                style={{ y: parallaxY }}
+            >
+                <div className="relative z-10 w-full px-4 sm:px-6 lg:px-8">
+                    {error && <p className="text-red-600 text-lg text-center mb-8">{error}</p>}
+                    {user && !isAdmin && (
+                        <p className="text-yellow-600 text-lg text-center mb-8">
+                            {PRODUCT_DESC.UI.NON_ADMIN_MESSAGE}
+                        </p>
+                    )}
+                    {isAdmin && (
+                        <div className="flex justify-center mb-12">
+                            <ActionButton
+                                onClick={() => setModalState((prev) => ({ ...prev, upload: true }))}
+                                className="flex items-center"
+                            >
+                                <Upload className="mr-2 h-4 w-4" />
+                                {PRODUCT_DESC.BUTTONS.UPLOAD_IMAGE_BUTTON}
+                            </ActionButton>
+                        </div>
+                    )}
+                    <div className="space-y-12 max-w-7xl mx-auto">
+                        {Object.entries(groupedImages).length === 0 ? (
+                            <Card className="p-8 text-center bg-white/10 backdrop-blur-md shadow-2xl rounded-3xl supports-[not(backdrop-filter:blur(10px))]:bg-white/20">
+                                <p className="text-gray-600 text-xl">{PRODUCT_DESC.UI.NO_IMAGES_MESSAGE}</p>
+                            </Card>
+                        ) : (
+                            Object.entries(groupedImages).map(([subCategory, images]) => (
+                                <div key={subCategory} className="space-y-8">
+                                    <h2 className="text-gray-900 text-4xl sm:text-5xl md:text-6xl lg:text-7xl xl:text-8xl font-extrabold lg:ml-auto pb-4 sm:pb-8 tracking-tight">
+                                        {subCategory
+                                            .split("-")
+                                            .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+                                            .join(" ")}
+                                    </h2>
+                                    {images.map((image, index) => (
+                                        <motion.div
+                                            key={image.documentId}
+                                            variants={cardVariants}
+                                            initial="hidden"
+                                            animate="visible"
+                                            className="bg-white/10 backdrop-blur-md shadow-2xl rounded-3xl overflow-hidden supports-[not(backdrop-filter:blur(10px))]:bg-white/20"
+                                        >
+                                            <div className="flex flex-col md:flex-row">
+                                                <div
+                                                    className="relative w-full md:w-1/2 h-[400px] md:h-[600px] cursor-pointer"
+                                                    onClick={() => handleImageClick(image)}
+                                                >
+                                                    <Image
+                                                        src={image.url}
+                                                        alt={image.title || PRODUCT_DESC.UI.DEFAULT_IMAGE_ALT}
+                                                        fill
+                                                        className="object-cover rounded-t-3xl md:rounded-l-3xl md:rounded-t-none"
+                                                        sizes="(max-width: 768px) 100vw, 50vw"
+                                                        loading="lazy"
+                                                        quality={85}
+                                                    />
+                                                    {isAdmin && (
+                                                        <div className="absolute top-4 right-4 flex space-x-3">
+                                                            <EditIconButton
+                                                                onClick={(e) => {
+                                                                    e.stopPropagation();
+                                                                    openEditModal(image);
+                                                                }}
+                                                                className="h-10 w-10"
+                                                            />
+                                                            <TrashIconButton
+                                                                onClick={(e) => {
+                                                                    e.stopPropagation();
+                                                                    openConfirmDelete(image.documentId);
+                                                                }}
+                                                                className="h-10 w-10"
+                                                            />
+                                                        </div>
+                                                    )}
+                                                </div>
+                                                <div className="p-8 md:w-1/2 flex flex-col space-y-6">
+                                                    <h3 className="text-2xl sm:text-3xl font-semibold text-gray-900">
+                                                        {image.title || PRODUCT_DESC.UI.FALLBACK_TITLE}
+                                                    </h3>
+                                                    <div className="text-base sm:text-lg text-gray-700">
+                                                        {(image.description || "")
+                                                            .split("\n")
+                                                            .filter((paragraph) => paragraph.trim() !== "")
+                                                            .map((paragraph, i) => (
+                                                                <p key={i} className="mb-4">
+                                                                    {paragraph}
+                                                                </p>
+                                                            )) || (
+                                                            <p className="mb-4">{PRODUCT_DESC.UI.NO_DESCRIPTION_MESSAGE}</p>
+                                                        )}
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </motion.div>
+                                    ))}
+                                </div>
+                            ))
+                        )}
+                    </div>
+                </div>
+            </motion.section>
+
+            <UploadModal
+                isOpen={modalState.upload}
+                onClose={closeUploadModal}
+                uploadForm={uploadForm}
+                setUploadForm={setUploadForm}
+                isSubmitting={isSubmitting}
+                setIsSubmitting={setIsSubmitting}
+                handleImageUpload={handleImageUpload}
+                error={error}
+                setError={setError}
+                visibleCategories={visibleCategories}
+                visibleSubCategories={visibleSubCategories}
+                setVisibleSubCategories={setVisibleSubCategories}
+                category={category} 
+            />
+            <EditModal
+                isOpen={modalState.edit}
+                onClose={closeEditModal}
+                editForm={editForm}
+                setEditForm={setEditForm}
+                isSubmitting={isSubmitting}
+                setIsSubmitting={setIsSubmitting}
+                handleEditImage={handleEditImage}
+                error={error}
+                setError={setError}
+                visibleCategories={visibleCategories}
+                visibleSubCategories={visibleSubCategories}
+                setVisibleSubCategories={setVisibleSubCategories}
+                category={category} 
+            />
+            <DeleteModal
+                isOpen={modalState.delete}
+                onClose={handleCancelDelete}
+                onConfirm={handleConfirmDelete}
+                isSubmitting={isSubmitting}
+            />
+            <ViewImageModal
+                isOpen={modalState.view}
+                onClose={closeModal}
+                selectedImage={modalState.selectedImage}
+            />
+        </div>
+    );
+}