@php
    $topPosts = $topPosts ?? [];
    $maxEngagement = collect($topPosts)->max('total_engagement') ?: 1;
@endphp

@if (count($topPosts) > 0)
    <section class="rounded-2xl border border-rose-200 bg-white p-5 shadow-sm">
        <div>
            <h3 class="text-lg font-semibold text-slate-900">Top publications</h3>
            <p class="mt-1 text-xs text-slate-500">Classees par vues et interactions sur la periode.</p>
        </div>

        <div class="mt-4 space-y-3">
            @foreach ($topPosts as $index => $row)
                @php
                    $post = $row['post'];
                    $pct = min(100, round(($row['total_engagement'] / $maxEngagement) * 100));
                @endphp
                <div class="rounded-xl border border-slate-100 bg-slate-50/50 p-3">
                    <div class="flex flex-wrap items-start justify-between gap-2">
                        <div class="min-w-0 flex-1">
                            <p class="text-xs font-semibold text-slate-400">#{{ $index + 1 }}</p>
                            <p class="mt-0.5 truncate text-sm font-medium text-slate-900">{{ $post->excerpt(80) }}</p>
                            <p class="mt-1 text-xs text-slate-500">{{ $post->published_at?->format('d/m/Y H:i') ?: '-' }}</p>
                        </div>
                        <div class="text-right text-xs text-slate-600">
                            <p><strong class="text-slate-900">{{ number_format($row['media_views'], 0, ',', ' ') }}</strong> vues</p>
                            <p class="mt-0.5">{{ number_format($row['total_engagement'], 0, ',', ' ') }} interactions</p>
                            <p class="mt-0.5">{{ number_format($row['engagement_rate'], 1, ',', ' ') }} % engagement</p>
                        </div>
                    </div>
                    <div class="mt-2 h-1.5 overflow-hidden rounded-full bg-slate-200">
                        <div class="h-full rounded-full bg-[#E83646]" style="width: {{ $pct }}%"></div>
                    </div>
                    @if ($post->permalink_url)
                        <a href="{{ $post->permalink_url }}" target="_blank" rel="noopener"
                           class="mt-2 inline-flex text-xs font-semibold text-[#E83646] hover:underline">
                            Voir sur Facebook
                        </a>
                    @endif
                </div>
            @endforeach
        </div>
    </section>
@endif