'use client'
import { Star1 } from 'iconsax-react'
import { FC, useEffect } from 'react'
import { Product } from '@/types/product.types'
import Image from 'next/image'
import { clx } from '@/helpers/utils'
import { useProductStore } from '../store/Store'

interface BaseInformationProps {
    product: Product
}

const BaseInformation: FC<BaseInformationProps> = ({ product }) => {

    const { setVariantId, variantId } = useProductStore()

    const brand = product.brand

    // تابع برای انتخاب variant
    const handleVariantSelect = (variantId: string) => {
        setVariantId(variantId)
    }

    // انتخاب اولین variant به صورت پیش‌فرض
    useEffect(() => {
        if (product.variants.length > 0 && !variantId) {
            setVariantId(product.variants[0]._id)
        }
    }, [product.variants, variantId, setVariantId])

    return (
        <div className='flex-1'>
            <h1 className='text-base sm:text-lg text-[#191919] leading-relaxed'>
                {product.title_fa}
            </h1>

            <p className='mt-4 sm:mt-6 text-[#B2B2B2] text-xs sm:text-sm'>
                {product.title_en}
            </p>

            <div className='mt-4 flex flex-wrap gap-2 sm:gap-4 items-center'>
                <h3 className='text-primary text-sm sm:text-base'>
                    {brand.title_fa}
                </h3>
                <div className='size-1.5 rounded-full bg-[#E5E5E5]'></div>
                <div className='flex items-center gap-1'>
                    <Star1 size={16} color='#FFC107' variant='Bold' className='sm:w-5 sm:h-5' />
                    <span className='text-xs sm:text-sm'>3.5</span>
                </div>
                <div className='size-1.5 rounded-full bg-[#E5E5E5]'></div>
                <div className='text-primary text-xs sm:text-sm'>
                    8 دیدگاه
                </div>
            </div>

            {/* نمایش variant ها */}
            <div className='mt-4 sm:mt-6'>
                {/* متراژ */}
                <div className='flex flex-wrap items-center gap-1.5 mb-4'>
                    {product.variants.map((variant) => {
                        if (variant.meterage) {
                            const isSelected = variantId === variant._id
                            return (
                                <button
                                    key={variant._id}
                                    onClick={() => handleVariantSelect(variant._id)}
                                    className={`text-[13px] px-4 py-2 border border-border rounded-lg whitespace-nowrap transition-colors ${isSelected
                                        ? 'bg-primary text-white border-primary'
                                        : 'hover:border-primary/50'
                                        }`}
                                >
                                    {variant.meterage.value}
                                </button>
                            )
                        }
                        return null
                    })}
                </div>

                {/* رنگ ها */}
                <div className='flex flex-wrap items-center gap-1.5 mb-4'>
                    {product.variants.map((variant) => {
                        if (variant.color) {
                            const isSelected = variantId === variant._id
                            return (
                                <button
                                    key={variant._id}
                                    onClick={() => handleVariantSelect(variant._id)}
                                    className={clx(
                                        'size-10 rounded-full flex justify-center items-center',
                                        variant.color.hexColor === '#FFFFFF' ? 'border border-border' : ''
                                    )}
                                    style={{ backgroundColor: variant.color.hexColor }}
                                >
                                    {isSelected && <Image src='/images/tick.svg' alt='check' width={20} height={20} className={clx(
                                        'size-5',
                                        variant.color.hexColor === '#FFFFFF' ? 'filterBlack' : ''
                                    )} />}
                                </button>
                            )
                        }
                        return null
                    })}
                </div>

                {/* سایزها */}
                <div className='flex flex-wrap items-center gap-1.5'>
                    {product.variants.map((variant) => {
                        if (variant.size) {
                            const isSelected = variantId === variant._id
                            return (
                                <button
                                    key={variant._id}
                                    onClick={() => handleVariantSelect(variant._id)}
                                    className={`text-[13px] px-4 py-2 border border-border rounded-lg whitespace-nowrap transition-colors ${isSelected
                                        ? 'bg-primary text-white border-primary'
                                        : 'hover:border-primary/50'
                                        }`}
                                >
                                    {variant.size.value}
                                </button>
                            )
                        }
                        return null
                    })}
                </div>
            </div>

            <div className='mt-6 sm:mt-7 text-base sm:text-lg text-[#333333]'>
                ویژگی های کلیدی
            </div>

            <div className='mt-6 sm:mt-10 flex flex-col gap-4 sm:gap-8'>
                {product.specifications.slice(0, 3).map((spec, index) => (
                    <div key={index} className='flex flex-col sm:flex-row sm:gap-3 items-start sm:items-center text-xs sm:text-sm'>
                        <div className='flex items-center gap-2'>
                            <div className='size-2 rounded-full bg-[#7F7F7F]'></div>
                            <div className='text-[#7F7F7F]'>{spec.title} :</div>
                        </div>
                        <div className='mt-1 sm:mt-0'>{spec.values.join(', ')}</div>
                    </div>
                ))}
            </div>
        </div>
    )
}

export default BaseInformation