'use client';

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

/**
 * Message key for every order status the API can return.
 *
 * The API sends these values UPPERCASE and verbatim (`PENDING`, `ON_HOLD`,
 * ...). Never lowercase them before the lookup: a lowercase key silently
 * misses and every row falls through to the default label.
 */
export type OrderStatusLabelKey =
  | 'statusDraft'
  | 'statusPending'
  | 'statusProcessing'
  | 'statusOnHold'
  | 'statusPaid'
  | 'statusShipped'
  | 'statusDelivered'
  | 'statusCompleted'
  | 'statusFulfilled'
  | 'statusCancelled'
  | 'statusRefunded'
  | 'statusPartiallyRefunded';

export const ORDER_STATUS_LABEL_KEYS: Record<OrderStatus, OrderStatusLabelKey> = {
  DRAFT: 'statusDraft',
  PENDING: 'statusPending',
  PROCESSING: 'statusProcessing',
  ON_HOLD: 'statusOnHold',
  PAID: 'statusPaid',
  SHIPPED: 'statusShipped',
  DELIVERED: 'statusDelivered',
  COMPLETED: 'statusCompleted',
  FULFILLED: 'statusFulfilled',
  CANCELLED: 'statusCancelled',
  REFUNDED: 'statusRefunded',
  PARTIALLY_REFUNDED: 'statusPartiallyRefunded',
};

interface OrderStatusTimelineProps {
  history: Order['statusHistory'];
  className?: string;
}

export function OrderStatusTimeline({ history, className }: OrderStatusTimelineProps) {
  const t = useTranslations('account');
  if (!history || history.length === 0) return null;

  return (
    <div className={cn('border-border border-t pt-2', className)}>
      <p className="text-foreground mb-2 text-sm font-medium">{t('statusTimeline')}</p>
      <ol className="space-y-1.5">
        {history.map((entry, idx) => {
          const key = ORDER_STATUS_LABEL_KEYS[entry.status] || 'statusPending';
          const when = new Date(entry.at);
          const whenStr = isNaN(when.getTime())
            ? entry.at
            : when.toLocaleString(undefined, {
                year: 'numeric',
                month: 'short',
                day: 'numeric',
                hour: '2-digit',
                minute: '2-digit',
              });
          return (
            <li key={`${entry.status}-${idx}`} className="flex items-center gap-2 text-xs">
              <span
                className={cn(
                  'bg-primary inline-block h-2 w-2 flex-shrink-0 rounded-full',
                  idx === history.length - 1 ? 'opacity-100' : 'opacity-60'
                )}
              />
              <span className="text-foreground font-medium">{t(key)}</span>
              <span className="text-muted-foreground">· {whenStr}</span>
              {entry.note && <span className="text-muted-foreground truncate">({entry.note})</span>}
            </li>
          );
        })}
      </ol>
    </div>
  );
}