@devvistatech/devvista-kit 0.0.12 → 0.0.13

package/components/addOns/functional/carousels/ProductDescCarousel.tsx

@@ -0,0 +1,1129 @@
+"use client";
+
+import { useState, useEffect, useRef } from "react";
+import {
+    ActionButton,
+    EditIconButton,
+    TrashIconButton,
+    CloseButton,
+    SubmitButton,
+    CancelButton,
+    NextButton,
+    PrevButton,
+    FilterButton,
+    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, EditFormState, Category, FormState } from "@/lib/types";
+import { compressImage } from "@/lib/utils/compressImage";
+import { PRODUCT_DESC } from "./constants.ts/productDescCarousel";
+
+const getValidCategory = (category: string | undefined, fallback: Category = "none"): Category => {
+    const VALID_CATEGORIES: Category[] = [
+        "none",
+        "indoor",
+        "outdoor",
+        "commercial",
+    ];
+    return category && VALID_CATEGORIES.includes(category as Category) ? (category as Category) : fallback;
+};
+
+// Validate subcategory input
+const validateSubCategory = (subCategory: string): string | null => {
+    if (!subCategory.trim()) return PRODUCT_DESC.ERRORS.SUBCATEGORY_EMPTY;
+    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 ProductDescCarouselProps {
+    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,
+        favorite: boolean
+    ) => Promise<void>;
+    handleDeleteImage: (documentId: string) => Promise<void>;
+    visibleCategories?: string[];
+    fixedCategory?: Category;
+    visibleSubCategories: string[];
+    setVisibleSubCategories: (subCategories: string[]) => void;
+}
+
+interface SlideshowProps {
+    images: UploadedImage[];
+    altPrefix: string;
+    currentSlide: number;
+    setCurrentSlide: React.Dispatch<React.SetStateAction<number>>;
+    isAdmin: boolean;
+    handleImageClick: (image: UploadedImage) => void;
+    handleEditImage: (image: UploadedImage) => void;
+    handleDeleteImage: (documentId: 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" } },
+};
+
+// Slideshow Component
+const Slideshow = ({
+    images,
+    altPrefix,
+    currentSlide,
+    setCurrentSlide,
+    isAdmin,
+    handleImageClick,
+    handleEditImage,
+    handleDeleteImage,
+}: SlideshowProps) => {
+    const slideshowRef = useRef<HTMLDivElement>(null);
+
+    const goToPrev = () => setCurrentSlide((prev) => (prev - 1 + images.length) % images.length);
+    const goToNext = () => setCurrentSlide((prev) => (prev + 1) % images.length);
+
+    if (!images.length || !images[currentSlide]) {
+        return (
+            <Card
+                className="relative h-[40vh] min-h-[400px] sm:h-[50vh] lg:h-[900px] rounded-3xl overflow-hidden bg-white/10 backdrop-blur-md shadow-2xl w-full mx-auto max-w-3xl md:max-w-none md:mx-0 flex items-center justify-center supports-[not(backdrop-filter:blur(10px))]:bg-white/20"
+                ref={slideshowRef}
+            >
+                <p className="text-gray-600 text-lg">{PRODUCT_DESC.UI.NO_IMAGES_MESSAGE}</p>
+            </Card>
+        );
+    }
+
+    return (
+        <div
+            className="relative h-[40vh] min-h-[400px] sm:h-[50vh] lg:h-[900px] rounded-3xl overflow-hidden bg-white/10 backdrop-blur-md shadow-2xl w-full mx-auto max-w-3xl md:max-w-none md:mx-0 supports-[not(backdrop-filter:blur(10px))]:bg-white/20"
+            ref={slideshowRef}
+        >
+            <div
+                className="relative w-full h-full cursor-pointer"
+                onClick={() => handleImageClick(images[currentSlide])}
+            >
+                <Image
+                    src={images[currentSlide].url}
+                    alt={images[currentSlide].title || altPrefix}
+                    fill
+                    className="object-cover rounded-2xl transition-transform duration-700 hover:scale-110"
+                    sizes="(max-width: 768px) 100vw, (max-width: 1024px) 50vw, 33vw"
+                    loading="lazy"
+                    quality={85}
+                />
+                <div className="absolute inset-0 bg-gradient-to-t from-black/40 to-transparent opacity-0 hover:opacity-100 transition-opacity duration-500" />
+                <div className="absolute bottom-4 left-4 text-white opacity-90 transition-opacity duration-500">
+                    <span className="text-lg sm:text-xl lg:text-2xl font-semibold drop-shadow-md">
+                        {altPrefix}
+                    </span>
+                </div>
+                {isAdmin && (
+                    <div className="absolute top-2 right-2 flex space-x-2">
+                        <EditIconButton
+                            onClick={(e) => {
+                                e.stopPropagation();
+                                handleEditImage(images[currentSlide]);
+                            }}
+                        />
+                        <TrashIconButton
+                            onClick={(e) => {
+                                e.stopPropagation();
+                                handleDeleteImage(images[currentSlide].documentId);
+                            }}
+                        />
+                    </div>
+                )}
+            </div>
+            {images.length > 1 && (
+                <>
+                    <PrevButton
+                        onClick={(e) => {
+                            e.stopPropagation();
+                            goToPrev();
+                        }}
+                    />
+                    <NextButton
+                        onClick={(e) => {
+                            e.stopPropagation();
+                            goToNext();
+                        }}
+                    />
+                </>
+            )}
+        </div>
+    );
+};
+
+// Upload Modal Component
+const UploadModal = ({
+    isOpen,
+    onClose,
+    uploadForm,
+    setUploadForm,
+    isSubmitting,
+    setIsSubmitting,
+    handleImageUpload,
+    error,
+    setError,
+    visibleCategories = ["none"],
+    visibleSubCategories = [],
+    setVisibleSubCategories,
+}: {
+    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,
+        favorite: boolean
+    ) => Promise<void>;
+    error: string | null;
+    setError: (error: string | null) => void;
+    visibleCategories?: string[];
+    visibleSubCategories?: string[];
+    setVisibleSubCategories: (subCategories: string[]) => void;
+}) => {
+    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,
+                uploadForm.category,
+                uploadForm.subCategory,
+                uploadForm.favorite || false
+            );
+            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 === "none"
+                                        ? PRODUCT_DESC.UI.CATEGORY_NONE
+                                        : 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"
+                        />
+                        {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 || !!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 = ["none"],
+    visibleSubCategories = [],
+    setVisibleSubCategories,
+}: {
+    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;
+}) => {
+    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 === "none"
+                                        ? PRODUCT_DESC.UI.CATEGORY_NONE
+                                        : 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"
+                        />
+                        {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 || !!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
+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
+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 ProductDescCarousel({
+    user,
+    uploadedImages,
+    setUploadedImages,
+    error,
+    setError,
+    isLoading,
+    setIsLoading,
+    handleImageUpload,
+    handleDeleteImage,
+    visibleCategories = ["none"],
+    fixedCategory,
+    visibleSubCategories,
+    setVisibleSubCategories,
+}: ProductDescCarouselProps) {
+    const { isSignedIn } = useUser();
+    const { getToken } = useAuth();
+    const [activeTab, setActiveTab] = useState<string>(visibleSubCategories[0] ?? visibleCategories[0] ?? "none");
+    const [currentSlide, setCurrentSlide] = useState(0);
+    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: fixedCategory ?? getValidCategory(visibleCategories[0], "none"),
+        subCategory: "",
+        favorite: false,
+        banner: false,
+    });
+    const [editForm, setEditForm] = useState<EditFormState>({
+        id: 0,
+        documentId: "",
+        title: "",
+        description: "",
+        category: fixedCategory ?? getValidCategory(visibleCategories[0], "none"),
+        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("ProductDescCarousel: 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 filteredImages = uploadedImages.filter((img) => {
+        const matchesCategory = fixedCategory ? img.category === fixedCategory : (img.category || "none") === activeTab;
+        const matchesSubCategory = visibleSubCategories.length > 0 ? (img.subCategory || "") === activeTab : true;
+        return matchesCategory && matchesSubCategory;
+    });
+
+    const checkAdmin = (action: string): boolean => {
+        if (!isAdmin) {
+            console.error(`ProductDescCarousel: 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: fixedCategory ?? getValidCategory(image.category, getValidCategory(visibleCategories[0], "none")),
+            subCategory: image.subCategory || (visibleSubCategories[0] ?? ""),
+            file: null,
+            favorite: image.favorite,
+            banner: image.banner,
+        });
+        setModalState((prev) => ({ ...prev, edit: true }));
+    };
+
+    const closeEditModal = () => {
+        setModalState((prev) => ({ ...prev, edit: false }));
+        setEditForm({
+            id: 0,
+            documentId: "",
+            title: "",
+            description: "",
+            category: fixedCategory ?? getValidCategory(visibleCategories[0], "none"),
+            subCategory: visibleSubCategories[0] ?? "",
+            file: null,
+            favorite: false,
+            banner: false,
+        });
+    };
+
+    const closeUploadModal = () => {
+        setModalState((prev) => ({ ...prev, upload: false }));
+        setUploadForm({
+            file: null,
+            title: "",
+            description: "",
+            category: fixedCategory ?? getValidCategory(visibleCategories[0], "none"),
+            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("ProductDescCarousel: 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);
+            formData.append("subCategory", editForm.subCategory || "");
+            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("ProductDescCarousel: 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
+                );
+                if (!hasImagesWithOldSubCategory) {
+                    updatedSubCategories = updatedSubCategories.filter(
+                        (cat) => cat !== oldSubCategory
+                    );
+                }
+            }
+
+            setVisibleSubCategories(updatedSubCategories);
+            if (subCategory) {
+                setActiveTab(subCategory);
+                setCurrentSlide(0);
+            } else if (updatedSubCategories.length > 0) {
+                setActiveTab(updatedSubCategories[0]);
+                setCurrentSlide(0);
+            } else {
+                setActiveTab(visibleCategories[0] ?? "none");
+                setCurrentSlide(0);
+            }
+
+            setError(null);
+            setModalState((prev) => ({ ...prev, edit: false }));
+            setEditForm({
+                id: 0,
+                documentId: "",
+                title: "",
+                description: "",
+                category: fixedCategory ?? getValidCategory(visibleCategories[0], "none"),
+                subCategory: updatedSubCategories[0] ?? "",
+                file: null,
+                favorite: false,
+                banner: false,
+            });
+        } catch (err) {
+            console.error("ProductDescCarousel: 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 },
+        },
+    };
+
+    const tabs = visibleSubCategories.length > 0 ? visibleSubCategories : visibleCategories;
+
+    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="mb-6 flex justify-center max-w-2xl mx-auto">
+                        <div className="md:hidden w-full max-w-xs">
+                            <select
+                                value={activeTab}
+                                onChange={(e) => {
+                                    setActiveTab(e.target.value);
+                                    setCurrentSlide(0);
+                                }}
+                                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"
+                            >
+                                {tabs.map((tab) => (
+                                    <option key={tab} value={tab}>
+                                        {tab === "none" || !tab
+                                            ? PRODUCT_DESC.UI.CATEGORY_NONE
+                                            : tab
+                                                .split("-")
+                                                .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+                                                .join(" ")}
+                                    </option>
+                                ))}
+                            </select>
+                        </div>
+                        <div className="hidden md:flex flex-wrap justify-center gap-2 sm:gap-4">
+                            {tabs.map((tab) => (
+                                <FilterButton
+                                    key={tab}
+                                    isActive={activeTab === tab}
+                                    onClick={() => {
+                                        setActiveTab(tab);
+                                        setCurrentSlide(0);
+                                    }}
+                                >
+                                    {tab === "none" || !tab
+                                        ? PRODUCT_DESC.UI.CATEGORY_NONE
+                                        : tab
+                                            .split("-")
+                                            .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+                                            .join(" ")}
+                                </FilterButton>
+                            ))}
+                        </div>
+                    </div>
+                    <div className="grid grid-cols-1 md:grid-cols-2 gap-6 sm:gap-8 lg:gap-12 items-start">
+                        <div className="h-auto max-h-[600px] sm:min-h-[600px] lg:min-h-[900px] bg-white/10 backdrop-blur-md shadow-2xl p-6 sm:p-8 lg:p-10 rounded-3xl flex flex-col space-y-4 sm:space-y-6 order-2 max-w-3xl mx-auto md:max-w-none md:mx-0 md:order-1 supports-[not(backdrop-filter:blur(10px))]:bg-white/20">
+                            <h2 className="text-2xl sm:text-3xl lg:text-4xl font-extrabold text-gray-900">
+                                {filteredImages[currentSlide]?.title || PRODUCT_DESC.UI.FALLBACK_TITLE}
+                            </h2>
+                            <div className="text-sm sm:text-base lg:text-lg text-gray-700">
+                                {filteredImages.length > 0 && currentSlide >= 0 && currentSlide < filteredImages.length ? (
+                                    (filteredImages[currentSlide].description || "")
+                                        .split("\n")
+                                        .filter((paragraph) => paragraph.trim() !== "")
+                                        .map((paragraph, index) => (
+                                            <p key={index} className="mb-4">
+                                                {paragraph}
+                                            </p>
+                                        )) || <p className="mb-4">{PRODUCT_DESC.UI.NO_DESCRIPTION_MESSAGE}</p>
+                                ) : (
+                                    <p className="mb-4">{PRODUCT_DESC.UI.NO_DESCRIPTION_MESSAGE}</p>
+                                )}
+                            </div>
+                        </div>
+                        <div className="order-1 md:order-2">
+                            <Slideshow
+                                images={filteredImages}
+                                altPrefix={filteredImages[currentSlide]?.title || PRODUCT_DESC.UI.DEFAULT_IMAGE_ALT}
+                                currentSlide={currentSlide}
+                                setCurrentSlide={setCurrentSlide}
+                                isAdmin={isAdmin}
+                                handleImageClick={handleImageClick}
+                                handleEditImage={openEditModal}
+                                handleDeleteImage={openConfirmDelete}
+                            />
+                        </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}
+            />
+            <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}
+            />
+            <DeleteModal
+                isOpen={modalState.delete}
+                onClose={handleCancelDelete}
+                onConfirm={handleConfirmDelete}
+                isSubmitting={isSubmitting}
+            />
+            <ViewImageModal
+                isOpen={modalState.view}
+                onClose={closeModal}
+                selectedImage={modalState.selectedImage}
+            />
+        </div>
+    );
+}