@php
    $postVolumeSeries = $postVolumeSeries ?? ['dates' => [], 'counts' => [], 'total' => 0];
    $hasDailyData = count($dailySeries['dates'] ?? $dailySeries['labels'] ?? []) > 0;
    $hasPostChartData = count($postChartData['labels'] ?? []) > 0;
    $hasPostVolumeData = count($postVolumeSeries['dates'] ?? []) > 0;
    $dailyFromPosts = (bool) ($dailySeries['from_posts'] ?? false);
@endphp

@if ($hasDailyData || $hasPostChartData || $hasPostVolumeData)
    <section class="grid gap-4 {{ ($hasDailyData || $hasPostVolumeData) && $hasPostChartData ? 'lg:grid-cols-2' : '' }}">
        @if ($hasDailyData || $hasPostVolumeData)
            <div class="rounded-2xl border border-rose-200 bg-white p-5 shadow-sm">
                @if ($hasDailyData)
                <div class="flex flex-wrap items-start justify-between gap-3">
                    <div>
                        <h3 class="text-lg font-semibold text-slate-900">Evolution</h3>
                        <p class="mt-1 text-xs text-slate-500" id="engagement-evolution-subtitle">
                            @if ($dailyFromPosts)
                                Interactions publications (Insights page indisponibles).
                            @else
                                Une metrique a la fois pour une lecture claire.
                            @endif
                        </p>
                    </div>
                    <p class="rounded-lg bg-slate-50 px-3 py-1.5 text-sm font-bold text-slate-900" id="engagement-evolution-total">—</p>
                </div>

                <div class="mt-4 flex flex-wrap gap-2">
                    <div class="inline-flex rounded-lg border border-slate-200 bg-slate-50 p-0.5" role="group" aria-label="Periode">
                        <button type="button" data-evolution-period="day"
                                class="engagement-period-btn rounded-md px-3 py-1.5 text-xs font-semibold text-slate-600 transition hover:text-slate-900">
                            Par jour
                        </button>
                        <button type="button" data-evolution-period="week"
                                class="engagement-period-btn rounded-md px-3 py-1.5 text-xs font-semibold text-slate-600 transition hover:text-slate-900">
                            Par semaine
                        </button>
                        <button type="button" data-evolution-period="month"
                                class="engagement-period-btn rounded-md px-3 py-1.5 text-xs font-semibold text-slate-600 transition hover:text-slate-900">
                            Par mois
                        </button>
                    </div>

                    @unless ($dailyFromPosts)
                        <div class="inline-flex flex-wrap rounded-lg border border-slate-200 bg-slate-50 p-0.5" role="group" aria-label="Metrique">
                            <button type="button" data-evolution-metric="impressions"
                                    class="engagement-metric-btn rounded-md px-3 py-1.5 text-xs font-semibold text-slate-600 transition hover:text-slate-900">
                                Vues media
                            </button>
                            <button type="button" data-evolution-metric="engaged_users"
                                    class="engagement-metric-btn rounded-md px-3 py-1.5 text-xs font-semibold text-slate-600 transition hover:text-slate-900">
                                Vues uniques
                            </button>
                            <button type="button" data-evolution-metric="post_engagements"
                                    class="engagement-metric-btn rounded-md px-3 py-1.5 text-xs font-semibold text-slate-600 transition hover:text-slate-900">
                                Engagements
                            </button>
                            <button type="button" data-evolution-metric="net_followers"
                                    class="engagement-metric-btn rounded-md px-3 py-1.5 text-xs font-semibold text-slate-600 transition hover:text-slate-900">
                                Abonnes nets
                            </button>
                        </div>
                    @endunless
                </div>

                <div id="engagement-daily-chart" class="mt-4 w-full overflow-hidden"></div>
                @endif

                @if ($hasPostVolumeData)
                    <div class="{{ $hasDailyData ? 'mt-6 border-t border-slate-100 pt-5' : '' }}">
                        <div class="flex flex-wrap items-start justify-between gap-3">
                            <div>
                                <h3 class="text-lg font-semibold text-slate-900">Publications publiees</h3>
                                <p class="mt-1 text-xs text-slate-500" id="engagement-post-volume-subtitle">Nombre de posts sur la periode</p>
                            </div>
                            <p class="rounded-lg bg-slate-50 px-3 py-1.5 text-sm font-bold text-slate-900" id="engagement-post-volume-total">—</p>
                        </div>

                        @unless ($hasDailyData)
                            <div class="mt-4 inline-flex rounded-lg border border-slate-200 bg-slate-50 p-0.5" role="group" aria-label="Periode">
                                <button type="button" data-evolution-period="day"
                                        class="engagement-period-btn rounded-md px-3 py-1.5 text-xs font-semibold text-slate-600 transition hover:text-slate-900">
                                    Par jour
                                </button>
                                <button type="button" data-evolution-period="week"
                                        class="engagement-period-btn rounded-md px-3 py-1.5 text-xs font-semibold text-slate-600 transition hover:text-slate-900">
                                    Par semaine
                                </button>
                                <button type="button" data-evolution-period="month"
                                        class="engagement-period-btn rounded-md px-3 py-1.5 text-xs font-semibold text-slate-600 transition hover:text-slate-900">
                                    Par mois
                                </button>
                            </div>
                        @endunless

                        <div id="engagement-post-volume-chart" class="mt-4 w-full overflow-hidden"></div>
                    </div>
                @endif
            </div>
        @endif

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

                <div class="mt-3 flex flex-wrap gap-4 text-xs text-slate-600">
                    <span class="inline-flex items-center gap-1.5"><span class="h-2.5 w-2.5 rounded-sm bg-[#E83646]"></span> Reactions</span>
                    <span class="inline-flex items-center gap-1.5"><span class="h-2.5 w-2.5 rounded-sm bg-[#7c3aed]"></span> Commentaires</span>
                    <span class="inline-flex items-center gap-1.5"><span class="h-2.5 w-2.5 rounded-sm bg-[#0ea5e9]"></span> Partages</span>
                </div>

                <div id="engagement-posts-chart" class="mt-3 w-full" style="min-height: 220px;"></div>

                <div class="mt-4 space-y-2 border-t border-slate-100 pt-4">
                    @foreach ($postChartData['labels'] as $index => $label)
                        @php
                            $reactions = (int) ($postChartData['reactions'][$index] ?? 0);
                            $comments = (int) ($postChartData['comments'][$index] ?? 0);
                            $shares = (int) ($postChartData['shares'][$index] ?? 0);
                            $total = (int) ($postChartData['total_engagement'][$index] ?? ($reactions + $comments + $shares));
                        @endphp
                        <div class="flex flex-wrap items-center justify-between gap-2 rounded-lg bg-slate-50 px-3 py-2 text-sm">
                            <div class="min-w-0 flex-1">
                                <p class="truncate font-medium text-slate-900">
                                    <span class="mr-1 text-xs font-bold text-[#E83646]">#{{ $index + 1 }}</span>
                                    {{ $label }}
                                </p>
                                <p class="mt-0.5 flex flex-wrap gap-3 text-xs text-slate-600">
                                    <span><strong class="text-[#E83646]">{{ number_format($reactions, 0, ',', ' ') }}</strong> reactions</span>
                                    <span><strong class="text-violet-700">{{ number_format($comments, 0, ',', ' ') }}</strong> commentaires</span>
                                    <span><strong class="text-sky-600">{{ number_format($shares, 0, ',', ' ') }}</strong> partages</span>
                                </p>
                            </div>
                            <p class="shrink-0 text-right">
                                <span class="block text-[10px] uppercase tracking-wide text-slate-400">Total</span>
                                <span class="text-lg font-bold text-slate-900">{{ number_format($total, 0, ',', ' ') }}</span>
                            </p>
                        </div>
                    @endforeach
                </div>
            </div>
        @endif
    </section>

    <script>
        document.addEventListener('DOMContentLoaded', () => {
            if (typeof ApexCharts === 'undefined') {
                return;
            }

            const numberFormatter = new Intl.NumberFormat('fr-FR');

            @if ($hasDailyData || $hasPostVolumeData)
            if (typeof window.initEngagementEvolutionChart === 'function') {
                window.initEngagementEvolutionChart({
                    chartEl: document.querySelector('#engagement-daily-chart'),
                    totalEl: document.querySelector('#engagement-evolution-total'),
                    subtitleEl: document.querySelector('#engagement-evolution-subtitle'),
                    rawSeries: @json($dailySeries),
                    dailyFromPosts: @json($dailyFromPosts),
                    postVolumeSeries: @json($postVolumeSeries ?? ['dates' => [], 'counts' => [], 'total' => 0]),
                    postVolumeChartEl: document.querySelector('#engagement-post-volume-chart'),
                    postVolumeTotalEl: document.querySelector('#engagement-post-volume-total'),
                    postVolumeSubtitleEl: document.querySelector('#engagement-post-volume-subtitle'),
                    periodButtons: Array.from(document.querySelectorAll('.engagement-period-btn')),
                    metricButtons: Array.from(document.querySelectorAll('.engagement-metric-btn')),
                });
            }
            @endif

            @if ($hasPostChartData)
            (() => {
                const postData = @json($postChartData);
                const chartEl = document.querySelector('#engagement-posts-chart');
                const postCount = postData.labels.length;
                const chartHeight = Math.max(220, postCount * 52);

                new ApexCharts(chartEl, {
                    chart: {
                        type: 'bar',
                        height: chartHeight,
                        stacked: true,
                        toolbar: { show: false },
                        fontFamily: 'inherit',
                    },
                    series: [
                        { name: 'Reactions', data: postData.reactions },
                        { name: 'Commentaires', data: postData.comments },
                        { name: 'Partages', data: postData.shares },
                    ],
                    colors: ['#E83646', '#7c3aed', '#0ea5e9'],
                    plotOptions: {
                        bar: {
                            horizontal: true,
                            barHeight: '68%',
                            borderRadius: 4,
                            dataLabels: {
                                total: {
                                    enabled: true,
                                    offsetX: 8,
                                    style: {
                                        fontSize: '13px',
                                        fontWeight: 700,
                                        color: '#0f172a',
                                    },
                                    formatter: (value, opts) => {
                                        const total = postData.total_engagement?.[opts.dataPointIndex] ?? value;
                                        return numberFormatter.format(total);
                                    },
                                },
                            },
                        },
                    },
                    dataLabels: {
                        enabled: true,
                        formatter: (value) => (value >= 8 ? numberFormatter.format(value) : ''),
                        style: {
                            fontSize: '10px',
                            fontWeight: 600,
                            colors: ['#fff'],
                        },
                        dropShadow: { enabled: false },
                    },
                    xaxis: {
                        categories: postData.labels.map((label, index) => '#' + (index + 1)),
                        labels: { show: false },
                        axisBorder: { show: false },
                        axisTicks: { show: false },
                    },
                    yaxis: {
                        labels: {
                            style: { fontSize: '11px', colors: '#64748b', fontWeight: 600 },
                            maxWidth: 40,
                        },
                    },
                    legend: { show: false },
                    grid: {
                        borderColor: '#f1f5f9',
                        strokeDashArray: 3,
                        padding: { right: 48 },
                    },
                    tooltip: {
                        shared: true,
                        intersect: false,
                        custom: function({ series, dataPointIndex }) {
                            const label = postData.labels[dataPointIndex] || '';
                            const reactions = series[0][dataPointIndex] || 0;
                            const comments = series[1][dataPointIndex] || 0;
                            const shares = series[2][dataPointIndex] || 0;
                            const total = reactions + comments + shares;

                            return '<div class="px-3 py-2 text-xs">'
                                + '<p class="mb-2 max-w-[220px] font-semibold text-slate-900">' + label + '</p>'
                                + '<p><span class="text-[#E83646]">●</span> Reactions : <strong>' + numberFormatter.format(reactions) + '</strong></p>'
                                + '<p><span class="text-violet-600">●</span> Commentaires : <strong>' + numberFormatter.format(comments) + '</strong></p>'
                                + '<p><span class="text-sky-600">●</span> Partages : <strong>' + numberFormatter.format(shares) + '</strong></p>'
                                + '<p class="mt-1 border-t border-slate-200 pt-1 font-bold">Total : ' + numberFormatter.format(total) + '</p>'
                                + '</div>';
                        },
                    },
                }).render();
            })();
            @endif
        });
    </script>
@endif