'use client'
import Breadcrumb from '@/src/components/custom-components/breadcrumb';
import StickyNav from '@/src/components/custom-components/sticky-post';
import NotFound from '@/src/components/not-found';
import ListSkeleton from '@/src/components/relation/skeletons/list-skeleton';
import ProductDetailsSkeleton from '@/src/components/relation/skeletons/product-details-skeleton';
import { routes } from '@/src/config/routes';
import { animations } from '@/src/constants/animations';
import { apiEndpoints } from '@/src/server_api/config/api.endpoints';
import useApi from '@/src/server_api/hooks/use-api';
import { APIFetch } from '@/src/server_api/utils/api-fetch';
import FrequentlyBoughtTogether from '@/src/shared-pages/product-details/bought-together';
import ProductGallery from '@/src/shared-pages/product-details/product-gallery';
import ProductInfo from '@/src/shared-pages/product-details/product-info';
import RelatedProducts from '@/src/shared-pages/product-details/related-products'
import ProductDescription from '@/src/shared-pages/product-listing/product-description';
import { useParams, useSearchParams } from 'next/navigation';
import React, { useState } from 'react'

const ProductDetail = () => {
    const params = useParams();
    const [quantity, setQuantity] = useState(1);

    const slug = Array.isArray(params.slug)
        ? params.slug[0]
        : params.slug;

    const { data, isLoading } = useApi({
        apiEndpoint: apiEndpoints.products.product_details(slug),
        enableFetchApi: !!slug,
    });

    const { data: products } = useApi({
        apiEndpoint: apiEndpoints.products.product_list,
        enableFetchApi: true,
    });
    const { data: tax } = useApi({
        apiEndpoint: apiEndpoints.products.tax,
        enableFetchApi: !!slug,
    });


    const categoryId =
        data?.product?.productCategory?.[0]?._id;

    const {
        data: relatedProducts,
        isLoading: isRelatedProducts
    } = useApi({
        apiEndpoint: categoryId
            ? apiEndpoints.products.related_products(categoryId)
            : "",
        enableFetchApi: !!categoryId,
    });

    const productList = products?.products || [];

    const currentIndex = productList.findIndex(
        (item: any) => item.slug === slug
    );

    const nextProduct =
        currentIndex !== -1 && currentIndex < productList.length - 1
            ? productList[currentIndex + 1]
            : null;

    console.log("freq...", data?.product?.productVariants?.[0]?.boughtTogether)

    return (
        <div className="bg-white mt-5">
            <APIFetch
                lengthCheckObject={data?.product}
                isLoading={isLoading}
                animatedLoading={animations.productDetails}
                blocks={8}
                messageContent={<NotFound />}
            >
                <>
                    <Breadcrumb
                        items={[
                            {
                                title: "Home",
                                href: routes.home
                            },
                            {
                                title: data?.product?.productTitle,
                            },
                        ]}
                    />
                    <div
                        className="
                            mx-auto
                            px-6
                            lg:px-26
                            sm:px-5
                            py-5
                            grid
                            grid-cols-1
                            lg:grid-cols-2
                            gap-10
                            "
                    >
                        <div className="">
                            <ProductGallery product={data?.product} />
                        </div>
                        <div>
                            <ProductInfo
                                product={data?.product}
                                tax={tax?.[0]?.taxPercentage}
                                quantity={quantity}
                                setQuantity={setQuantity}
                            />
                            {data?.product?.productVariants?.[0]?.boughtTogether?.length > 0 &&
                                <FrequentlyBoughtTogether
                                    mainProduct={{
                                        _id: data?.product._id,
                                        title: data?.product?.productTitle,
                                        image: data?.product?.productImageUrl,
                                        price: data?.product?.productVariants?.[0]?.price,
                                        slug: data?.product?.slug,
                                        variantSku: data?.product?.productVariants?.[0]?.variantSku,
                                        quantity: quantity
                                    }}
                                    products={data?.product?.productVariants?.[0]?.boughtTogether || []}
                                    onAddToCart={(items) => {
                                        console.log("Add to cart:", items);
                                    }}
                                />}
                        </div>
                    </div>
                    <ProductDescription product={data?.product} />
                </>
            </APIFetch>
            {relatedProducts?.length > 0 &&
                <div className="mx-auto  px-0 pb-10 sm:px-0 lg:px-26">
                    {isRelatedProducts ? (
                        <ListSkeleton />
                    ) : (
                        <RelatedProducts products={relatedProducts} />
                    )}
                </div>}

            {nextProduct && (
                <StickyNav
                    item={{
                        title: nextProduct.productTitle,
                        url: `${routes.productList}/${nextProduct.slug}`,
                        image: nextProduct.productImageUrl,
                        label: "Next Product",
                    }}
                />
            )}
        </div>
    )
}

export default ProductDetail