@php
    $events = $getState() ?? collect();

    $dotColors = [
        'order_placed'    => '#16a34a',
        'status_change'   => '#3b82f6',
        'item_edit'       => '#f59e0b',
        'shipping_change' => '#06b6d4',
        'credit_issued'   => '#16a34a',
        'note_added'      => '#9ca3af',
    ];

    $badgeColors = [
        'order_placed'    => 'background:#dcfce7;color:#15803d',
        'status_change'   => 'background:#dbeafe;color:#1d4ed8',
        'item_edit'       => 'background:#fef3c7;color:#b45309',
        'shipping_change' => 'background:#cffafe;color:#0e7490',
        'credit_issued'   => 'background:#dcfce7;color:#15803d',
        'note_added'      => 'background:#f3f4f6;color:#6b7280',
    ];

    $labels = [
        'order_placed'    => 'Order Placed',
        'status_change'   => 'Status Update',
        'item_edit'       => 'Items Modified',
        'shipping_change' => 'Shipping Updated',
        'credit_issued'   => 'Credit Issued',
        'note_added'      => 'Note Added',
    ];
@endphp

@if($events->isEmpty())
    <div style="padding:2rem;text-align:center;color:#6E7F96;font-size:.875rem;">
        No events recorded yet.
    </div>
@else
    <div style="padding:1rem 1.25rem;">
        <ol style="list-style:none;margin:0;padding:0;position:relative;">
            @foreach($events as $i => $event)
                @php
                    $isLast  = $loop->last;
                    $type    = $event->event_type ?? 'note_added';
                    $dot     = $dotColors[$type]   ?? '#9ca3af';
                    $badge   = $badgeColors[$type]  ?? 'background:#f3f4f6;color:#6b7280';
                    $label   = $labels[$type]       ?? ucfirst(str_replace('_',' ',$type));
                    $who     = $event->createdBy?->name ?? null;
                    $when    = $event->created_at ? $event->created_at->format('d M Y, H:i') : '—';
                @endphp
                <li style="display:flex;gap:1rem;position:relative;">
                    {{-- Spine --}}
                    <div style="display:flex;flex-direction:column;align-items:center;flex-shrink:0;width:1rem;">
                        <div style="
                            width:.75rem;height:.75rem;border-radius:50%;
                            background:{{ $dot }};
                            box-shadow:0 0 0 4px {{ $dot }}22;
                            margin-top:.25rem;flex-shrink:0;
                        "></div>
                        @if(!$isLast)
                            <div style="width:1px;flex:1;background:#E4E8E9;margin:.25rem 0;"></div>
                        @endif
                    </div>

                    {{-- Content --}}
                    <div style="padding-bottom:{{ $isLast ? '0' : '1.25rem' }};flex:1;min-width:0;">
                        <div style="display:flex;align-items:center;justify-content:space-between;gap:.5rem;flex-wrap:wrap;margin-bottom:.25rem;">
                            <span style="
                                display:inline-block;padding:.15rem .6rem;border-radius:9999px;
                                font-size:.65rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;
                                {{ $badge }};
                            ">{{ $label }}</span>
                            <span style="font-size:.7rem;color:#6E7F96;white-space:nowrap;">{{ $when }}</span>
                        </div>
                        <p style="font-size:.875rem;color:#4B5563;line-height:1.4;margin:0;">
                            {{ $event->description }}
                        </p>
                        @if($who)
                            <p style="font-size:.7rem;color:#9ca3af;margin:.2rem 0 0;">by {{ $who }}</p>
                        @endif
                    </div>
                </li>
            @endforeach
        </ol>
    </div>
@endif