'use client'
import { FC } from 'react'
import ProductCard from '@/components/ProductCard'
import { Product } from '../types/Types'
import { IProduct } from '@/types/landing.types'

interface Props {
    products: Product[]
    isLoading?: boolean
}

const ProductGrid: FC<Props> = ({ products, isLoading = false }) => {
    if (isLoading) {
        return (
            <div className='space-y-6'>
                <div className='flex items-center justify-between'>
                    <h2 className='text-xl font-bold text-gray-800'>محصولات تولید کننده</h2>
                </div>

                <div className='grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6'>
                    {Array.from({ length: 8 }).map((_, index) => (
                        <div key={index} className='animate-pulse'>
                            <div className='bg-gray-200 rounded-2xl p-6 h-[320px]'></div>
                        </div>
                    ))}
                </div>
            </div>
        )
    }

    return (
        <div className='space-y-6'>
            <div className='flex items-center justify-between'>
                <h2 className='text-xl font-bold text-gray-800'>محصولات تولید کننده</h2>
                <div className='text-sm text-gray-500'>
                    {products.length} محصول یافت شد
                </div>
            </div>

            {products.length === 0 ? (
                <div className='text-center py-12'>
                    <div className='text-gray-400 text-lg mb-2'>هیچ محصولی یافت نشد</div>
                    <div className='text-gray-500 text-sm'>لطفاً فیلترهای خود را تغییر دهید</div>
                </div>
            ) : (
                <div className='grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6'>
                    {products.map((product) => {
                        // تبدیل Product به IProduct
                        const defaultVariant = product.default_variant || product.variants?.[0];
                        const price = defaultVariant?.price || {
                            order_limit: 1,
                            retailPrice: 0,
                            is_specialSale: false,
                            discount_percent: 0,
                            specialSale_order_limit: null,
                            specialSale_quantity: null,
                            specialSale_endDate: null,
                            selling_price: 0
                        };

                        const iProduct: IProduct = {
                            _id: product._id,
                            title_fa: product.title_fa,
                            title_en: product.title_en,
                            seoTitle: product.seoTitle || null,
                            seoDescription: product.seoDescription || null,
                            model: '',
                            description: product.description,
                            tags: product.tags || [],
                            shop: defaultVariant?.shop || {
                                _id: '',
                                shopName: '',
                                shopDescription: '',
                                logo: ''
                            },
                            status: defaultVariant?.market_status || 'active',
                            imagesUrl: product.imagesUrl,
                            url: product.url,
                            isWishlist: product.isWished || false,
                            default_variant: {
                                _id: defaultVariant?._id || product._id.toString(),
                                market_status: defaultVariant?.market_status || 'active',
                                price: price,
                                stock: defaultVariant?.stock || 0,
                                isFreeShip: defaultVariant?.isFreeShip || false,
                                isWholeSale: defaultVariant?.isWholeSale || false
                            },
                            variants: (product.variants || []).map(variant => ({
                                ...variant,
                                market_status: variant.market_status as "Marketable" | "Unmarketable" | "OutOfStock",
                                shipmentMethod: variant.shipmentMethod.map(method => ({
                                    ...method,
                                    deliveryType: method.deliveryType as "Standard" | "SameDay" | "Express"
                                }))
                            }))
                        };

                        return (
                            <ProductCard
                                key={product._id}
                                item={iProduct}
                            />
                        );
                    })}
                </div>
            )}
        </div>
    )
}

export default ProductGrid
