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

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

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

const CompanyServices: FC<Props> = ({ value, onChange }) => {
    const [serviceTitle, setServiceTitle] = useState('')
    const [serviceImage, setServiceImage] = useState<File | undefined>(undefined)
    const [serviceError, setServiceError] = useState('')

    const handleAddService = () => {
        if (!serviceTitle.trim()) {
            setServiceError('عنوان خدمت الزامی است')
            return
        }
        if (!serviceImage) {
            setServiceError('تصویر خدمت الزامی است')
            return
        }
        if (value.some(s => s.title.trim() === serviceTitle.trim())) {
            setServiceError('عنوان خدمت تکراری است')
            return
        }
        onChange([...value, { title: serviceTitle.trim(), image: serviceImage }])
        setServiceTitle('')
        setServiceImage(undefined)
        setServiceError('')
    }

    const handleRemoveService = (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='serviceTitle'
                        value={serviceTitle}
                        onChange={e => setServiceTitle(e.target.value)}
                    />
                </div>
                <div className='w-full'>
                    <UploadBox
                        label='تصویر'
                        onChange={files => setServiceImage(files[0])}
                        isMultiple={false}
                        isReset={!serviceImage && !serviceTitle}
                    />
                </div>
                <Button
                    onClick={handleAddService}
                    className='w-fit px-4 whitespace-nowrap'
                >
                    <div className='flex gap-2'>
                        <Add size={22} color='white' />
                        <div>افزودن خدمت</div>
                    </div>
                </Button>
            </div>
            {serviceError && <div className='text-xs text-red-600 mt-2'>{serviceError}</div>}
            {/* نمایش لیست خدمات */}
            <div className='mt-4 flex  gap-2'>
                {value.map((srv, idx) => (
                    <div key={idx} className='flex border p-2 rounded-xl items-center gap-2'>
                        <div className='flex items-center gap-2'>
                            {srv.image && <img src={URL.createObjectURL(srv.image)} alt='' className='size-10 min-w-10 rounded-md object-cover' />}
                            {srv.existingImageUrl && !srv.image && <img src={srv.existingImageUrl} alt='' className='size-10 min-w-10 rounded-md object-cover' />}
                        </div>
                        <div className='w-full text-xs'>{srv.title}</div>
                        <button type='button' onClick={() => handleRemoveService(idx)} className='ml-auto'>
                            <CloseCircle size={16} color='red' />
                        </button>
                    </div>
                ))}
            </div>
        </div>
    )
}

export default CompanyServices