shopify-template/hooks/use-shopify-collections.ts

'use client';

import { useState, useEffect, useCallback } from 'react';
import { shopifyFetch } from '@/services/shopify/client';
import {
  GET_COLLECTIONS_QUERY,
  GET_COLLECTION_PRODUCTS_QUERY,
} from '@/graphql/collections';
import type { Product } from '@/hooks/use-shopify-products';

interface CollectionImage {
  url: string;
  altText?: string;
}

export interface Collection {
  id: string;
  title: string;
  handle: string;
  description?: string;
  descriptionHtml?: string;
  image?: CollectionImage;
}

export interface CollectionWithProducts extends Collection {
  products: Product[];
}

export type CollectionSortKey =
  | 'COLLECTION_DEFAULT'
  | 'BEST_SELLING'
  | 'CREATED'
  | 'PRICE'
  | 'TITLE';

interface UseCollectionProductsOptions {
  first?: number;
  after?: string | null;
  sortKey?: CollectionSortKey;
  reverse?: boolean;
  /** Raw `input` strings from the connection's `filters` facets. */
  filterInputs?: string[];
}

export interface CollectionProductsPage {
  collection: Collection | null;
  products: Product[];
  filters: ProductFilterFacet[];
  hasNextPage: boolean;
  endCursor: string | null;
}

export interface ProductFilterFacet {
  id: string;
  label: string;
  type: 'LIST' | 'PRICE_RANGE' | 'BOOLEAN';
  values: Array<{
    id: string;
    label: string;
    count: number;
    input: string;
  }>;
}

// Fetch all collections
export async function getCollections(first = 50): Promise<Collection[]> {
  const response = await shopifyFetch({
    query: GET_COLLECTIONS_QUERY,
    variables: { first },
  });

  return response.data.collections.edges.map((edge: { node: Collection }) => edge.node);
}

// Fetch products in a collection by handle
export async function getCollectionProducts(
  handle: string,
  options: UseCollectionProductsOptions = {}
): Promise<CollectionWithProducts | null> {
  const page = await getCollectionProductsPage(handle, options);
  if (!page.collection) return null;

  return { ...page.collection, products: page.products };
}

// Same fetch, but keeps the cursor and facet list for filtering and paging.
export async function getCollectionProductsPage(
  handle: string,
  {
    first = 50,
    after = null,
    sortKey = 'COLLECTION_DEFAULT',
    reverse = false,
    filterInputs = [],
  }: UseCollectionProductsOptions = {}
): Promise<CollectionProductsPage> {
  const filters = filterInputs.flatMap((input) => {
    try {
      return [JSON.parse(input)];
    } catch {
      console.warn('Ignoring malformed product filter input:', input);
      return [];
    }
  });

  const response = await shopifyFetch({
    query: GET_COLLECTION_PRODUCTS_QUERY,
    variables: {
      handle,
      first,
      after,
      sortKey,
      reverse,
      filters: filters.length ? filters : null,
    },
  });

  const collection = response.data.collection;
  if (!collection) {
    return {
      collection: null,
      products: [],
      filters: [],
      hasNextPage: false,
      endCursor: null,
    };
  }

  const { edges, pageInfo, filters: facets } = collection.products;

  return {
    collection,
    products: edges.map((edge: { node: Product }) => edge.node),
    filters: facets ?? [],
    hasNextPage: Boolean(pageInfo?.hasNextPage),
    endCursor: pageInfo?.endCursor ?? null,
  };
}

// Hook for fetching all collections
export function useCollections(first = 50) {
  const [collections, setCollections] = useState<Collection[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

  const fetchCollections = useCallback(async () => {
    try {
      setLoading(true);
      setError(null);
      const data = await getCollections(first);
      setCollections(data);
    } catch (err) {
      console.error('Error fetching collections:', err);
      setError(err instanceof Error ? err.message : 'Failed to load collections');
    } finally {
      setLoading(false);
    }
  }, [first]);

  useEffect(() => {
    fetchCollections();
  }, [fetchCollections]);

  return { collections, loading, error, refetch: fetchCollections };
}

// Hook for fetching products in a collection
export function useCollectionProducts(
  handle: string | null,
  options: UseCollectionProductsOptions = {}
) {
  const [collection, setCollection] = useState<CollectionWithProducts | null>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

  const fetchCollection = useCallback(async () => {
    if (!handle) {
      setLoading(false);
      return;
    }

    try {
      setLoading(true);
      setError(null);
      const data = await getCollectionProducts(handle, options);
      setCollection(data);
      if (!data) {
        setError('Collection not found');
      }
    } catch (err) {
      console.error('Error fetching collection products:', err);
      setError(err instanceof Error ? err.message : 'Failed to load collection');
    } finally {
      setLoading(false);
    }
  }, [handle, options.first, options.sortKey, options.reverse]);

  useEffect(() => {
    fetchCollection();
  }, [fetchCollection]);

  return { collection, loading, error, refetch: fetchCollection };
}