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

interface Props {
  return: OrderReturn;
  viewer?: 'buyer' | 'seller';
}

interface Event {
  key: string;
  label: string;
  at: string | null;
}

function formatTimestamp(iso: string | null): string {
  if (!iso) return '';
  return new Date(iso).toLocaleString(undefined, {
    month: 'short',
    day: 'numeric',
    hour: 'numeric',
    minute: '2-digit',
  });
}

export function ReturnTimeline({ return: r, viewer = 'buyer' }: Props) {
  const events: Event[] = [
    { key: 'requested', label: 'Requested', at: r.created_at },
    { key: 'approved', label: 'Approved', at: r.approved_at },
    { key: 'rejected', label: 'Rejected', at: r.rejected_at },
    { key: 'label_issued', label: 'Label issued', at: r.label_issued_at },
    { key: 'in_transit', label: 'In transit', at: r.in_transit_at },
    { key: 'received', label: 'Received', at: r.received_at },
    { key: 'refunded', label: 'Refunded', at: r.refunded_at },
    { key: 'closed', label: 'Closed', at: r.closed_at },
    { key: 'cancelled', label: 'Cancelled', at: r.cancelled_at },
  ].filter((e) => e.at !== null);

  const showLabelDetails =
    viewer === 'buyer' && r.state === 'awaiting_shipment';

  return (
    <ol className="space-y-3" data-testid="return-timeline">
      {events.map((e) => (
        <li key={e.key} className="flex items-start gap-3">
          <span
            aria-hidden
            className="mt-1.5 h-2 w-2 flex-none rounded-full bg-slate-400"
          />
          <div className="flex-1">
            <div className="text-sm font-medium text-slate-900">{e.label}</div>
            <div className="text-xs text-slate-500">{formatTimestamp(e.at)}</div>
            {showLabelDetails && e.key === 'label_issued' && (
              <div className="mt-2 space-y-1 text-xs text-slate-600">
                {r.shipping_label_url && (
                  <div>
                    <a
                      href={r.shipping_label_url}
                      target="_blank"
                      rel="noopener noreferrer"
                      className="font-medium text-forest-700 hover:text-forest-800 underline"
                    >
                      Download label
                    </a>
                  </div>
                )}
                {r.tracking_number && (
                  <div>
                    {r.tracking_url ? (
                      <a
                        href={r.tracking_url}
                        target="_blank"
                        rel="noopener noreferrer"
                        className="text-forest-700 hover:text-forest-800 underline"
                      >
                        {r.carrier ?? 'Carrier'}
                      </a>
                    ) : (
                      <span>{r.carrier ?? 'Carrier'}</span>
                    )}
                    <span className="ml-1">{r.tracking_number}</span>
                  </div>
                )}
              </div>
            )}
          </div>
        </li>
      ))}
    </ol>
  );
}