hey-pharmacist-ecommerce 1.0.4 → 1.0.6

package/src/screens/ShopScreen.tsx

@@ -1,8 +1,28 @@
 'use client';
 
-import React, { useState } from 'react';
-import { motion } from 'framer-motion';
-import { Search, SlidersHorizontal, X } from 'lucide-react';
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useState,
+} from 'react';
+import { AnimatePresence, motion } from 'framer-motion';
+import {
+  ArrowUpDown,
+  ChevronDown,
+  Clock,
+  LayoutGrid,
+  LayoutList,
+  Package,
+  Search,
+  ShieldCheck,
+  SlidersHorizontal,
+  Sparkles,
+  TrendingUp,
+  X,
+} from 'lucide-react';
+import Image from 'next/image';
+import { useRouter } from 'next/navigation';
 import { ProductCard } from '@/components/ProductCard';
 import { ProductCardSkeleton } from '@/components/ui/Skeleton';
 import { EmptyState } from '@/components/EmptyState';
@@ -10,224 +30,1168 @@ import { Button } from '@/components/ui/Button';
 import { Input } from '@/components/ui/Input';
 import { useProducts, useCategories } from '@/hooks/useProducts';
 import { ProductFilters } from '@/lib/types';
-import { Package } from 'lucide-react';
-import { useRouter } from 'next/navigation';
+import { formatPrice } from '@/lib/utils/format';
+
+type SortOption = 'featured' | 'price-low-high' | 'price-high-low' | 'newest';
+type ViewMode = 'grid' | 'list';
 
-export function ShopScreen() {
+interface ShopScreenProps {
+  initialFilters?: ProductFilters;
+  categoryName?: string;
+}
+
+export function ShopScreen({ initialFilters = {}, categoryName }: ShopScreenProps) {
   const router = useRouter();
-  const [filters, setFilters] = useState<ProductFilters>({});
+  const [filters, setFilters] = useState<ProductFilters>(initialFilters);
   const [page, setPage] = useState(1);
   const [showFilters, setShowFilters] = useState(false);
   const [searchQuery, setSearchQuery] = useState('');
+  const [isSearching, setIsSearching] = useState(false);
+  const [sortOption, setSortOption] = useState<SortOption>('featured');
+  const [viewMode, setViewMode] = useState<ViewMode>('grid');
+  const [selectedPriceRange, setSelectedPriceRange] = useState<string | null>(null);
+  const [customPrice, setCustomPrice] = useState<{ min: string; max: string }>({
+    min: '',
+    max: '',
+  });
+  const [expandedCategories, setExpandedCategories] = useState<Record<string, boolean>>({});
 
   const { products, isLoading, pagination } = useProducts(filters, page, 20);
   const { categories } = useCategories();
 
   const handleSearch = (e: React.FormEvent) => {
     e.preventDefault();
-    setFilters({ ...filters, search: searchQuery });
-    setPage(1);
+    if (searchQuery.trim()) {
+      setIsSearching(true);
+      router.push(`/search?q=${encodeURIComponent(searchQuery.trim())}`);
+    }
   };
 
-  const handleCategoryChange = (category: string) => {
-    setFilters({ ...filters, category: category === filters.category ? undefined : category });
-    setPage(1);
+  // Handle search input changes
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setSearchQuery(e.target.value);
+  };
+
+  // Handle search when pressing Enter
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === 'Enter' && searchQuery.trim()) {
+      e.preventDefault();
+      setIsSearching(true);
+      router.push(`/search?q=${encodeURIComponent(searchQuery.trim())}`);
+    }
   };
 
-  const handleClearFilters = () => {
+  const priceRanges = useMemo(
+    () => [
+      { label: `Under ${formatPrice(25)}`, value: 'under-25', min: undefined, max: 25 },
+      { label: `${formatPrice(25)} - ${formatPrice(50)}`, value: '25-50', min: 25, max: 50 },
+      { label: `${formatPrice(50)} - ${formatPrice(100)}`, value: '50-100', min: 50, max: 100 },
+      { label: `Over ${formatPrice(100)}`, value: 'over-100', min: 100, max: undefined },
+    ],
+    []
+  );
+
+  useEffect(() => {
+    setCustomPrice({
+      min: filters.minPrice !== undefined ? String(filters.minPrice) : '',
+      max: filters.maxPrice !== undefined ? String(filters.maxPrice) : '',
+    });
+  }, [filters.minPrice, filters.maxPrice]);
+
+  // Auto-expand active category or parent of active subcategory
+  useEffect(() => {
+    const updates: Record<string, boolean> = {};
+    if (filters.category) updates[filters.category] = true;
+    if (filters.subCategory) {
+      const parent = categories.find((c) =>
+        c.categorySubCategories?.some((sc) => sc.id === filters.subCategory)
+      );
+      if (parent?.id) updates[parent.id] = true;
+    }
+    if (Object.keys(updates).length) {
+      setExpandedCategories((prev) => ({ ...prev, ...updates }));
+    }
+  }, [filters.category, filters.subCategory, categories]);
+
+  const toggleCategoryExpand = useCallback((id: string) => {
+    setExpandedCategories((prev) => ({ ...prev, [id]: !prev[id] }));
+  }, []);
+
+  const sortedCategories = useMemo(
+    () => [...categories].sort((a, b) => a.name?.localeCompare(b.name ?? '') ?? 0),
+    [categories]
+  );
+
+  const topCategories = useMemo(
+    () =>
+      [...categories]
+        .sort((a, b) => (b.productCount ?? 0) - (a.productCount ?? 0))
+        .slice(0, 6),
+    [categories]
+  );
+
+  const productInsights = useMemo(() => {
+    if (!products.length) {
+      return { newArrivals: 0, inStockCount: 0 };
+    }
+
+    const monthAgo = Date.now() - 30 * 24 * 60 * 60 * 1000;
+    let newArrivals = 0;
+    let inStockCount = 0;
+
+    products.forEach((product) => {
+      if (product.inventoryCount > 0) inStockCount += 1;
+      if (new Date(product.createdAt).getTime() >= monthAgo) newArrivals += 1;
+    });
+
+    return { newArrivals, inStockCount };
+  }, [products]);
+  const insightCards = useMemo(
+    () => [
+      {
+        id: 'new',
+        label: 'New arrivals',
+        value: productInsights.newArrivals
+          ? productInsights.newArrivals.toLocaleString()
+          : isLoading
+            ? '...'
+            : '0',
+        helper: filters.newArrivals ? 'Filter active: showing last 30 days' : 'Click to show last 30 days',
+        icon: Sparkles,
+      },
+      {
+        id: 'stock',
+        label: 'Available now',
+        value: productInsights.inStockCount
+          ? productInsights.inStockCount.toLocaleString()
+          : isLoading
+            ? '...'
+            : '0',
+        helper: 'Ready to ship today',
+        icon: ShieldCheck,
+      },
+      {
+        id: 'catalogue',
+        label: 'Total products',
+        value:
+          pagination.total || products.length
+            ? (pagination.total || products.length).toLocaleString()
+            : isLoading
+              ? '...'
+              : '0',
+        helper: 'Across all categories',
+        icon: TrendingUp,
+      },
+    ],
+    [
+      isLoading,
+      pagination.total,
+      productInsights.inStockCount,
+      productInsights.newArrivals,
+      products.length,
+      filters.newArrivals,
+    ]
+  );
+
+  const filteredProducts = useMemo(() => {
+    if (isLoading) return products;
+    let items = [...products];
+    if (filters.tags?.length) {
+      items = items.filter((p) => Array.isArray(p.tags) && p.tags.some((t) => filters.tags!.includes(t)));
+    }
+    if (filters.newArrivals) {
+      const thirtyDaysAgo = Date.now() - 30 * 24 * 60 * 60 * 1000;
+      items = items.filter((p) => new Date(p.createdAt).getTime() >= thirtyDaysAgo);
+    }
+    return items;
+  }, [isLoading, products, filters.tags, filters.newArrivals]);
+
+  const sortedProducts = useMemo(() => {
+    if (isLoading) {
+      return filteredProducts;
+    }
+
+    const items = [...filteredProducts];
+
+    switch (sortOption) {
+      case 'price-low-high':
+        return items.sort((a, b) => a.finalPrice - b.finalPrice);
+      case 'price-high-low':
+        return items.sort((a, b) => b.finalPrice - a.finalPrice);
+      case 'newest':
+        return items.sort(
+          (a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime()
+        );
+      default:
+        return items;
+    }
+  }, [isLoading, filteredProducts, sortOption]);
+
+  const displayedProducts = sortedProducts;
+
+  const quickSearches = useMemo(() => {
+    const counts = new Map<string, number>();
+    products.forEach((p) => {
+      (p.tags || []).forEach((t) => counts.set(t, (counts.get(t) || 0) + 1));
+    });
+    return Array.from(counts.entries())
+      .sort((a, b) => b[1] - a[1])
+      .slice(0, 4)
+      .map(([tag]) => tag);
+  }, [products]);
+
+  const handleQuickSearch = useCallback((term: string) => {
+    setSearchQuery('');
+    setFilters((current) => ({
+      ...current,
+      search: undefined,
+      tags: [term],
+    }));
+    setPage(1);
+  }, []);
+
+  const handleCategoryChange = useCallback(
+    (categorySlug: string) => {
+      setFilters((current) => {
+        if (current.category === categorySlug) {
+          const { category, subCategory, ...rest } = current;
+          return rest;
+        }
+        const next = { ...current, category: categorySlug } as ProductFilters;
+        // clear subCategory when switching parent category
+        if (next.subCategory) {
+          delete (next as any).subCategory;
+        }
+        return next;
+      });
+      setPage(1);
+    },
+    []
+  );
+
+  const handleSubCategoryChange = useCallback((parentCategoryId: string, subCategoryId: string) => {
+    setFilters((current) => {
+      if (current.subCategory === subCategoryId) {
+        const { subCategory, ...rest } = current as any;
+        return rest as ProductFilters;
+      }
+      return { ...current, category: parentCategoryId, subCategory: subCategoryId } as ProductFilters;
+    });
+    setPage(1);
+  }, []);
+
+  const handleToggleStock = useCallback(() => {
+    setFilters((current) => {
+      if (current.inStock) {
+        const { inStock, ...rest } = current;
+        return rest;
+      }
+      return { ...current, inStock: true };
+    });
+    setPage(1);
+  }, []);
+
+  const handleToggleNewArrivals = useCallback(() => {
+    setFilters((current) => {
+      if (current.newArrivals) {
+        const { newArrivals, ...rest } = current;
+        return rest as typeof current;
+      }
+      return { ...current, newArrivals: true };
+    });
+    setPage(1);
+  }, []);
+
+  const handleClearFilters = useCallback(() => {
     setFilters({});
     setSearchQuery('');
+    setSelectedPriceRange(null);
+    setCustomPrice({ min: '', max: '' });
     setPage(1);
-  };
+  }, []);
 
-  const hasActiveFilters = Object.keys(filters).length > 0;
+  const handleRemoveCategory = useCallback(() => {
+    setFilters((current) => {
+      const { category, subCategory, ...rest } = current as any;
+      return rest;
+    });
+    setPage(1);
+  }, []);
+
+  const handleRemoveSubCategory = useCallback(() => {
+    setFilters((current) => {
+      const next = { ...current } as any;
+      delete next.subCategory;
+      return next as ProductFilters;
+    });
+    setPage(1);
+  }, []);
+
+  const handleRemoveSearch = useCallback(() => {
+    setFilters((current) => {
+      const { search, ...rest } = current;
+      return rest;
+    });
+    setSearchQuery('');
+    setPage(1);
+  }, []);
+
+  const handleRemoveInStock = useCallback(() => {
+    setFilters((current) => {
+      const { inStock, ...rest } = current;
+      return rest;
+    });
+    setPage(1);
+  }, []);
+
+  const handleRemovePrice = useCallback(() => {
+    setFilters((current) => {
+      const next = { ...current };
+      delete next.minPrice;
+      delete next.maxPrice;
+      return next;
+    });
+    setSelectedPriceRange(null);
+    setCustomPrice({ min: '', max: '' });
+    setPage(1);
+  }, []);
+
+  const handleRemoveTag = useCallback((tag: string) => {
+    setFilters((current) => {
+      if (!current.tags) return current;
+      const updated = current.tags.filter((item) => item !== tag);
+      const next = { ...current };
+      if (updated.length) {
+        next.tags = updated;
+      } else {
+        delete next.tags;
+      }
+      return next;
+    });
+    setPage(1);
+  }, []);
+
+  const handlePriceRangeSelect = useCallback(
+    (value: string) => {
+      const range = priceRanges.find((item) => item.value === value);
+
+      if (selectedPriceRange === value) {
+        setSelectedPriceRange(null);
+        setFilters((current) => {
+          const next = { ...current };
+          delete next.minPrice;
+          delete next.maxPrice;
+          return next;
+        });
+        setCustomPrice({ min: '', max: '' });
+        setPage(1);
+        return;
+      }
+
+      if (!range) return;
+
+      setSelectedPriceRange(value);
+      setFilters((current) => {
+        const next = { ...current };
+        if (range.min !== undefined) {
+          next.minPrice = range.min;
+        } else {
+          delete next.minPrice;
+        }
+        if (range.max !== undefined) {
+          next.maxPrice = range.max;
+        } else {
+          delete next.maxPrice;
+        }
+        return next;
+      });
+      setCustomPrice({
+        min: range.min !== undefined ? String(range.min) : '',
+        max: range.max !== undefined ? String(range.max) : '',
+      });
+      setPage(1);
+    },
+    [priceRanges, selectedPriceRange]
+  );
+
+  const applyCustomPrice = useCallback(() => {
+    const rawMin = customPrice.min.trim();
+    const rawMax = customPrice.max.trim();
+
+    const minValue = rawMin !== '' ? Number(rawMin) : undefined;
+    const maxValue = rawMax !== '' ? Number(rawMax) : undefined;
+
+    let normalizedMin = minValue;
+    let normalizedMax = maxValue;
+
+    if (
+      normalizedMin !== undefined &&
+      normalizedMax !== undefined &&
+      !Number.isNaN(normalizedMin) &&
+      !Number.isNaN(normalizedMax) &&
+      normalizedMin > normalizedMax
+    ) {
+      [normalizedMin, normalizedMax] = [normalizedMax, normalizedMin];
+    }
+
+    setSelectedPriceRange(null);
+    setFilters((current) => {
+      const next = { ...current };
+
+      if (normalizedMin !== undefined && !Number.isNaN(normalizedMin)) {
+        next.minPrice = normalizedMin;
+      } else {
+        delete next.minPrice;
+      }
+
+      if (normalizedMax !== undefined && !Number.isNaN(normalizedMax)) {
+        next.maxPrice = normalizedMax;
+      } else {
+        delete next.maxPrice;
+      }
+
+      return next;
+    });
+    setPage(1);
+  }, [customPrice]);
+
+  const {
+    search: searchFilter,
+    category: categoryFilter,
+    subCategory: subCategoryFilter,
+    inStock: inStockOnly,
+    minPrice,
+    maxPrice,
+    tags,
+    newArrivals,
+  } = filters;
+
+  const activeFilterChips = useMemo(() => {
+    const chips: { key: string; label: string; onRemove: () => void }[] = [];
+
+    if (searchFilter) {
+      chips.push({
+        key: 'search',
+        label: `Search: "${searchFilter}"`,
+        onRemove: handleRemoveSearch,
+      });
+    }
+
+    if (subCategoryFilter) {
+      let subName: string | undefined;
+      let parentName: string | undefined;
+      categories.forEach((cat) => {
+        const found = cat.categorySubCategories?.find((sc) => sc.id === subCategoryFilter);
+        if (found) {
+          subName = found.name;
+          parentName = cat.name;
+        }
+      });
+      chips.push({
+        key: 'subcategory',
+        label: `Subcategory: ${subName ?? subCategoryFilter}`,
+        onRemove: handleRemoveSubCategory,
+      });
+      if (categoryFilter) {
+        const catObj = categories.find((c) => c.id === categoryFilter);
+        chips.push({
+          key: 'category',
+          label: `Category: ${catObj?.name ?? parentName ?? categoryFilter}`,
+          onRemove: handleRemoveCategory,
+        });
+      }
+    } else if (categoryFilter) {
+      const category = categories.find((cat) => cat.id === categoryFilter);
+      chips.push({
+        key: 'category',
+        label: `Category: ${category?.name ?? categoryFilter}`,
+        onRemove: handleRemoveCategory,
+      });
+    }
+
+    if (inStockOnly) {
+      chips.push({
+        key: 'stock',
+        label: 'In stock',
+        onRemove: handleRemoveInStock,
+      });
+    }
+
+    if (minPrice !== undefined || maxPrice !== undefined) {
+      const minLabel = minPrice !== undefined ? formatPrice(minPrice) : 'Any';
+      const maxLabel = maxPrice !== undefined ? formatPrice(maxPrice) : 'Any';
+      chips.push({
+        key: 'price',
+        label: `Price: ${minLabel} - ${maxLabel}`,
+        onRemove: handleRemovePrice,
+      });
+    }
+
+    if (tags?.length) {
+      tags.forEach((tag) => {
+        chips.push({
+          key: `tag-${tag}`,
+          label: `Tag: ${tag}`,
+          onRemove: () => handleRemoveTag(tag),
+        });
+      });
+    }
+
+    if (newArrivals) {
+      chips.push({
+        key: 'new-arrivals',
+        label: 'New arrivals',
+        onRemove: handleToggleNewArrivals,
+      });
+    }
+
+    return chips;
+  }, [
+    categories,
+    categoryFilter,
+    subCategoryFilter,
+    handleRemoveCategory,
+    handleRemoveSubCategory,
+    handleRemoveInStock,
+    handleRemovePrice,
+    handleRemoveSearch,
+    handleRemoveTag,
+    inStockOnly,
+    maxPrice,
+    minPrice,
+    searchFilter,
+    tags,
+    newArrivals,
+  ]);
+
+  const hasActiveFilters = activeFilterChips.length > 0;
+
+  const isCustomPriceDirty =
+    customPrice.min.trim() !== '' || customPrice.max.trim() !== '';
+
+  const renderFiltersPanel = () => (
+    <>
+    <div className="space-y-8">
+    <div className="space-y-8">
+      <div className="flex items-start justify-between gap-3">
+        <div>
+          <h3 className="text-lg font-semibold text-gray-900">Refine results</h3>
+          <p className="mt-1 text-sm text-gray-500">
+            Filter by category, price, and availability to find the perfect fit faster.
+          </p>
+        </div>
+        {hasActiveFilters && (
+          <button
+            type="button"
+            onClick={handleClearFilters}
+            className="text-sm font-semibold text-primary-600 hover:text-primary-700"
+          >
+            Clear all
+          </button>
+        )}
+      </div>
+
+      <div className="space-y-6">
+        <div className="space-y-3">
+          <h4 className="text-xs font-semibold uppercase tracking-[0.2em] text-gray-500">Categories</h4>
+          <div className="space-y-2">
+            {sortedCategories.length === 0 && (
+              <span className="text-sm text-gray-500">No categories available yet.</span>
+            )}
+            {sortedCategories.map((category) => {
+              const isCategoryActive = categoryFilter === category.id;
+              const isExpanded = !!expandedCategories[category.id as string];
+              return (
+                <div key={category.id} className="rounded-xl  border-gray-100 bg-white/50">
+                  <div
+                    role="button"
+                    tabIndex={0}
+                    onClick={() => {
+                      // Selecting a category also expands it for quick access to subcategories
+                      if (!isExpanded) toggleCategoryExpand(category.id ?? '');
+                      handleCategoryChange(category.id ?? '');
+                    }}
+                    className={`flex w-full items-center justify-between rounded-xl px-3 py-2 text-sm font-medium transition ${
+                      isCategoryActive
+                        ? 'text-primary-700 bg-primary-50'
+                        : 'text-gray-700 hover:text-primary-700 hover:bg-primary-50/50'
+                    }`}
+                  >
+                    <span className="flex items-center gap-2">
+                      <span className='font-medium'>{category.name}</span>
+                      {category.productCount > 0 && (
+                        <span className={`ml-1 rounded-full bg-gray-100 px-2 py-0.5 text-xs ${isCategoryActive ? 'text-primary-700' : 'text-gray-500'}`}>
+                          {category.productCount}
+                        </span>
+                      )}
+                    </span>
+                    <button
+                      type="button"
+                      onClick={(e) => {
+                        e.preventDefault();
+                        e.stopPropagation();
+                        toggleCategoryExpand(category.id ?? '');
+                      }}
+                      className="rounded-md p-1 hover:bg-gray-100"
+                      aria-label={isExpanded ? 'Collapse' : 'Expand'}
+                    >
+                      <ChevronDown className={`h-4 w-4 transition-transform ${isExpanded ? 'rotate-180 text-primary-600' : 'rotate-0 text-gray-400'}`} />
+                    </button>
+                  </div>
+                  {isExpanded && Array.isArray(category.categorySubCategories) && category.categorySubCategories.length > 0 && (
+                    <div className="mt-1  border-gray-100 px-2 pb-2 pl-4">
+                      <div className="divide-y divide-gray-100">
+                        {category.categorySubCategories.map((sub) => {
+                          const isSubActive = subCategoryFilter === sub.id;
+                          return (
+                            <button
+                              key={sub.id}
+                              type="button"
+                              onClick={() => handleSubCategoryChange(category.id ?? '', sub.id)}
+                              className={`block w-full px-2 py-2 text-sm text-start transition ${
+                                isSubActive
+                                  ? 'text-primary-700'
+                                  : 'text-gray-600 hover:text-primary-700 '
+                              }`}
+                            >
+                              {sub.name}
+                            </button>
+                          );
+                        })}
+                      </div>
+                    </div>
+                  )}
+                </div>
+              );
+            })}
+          </div>
+        </div>
+      </div>
+    </div>
+
+        <div className="space-y-4">
+          <h4 className="text-xs font-semibold uppercase tracking-[0.2em] text-gray-500">
+            Price
+          </h4>
+          <div className="flex flex-wrap gap-2">
+            {priceRanges.map((range) => {
+              const isActive = selectedPriceRange === range.value;
+              return (
+                <button
+                  type="button"
+                  key={range.value}
+                  onClick={() => handlePriceRangeSelect(range.value)}
+                  className={`rounded-full border px-3 py-1.5 text-sm font-medium transition ${
+                    isActive
+                      ? 'border-secondary-600 bg-secondary-600 text-white shadow-lg shadow-secondary-500/30'
+                      : 'border-gray-200 bg-white text-gray-600 hover:border-secondary-300 hover:text-secondary-600'
+                  }`}
+                >
+                  {range.label}
+                </button>
+              );
+            })}
+          </div>
+          <div className="grid grid-cols-2 gap-3">
+            <Input
+              type="number"
+              min="0"
+              placeholder="Custom min"
+              value={customPrice.min}
+              onChange={(event) =>
+                setCustomPrice((current) => ({ ...current, min: event.target.value }))
+              }
+            />
+            <Input
+              type="number"
+              min="0"
+              placeholder="Custom max"
+              value={customPrice.max}
+              onChange={(event) =>
+                setCustomPrice((current) => ({ ...current, max: event.target.value }))
+              }
+            />
+          </div>
+          <button
+            type="button"
+            onClick={applyCustomPrice}
+            disabled={!isCustomPriceDirty}
+            className="w-full rounded-xl border border-primary-500 bg-primary-500/10 px-4 py-2.5 text-sm font-semibold text-primary-700 transition hover:bg-primary-500/20 disabled:cursor-not-allowed disabled:border-gray-200 disabled:text-gray-400"
+          >
+            Apply price range
+          </button>
+        </div>
+
+        <div className="space-y-3">
+          <h4 className="text-xs font-semibold uppercase tracking-[0.2em] text-gray-500">
+            Availability
+          </h4>
+          <button
+            type="button"
+            onClick={handleToggleStock}
+            className={`flex w-full items-center justify-between rounded-xl border px-4 py-3 text-sm font-medium transition ${
+              inStockOnly
+                ? 'border-primary-500 bg-primary-50 text-primary-700'
+                : 'border-gray-200 bg-white text-gray-600 hover:border-primary-300 hover:text-primary-600'
+            }`}
+          >
+            <span>In stock only</span>
+            <Sparkles className="h-4 w-4 text-primary-500" />
+          </button>
+          <button
+            type="button"
+            onClick={handleToggleNewArrivals}
+            className={`mt-2 flex w-full items-center justify-between rounded-xl border px-4 py-3 text-sm font-medium transition ${
+              newArrivals
+                ? 'border-secondary-500 bg-secondary-50 text-secondary-700'
+                : 'border-gray-200 bg-white text-gray-600 hover:border-secondary-300 hover:text-secondary-600'
+            }`}
+          >
+            <span>New arrivals (last 30 days)</span>
+            <Sparkles className="h-4 w-4 text-secondary-500" />
+          </button>
+        </div>
+      </div>
+    </>
+  );
 
   return (
-    <div className="min-h-screen bg-gray-50">
-      {/* Hero Section */}
-      <section className="bg-gradient-to-br from-primary-600 via-primary-700 to-secondary-600 text-white py-20">
-        <div className="container mx-auto px-4">
+    <div className="min-h-screen bg-slate-50">
+      <section className="relative overflow-hidden bg-gradient-to-br from-[rgb(var(--header-from))] via-[rgb(var(--header-via))] to-[rgb(var(--header-to))] text-white">
+        <div
+          className="absolute inset-0 bg-[radial-gradient(circle_at_top_left,_rgba(255,255,255,0.35),_transparent_60%)]"
+          aria-hidden="true"
+        />
+        <div className="absolute inset-0 bg-[radial-gradient(circle_at_bottom_right,_rgba(94,234,212,0.35),_transparent_55%)] opacity-60" />
+        <div className="relative container mx-auto px-4 py-24">
           <motion.div
-            initial={{ opacity: 0, y: 20 }}
+            initial={{ opacity: 0, y: 24 }}
             animate={{ opacity: 1, y: 0 }}
-            className="max-w-3xl mx-auto text-center"
+            className="max-w-3xl space-y-8 text-center md:mx-auto md:text-left"
           >
-            <h1 className="text-5xl md:text-6xl font-bold mb-6">
-              Discover Amazing Products
+            <span className="inline-flex items-center gap-2 rounded-full bg-white/10 px-4 py-2 text-sm font-semibold tracking-wide text-white/80 backdrop-blur">
+              <Sparkles className="h-4 w-4" />
+              Wellness products, curated for you
+            </span>
+            <h1 className="text-4xl font-bold leading-tight md:text-6xl">
+              Find pharmacy favorites crafted to keep your family thriving
             </h1>
-            <p className="text-xl text-primary-100 mb-8">
-              Browse our curated collection of quality products at great prices
+            <p className="text-lg text-white/80 md:text-xl">
+              Explore a modern storefront with real-time inventory, smart filters, and rich
+              product details designed to make healthier choices easier.
             </p>
-
-            {/* Search Bar */}
-            <form onSubmit={handleSearch} className="max-w-2xl mx-auto">
-              <div className="relative">
-                <Input
+            <form
+              onSubmit={handleSearch}
+              className="mx-auto max-w-2xl md:mx-0"
+            >
+              <div className="relative w-full">
+                <input
                   type="search"
-                  placeholder="Search for products..."
+                  placeholder="Search for products, categories, or symptoms..."
                   value={searchQuery}
-                  onChange={(e) => setSearchQuery(e.target.value)}
-                  className="pr-12 text-lg"
+                  onChange={handleInputChange}
+                  onKeyDown={handleKeyDown}
+                  className="flex h-12 w-full rounded-xl border border-white/20 bg-white/10 px-4 py-2 pr-14 text-lg text-white placeholder-white/60 shadow-2xl shadow-primary-900/20 backdrop-blur focus:border-white/30 focus:outline-none focus:ring-2 focus:ring-white/20 disabled:opacity-50"
+                  disabled={isSearching}
                 />
                 <button
                   type="submit"
-                  className="absolute right-2 top-1/2 -translate-y-1/2 p-2 bg-primary-600 text-white rounded-lg hover:bg-primary-700 transition-colors"
+                  className="absolute right-2 top-1/2 -translate-y-1/2 rounded-xl bg-white/20 p-3 text-white transition hover:bg-white/30 disabled:opacity-50"
+                  disabled={!searchQuery.trim() || isSearching}
                 >
-                  <Search className="w-5 h-5" />
+                  {isSearching ? (
+                    <div className="h-5 w-5 animate-spin rounded-full border-2 border-white border-t-transparent" />
+                  ) : (
+                    <Search className="h-5 w-5" />
+                  )}
                 </button>
               </div>
             </form>
           </motion.div>
-        </div>
-      </section>
 
-      {/* Main Content */}
-      <div className="container mx-auto px-4 py-12">
-        <div className="flex gap-8">
-          {/* Sidebar Filters - Desktop */}
-          <aside className="hidden lg:block w-64 flex-shrink-0">
-            <div className="bg-white rounded-2xl p-6 shadow-sm sticky top-24">
-              <div className="flex items-center justify-between mb-6">
-                <h3 className="text-lg font-bold text-gray-900">Filters</h3>
-                {hasActiveFilters && (
+          <motion.div
+            initial={{ opacity: 0, y: 24 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ delay: 0.15 }}
+            className="mt-12 flex flex-col gap-6 rounded-3xl border border-white/20 bg-white/10 p-6 backdrop-blur md:flex-row md:items-center md:justify-between"
+          >
+            <div className="space-y-3">
+              <p className="text-sm font-semibold uppercase tracking-[0.3em] text-white/60">
+                Explore popular searches
+              </p>
+              <div className="flex flex-wrap gap-2">
+                {quickSearches.map((term) => (
                   <button
-                    onClick={handleClearFilters}
-                    className="text-sm text-primary-600 hover:text-primary-700 font-medium"
+                    key={term}
+                    type="button"
+                    onClick={() => handleQuickSearch(term)}
+                    className="rounded-full border border-white/30 bg-white/10 px-4 py-2 text-sm font-medium text-white transition hover:border-white/50 hover:bg-white/20"
                   >
-                    Clear All
+                    {term}
                   </button>
-                )}
+                ))}
               </div>
-
-              {/* Categories */}
-              <div className="space-y-4">
-                <h4 className="font-semibold text-gray-900">Categories</h4>
-                <div className="space-y-2">
-                  {categories.map((category) => (
-                    <label
+            </div>
+            {topCategories.length > 0 && (
+              <div className="space-y-3 md:text-right">
+                <p className="text-sm font-semibold uppercase tracking-[0.3em] text-white/60">
+                  Trending categories
+                </p>
+                <div className="flex flex-wrap justify-start gap-2 md:justify-end">
+                  {topCategories.map((category) => (
+                    <button
                       key={category.id}
-                      className="flex items-center gap-3 cursor-pointer hover:bg-gray-50 p-2 rounded-lg transition-colors"
+                      type="button"
+                      onClick={() => handleCategoryChange(category.id ?? '')}
+                      className="rounded-full bg-white/15 px-3 py-1.5 text-sm font-medium text-white transition hover:bg-white/25"
                     >
-                      <input
-                        type="checkbox"
-                        checked={filters.category === category.slug}
-                        onChange={() => handleCategoryChange(category.slug)}
-                        className="w-5 h-5 text-primary-600 rounded"
-                      />
-                      <span className="text-gray-700">{category.name}</span>
-                      <span className="ml-auto text-sm text-gray-500">
-                        ({category.productCount})
-                      </span>
-                    </label>
+                      {category.name}
+                    </button>
                   ))}
                 </div>
               </div>
+            )}
+          </motion.div>
+
+          <div className="mt-10 grid gap-4 md:grid-cols-3">
+            {insightCards.map((card, index) => {
+              const Icon = card.icon;
+              return (
+                <motion.div
+                  key={card.id}
+                  initial={{ opacity: 0, y: 20 }}
+                  animate={{ opacity: 1, y: 0 }}
+                  transition={{ delay: 0.2 + index * 0.05 }}
+                  className={`rounded-2xl border p-5 backdrop-blur ${
+                    card.id === 'new' && newArrivals
+                      ? 'border-white/40 bg-white/25 ring-2 ring-white/30'
+                      : 'border-white/20 bg-white/15'
+                  } ${card.id === 'new' ? 'cursor-pointer hover:bg-white/20' : ''}`}
+                  onClick={card.id === 'new' ? handleToggleNewArrivals : undefined}
+                  role={card.id === 'new' ? 'button' : undefined}
+                  aria-pressed={card.id === 'new' ? (newArrivals ? 'true' : 'false') : undefined}
+                  title={card.id === 'new' ? (newArrivals ? 'Filter active: showing products from the last 30 days' : 'Click to filter products from the last 30 days') : undefined}
+                >
+                  <div className="flex items-center justify-between">
+                    <div>
+                      <p className="text-sm font-semibold uppercase tracking-[0.3em] text-white/60">
+                        {card.label}
+                      </p>
+                      <p className="mt-2 text-3xl font-semibold text-white">{card.value}</p>
+                    </div>
+                    <span className="rounded-full bg-white/20 p-3 text-white">
+                      <Icon className="h-5 w-5" />
+                    </span>
+                  </div>
+                  <p className="mt-3 text-sm text-white/70">{card.helper}</p>
+                </motion.div>
+              );
+            })}
+          </div>
+        </div>
+      </section>
 
-              {/* Stock Status */}
-              <div className="space-y-4 mt-8">
-                <h4 className="font-semibold text-gray-900">Availability</h4>
-                <label className="flex items-center gap-3 cursor-pointer hover:bg-gray-50 p-2 rounded-lg transition-colors">
-                  <input
-                    type="checkbox"
-                    checked={filters.inStock === true}
-                    onChange={(e) =>
-                      setFilters({ ...filters, inStock: e.target.checked ? true : undefined })
-                    }
-                    className="w-5 h-5 text-primary-600 rounded"
-                  />
-                  <span className="text-gray-700">In Stock Only</span>
-                </label>
+      <div className="relative z-10 -mt-12 pb-16">
+        <div className="container mx-auto px-4">
+          <div className="flex flex-col gap-8 lg:flex-row">
+            <aside className="hidden w-72 flex-shrink-0 lg:block">
+              <div className="sticky top-24 rounded-3xl border border-gray-100 bg-white p-6 shadow-xl shadow-gray-200/40">
+                {renderFiltersPanel()}
               </div>
-            </div>
-          </aside>
-
-          {/* Products Grid */}
-          <div className="flex-1">
-            {/* Mobile Filter Button */}
-            <div className="lg:hidden mb-6">
-              <Button
-                variant="outline"
-                onClick={() => setShowFilters(!showFilters)}
-                className="w-full"
-              >
-                <SlidersHorizontal className="w-5 h-5" />
-                Filters
+            </aside>
+
+            <main className="flex-1 space-y-6">
+              <div className="rounded-3xl border border-gray-100 bg-white p-6 shadow-sm">
+                <div className="flex flex-col gap-6 md:flex-row md:items-center md:justify-between">
+                  <div>
+                    <h2 className="text-2xl font-bold text-gray-900">All products</h2>
+                    <p className="mt-1 text-sm text-gray-500">
+                      Browse a pharmacy-grade catalogue with smart merchandising and modern UI.
+                    </p>
+                  </div>
+                  <div className="flex flex-col gap-3 md:flex-row md:items-center">
+                    <div className="relative">
+                      <ArrowUpDown className="pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-gray-400" />
+                      <select
+                        value={sortOption}
+                        onChange={(event) => {
+                          setSortOption(event.target.value as SortOption);
+                        }}
+                        className="appearance-none rounded-xl border border-gray-200 bg-white py-2.5 pl-10 pr-9 text-sm font-medium text-gray-700 shadow-sm transition focus:border-primary-500 focus:outline-none focus:ring-2 focus:ring-primary-500/30"
+                      >
+                        <option value="featured">Featured products</option>
+                        <option value="price-low-high">Price: low to high</option>
+                        <option value="price-high-low">Price: high to low</option>
+                        <option value="newest">Newest arrivals</option>
+                      </select>
+                      <ChevronDown className="pointer-events-none absolute right-3 top-1/2 -translate-y-1/2 h-4 w-4 text-gray-400" />
+                    </div>
+                    <div className="flex items-center rounded-xl border border-gray-200 bg-white shadow-sm">
+                      <button
+                        type="button"
+                        onClick={() => setViewMode('grid')}
+                        className={`flex items-center gap-2 rounded-l-xl px-4 py-2 text-sm font-medium transition ${
+                          viewMode === 'grid'
+                            ? 'bg-primary-50 text-primary-600'
+                            : 'text-gray-500 hover:text-gray-700'
+                        }`}
+                        aria-pressed={viewMode === 'grid'}
+                      >
+                        <LayoutGrid className="h-4 w-4" />
+                        Grid
+                      </button>
+                      <button
+                        type="button"
+                        onClick={() => setViewMode('list')}
+                        className={`flex items-center gap-2 rounded-r-xl px-4 py-2 text-sm font-medium transition ${
+                          viewMode === 'list'
+                            ? 'bg-primary-50 text-primary-600'
+                            : 'text-gray-500 hover:text-gray-700'
+                        }`}
+                        aria-pressed={viewMode === 'list'}
+                      >
+                        <LayoutList className="h-4 w-4" />
+                        List
+                      </button>
+                    </div>
+                  </div>
+                </div>
+
+                <div className="mt-4 md:hidden">
+                  <Button
+                    variant="outline"
+                    className="w-full"
+                    onClick={() => setShowFilters(true)}
+                  >
+                    <SlidersHorizontal className="h-5 w-5" />
+                    Filters
+                    {hasActiveFilters && (
+                      <span className="ml-2 rounded-full bg-primary-600 px-2 py-0.5 text-xs font-semibold text-white">
+                        {activeFilterChips.length}
+                      </span>
+                    )}
+                  </Button>
+                </div>
+
                 {hasActiveFilters && (
-                  <span className="ml-2 px-2 py-0.5 bg-primary-600 text-white text-xs rounded-full">
-                    Active
-                  </span>
+                  <div className="mt-6 flex flex-wrap items-center gap-2 border-t border-gray-100 pt-4">
+                    {activeFilterChips.map((chip) => (
+                      <button
+                        key={chip.key}
+                        type="button"
+                        onClick={chip.onRemove}
+                        className="group flex items-center gap-2 rounded-full bg-primary-50 px-3 py-1.5 text-sm font-medium text-primary-700 transition hover:bg-primary-100"
+                      >
+                        {chip.label}
+                        <X className="h-4 w-4 text-primary-500 group-hover:text-primary-700" />
+                      </button>
+                    ))}
+                    <button
+                      type="button"
+                      onClick={handleClearFilters}
+                      className="text-sm font-semibold text-gray-500 hover:text-gray-700"
+                    >
+                      Reset all
+                    </button>
+                  </div>
                 )}
-              </Button>
-            </div>
+              </div>
 
-            {/* Results Header */}
-            <div className="flex items-center justify-between mb-6">
-              <p className="text-gray-600">
-                {isLoading ? (
-                  'Loading...'
-                ) : (
-                  <>
-                    Showing {products.length} of {pagination.total} products
-                  </>
-                )}
-              </p>
-            </div>
+              <div className="rounded-3xl border border-gray-100 bg-white p-6 shadow-sm">
+                <div className="flex flex-col gap-3 text-sm text-gray-600 md:flex-row md:items-center md:justify-between">
+                  <span>
+                    {isLoading
+                      ? 'Loading products...'
+                      : `Showing ${displayedProducts.length} of ${pagination.total || displayedProducts.length} products`}
+                  </span>
+                  <span className="inline-flex items-center gap-2 text-gray-400">
+                    <Clock className="h-4 w-4" />
+                    Updated a moment ago
+                  </span>
+                </div>
 
-            {/* Products Grid */}
-            {isLoading ? (
-              <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
-                {Array.from({ length: 6 }).map((_, i) => (
-                  <ProductCardSkeleton key={i} />
-                ))}
-              </div>
-            ) : products.length > 0 ? (
-              <>
-                <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
-                  {products.map((product) => (
-                    <ProductCard
-                      key={product.id}
-                      product={product}
-                      onClickProduct={(p) => router.push(`/products/${p.id}`)}
+                <div className="mt-6">
+                  {isLoading ? (
+                    <div className="grid grid-cols-1 gap-6 sm:grid-cols-2 xl:grid-cols-3">
+                      {Array.from({ length: 6 }).map((_, index) => (
+                        <ProductCardSkeleton key={index} />
+                      ))}
+                    </div>
+                  ) : displayedProducts.length > 0 ? (
+                    viewMode === 'grid' ? (
+                      <div className="grid grid-cols-1 gap-6 sm:grid-cols-2 xl:grid-cols-3">
+                        {displayedProducts.map((product) => (
+                          <div key={product.id} className="h-full">
+                            <ProductCard
+                              product={product}
+                              onClickProduct={(item) => {
+                                const productData = encodeURIComponent(JSON.stringify(item));
+                                router.push(`/products/${item.id}?product=${productData}`);
+                              }}
+                            />
+                          </div>
+                        ))}
+                      </div>
+                    ) : (
+                      <div className="space-y-4">
+                        {displayedProducts.map((product) => {
+                          const discount =
+                            product.priceBeforeDiscount && product.priceBeforeDiscount > product.finalPrice
+                              ? Math.round(
+                                  ((product.priceBeforeDiscount - product.finalPrice) /
+                                    product.priceBeforeDiscount) *
+                                    100
+                                )
+                              : 0;
+
+                          return (
+                            <motion.div
+                              key={product.id}
+                              whileHover={{ y: -4 }}
+                              className="group flex cursor-pointer flex-col gap-6 rounded-2xl border border-gray-100 bg-white p-5 shadow-sm transition hover:shadow-xl md:flex-row md:items-start"
+                              onClick={() => router.push(`/products/${product.id}`)}
+                            >
+                              <div className="relative h-48 w-full overflow-hidden rounded-2xl bg-gray-100 md:h-40 md:w-40">
+                                <Image
+                                  src={product.productMedia[0]?.file || '/placeholder-product.jpg'}
+                                  alt={product.name}
+                                  fill
+                                  className="object-cover transition duration-500 group-hover:scale-105"
+                                />
+                              </div>
+
+                              <div className="flex-1 space-y-3">
+                                <div className="flex flex-wrap items-center gap-2 text-xs font-semibold uppercase tracking-wide text-primary-600">
+                                  {product.parentCategories.length > 0 && (
+                                    <span className="rounded-full bg-primary-50 px-3 py-1 text-primary-700">
+                                      {product.parentCategories.map((category) => category?.name).join(', ')}
+                                    </span>
+                                  )}
+                                  {product.tags?.slice(0, 3).map((tag) => (
+                                    <span
+                                      key={tag}
+                                      className="rounded-full bg-slate-100 px-3 py-1 text-gray-600"
+                                    >
+                                      {tag}
+                                    </span>
+                                  ))}
+                                </div>
+                                <h3 className="text-xl font-semibold text-gray-900">
+                                  {product.name}
+                                </h3>
+                                {/* {product.description && (
+                                  <p className="text-sm leading-relaxed text-gray-600 line-clamp-2">
+                                    {product.description}
+                                  </p>
+                                )} */}
+                                <div className="flex flex-wrap items-center gap-4 text-sm text-gray-500">
+                                  <span className="inline-flex items-center gap-2 font-medium text-primary-600">
+                                    <ShieldCheck className="h-4 w-4" />
+                                    {product.inventoryCount > 0 ? 'In stock & ready to ship' : 'Restocking soon'}
+                                  </span>
+                                  <span className="inline-flex items-center gap-2">
+                                    <Clock className="h-4 w-4 text-primary-500" />
+                                    Added {new Date(product.createdAt).toLocaleDateString()}
+                                  </span>
+                                </div>
+                              </div>
+
+                              <div className="flex w-full flex-col items-end gap-3 md:w-auto">
+                                <div className="text-right">
+                                  <p className="text-3xl font-semibold text-gray-900">
+                                    {formatPrice(product.finalPrice)}
+                                  </p>
+                                  {product.priceBeforeDiscount && (
+                                    <p className="text-sm text-gray-400 line-through">
+                                      {formatPrice(product.priceBeforeDiscount)}
+                                    </p>
+                                  )}
+                                </div>
+                                <Button
+                                  size="sm"
+                                  onClick={(event) => {
+                                    event.stopPropagation();
+                                    router.push(`/products/${product._id}`);
+                                  }}
+                                >
+                                  View product
+                                </Button>
+                              </div>
+                            </motion.div>
+                          );
+                        })}
+                      </div>
+                    )
+                  ) : (
+                    <EmptyState
+                      icon={Package}
+                      title="No products found"
+                      description="Try adjusting your filters or search terms to uncover more results."
+                      actionLabel={hasActiveFilters ? 'Clear filters' : undefined}
+                      onAction={hasActiveFilters ? handleClearFilters : undefined}
                     />
-                  ))}
+                  )}
                 </div>
 
-                {/* Pagination */}
                 {pagination.totalPages > 1 && (
-                  <div className="flex justify-center items-center gap-2 mt-12">
+                  <div className="mt-10 flex flex-wrap items-center justify-center gap-3">
                     <Button
                       variant="outline"
-                      onClick={() => setPage(page - 1)}
+                      onClick={() => setPage((current) => Math.max(1, current - 1))}
                       disabled={page === 1}
                     >
                       Previous
                     </Button>
-                    <span className="px-4 text-gray-700">
+                    <span className="text-sm font-semibold text-gray-600">
                       Page {page} of {pagination.totalPages}
                     </span>
                     <Button
                       variant="outline"
-                      onClick={() => setPage(page + 1)}
+                      onClick={() =>
+                        setPage((current) => Math.min(pagination.totalPages, current + 1))
+                      }
                       disabled={page === pagination.totalPages}
                     >
                       Next
                     </Button>
                   </div>
                 )}
-              </>
-            ) : (
-              <EmptyState
-                icon={Package}
-                title="No products found"
-                description="Try adjusting your filters or search query"
-                actionLabel={hasActiveFilters ? 'Clear Filters' : undefined}
-                onAction={hasActiveFilters ? handleClearFilters : undefined}
-              />
-            )}
+              </div>
+            </main>
           </div>
         </div>
       </div>
+
+      <AnimatePresence>
+        {showFilters && (
+          <motion.div
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            exit={{ opacity: 0 }}
+            className="fixed inset-0 z-50 bg-black/40 backdrop-blur-sm lg:hidden"
+          >
+            <motion.div
+              initial={{ y: '100%' }}
+              animate={{ y: 0 }}
+              exit={{ y: '100%' }}
+              transition={{ type: 'spring', stiffness: 260, damping: 26 }}
+              className="absolute inset-x-0 bottom-0 max-h-[85vh] overflow-y-auto rounded-t-3xl bg-white p-6 shadow-2xl"
+            >
+              <div className="mb-6 flex items-center justify-between">
+                <h3 className="text-lg font-semibold text-gray-900">Filters</h3>
+                <button
+                  type="button"
+                  onClick={() => setShowFilters(false)}
+                  className="rounded-full border border-gray-200 p-2 text-gray-500 hover:text-gray-700"
+                >
+                  <X className="h-4 w-4" />
+                </button>
+              </div>
+              {renderFiltersPanel()}
+            </motion.div>
+          </motion.div>
+        )}
+      </AnimatePresence>
     </div>
   );
 }
-