import React, { useState } from 'react'
import { type FC } from 'react'
import Button from '../../../components/Button'
import Input from '../../../components/Input'
import Select from '../../../components/Select'
import DefaulModal from '../../../components/DefaulModal'
import { PricingPageEnum } from '../enum/Enum'
import { useCreatePricing } from '../hooks/useSettingData'
import { toast } from 'react-toastify'
import { extractErrorMessage } from '@/helpers/utils'

interface AddPricingModalProps {
    isOpen: boolean
    onClose: () => void
}

const pricingOptions = [
    { value: PricingPageEnum.insertionFee, label: 'هزینه درج محصول' },
    { value: PricingPageEnum.photographyFee, label: 'هزینه عکاسی' },
    { value: PricingPageEnum.unboxingVideoFee, label: 'هزینه ویدیو باز کردن بسته' },
    { value: PricingPageEnum.expertReviewsFee, label: 'هزینه بررسی کارشناسان' },
]

const AddPricingModal: FC<AddPricingModalProps> = ({ isOpen, onClose }) => {
    const [formData, setFormData] = useState({
        type: '' as PricingPageEnum | '',
        price: '',
    })

    const createPricingMutation = useCreatePricing()

    const handleSubmit = async (e: React.FormEvent) => {
        e.preventDefault()

        if (!formData.type || !formData.price) {
            toast.error('لطفا تمام فیلدها را پر کنید')
            return
        }

        const price = parseInt(formData.price.replace(/,/g, ''))
        if (isNaN(price) || price <= 0) {
            toast.error('قیمت باید یک عدد مثبت باشد')
            return
        }

        await createPricingMutation.mutateAsync({
            type: formData.type as PricingPageEnum,
            price,
        }, {
            onError: (error) => {
                toast.error(extractErrorMessage(error))
            }
        })
        toast.success('قیمت‌گذاری با موفقیت اضافه شد')
        setFormData({ type: '', price: '' })
        onClose()
    }

    const handleClose = () => {
        setFormData({ type: '', price: '' })
        onClose()
    }

    const formatPrice = (value: string) => {
        const numericValue = value.replace(/\D/g, '')
        return numericValue.replace(/\B(?=(\d{3})+(?!\d))/g, ',')
    }

    return (
        <DefaulModal open={isOpen} close={handleClose} isHeader={true} title_header="افزودن قیمت‌گذاری جدید">

            <form onSubmit={handleSubmit} className="w-[400px] mt-4 space-y-4">
                <div>
                    <Select
                        label='نوع قیمت‌گذاری'
                        value={formData.type}
                        onChange={(e) => setFormData(prev => ({ ...prev, type: e.target.value as PricingPageEnum }))}
                        items={pricingOptions}
                        placeholder="نوع قیمت‌گذاری را انتخاب کنید"
                    />
                </div>

                <div>
                    <Input
                        label='قیمت (تومان)'
                        type="text"
                        value={formData.price}
                        onChange={(e) => setFormData(prev => ({
                            ...prev,
                            price: formatPrice(e.target.value)
                        }))}
                        placeholder="مثال: ۱۰۰,۰۰۰"
                        className="text-left"
                    />
                </div>

                <div className="flex gap-3 pt-4">
                    <Button
                        type="submit"
                        variant="primary"
                        className="flex-1"
                        disabled={createPricingMutation.isPending}
                        isLoading={createPricingMutation.isPending}
                    >
                        {createPricingMutation.isPending ? 'در حال ذخیره...' : 'ذخیره'}
                    </Button>
                    <Button
                        type="button"
                        variant="outline"
                        className="flex-1"
                        onClick={handleClose}
                        disabled={createPricingMutation.isPending}
                    >
                        لغو
                    </Button>
                </div>
            </form>
        </DefaulModal>
    )
}

export default AddPricingModal