import type { OrderDetail } from '@alqove/api-client';

const STEPS = ['Placed', 'Paid', 'Label purchased', 'Shipped', 'Delivered'] as const;

export function OrderTimeline({ order }: { order: OrderDetail }) {
  // Orders are created only after Stripe payment captures, so Placed + Paid
  // are reached for any order that exists. Fulfillment milestones follow.
  const reached = new Set<(typeof STEPS)[number]>(['Placed', 'Paid']);
  if (order.label_purchased_at) reached.add('Label purchased');
  if (order.shipped_at) reached.add('Shipped');
  if (order.delivered_at) reached.add('Delivered');

  const currentIndex = STEPS.findIndex((s) => !reached.has(s));
  const current = currentIndex === -1 ? null : STEPS[currentIndex];

  return (
    <ol className="flex flex-wrap items-center gap-3 text-sm">
      {STEPS.map((s, i) => {
        const isDone = reached.has(s);
        const isCurrent = s === current;
        return (
          <li key={s} className="flex items-center gap-3">
            <span
              className={`inline-block h-2 w-2 rounded-full ${
                isDone ? 'bg-forest' : isCurrent ? 'bg-forest/50 ring-2 ring-forest/30' : 'bg-ink/20'
              }`}
            />
            <span
              className={
                isDone
                  ? 'text-ink'
                  : isCurrent
                    ? 'font-semibold text-forest'
                    : 'text-ink/40'
              }
            >
              {s}
            </span>
            {i < STEPS.length - 1 && <span className="text-ink/20">→</span>}
          </li>
        );
      })}
    </ol>
  );
}