'use client'
import {
    Breadcrumb,
    BreadcrumbItem,
    BreadcrumbLink,
    BreadcrumbList,
    BreadcrumbPage,
    BreadcrumbSeparator,
} from '@/components/ui/breadcrumb'
import ProductImage from '@/app/product/components/ProductImage'
import BaseInformation from '@/app/product/components/BaseInformation'
import ShopInformation from '@/app/product/components/ShopInformation'
import Specifications from '@/app/product/components/Specifications'
import ProsCons from '@/app/product/components/ProsCons'
import Description from '@/app/product/components/Description'
import Reviews from '@/app/product/components/Reviews'
import Questions from '@/app/product/components/Questions'
import { useGetDetailProduct } from '@/app/product/hooks/useProductData'
import PageLoading from '@/components/PageLoading'
import { notFound } from 'next/navigation'

interface SingleProductProps {
    id: string
}

const SingleProduct = ({ id }: SingleProductProps) => {
    const { data: productData, isLoading, error } = useGetDetailProduct(id)

    if (isLoading) {
        return <PageLoading />
    }

    if (error || !productData) {
        notFound()
    }

    const { product, categoryPath, reviews, questions } = productData.results

    return (
        <div className='mt-14 px-4 sm:px-6 md:px-8 lg:px-12 xl:px-20'>
            <div className='flex flex-col sm:flex-row justify-between gap-4 sm:gap-0'>
                <Breadcrumb aria-label="breadcrumb">
                    <BreadcrumbList className="text-sm text-muted-foreground">
                        <BreadcrumbItem>
                            <BreadcrumbLink href="/">فروشگاه آناهیتا</BreadcrumbLink>
                        </BreadcrumbItem>
                        {categoryPath.map((category, index) => (
                            <div key={category.id} className="flex items-center">
                                <BreadcrumbSeparator className="text-muted-foreground select-none">/</BreadcrumbSeparator>
                                <BreadcrumbItem>
                                    {index === categoryPath.length - 1 ? (
                                        <BreadcrumbPage className="text-foreground">{category.title_fa}</BreadcrumbPage>
                                    ) : (
                                        <BreadcrumbLink href={`/products?category=${category.id}`}>
                                            {category.title_fa}
                                        </BreadcrumbLink>
                                    )}
                                </BreadcrumbItem>
                            </div>
                        ))}
                    </BreadcrumbList>
                </Breadcrumb>

                <div className='text-primary text-xs sm:text-sm'>فروشنده شوید</div>
            </div>

            <div className='flex flex-col xl:flex-row gap-4 sm:gap-6 mt-8 sm:mt-12 md:mt-14'>
                <div className='flex-1 flex flex-col gap-6'>
                    <div className='flex flex-col lg:flex-row gap-4 sm:gap-6'>
                        <ProductImage product={product} />
                        <BaseInformation product={product} />
                    </div>
                    <div>
                        <Specifications product={product} />
                        <Description product={product} />
                        <ProsCons product={product} />
                        <Reviews product={product} reviews={reviews} />
                        <Questions product={product} questions={questions} />
                    </div>
                </div>
                <div className='xl:w-[325px] xl:shrink-0'>
                    <ShopInformation product={product} />
                </div>
            </div>
        </div>
    )
}

export default SingleProduct
