import { type FC, useState } from 'react'
import { useParams, useNavigate } from 'react-router-dom'
import { useGetReturnDetails, useApproveReturn, useRejectReturn, useCompleteReturn } from './hooks/useOrderData'
import PageTitle from '@/components/PageTitle'
import PageLoading from '@/components/PageLoading'
import { formatPrice } from '@/helpers/func'
import StatusWithText from '@/components/StatusWithText'
import { Calendar, Money3, Box, Location, CloseCircle, TickCircle, Shop, DocumentUpload } from 'iconsax-react'
import Button from '@/components/Button'
import { useQueryClient } from '@tanstack/react-query'
import ModalConfrim from '@/components/ModalConfrim'
import { toast } from 'react-toastify'
import { extractErrorMessage } from '@/helpers/utils'
import DefaulModal from '@/components/DefaulModal'
import Textarea from '@/components/Textarea'
import DatePicker from '@/components/DatePicker'
import UploadBox from '@/components/UploadBox'
import { useUploadSingle } from '@/pages/uploader/hooks/useUploaderData'

const ReturnDetails: FC = () => {
    const { id } = useParams()
    const navigate = useNavigate()
    const queryClient = useQueryClient()
    const { data, isLoading, error } = useGetReturnDetails(id!)
    const approveReturn = useApproveReturn()
    const rejectReturn = useRejectReturn()
    const completeReturn = useCompleteReturn()
    const uploadSingle = useUploadSingle()

    const [showApproveModal, setShowApproveModal] = useState(false)
    const [showRejectModal, setShowRejectModal] = useState(false)
    const [showCompleteModal, setShowCompleteModal] = useState(false)
    const [refundDate, setRefundDate] = useState('')
    const [refundComment, setRefundComment] = useState('')
    const [refundReceiptFile, setRefundReceiptFile] = useState<File[]>([])
    const [isUploading, setIsUploading] = useState(false)

    const handleApprove = async () => {
        try {
            await approveReturn.mutateAsync(id!)
            queryClient.invalidateQueries({ queryKey: ['return-details', id] })
            queryClient.invalidateQueries({ queryKey: ['order-returns'] })
            setShowApproveModal(false)
            navigate('/orders/returns')
        } catch (error) {
            console.error(error)
        }
    }

    const handleReject = async () => {
        await rejectReturn.mutateAsync(id!, {
            onSuccess: () => {
                queryClient.invalidateQueries({ queryKey: ['return-details', id] })
                queryClient.invalidateQueries({ queryKey: ['order-returns'] })
                setShowRejectModal(false)
                navigate('/orders/returns')
            },
            onError: (error) => {
                toast.error(extractErrorMessage(error))
            }
        })
    }

    const handleCompleteReturn = async () => {
        try {
            setIsUploading(true)
            let receiptUrl = ''

            // آپلود فایل رسید (اگر انتخاب شده باشد)
            if (refundReceiptFile.length > 0) {
                const uploadResponse = await uploadSingle.mutateAsync(refundReceiptFile[0])
                receiptUrl = uploadResponse?.results?.url?.url || ''
            }

            // ارسال درخواست تکمیل مرجوعی
            await completeReturn.mutateAsync({
                id: id!,
                params: {
                    refundDate,
                    refundComment,
                    refundReceipt: receiptUrl
                }
            })

            queryClient.invalidateQueries({ queryKey: ['return-details', id] })
            queryClient.invalidateQueries({ queryKey: ['order-returns'] })
            setShowCompleteModal(false)
            setRefundDate('')
            setRefundComment('')
            setRefundReceiptFile([])
            toast.success('مرجوعی با موفقیت تکمیل شد')
            navigate('/orders/returns')
        } catch (error) {
            toast.error(extractErrorMessage(error))
        } finally {
            setIsUploading(false)
        }
    }

    if (isLoading) {
        return <PageLoading />
    }

    if (error) {
        return (
            <div className="flex justify-center items-center min-h-96">
                <div className="text-center">
                    <div className="text-red-500 text-lg mb-2">خطا در بارگذاری داده‌ها</div>
                    <div className="text-gray-500">لطفا دوباره تلاش کنید</div>
                </div>
            </div>
        )
    }

    if (!data?.results?.returnOrder) {
        return (
            <div className="flex justify-center items-center min-h-96">
                <div className="text-center">
                    <div className="text-gray-500 text-lg">مرجوعی یافت نشد</div>
                </div>
            </div>
        )
    }

    const returnOrder = data.results.returnOrder

    const getStatusVariant = (status: string): 'success' | 'error' | 'warning' => {
        switch (status) {
            case 'Approved':
                return 'success'
            case 'Completed':
                return 'success'
            case 'Rejected':
                return 'error'
            case 'Pending':
                return 'warning'
            default:
                return 'warning'
        }
    }

    const getStatusText = (status: string): string => {
        switch (status) {
            case 'Approved':
                return 'تایید شده'
            case 'Completed':
                return 'تکمیل شده'
            case 'Rejected':
                return 'رد شده'
            case 'Pending':
                return 'در انتظار'
            default:
                return status
        }
    }

    return (
        <div className='mt-4 space-y-6'>
            <PageTitle />

            {/* هدر */}
            <div className='flex justify-between items-center'>
                <div className='flex items-center gap-3'>
                    <h1 className='text-2xl font-bold'>جزئیات مرجوعی</h1>
                    <StatusWithText
                        variant={getStatusVariant(returnOrder.status)}
                        text={getStatusText(returnOrder.status)}
                    />
                </div>
                <div className='text-sm text-gray-600'>
                    شماره سفارش: <span className='font-mono'>#{returnOrder.order._id}</span>
                </div>
            </div>

            {/* دکمه‌های عملیات */}
            {data?.results?.returnOrder?.status === 'Pending' && (
                <div className='flex gap-3 justify-end'>
                    <Button
                        onClick={() => setShowApproveModal(true)}
                        className='bg-green-600 hover:bg-green-700 text-white w-fit'
                    >
                        <div className='flex items-center gap-2'>
                            <TickCircle color='#fff' size={20} />
                            <div>تایید مرجوعی</div>
                        </div>
                    </Button>
                    <Button
                        onClick={() => setShowRejectModal(true)}
                        className='bg-red-600 hover:bg-red-700 text-white w-fit'
                    >
                        <div className='flex items-center gap-2'>
                            <CloseCircle color='#fff' size={20} />
                            <div>رد مرجوعی</div>
                        </div>
                    </Button>
                </div>
            )}

            {/* دکمه تکمیل مرجوعی */}
            {data?.results?.returnOrder?.status === 'Approved' && (
                <div className='flex gap-3 justify-end'>
                    <Button
                        onClick={() => setShowCompleteModal(true)}
                        className='bg-blue-600 hover:bg-blue-700 text-white w-fit'
                    >
                        <div className='flex items-center gap-2'>
                            <DocumentUpload color='#fff' size={20} />
                            <div>تکمیل مرجوعی</div>
                        </div>
                    </Button>
                </div>
            )}

            {/* کارت‌های اطلاعاتی */}
            <div className='grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6'>
                {/* اطلاعات فروشگاه */}
                <div className='bg-white p-6 rounded-3xl'>
                    <div className='flex items-center gap-3 mb-4'>
                        <div className='p-2 bg-blue-100 rounded-xl'>
                            <Shop size={20} color='#3B82F6' />
                        </div>
                        <h3 className='font-medium'>فروشگاه</h3>
                    </div>
                    <div className='space-y-2'>
                        <div className='text-lg font-semibold'>{returnOrder.shopName}</div>
                        <div className='text-sm text-gray-600 flex items-center gap-2'>
                            <Calendar size={14} color='#6B7280' />
                            <div className='mt-1 dltr'>
                                {returnOrder.createdAt}
                            </div>
                        </div>
                    </div>
                </div>

                {/* مبلغ کل */}
                <div className='bg-white p-6 rounded-3xl'>
                    <div className='flex items-center gap-3 mb-4'>
                        <div className='p-2 bg-green-100 rounded-xl'>
                            <Money3 size={20} color='#10B981' />
                        </div>
                        <h3 className='font-medium'>مبلغ مرجوعی</h3>
                    </div>
                    <div className='space-y-2'>
                        <div className='text-lg font-bold text-green-600'>
                            {formatPrice(returnOrder.total_price)} تومان
                        </div>
                    </div>
                </div>

                {/* آدرس */}
                <div className='bg-white p-6 rounded-3xl md:col-span-2'>
                    <div className='flex items-center gap-3 mb-4'>
                        <div className='p-2 bg-orange-100 rounded-xl'>
                            <Location size={20} color='#F59E0B' />
                        </div>
                        <h3 className='font-medium'>آدرس</h3>
                    </div>
                    <div className='space-y-3'>
                        <div className='text-sm leading-relaxed'>{returnOrder.order.shipmentAddress.address}</div>
                        <div className='grid grid-cols-2 gap-4 text-sm text-gray-600'>
                            <div>استان: {returnOrder.order.shipmentAddress.province}</div>
                            <div>شهر: {returnOrder.order.shipmentAddress.city}</div>
                            <div>پلاک: {returnOrder.order.shipmentAddress.plaque}</div>
                            <div>کد پستی: <span className='font-mono'>{returnOrder.order.shipmentAddress.postalCode}</span></div>
                            <div className='col-span-2'>تلفن: {returnOrder.order.shipmentAddress.phone}</div>
                        </div>
                    </div>
                </div>
            </div>

            {/* آیتم‌های مرجوعی */}
            <div className='bg-white py-8 xl:px-10 px-6 rounded-3xl'>
                <div className='flex items-center gap-3 mb-6'>
                    <div className='p-2 bg-purple-100 rounded-xl'>
                        <Box size={20} color='#8B5CF6' />
                    </div>
                    <h2 className='text-lg font-medium'>آیتم‌های مرجوعی</h2>
                </div>

                <div className='space-y-6'>
                    {returnOrder.returnOrderItems.map((item, index) => (
                        <div key={index} className='border border-gray-100 rounded-xl p-6 bg-gray-50/50'>
                            {/* هدر با وضعیت */}
                            <div className='flex justify-between items-center mb-4'>
                                <h3 className='font-medium text-base'>محصول مرجوعی</h3>
                                <StatusWithText
                                    variant={getStatusVariant(item.status)}
                                    text={getStatusText(item.status)}
                                />
                            </div>

                            {/* اطلاعات محصول با تصویر */}
                            <div className='bg-white p-4 rounded-lg border border-gray-100 mb-4'>
                                <div className='flex gap-4'>
                                    {/* تصویر محصول */}
                                    <div className='flex-shrink-0'>
                                        <img
                                            src={item.shipmentItem.product.imagesUrl?.cover || '/placeholder.png'}
                                            alt={item.shipmentItem.product.title_fa}
                                            className='w-24 h-24 object-cover rounded-lg'
                                        />
                                    </div>

                                    {/* جزئیات محصول */}
                                    <div className='flex-1'>
                                        <h4 className='font-medium text-base mb-3'>{item.shipmentItem.product.title_fa}</h4>
                                        <div className='grid grid-cols-2 md:grid-cols-3 gap-3 text-sm'>
                                            <div className='text-gray-600'>
                                                <span className='font-medium'>تعداد مرجوعی:</span> {item.quantity}
                                            </div>
                                            <div className='text-gray-600'>
                                                <span className='font-medium'>قیمت واحد:</span> {formatPrice(item.shipmentItem.selling_price)} تومان
                                            </div>
                                            <div className='text-gray-600'>
                                                <span className='font-medium'>مبلغ کل:</span> {formatPrice(item.quantity * item.shipmentItem.selling_price)} تومان
                                            </div>
                                            {item.shipmentItem.discount_percent > 0 && (
                                                <div className='text-green-600'>
                                                    <span className='font-medium'>تخفیف:</span> {item.shipmentItem.discount_percent}%
                                                </div>
                                            )}
                                            <div className='text-gray-600'>
                                                <span className='font-medium'>قیمت خرده‌فروشی:</span> {formatPrice(item.shipmentItem.retail_price)} تومان
                                            </div>
                                            <div className='text-gray-600'>
                                                <span className='font-medium'>هزینه ارسال:</span> {formatPrice(item.shipmentItem.shipmentCost)} تومان
                                            </div>
                                            {item.shipmentItem.isFreeShip && (
                                                <div className='text-blue-600 font-medium'>
                                                    ارسال رایگان
                                                </div>
                                            )}
                                        </div>
                                    </div>
                                </div>
                            </div>

                            {/* دلیل مرجوعی */}
                            <div className='bg-white p-4 rounded-lg border border-gray-100 mb-4'>
                                <div className='font-medium text-sm mb-2 text-gray-700'>دلیل مرجوعی:</div>
                                <div className='text-base mb-2'>{item.reason.title}</div>
                                {item.reason.is_mandatory_picture && (
                                    <div className='text-xs text-orange-600 flex items-center gap-1'>
                                        * نیازمند تصویر
                                    </div>
                                )}
                                {item.reason.fineRule && typeof item.reason.fineRule === 'object' && (
                                    <div className='mt-2 text-sm text-gray-600'>
                                        <span className='font-medium'>جریمه:</span> {item.reason.fineRule.title} ({item.reason.fineRule.fine_percentage}%)
                                    </div>
                                )}
                            </div>

                            {/* توضیحات کاربر */}
                            {item.comment && (
                                <div className='bg-blue-50 p-4 rounded-lg border border-blue-100'>
                                    <div className='font-medium text-sm mb-2 text-gray-700'>توضیحات کاربر:</div>
                                    <div className='text-sm'>{item.comment}</div>
                                </div>
                            )}

                            {/* تصویر محصول برگشتی */}
                            {item.imagesUrl && (
                                <div className='bg-orange-50 p-4 rounded-lg border border-orange-100'>
                                    <div className='font-medium text-sm mb-3 text-gray-700'>تصویر اپلود :</div>
                                    <img
                                        src={item.imagesUrl}
                                        alt='تصویر کاربر برگشتی'
                                        className='w-full max-w-[100px] rounded-lg object-cover'
                                    />
                                </div>
                            )}
                        </div>
                    ))}
                </div>
            </div>

            {/* مودال‌ها */}
            <ModalConfrim
                isOpen={showApproveModal}
                close={() => setShowApproveModal(false)}
                onConfrim={handleApprove}
                label="آیا از تایید این مرجوعی اطمینان دارید؟"
                isLoading={approveReturn.isPending}
            />

            <ModalConfrim
                isOpen={showRejectModal}
                close={() => setShowRejectModal(false)}
                onConfrim={handleReject}
                label="آیا از رد این مرجوعی اطمینان دارید؟"
                isLoading={rejectReturn.isPending}
            />

            {/* مودال تکمیل مرجوعی */}
            <DefaulModal
                open={showCompleteModal}
                close={() => {
                    setShowCompleteModal(false)
                    setRefundDate('')
                    setRefundComment('')
                    setRefundReceiptFile([])
                }}
                isHeader={true}
                title_header="تکمیل مرجوعی"
            >
                <div className="space-y-4 mt-4 w-[400px]">
                    <DatePicker
                        label="تاریخ بازگشت وجه"
                        placeholder="تاریخ را انتخاب کنید"
                        onChange={(date) => setRefundDate(date)}
                        defaulValue={refundDate}
                    />

                    <Textarea
                        label="توضیحات بازگشت وجه"
                        placeholder="توضیحات را وارد کنید"
                        value={refundComment}
                        onChange={(e) => setRefundComment(e.target.value)}
                        rows={4}
                    />

                    <UploadBox
                        label="رسید بازگشت وجه"
                        onChange={(files) => setRefundReceiptFile(files)}
                        isReset={!showCompleteModal}
                    />

                    <div className="flex gap-3 justify-end pt-4">
                        <Button
                            onClick={() => {
                                setShowCompleteModal(false)
                                setRefundDate('')
                                setRefundComment('')
                                setRefundReceiptFile([])
                            }}
                            className="bg-gray-200 hover:bg-gray-300 text-gray-700 w-fit"
                        >
                            انصراف
                        </Button>
                        <Button
                            onClick={handleCompleteReturn}
                            className="bg-blue-600 hover:bg-blue-700 text-white w-fit"
                            disabled={!refundDate || !refundComment || isUploading || completeReturn.isPending}
                        >
                            {isUploading || completeReturn.isPending ? 'در حال انجام...' : 'تکمیل مرجوعی'}
                        </Button>
                    </div>
                </div>
            </DefaulModal>
        </div>
    )
}

export default ReturnDetails