import { type FC, Fragment } from 'react'
import DefaulModal from '@/components/DefaulModal'
import StatusWithText from '@/components/StatusWithText'
import Td from '@/components/Td'
import { formatDateShort, formatPrice } from '@/helpers/func'
import { type ReturnOrderItemType, type ReturnOrderType } from '@/pages/orders/types/ReturnTypes'

type Props = {
    open: boolean
    close: () => void
    data: ReturnOrderType | 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 ReturnItemsModal: FC<Props> = ({ open, close, data }) => {
    const items = Array.isArray((data as any)?.returnOrderItems)
        ? (data as any).returnOrderItems as ReturnOrderItemType[]
        : (data?.returnOrderItems ? [data.returnOrderItems as ReturnOrderItemType] : [])

    return (
        <DefaulModal open={open} close={close} isHeader title_header='جزئیات مرجوعی' width={720}>
            {!data ? (
                <div className='py-6 text-center text-muted-foreground'>داده‌ای برای نمایش وجود ندارد</div>
            ) : (
                <Fragment>
                    <div className='grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3 mt-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 ?? '-'}</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.shopName ?? '-'}</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>
                    </div>

                    <div className='relative overflow-x-auto rounded-3xl mt-6 w-full'>
                        <table className='w-full text-sm'>
                            <thead className='thead'>
                                <tr>
                                    <Td text={'دلیل'} />
                                    <Td text={'تعداد'} />
                                    <Td text={'توضیحات'} />
                                    <Td text={'مبلغ آیتم'} />
                                </tr>
                            </thead>
                            <tbody>
                                {items.length === 0 ? (
                                    <tr className='tr'>
                                        <td colSpan={4} className='text-center py-8 text-muted-foreground'>آیتمی ثبت نشده است</td>
                                    </tr>
                                ) : (
                                    items.map((it, idx) => (
                                        <tr key={it._id ?? idx} className='tr'>
                                            <Td text={it.reason ?? '-'} />
                                            <Td text={String(it.quantity ?? 0)} />
                                            <Td text={it.comment ?? '-'} />
                                            <Td text={`${formatPrice(Number(it.orderItem?.totalSellingPrice || 0))} تومان`} />
                                        </tr>
                                    ))
                                )}
                            </tbody>
                        </table>
                    </div>
                </Fragment>
            )}
        </DefaulModal>
    )
}

export default ReturnItemsModal


