'use client';

/**
 * ReturnTimeline
 *
 * Ordered list of return status events.
 * Each step shows an icon-like step indicator, label, and optional timestamp.
 */

import { useT, useLocale } from '@/lib/i18n/react';
import { formatDateTime } from '@/lib/format';
import { StatusBadge } from '@/components/ui/domain/StatusBadge';

export type ReturnStatus =
  | 'requested'
  | 'approved'
  | 'in_transit'
  | 'received'
  | 'refunded'
  | 'denied'
  | 'cancelled'
  | 'expired';

export type ReturnStatusTone = 'success' | 'warning' | 'danger' | 'info' | 'neutral';

export const RETURN_STATUS_MAP: Record<ReturnStatus, { tone: ReturnStatusTone; labelKey: string }> =
  {
    requested: { tone: 'info', labelKey: 'status_requested' },
    approved: { tone: 'success', labelKey: 'status_approved' },
    in_transit: { tone: 'warning', labelKey: 'status_in_transit' },
    received: { tone: 'info', labelKey: 'status_received' },
    refunded: { tone: 'success', labelKey: 'status_refunded' },
    denied: { tone: 'danger', labelKey: 'status_denied' },
    cancelled: { tone: 'neutral', labelKey: 'status_cancelled' },
    expired: { tone: 'neutral', labelKey: 'status_expired' },
  };

/** Vendor-inbox perspective: actionable statuses use warning tone. */
export const VENDOR_RETURN_STATUS_TONES: Record<ReturnStatus, ReturnStatusTone> = {
  requested: 'warning',
  approved: 'info',
  in_transit: 'warning',
  received: 'warning',
  refunded: 'success',
  denied: 'danger',
  cancelled: 'neutral',
  expired: 'neutral',
};

export type ReturnTimelineActor = 'buyer' | 'vendor' | 'admin' | 'system';

export interface ReturnTimelineEvent {
  status: ReturnStatus;
  /** ISO date string when this status was reached */
  occurredAt: string;
  /** Who triggered the transition */
  actorType?: ReturnTimelineActor;
  /** Optional transition reason (e.g. deny reason, dispute reason) */
  reason?: string | null;
}

interface ReturnTimelineProps {
  /** Ordered events, oldest first */
  events: ReturnTimelineEvent[];
  /** Current active status of the return */
  currentStatus: ReturnStatus;
  className?: string;
  /** Admin surfaces use indicative enumLabel copy instead of buyer-facing i18n. */
  audience?: 'admin' | 'customer' | 'vendor';
}

export function ReturnTimeline({
  events,
  currentStatus,
  className,
  audience,
}: ReturnTimelineProps) {
  const t = useT('returns');
  const { locale } = useLocale();
  const actorLabels = t('actor') as unknown as Record<ReturnTimelineActor, string>;
  const reasonPrefix = t('eventReasonPrefix') as unknown as string;

  return (
    <section aria-label={t('timelineTitle')} className={className}>
      <h3 className="text-text-secondary mb-3 text-sm font-semibold">{t('timelineTitle')}</h3>
      {events.length === 0 ? (
        <p className="text-text-muted text-sm">{t('timelineEmpty')}</p>
      ) : (
        <ol className="border-border-subtle relative ms-3 space-y-4 border-s">
          {events.map((event, index) => {
            const isLast = index === events.length - 1;
            const isCurrent = event.status === currentStatus && isLast;
            const actorLabel = event.actorType ? actorLabels[event.actorType] : null;

            return (
              <li key={`${event.status}-${index}`} className="ms-4">
                {/* Step dot */}
                <span
                  aria-hidden="true"
                  className={[
                    'absolute -start-1.5 flex h-3 w-3 rounded-full border-2',
                    isCurrent
                      ? 'border-brand-primary-600 bg-brand-primary-600'
                      : 'border-border-default bg-surface-raised',
                  ].join(' ')}
                />
                <div className="flex flex-wrap items-center gap-2">
                  <StatusBadge
                    state={event.status}
                    map={RETURN_STATUS_MAP}
                    ns="returns"
                    size="sm"
                    enumName={audience === 'admin' ? 'return_status' : undefined}
                    audience={audience === 'admin' ? 'admin' : undefined}
                  />
                  <time dateTime={event.occurredAt} className="text-text-muted text-xs">
                    {formatDateTime(event.occurredAt, locale)}
                  </time>
                  {actorLabel && <span className="text-text-muted text-xs">· {actorLabel}</span>}
                </div>
                {event.reason && (
                  <p className="text-text-secondary mt-1 text-xs">
                    <span className="font-medium">{reasonPrefix}:</span> {event.reason}
                  </p>
                )}
              </li>
            );
          })}
        </ol>
      )}
    </section>
  );
}