'use client'
import React from 'react'
import { ReturnOrder } from '../types/Types'
import moment from 'moment-jalaali'
import { Button } from '@/components/ui/button'
import { useRouter } from 'next/navigation'
import { TruckFast } from 'iconsax-react'
import { PRIMARY_COLOR } from '@/config/const'

interface ReturnOrderItemProps {
    order: ReturnOrder
}

const ReturnOrderItem: React.FC<ReturnOrderItemProps> = ({ order }) => {
    const router = useRouter();

    const getStatusText = (status: string) => {
        const statusMap: { [key: string]: string } = {
            'pending': 'در انتظار بررسی',
            'approved': 'تایید شده',
            'rejected': 'رد شده',
            'processing': 'در حال پردازش',
            'completed': 'تکمیل شده'
        };
        return statusMap[status.toLowerCase()] || status;
    };

    return (
        <div className='bg-white border border-[#E0E0E0] rounded-[8px] p-3 sm:p-4 md:p-5'>
            <div className='flex flex-col lg:flex-row gap-4 sm:gap-6'>
                <div className='lg:max-w-[234px] w-full'>
                    <div className=''>
                        <div className='text-xs sm:text-sm text-[#7F7F7F] mb-1'>
                            شماره سفارش: <span className='text-black'> {order.order}</span>
                        </div>
                        <div className='text-xs sm:text-sm text-[#7F7F7F] mt-3 sm:mt-4'>
                            مبلغ: <span className='text-black'> {order.total_price.toLocaleString('fa-IR')} تومان</span>
                        </div>
                    </div>

                    <div className='mb-4 sm:mb-6 mt-3 sm:mt-4'>
                        <div className='text-xs sm:text-sm text-[#7F7F7F]'>
                            وضعیت مرجوعی: <span className='text-black'>{getStatusText(order.status)}</span>
                        </div>
                        <div className='text-xs dltr text-right sm:text-sm text-[#7F7F7F] mt-3 sm:mt-4'>
                            تاریخ ثبت مرجوعی: <span className='text-black'> {moment(order.createdAt).format('jYYYY-jMM-jDD')}</span>
                        </div>
                    </div>

                    <div className='flex flex-col sm:flex-row gap-2 sm:gap-3'>
                        <Button
                            variant="outline"
                            className='px-4 sm:px-6 py-2 h-8 sm:h-9 border-[#E0E0E0] text-[#666666] hover:bg-gray-50 text-xs sm:text-sm'
                            onClick={() => router.push(`/profile/orders/${order.order}`)}
                        >
                            جزئیات سفارش
                        </Button>
                    </div>
                </div>

                <div className='flex-1 flex items-center justify-center lg:border-r lg:border-border lg:pr-5 min-h-[200px] sm:min-h-[225px]'>
                    <div className='flex flex-col items-center gap-4 text-center'>
                        <div className='w-16 h-16 sm:w-20 sm:h-20 bg-orange-50 rounded-full flex items-center justify-center'>
                            <TruckFast color={PRIMARY_COLOR} size={32} className='text-orange-500' variant='Bold' />
                        </div>
                        <div className='text-sm sm:text-base text-[#666666]'>
                            درخواست مرجوع کالا ثبت شده است
                        </div>
                        <div className='text-xs sm:text-sm text-[#999999]'>
                            شماره مرجوعی: {order._id}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    )
}

export default ReturnOrderItem

