'use client';

import type { Order } from 'brainerce';
import { useTranslations } from '@/core/lib/translations';
import { cn } from '@/core/lib/utils';

interface OrderShippingBlockProps {
  order: Order;
  className?: string;
}

export function OrderShippingBlock({ order, className }: OrderShippingBlockProps) {
  const t = useTranslations('account');
  const addr = order.shippingAddress;
  const hasAddress = !!addr?.line1;
  const hasTracking = !!(order.trackingNumber || order.trackingUrl || order.carrier);
  if (!hasAddress && !hasTracking) return null;

  const fullName = [addr?.firstName, addr?.lastName].filter(Boolean).join(' ');
  const cityLine = [addr?.city, addr?.state || addr?.region, addr?.postalCode]
    .filter(Boolean)
    .join(', ');

  return (
    <div className={cn('border-border space-y-1.5 border-t pt-2 text-xs', className)}>
      {hasAddress && (
        <>
          <p className="text-foreground text-sm font-medium">{t('shippingAddress')}</p>
          <address className="text-muted-foreground not-italic">
            {fullName && <div className="text-foreground">{fullName}</div>}
            {addr?.company && <div>{addr.company}</div>}
            <div>{addr?.line1}</div>
            {addr?.line2 && <div>{addr.line2}</div>}
            {cityLine && <div>{cityLine}</div>}
            {addr?.country && <div>{addr.country}</div>}
            {addr?.phone && <div>{addr.phone}</div>}
          </address>
        </>
      )}

      {hasTracking && (
        <div className={cn(hasAddress && 'mt-2')}>
          <p className="text-foreground text-sm font-medium">{t('tracking')}</p>
          <div className="text-muted-foreground space-y-0.5">
            {order.carrier && order.trackingNumber && (
              <div className="text-foreground font-mono">
                {order.carrier} · {order.trackingNumber}
              </div>
            )}
            {order.carrier && !order.trackingNumber && (
              <div className="text-foreground">{order.carrier}</div>
            )}
            {!order.carrier && order.trackingNumber && (
              <div className="text-foreground font-mono">{order.trackingNumber}</div>
            )}
            {order.shippedAt && (
              <div>{t('shippedOn', { date: new Date(order.shippedAt).toLocaleDateString() })}</div>
            )}
            {order.deliveredAt && (
              <div>
                {t('deliveredOn', { date: new Date(order.deliveredAt).toLocaleDateString() })}
              </div>
            )}
            {order.trackingUrl && (
              <a
                href={order.trackingUrl}
                target="_blank"
                rel="noopener noreferrer"
                className="bg-primary text-primary-foreground mt-1 inline-block rounded px-2.5 py-1 text-xs font-medium hover:opacity-90"
              >
                {t('trackOrder')}
              </a>
            )}
          </div>
        </div>
      )}
    </div>
  );
}