import { FC, useState } from 'react'
import Input from '../../../components/Input'
import UploadBox from '../../../components/UploadBox'
import { Add, CloseCircle } from 'iconsax-react'

type Product = { title: string; image?: File; existingImageUrl?: string }

type Props = {
    value: Product[]
    onChange: (val: Product[]) => void
}

const CompanyProducts: FC<Props> = ({ value, onChange }) => {
    const [productTitle, setProductTitle] = useState('')
    const [productImage, setProductImage] = useState<File | undefined>(undefined)
    const [productError, setProductError] = useState('')

    const handleAddProduct = () => {
        if (!productTitle.trim()) {
            setProductError('عنوان محصول الزامی است')
            return
        }
        if (!productImage) {
            setProductError('تصویر محصول الزامی است')
            return
        }
        if (value.some(s => s.title.trim() === productTitle.trim())) {
            setProductError('عنوان محصول تکراری است')
            return
        }
        onChange([...value, { title: productTitle.trim(), image: productImage }])
        setProductTitle('')
        setProductImage(undefined)
        setProductError('')
    }

    const handleRemoveProduct = (idx: number) => {
        onChange(value.filter((_, i) => i !== idx))
    }

    return (
        <div className='mt-8'>
            <div className='mb-2'>محصولات شرکت</div>
            <div className='rowTwoInput items-end gap-4'>
                <div className='w-full'>
                    <Input
                        label='عنوان محصول'
                        name='productTitle'
                        value={productTitle}
                        onChange={e => setProductTitle(e.target.value)}
                    />
                </div>
                <div className='w-full'>
                    <UploadBox
                        label='تصویر'
                        onChange={files => setProductImage(files[0])}
                        isMultiple={false}
                        isReset={!productImage && !productTitle}
                    />
                </div>
                <div onClick={handleAddProduct} className='size-10 min-w-10 flex items-center justify-center border-black rounded-xl border'>
                    <Add size={22} color='black' />
                </div>
            </div>
            {productError && <div className='text-xs text-red-600 mt-2'>{productError}</div>}
            {/* نمایش لیست محصولات */}
            <div className='mt-4 flex  gap-2'>
                {value.map((prd, idx) => (
                    <div key={idx} className='rowTwoInput border p-2 rounded-xl items-center gap-2'>
                        <div className='flex items-center gap-2'>
                            {prd.image && <img src={URL.createObjectURL(prd.image)} alt='' className='size-6 min-w-6 rounded-full object-cover' />}
                            {prd.existingImageUrl && !prd.image && <img src={prd.existingImageUrl} alt='' className='size-6 min-w-6 rounded-full object-cover' />}
                        </div>
                        <div className='w-full text-xs'>{prd.title}</div>
                        <button type='button' onClick={() => handleRemoveProduct(idx)} className='ml-auto'>
                            <CloseCircle size={16} color='red' />
                        </button>
                    </div>
                ))}
            </div>
        </div>
    )
}

export default CompanyProducts 