'use client'
import React from 'react'
import { useForm } from 'react-hook-form'
import { yupResolver } from '@hookform/resolvers/yup'
import * as yup from 'yup'
import Select from '@/components/Select'
import { Button } from '@/components/ui/button'

interface CancelFormData {
    reason: string
    description: string
}

interface CancelFormProps {
    onSubmit: (data: CancelFormData) => void
    isLoading: boolean
    cancelReasons: Array<{ _id: string; title: string }>
    selectedItemsCount: number
}

const cancelFormSchema = yup.object({
    reason: yup.string().required('دلیل لغو سفارش را انتخاب کنید'),
    description: yup.string().required('توضیحات را وارد کنید').min(10, 'توضیحات باید حداقل ۱۰ کاراکتر باشد')
})

const CancelForm: React.FC<CancelFormProps> = ({
    onSubmit,
    isLoading,
    cancelReasons,
    selectedItemsCount
}) => {
    const {
        register,
        handleSubmit,
        watch,
        setValue,
        formState: { errors },
        reset
    } = useForm<CancelFormData>({
        resolver: yupResolver(cancelFormSchema)
    })

    const handleFormSubmit = (data: CancelFormData) => {
        onSubmit(data)
        reset()
    }

    return (
        <div className='space-y-6'>
            <h3 className='text-lg font-semibold'>دلیل لغو و توضیحات</h3>

            <form onSubmit={handleSubmit(handleFormSubmit)} className='space-y-6'>
                <Select
                    placeholder='دلیل لغو سفارش'
                    items={cancelReasons.map((item) => ({
                        label: item.title,
                        value: item._id
                    }))}
                    className='bg-white border'
                    value={watch('reason')}
                    name='reason'
                    onChange={(e) => setValue('reason', e.target.value)}
                    error_text={errors.reason?.message}
                />

                <div>
                    <div className="text-sm font-medium mb-2">توضیحات :</div>
                    <textarea
                        {...register('description')}
                        className='h-[123px] rounded-xl p-3 text-sm border w-full resize-none focus:outline-none focus:ring-2 focus:ring-primary/20'
                        placeholder='متن توضیحات خود را بنویسید (حداقل ۱۰ کاراکتر)'
                    />
                    {errors.description && (
                        <div className='text-xs text-red-500 mt-1'>
                            {errors.description.message}
                        </div>
                    )}
                </div>

                <div className='flex gap-2 text-xs text-[#7F7F7F] p-3 bg-primary/10 rounded-lg'>
                    <div className="size-5 bg-primary/20 rounded-full flex items-center justify-center">
                        <span className="text-primary text-xs">!</span>
                    </div>
                    <span>
                        توجه داشته باشید که بعد از ثبت لغو سفارش طبق
                    </span>
                    <span className='text-primary font-medium'>
                        جدول جرائم
                    </span>
                    <span>
                        جریمه می‌شود
                    </span>
                </div>

                <Button
                    type="submit"
                    className='w-full'
                    disabled={isLoading || selectedItemsCount === 0}
                    isLoading={isLoading}
                >
                    لغو سفارش ({selectedItemsCount} آیتم)
                </Button>
            </form>
        </div>
    )
}

export default CancelForm
