import { type FC, useEffect, useState } from 'react'
import DefaulModal from '@/components/DefaulModal'
import Button from '@/components/Button'
import Input from '@/components/Input'
import Textarea from '@/components/Textarea'
import Select from '@/components/Select'
import { PaymentMethodEnum } from '@/pages/paymentMethods/enum/Enum'

interface AddPaymentModalProps {
    isOpen: boolean
    onClose: () => void
    defaultAmount: number
    isLoading?: boolean
    onSubmit: (amount: number, description: string) => void
}

const AddPaymentModal: FC<AddPaymentModalProps> = ({
    isOpen,
    onClose,
    defaultAmount,
    isLoading,
    onSubmit,
}) => {
    const [amount, setAmount] = useState(String(defaultAmount))
    const [description, setDescription] = useState('')
    const [error, setError] = useState('')

    useEffect(() => {
        if (!isOpen) return
        setAmount(String(Math.max(0, defaultAmount)))
        setDescription('')
        setError('')
    }, [isOpen, defaultAmount])

    const handleSubmit = () => {
        const parsed = Number(amount)
        if (!parsed || parsed <= 0) {
            setError('مبلغ پرداخت باید بیشتر از صفر باشد')
            return
        }
        onSubmit(parsed, description.trim())
    }

    return (
        <DefaulModal
            open={isOpen}
            close={onClose}
            isHeader
            title_header='افزودن پرداخت'
            width={420}
        >
            <div className='mt-6 space-y-4'>
                <Select
                    label='روش پرداخت'
                    value={PaymentMethodEnum.Cash}
                    items={[{ value: PaymentMethodEnum.Cash, label: 'نقدی' }]}
                    disabled
                />

                <Input
                    label='مبلغ پرداخت (تومان)'
                    type='number'
                    inputMode='numeric'
                    min={1}
                    seprator
                    value={amount}
                    onChange={(e) => {
                        setAmount(e.target.value)
                        setError('')
                    }}
                />

                <Textarea
                    placeholder='توضیحات (اختیاری)'
                    value={description}
                    onChange={(e) => {
                        setDescription(e.target.value)
                        setError('')
                    }}
                    className='bg-transparent border border-gray-500 rounded-xl w-full p-2 min-h-[80px]'
                />

                {error && <p className='text-xs text-red-500 text-center'>{error}</p>}

                <div className='flex gap-4 justify-center pt-4'>
                    <Button
                        label='تایید'
                        onClick={handleSubmit}
                        isloading={isLoading}
                    />
                    <Button
                        label='انصراف'
                        className='bg-transparent text-black border border-primary'
                        onClick={onClose}
                    />
                </div>
            </div>
        </DefaulModal>
    )
}

export default AddPaymentModal