'use client'
import Layout from "@/hoc/Layout"
import { NextPage } from "next"
import Menu from "../components/Menu"
import GridWrapper from "@/components/GridWrapper"
import ProductCard from "@/components/ProductCard"
import { useGetWithList } from "../hooks/useProfileData"
import { IProduct } from "@/types/landing.types"
import { WishlistItem } from "../types/ProfileTypes"
import PageLoading from "@/components/PageLoading"


const FavoritePage: NextPage = () => {

    const { data: withList, isLoading } = useGetWithList()

    // تبدیل داده‌های wishlist به فرمت IProduct
    const transformWishlistToProducts = (wishlistItems: WishlistItem[]): IProduct[] => {
        return wishlistItems.map((item) => ({
            _id: item.product._id,
            title_fa: item.product.title_fa,
            title_en: item.product.title_en,
            seoTitle: item.product.seoTitle,
            seoDescription: item.product.seoDescription,
            model: '', // این فیلد در wishlist وجود ندارد
            description: item.product.description,
            tags: item.product.tags,
            shop: {
                _id: item.variant.shop._id,
                shopName: item.variant.shop.shopName,
                shopDescription: item.variant.shop.shopDescription,
                logo: item.variant.shop.logo,
            },
            status: 'active', // فرض می‌کنیم فعال است
            imagesUrl: item.product.imagesUrl,
            url: item.product.url,
            default_variant: {
                _id: item.variant._id,
                market_status: item.variant.market_status,
                price: item.variant.price,
                stock: item.variant.stock,
                isFreeShip: item.variant.isFreeShip,
                isWholeSale: item.variant.isWholeSale,
            },
            variants: [{
                _id: item.variant._id,
                market_status: item.variant.market_status as "Marketable" | "Unmarketable" | "OutOfStock",
                price: item.variant.price,
                stock: item.variant.stock,
                postingTime: item.variant.postingTime,
                isFreeShip: item.variant.isFreeShip,
                isWholeSale: item.variant.isWholeSale,
                shop: {
                    _id: item.variant.shop._id,
                    shopName: item.variant.shop.shopName,
                    shopDescription: item.variant.shop.shopDescription,
                    logo: item.variant.shop.logo,
                },
                shipmentMethod: [], // این فیلد در wishlist وجود ندارد
                warranty: item.variant.warranty,
                meterage: item.variant.meterage ? { _id: 0, value: item.variant.meterage.toString() } : undefined,
                size: item.variant.size ? { _id: 0, value: item.variant.size.toString() } : undefined,
            }],
            isWishlist: true, // چون در لیست علاقه‌مندی‌ها است
        }))
    }

    const products = withList?.results?.wishlist ? transformWishlistToProducts(withList.results.wishlist) : []

    if (isLoading) {
        return <PageLoading />
    }


    return (
        <div className="p-3 sm:p-4 md:p-6">
            <Menu pageActive='favorite' />

            {products.length === 0 && !isLoading ? (
                <div className="flex flex-col items-center justify-center mt-12 text-center">
                    <div className="text-gray-400 text-lg mb-4">لیست علاقه‌مندی‌های شما خالی است</div>
                    <div className="text-gray-500 text-sm">محصولات مورد علاقه خود را اضافه کنید</div>
                </div>
            ) : (
                <GridWrapper desktop={5} mobile={2} className="mt-6 sm:mt-8 md:mt-10 lg:mt-14">
                    {products.map((product) => (
                        <ProductCard key={product._id} item={product} />
                    ))}
                </GridWrapper>
            )}
        </div>
    )
}

export default function FavoritePageWithLayout() {
    return (
        <Layout>
            <FavoritePage />
        </Layout>
    )
}