import { FC } from "react";
import { useTranslation } from "react-i18next";
import ProductCard from "@/components/Cards/ProductCard";
import ProductCardSkeleton from "@/components/Skeletons/ProductCardSkeleton";
import { getProducts } from "@/routes/api";
import { getActiveCategory } from "@/helpers/getters";
import { PaginatedResponse, Product } from "@/types/ApiResponse";
import SectionHeading from "@/components/SectionHeading";
import { Boxes } from "lucide-react";
import InfiniteScroll from "@/components/Functional/InfiniteScroll";
import { useInfiniteData } from "@/hooks/useInfiniteData";
import InfiniteScrollStatus from "@/components/Functional/InfiniteScrollStatus";

interface HomeProductProps {
  initialProducts?: PaginatedResponse<Product[]> | null;
}

const HomeProducts: FC<HomeProductProps> = ({ initialProducts = null }) => {
  const { t } = useTranslation();


  // Get active category from URL query or cookie
  const activeCategory = getActiveCategory() || "all";

  const {
    data: products,
    isLoading,
    isLoadingMore,
    hasMore,
    total,
    loadMore,
    refetch,
  } = useInfiniteData<Product>({
    fetcher: (params) =>
      getProducts({
        ...params,
        categories: activeCategory === "all" ? undefined : activeCategory,
        include_child_categories: 0,
      }),
    perPage: 15,
    initialData: initialProducts?.data?.data || [],
    initialTotal: initialProducts?.data?.total || 0,
    passLocation: true,
    dataKey: `/homeProducts-${activeCategory}`,
  });

  const shouldHide = products?.length === 0 && !isLoading;

  return (
    <section id="home-products">
      <button
        onClick={() => refetch()}
        className="hidden"
        id="home-products-refetch"
      />

      {!shouldHide && (
        <div className="w-full mb-8">
          <div className="flex justify-between w-full items-center mb-6">
            <SectionHeading
              title={t("home.products.title")}
              description={t("home.products.description")}
              icon={<Boxes size={16} className="text-white" />}
            />
          </div>

          <div className="w-full">
            <InfiniteScroll
              hasMore={hasMore}
              isLoading={isLoadingMore}
              onLoadMore={loadMore}
            >
              <div className="grid grid-cols-2 xs:grid-cols-2 sm:grid-cols-4 md:grid-cols-5 lg:grid-cols-7 xl:grid-cols-8 gap-2">
                {isLoading && products.length === 0
                  ? Array.from({ length: 24 }).map((_, i) => (
                    <ProductCardSkeleton key={i} />
                  ))
                  : products.map((product, idx) => (
                    <ProductCard key={`${product.id}-${idx}`} product={product} />
                  ))}
              </div>

              {isLoadingMore && (
                <div className="grid grid-cols-2 xs:grid-cols-2 sm:grid-cols-4 md:grid-cols-5 lg:grid-cols-7 xl:grid-cols-8 gap-2 mt-6">
                  {Array.from({ length: 14 }).map((_, i) => (
                    <ProductCardSkeleton key={`loading-${i}`} />
                  ))}
                </div>
              )}

              {products.length > 0 ? (
                <InfiniteScrollStatus
                  entityType="product"
                  total={total}
                  hasMore={hasMore}
                />
              ) : (
                !isLoading && (
                  <div className="text-center py-8 text-default-500">
                    {t("no_products_found")}
                  </div>
                )
              )}
            </InfiniteScroll>
          </div>
        </div>
      )}
    </section>
  );
};

export default HomeProducts;