"use client";
import { useLocale, useTranslations } from "next-intl";
import { useEffect, useState } from "react";
import InfiniteScroll from "react-infinite-scroll-component";
import HeroCarousel from "./Carousel";
import CategoryGrid from "./CategoryGrid";
import CollectionSection from "./ProductGrid";
import { useCategories, useCarousels, useCollections } from "@/lib/hooks";


export default function HomePage() {
  const locale = useLocale();
  const t = useTranslations("common");
  const [mounted, setMounted] = useState(false);
  const [visibleCount, setVisibleCount] = useState(10);

  const {
    data: categories,
    isLoading: categoriesLoading,
    isError: categoriesError,
  } = useCategories();
  
  const { data: carousels, isLoading: carouselsLoading } = useCarousels();
  
  const {
    data: collections,
    isLoading: collectionsLoading,
    isError: collectionsError,
  } = useCollections();

  useEffect(() => setMounted(true), []);

  const loadMore = () => {
    if (collections && visibleCount < collections.length) {
      setVisibleCount((prev) => Math.min(prev + 10, collections.length));
    }
  };

  if (!mounted) return <div className="p-8">Loading...</div>;

  const carouselItems =
    carousels?.map((carousel) => ({
      title: carousel.title || "",
      image: carousel.image || carousel.thumbnail,
      url: carousel.link || null,
    })) || [];

  const visibleCollections = collections?.slice(0, visibleCount) || [];
  const hasMore = collections ? visibleCount < collections.length : false;

  return (
    <div className="px-4 md:px-8 lg:px-12 pt-8 pb-12 space-y-8">
      {!carouselsLoading && carouselItems.length > 0 && (
        <HeroCarousel items={carouselItems} />
      )}

      <CategoryGrid
        categories={categories}
        isLoading={categoriesLoading}
        isError={categoriesError}
        locale={locale}
        title={t("categories")}
      />

      {collectionsError ? (
        <section className="bg-white rounded-2xl shadow-sm p-6">
          <p className="text-red-600">
            Failed to load collections. Please try again.
          </p>
        </section>
      ) : collectionsLoading ? (
        <div className="space-y-8">
          {Array.from({ length: 3 }).map((_, i) => (
            <div key={i} className="bg-white rounded-2xl shadow-sm p-6">
              <div className="h-8 bg-gray-200 rounded w-48 mb-4 animate-pulse" />
              <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-4">
                {Array.from({ length: 4 }).map((_, j) => (
                  <div
                    key={j}
                    className="h-64 bg-gray-200 rounded-lg animate-pulse"
                  />
                ))}
              </div>
            </div>
          ))}
        </div>
      ) : (
        <InfiniteScroll
          dataLength={visibleCollections.length}
          next={loadMore}
          hasMore={hasMore}
          loader={
            <div className="text-center py-8">
              <div className="inline-block h-8 w-8 animate-spin rounded-full border-4 border-solid border-blue-600 border-r-transparent"></div>
              <p className="text-gray-500 mt-2">Loading more collections...</p>
            </div>
          }
          endMessage={
            <div className="text-center py-8">
              <p className="text-gray-600">✓ All collections loaded</p>
            </div>
          }
          scrollThreshold={0.8}
        >
          <div className="space-y-8">
            {visibleCollections.map((collection) => (
              <CollectionSection
                key={collection.id}
                collection={collection}
                locale={locale}
              />
            ))}
          </div>
        </InfiniteScroll>
      )}
    </div>
  );
}