{"path":"src/components/ProductList.tsx","size":6058,"locked":false,"binary":false,"truncated":false,"content":"\"use client\";\n\nimport { useEffect, useState, useCallback, useRef } from \"react\";\nimport { useRouter, useSearchParams } from \"next/navigation\";\nimport Link from \"next/link\";\nimport { ProductCard } from \"@/components/ProductCard\";\nimport { Search, X, Home } from \"lucide-react\";\n\nexport function ProductList({\n  chat,\n  ratingStats,\n  initialProducts,\n  initialTotalPages,\n}: {\n  chat: any;\n  ratingStats: Record<string, { average: number; count: number }>;\n  initialProducts: any[];\n  initialTotalPages: number;\n}) {\n  const router = useRouter();\n  const searchParams = useSearchParams();\n  const currentPage = parseInt(searchParams.get(\"page\") || \"1\", 10);\n  const searchQuery = searchParams.get(\"search\") || \"\";\n\n  const [products, setProducts] = useState<any[]>(initialProducts);\n  const [totalPages, setTotalPages] = useState(initialTotalPages);\n  const [loading, setLoading] = useState(false);\n  const [inputValue, setInputValue] = useState(searchQuery);\n  const isFirstRender = useRef(true);\n\n  const fetchProducts = useCallback(async () => {\n    if (isFirstRender.current) {\n      isFirstRender.current = false;\n      return;\n    }\n\n    setLoading(true);\n    const res = await fetch(\n      `/api/products?page=${currentPage}&search=${encodeURIComponent(searchQuery)}`\n    );\n    const data = await res.json();\n    if (data.products) {\n      setProducts(data.products);\n      setTotalPages(data.totalPages || 0);\n    }\n    setLoading(false);\n  }, [currentPage, searchQuery]);\n\n  useEffect(() => {\n    fetchProducts();\n  }, [fetchProducts]);\n\n  const handleSearch = (e: React.FormEvent) => {\n    e.preventDefault();\n    const params = new URLSearchParams();\n    if (inputValue.trim()) {\n      params.set(\"search\", inputValue.trim());\n    }\n    params.set(\"page\", \"1\");\n    router.push(`/?${params.toString()}`, { scroll: true });\n  };\n\n  // Clears only the text input – does NOT change the search results\n  const handleClearText = () => {\n    setInputValue(\"\");\n  };\n\n  // Resets everything and goes back to the full product list\n  const handleResetToHome = () => {\n    setInputValue(\"\");\n    router.push(\"/\", { scroll: true });\n  };\n\n  const buildPageUrl = (page: number) => {\n    const params = new URLSearchParams();\n    params.set(\"page\", String(page));\n    if (searchQuery) params.set(\"search\", searchQuery);\n    return `/?${params.toString()}`;\n  };\n\n  return (\n    <main id=\"products\" className=\"mx-auto max-w-7xl px-4 md:px-6 py-12 md:py-20\">\n      {/* Search bar */}\n      <div className=\"flex flex-col sm:flex-row sm:items-center justify-between border-b border-neutral-200 pb-5 mb-10 gap-4\">\n        <div>\n          <span className=\"text-[10px] md:text-xs tracking-widest text-neutral-400 uppercase font-medium\">\n            Collection\n          </span>\n          <h2 className=\"font-serif text-xl md:text-2xl font-medium tracking-wide mt-1\">\n            Our Products\n          </h2>\n        </div>\n\n        <div className=\"flex items-center gap-2\">\n          {/* Home button – reset to full catalogue */}\n          <button\n            onClick={handleResetToHome}\n            className=\"text-neutral-400 hover:text-black transition p-2\"\n            title=\"Back to main page\"\n          >\n            <Home className=\"w-4 h-4\" />\n          </button>\n\n          <form onSubmit={handleSearch} className=\"flex items-center gap-2\">\n            <input\n              type=\"text\"\n              value={inputValue}\n              onChange={(e) => setInputValue(e.target.value)}\n              placeholder=\"Search...\"\n              className=\"w-full sm:w-48 bg-[#f4f4f4] border border-neutral-200 rounded-sm px-3 py-2 text-xs focus:outline-none focus:border-neutral-300 transition font-light\"\n            />\n            <button\n              type=\"submit\"\n              className=\"bg-black text-white text-xs uppercase tracking-wider px-4 py-2 rounded-sm hover:bg-neutral-800 transition\"\n            >\n              <Search className=\"w-3.5 h-3.5\" />\n            </button>\n          </form>\n\n          {/* Clear text button – only visible when input is not empty */}\n          {inputValue && (\n            <button\n              onClick={handleClearText}\n              className=\"text-neutral-400 hover:text-black transition p-2\"\n              title=\"Clear search text\"\n            >\n              <X className=\"w-4 h-4\" />\n            </button>\n          )}\n        </div>\n      </div>\n\n      {/* Loading bar (subtle) */}\n      {loading && (\n        <div className=\"w-full h-0.5 bg-neutral-200 mb-6 relative overflow-hidden\">\n          <div className=\"absolute inset-y-0 left-0 bg-black w-1/3 animate-loading-bar\" />\n        </div>\n      )}\n\n      {products.length > 0 ? (\n        <>\n          <div className=\"reveal-grid grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 md:gap-8\">\n            {products.map((product) => (\n              <ProductCard\n                key={product.id}\n                product={product}\n                chat={chat}\n                ratingStats={ratingStats}\n              />\n            ))}\n          </div>\n\n          {totalPages > 1 && (\n            <div className=\"mt-12 flex justify-center gap-2\">\n              {Array.from({ length: totalPages }, (_, i) => i + 1).map((page) => (\n                <Link\n                  key={page}\n                  href={buildPageUrl(page)}\n                  scroll={true}\n                  className={`inline-flex items-center justify-center w-8 h-8 text-xs font-medium rounded-sm transition ${\n                    page === currentPage\n                      ? \"bg-black text-white\"\n                      : \"bg-white border border-neutral-200 text-neutral-600 hover:border-neutral-300\"\n                  }`}\n                >\n                  {page}\n                </Link>\n              ))}\n            </div>\n          )}\n        </>\n      ) : (\n        <div className=\"text-center py-20 text-neutral-400 text-sm\">\n          {searchQuery\n            ? `No products match \"${searchQuery}\"`\n            : \"No products available.\"}\n        </div>\n      )}\n    </main>\n  );\n    }\n"}