'use client'
import React from 'react'
import Image from 'next/image'
import { Button } from '@/components/ui/button'
import { ShipmentItemDetail } from '../../../types/Types'

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

const ReturnConfirmation: React.FC<ReturnConfirmationProps> = ({
    selectedItems,
    quantities,
    reason,
    description,
    // images,
    imagePreviewUrls,
    returnReasons,
    onSubmit,
    onBack,
    isLoading
}) => {
    const selectedReason = returnReasons.find(r => r._id === reason)

    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) => (
                    <div key={item._id} className='p-4 border rounded-lg'>
                        <div className='flex items-center gap-4'>
                            <Image
                                src={item.product.imagesUrl.cover}
                                width={60}
                                height={60}
                                className='w-15 h-15 object-cover rounded-lg border flex-shrink-0'
                                alt={item.product.title_fa}
                            />
                            <div className='flex-1'>
                                <div className='font-medium'>{item.product.title_fa}</div>
                                <div className='text-sm text-gray-600 mt-1'>
                                    تعداد مرجوعی: {quantities[item._id]}
                                </div>
                                <div className='text-sm text-primary font-medium mt-1'>
                                    {Intl.NumberFormat('fa-IR').format(item.selling_price)} تومان
                                </div>
                            </div>
                        </div>
                    </div>
                ))}
            </div>

            {/* اطلاعات مرجوعی */}
            <div className='space-y-4'>
                <h4 className='font-medium'>اطلاعات مرجوعی</h4>

                <div className='p-4 border rounded-lg space-y-3'>
                    <div>
                        <span className='font-medium text-sm'>دلیل مرجوعی: </span>
                        <span className='text-sm'>{selectedReason?.title}</span>
                    </div>

                    <div>
                        <span className='font-medium text-sm'>توضیحات: </span>
                        <p className='text-sm text-gray-700 mt-1 leading-relaxed'>{description}</p>
                    </div>
                </div>
            </div>

            {/* تصاویر آپلود شده */}
            {imagePreviewUrls.length > 0 && (
                <div className='space-y-4'>
                    <h4 className='font-medium'>تصاویر آپلود شده</h4>
                    <div className='grid grid-cols-2 md:grid-cols-3 gap-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}`}
                                />
                            </div>
                        ))}
                    </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>
            </div>

            {/* دکمه‌های عملیات */}
            <div className='flex gap-3 justify-center'>
                <Button
                    type="button"
                    variant="outline"
                    onClick={onBack}
                >
                    بازگشت
                </Button>
                <Button
                    type="button"
                    onClick={onSubmit}
                    disabled={isLoading}
                    isLoading={isLoading}
                >
                    تایید و ثبت مرجوعی
                </Button>
            </div>
        </div>
    )
}

export default ReturnConfirmation
