@php
    $items = collect($items ?? []);
    $title = $title ?? __('Recent Items');
    $icon = $icon ?? 'fa-list';
    $color = $color ?? 'primary';
    $primaryField = $primaryField ?? 'id';
    $secondaryField = $secondaryField ?? null;
    $routeParam = $routeParam ?? 'id';
    $fallbackCurrency = currency_code($currency ?? default_currency());
@endphp

<div class="card border-0 shadow-sm h-100">
    <div class="card-header bg-white border-0 py-3">
        <div class="d-flex justify-content-between align-items-center">
            <h6 class="mb-0 fw-700">
                <i class="fas {{ $icon }} text-{{ $color }} me-2"></i>
                {{ $title }}
            </h6>

            @if(isset($routeList) && Route::has($routeList))
                <a href="{{ route($routeList) }}"
                   class="btn btn-sm btn-outline-primary"
                   aria-label="{{ __('View all :items', ['items' => strtolower($title)]) }}"
                   title="{{ __('View all') }}">
                    <i class="fas fa-arrow-right"></i>
                </a>
            @endif
        </div>
    </div>

    <div class="card-body p-0">
        @forelse($items as $item)
            @php
                $primaryValue = data_get($item, $primaryField, __('Unknown'));
                $secondaryValue = $secondaryField
                    ? data_get($item, $secondaryField)
                    : null;

                if (
                    filled($secondaryValue)
                    && strcasecmp(
                        trim((string) $primaryValue),
                        trim((string) $secondaryValue)
                    ) === 0
                ) {
                    $secondaryValue = null;
                }

                $metaValue = isset($metaField)
                    ? data_get($item, $metaField)
                    : null;

                $badgeValue = isset($badgeField)
                    ? trim((string) data_get($item, $badgeField, ''))
                    : '';

                $badgeClass = match (strtolower($badgeValue)) {
                    'paid', 'completed', 'active', 'approved', 'delivered' => 'bg-success',
                    'pending', 'awaiting payment' => 'bg-warning text-dark',
                    'processing', 'in progress' => 'bg-info text-dark',
                    'shipped', 'in transit' => 'bg-primary',
                    'cancelled', 'rejected', 'failed', 'banned' => 'bg-danger',
                    default => 'bg-light text-dark border',
                };

                $routeValue = data_get($item, $routeParam);
                $detailUrl = isset($route) && Route::has($route) && filled($routeValue)
                    ? route($route, $routeValue)
                    : '#';

                $avatar = isset($avatarField)
                    ? data_get($item, $avatarField)
                    : null;

                $itemCurrency = currency_code(
                    isset($currencyField)
                        ? data_get($item, $currencyField)
                        : (
                            data_get($item, 'price_currency')
                            ?? data_get($item, 'currency_code')
                            ?? data_get($item, 'currency')
                            ?? $fallbackCurrency
                        )
                );
            @endphp

            <a href="{{ $detailUrl }}"
               class="d-flex align-items-center gap-3 border-bottom px-3 py-3 text-decoration-none text-dark dashboard-list-item">
                <div class="flex-shrink-0">
                    @if(filled($avatar))
                        <img src="{{ asset('storage/'.ltrim((string) $avatar, '/')) }}"
                             alt="{{ $primaryValue }}"
                             class="rounded-circle"
                             width="42"
                             height="42"
                             loading="lazy"
                             style="object-fit:cover;">
                    @else
                        <div class="dashboard-list-icon bg-light rounded-circle d-flex align-items-center justify-content-center">
                            <i class="fas {{ $icon }} text-{{ $color }}"></i>
                        </div>
                    @endif
                </div>

                <div class="flex-grow-1 overflow-hidden">
                    <div class="fw-600 text-truncate">
                        {{ $primaryPrefix ?? '' }}{{ $primaryValue }}
                    </div>

                    @if(filled($secondaryValue) || filled($metaValue))
                        <div class="small text-muted text-truncate mt-1">
                            @if(filled($secondaryValue))
                                <span>{{ $secondaryValue }}</span>
                            @endif

                            @if(filled($secondaryValue) && filled($metaValue))
                                <span class="mx-1" aria-hidden="true">·</span>
                            @endif

                            @if(filled($metaValue))
                                <span>{{ $metaValue }}</span>
                            @endif
                        </div>
                    @endif

                    @if(filled($badgeValue) && ! isset($valueField))
                        <span class="badge {{ $badgeClass }} mt-2">
                            {{ $badgeValue }}
                        </span>
                    @endif
                </div>

                @if(isset($valueField) || filled($badgeValue))
                    <div class="text-end flex-shrink-0">
                        @if(isset($valueField))
                            <div class="fw-700 text-nowrap">
                                {{ money(data_get($item, $valueField, 0), $itemCurrency) }}
                            </div>
                        @endif

                        @if(filled($badgeValue) && isset($valueField))
                            <span class="badge {{ $badgeClass }} mt-1">
                                {{ $badgeValue }}
                            </span>
                        @endif
                    </div>
                @endif
            </a>
        @empty
            <div class="text-center text-muted px-3 py-5">
                <i class="fas fa-inbox fa-2x mb-3 d-block opacity-50"></i>
                <p class="mb-0">{{ $emptyMessage ?? __('No recent items available.') }}</p>
            </div>
        @endforelse
    </div>
</div>

@once
    @push('styles')
        <style>
            .dashboard-list-item {
                min-height: 70px;
                transition: background-color 0.2s ease;
            }
            .dashboard-list-item:hover {
                background-color: rgba(0, 169, 157, 0.06);
            }
            .dashboard-list-item:focus-visible {
                outline: 2px solid #00a99d;
                outline-offset: -2px;
            }
            .dashboard-list-icon {
                width: 42px;
                height: 42px;
            }
            .fw-600 { font-weight: 600; }
        </style>
    @endpush
@endonce