@php
    $metrics = $metrics ?? [];
    $comparison = $comparison ?? [];
    $periodLabel = $periodLabel ?? null;
@endphp

<section class="rounded-xl border border-slate-200 bg-slate-50/80 px-4 py-4">
    @if ($periodLabel)
        <p class="mb-3 text-xs text-slate-500">{{ $periodLabel }}</p>
    @endif

    @if (isset($page))
        <div class="mb-3 flex flex-wrap items-center gap-4 text-sm text-slate-600">
            <span><strong class="text-slate-900">{{ $page->fan_count !== null ? number_format($page->fan_count, 0, ',', ' ') : '-' }}</strong> fans</span>
            <span><strong class="text-slate-900">{{ $page->followers_count !== null ? number_format($page->followers_count, 0, ',', ' ') : '-' }}</strong> abonnes (total)</span>
            <span>Derniere sync : {{ $page->last_synced_at?->format('d/m/Y H:i') ?: '-' }}</span>
        </div>
    @endif

    <div class="grid gap-3 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
        @include('engagement-metrics.partials.metric-card', ['label' => 'Vues media', 'value' => $metrics['impressions'] ?? 0, 'change' => $comparison['impressions']['change'] ?? null, 'color' => 'violet'])
        @include('engagement-metrics.partials.metric-card', ['label' => 'Vues uniques', 'value' => $metrics['engaged_users'] ?? 0, 'change' => $comparison['engaged_users']['change'] ?? null, 'color' => 'rose'])
        @include('engagement-metrics.partials.metric-card', ['label' => 'Engagements publications', 'value' => $metrics['post_engagements'] ?? 0, 'change' => $comparison['post_engagements']['change'] ?? null, 'color' => 'sky'])
        @include('engagement-metrics.partials.metric-card', ['label' => "Taux d'engagement", 'value' => ($metrics['engagement_rate'] ?? 0).'%', 'change' => $comparison['engagement_rate']['change'] ?? null, 'color' => 'indigo'])
        @include('engagement-metrics.partials.metric-card', ['label' => 'Abonnes nets', 'value' => $metrics['net_followers'] ?? 0, 'change' => $comparison['net_followers']['change'] ?? null, 'color' => 'emerald'])
        @if (isset($postingStats))
            @include('engagement-metrics.partials.metric-card', ['label' => 'Publications / semaine', 'value' => $postingStats['posts_per_week'] ?? 0, 'change' => $postingStats['comparison']['change'] ?? null, 'color' => 'slate'])
        @endif
    </div>
</section>