"use client"; import React, { useState } from "react"; import { Star, ChevronLeft, ChevronRight, Plus, Minus, Heart, Check, ShoppingBag, X, ChevronDown } from "lucide-react"; import Link from "next/link"; import Image from "next/image"; import { useRouter } from "next/navigation"; import { useCurrency } from "@/providers/CurrencyProvider"; import { addToCart } from "@/lib/cart"; import { toggleWishlist, isInWishlist } from "@/lib/wishlist"; import { useSettings } from "@/providers/SettingsProvider"; import ProductCard from "./ProductCard"; import Header from "./Header"; import Footer from "./Footer"; import RecentlyViewed from "./RecentlyViewed"; import ProductQA from "./ProductQA"; import Swal from "sweetalert2"; interface Variant { id: string; size: string; color: string; length: string | null; stock: number; price: number | null; image?: string | null; images: any; } interface ProductImage { id: string; url: string; color: string | null; } interface Product { id: string; title: string; slug: string; description: string; thumbnail: string; sizeChart?: string | null; basePrice: number; discountPrice: number | null; featured: boolean; brand?: { name: string } | null; category?: { name: string; slug: string } | null; variants: Variant[]; images?: ProductImage[]; flashSaleEndDate?: string | Date | null; } interface Category { id: string; name: string; slug: string; } interface ProductDetailsClientProps { product: Product; categories: Category[]; relatedProducts: Product[]; dbColors?: { name: string; value: string }[]; } // Swatch colors map for dynamic UI circles const COLOR_HEX_MAP: Record = { "Black": "#09090b", "Obsidian Black": "#09090b", "Navy Blue": "#1e3a8a", "Charcoal": "#374151", "Olive": "#3f6212", "Burgundy": "#7f1d1d", "White": "#ffffff", "Grey": "#71717a", "Light Blue": "#93c5fd", "Classic Crimson": "#b91c1c", "Pure Ivory": "#fafaf9", "Ruby Red": "#dc2626", "Beige": "#f5f5dc", "Camel": "#c19a6b", "Ivory White": "#fafaf9" }; // Static images removed for database-driven operation const getWidthAtY = (y: number): number => { if (y <= 45) return 10; if (y <= 60) return 6; if (y <= 80) return 16; if (y <= 120) return 34; if (y <= 150) return 30; if (y <= 180) return 26; if (y <= 200) return 24; if (y <= 235) return 18; if (y <= 275) return 14; if (y <= 315) return 10; return 6; }; const MannequinSVG = ({ scanZone }: { scanZone: number }) => { return ( {[50, 70, 90, 105, 120, 135, 150, 165, 180, 195, 215, 235, 255, 275, 295, 315, 330].map((y, i) => ( ))} {scanZone === 1 && ( <> )} {scanZone === 2 && ( <> )} {scanZone === 3 && ( <> )} {scanZone === 4 && ( <> )} ); }; const BoldMetricsLogo = () => (
BOLD METRICS
); export default function ProductDetailsClient({ product, categories, relatedProducts, dbColors = [] }: ProductDetailsClientProps) { const { formatPrice } = useCurrency(); const { storeName } = useSettings(); const router = useRouter(); // Extract unique variants properties dynamically const uniqueColors = Array.from(new Set(product.variants.map(v => v.color))).filter(Boolean); const uniqueSizes = Array.from(new Set(product.variants.map(v => v.size))).filter(Boolean); const uniqueLengths = Array.from(new Set(product.variants.filter(v => v.length).map(v => v.length))) as string[]; // Active selections const [selectedColor, setSelectedColor] = useState(uniqueColors[0] || "Black"); const [selectedSize, setSelectedSize] = useState(uniqueSizes[0] || "M"); const [selectedLength, setSelectedLength] = useState(uniqueLengths[0] || ""); const [wishlisted, setWishlisted] = useState(false); const [addedToBag, setAddedToBag] = useState(false); const [reviews, setReviews] = useState([]); const [reviewsLoading, setReviewsLoading] = useState(true); const [newReview, setNewReview] = useState({ name: "", rating: 5, comment: "" }); const [submittingReview, setSubmittingReview] = useState(false); const [scrolledHalfway, setScrolledHalfway] = useState(false); // Stock Alert state const [notifyEmail, setNotifyEmail] = useState(""); const [notifyLoading, setNotifyLoading] = useState(false); const [notifySuccess, setNotifySuccess] = useState(false); // Save to recently viewed on mount React.useEffect(() => { if (!product) return; try { const stored = localStorage.getItem("recently_viewed"); let viewedList = stored ? JSON.parse(stored) : []; // Remove if exists to push to front viewedList = viewedList.filter((p: { id: string }) => p.id !== product.id); // Store minimal product payload viewedList.unshift({ id: product.id, title: product.title, slug: product.slug, basePrice: product.basePrice, discountPrice: product.discountPrice, thumbnail: product.thumbnail, featured: product.featured, flashSaleEndDate: product.flashSaleEndDate, variants: product.variants }); // Keep only last 10 viewedList = viewedList.slice(0, 10); localStorage.setItem("recently_viewed", JSON.stringify(viewedList)); } catch (err) { console.error("Could not save recently viewed", err); } }, [product]); React.useEffect(() => { const fetchReviews = async () => { try { const res = await fetch(`/api/products/${product.id}/reviews`); if (res.ok) setReviews(await res.json()); } catch (err) {} finally { setReviewsLoading(false); } }; fetchReviews(); }, [product.id]); const avgRating = reviews.length > 0 ? (reviews.reduce((acc, r) => acc + r.rating, 0) / reviews.length).toFixed(1) : null; const handleReviewSubmit = async (e: React.FormEvent) => { e.preventDefault(); setSubmittingReview(true); try { const res = await fetch(`/api/products/${product.id}/reviews`, { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(newReview) }); if (res.ok) { const { review } = await res.json(); setReviews([review, ...reviews]); setNewReview({ name: "", rating: 5, comment: "" }); } } catch (err) {} finally { setSubmittingReview(false); } }; React.useEffect(() => { setWishlisted(isInWishlist(product.id)); const handleUpdate = () => setWishlisted(isInWishlist(product.id)); window.addEventListener("wishlist-updated", handleUpdate); return () => window.removeEventListener("wishlist-updated", handleUpdate); }, [product.id]); const [showSizeChart, setShowSizeChart] = useState(false); const [activeSizeTab, setActiveSizeTab] = useState<"heights" | "size-chart" | "measure">("heights"); const [sizeUnit, setSizeUnit] = useState<"inches" | "cm">("inches"); const [wizardStep, setWizardStep] = useState<"heights-list" | "wizard-input" | "wizard-scanning" | "wizard-result">("heights-list"); const [scanZone, setScanZone] = useState(1); const [scanProgress, setScanProgress] = useState(0); const [isMetric, setIsMetric] = useState(false); const [heightFt, setHeightFt] = useState("6"); const [heightIn, setHeightIn] = useState("2"); const [heightCm, setHeightCm] = useState("188"); const [weightLbs, setWeightLbs] = useState("190"); const [weightKg, setWeightKg] = useState("86"); const [waistIn, setWaistIn] = useState("34"); const [waistCm, setWaistCm] = useState("86"); const [age, setAge] = useState(""); // Related Products states const [activeRelatedTab, setActiveRelatedTab] = useState<"recommended" | "recently">("recommended"); const [hoveredRelatedProductId, setHoveredRelatedProductId] = useState(null); const [selectedRelatedSizes, setSelectedRelatedSizes] = useState>({}); const [selectedRelatedLengths, setSelectedRelatedLengths] = useState>({}); const [relatedWishlisted, setRelatedWishlisted] = useState>({}); // Accordions states const [openAccordions, setOpenAccordions] = useState>({ description: true, fit: false, care: false, reviews: false }); const [expandedAccordion, setExpandedAccordion] = useState(null); const toggleAccordion = (section: string) => { setOpenAccordions(prev => ({ ...prev, [section]: !prev[section] })); }; // Automated 3D scanning visualizer effect React.useEffect(() => { if (wizardStep !== "wizard-scanning") return; const interval = setInterval(() => { setScanProgress((prev) => { const next = prev + 1; if (next >= 100) { clearInterval(interval); setWizardStep("wizard-result"); return 100; } if (next < 25) setScanZone(1); else if (next < 50) setScanZone(2); else if (next < 75) setScanZone(3); else setScanZone(4); return next; }); }, 35); return () => clearInterval(interval); }, [wizardStep]); // 1. Get the dynamic database-provided product images, filtered by selected color tag const dbImages = product.images || []; const colorSpecificDbImages = dbImages.filter( (img) => img.color && img.color.toLowerCase() === selectedColor.toLowerCase() ).map((img) => img.url); const generalDbImages = dbImages.filter((img) => !img.color).map((img) => img.url); // Find variant matching current active color, size, and length selection const activeVariant = product.variants.find( (v) => v.color.toLowerCase() === selectedColor.toLowerCase() && v.size.toLowerCase() === selectedSize.toLowerCase() && (v.length ? v.length.toLowerCase() === selectedLength.toLowerCase() : true) ); // Get ALL variants matching the selected color to ensure we harvest their variant-level images // even if the exact size/length combo isn't selected yet. const colorMatchedVariants = product.variants.filter( (v) => v.color.toLowerCase() === selectedColor.toLowerCase() ); const variantLevelImages = colorMatchedVariants.flatMap(v => [ ...(v.image ? [v.image] : []), ...(v.images || []) ]); const specificImages = [...variantLevelImages, ...colorSpecificDbImages].filter(Boolean); // Combine and deduplicate dynamic database images const uniqueDynamicDbImageUrls = Array.from(new Set( specificImages.length > 0 ? specificImages : generalDbImages.filter(Boolean) )); // Use only dynamic database-driven product images, falling back strictly to product.thumbnail if empty. const dynamicCollageImages = uniqueDynamicDbImageUrls.length > 0 ? uniqueDynamicDbImageUrls : (product.thumbnail ? [product.thumbnail] : []); // Dynamic price is now directly driven by the variant. // Fall back to product base/discount if the variant price is missing. const currentBasePrice = activeVariant?.price || product.basePrice; const currentDiscountPrice = product.discountPrice ? product.discountPrice : null; // Complete The Look Logic (Cross-selling matching bottom item dynamically from relatedProducts[0]) const completeLookItemRaw = relatedProducts && relatedProducts.length > 0 ? relatedProducts[0] : null; const completeLookItem = completeLookItemRaw ? { title: completeLookItemRaw.title, slug: completeLookItemRaw.slug, price: completeLookItemRaw.basePrice, thumbnail: completeLookItemRaw.thumbnail } : null; // Flash Sale Timer const [timeLeft, setTimeLeft] = useState(null); React.useEffect(() => { if (product.flashSaleEndDate) { const target = new Date(product.flashSaleEndDate).getTime(); const interval = setInterval(() => { const now = new Date().getTime(); const distance = target - now; if (distance < 0) { clearInterval(interval); setTimeLeft(null); } else { const days = Math.floor(distance / (1000 * 60 * 60 * 24)); const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)); const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60)); const seconds = Math.floor((distance % (1000 * 60)) / 1000); setTimeLeft(`${days}d ${hours}h ${minutes}m ${seconds}s`); } }, 1000); return () => clearInterval(interval); } }, [product.flashSaleEndDate]); // Stock Alerts based on activeVariant const activeStock = activeVariant ? activeVariant.stock : 0; const isOutOfStock = activeStock === 0 && !!activeVariant; const isLowStock = activeStock > 0 && activeStock <= 5; const handleAddToBag = (overrideSize?: string, overrideLength?: string) => { const sizeToUse = overrideSize || selectedSize; const lengthToUse = overrideLength || selectedLength; // Find variant matching current active color, size, and length selection const variantToUse = product.variants.find( (v) => v.color.toLowerCase() === selectedColor.toLowerCase() && v.size.toLowerCase() === sizeToUse.toLowerCase() && (v.length ? v.length.toLowerCase() === lengthToUse.toLowerCase() : true) ); const basePrice = variantToUse?.price || product.basePrice; const finalPrice = product.discountPrice ? product.discountPrice : basePrice; addToCart({ productId: product.id, slug: product.slug, title: product.title, thumbnail: product.thumbnail || "https://placehold.co/600x800/e2e8f0/64748b.png?text=Store+Image", color: selectedColor, size: sizeToUse, length: lengthToUse, price: finalPrice, }); setAddedToBag(true); setTimeout(() => { router.push("/cart"); }, 800); }; return (
{/* 3. PRODUCT CORE MAIN PANEL */}
{/* Breadcrumb */}
Home • {product.category?.name || "Apparel"}
{/* LEFT COLUMN: Grid Image Collage with premium dynamic grid sizing and hover magnification */}
{dynamicCollageImages.map((imgUrl, index) => { const isLastOdd = dynamicCollageImages.length > 1 && dynamicCollageImages.length % 2 !== 0 && index === dynamicCollageImages.length - 1; return (
{ const rect = e.currentTarget.getBoundingClientRect(); const x = ((e.clientX - rect.left) / rect.width) * 100; const y = ((e.clientY - rect.top) / rect.height) * 100; const img = e.currentTarget.querySelector("img"); if (img) { img.style.transformOrigin = `${x}% ${y}%`; img.style.transform = "scale(2)"; } }} onMouseLeave={(e) => { const img = e.currentTarget.querySelector("img"); if (img) { img.style.transform = "scale(1)"; setTimeout(() => { if (img.style.transform === "scale(1)") { img.style.transformOrigin = "center"; } }, 300); } }} > {`${product.title}
); })}
{/* RIGHT COLUMN: Buy Box Panel */}
{/* Category Brand Path */} {product.brand?.name || storeName} / {product.category?.name || "CLOTHING"} {/* Title */}

{product.title}

{/* Pricing Section */}
{currentDiscountPrice && currentDiscountPrice < currentBasePrice ? (
{formatPrice(currentDiscountPrice)} {formatPrice(currentBasePrice)}
) : ( {formatPrice(currentBasePrice)} )}
{/* Flash Sale Timer */} {timeLeft && (
Ends in {timeLeft}
)}
{/* Stock Alerts */} {(isOutOfStock || isLowStock) && (
{isOutOfStock ? (
Out of Stock {!notifySuccess ? (
setNotifyEmail(e.target.value)} className="flex-1 text-xs border border-zinc-200 px-3 py-2 bg-white focus:outline-none focus:border-zinc-950 focus:ring-1 focus:ring-zinc-950" />
) : (
You're on the list!
)}
) : ( Only {activeStock} left in stock - order soon! )}
)} {/* COLOR SWATCH SELECTOR */} {uniqueColors.length > 0 && (
Color: {selectedColor}
{uniqueColors.map((color) => { const dbColor = dbColors.find(c => c.name.toLowerCase() === color.toLowerCase()); const hexValue = dbColor ? dbColor.value : (COLOR_HEX_MAP[color] || "#71717a"); const isSelected = selectedColor === color; return ( ); })}
)} {/* SIZE SWATCH SELECTOR */} {uniqueSizes.length > 0 && (
Size
{uniqueSizes.map((size) => { const isSelected = selectedSize === size; return ( ); })}
)} {/* LENGTH SWATCH SELECTOR */} {uniqueLengths.length > 0 && (
Length
{uniqueLengths.map((len) => { const isSelected = selectedLength === len; return ( ); })}
)} {/* DYNAMIC ACTION BUTTON */}
{/* Quality assurance shipping lines */} ✓ Free standard shipping on orders over $150.00
{/* 4. MID SECTION: DESCRIPTION, ACCORDION & MODEL CROSS-SELL */}
{/* LEFT Accordions with Dark Panel Aesthetic */}

{product.title} - Premium modern apparel.

{/* 1. PRODUCT DESCRIPTION ACCORDION */}

{product.description}

{/* 2. SIZE & FIT ACCORDION */}

Our custom tall sizing structures length options specifically:

  • Semi Tall: Ideal for heights 6'0" to 6'2"
  • Tall: Ideal for heights 6'3" to 6'5"
  • Extra Tall: Ideal for heights 6'6" and above
{/* 3. FABRIC & CARE ACCORDION */}

Please refer to the inner garment tag for detailed fabric and care instructions. Machine wash cold with similar shades. Turn garment inside out before washing.

{/* 4. REVIEWS SUMMARY ACCORDION */}
{reviewsLoading ? (

Loading reviews...

) : reviews.length === 0 ? (

No reviews available for this product yet. Be the first to review!

) : (
{reviews.map(r => (
{[1, 2, 3, 4, 5].map((star) => ( ))}
{r.user?.name || "Guest"}

{r.comment}

))}
)}

Write a Review

setNewReview({...newReview, name: e.target.value})} className="w-full text-xs p-3 border border-zinc-200 focus:outline-none focus:border-zinc-950" />