feat(results-page): enhance search with caching, pagination, and UI tweaks

- Add dynamic rendering and Node.js runtime config to location API for better performance
- Improve ProductCardSkeleton with dark mode styling for consistent theming
- Simplify Hero search placeholder to focus on product name input
- Integrate caching, pagination, and cache clearing in results page for optimized search experience and user control

app/api/location/route.ts

@@ -1,5 +1,8 @@
 import { NextRequest, NextResponse } from "next/server";
 
+export const dynamic = "force-dynamic";
+export const runtime = "nodejs";
+
 export async function GET(request: NextRequest) {
   try {
     let ip: string | null = null;

app/components/Pagination.tsx

@@ -0,0 +1,218 @@
+"use client";
+
+import { useState, useMemo } from "react";
+import {
+  ChevronLeft,
+  ChevronRight,
+  ChevronsLeft,
+  ChevronsRight,
+} from "lucide-react";
+import { Button } from "@/components/ui/button";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { PaginationProps, PaginationConfig } from "@/lib/types";
+
+const DEFAULT_CONFIG: PaginationConfig = {
+  itemsPerPage: 20,
+  maxVisiblePages: 5,
+  showFirstLast: true,
+  showPrevNext: true,
+};
+
+export function Pagination({
+  currentPage,
+  totalPages,
+  totalItems,
+  itemsPerPage,
+  onPageChange,
+  onItemsPerPageChange,
+  config = {},
+  className = "",
+}: PaginationProps) {
+  const [localItemsPerPage, setLocalItemsPerPage] = useState(itemsPerPage);
+  const finalConfig = useMemo(
+    () => ({ ...DEFAULT_CONFIG, ...config }),
+    [config]
+  );
+
+  // Calcular índices dos itens
+  const startIndex = (currentPage - 1) * itemsPerPage + 1;
+  const endIndex = Math.min(currentPage * itemsPerPage, totalItems);
+
+  // Gerar array de páginas visíveis
+  const visiblePages = useMemo(() => {
+    const pages: (number | string)[] = [];
+    const { maxVisiblePages } = finalConfig;
+
+    if (totalPages <= maxVisiblePages) {
+      // Se total de páginas é menor que o máximo, mostrar todas
+      for (let i = 1; i <= totalPages; i++) {
+        pages.push(i);
+      }
+    } else {
+      // Lógica para mostrar páginas com ellipsis
+      const halfVisible = Math.floor(maxVisiblePages / 2);
+      let startPage = Math.max(1, currentPage - halfVisible);
+      const endPage = Math.min(totalPages, startPage + maxVisiblePages - 1);
+
+      // Ajustar se estivermos no final
+      if (endPage - startPage + 1 < maxVisiblePages) {
+        startPage = Math.max(1, endPage - maxVisiblePages + 1);
+      }
+
+      // Primeira página
+      if (startPage > 1) {
+        pages.push(1);
+        if (startPage > 2) {
+          pages.push("...");
+        }
+      }
+
+      // Páginas do meio
+      for (let i = startPage; i <= endPage; i++) {
+        pages.push(i);
+      }
+
+      // Última página
+      if (endPage < totalPages) {
+        if (endPage < totalPages - 1) {
+          pages.push("...");
+        }
+        pages.push(totalPages);
+      }
+    }
+
+    return pages;
+  }, [currentPage, totalPages, finalConfig]);
+
+  const handleItemsPerPageChange = (newItemsPerPage: string) => {
+    const newValue = parseInt(newItemsPerPage);
+    setLocalItemsPerPage(newValue);
+    if (onItemsPerPageChange) {
+      onItemsPerPageChange(newValue);
+    }
+  };
+
+  const canGoPrevious = currentPage > 1;
+  const canGoNext = currentPage < totalPages;
+
+  if (totalPages <= 1) {
+    return null;
+  }
+
+  return (
+    <div
+      className={`flex flex-col sm:flex-row items-center justify-between gap-4 ${className}`}
+    >
+      {/* Informações dos itens */}
+      <div className="text-sm text-gray-600 dark:text-gray-400">
+        Mostrando {startIndex} a {endIndex} de {totalItems} resultado
+        {totalItems !== 1 ? "s" : ""}
+      </div>
+
+      {/* Controles de paginação */}
+      <div className="flex items-center gap-2">
+        {/* Seletor de itens por página */}
+        {onItemsPerPageChange && (
+          <div className="flex items-center gap-2 mr-4">
+            <span className="text-sm text-gray-600 dark:text-gray-400">
+              Por página:
+            </span>
+            <Select
+              value={localItemsPerPage.toString()}
+              onValueChange={handleItemsPerPageChange}
+            >
+              <SelectTrigger className="w-20 h-8">
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="10">10</SelectItem>
+                <SelectItem value="20">20</SelectItem>
+                <SelectItem value="50">50</SelectItem>
+                <SelectItem value="100">100</SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+        )}
+
+        {/* Botões de navegação */}
+        <div className="flex items-center gap-1">
+          {/* Primeira página */}
+          {finalConfig.showFirstLast && (
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={() => onPageChange(1)}
+              disabled={!canGoPrevious}
+              className="h-8 w-8 p-0"
+            >
+              <ChevronsLeft className="h-4 w-4" />
+            </Button>
+          )}
+
+          {/* Página anterior */}
+          {finalConfig.showPrevNext && (
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={() => onPageChange(currentPage - 1)}
+              disabled={!canGoPrevious}
+              className="h-8 w-8 p-0"
+            >
+              <ChevronLeft className="h-4 w-4" />
+            </Button>
+          )}
+
+          {/* Números das páginas */}
+          {visiblePages.map((page, index) => (
+            <div key={index}>
+              {page === "..." ? (
+                <span className="px-3 py-1 text-sm text-gray-500">...</span>
+              ) : (
+                <Button
+                  variant={currentPage === page ? "default" : "outline"}
+                  size="sm"
+                  onClick={() => onPageChange(page as number)}
+                  className="h-8 w-8 p-0"
+                >
+                  {page}
+                </Button>
+              )}
+            </div>
+          ))}
+
+          {/* Próxima página */}
+          {finalConfig.showPrevNext && (
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={() => onPageChange(currentPage + 1)}
+              disabled={!canGoNext}
+              className="h-8 w-8 p-0"
+            >
+              <ChevronRight className="h-4 w-4" />
+            </Button>
+          )}
+
+          {/* Última página */}
+          {finalConfig.showFirstLast && (
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={() => onPageChange(totalPages)}
+              disabled={!canGoNext}
+              className="h-8 w-8 p-0"
+            >
+              <ChevronsRight className="h-4 w-4" />
+            </Button>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

app/components/ProductCardSkeleton.tsx

@@ -3,7 +3,7 @@ import { Skeleton } from "@/components/ui/skeleton";
 
 export function ProductCardSkeleton() {
   return (
-    <Card className="overflow-hidden">
+    <Card className="overflow-hidden bg-white dark:bg-gray-900 border border-gray-100 dark:border-gray-800">
       {/* Imagem Skeleton */}
       <Skeleton className="h-48 w-full" />
 

app/components/landing/Hero.tsx

@@ -80,7 +80,7 @@ export function Hero() {
     } else if (searchType === "name") {
       return "Digite o nome do produto (ex: coca cola)";
     }
-    return "Digite o código de barras ou nome do produto";
+    return "Digite nome do produto";
   };
 
   const getSearchButtonText = () => {

app/resultados/page.tsx

@@ -1,5 +1,5 @@
 "use client";
-import { useState, useEffect, useCallback } from "react";
+import { useState, useEffect, useCallback, useMemo, Suspense } from "react";
 import { useSearchParams, useRouter } from "next/navigation";
 import {
   Search,
@@ -8,33 +8,67 @@ import {
   Grid,
   List,
   SlidersHorizontal,
+  RefreshCw,
+  Database,
+  X,
 } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet";
-import { searchByName, Product, sortProducts } from "@/lib/openFoodFactsApi";
+import { Product, sortProducts, fetchAllResults } from "@/lib/openFoodFactsApi";
 import { ProductCard } from "@/app/components/ProductCard";
 import { ProductCardSkeleton } from "@/app/components/ProductCardSkeleton";
 import { FilterSidebar } from "@/app/components/FilterSidebar";
 import { FilterBadges } from "@/app/components/FilterBadge";
 import { SortDropdown } from "@/app/components/SortDropdown";
+import { Pagination } from "@/app/components/Pagination";
 import { useProductFilters } from "@/hooks/useProductFilters";
+import { useSearchCache } from "@/hooks/useSearchCache";
 import { detectUserCountry } from "@/lib/geolocation";
+import { FilterRecord } from "@/lib/cacheManager";
+import { ProductFilters } from "@/lib/types";
 import Link from "next/link";
 
-export default function ResultadosPage() {
+// Função para converter ProductFilters para FilterRecord
+function convertFiltersToRecord(filters: ProductFilters): FilterRecord {
+  const record: FilterRecord = {};
+
+  Object.entries(filters).forEach(([key, value]) => {
+    if (value !== undefined && value !== null) {
+      record[key] = value as FilterRecord[string];
+    }
+  });
+
+  return record;
+}
+
+function ResultadosContent() {
   const searchParams = useSearchParams();
   const router = useRouter();
   const query = searchParams.get("q") || "";
   const countryParam = searchParams.get("country") || "";
 
-  const [products, setProducts] = useState<Product[]>([]);
+  // Estados principais
+  const [allProducts, setAllProducts] = useState<Product[]>([]);
   const [loading, setLoading] = useState(true);
-  const [loadingMore, setLoadingMore] = useState(false);
   const [error, setError] = useState<string | null>(null);
-  const [page, setPage] = useState(1);
-  const [hasMore, setHasMore] = useState(true);
   const [detectedCountry, setDetectedCountry] = useState<string>("");
   const [viewMode, setViewMode] = useState<"grid" | "list">("grid");
+  const [forceRefresh, setForceRefresh] = useState(false);
+
+  // Estados de paginação
+  const [currentPage, setCurrentPage] = useState(1);
+  const [itemsPerPage, setItemsPerPage] = useState(20);
+
+  // Hook de cache
+  const {
+    state: cacheState,
+    getCachedSearch,
+    saveSearch,
+    clearCache,
+    updateProgress,
+    setError: setCacheError,
+    setLoading: setCacheLoading,
+  } = useSearchCache();
 
   // Hook de filtros
   const {
@@ -61,66 +95,131 @@ export default function ResultadosPage() {
   }, []);
 
   const loadProducts = useCallback(
-    async (pageNum: number) => {
+    async (forceRefresh: boolean = false) => {
       try {
-        if (pageNum === 1) {
-          setLoading(true);
-        } else {
-          setLoadingMore(true);
-        }
+        setLoading(true);
         setError(null);
         setIsLoading(true);
+        setCacheLoading(true);
 
         const countryToUse = detectedCountry || countryParam || "br";
 
-        const result = await searchByName(query, countryToUse, pageNum, 20);
-
-        // Aplicar ordenação se especificada
-        let sortedProducts = result.products;
-        if (filters.sortBy) {
-          sortedProducts = sortProducts(
-            result.products,
-            filters.sortBy,
-            filters.sortOrder || "asc"
+        // Verificar cache primeiro (se não for refresh forçado)
+        if (!forceRefresh) {
+          const cached = getCachedSearch(
+            query,
+            countryToUse,
+            convertFiltersToRecord(filters)
           );
+          if (cached) {
+            console.log("Usando dados do cache");
+            setAllProducts(cached.products);
+            setTotalResults(cached.totalCount);
+            setLoading(false);
+            setIsLoading(false);
+            setCacheLoading(false);
+            return;
+          }
         }
 
-        setProducts((prevProducts) =>
-          pageNum === 1 ? sortedProducts : [...prevProducts, ...sortedProducts]
+        console.log("Fazendo busca completa na API");
+
+        // Fazer busca completa
+        const result = await fetchAllResults(
+          query,
+          countryToUse,
+          10, // Máximo 10 páginas (500 produtos)
+          (currentPage, totalPages, loadedProducts) => {
+            updateProgress(currentPage, totalPages, loadedProducts, 0);
+          }
         );
-        setHasMore(result.products.length === 20);
-        setPage(pageNum);
-        setTotalResults(result.count || result.products.length);
+
+        // Salvar no cache
+        const searchId = saveSearch(
+          query,
+          countryToUse,
+          result.products,
+          result.totalCount,
+          convertFiltersToRecord(filters)
+        );
+        console.log(`Busca salva no cache com ID: ${searchId}`);
+
+        setAllProducts(result.products);
+        setTotalResults(result.totalCount);
+        setCurrentPage(1); // Voltar para primeira página
       } catch (err) {
-        setError(
-          err instanceof Error ? err.message : "Erro ao buscar produtos"
-        );
+        const errorMessage =
+          err instanceof Error ? err.message : "Erro ao buscar produtos";
+        setError(errorMessage);
+        setCacheError(errorMessage);
       } finally {
         setLoading(false);
-        setLoadingMore(false);
         setIsLoading(false);
+        setCacheLoading(false);
       }
     },
     [
       query,
       detectedCountry,
       countryParam,
-      filters.sortBy,
-      filters.sortOrder,
+      filters,
+      getCachedSearch,
+      saveSearch,
+      updateProgress,
       setIsLoading,
       setTotalResults,
+      setCacheLoading,
+      setCacheError,
     ]
   );
 
   useEffect(() => {
     if (query) {
-      loadProducts(1);
+      loadProducts(forceRefresh);
+      setForceRefresh(false);
     }
-  }, [query, countryParam, detectedCountry, loadProducts]);
+  }, [query, countryParam, detectedCountry, loadProducts, forceRefresh]);
 
-  const handleLoadMore = useCallback(() => {
-    loadProducts(page + 1);
-  }, [loadProducts, page]);
+  // Produtos filtrados e ordenados para exibição
+  const filteredAndSortedProducts = useMemo(() => {
+    let filtered = [...allProducts];
+
+    // Aplicar filtros aqui (implementar conforme necessário)
+    // Por enquanto, apenas ordenação
+    if (filters.sortBy) {
+      filtered = sortProducts(
+        filtered,
+        filters.sortBy,
+        filters.sortOrder || "asc"
+      );
+    }
+
+    return filtered;
+  }, [allProducts, filters.sortBy, filters.sortOrder]);
+
+  // Produtos da página atual
+  const currentPageProducts = useMemo(() => {
+    const startIndex = (currentPage - 1) * itemsPerPage;
+    const endIndex = startIndex + itemsPerPage;
+    return filteredAndSortedProducts.slice(startIndex, endIndex);
+  }, [filteredAndSortedProducts, currentPage, itemsPerPage]);
+
+  // Cálculos de paginação
+  const totalPages = Math.ceil(filteredAndSortedProducts.length / itemsPerPage);
+  const totalItems = filteredAndSortedProducts.length;
+
+  const handleRefresh = useCallback(() => {
+    setForceRefresh(true);
+  }, []);
+
+  const handleClearCache = useCallback(() => {
+    clearCache(
+      query,
+      detectedCountry || countryParam || "br",
+      convertFiltersToRecord(filters)
+    );
+    setForceRefresh(true);
+  }, [clearCache, query, detectedCountry, countryParam, filters]);
 
   const handleSortChange = useCallback(
     (sortBy: string) => {
@@ -181,11 +280,17 @@ export default function ResultadosPage() {
               <h1 className="text-2xl font-bold text-gray-900 dark:text-white">
                 Resultados para &quot;{query}&quot;
               </h1>
-              {!loading && products.length > 0 && (
+              {!loading && totalItems > 0 && (
                 <p className="text-sm text-gray-500 dark:text-gray-400 mt-1">
-                  {products.length} produto{products.length !== 1 ? "s" : ""}{" "}
-                  encontrado{products.length !== 1 ? "s" : ""}
+                  {totalItems} produto{totalItems !== 1 ? "s" : ""} encontrado
+                  {totalItems !== 1 ? "s" : ""}
                   {detectedCountry && ` em ${detectedCountry}`}
+                  {cacheState.isCached && (
+                    <span className="ml-2 inline-flex items-center gap-1 text-blue-600 dark:text-blue-400">
+                      <Database className="w-3 h-3" />
+                      Cache
+                    </span>
+                  )}
                 </p>
               )}
             </div>
@@ -215,6 +320,31 @@ export default function ResultadosPage() {
                   <List className="w-4 h-4" />
                 </Button>
               </div>
+
+              {/* Botões de controle de cache */}
+              <div className="flex items-center gap-2">
+                <Button
+                  variant="outline"
+                  size="sm"
+                  onClick={handleRefresh}
+                  disabled={loading}
+                  title="Atualizar busca"
+                >
+                  <RefreshCw
+                    className={`w-4 h-4 ${loading ? "animate-spin" : ""}`}
+                  />
+                </Button>
+                {cacheState.isCached && (
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    onClick={handleClearCache}
+                    title="Limpar cache e refazer busca"
+                  >
+                    <X className="w-4 h-4" />
+                  </Button>
+                )}
+              </div>
             </div>
 
             {/* Filtros Mobile */}
@@ -235,7 +365,7 @@ export default function ResultadosPage() {
                     onFiltersChange={updateFilters}
                     onClearFilters={clearFilters}
                     isLoading={loading}
-                    totalResults={products.length}
+                    totalResults={totalItems}
                   />
                 </SheetContent>
               </Sheet>
@@ -278,7 +408,7 @@ export default function ResultadosPage() {
                 onFiltersChange={updateFilters}
                 onClearFilters={clearFilters}
                 isLoading={loading}
-                totalResults={products.length}
+                totalResults={totalItems}
               />
             </div>
           </div>
@@ -287,16 +417,51 @@ export default function ResultadosPage() {
           <div className="flex-1 min-w-0">
             {/* Loading Inicial */}
             {loading && (
-              <div
-                className={`grid gap-6 ${
-                  viewMode === "grid"
-                    ? "grid-cols-1 sm:grid-cols-2 xl:grid-cols-3"
-                    : "grid-cols-1"
-                }`}
-              >
-                {[...Array(8)].map((_, i) => (
-                  <ProductCardSkeleton key={i} />
-                ))}
+              <div className="space-y-4">
+                {/* Indicador de progresso do cache */}
+                {cacheState.progress && (
+                  <div className="bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg p-4">
+                    <div className="flex items-center gap-3">
+                      <Loader2 className="w-5 h-5 animate-spin text-blue-600" />
+                      <div className="flex-1">
+                        <p className="text-sm font-medium text-blue-900 dark:text-blue-100">
+                          Carregando todos os resultados...
+                        </p>
+                        <p className="text-xs text-blue-700 dark:text-blue-300">
+                          Página {cacheState.progress.currentPage} de{" "}
+                          {cacheState.progress.totalPages} •
+                          {cacheState.progress.loadedProducts} produtos
+                          carregados
+                        </p>
+                        <div className="w-full bg-blue-200 dark:bg-blue-800 rounded-full h-2 mt-2">
+                          <div
+                            className="bg-blue-600 h-2 rounded-full transition-all duration-300"
+                            style={{
+                              width: `${
+                                (cacheState.progress.currentPage /
+                                  cacheState.progress.totalPages) *
+                                100
+                              }%`,
+                            }}
+                          />
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                )}
+
+                {/* Skeleton dos produtos */}
+                <div
+                  className={`grid gap-6 ${
+                    viewMode === "grid"
+                      ? "grid-cols-1 sm:grid-cols-2 xl:grid-cols-3"
+                      : "grid-cols-1"
+                  }`}
+                >
+                  {[...Array(8)].map((_, i) => (
+                    <ProductCardSkeleton key={i} />
+                  ))}
+                </div>
               </div>
             )}
 
@@ -308,7 +473,7 @@ export default function ResultadosPage() {
                     Erro ao buscar produtos
                   </h2>
                   <p className="text-red-600 dark:text-red-300 mb-4">{error}</p>
-                  <Button onClick={() => loadProducts(1)} variant="outline">
+                  <Button onClick={() => loadProducts(true)} variant="outline">
                     Tentar novamente
                   </Button>
                 </div>
@@ -316,7 +481,7 @@ export default function ResultadosPage() {
             )}
 
             {/* Sem Resultados */}
-            {!loading && !error && products.length === 0 && (
+            {!loading && !error && totalItems === 0 && (
               <div className="text-center py-12">
                 <Search className="w-16 h-16 text-gray-400 mx-auto mb-4" />
                 <h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-2">
@@ -337,7 +502,7 @@ export default function ResultadosPage() {
             )}
 
             {/* Grid de Produtos */}
-            {!loading && products.length > 0 && (
+            {!loading && totalItems > 0 && (
               <>
                 <div
                   className={`product-grid grid gap-6 mb-8 ${
@@ -346,7 +511,7 @@ export default function ResultadosPage() {
                       : "grid-cols-1"
                   }`}
                 >
-                  {products.map((product, index) => (
+                  {currentPageProducts.map((product, index) => (
                     <div
                       key={product.code}
                       className="animate-in fade-in-0 slide-in-from-bottom-4"
@@ -360,33 +525,37 @@ export default function ResultadosPage() {
                   ))}
                 </div>
 
-                {/* Botão Carregar Mais */}
-                {hasMore && (
-                  <div className="text-center">
-                    <Button
-                      onClick={handleLoadMore}
-                      disabled={loadingMore}
-                      size="lg"
-                      className="min-w-[200px]"
-                    >
-                      {loadingMore ? (
-                        <>
-                          <Loader2 className="w-4 h-4 mr-2 animate-spin" />
-                          Carregando...
-                        </>
-                      ) : (
-                        "Carregar Mais"
-                      )}
-                    </Button>
+                {/* Paginação */}
+                {totalPages > 1 && (
+                  <div className="mt-8">
+                    <Pagination
+                      currentPage={currentPage}
+                      totalPages={totalPages}
+                      totalItems={totalItems}
+                      itemsPerPage={itemsPerPage}
+                      onPageChange={setCurrentPage}
+                      onItemsPerPageChange={setItemsPerPage}
+                      config={{
+                        itemsPerPage: 20,
+                        maxVisiblePages: 5,
+                        showFirstLast: true,
+                        showPrevNext: true,
+                      }}
+                    />
                   </div>
                 )}
 
-                {/* Contador de Resultados */}
-                {!hasMore && products.length > 0 && (
-                  <div className="text-center mt-8">
+                {/* Informações adicionais */}
+                {cacheState.isCached && (
+                  <div className="text-center mt-6">
                     <p className="text-sm text-gray-500 dark:text-gray-400">
-                      Todos os {products.length} produto
-                      {products.length !== 1 ? "s" : ""} foram carregados
+                      Dados carregados do cache •
+                      <button
+                        onClick={handleRefresh}
+                        className="ml-1 text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300 underline"
+                      >
+                        Atualizar busca
+                      </button>
                     </p>
                   </div>
                 )}
@@ -398,3 +567,17 @@ export default function ResultadosPage() {
     </div>
   );
 }
+
+export default function ResultadosPage() {
+  return (
+    <Suspense
+      fallback={
+        <div className="min-h-screen bg-gray-50 dark:bg-gray-900 flex items-center justify-center">
+          <Loader2 className="w-8 h-8 animate-spin text-primary" />
+        </div>
+      }
+    >
+      <ResultadosContent />
+    </Suspense>
+  );
+}