import { Location, User, Call } from 'iconsax-react'
import type { FC } from 'react'
import type { Order } from '../types/Types'
import { 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-4 sm:p-6 lg: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-6 sm:mt-8 flex flex-wrap gap-x-8 gap-y-4 sm:gap-x-12 sm:gap-y-7 text-[13px] font-light border-b border-dashed border-border pb-6 sm: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?.referrer && (
                    <div className='flex gap-2'>
                        <div className='text-description'>معرف:</div>
                        <div>{order.user.referrer}</div>
                    </div>
                )}
            </div>

            {order.userAddress && (
                <div className='mt-6 sm:mt-8 space-y-4 text-[13px] font-light'>
                    <div className='flex flex-col sm:flex-row gap-1 sm:gap-2 items-start'>
                        <div className='text-description flex items-center gap-1 shrink-0'>
                            <Location size={14} />
                            آدرس کامل:
                        </div>
                        <div className='flex-1 min-w-0 break-words'>{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