@php
    $stats = $publicStats ?? [
        'registered_devices' => 0,
        'recovered_devices' => 0,
        'monthly_reports' => 0,
        'top_types' => [],
        'top_names' => [],
    ];
@endphp

<section class="theme-card p-4 sm:p-5 space-y-4" data-testid="public-general-stats">
    <div class="flex flex-wrap items-end justify-between gap-2">
        <div>
            <h2 class="text-lg sm:text-xl font-bold">{{ __('messages.public_statistics_title') }}</h2>
            <p class="text-sm theme-inline-muted">{{ __('messages.public_statistics_subtitle') }}</p>
        </div>
    </div>

    <div class="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-4 gap-3">
        <article class="theme-surface-panel p-3">
            <p class="text-xs theme-inline-muted">{{ __('messages.public_total_registered_devices') }}</p>
            <p class="mt-1 text-2xl font-bold">{{ number_format((int) ($stats['registered_devices'] ?? 0)) }}</p>
        </article>
        <article class="theme-surface-panel p-3">
            <p class="text-xs theme-inline-muted">{{ __('messages.public_total_recovered_devices') }}</p>
            <p class="mt-1 text-2xl font-bold">{{ number_format((int) ($stats['recovered_devices'] ?? 0)) }}</p>
        </article>
        <article class="theme-surface-panel p-3">
            <p class="text-xs theme-inline-muted">{{ __('messages.public_reports_this_month') }}</p>
            <p class="mt-1 text-2xl font-bold">{{ number_format((int) ($stats['monthly_reports'] ?? 0)) }}</p>
        </article>
        <article class="theme-surface-panel p-3">
            <p class="text-xs theme-inline-muted">{{ __('messages.public_top_device_type') }}</p>
            <p class="mt-1 text-base font-semibold">
                {{ data_get($stats, 'top_types.0.label', __('messages.no_data')) }}
            </p>
        </article>
    </div>

    <div class="grid grid-cols-1 xl:grid-cols-2 gap-3">
        <article class="theme-surface-panel p-3">
            <h3 class="text-sm font-semibold mb-2">{{ __('messages.public_most_repeated_types') }}</h3>
            @if (! empty($stats['top_types']))
                <ul class="space-y-1.5 text-sm">
                    @foreach ($stats['top_types'] as $item)
                        <li class="flex items-center justify-between gap-2">
                            <span>{{ $item['label'] }}</span>
                            <span class="theme-chip">{{ number_format((int) $item['count']) }}</span>
                        </li>
                    @endforeach
                </ul>
            @else
                <p class="text-sm theme-inline-muted">{{ __('messages.no_data') }}</p>
            @endif
        </article>

        <article class="theme-surface-panel p-3">
            <h3 class="text-sm font-semibold mb-2">{{ __('messages.public_most_repeated_names') }}</h3>
            @if (! empty($stats['top_names']))
                <ul class="space-y-1.5 text-sm">
                    @foreach ($stats['top_names'] as $item)
                        <li class="flex items-center justify-between gap-2">
                            <span class="truncate">{{ $item['name'] }}</span>
                            <span class="theme-chip">{{ number_format((int) $item['count']) }}</span>
                        </li>
                    @endforeach
                </ul>
            @else
                <p class="text-sm theme-inline-muted">{{ __('messages.no_data') }}</p>
            @endif
        </article>
    </div>
</section>