'use client'
import React, { useState, useRef } 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'
import { ShipmentItemDetail } from '../../../types/Types'
import Image from 'next/image'
import { CloseCircle, DocumentUpload } from 'iconsax-react'

interface ReturnFormData {
    quantities: { [key: string]: number }
    reason: string
    description: string
}

interface ReturnFormProps {
    selectedItems: ShipmentItemDetail[]
    onSubmit: (data: { quantities: { [key: string]: number }; reason: string; description: string; images: { [key: string]: File } }) => void
    onBack: () => void
    isLoading: boolean
    returnReasons: Array<{ _id: string; title: string }>
}

const returnFormSchema = yup.object({
    reason: yup.string().required('دلیل مرجوعی را انتخاب کنید'),
    description: yup.string().required('توضیحات را وارد کنید').min(10, 'توضیحات باید حداقل ۱۰ کاراکتر باشد'),
    quantities: yup.object().test('quantities', 'تعداد مرجوعی باید معتبر باشد', function (value: Record<string, number>) {
        if (!value) return false
        const selectedItems = this.parent.selectedItems || []
        for (const item of selectedItems) {
            const quantity = value[item._id]
            const availableQuantity = item.quantity - item.cancelled_quantity - item.returned_quantity
            if (!quantity || quantity < 1 || quantity > availableQuantity) {
                return false
            }
        }
        return true
    })
})

const ReturnForm: React.FC<ReturnFormProps> = ({
    selectedItems,
    onSubmit,
    onBack,
    isLoading,
    returnReasons
}) => {
    const [images, setImages] = useState<{ [key: string]: File }>({})
    const [imagePreviewUrls, setImagePreviewUrls] = useState<{ [key: string]: string }>({})

    const {
        register,
        handleSubmit,
        watch,
        setValue,
        formState: { errors },
        reset
    } = useForm<ReturnFormData>({
        resolver: yupResolver(returnFormSchema),
        defaultValues: {
            quantities: selectedItems.reduce((acc, item) => ({
                ...acc,
                [item._id]: 1
            }), {})
        }
    })

    const handleFormSubmit = (data: ReturnFormData) => {
        onSubmit({
            quantities: data.quantities,
            reason: data.reason,
            description: data.description,
            images
        })
        reset()
    }

    const handleImageUpload = (itemId: string, event: React.ChangeEvent<HTMLInputElement>) => {
        const file = event.target.files?.[0]
        if (!file) return

        const isValidType = file.type === 'image/jpeg' || file.type === 'image/png'
        const isValidSize = file.size <= 10 * 1024 * 1024 // 10MB

        if (!isValidType || !isValidSize) {
            alert('فقط فایل‌های JPG و PNG با حداکثر حجم ۱۰ مگابایت مجاز هستند')
            return
        }

        setImages(prev => ({ ...prev, [itemId]: file }))
        setImagePreviewUrls(prev => ({ ...prev, [itemId]: URL.createObjectURL(file) }))
    }

    const removeImage = (itemId: string) => {
        setImages(prev => {
            const newImages = { ...prev }
            delete newImages[itemId]
            return newImages
        })
        setImagePreviewUrls(prev => {
            const newUrls = { ...prev }
            delete newUrls[itemId]
            return newUrls
        })
    }

    return (
        <div className='space-y-6'>
            <h3 className='text-lg font-semibold'>تکمیل اطلاعات مرجوعی</h3>

            {/* انتخاب تعداد مرجوعی برای هر آیتم */}
            <div className='space-y-4'>
                <h4 className='font-medium'>تعداد مرجوعی و آپلود تصویر</h4>
                {selectedItems.map((item) => {
                    const availableQuantity = item.quantity - item.cancelled_quantity - item.returned_quantity
                    return (
                        <div key={item._id} className='p-4 border rounded-lg space-y-3'>
                            <div className='flex items-center gap-4'>
                                <Image
                                    src={item.product.imagesUrl.cover}
                                    width={40}
                                    height={40}
                                    className='w-10 h-10 object-cover rounded border'
                                    alt={item.product.title_fa}
                                />
                                <div className='flex-1'>
                                    <div className='font-medium text-sm'>{item.product.title_fa}</div>
                                    <div className='text-xs text-gray-600'>قابل مرجوع: {availableQuantity}</div>
                                </div>
                            </div>
                            <div className='flex items-center gap-2'>
                                <label className='text-sm'>تعداد:</label>
                                <input
                                    type='number'
                                    min={1}
                                    max={availableQuantity}
                                    defaultValue={1}
                                    {...register(`quantities.${item._id}`, {
                                        valueAsNumber: true,
                                        min: { value: 1, message: 'حداقل تعداد ۱ است' },
                                        max: { value: availableQuantity, message: `حداکثر تعداد ${availableQuantity} است` }
                                    })}
                                    className='w-20 px-2 py-1 border rounded text-center'
                                />
                            </div>

                            {/* آپلود تصویر برای این آیتم */}
                            <div>
                                <div className='text-xs text-gray-600 mb-2'>
                                    تصویر محصول (JPG یا PNG، حداکثر ۱۰ مگابایت)
                                </div>
                                {imagePreviewUrls[item._id] ? (
                                    <div className='relative inline-block'>
                                        <Image
                                            src={imagePreviewUrls[item._id]}
                                            width={100}
                                            height={100}
                                            className='max-w-[150px] max-h-[150px] object-contain rounded border'
                                            alt='تصویر محصول'
                                        />
                                        <button
                                            type='button'
                                            onClick={() => removeImage(item._id)}
                                            className='absolute -top-2 -right-2 bg-red-500 text-white rounded-full w-6 h-6 flex items-center justify-center'
                                        >
                                            <CloseCircle color='white' size={14} />
                                        </button>
                                    </div>
                                ) : (
                                    <div>
                                        <input
                                            type='file'
                                            accept='image/jpeg,image/png'
                                            onChange={(e) => handleImageUpload(item._id, e)}
                                            className='hidden'
                                            id={`file-${item._id}`}
                                        />
                                        <label
                                            htmlFor={`file-${item._id}`}
                                            className='flex items-center gap-2 px-4 py-2 border-2 border-dashed border-gray-300 rounded-lg hover:border-primary transition-colors cursor-pointer inline-flex'
                                        >
                                            <DocumentUpload color='gray' size={20} />
                                            <span className='text-sm'>انتخاب تصویر</span>
                                        </label>
                                    </div>
                                )}
                            </div>
                        </div>
                    )
                })}
            </div>

            <form onSubmit={handleSubmit(handleFormSubmit)} className='space-y-6'>
                {/* انتخاب دلیل مرجوعی */}
                <Select
                    placeholder='دلیل مرجوعی'
                    items={returnReasons.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-3 justify-center'>
                    <Button
                        type="button"
                        variant="outline"
                        onClick={onBack}
                    >
                        بازگشت
                    </Button>
                    <Button
                        type="submit"
                        disabled={isLoading}
                        isLoading={isLoading}
                    >
                        ادامه
                    </Button>
                </div>
            </form>
        </div>
    )
}

export default ReturnForm
