@php
    $stats = is_array($stats ?? null)
        ? $stats
        : [];

    $totalPurchases = max(
        0,
        (int) data_get($stats, 'total', 0)
    );

    $paidPurchases = max(
        0,
        (int) data_get($stats, 'paid', 0)
    );

    $uniqueProducts = max(
        0,
        (int) data_get($stats, 'products', 0)
    );

    $licenseCount = max(
        0,
        (int) data_get($stats, 'licenses', 0)
    );

    $statCards = [
        [
            'label' => __('Total Purchases'),
            'value' => $totalPurchases,
            'description' => trans_choice(
                ':count paid purchase|:count paid purchases',
                $paidPurchases,
                ['count' => number_format($paidPurchases)]
            ),
            'icon' => 'fa-download',
            'color' => 'primary',
        ],
        [
            'label' => __('Unique Products'),
            'value' => $uniqueProducts,
            'description' => trans_choice(
                ':count digital item|:count digital items',
                $uniqueProducts,
                ['count' => number_format($uniqueProducts)]
            ),
            'icon' => 'fa-cube',
            'color' => 'info',
        ],
        [
            'label' => __('Licenses'),
            'value' => $licenseCount,
            'description' => trans_choice(
                ':count active key|:count active keys',
                $licenseCount,
                ['count' => number_format($licenseCount)]
            ),
            'icon' => 'fa-key',
            'color' => 'warning',
        ],
        [
            'label' => __('Paid Purchases'),
            'value' => $paidPurchases,
            'description' => __('Ready to download'),
            'icon' => 'fa-check-circle',
            'color' => 'success',
        ],
    ];
@endphp

<div class="row g-3 mb-4">
    @foreach($statCards as $stat)
        <div class="col-xl-3 col-lg-6 col-md-6">
            <div
                class="card border-0 shadow-sm
                    h-100 download-stat-card"
            >
                <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"
                            >
                                {{ $stat['label'] }}
                            </p>

                            <h3
                                class="mb-0 fw-700
                                    text-{{ $stat['color'] }}"
                            >
                                {{
                                    number_format(
                                        $stat['value']
                                    )
                                }}
                            </h3>

                            <small class="text-muted">
                                {{ $stat['description'] }}
                            </small>
                        </div>

                        <div
                            class="download-stat-icon rounded-3
                                d-flex align-items-center
                                justify-content-center
                                flex-shrink-0
                                bg-{{ $stat['color'] }}
                                bg-opacity-10"
                        >
                            <i
                                class="fas {{ $stat['icon'] }}
                                    text-{{ $stat['color'] }}
                                    fa-lg"
                            ></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    @endforeach
</div>

@once
    @push('styles')
        <style>
            .fw-600 {
                font-weight: 600;
            }

            .fw-700 {
                font-weight: 700;
            }

            .min-width-0 {
                min-width: 0;
            }

            .download-stat-card {
                transition:
                    transform 0.2s ease,
                    box-shadow 0.2s ease;
            }

            .download-stat-card:hover {
                transform: translateY(-3px);
                box-shadow:
                    0 8px 25px rgba(0, 0, 0, 0.08) !important;
            }

            .download-stat-icon {
                width: 52px;
                height: 52px;
            }

            @media (prefers-reduced-motion: reduce) {
                .download-stat-card {
                    transition: none;
                }

                .download-stat-card:hover {
                    transform: none;
                }
            }
        </style>
    @endpush
@endonce