@php
    $dashboardCurrency = currency_code($currency ?? default_currency());

    $metricsList = [
        [
            'key' => 'revenue',
            'label' => __('Revenue'),
            'icon' => 'fa-money-bill-wave',
            'primary' => money($metrics['revenue']['period'] ?? 0, $dashboardCurrency),
            'secondary' => __('Total: :amount', [
                'amount' => money($metrics['revenue']['total'] ?? 0, $dashboardCurrency),
            ]),
            'change' => $comparison['revenue']['change'] ?? 0,
            'color' => 'primary',
            'extra' => __('Avg: :amount', [
                'amount' => money($metrics['revenue']['avg_order_value'] ?? 0, $dashboardCurrency),
            ]),
        ],
        [
            'key' => 'orders',
            'label' => __('Orders'),
            'icon' => 'fa-shopping-bag',
            'primary' => number_format((int) ($metrics['orders']['total'] ?? 0)),
            'secondary' => __('Pending: :count', [
                'count' => number_format((int) ($metrics['orders']['pending'] ?? 0)),
            ]),
            'change' => $metrics['orders']['growth'] ?? 0,
            'color' => 'info',
            'extra' => __('Completed: :count', [
                'count' => number_format((int) ($metrics['orders']['completed'] ?? 0)),
            ]),
        ],
        [
            'key' => 'users',
            'label' => __('Users'),
            'icon' => 'fa-users',
            'primary' => number_format((int) ($metrics['users']['total'] ?? 0)),
            'secondary' => __('New: :count', [
                'count' => number_format((int) ($metrics['users']['new'] ?? 0)),
            ]),
            'change' => $metrics['users']['growth'] ?? 0,
            'color' => 'success',
            'extra' => __('Retention: :rate%', [
                'rate' => number_format((float) ($metrics['conversion']['retention_rate'] ?? 0), 1),
            ]),
        ],
        [
            'key' => 'products',
            'label' => __('Products'),
            'icon' => 'fa-cube',
            'primary' => number_format((int) ($metrics['products']['total'] ?? 0)),
            'secondary' => __(':count active', [
                'count' => number_format((int) ($metrics['products']['active'] ?? 0)),
            ]),
            'change' => null,
            'color' => 'warning',
            'extra' => __('New: :count', [
                'count' => number_format((int) ($metrics['products']['new'] ?? 0)),
            ]),
        ],
    ];
@endphp

<div class="row g-4 mb-4">
    @foreach($metricsList as $metric)
        <div class="col-xl-3 col-lg-6 col-md-6">
            <div class="card border-0 shadow-sm h-100 hover-shadow transition">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-start gap-3">
                        <div class="min-width-0">
                            <p class="text-muted mb-1 small fw-600 text-uppercase">
                                {{ $metric['label'] }}
                            </p>

                            <h3 class="mb-0 fw-800 text-break">
                                {{ $metric['primary'] }}
                            </h3>

                            @if($metric['change'] !== null)
                                @php
                                    $change = (float) $metric['change'];
                                @endphp

                                <div class="mt-1">
                                    <span class="badge {{ $change >= 0 ? 'bg-success' : 'bg-danger' }}">
                                        <i class="fas fa-{{ $change >= 0 ? 'arrow-up' : 'arrow-down' }}"></i>
                                        {{ number_format(abs($change), 1) }}%
                                    </span>
                                    <span class="text-muted small ms-1">
                                        {{ __('vs last period') }}
                                    </span>
                                </div>
                            @endif
                        </div>

                        <div class="rounded-3 p-3 flex-shrink-0"
                             style="background: rgba(var(--bs-{{ $metric['color'] }}-rgb), 0.1);">
                            <i class="fas {{ $metric['icon'] }} fa-2x text-{{ $metric['color'] }}"></i>
                        </div>
                    </div>

                    <div class="mt-3 pt-2 border-top d-flex justify-content-between gap-2 text-muted small">
                        <span>{{ $metric['secondary'] }}</span>
                        <span class="text-end">{{ $metric['extra'] }}</span>
                    </div>
                </div>
            </div>
        </div>
    @endforeach
</div>