'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: 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<File[]>([])
    const [imagePreviewUrls, setImagePreviewUrls] = useState<string[]>([])
    const fileInputRef = useRef<HTMLInputElement>(null)

    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 = (event: React.ChangeEvent<HTMLInputElement>) => {
        const files = Array.from(event.target.files || [])
        const validFiles = files.filter(file => {
            const isValidType = file.type === 'image/jpeg' || file.type === 'image/png'
            const isValidSize = file.size <= 10 * 1024 * 1024 // 10MB
            return isValidType && isValidSize
        })

        if (validFiles.length !== files.length) {
            alert('فقط فایل‌های JPG و PNG با حداکثر حجم ۱۰ مگابایت مجاز هستند')
        }

        const newImages = [...images, ...validFiles].slice(0, 5) // حداکثر ۵ عکس
        setImages(newImages)

        const newPreviewUrls = newImages.map(file => URL.createObjectURL(file))
        setImagePreviewUrls(newPreviewUrls)
    }

    const removeImage = (index: number) => {
        const newImages = images.filter((_, i) => i !== index)
        const newPreviewUrls = imagePreviewUrls.filter((_, i) => i !== index)
        setImages(newImages)
        setImagePreviewUrls(newPreviewUrls)
    }

    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'>
                            <div className='flex items-center gap-4 mb-2'>
                                <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>

            <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>
                    <div className="text-sm font-medium mb-2">آپلود عکس</div>
                    <div className='text-xs text-gray-600 mb-3'>
                        اگر ایراد کالا قابل مشاهده است به صورتی عکس بگیرید که مشخص باشد (با فرمت JPG یا PNG و هر عکس حداکثر ۱۰ مگابایت)
                    </div>

                    {/* نمایش عکس‌های آپلود شده */}
                    {imagePreviewUrls.length > 0 && (
                        <div className='grid grid-cols-2 md:grid-cols-3 gap-4 mb-4'>
                            {imagePreviewUrls.map((url, index) => (
                                <div key={index} className='relative'>
                                    <Image
                                        src={url}
                                        width={100}
                                        height={100}
                                        className='max-w-[200px] max-h-[200px] object-contain rounded border'
                                        alt={`تصویر ${index + 1}`}
                                    />
                                    <button
                                        type='button'
                                        onClick={() => removeImage(index)}
                                        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>
                    )}

                    {/* دکمه آپلود */}
                    {images.length < 5 && (
                        <div>
                            <input
                                ref={fileInputRef}
                                type='file'
                                accept='image/jpeg,image/png'
                                multiple
                                onChange={handleImageUpload}
                                className='hidden'
                            />
                            <button
                                type='button'
                                onClick={() => fileInputRef.current?.click()}
                                className='flex items-center gap-2 px-4 py-2 border-2 border-dashed border-gray-300 rounded-lg hover:border-primary transition-colors'
                            >
                                <DocumentUpload color='gray' size={20} />
                                <span>انتخاب عکس</span>
                            </button>
                        </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
