"use client"; import React, { useState, useMemo, useEffect } from "react"; import Link from "next/link"; import { useRouter } from "next/navigation"; import { Eye, Zap, SlidersHorizontal, ChevronDown, Check } from "lucide-react"; import { ProductCard } from "@/components/store/product-card"; import { useStore } from "@/components/providers/store-provider"; import { formatCurrency } from "@/lib/format"; import type { Product, Category } from "@/lib/types"; // Mock subcategories tags based on canvas bag features const SUB_CATEGORIES = [ { id: "gym-sports", name: "Gym & Sports", keyword: "gym" }, { id: "laptop-business", name: "Laptop & Business", keyword: "laptop" }, { id: "travel-weekender", name: "Travel & Weekender", keyword: "travel" }, { id: "everyday-carry", name: "Everyday Carry", keyword: "everyday" }, ]; export function ShopLayoutClient({ initialCategorySlug = null, }: { initialCategorySlug?: string | null; }) { const router = useRouter(); const { products, categories } = useStore(); // Active filters state const [selectedCategorySlug, setSelectedCategorySlug] = useState(initialCategorySlug); const [selectedSubCategory, setSelectedSubCategory] = useState(null); // Price range state const maxProductPrice = useMemo(() => { if (products.length === 0) return 5000; return Math.max(...products.map((p) => p.price)); }, [products]); const [minPrice, setMinPrice] = useState(0); const [maxPrice, setMaxPrice] = useState(maxProductPrice); const [priceSlider, setPriceSlider] = useState(maxProductPrice); // Sorting state const [sortBy, setSortBy] = useState("latest"); // Mobile filters drawer open state const [mobileFiltersOpen, setMobileFiltersOpen] = useState(false); // Update selection if prop changes (e.g. user navigates between categories) useEffect(() => { setSelectedCategorySlug(initialCategorySlug); }, [initialCategorySlug]); // Sync price slider with price inputs useEffect(() => { setPriceSlider(maxPrice); }, [maxPrice]); // Calculate dynamic counts const categoryCounts = useMemo(() => { const counts: Record = {}; categories.forEach((cat) => { counts[cat.slug] = products.filter((p) => p.categorySlug === cat.slug).length; }); return counts; }, [categories, products]); const subCategoryCounts = useMemo(() => { const counts: Record = {}; SUB_CATEGORIES.forEach((sub) => { counts[sub.id] = products.filter((p) => p.name.toLowerCase().includes(sub.keyword) || p.shortDescription.toLowerCase().includes(sub.keyword) || p.story.toLowerCase().includes(sub.keyword) ).length; }); return counts; }, [products]); // Filtered and sorted products const filteredAndSortedProducts = useMemo(() => { let result = [...products]; // Filter by Category if (selectedCategorySlug) { result = result.filter((p) => p.categorySlug === selectedCategorySlug); } // Filter by Subcategory keyword if (selectedSubCategory) { const sub = SUB_CATEGORIES.find((s) => s.id === selectedSubCategory); if (sub) { result = result.filter((p) => p.name.toLowerCase().includes(sub.keyword) || p.shortDescription.toLowerCase().includes(sub.keyword) || p.story.toLowerCase().includes(sub.keyword) ); } } // Filter by Price range result = result.filter((p) => p.price >= minPrice && p.price <= maxPrice); // Apply Sorting if (sortBy === "price-low") { result.sort((a, b) => a.price - b.price); } else if (sortBy === "price-high") { result.sort((a, b) => b.price - a.price); } else if (sortBy === "name-asc") { result.sort((a, b) => a.name.localeCompare(b.name)); } else { // Latest (default) - assuming newer products have higher IDs or are first } return result; }, [products, selectedCategorySlug, selectedSubCategory, minPrice, maxPrice, sortBy]); const currentCategoryName = useMemo(() => { if (!selectedCategorySlug) return "আমাদের সকল পণ্য"; return categories.find((c) => c.slug === selectedCategorySlug)?.name || "Category Products"; }, [selectedCategorySlug, categories]); // Handler for category filter toggle const handleCategorySelect = (slug: string | null) => { setSelectedCategorySlug(slug); if (slug) { router.push(`/category/${slug}`); } else { router.push("/shop"); } setMobileFiltersOpen(false); }; const handleSubCategorySelect = (subId: string | null) => { setSelectedSubCategory(selectedSubCategory === subId ? null : subId); setMobileFiltersOpen(false); }; return (
{/* Category Tabs (Mobile only header) */}
Catalog Filters
{/* SIDEBAR FILTER (Desktop style) */} {/* PRODUCTS LIST GRID */}
{/* Header block with count & sorting */}
{filteredAndSortedProducts.length} Products Found {/* Sorting dropdown */}
Sort by:
{/* Heading with left vertical indicator line */}

{currentCategoryName} {selectedSubCategory && ` - ${SUB_CATEGORIES.find(s => s.id === selectedSubCategory)?.name}`}

{/* Product Cards Grid */} {filteredAndSortedProducts.length === 0 ? (

No products match your active filter range.

) : (
{filteredAndSortedProducts.map((product, index) => ( ))}
)}
); }