@php
    $items = collect($items ?? []);
    $title = $title ?? __('Top Items');
    $icon = $icon ?? 'fa-list';
    $color = $color ?? 'primary';
    $primaryField = $primaryField ?? 'id';
    $secondaryField = $secondaryField ?? null;
    $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 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>
        <span class="badge bg-light text-muted">{{ $badgeLabel ?? __('Top') }}</span>
    </div>

    <div class="card-body p-0">
        @forelse($items as $index => $item)
            @php
                $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

            <div class="d-flex align-items-center border-bottom px-3 py-2 hover-bg-light transition">
                <div class="me-3 flex-shrink-0">
                    @if(isset($imageField) && filled(data_get($item, $imageField)))
                        <img src="{{ asset('storage/'.ltrim((string) data_get($item, $imageField), '/')) }}"
                             alt="{{ data_get($item, $primaryField, __('Item')) }}"
                             class="rounded"
                             width="40"
                             height="40"
                             loading="lazy"
                             style="object-fit:cover;">
                    @else
                        <span class="badge rounded-circle {{ $index === 0 ? 'bg-warning text-dark' : ($index === 1 ? 'bg-secondary' : ($index === 2 ? 'bg-danger' : 'bg-light text-dark')) }} p-2"
                              style="min-width:30px;height:30px;display:flex;align-items:center;justify-content:center;">
                            {{ $index + 1 }}
                        </span>
                    @endif
                </div>

                <div class="flex-grow-1 overflow-hidden">
                    <div class="fw-600 text-truncate" style="max-width:180px;">
                        {{ \Illuminate\Support\Str::limit(
                            (string) data_get($item, $primaryField, __('Unknown')),
                            35
                        ) }}
                    </div>

                    @if($secondaryField)
                        <small class="text-muted">
                            {{ $secondaryLabel ?? \Illuminate\Support\Str::headline($secondaryField) }}:
                            {{ number_format((int) data_get($item, $secondaryField, 0)) }}

                            @if(isset($extraField))
                                <span class="mx-1">|</span>
                                {{ number_format((int) data_get($item, $extraField, 0)) }}
                                {{ $extraLabel ?? '' }}
                            @endif
                        </small>
                    @endif
                </div>

                <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(isset($badgeField))
                        <span class="badge bg-success">
                            {{ number_format((int) data_get($item, $badgeField, 0)) }}
                            {{ $badgeLabel ?? __('active') }}
                        </span>
                    @endif
                </div>
            </div>
        @empty
            <div class="text-center text-muted py-4">
                <i class="fas {{ $icon }} fa-2x mb-2 d-block"></i>
                {{ $emptyMessage ?? __('No data available yet') }}
            </div>
        @endforelse
    </div>
</div>