import { type FC, Fragment, useState } from 'react'
import DefaulModal from '@/components/DefaulModal'
import StatusWithText from '@/components/StatusWithText'
import { formatDateShort, formatPrice } from '@/helpers/func'
import { type CancelOrderType } from '@/pages/orders/types/Types'
import Button from '@/components/Button'
import { DocumentUpload } from 'iconsax-react'
import CompleteCancelModal from '@/pages/orders/components/CompleteCancelModal'

type Props = {
    open: boolean
    close: () => void
    data: CancelOrderType | null
}

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

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

const CancelItemsModal: FC<Props> = ({ open, close, data }) => {
    const cancelItem = data?.cancelOrderItems
    const [isCompleteModalOpen, setIsCompleteModalOpen] = useState(false)

    return (
        <DefaulModal open={open} close={close} isHeader title_header='جزئیات کنسلی' width={900}>
            {!data ? (
                <div className='py-6 text-center text-muted-foreground'>داده‌ای برای نمایش وجود ندارد</div>
            ) : (
                <Fragment>
                    {data.status === 'Pending' && (
                        <div className='flex justify-end my-4'>
                            <Button
                                onClick={() => setIsCompleteModalOpen(true)}
                                className='bg-blue-600 hover:bg-blue-700 text-white w-fit'
                            >
                                <div className='flex items-center gap-2'>
                                    <DocumentUpload color='#fff' size={18} />
                                    <span>تکمیل کنسلی</span>
                                </div>
                            </Button>
                        </div>
                    )}

                    {/* اطلاعات سفارش */}
                    <div className='my-4'>
                        <h3 className='text-base font-semibold mb-3'>اطلاعات سفارش</h3>
                        <div className='grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3'>
                            <div className='p-2 rounded-lg border border-border'>
                                <div className='text-[11px] text-muted-foreground'>شماره سفارش</div>
                                <div className='mt-0.5 text-sm font-medium'>
                                    {data.order?._id ? `#${data.order._id}` : '-'}
                                </div>
                            </div>
                            <div className='p-2 rounded-lg border border-border'>
                                <div className='text-[11px] text-muted-foreground'>وضعیت سفارش</div>
                                <div className='mt-0.5 text-sm font-medium'>
                                    {data.order?.orderStatus || '-'}
                                </div>
                            </div>
                            <div className='p-2 rounded-lg border border-border'>
                                <div className='text-[11px] text-muted-foreground'>وضعیت کنسلی</div>
                                <div className='mt-0.5'>
                                    <StatusWithText variant={getStatusVariant(data.status)} text={getStatusText(data.status)} />
                                </div>
                            </div>
                            <div className='p-2 rounded-lg border border-border'>
                                <div className='text-[11px] text-muted-foreground'>مبلغ کل</div>
                                <div className='mt-0.5 text-sm font-medium'>{formatPrice(Number(data.total_price || 0))} تومان</div>
                            </div>
                            <div className='p-2 rounded-lg border border-border'>
                                <div className='text-[11px] text-muted-foreground'>تاریخ ثبت کنسلی</div>
                                <div className='mt-0.5 text-sm font-medium'>{formatDateShort(data.createdAt)}</div>
                            </div>
                            {data.cancellDate && (
                                <div className='p-2 rounded-lg border border-border'>
                                    <div className='text-[11px] text-muted-foreground'>تاریخ تایید کنسلی</div>
                                    <div className='mt-0.5 text-sm font-medium'>{formatDateShort(data.cancellDate)}</div>
                                </div>
                            )}
                        </div>
                    </div>

                    {/* اطلاعات کنسل‌کننده */}
                    {data.cancellerDetails && (
                        <div className='mb-4'>
                            <h3 className='text-base font-semibold mb-3'>اطلاعات کنسل‌کننده</h3>
                            <div className='grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3'>
                                <div className='p-2 rounded-lg border border-border'>
                                    <div className='text-[11px] text-muted-foreground'>نام</div>
                                    <div className='mt-0.5 text-sm font-medium'>
                                        {data.cancellerDetails.fullName || '-'}
                                    </div>
                                </div>
                                <div className='p-2 rounded-lg border border-border'>
                                    <div className='text-[11px] text-muted-foreground'>شماره تماس</div>
                                    <div className='mt-0.5 text-sm font-medium'>
                                        {data.cancellerDetails.phoneNumber || '-'}
                                    </div>
                                </div>
                                <div className='p-2 rounded-lg border border-border'>
                                    <div className='text-[11px] text-muted-foreground'>نوع کنسل‌کننده</div>
                                    <div className='mt-0.5 text-sm font-medium'>
                                        {data.cancellerRef === 'User' ? 'کاربر' : data.cancellerRef || '-'}
                                    </div>
                                </div>
                            </div>
                        </div>
                    )}

                    {/* آدرس ارسال */}
                    {data.order?.shipmentAddress && (
                        <div className='mb-4'>
                            <h3 className='text-base font-semibold mb-3'>آدرس ارسال</h3>
                            <div className='grid grid-cols-1 md:grid-cols-2 gap-3'>
                                <div className='p-2 rounded-lg border border-border'>
                                    <div className='text-[11px] text-muted-foreground'>شهر</div>
                                    <div className='mt-0.5 text-sm font-medium'>
                                        {data.order.shipmentAddress.city || '-'}
                                    </div>
                                </div>
                                <div className='p-2 rounded-lg border border-border'>
                                    <div className='text-[11px] text-muted-foreground'>استان</div>
                                    <div className='mt-0.5 text-sm font-medium'>
                                        {data.order.shipmentAddress.province || '-'}
                                    </div>
                                </div>
                                <div className='p-2 rounded-lg border border-border col-span-full'>
                                    <div className='text-[11px] text-muted-foreground'>آدرس کامل</div>
                                    <div className='mt-0.5 text-sm font-medium'>
                                        {data.order.shipmentAddress.address || '-'}
                                    </div>
                                </div>
                                <div className='p-2 rounded-lg border border-border'>
                                    <div className='text-[11px] text-muted-foreground'>کد پستی</div>
                                    <div className='mt-0.5 text-sm font-medium'>
                                        {data.order.shipmentAddress.postalCode || '-'}
                                    </div>
                                </div>
                                <div className='p-2 rounded-lg border border-border'>
                                    <div className='text-[11px] text-muted-foreground'>تلفن</div>
                                    <div className='mt-0.5 text-sm font-medium'>
                                        {data.order.shipmentAddress.phone || '-'}
                                    </div>
                                </div>
                            </div>
                        </div>
                    )}

                    {/* اطلاعات محصول کنسل‌شده */}
                    {cancelItem && (
                        <div className='mb-4'>
                            <h3 className='text-base font-semibold mb-3'>اطلاعات محصول کنسل‌شده</h3>

                            {/* کارت محصول */}
                            <div className='p-4 rounded-lg border border-border mb-4'>
                                <div className='flex gap-4'>
                                    {cancelItem.shipmentItem?.product?.imagesUrl?.cover && (
                                        <img
                                            src={cancelItem.shipmentItem.product.imagesUrl.cover}
                                            alt={cancelItem.shipmentItem.product.title_fa}
                                            className='w-24 h-24 object-cover rounded-lg'
                                        />
                                    )}
                                    <div className='flex-1'>
                                        <h4 className='font-medium mb-2'>
                                            {cancelItem.shipmentItem?.product?.title_fa || '-'}
                                        </h4>
                                        <div className='grid grid-cols-2 md:grid-cols-3 gap-2 text-xs'>
                                            <div>
                                                <span className='text-muted-foreground'>قیمت فروش: </span>
                                                <span className='font-medium'>
                                                    {formatPrice(cancelItem.shipmentItem?.selling_price || 0)} تومان
                                                </span>
                                            </div>
                                            <div>
                                                <span className='text-muted-foreground'>قیمت خرده‌فروشی: </span>
                                                <span className='font-medium'>
                                                    {formatPrice(cancelItem.shipmentItem?.retail_price || 0)} تومان
                                                </span>
                                            </div>
                                            <div>
                                                <span className='text-muted-foreground'>هزینه ارسال: </span>
                                                <span className='font-medium'>
                                                    {cancelItem.shipmentItem?.isFreeShip
                                                        ? 'رایگان'
                                                        : `${formatPrice(cancelItem.shipmentItem?.shipmentCost || 0)} تومان`}
                                                </span>
                                            </div>
                                            <div>
                                                <span className='text-muted-foreground'>تعداد سفارش: </span>
                                                <span className='font-medium'>{cancelItem.shipmentItem?.quantity || 0}</span>
                                            </div>
                                            <div>
                                                <span className='text-muted-foreground'>تعداد کنسل‌شده: </span>
                                                <span className='font-medium text-red-600'>
                                                    {cancelItem.shipmentItem?.cancelled_quantity || 0}
                                                </span>
                                            </div>
                                            <div>
                                                <span className='text-muted-foreground'>تعداد مرجوع‌شده: </span>
                                                <span className='font-medium text-orange-600'>
                                                    {cancelItem.shipmentItem?.returned_quantity || 0}
                                                </span>
                                            </div>
                                            {cancelItem.shipmentItem?.discount_percent !== undefined && cancelItem.shipmentItem?.discount_percent > 0 && (
                                                <div>
                                                    <span className='text-muted-foreground'>درصد تخفیف: </span>
                                                    <span className='font-medium text-green-600'>
                                                        {cancelItem.shipmentItem.discount_percent}%
                                                    </span>
                                                </div>
                                            )}
                                        </div>
                                    </div>
                                </div>
                            </div>

                            {/* اطلاعات فروشگاه و وضعیت */}
                            <div className='grid grid-cols-1 md:grid-cols-3 gap-3 mb-4'>
                                {cancelItem.orderItem?.shipmentItems?.product?.shop?.shopName && (
                                    <div className='p-2 rounded-lg border border-border'>
                                        <div className='text-[11px] text-muted-foreground'>نام فروشگاه</div>
                                        <div className='mt-0.5 text-sm font-medium'>
                                            {cancelItem.orderItem.shipmentItems.product.shop.shopName}
                                        </div>
                                    </div>
                                )}
                                {cancelItem.orderItem?.shipmentItems?.product?.shop?.shopCode && (
                                    <div className='p-2 rounded-lg border border-border'>
                                        <div className='text-[11px] text-muted-foreground'>کد فروشگاه</div>
                                        <div className='mt-0.5 text-sm font-medium'>
                                            {cancelItem.orderItem.shipmentItems.product.shop.shopCode}
                                        </div>
                                    </div>
                                )}
                                {cancelItem.orderItem?.status && (
                                    <div className='p-2 rounded-lg border border-border'>
                                        <div className='text-[11px] text-muted-foreground'>وضعیت آیتم سفارش</div>
                                        <div className='mt-0.5 text-sm font-medium'>
                                            {cancelItem.orderItem.status}
                                        </div>
                                    </div>
                                )}
                            </div>

                            {/* دلیل و توضیحات کنسلی */}
                            <div className='grid grid-cols-1 gap-3'>
                                <div className='p-2 rounded-lg border border-border'>
                                    <div className='text-[11px] text-muted-foreground'>دلیل کنسلی</div>
                                    <div className='mt-0.5 text-sm font-medium'>
                                        {cancelItem.reason?.title || '-'}
                                    </div>
                                </div>
                                {cancelItem.comment && (
                                    <div className='p-2 rounded-lg border border-border'>
                                        <div className='text-[11px] text-muted-foreground'>توضیحات کاربر</div>
                                        <div className='mt-0.5 text-sm font-medium'>
                                            {cancelItem.comment}
                                        </div>
                                    </div>
                                )}
                                {data.cancellComment && (
                                    <div className='p-2 rounded-lg border border-border'>
                                        <div className='text-[11px] text-muted-foreground'>توضیحات ادمین</div>
                                        <div className='mt-0.5 text-sm font-medium'>
                                            {data.cancellComment}
                                        </div>
                                    </div>
                                )}
                            </div>
                        </div>
                    )}

                    {/* اطلاعات ارسال */}
                    {cancelItem?.orderItem && (
                        <div className='mb-4'>
                            <h3 className='text-base font-semibold mb-3'>اطلاعات ارسال</h3>
                            <div className='grid grid-cols-1 md:grid-cols-3 gap-3'>
                                <div className='p-2 rounded-lg border border-border'>
                                    <div className='text-[11px] text-muted-foreground'>روش ارسال</div>
                                    <div className='mt-0.5 text-sm font-medium'>
                                        {cancelItem.orderItem.shipper || '-'}
                                    </div>
                                </div>
                                {cancelItem.orderItem.trackCode && (
                                    <div className='p-2 rounded-lg border border-border'>
                                        <div className='text-[11px] text-muted-foreground'>کد رهگیری</div>
                                        <div className='mt-0.5 text-sm font-medium'>
                                            {cancelItem.orderItem.trackCode}
                                        </div>
                                    </div>
                                )}
                                {cancelItem.orderItem.postingDate && (
                                    <div className='p-2 rounded-lg border border-border'>
                                        <div className='text-[11px] text-muted-foreground'>تاریخ ارسال</div>
                                        <div className='mt-0.5 text-sm font-medium'>
                                            {formatDateShort(cancelItem.orderItem.postingDate)}
                                        </div>
                                    </div>
                                )}
                                <div className='p-2 rounded-lg border border-border'>
                                    <div className='text-[11px] text-muted-foreground'>تعداد آیتم‌ها</div>
                                    <div className='mt-0.5 text-sm font-medium'>
                                        {cancelItem.orderItem.itemsCount || 0}
                                    </div>
                                </div>
                            </div>
                        </div>
                    )}

                    {/* اطلاعات مالی */}
                    {cancelItem?.orderItem && (
                        <div className='mb-4'>
                            <h3 className='text-base font-semibold mb-3'>اطلاعات مالی</h3>
                            <div className='grid grid-cols-2 md:grid-cols-4 gap-3'>
                                <div className='p-2 rounded-lg border border-border'>
                                    <div className='text-[11px] text-muted-foreground'>مبلغ فروش</div>
                                    <div className='mt-0.5 text-sm font-medium'>
                                        {formatPrice(cancelItem.orderItem.totalSellingPrice || 0)} تومان
                                    </div>
                                </div>
                                <div className='p-2 rounded-lg border border-border'>
                                    <div className='text-[11px] text-muted-foreground'>هزینه ارسال</div>
                                    <div className='mt-0.5 text-sm font-medium'>
                                        {formatPrice(cancelItem.orderItem.totalShipmentCost || 0)} تومان
                                    </div>
                                </div>
                                <div className='p-2 rounded-lg border border-border'>
                                    <div className='text-[11px] text-muted-foreground'>تخفیف کوپن</div>
                                    <div className='mt-0.5 text-sm font-medium'>
                                        {formatPrice(cancelItem.orderItem.totalCouponDiscount || 0)} تومان
                                    </div>
                                </div>
                                <div className='p-2 rounded-lg border border-border'>
                                    <div className='text-[11px] text-muted-foreground'>مبلغ نهایی</div>
                                    <div className='mt-0.5 text-sm font-medium'>
                                        {formatPrice(cancelItem.orderItem.totalPaymentPrice || 0)} تومان
                                    </div>
                                </div>
                            </div>
                        </div>
                    )}
                </Fragment>
            )}
            <CompleteCancelModal
                open={isCompleteModalOpen}
                onClose={() => setIsCompleteModalOpen(false)}
                cancelId={data?._id ?? ''}
                onSuccess={() => {
                    setIsCompleteModalOpen(false)
                    close()
                }}
            />
        </DefaulModal>
    )
}

export default CancelItemsModal

