'use client'
import React from 'react'
import OrderProductItem from './OrderProductItem'
import { OrderItemDetail } from '../../types/Types'

interface OrderMainContentProps {
    orderItems: OrderItemDetail[]
    orderId: string
    getStatusText: (status: string) => string
    onCancelClick: () => void
}

const OrderMainContent: React.FC<OrderMainContentProps> = ({
    orderItems,
    orderId,
    getStatusText,
    onCancelClick
}) => {
    // محاسبه تعداد مرسوله (length of orderItems)
    const shipmentCount = orderItems.length

    // محاسبه تعداد اقلام (sum of all itemsCount)
    const totalItemsCount = orderItems.reduce((sum, item) => sum + item.itemsCount, 0)

    // گرفتن اولین آیتم برای نمایش اطلاعات (در صورت نیاز)
    const firstOrderItem = orderItems[0]

    // محاسبه مجموع هزینه ارسال و مبلغ مرسوله
    const totalShipmentCost = orderItems.reduce((sum, item) => sum + item.totalShipmentCost, 0)
    const totalPaymentPrice = orderItems.reduce((sum, item) => sum + item.totalPaymentPrice, 0)
    return (
        <div className='flex-1 w-full bg-white shadow-lg p-6 rounded-2xl'>
            <div className='flex md:flex-row flex-col gap-4 justify-between md:items-center'>
                <div className='flex md:flex-row flex-col gap-4'>
                    <div className='flex items-center gap-2'>
                        <div className='text-[#7F7F7F]'>تعداد مرسوله :</div>
                        <div>{shipmentCount}</div>
                    </div>

                    <div className='flex items-center gap-2'>
                        <div className='text-[#7F7F7F]'>تعداد اقلام :</div>
                        <div>
                            {totalItemsCount}
                        </div>
                    </div>
                </div>

                <div className='text-primary font-semibold'>
                    {firstOrderItem ? getStatusText(firstOrderItem.status) : ''}
                </div>
            </div>

            <div className='flex items-center gap-2 mt-6'>
                <div className='text-[#7F7F7F]'>حداکثر مهلت ارسال :</div>
                <div>
                    {firstOrderItem?.shipper.deliveryTime} روز
                </div>
            </div>

            <div className='flex md:flex-row flex-col gap-3 justify-between mt-6'>
                <div className='flex items-center gap-2'>
                    <div className='text-[#7F7F7F]'>هزینه ارسال :</div>
                    <div>
                        {totalShipmentCost.toLocaleString()} تومان
                    </div>
                </div>
                <div className='flex items-center gap-2'>
                    <div className='text-[#7F7F7F]'>مبلغ مرسوله :</div>
                    <div>
                        {totalPaymentPrice.toLocaleString()} تومان
                    </div>
                </div>
                <div className='flex items-center gap-2'>
                    <div className='text-[#7F7F7F]'>شناسه سفارش :</div>
                    <div className="font-mono">
                        {orderId}
                    </div>
                </div>
            </div>

            {/* Product Items */}
            {orderItems.map((orderItem) =>
                orderItem.shipmentItems.map((item) => (
                    <OrderProductItem
                        key={item._id}
                        item={item}
                        shipperName={orderItem.shipper.name}
                        onCancelClick={onCancelClick}
                    />
                ))
            )}
        </div>
    )
}

export default OrderMainContent
