import { FC, useState } from 'react'
import Input from '@/components/Input'
import Button from '@/components/Button'
import { Add, Trash } from 'iconsax-react'
import { toast } from '@/components/Toast'

interface ForwarderManagerProps {
    forwarders: string[]
    onChange: (forwarders: string[]) => void
    error?: string
}

const ForwarderManager: FC<ForwarderManagerProps> = ({ forwarders, onChange, error }) => {
    const [newForwarder, setNewForwarder] = useState('')

    const validateEmail = (email: string): boolean => {
        const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
        return emailRegex.test(email)
    }

    const addForwarder = () => {
        if (!newForwarder.trim()) return

        if (!validateEmail(newForwarder)) {
            toast('لطفاً یک ایمیل معتبر وارد کنید', 'error')
            return
        }

        if (forwarders.includes(newForwarder)) {
            toast('این ایمیل قبلاً اضافه شده است', 'error')
            return
        }

        onChange([...forwarders, newForwarder])
        setNewForwarder('')
    }

    const removeForwarder = (index: number) => {
        const newForwarders = forwarders.filter((_, i) => i !== index)
        onChange(newForwarders)
    }

    const handleKeyPress = (e: React.KeyboardEvent) => {
        if (e.key === 'Enter') {
            e.preventDefault()
            addForwarder()
        }
    }

    return (
        <div>
            <label className='block text-sm font-medium text-gray-700 mb-2'>
                Forwarders
            </label>

            {/* Add new forwarder */}
            <div className='flex gap-2 mb-3'>
                <div className='flex-1'>
                    <Input
                        placeholder='example@domain.com'
                        value={newForwarder}
                        onChange={(e) => setNewForwarder(e.target.value)}
                        onKeyPress={handleKeyPress}
                        className='text-left'
                        dir='ltr'
                    />
                </div>
                <Button
                    type='button'
                    variant='primary'
                    onClick={addForwarder}
                    className='w-fit'
                    disabled={!newForwarder.trim()}
                >
                    <Add size={16} color='white' />
                </Button>
            </div>

            {/* List of existing forwarders */}
            {forwarders.length > 0 && (
                <div className='space-y-2'>
                    {forwarders.map((forwarder, index) => (
                        <div key={index} className='flex items-center justify-between bg-gray-50 px-2 py-1 rounded-lg'>
                            <span className='text-sm text-right flex-1 ' dir='ltr'>{forwarder}</span>
                            <Button
                                type='button'
                                variant='secondary'
                                onClick={() => removeForwarder(index)}
                                className='w-fit h-9 text-red-500 hover:bg-red-50'
                            >
                                <Trash size={16} color='red' />
                            </Button>
                        </div>
                    ))}
                </div>
            )}



            {error && (
                <div className='text-red-500 text-sm mt-1'>{error}</div>
            )}

            <div className='text-[10px] text-gray-500 mt-2 leading-4'>
                ایمیل‌هایی که به این آدرس ارسال می‌شوند به آدرس‌های فوق نیز فرستاده خواهند شد
            </div>
        </div>
    )
}

export default ForwarderManager