'use client';

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

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

const FINANCIAL_STATUS_KEY: Record<
  string,
  'paid' | 'statusPending' | 'refundedStatus' | 'partiallyRefundedStatus'
> = {
  paid: 'paid',
  pending: 'statusPending',
  refunded: 'refundedStatus',
  partially_refunded: 'partiallyRefundedStatus',
};

const FINANCIAL_STATUS_COLOR: Record<string, string> = {
  paid: 'bg-green-100 text-green-800 dark:bg-green-950/30 dark:text-green-400',
  pending: 'bg-yellow-100 text-yellow-800 dark:bg-yellow-950/30 dark:text-yellow-400',
  refunded: 'bg-orange-100 text-orange-800 dark:bg-orange-950/30 dark:text-orange-400',
  partially_refunded: 'bg-orange-100 text-orange-800 dark:bg-orange-950/30 dark:text-orange-400',
  voided: 'bg-red-100 text-red-800 dark:bg-red-950/30 dark:text-red-400',
};

export function OrderPaymentBlock({ order, className }: OrderPaymentBlockProps) {
  const t = useTranslations('account');
  if (!order.paymentMethod && !order.financialStatus && !order.invoiceUrl) return null;

  const statusKey = order.financialStatus ? FINANCIAL_STATUS_KEY[order.financialStatus] : null;
  const statusLabel = statusKey ? t(statusKey) : order.financialStatus || '';
  const statusClass = order.financialStatus
    ? FINANCIAL_STATUS_COLOR[order.financialStatus] || 'bg-muted text-muted-foreground'
    : '';

  return (
    <div className={cn('border-border flex flex-wrap items-center gap-3 border-t pt-2 text-xs', className)}>
      <p className="text-foreground text-sm font-medium">{t('paymentMethod')}</p>
      {order.paymentMethod && (
        <span className="text-foreground capitalize">{order.paymentMethod.replace(/_/g, ' ')}</span>
      )}
      {statusLabel && (
        <span
          className={cn(
            'inline-flex items-center rounded-full px-2 py-0.5 text-[11px] font-medium',
            statusClass
          )}
        >
          {statusLabel}
        </span>
      )}
      {/* `invoiceUrl` is null until the connected payment provider (e.g.
          Cardcom) generates the document, and stays null when the store has
          no invoicing-capable provider connected — render nothing then,
          never a broken link or a retry loop. */}
      {order.invoiceUrl && (
        <a
          href={order.invoiceUrl}
          target="_blank"
          rel="noopener noreferrer"
          className="text-primary text-sm font-medium hover:underline"
        >
          {t('downloadInvoice')}
          {order.invoiceNumber ? ` (#${order.invoiceNumber})` : ''}
        </a>
      )}
    </div>
  );
}