dmenu-admin/src/pages/orders/components/CustomerInfo.tsx

import { Location, User, Call, Cake, Heart } from 'iconsax-react'
import type { FC } from 'react'
import type { Order } from '../types/Types'
import { formatOptionalDate, formatFaNumber } from '@/helpers/func'

interface CustomerInfoProps {
    order: Order
}

const CustomerInfo: FC<CustomerInfoProps> = ({ order }) => {
    const customerName = [order.user?.firstName, order.user?.lastName].filter(Boolean).join(' ') || '-'
    const fullAddress = order.userAddress
        ? `${order.userAddress.province || ''}، ${order.userAddress.city || ''}، ${order.userAddress.address || ''}، کد پستی: ${order.userAddress.postalCode || '-'}`.trim()
        : '-'

    return (
        <div className='w-full bg-white rounded-4xl p-8'>
            <div className='flex justify-between items-center'>
                <div className='text-lg font-light flex items-center gap-2'>
                    <User color='#000' size={20} />
                    اطلاعات مشتری
                </div>
            </div>

            <div className='mt-8 flex flex-wrap gap-y-7 gap-20 text-[13px] font-light border-b border-dashed border-border pb-8'>
                <div className='flex gap-2'>
                    <div className='text-description'>
                        شماره سفارش:
                    </div>
                    <div>{formatFaNumber(order.orderNumber)}</div>
                </div>

                <div className='flex gap-2'>
                    <div className='text-description'>
                        نام مشتری:
                    </div>
                    <div className='flex items-center gap-2'>
                        {order.user?.avatarUrl && (
                            <img
                                src={order.user.avatarUrl}
                                alt={customerName}
                                className='w-8 h-8 rounded-full object-cover'
                            />
                        )}
                        <span>{customerName}</span>
                    </div>
                </div>

                <div className='flex gap-2'>
                    <div className='text-description'>شماره تماس:</div>
                    <div className='flex items-center gap-1'>
                        <Call size={14} />
                        {order.user?.phone || '-'}
                    </div>
                </div>

                {order.user?.birthDate && (
                    <div className='flex gap-2'>
                        <div className='text-description'>تاریخ تولد:</div>
                        <div className='flex items-center gap-1'>
                            <Cake size={14} />
                            {formatOptionalDate(order.user.birthDate, {
                                year: 'numeric',
                                month: '2-digit',
                                day: '2-digit'
                            })}
                        </div>
                    </div>
                )}

                {order.user?.marriageDate && (
                    <div className='flex gap-2'>
                        <div className='text-description'>تاریخ ازدواج:</div>
                        <div className='flex items-center gap-1'>
                            <Heart size={14} />
                            {formatOptionalDate(order.user.marriageDate, {
                                year: 'numeric',
                                month: '2-digit',
                                day: '2-digit'
                            })}
                        </div>
                    </div>
                )}

                <div className='flex gap-2'>
                    <div className='text-description'>جنسیت:</div>
                    <div>{order.user?.gender ? 'مرد' : 'زن'}</div>
                </div>

                <div className='flex gap-2'>
                    <div className='text-description'>وضعیت:</div>
                    <div className={`px-2 py-1 rounded text-xs ${order.user?.isActive ? 'bg-green-100 text-green-700' : 'bg-red-100 text-red-700'}`}>
                        {order.user?.isActive ? 'فعال' : 'غیرفعال'}
                    </div>
                </div>

                {order.user?.referrer && (
                    <div className='flex gap-2'>
                        <div className='text-description'>معرف:</div>
                        <div>{order.user.referrer}</div>
                    </div>
                )}
            </div>

            {order.userAddress && (
                <div className='mt-8 space-y-4 text-[13px] font-light'>
                    <div className='flex gap-2 items-start'>
                        <div className='text-description flex items-center gap-1'>
                            <Location size={14} />
                            آدرس کامل:
                        </div>
                        <div className='flex-1'>{fullAddress}</div>
                    </div>

                    {order.userAddress.fullName && (
                        <div className='flex gap-2'>
                            <div className='text-description'>نام گیرنده:</div>
                            <div>{order.userAddress.fullName}</div>
                        </div>
                    )}

                    <div className='flex gap-2 items-center'>
                        <div className='text-description'>شماره تماس گیرنده:</div>
                        <div>{order.userAddress.phone || '-'}</div>
                    </div>

                    {order.userAddress?.latitude && order.userAddress?.longitude && (
                        <a
                            href={`https://www.google.com/maps?q=${order.userAddress.latitude},${order.userAddress.longitude}`}
                            target='_blank'
                            rel='noopener noreferrer'
                            className='flex gap-1 items-center cursor-pointer text-blue-600 hover:text-blue-800'
                        >
                            <Location size={17} color='#0047FF' />
                            <div className='text-[13px]'>مشاهده روی نقشه</div>
                        </a>
                    )}
                </div>
            )}

            {order.carAddress && (
                <div className={`${order.userAddress ? 'mt-6 pt-6 border-t' : 'mt-8'} border-dashed border-border`}>
                    <div className='text-description mb-4'>اطلاعات خودرو:</div>
                    <div className='flex flex-wrap gap-y-4 gap-8 text-[13px]'>
                        <div className='flex gap-2'>
                            <div className='text-description'>رنگ:</div>
                            <div>{order.carAddress.carColor}</div>
                        </div>
                        <div className='flex gap-2'>
                            <div className='text-description'>مدل:</div>
                            <div>{order.carAddress.carModel}</div>
                        </div>
                        <div className='flex gap-2'>
                            <div className='text-description'>پلاک:</div>
                            <div>{order.carAddress.plateNumber}</div>
                        </div>
                        <div className='flex gap-2'>
                            <div className='text-description'>شماره تماس:</div>
                            <div>{order.carAddress.phone}</div>
                        </div>
                    </div>
                </div>
            )}
        </div>
    )
}

export default CustomerInfo