import Table from '@/components/Table'
import { ShoppingCart, Calendar, Clock, Tag } from 'iconsax-react'
import type { FC } from 'react'
import type { ColumnType, RowDataType } from '@/components/types/TableTypes'
import type { Order, OrderItem as OrderItemType } from '../types/Types'
import { formatOptionalDate, formatPrice, formatFaNumber } from '@/helpers/func'
import { useTranslation } from 'react-i18next'
import OrderSummary from './OrderSummary'

interface OrderItemTable extends RowDataType {
    image: string
    title: string
    quantity: number
    unitPrice: number
    discount: number
    amount: string
}

interface OrderItemsDetailsProps {
    order: Order
    getStatusColor: (status: string) => string
}

const OrderItemsDetails: FC<OrderItemsDetailsProps> = ({ order, getStatusColor }) => {
    const { t } = useTranslation('global')

    const orderItems: OrderItemTable[] = order.items.map((item: OrderItemType) => ({
        id: item.id,
        image: '',
        title: item.variant?.value?.trim() ? item.variant.value : 'محصول',
        quantity: item.quantity,
        unitPrice: item.unitPrice,
        discount: item.discount,
        amount: formatPrice(item.totalPrice)
    }))

    const columns: ColumnType<OrderItemTable>[] = [
        {
            title: 'تصویر',
            key: 'image',
            render: (item) => (
                <div>
                    {item.image ? (
                        <img
                            src={item.image}
                            alt={item.title}
                            className='w-12 h-12 rounded-lg object-cover'
                        />
                    ) : (
                        <div className='w-12 h-12 rounded-lg bg-gray-200 flex items-center justify-center'>
                            <span className='text-xs text-gray-400'>بدون تصویر</span>
                        </div>
                    )}
                </div>
            )
        },
        {
            title: 'عنوان',
            key: 'title',
            align: 'right'
        },
        {
            title: 'تعداد',
            key: 'quantity',
            align: 'center',
            render: (item) => formatFaNumber(item.quantity)
        },
        {
            title: 'قیمت واحد',
            key: 'unitPrice',
            align: 'right',
            render: (item) => formatPrice(item.unitPrice)
        },
        {
            title: 'تخفیف',
            key: 'discount',
            align: 'right',
            render: (item) => item.discount > 0 ? formatPrice(item.discount) : '-'
        },
        {
            title: 'مبلغ کل',
            key: 'amount',
            align: 'right'
        }
    ]

    return (
        <div className='w-full bg-white rounded-4xl p-8'>
            <div className='text-lg font-light mb-6 flex items-center gap-2'>
                <ShoppingCart color='#000' size={20} />
                جزییات سفارش
            </div>

            <div className='mb-6 flex flex-wrap gap-4 text-[13px] font-light'>
                <div className='flex gap-2'>
                    <div className='text-description'>زمان سفارش:</div>
                    <div className='flex items-center gap-1'>
                        <Clock size={14} />
                        {formatOptionalDate(order.createdAt, {
                            year: 'numeric',
                            month: '2-digit',
                            day: '2-digit',
                            hour: '2-digit',
                            minute: '2-digit'
                        })}
                    </div>
                </div>

                <div className='flex gap-2'>
                    <div className='text-description'>زمان به‌روزرسانی:</div>
                    <div>
                        {formatOptionalDate(order.updatedAt, {
                            year: 'numeric',
                            month: '2-digit',
                            day: '2-digit',
                            hour: '2-digit',
                            minute: '2-digit'
                        })}
                    </div>
                </div>

                <div className='flex gap-2'>
                    <div className='text-description'>نوع تحویل:</div>
                    <div>{order.deliveryMethod?.description || '-'}</div>
                </div>

                {order.tableNumber && (
                    <div className='flex gap-2'>
                        <div className='text-description'>شماره میز:</div>
                        <div>{order.tableNumber}</div>
                    </div>
                )}

                {order.description && (
                    <div className='w-full'>
                        <div className='text-description mb-2'>توضیحات سفارش:</div>
                        <div className='text-gray-700 bg-gray-50 p-3 rounded-lg'>{order.description}</div>
                    </div>
                )}
            </div>

            <Table
                columns={columns}
                data={orderItems}
                showHeader={true}
                className='mt-0'
            />

            <OrderSummary />

            {order.couponDetail && (
                <div className='mt-6 pt-6 border-t border-dashed border-border'>
                    <div className='flex items-center gap-2 mb-4'>
                        <Tag size={16} />
                        <div className='text-description'>اطلاعات کوپن:</div>
                    </div>
                    <div className='bg-blue-50 p-4 rounded-lg space-y-2 text-[13px]'>
                        <div className='flex justify-between'>
                            <span className='text-description'>نام کوپن:</span>
                            <span className='font-medium'>{order.couponDetail.couponName}</span>
                        </div>
                        <div className='flex justify-between'>
                            <span className='text-description'>کد کوپن:</span>
                            <span className='font-mono bg-white px-2 py-1 rounded'>{order.couponDetail.couponCode}</span>
                        </div>
                        <div className='flex justify-between'>
                            <span className='text-description'>نوع:</span>
                            <span>{order.couponDetail.type === 'PERCENTAGE' ? 'درصدی' : 'مبلغی'}</span>
                        </div>
                        <div className='flex justify-between'>
                            <span className='text-description'>مقدار:</span>
                            <span>{order.couponDetail.value}{order.couponDetail.type === 'PERCENTAGE' ? '%' : ' تومان'}</span>
                        </div>
                        <div className='flex justify-between'>
                            <span className='text-description'>حداکثر تخفیف:</span>
                            <span>{formatPrice(order.couponDetail.maxDiscount)}</span>
                        </div>
                    </div>
                </div>
            )}

            {order.history && order.history.length > 0 && (
                <div className='mt-6 pt-6 border-t border-dashed border-border'>
                    <div className='flex items-center gap-2 mb-4'>
                        <Calendar color='#000' size={16} />
                        <div className='text-description'>تاریخچه سفارش:</div>
                    </div>
                    <div className='space-y-3'>
                        {order.history.map((historyItem, index) => (
                            <div key={index} className='flex justify-between items-center text-[13px] bg-gray-50 p-3 rounded-lg'>
                                <div className='flex items-center gap-2'>
                                    <div
                                        className='size-2 rounded-full'
                                        style={{ backgroundColor: getStatusColor(historyItem.status) }}
                                    ></div>
                                    <span>{t(`order_status.${historyItem.status}`) || historyItem.status}</span>
                                </div>
                                <div className='text-description'>
                                    {formatOptionalDate(historyItem.changedAt, {
                                        year: 'numeric',
                                        month: '2-digit',
                                        day: '2-digit',
                                        hour: '2-digit',
                                        minute: '2-digit'
                                    })}
                                </div>
                            </div>
                        ))}
                    </div>
                </div>
            )}
        </div>
    )
}

export default OrderItemsDetails

