'use client'
import { FC } from 'react'
import { Swiper, SwiperSlide } from 'swiper/react'
import { Pagination, Navigation } from 'swiper/modules'
import ProductCard from '@/components/ProductCard'
import { Product } from '../types/Types'
import { IProduct } from '@/types/landing.types'
import { PRIMARY_COLOR } from '@/config/const'
import 'swiper/css'
import 'swiper/css/pagination'
import 'swiper/css/navigation'

interface Props {
    products: Product[]
    brandName: string
}

const BrandProductsCarousel: FC<Props> = ({ products, brandName }) => {
    return (
        <div className='bg-white rounded-2xl p-6 shadow-sm'>
            <div className='flex items-center justify-between mb-6'>
                <h3 className='text-xl font-bold text-gray-800'>محصولات برند {brandName}</h3>
                <div className='flex items-center gap-2 text-sm text-gray-500'>
                    <span>نمایش محصولات</span>
                    <div className='w-2 h-2 bg-primary rounded-full'></div>
                </div>
            </div>

            <Swiper
                modules={[Pagination, Navigation]}
                spaceBetween={16}
                slidesPerView='auto'
                pagination={{
                    clickable: true,
                    dynamicBullets: true,
                }}
                navigation={{
                    nextEl: '.swiper-button-next',
                    prevEl: '.swiper-button-prev',
                }}
                breakpoints={{
                    640: {
                        spaceBetween: 20,
                    },
                    768: {
                        spaceBetween: 24,
                    },
                }}
                className='brand-products-swiper'
            >
                {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 (
                        <SwiperSlide key={product._id} className='!w-auto'>
                            <div className='w-[240px] sm:w-[280px]'>
                                <ProductCard item={iProduct} />
                            </div>
                        </SwiperSlide>
                    );
                })}
            </Swiper>

            <style jsx global>{`
        .brand-products-swiper .swiper-pagination {
          position: relative;
          margin-top: 24px;
        }
        
        .brand-products-swiper .swiper-pagination-bullet {
          background: #d1d5db;
          opacity: 1;
          width: 8px;
          height: 8px;
        }
        
        .brand-products-swiper .swiper-pagination-bullet-active {
          background: ${PRIMARY_COLOR};
        }
        
        .brand-products-swiper .swiper-button-next,
        .brand-products-swiper .swiper-button-prev {
          color: ${PRIMARY_COLOR};
          width: 32px;
          height: 32px;
          margin-top: -16px;
        }
        
        .brand-products-swiper .swiper-button-next:after,
        .brand-products-swiper .swiper-button-prev:after {
          font-size: 16px;
        }
      `}</style>
        </div>
    )
}

export default BrandProductsCarousel
