@props(['activities'])

<div class="card h-100">
    <div class="card-body">
        <div class="d-flex justify-content-between align-items-center mb-3">
            <div>
                <h5 class="mb-1">Recent Activity</h5>
                <h6 class="text-body-tertiary">Latest system activities</h6>
            </div>
            <a href="{{ route('invoices.index') }}" class="btn btn-sm btn-phoenix-secondary">
                View All <span class="fas fa-angle-right ms-1"></span>
            </a>
        </div>

        <div class="scrollbar" style="max-height: 610px;">
            @forelse($activities as $activity)
                <div class="d-flex align-items-start py-2 {{ !$loop->last ? 'border-bottom border-translucent' : '' }}">
                    <div class="avatar avatar-s me-3 flex-shrink-0">
                        <div class="avatar-name rounded-circle
                            @switch($activity['type'])
                                @case('invoice_created')
                                    bg-primary
                                    @break
                                @case('order_created')
                                    bg-success
                                    @break
                                @case('invoice_status_changed')
                                    bg-warning
                                    @break
                                @case('invoice_completed')
                                    bg-success
                                    @break
                                @case('invoice_cancelled')
                                    bg-danger
                                    @break
                                @case('delivery_prepared')
                                    bg-info
                                    @break
                                @default
                                    bg-secondary
                            @endswitch">
                            <span class="text-white">
                                @switch($activity['type'])
                                    @case('invoice_created')
                                        <i class="fas fa-file-invoice fs-10"></i>
                                        @break
                                    @case('order_created')
                                        <i class="fas fa-shopping-cart fs-10"></i>
                                        @break
                                    @case('invoice_status_changed')
                                        <i class="fas fa-sync-alt fs-10"></i>
                                        @break
                                    @case('invoice_completed')
                                        <i class="fas fa-check-circle fs-10"></i>
                                        @break
                                    @case('invoice_cancelled')
                                        <i class="fas fa-times-circle fs-10"></i>
                                        @break
                                    @case('delivery_prepared')
                                        <i class="fas fa-truck fs-10"></i>
                                        @break
                                    @default
                                        <i class="fas fa-activity fs-10"></i>
                                @endswitch
                            </span>
                        </div>
                    </div>

                    <div class="flex-1 min-w-0">
                        <div class="d-flex justify-content-between align-items-start mb-1">
                            <div class="flex-1 me-2">
                                <h6 class="mb-0 fs-9 text-truncate" title="{{ $activity['description'] }}">
                                    {{ $activity['description'] }}
                                </h6>
                                <p class="text-body-secondary fs-10 mb-0">
                                    <i class="fas fa-user me-1"></i>
                                    {{ $activity['user_name'] }}
                                </p>
                            </div>
                            <div class="text-end flex-shrink-0">
                                @if(isset($activity['total']) && $activity['total'] > 0)
                                    <h6 class="mb-0 fs-9">${{ number_format($activity['total'], 2) }}</h6>
                                @endif
                                <small class="text-body-tertiary">{{ $activity['formatted_date'] }}</small>
                            </div>
                        </div>

                        <!-- Activity-specific details -->
                        <div class="mt-1">
                            @switch($activity['type'])
                                @case('order_created')
                                    <div class="d-flex align-items-center gap-2 fs-10">
                                        @if(isset($activity['invoice_number']))
                                            <span class="badge bg-primary bg-opacity-10 text-primary">
                                                <i class="fas fa-file-invoice me-1"></i>
                                                {{ $activity['invoice_number'] }}
                                            </span>
                                        @endif
                                        @if(isset($activity['order_type']))
                                            <span class="badge bg-secondary bg-opacity-10 text-body">
                                                {{ ucfirst($activity['order_type']) }}
                                            </span>
                                        @endif
                                        @if(isset($activity['items_count']))
                                            <span class="badge bg-info bg-opacity-10 text-info">
                                                {{ $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="d-flex align-items-center gap-1 fs-10">
                                            <span class="badge bg-secondary bg-opacity-20 text-body">
                                                {{ $activity['old_status_name'] }}
                                            </span>
                                            <i class="fas fa-arrow-right text-body-tertiary fs-9"></i>
                                            <span class="badge
                                                @if($activity['new_status'] === 'completed') bg-success bg-opacity-20 text-success
                                                @elseif($activity['new_status'] === 'cancelled') bg-danger bg-opacity-20 text-danger
                                                @elseif($activity['new_status'] === 'out_for_delivery') bg-info bg-opacity-20 text-info
                                                @else bg-warning bg-opacity-20 text-warning @endif">
                                                {{ $activity['new_status_name'] }}
                                            </span>
                                        </div>
                                    @endif
                                    @break

                                @case('invoice_completed')
                                    @if(isset($activity['invoice_number']))
                                        <div class="d-flex align-items-center gap-2 fs-10">
                                            <span class="badge bg-success bg-opacity-10 text-success">
                                                <i class="fas fa-check me-1"></i>
                                                Completed
                                            </span>
                                            <span class="badge bg-primary bg-opacity-10 text-primary">
                                                {{ $activity['invoice_number'] }}
                                            </span>
                                        </div>
                                    @endif
                                    @break

                                @case('invoice_cancelled')
                                    @if(isset($activity['invoice_number']))
                                        <div class="d-flex align-items-center gap-2 fs-10">
                                            <span class="badge bg-danger bg-opacity-10 text-danger">
                                                <i class="fas fa-times me-1"></i>
                                                Cancelled
                                            </span>
                                            <span class="badge bg-primary bg-opacity-10 text-primary">
                                                {{ $activity['invoice_number'] }}
                                            </span>
                                            @if(isset($activity['refund_processed']) && $activity['refund_processed'])
                                                <span class="badge bg-warning bg-opacity-10 text-warning">
                                                    Refund Processed
                                                </span>
                                            @endif
                                        </div>
                                    @endif
                                    @break

                                @case('delivery_prepared')
                                    @if(isset($activity['invoice_number']))
                                        <div class="d-flex align-items-center gap-2 fs-10">
                                            <span class="badge bg-info bg-opacity-10 text-info">
                                                <i class="fas fa-truck me-1"></i>
                                                Delivery Prepared
                                            </span>
                                            <span class="badge bg-primary bg-opacity-10 text-primary">
                                                {{ $activity['invoice_number'] }}
                                            </span>
                                        </div>
                                    @endif
                                    @break

                                @case('payment_status_changed')
                                    @if(isset($activity['old_payment_status']) && isset($activity['new_payment_status']))
                                        <div class="d-flex align-items-center gap-1 fs-10">
                                            <span class="badge bg-secondary bg-opacity-20 text-body">
                                                {{ ucfirst($activity['old_payment_status']) }}
                                            </span>
                                            <i class="fas fa-arrow-right text-body-tertiary fs-9"></i>
                                            <span class="badge 
                                                @if($activity['new_payment_status'] === 'completed') bg-success bg-opacity-20 text-success
                                                @elseif($activity['new_payment_status'] === 'failed') bg-danger bg-opacity-20 text-danger
                                                @else bg-warning bg-opacity-20 text-warning @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="d-flex align-items-center gap-1 fs-10">
                                            <span class="badge bg-secondary bg-opacity-20 text-body">
                                                {{ $activity['old_status_name'] }}
                                            </span>
                                            <i class="fas fa-arrow-right text-body-tertiary fs-9"></i>
                                            <span class="badge bg-info bg-opacity-20 text-info">
                                                {{ $activity['new_status_name'] }}
                                            </span>
                                        </div>
                                    @endif
                                    @break

                                @case('refund_processed')
                                    @if(isset($activity['refund_amount']))
                                        <div class="d-flex align-items-center gap-2 fs-10">
                                            <span class="badge bg-danger bg-opacity-10 text-danger">
                                                <i class="fas fa-undo me-1"></i>
                                                Refund: ${{ number_format($activity['refund_amount'], 2) }}
                                            </span>
                                            @if(isset($activity['invoice_number']))
                                                <span class="badge bg-primary bg-opacity-10 text-primary">
                                                    {{ $activity['invoice_number'] }}
                                                </span>
                                            @endif
                                        </div>
                                    @endif
                                    @break

                                @case('order_cancelled')
                                    @if(isset($activity['invoice_number']))
                                        <div class="d-flex align-items-center gap-2 fs-10">
                                            <span class="badge bg-danger bg-opacity-10 text-danger">
                                                <i class="fas fa-ban me-1"></i>
                                                Cancelled
                                            </span>
                                            <span class="badge bg-primary bg-opacity-10 text-primary">
                                                {{ $activity['invoice_number'] }}
                                            </span>
                                        </div>
                                    @endif
                                    @break

                                @case('payment_received')
                                    @if(isset($activity['payment_amount']) && isset($activity['payment_method']))
                                        <div class="d-flex align-items-center gap-2 fs-10">
                                            <span class="badge bg-success bg-opacity-10 text-success">
                                                <i class="fas fa-money-bill me-1"></i>
                                                ${{ number_format($activity['payment_amount'], 2) }}
                                            </span>
                                            <span class="badge bg-secondary bg-opacity-10 text-body">
                                                {{ ucfirst($activity['payment_method']) }}
                                            </span>
                                        </div>
                                    @endif
                                    @break

                                @default
                                    @if(isset($activity['invoice_number']))
                                        <span class="badge bg-primary bg-opacity-10 text-primary fs-10">
                                            {{ $activity['invoice_number'] }}
                                        </span>
                                    @endif
                            @endswitch
                        </div>
                    </div>
                </div>
            @empty
                <div class="text-center py-4">
                    <div class="text-body-tertiary mb-2">
                        <i class="fas fa-history fs-2"></i>
                    </div>
                    <p class="text-body-secondary mb-0">No recent activity</p>
                    <small class="text-body-tertiary">Activities will appear here as they happen</small>
                </div>
            @endforelse
        </div>
    </div>
</div>