"use client";

import React, { useEffect, useState } from "react";
import {
  Carousel,
  CarouselContent,
  CarouselItem,
  CarouselNext,
  CarouselPrevious,
} from "@/components/ui/carousel";
import { ProductRecommendationCarouselCard } from "@/components/showcase/ProductRecommendationCarouselCard";
import { searchProducts } from "@/lib/product-actions";
import { logClientError } from "@/actions/logging";
import { ProductDetails } from "@/types/product";

export const ProductRecommendationCarousel = ({
  initialProducts,
}: {
  initialProducts?: ProductDetails[];
}) => {
  const [products, setProducts] = useState<ProductDetails[]>(
    initialProducts || []
  );
  const [loading, setLoading] = useState(!initialProducts);

  useEffect(() => {
    if (initialProducts) return;
    const fetchProducts = async () => {
      try {
        const response = await searchProducts({ 
          page: 1, 
          pageSize: 10, 
          requestType: "display",
          sortOrder: "ASC"
        });
        
        if (response.success) {
          setProducts(response.data.documents);
        } else {
          throw new Error(response.error);
        }
      } catch (error: any) {
        console.error("Failed to fetch products:", error);
        logClientError("Failed to fetch products", { 
          error: error.message || String(error),
          stack: error.stack 
        });
      } finally {
        setLoading(false);
      }
    };

    fetchProducts();
  }, [initialProducts]);

  if (loading) {
    return (
      <div className="my-4 h-48 flex items-center justify-center">
        <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-gray-900" />
      </div>
    );
  }

  return (
    <div className="my-4">
      <Carousel
        opts={{
          align: "start",
          dragFree: true,
        }}
        className="w-auto"
      >
        <CarouselContent>
          {products.map((product) => (
            <CarouselItem key={product.id} className="basis-1/6">
              <ProductRecommendationCarouselCard
                ImageLink={product.image}
                ProductName={product.title}
                ProductPrice={product.price}
                ProductId={product.id}
              />
            </CarouselItem>
          ))}
        </CarouselContent>
        <CarouselPrevious />
        <CarouselNext />
      </Carousel>
    </div>
  );
};