@props(['activities'])

<div class="bg-white dark:bg-brand-charcoal-900 border border-slate-200 dark:border-brand-charcoal-800 rounded-xl p-6 shadow-sm select-none">
    <div class="mb-4 flex items-center justify-between">
        <div>
            <h5 class="text-base font-semibold text-slate-800 dark:text-brand-charcoal-100 font-serif">Recent Activity</h5>
            <h6 class="text-xs text-slate-450 dark:text-brand-charcoal-400 mt-0.5 font-medium">Latest system activities</h6>
        </div>
        <a href="{{ route('activities.index') }}" class="inline-flex items-center px-3 py-1.5 border border-slate-200 dark:border-brand-charcoal-800 rounded-lg text-xs font-semibold text-slate-600 dark:text-brand-charcoal-300 hover:text-brand-emerald-500 dark:hover:text-brand-emerald-400 hover:border-brand-emerald-500/30 bg-slate-50 dark:bg-brand-charcoal-950/40 hover:bg-brand-emerald-50 dark:hover:bg-brand-emerald-950/20 transition-all duration-200 cursor-pointer">
            View All <i class="uil uil-angle-right text-base ms-0.5"></i>
        </a>
    </div>

    <div id="recent-activity-list" class="max-h-[610px] overflow-y-auto pr-1 space-y-4 scrollbar">
        @forelse($activities as $activity)
            <div class="flex items-start py-3 {{ !$loop->last ? 'border-b border-slate-100 dark:border-brand-charcoal-800/60' : '' }}">
                <!-- Icon Avatar -->
                <div class="me-3 flex-shrink-0">
                    <div class="h-8 w-8 rounded-full flex items-center justify-center border
                        @switch($activity['type'])
                            @case('invoice_created')
                                bg-emerald-50 text-emerald-700 border-emerald-200 dark:bg-brand-emerald-950/30 dark:text-brand-emerald-400 dark:border-brand-emerald-500/20
                                @break
                            @case('order_created')
                                bg-blue-50 text-blue-700 border-blue-200 dark:bg-blue-950/30 dark:text-blue-400 dark:border-blue-500/20
                                @break
                            @case('invoice_status_changed')
                                bg-amber-50 text-amber-700 border-amber-200 dark:bg-amber-950/30 dark:text-amber-400 dark:border-amber-500/20
                                @break
                            @case('invoice_completed')
                                bg-emerald-50 text-emerald-700 border-emerald-200 dark:bg-brand-emerald-950/30 dark:text-brand-emerald-400 dark:border-brand-emerald-500/20
                                @break
                            @case('invoice_cancelled')
                                bg-red-50 text-red-700 border-red-200 dark:bg-red-950/30 dark:text-red-400 dark:border-red-500/20
                                @break
                            @case('delivery_prepared')
                                bg-cyan-50 text-cyan-700 border-cyan-200 dark:bg-cyan-950/30 dark:text-cyan-400 dark:border-cyan-500/20
                                @break
                            @default
                                bg-slate-100 text-slate-500 border-slate-200 dark:bg-brand-charcoal-850 dark:text-brand-charcoal-350 dark:border-brand-charcoal-800
                        @endswitch">
                        
                        @switch($activity['type'])
                            @case('invoice_created')
                                <i class="uil uil-invoice text-base"></i>
                                @break
                            @case('order_created')
                                <i class="uil uil-shopping-cart text-base"></i>
                                @break
                            @case('invoice_status_changed')
                                <i class="uil uil-sync text-base"></i>
                                @break
                            @case('invoice_completed')
                                <i class="uil uil-check-circle text-base"></i>
                                @break
                            @case('invoice_cancelled')
                                <i class="uil uil-times-circle text-base"></i>
                                @break
                            @case('delivery_prepared')
                                <i class="uil uil-truck text-base"></i>
                                @break
                            @default
                                <i class="uil uil-info-circle text-base"></i>
                        @endswitch
                    </div>
                </div>

                <!-- Content Area -->
                <div class="flex-1 min-w-0">
                    <div class="flex justify-between items-start mb-1.5">
                        <div class="flex-1 me-2 min-w-0">
                            <h6 class="text-sm font-semibold text-slate-800 dark:text-brand-charcoal-150 truncate leading-snug" title="{{ $activity['description'] }}">
                                {{ $activity['description'] }}
                            </h6>
                            <p class="inline-flex items-center gap-1 text-[9px] font-bold tracking-widest text-slate-400 dark:text-brand-charcoal-400 uppercase mt-0.5">
                                <i class="uil uil-user text-xs text-slate-450 dark:text-brand-charcoal-500"></i>
                                {{ $activity['user_name'] }}
                            </p>
                        </div>
                        <div class="text-end flex-shrink-0">
                            @if(isset($activity['total']) && $activity['total'] > 0)
                                <h6 class="text-sm font-bold text-slate-800 dark:text-brand-charcoal-100 font-serif leading-none">${{ number_format($activity['total'], 2) }}</h6>
                            @endif
                            <small class="text-[10px] text-slate-400 dark:text-brand-charcoal-500 font-medium block mt-1.5">{{ $activity['formatted_date'] }}</small>
                        </div>
                    </div>

                    <!-- Activity-specific details -->
                    <div class="mt-1">
                        @switch($activity['type'])
                            @case('order_created')
                                <div class="flex items-center flex-wrap gap-2">
                                    @if(isset($activity['invoice_number']))
                                        <span class="px-2 py-0.5 rounded text-[9px] font-bold tracking-wider uppercase bg-emerald-50 text-emerald-700 border border-emerald-250 dark:bg-brand-emerald-950/20 dark:text-brand-emerald-400 dark:border-brand-emerald-500/10">
                                            <i class="uil uil-invoice me-0.5"></i>
                                            {{ $activity['invoice_number'] }}
                                        </span>
                                    @endif
                                    @if(isset($activity['order_type']))
                                        <span class="px-2 py-0.5 rounded text-[9px] font-bold tracking-wider uppercase bg-slate-100 text-slate-600 border border-slate-200 dark:bg-brand-charcoal-950 dark:text-brand-charcoal-350 dark:border-brand-charcoal-800">
                                            {{ ucfirst($activity['order_type']) }}
                                        </span>
                                    @endif
                                    @if(isset($activity['items_count']))
                                        <span class="px-2 py-0.5 rounded text-[9px] font-bold tracking-wider uppercase bg-blue-50 text-blue-700 border border-blue-200 dark:bg-blue-950/20 dark:text-blue-400 dark:border-blue-500/10">
                                            {{ $activity['items_count'] }} items
                                        </span>
                                    @endif
                                </div>
                                @break

                            @case('invoice_status_changed')
                                @if(isset($activity['old_status_name']) && isset($activity['new_status_name']))
                                    <div class="flex items-center gap-1.5">
                                        <span class="px-2 py-0.5 rounded text-[9px] font-bold tracking-wider uppercase bg-slate-100 text-slate-600 border border-slate-200 dark:bg-brand-charcoal-950 dark:text-brand-charcoal-350 dark:border-brand-charcoal-800">
                                            {{ $activity['old_status_name'] }}
                                        </span>
                                        <i class="uil uil-arrow-right text-slate-400 dark:text-brand-charcoal-500 text-xs"></i>
                                        <span class="px-2 py-0.5 rounded text-[9px] font-bold tracking-wider uppercase border
                                            @if($activity['new_status'] === 'completed') bg-emerald-50 text-emerald-700 border-emerald-250 dark:bg-brand-emerald-950/30 dark:text-brand-emerald-400 dark:border-brand-emerald-500/20
                                            @elseif($activity['new_status'] === 'cancelled') bg-red-50 text-red-700 border-red-200 dark:bg-red-950/30 dark:text-red-400 dark:border-red-500/20
                                            @elseif($activity['new_status'] === 'out_for_delivery') bg-blue-50 text-blue-700 border-blue-200 dark:bg-blue-950/30 dark:text-blue-400 dark:border-blue-500/20
                                            @else bg-amber-50 text-amber-700 border-amber-200 dark:bg-amber-950/30 dark:text-amber-400 dark:border-amber-500/20 @endif">
                                            {{ $activity['new_status_name'] }}
                                        </span>
                                    </div>
                                @endif
                                @break

                            @case('invoice_completed')
                                @if(isset($activity['invoice_number']))
                                    <div class="flex items-center gap-2">
                                        <span class="px-2 py-0.5 rounded text-[9px] font-bold tracking-wider uppercase bg-emerald-50 text-emerald-700 border border-emerald-200 dark:bg-brand-emerald-950/30 dark:text-brand-emerald-400 dark:border-brand-emerald-500/20">
                                            <i class="uil uil-check me-0.5"></i>
                                            Completed
                                        </span>
                                        <span class="px-2 py-0.5 rounded text-[9px] font-bold tracking-wider uppercase bg-slate-100 text-slate-600 border border-slate-200 dark:bg-brand-charcoal-950 dark:text-brand-charcoal-350 dark:border-brand-charcoal-800">
                                            {{ $activity['invoice_number'] }}
                                        </span>
                                    </div>
                                @endif
                                @break

                            @case('invoice_cancelled')
                                @if(isset($activity['invoice_number']))
                                    <div class="flex items-center gap-2 flex-wrap">
                                        <span class="px-2 py-0.5 rounded text-[9px] font-bold tracking-wider uppercase bg-red-50 text-red-700 border border-red-200 dark:bg-red-950/30 dark:text-red-400 dark:border-red-500/20">
                                            <i class="uil uil-times me-0.5"></i>
                                            Cancelled
                                        </span>
                                        <span class="px-2 py-0.5 rounded text-[9px] font-bold tracking-wider uppercase bg-slate-100 text-slate-600 border border-slate-200 dark:bg-brand-charcoal-950 dark:text-brand-charcoal-350 dark:border-brand-charcoal-800">
                                            {{ $activity['invoice_number'] }}
                                        </span>
                                        @if(isset($activity['refund_processed']) && $activity['refund_processed'])
                                            <span class="px-2 py-0.5 rounded text-[9px] font-bold tracking-wider uppercase bg-amber-50 text-amber-700 border border-amber-200 dark:bg-amber-950/30 dark:text-amber-400 dark:border-amber-500/20">
                                                Refund Processed
                                            </span>
                                        @endif
                                    </div>
                                @endif
                                @break

                            @case('delivery_prepared')
                                @if(isset($activity['invoice_number']))
                                    <div class="flex items-center gap-2">
                                        <span class="px-2 py-0.5 rounded text-[9px] font-bold tracking-wider uppercase bg-cyan-50 text-cyan-700 border border-cyan-200 dark:bg-cyan-950/30 dark:text-cyan-400 dark:border-cyan-500/20">
                                            <i class="uil uil-truck me-0.5"></i>
                                            Delivery Prepared
                                        </span>
                                        <span class="px-2 py-0.5 rounded text-[9px] font-bold tracking-wider uppercase bg-slate-100 text-slate-600 border border-slate-200 dark:bg-brand-charcoal-950 dark:text-brand-charcoal-350 dark:border-brand-charcoal-800">
                                            {{ $activity['invoice_number'] }}
                                        </span>
                                    </div>
                                @endif
                                @break

                            @case('payment_status_changed')
                                @if(isset($activity['old_payment_status']) && isset($activity['new_payment_status']))
                                    <div class="flex items-center gap-1.5">
                                        <span class="px-2 py-0.5 rounded text-[9px] font-bold tracking-wider uppercase bg-slate-100 text-slate-600 border border-slate-200 dark:bg-brand-charcoal-950 dark:text-brand-charcoal-350 dark:border-brand-charcoal-800">
                                            {{ ucfirst($activity['old_payment_status']) }}
                                        </span>
                                        <i class="uil uil-arrow-right text-slate-400 dark:text-brand-charcoal-500 text-xs"></i>
                                        <span class="px-2 py-0.5 rounded text-[9px] font-bold tracking-wider uppercase border 
                                            @if($activity['new_payment_status'] === 'completed') bg-emerald-50 text-emerald-700 border-emerald-200 dark:bg-brand-emerald-950/30 dark:text-brand-emerald-400 dark:border-brand-emerald-500/20
                                            @elseif($activity['new_payment_status'] === 'failed') bg-red-50 text-red-700 border-red-200 dark:bg-red-950/30 dark:text-red-400 dark:border-red-500/20
                                            @else bg-amber-50 text-amber-700 border-amber-200 dark:bg-amber-950/30 dark:text-amber-400 dark:border-amber-500/20 @endif">
                                            {{ ucfirst($activity['new_payment_status']) }}
                                        </span>
                                    </div>
                                @endif
                                @break

                            @case('order_status_changed')
                                @if(isset($activity['old_status_name']) && isset($activity['new_status_name']))
                                    <div class="flex items-center gap-1.5">
                                        <span class="px-2 py-0.5 rounded text-[9px] font-bold tracking-wider uppercase bg-slate-100 text-slate-600 border border-slate-200 dark:bg-brand-charcoal-950 dark:text-brand-charcoal-350 dark:border-brand-charcoal-800">
                                            {{ $activity['old_status_name'] }}
                                        </span>
                                        <i class="uil uil-arrow-right text-slate-400 dark:text-brand-charcoal-500 text-xs"></i>
                                        <span class="px-2 py-0.5 rounded text-[9px] font-bold tracking-wider uppercase bg-blue-50 text-blue-700 border border-blue-200 dark:bg-blue-950/30 dark:text-blue-400 dark:border-blue-500/20">
                                            {{ $activity['new_status_name'] }}
                                        </span>
                                    </div>
                                @endif
                                @break

                            @case('refund_processed')
                                @if(isset($activity['refund_amount']))
                                    <div class="flex items-center gap-2">
                                        <span class="px-2 py-0.5 rounded text-[9px] font-bold tracking-wider uppercase bg-red-50 text-red-700 border border-red-200 dark:bg-red-950/30 dark:text-red-400 dark:border-red-500/20">
                                            <i class="uil uil-undo me-0.5"></i>
                                            Refund: ${{ number_format($activity['refund_amount'], 2) }}
                                        </span>
                                        @if(isset($activity['invoice_number']))
                                            <span class="px-2 py-0.5 rounded text-[9px] font-bold tracking-wider uppercase bg-slate-100 text-slate-600 border border-slate-200 dark:bg-brand-charcoal-950 dark:text-brand-charcoal-350 dark:border-brand-charcoal-800">
                                                {{ $activity['invoice_number'] }}
                                            </span>
                                        @endif
                                    </div>
                                @endif
                                @break

                            @case('order_cancelled')
                                @if(isset($activity['invoice_number']))
                                    <div class="flex items-center gap-2">
                                        <span class="px-2 py-0.5 rounded text-[9px] font-bold tracking-wider uppercase bg-red-50 text-red-700 border border-red-200 dark:bg-red-950/30 dark:text-red-400 dark:border-red-500/20">
                                            <i class="uil uil-ban me-0.5"></i>
                                            Cancelled
                                        </span>
                                        <span class="px-2 py-0.5 rounded text-[9px] font-bold tracking-wider uppercase bg-slate-100 text-slate-600 border border-slate-200 dark:bg-brand-charcoal-950 dark:text-brand-charcoal-350 dark:border-brand-charcoal-800">
                                            {{ $activity['invoice_number'] }}
                                        </span>
                                    </div>
                                @endif
                                @break

                            @case('payment_received')
                                @if(isset($activity['payment_amount']) && isset($activity['payment_method']))
                                    <div class="flex items-center gap-2">
                                        <span class="px-2 py-0.5 rounded text-[9px] font-bold tracking-wider uppercase bg-emerald-50 text-emerald-700 border border-emerald-250 dark:bg-brand-emerald-950/30 dark:text-brand-emerald-400 dark:border-brand-emerald-500/20">
                                            <i class="uil uil-bill me-0.5"></i>
                                            ${{ number_format($activity['payment_amount'], 2) }}
                                        </span>
                                        <span class="px-2 py-0.5 rounded text-[9px] font-bold tracking-wider uppercase bg-slate-100 text-slate-600 border border-slate-200 dark:bg-brand-charcoal-950 dark:text-brand-charcoal-350 dark:border-brand-charcoal-800">
                                            {{ ucfirst($activity['payment_method']) }}
                                        </span>
                                    </div>
                                @endif
                                @break

                            @default
                                @if(isset($activity['invoice_number']))
                                    <span class="px-2 py-0.5 rounded text-[9px] font-bold tracking-wider uppercase bg-emerald-50 text-emerald-700 border border-emerald-200 dark:bg-brand-emerald-950/20 dark:text-brand-emerald-400 dark:border-brand-emerald-500/10">
                                        {{ $activity['invoice_number'] }}
                                    </span>
                                @endif
                        @endswitch
                    </div>
                </div>
            </div>
        @empty
            <div class="text-center py-8">
                <i class="uil uil-history text-4xl text-slate-400 dark:text-brand-charcoal-500 mb-2 block"></i>
                <p class="text-sm font-semibold text-slate-600 dark:text-brand-charcoal-300">No recent activity</p>
                <small class="text-xs text-slate-450 dark:text-brand-charcoal-500 mt-1 block">Activities will appear here as they happen</small>
            </div>
        @endforelse
    </div>
</div>