@akinon/pz-similar-products 1.92.0-rc.16

package/src/hooks/use-similar-products.ts

@@ -0,0 +1,939 @@
+import { useState, useEffect, useCallback } from 'react';
+import { Product } from '@akinon/next/types';
+import {
+  useLazyGetSimilarProductsByUrlQuery,
+  useGetSimilarProductsByImageMutation,
+  useLazyGetSimilarProductsListQuery,
+  type SimilarProductsListResponse
+} from '../data/endpoints';
+import { type Facet, type SortOption } from '@akinon/next/types/commerce';
+import { useLocalization } from '@akinon/next/hooks';
+import {
+  validateImageFile,
+  validateImageFromDataUrl,
+  type ImageValidationResult
+} from '../utils/image-validation';
+
+type SearchResults = SimilarProductsListResponse;
+
+interface SearchParams {
+  [key: string]: string;
+}
+
+export function useSimilarProducts(product: Product) {
+  const { t } = useLocalization();
+  const [currentImageUrl, setCurrentImageUrl] = useState('');
+  const [fileError, setFileError] = useState('');
+  const [searchResults, setSearchResults] = useState<SearchResults | null>(
+    null
+  );
+  const [resultsKey, setResultsKey] = useState(0);
+  const [lastProductIds, setLastProductIds] = useState<number[]>([]);
+  const [hasUploadedImage, setHasUploadedImage] = useState(false);
+  const [isCropProcessing, setIsCropProcessing] = useState(false);
+  const [loadedPages, setLoadedPages] = useState<Set<number>>(new Set([1]));
+  const [allLoadedProducts, setAllLoadedProducts] = useState<Product[]>([]);
+
+  const [fetchSimilarProductsByUrl, { isLoading: isUrlSearchLoading }] =
+    useLazyGetSimilarProductsByUrlQuery();
+
+  const [getSimilarProductsByImage, { isLoading: isImageSearchLoading }] =
+    useGetSimilarProductsByImageMutation();
+
+  const [fetchProductsList, { isLoading: isProductsListLoading }] =
+    useLazyGetSimilarProductsListQuery();
+
+  const isLoading =
+    isUrlSearchLoading ||
+    isImageSearchLoading ||
+    isProductsListLoading ||
+    isCropProcessing;
+
+  const createEmptySearchResults = useCallback(
+    (): SearchResults => ({
+      products: [],
+      facets: [],
+      sorters: [],
+      search_text: null,
+      pagination: {
+        current_page: 1,
+        num_pages: 1,
+        page_size: 1,
+        total_count: 0
+      }
+    }),
+    []
+  );
+
+  const updateResultsAndKey = useCallback(
+    (results: SearchResults, isLoadMore: boolean = false) => {
+      if (isLoadMore) {
+        setAllLoadedProducts((prev) => [...prev, ...results.products]);
+        setSearchResults((prevResults) => ({
+          ...results,
+          products: [...(prevResults?.products || []), ...results.products]
+        }));
+      } else {
+        setAllLoadedProducts(results.products);
+        setSearchResults(results);
+        setLoadedPages(new Set([1]));
+      }
+      setResultsKey((prevKey) => prevKey + 1);
+    },
+    []
+  );
+
+  const buildSearchParams = useCallback(
+    (facets?: Facet[], sortValue?: string, page?: number): SearchParams => {
+      const searchParams: SearchParams = {};
+
+      if (page) {
+        searchParams.page = String(page);
+      }
+
+      // Test için farklı parametre isimlerini deniyoruz
+      searchParams.page_size = '1';
+      searchParams.pageSize = '1';
+      searchParams.limit = '1';
+      searchParams.per_page = '1';
+      searchParams.size = '1';
+      console.log('🔍 API çağrısı searchParams:', searchParams);
+
+      if (facets) {
+        facets.forEach((facet) => {
+          if (String(facet.key) === 'category_ids') return;
+
+          const selectedChoices =
+            facet.data?.choices?.filter((choice) => choice.is_selected) || [];
+
+          if (selectedChoices.length > 0) {
+            const values = selectedChoices.map((choice) =>
+              String(choice.value)
+            );
+            const searchKey = String(facet.search_key || facet.key);
+            searchParams[searchKey] = values.join(',');
+          }
+        });
+      }
+
+      if (sortValue) {
+        searchParams.sorter = sortValue;
+      }
+
+      return searchParams;
+    },
+    []
+  );
+
+  const preserveFacetState = useCallback(
+    (responseFacets: Facet[], existingFacets: Facet[]) => {
+      return (
+        responseFacets?.map((responseFacet) => {
+          const existingFacet = existingFacets?.find(
+            (f) => String(f.key) === String(responseFacet.key)
+          );
+          if (existingFacet && responseFacet.data?.choices) {
+            return {
+              ...responseFacet,
+              data: {
+                ...responseFacet.data,
+                choices: responseFacet.data.choices.map((choice) => {
+                  const existingChoice = existingFacet.data?.choices?.find(
+                    (c) => String(c.value) === String(choice.value)
+                  );
+                  return {
+                    ...choice,
+                    is_selected: existingChoice?.is_selected || false
+                  };
+                })
+              }
+            };
+          }
+          return responseFacet;
+        }) ||
+        existingFacets ||
+        []
+      );
+    },
+    []
+  );
+
+  const updateSorterState = useCallback(
+    (sorters: SortOption[], selectedValue: string) => {
+      return (
+        sorters?.map((sorter) => ({
+          ...sorter,
+          is_selected: String(sorter.value) === String(selectedValue)
+        })) || []
+      );
+    },
+    []
+  );
+
+  const sortProducts = useCallback(
+    (products: SearchResults['products'], sortValue: string) => {
+      if (!products || products.length === 0) return products;
+
+      const sortedProducts = [...products];
+
+      switch (sortValue) {
+        case 'price':
+          return sortedProducts.sort((a, b) => {
+            const priceA = parseFloat(String(a.price || '0'));
+            const priceB = parseFloat(String(b.price || '0'));
+            return isNaN(priceA) || isNaN(priceB) ? 0 : priceA - priceB;
+          });
+        case '-price':
+          return sortedProducts.sort((a, b) => {
+            const priceA = parseFloat(String(a.price || '0'));
+            const priceB = parseFloat(String(b.price || '0'));
+            return isNaN(priceA) || isNaN(priceB) ? 0 : priceB - priceA;
+          });
+        case 'newcomers':
+          return sortedProducts.sort((a, b) => {
+            const pkA = parseInt(String(a.pk || '0'), 10);
+            const pkB = parseInt(String(b.pk || '0'), 10);
+            return isNaN(pkA) || isNaN(pkB) ? 0 : pkB - pkA;
+          });
+        case 'default':
+        default:
+          return products;
+      }
+    },
+    []
+  );
+
+  const createSearchFilter = useCallback(
+    (filterData: number[] | Record<string, unknown> | unknown) => {
+      let filterObject: Record<string, unknown>;
+
+      if (Array.isArray(filterData)) {
+        filterObject = {
+          'products.pk': filterData,
+          default_sorting_deactivated: true
+        };
+      } else if (typeof filterData === 'object' && filterData !== null) {
+        filterObject = {
+          ...(filterData as Record<string, unknown>),
+          default_sorting_deactivated: true
+        };
+      } else {
+        filterObject = {
+          default_sorting_deactivated: true
+        };
+      }
+
+      const jsonString = JSON.stringify(filterObject);
+      return btoa(jsonString);
+    },
+    []
+  );
+
+  const executeProductSearch = useCallback(
+    async (
+      productIds: number[],
+      searchParams: SearchParams = {},
+      currentSortValue?: string
+    ): Promise<SearchResults | null> => {
+      try {
+        const base64Filter = createSearchFilter(productIds);
+        const result = await fetchProductsList({
+          filter: base64Filter,
+          searchParams,
+          isExclude: false
+        }).unwrap();
+
+        const sortedProducts = currentSortValue
+          ? sortProducts(result.products, currentSortValue)
+          : result.products;
+
+        return {
+          ...result,
+          products: sortedProducts,
+          facets: preserveFacetState(
+            result.facets,
+            searchResults?.facets || []
+          ),
+          sorters: updateSorterState(
+            result.sorters,
+            currentSortValue ||
+              searchResults?.sorters?.find((s) => s.is_selected)?.value ||
+              'default'
+          )
+        };
+      } catch (error) {
+        console.error('Product search failed:', error);
+        return createEmptySearchResults();
+      }
+    },
+    [
+      createSearchFilter,
+      fetchProductsList,
+      sortProducts,
+      preserveFacetState,
+      updateSorterState,
+      searchResults,
+      createEmptySearchResults
+    ]
+  );
+
+  const extractProductIds = useCallback((data: unknown): number[] => {
+    if (!data) return [];
+
+    if (data && typeof data === 'object') {
+      const obj = data as Record<string, unknown>;
+
+      const possibleArrayKeys = [
+        'product_ids',
+        'productIds',
+        'products',
+        'results'
+      ];
+
+      for (const key of possibleArrayKeys) {
+        if (obj[key] && Array.isArray(obj[key])) {
+          const arr = obj[key] as unknown[];
+          const filtered = arr
+            .map((item) => {
+              if (typeof item === 'number') return item;
+              if (typeof item === 'string') {
+                const parsed = parseInt(item, 10);
+                return isNaN(parsed) ? null : parsed;
+              }
+              return null;
+            })
+            .filter((id): id is number => id !== null && id > 0);
+
+          if (filtered.length > 0) return filtered;
+        }
+      }
+
+      if (obj.similar_products && Array.isArray(obj.similar_products)) {
+        return obj.similar_products
+          .map((item) => {
+            if (item && typeof item === 'object' && 'product_id' in item) {
+              const productId = (item as any).product_id;
+              if (typeof productId === 'number') return productId;
+              if (typeof productId === 'string') {
+                const parsed = parseInt(productId, 10);
+                return isNaN(parsed) ? null : parsed;
+              }
+            }
+            return null;
+          })
+          .filter((id): id is number => id !== null && id > 0);
+      }
+    }
+
+    if (Array.isArray(data)) {
+      return data
+        .map((item) => {
+          if (typeof item === 'number') return item;
+          if (typeof item === 'string') {
+            const parsed = parseInt(item, 10);
+            return isNaN(parsed) ? null : parsed;
+          }
+          return null;
+        })
+        .filter((id): id is number => id !== null && id > 0);
+    }
+
+    return [];
+  }, []);
+
+  const handleSearchResults = useCallback(
+    async (data: unknown) => {
+      const productIds = extractProductIds(data);
+
+      if (productIds.length > 0) {
+        const result = await executeProductSearch(productIds);
+        if (result) {
+          const resultWithCorrectSorterState = {
+            ...result,
+            sorters: updateSorterState(result.sorters, 'default')
+          };
+          updateResultsAndKey(resultWithCorrectSorterState);
+        }
+      } else {
+        updateResultsAndKey(createEmptySearchResults());
+      }
+
+      setLastProductIds(productIds);
+    },
+    [
+      extractProductIds,
+      executeProductSearch,
+      updateSorterState,
+      updateResultsAndKey,
+      createEmptySearchResults
+    ]
+  );
+
+  const validateImageFileWithTranslation = useCallback(
+    async (file: File): Promise<ImageValidationResult> => {
+      try {
+        const result = await validateImageFile(file, 5);
+
+        if (!result.isValid) {
+          if (result.error?.includes('size')) {
+            return {
+              isValid: false,
+              error: t('common.similar_products.errors.file_size_too_large')
+            };
+          }
+          if (result.error?.includes('not a valid image')) {
+            return {
+              isValid: false,
+              error: t('common.similar_products.errors.invalid_image_file')
+            };
+          }
+          if (result.error?.includes('format')) {
+            return {
+              isValid: false,
+              error: t('common.similar_products.errors.invalid_image_format')
+            };
+          }
+        }
+
+        return result;
+      } catch (error) {
+        return {
+          isValid: false,
+          error: t('common.similar_products.errors.processing_error')
+        };
+      }
+    },
+    [t]
+  );
+
+  const handleImageSearch = useCallback(
+    async (
+      searchFn: (image: string) => Promise<unknown>,
+      imageData: string,
+      errorPrefix: string
+    ) => {
+      setFileError('');
+      try {
+        const result = await searchFn(imageData);
+        await handleSearchResults(result);
+        return result;
+      } catch (error) {
+        console.error(`${errorPrefix} failed:`, error);
+        setFileError(t('common.similar_products.errors.search_failed'));
+        updateResultsAndKey(createEmptySearchResults());
+        return null;
+      }
+    },
+    [
+      handleSearchResults,
+      updateResultsAndKey,
+      createEmptySearchResults,
+      t,
+      setFileError
+    ]
+  );
+
+  const fetchSimilarProductsByImageUrl = useCallback(
+    async (imageUrl: string) => {
+      setFileError('');
+      try {
+        const productPk = product?.pk;
+        const excludedIds = productPk ? [productPk] : undefined;
+
+        const result = await fetchSimilarProductsByUrl({
+          url: imageUrl,
+          limit: 20,
+          excluded_product_ids: excludedIds
+        }).unwrap();
+
+        await handleSearchResults(result);
+        return result;
+      } catch (error) {
+        console.error('Image search request failed:', error);
+        setFileError(t('common.similar_products.errors.connection_failed'));
+        updateResultsAndKey(createEmptySearchResults());
+        return null;
+      }
+    },
+    [
+      fetchSimilarProductsByUrl,
+      product?.pk,
+      handleSearchResults,
+      updateResultsAndKey,
+      createEmptySearchResults,
+      t,
+      setFileError
+    ]
+  );
+
+  useEffect(() => {
+    if (product?.productimage_set?.length > 0) {
+      const initialImageUrl = product.productimage_set[0].image;
+      setCurrentImageUrl(initialImageUrl);
+    }
+  }, [product]);
+
+  const fetchSimilarProductsByBase64 = useCallback(
+    async (base64Image: string) => {
+      const base64Data = base64Image.startsWith('data:')
+        ? base64Image.split(',')[1]
+        : base64Image;
+
+      return handleImageSearch(
+        async () =>
+          getSimilarProductsByImage({
+            image: base64Data,
+            limit: 20
+          }).unwrap(),
+        base64Image,
+        'Image search'
+      );
+    },
+    [getSimilarProductsByImage, handleImageSearch]
+  );
+
+  const fetchSimilarProductsByImageCrop = useCallback(
+    async (dataString: string) => {
+      setFileError('');
+      if (dataString.startsWith('data:application/x-cors-fallback;base64,')) {
+        try {
+          const fallbackDataEncoded = dataString.replace(
+            'data:application/x-cors-fallback;base64,',
+            ''
+          );
+          const fallbackData = JSON.parse(atob(fallbackDataEncoded));
+
+          try {
+            const proxyResponse = await fetch('/api/image-proxy', {
+              method: 'POST',
+              headers: { 'Content-Type': 'application/json' },
+              body: JSON.stringify({ imageUrl: fallbackData.originalUrl })
+            });
+
+            if (proxyResponse.ok) {
+              const proxyResult = await proxyResponse.json();
+              if (proxyResult.success && proxyResult.base64Image) {
+                return new Promise((resolve) => {
+                  const img = new Image();
+                  img.onload = () => {
+                    try {
+                      const canvas = document.createElement('canvas');
+                      const ctx = canvas.getContext('2d');
+
+                      if (!ctx) {
+                        throw new Error('No canvas context');
+                      }
+
+                      const cropX = fallbackData.crop.x * fallbackData.scale.x;
+                      const cropY = fallbackData.crop.y * fallbackData.scale.y;
+                      const cropWidth =
+                        fallbackData.crop.width * fallbackData.scale.x;
+                      const cropHeight =
+                        fallbackData.crop.height * fallbackData.scale.y;
+
+                      canvas.width = cropWidth;
+                      canvas.height = cropHeight;
+
+                      ctx.drawImage(
+                        img,
+                        cropX,
+                        cropY,
+                        cropWidth,
+                        cropHeight,
+                        0,
+                        0,
+                        cropWidth,
+                        cropHeight
+                      );
+
+                      const croppedBase64 = canvas.toDataURL('image/jpeg');
+
+                      const base64Data = croppedBase64.startsWith('data:')
+                        ? croppedBase64.split(',')[1]
+                        : croppedBase64;
+
+                      const result = handleImageSearch(
+                        async () =>
+                          getSimilarProductsByImage({
+                            image: base64Data,
+                            limit: 20,
+                            excluded_product_ids: product?.pk
+                              ? [product.pk]
+                              : undefined
+                          }).unwrap(),
+                        croppedBase64,
+                        'Proxy crop search'
+                      );
+                      resolve(result);
+                    } catch (cropError) {
+                      console.error('Client-side crop failed:', cropError);
+                      const result = fetchSimilarProductsByImageUrl(
+                        fallbackData.originalUrl
+                      );
+                      resolve(result);
+                    }
+                  };
+
+                  img.onerror = () => {
+                    console.error('Failed to load proxy image');
+                    const result = fetchSimilarProductsByImageUrl(
+                      fallbackData.originalUrl
+                    );
+                    resolve(result);
+                  };
+
+                  img.src = proxyResult.base64Image;
+                });
+              }
+            }
+          } catch (proxyError) {
+            console.warn('Proxy method failed:', proxyError);
+          }
+
+          return fetchSimilarProductsByImageUrl(fallbackData.originalUrl);
+        } catch (error) {
+          console.error('Failed to parse CORS fallback data:', error);
+          setFileError(
+            t('common.similar_products.errors.crop_processing_error')
+          );
+          return null;
+        }
+      }
+
+      const base64Data = dataString.startsWith('data:')
+        ? dataString.split(',')[1]
+        : dataString;
+
+      return handleImageSearch(
+        async () =>
+          getSimilarProductsByImage({
+            image: base64Data,
+            limit: 20,
+            excluded_product_ids: product?.pk ? [product.pk] : undefined
+          }).unwrap(),
+        dataString,
+        'Image crop search'
+      );
+    },
+    [
+      getSimilarProductsByImage,
+      handleImageSearch,
+      product,
+      fetchSimilarProductsByImageUrl,
+      setFileError,
+      t
+    ]
+  );
+
+  const handleFileUpload = async (
+    event: React.ChangeEvent<HTMLInputElement>
+  ) => {
+    setFileError('');
+    const file = event.target.files?.[0];
+    if (!file) return;
+
+    try {
+      const validation = await validateImageFileWithTranslation(file);
+      if (!validation.isValid) {
+        setFileError(validation.error!);
+        return;
+      }
+
+      const reader = new FileReader();
+      reader.onload = async (e) => {
+        const dataUrl = e.target?.result as string;
+        setCurrentImageUrl(dataUrl);
+        setHasUploadedImage(true);
+
+        const metadataValidation = await validateImageFromDataUrl(dataUrl);
+        if (!metadataValidation.isValid) {
+          setFileError(
+            t('common.similar_products.errors.invalid_image_properties')
+          );
+          return;
+        }
+        fetchSimilarProductsByBase64(dataUrl);
+      };
+
+      reader.onerror = () =>
+        setFileError(t('common.similar_products.errors.file_read_error'));
+      reader.readAsDataURL(file);
+    } catch (error) {
+      setFileError(t('common.similar_products.errors.processing_error'));
+    }
+  };
+
+  const handleImageCrop = async (base64Image: string) => {
+    if (isCropProcessing || isImageSearchLoading || isProductsListLoading) {
+      return;
+    }
+
+    setIsCropProcessing(true);
+    setFileError('');
+
+    try {
+      setCurrentImageUrl(base64Image);
+
+      const metadataValidation = await validateImageFromDataUrl(base64Image);
+      if (!metadataValidation.isValid) {
+        setFileError(
+          t('common.similar_products.errors.invalid_image_properties')
+        );
+        return;
+      }
+
+      if (hasUploadedImage) {
+        await fetchSimilarProductsByBase64(base64Image);
+      } else {
+        await fetchSimilarProductsByImageCrop(base64Image);
+      }
+    } catch (error) {
+      setFileError(t('common.similar_products.errors.crop_processing_error'));
+    } finally {
+      setIsCropProcessing(false);
+    }
+  };
+
+  const handleSortChange = async (sortValue: string) => {
+    if (lastProductIds.length === 0) return;
+
+    if (searchResults?.sorters) {
+      const updatedSearchResults = {
+        ...searchResults,
+        sorters: updateSorterState(searchResults.sorters, sortValue)
+      };
+      updateResultsAndKey(updatedSearchResults);
+    }
+
+    const searchParams = buildSearchParams(searchResults?.facets, sortValue);
+    const result = await executeProductSearch(
+      lastProductIds,
+      searchParams,
+      sortValue
+    );
+
+    if (result) {
+      updateResultsAndKey(result);
+    }
+  };
+
+  const handlePageChange = async (page: number, sortValue?: string) => {
+    if (lastProductIds.length === 0) return;
+
+    const currentSort =
+      sortValue || searchResults?.sorters?.find((s) => s.is_selected)?.value;
+    const searchParams = buildSearchParams(
+      searchResults?.facets,
+      currentSort,
+      page
+    );
+    const result = await executeProductSearch(
+      lastProductIds,
+      searchParams,
+      currentSort
+    );
+
+    if (result) {
+      updateResultsAndKey(result);
+    }
+  };
+
+  const updateFacetSelection = useCallback(
+    (facetKey: string, choiceValue: string | number, isSelected: boolean) => {
+      if (!searchResults || String(facetKey) === 'category_ids') return null;
+
+      return {
+        ...searchResults,
+        facets:
+          searchResults.facets?.map((facet) => {
+            if (String(facet.key) === String(facetKey)) {
+              return {
+                ...facet,
+                data: {
+                  ...facet.data,
+                  choices:
+                    facet.data?.choices?.map((choice) => {
+                      if (String(choice.value) === String(choiceValue)) {
+                        return { ...choice, is_selected: isSelected };
+                      }
+                      return choice;
+                    }) || []
+                }
+              };
+            }
+            return facet;
+          }) || []
+      };
+    },
+    [searchResults]
+  );
+
+  const handleFacetChange = async (
+    facetKey: string,
+    choiceValue: string | number
+  ) => {
+    if (
+      !searchResults ||
+      lastProductIds.length === 0 ||
+      String(facetKey) === 'category_ids'
+    )
+      return;
+
+    const targetFacet = searchResults.facets?.find(
+      (f) => String(f.key) === String(facetKey)
+    );
+    const targetChoice = targetFacet?.data?.choices?.find(
+      (c) => String(c.value) === String(choiceValue)
+    );
+
+    const updatedSearchResults = updateFacetSelection(
+      facetKey,
+      choiceValue,
+      !(targetChoice?.is_selected || false)
+    );
+
+    if (!updatedSearchResults) return;
+
+    const resultsWithResetSorter = {
+      ...updatedSearchResults,
+      sorters:
+        updatedSearchResults.sorters?.map((sorter) => ({
+          ...sorter,
+          is_selected: sorter.value === 'default'
+        })) || []
+    };
+
+    updateResultsAndKey(resultsWithResetSorter);
+
+    const searchParams = buildSearchParams(resultsWithResetSorter.facets);
+    const result = await executeProductSearch(lastProductIds, searchParams);
+
+    if (result) {
+      const finalResult = {
+        ...result,
+        facets: preserveFacetState(
+          result.facets,
+          resultsWithResetSorter.facets
+        ),
+        sorters: resultsWithResetSorter.sorters // Reset edilmiş sorter'ları kullan
+      };
+      updateResultsAndKey(finalResult);
+    }
+  };
+
+  const removeFacetFilter = async (
+    facetKey: string,
+    choiceValue: string | number
+  ) => {
+    if (
+      !searchResults ||
+      lastProductIds.length === 0 ||
+      String(facetKey) === 'category_ids'
+    )
+      return;
+
+    const updatedSearchResults = updateFacetSelection(
+      facetKey,
+      choiceValue,
+      false
+    );
+    if (!updatedSearchResults) return;
+
+    const resultsWithResetSorter = {
+      ...updatedSearchResults,
+      sorters:
+        updatedSearchResults.sorters?.map((sorter) => ({
+          ...sorter,
+          is_selected: sorter.value === 'default'
+        })) || []
+    };
+
+    const searchParams = buildSearchParams(resultsWithResetSorter.facets);
+    const result = await executeProductSearch(lastProductIds, searchParams);
+
+    if (result) {
+      const finalResult = {
+        ...result,
+        facets: preserveFacetState(
+          result.facets,
+          resultsWithResetSorter.facets
+        ),
+        sorters: resultsWithResetSorter.sorters
+      };
+      updateResultsAndKey(finalResult);
+    }
+  };
+
+  const clearError = useCallback(() => {
+    setFileError('');
+  }, []);
+
+  const clearFileInput = useCallback(
+    (fileInputRef: React.RefObject<HTMLInputElement>) => {
+      if (fileInputRef.current) {
+        fileInputRef.current.value = '';
+      }
+    },
+    []
+  );
+
+  const handleLoadMore = async () => {
+    if (!searchResults?.pagination || isLoading) return;
+
+    const nextPage = searchResults.pagination.current_page + 1;
+    if (nextPage > searchResults.pagination.num_pages) return;
+
+    const currentSortValue =
+      searchResults.sorters?.find((s) => s.is_selected)?.value || 'default';
+    const searchParams = buildSearchParams(
+      searchResults.facets,
+      currentSortValue,
+      nextPage
+    );
+    const result = await executeProductSearch(
+      lastProductIds,
+      searchParams,
+      currentSortValue
+    );
+
+    if (result) {
+      setLoadedPages((prev) => new Set([...Array.from(prev), nextPage]));
+
+      updateResultsAndKey(
+        {
+          ...result,
+          pagination: {
+            ...result.pagination,
+            current_page: nextPage
+          }
+        },
+        true
+      );
+    }
+  };
+
+  return {
+    currentImageUrl,
+    setCurrentImageUrl,
+    isLoading,
+    fileError,
+    searchResults,
+    resultsKey,
+    hasUploadedImage,
+    setHasUploadedImage,
+    handleFileUpload,
+    handleImageCrop,
+    fetchSimilarProductsByImageUrl,
+    fetchSimilarProductsByBase64,
+    fetchSimilarProductsByImageCrop,
+    handleSortChange,
+    handlePageChange,
+    handleFacetChange,
+    removeFacetFilter,
+    handleLoadMore,
+    loadedPages: Array.from(loadedPages),
+    allLoadedProducts,
+    clearError,
+    clearFileInput
+  };
+}