@props([
    'objectiveKey',
    'objectiveData',
    'usesDailyMetrics' => false,
    'usdToTndRate' => 4,
])

@php
    $isConversion = $objectiveKey === 'conversion';
    $label = $isConversion ? 'Couverture' : 'Interaction';
    $resultLabel = $isConversion ? 'Couverture' : 'Interactions';
    $chartId = 'meta-post-report-chart-'.$objectiveKey;
    $adsWithMetrics = $objectiveData['ads_with_metrics'] ?? [];
    $groupedReportAds = collect($adsWithMetrics)->groupBy(fn ($row) => (string) $row['ad']->post_name);
    $postTotalsByName = collect($objectiveData['by_post'] ?? [])->keyBy('post_name');

    $spendColor = '#E83646';
    $spendStatClass = 'bg-rose-50 text-rose-700 ring-rose-200';

    $theme = $isConversion
        ? [
            'section' => 'border-emerald-200/80 bg-white',
            'accent' => 'bg-emerald-500',
            'badge' => 'bg-emerald-100 text-emerald-800',
            'header' => 'text-emerald-900',
            'pubHeader' => 'bg-emerald-50 text-emerald-900',
            'rowOdd' => 'bg-emerald-50/40',
            'subtotal' => 'bg-emerald-100/70 text-emerald-950',
            'sectionTotal' => 'bg-emerald-600 text-white',
            'chartColors' => [$spendColor, '#16a34a'],
            'statBg' => 'bg-emerald-50 text-emerald-800 ring-emerald-200',
        ]
        : [
            'section' => 'border-violet-200/80 bg-white',
            'accent' => 'bg-violet-500',
            'badge' => 'bg-violet-100 text-violet-800',
            'header' => 'text-violet-900',
            'pubHeader' => 'bg-violet-50 text-violet-900',
            'rowOdd' => 'bg-violet-50/40',
            'subtotal' => 'bg-violet-100/70 text-violet-950',
            'sectionTotal' => 'bg-violet-600 text-white',
            'chartColors' => [$spendColor, '#7c3aed'],
            'statBg' => 'bg-violet-50 text-violet-800 ring-violet-200',
        ];
@endphp

@if ($adsWithMetrics !== [])
<section class="overflow-hidden rounded-xl border shadow-sm {{ $theme['section'] }}">
    <div class="flex items-center gap-3 border-b border-slate-100 px-4 py-2.5">
        <div class="h-2 w-2 shrink-0 rounded-full {{ $theme['accent'] }}"></div>
        <h4 class="text-sm font-bold {{ $theme['header'] }}">{{ $label }}</h4>
        <span class="rounded-full px-2 py-0.5 text-[10px] font-semibold uppercase {{ $theme['badge'] }}">
            {{ count($adsWithMetrics) }} ad{{ count($adsWithMetrics) > 1 ? 's' : '' }}
        </span>
        <div class="ml-auto flex flex-wrap items-center gap-2 text-xs">
            <span class="rounded-md px-2 py-1 font-semibold ring-1 {{ $spendStatClass }}">
                Spend {{ number_format($objectiveData['totals']['spend'], 2, ',', ' ') }} $
                <span class="font-normal opacity-80">· {{ number_format($objectiveData['totals']['spend'] * $usdToTndRate, 2, ',', ' ') }} TND</span>
            </span>
            <span class="rounded-md px-2 py-1 font-semibold ring-1 {{ $theme['statBg'] }}">
                {{ $resultLabel }} {{ number_format($objectiveData['totals']['results'], 0, ',', ' ') }}
            </span>
        </div>
    </div>

    <div class="grid gap-3 p-3 lg:grid-cols-5">
        <div class="rounded-lg border border-slate-100 bg-slate-50/50 p-2 lg:col-span-2">
            <p class="mb-1 px-1 text-[10px] font-semibold uppercase tracking-wider text-slate-400">Graphique</p>
            <div id="{{ $chartId }}" class="h-[180px] w-full"></div>
        </div>

        <div class="overflow-hidden rounded-lg border border-slate-100 lg:col-span-3">
            <div class="max-h-[212px] overflow-auto">
                <table class="min-w-full text-xs">
                    <thead class="sticky top-0 z-10 bg-slate-50 shadow-sm">
                    <tr class="text-left text-[10px] font-semibold uppercase tracking-wider text-slate-500">
                        <th class="px-2.5 py-2">Publication / Ad</th>
                        <th class="hidden px-2.5 py-2 sm:table-cell">Campagne</th>
                        <th class="px-2.5 py-2 text-right">Spend</th>
                        <th class="px-2.5 py-2 text-right">{{ $resultLabel }}</th>
                    </tr>
                    </thead>
                    <tbody>
                    @foreach ($groupedReportAds as $postName => $postRows)
                        <tr class="{{ $theme['pubHeader'] }}">
                            <td class="px-2.5 py-1.5 font-semibold" colspan="4">{{ $postName }}</td>
                        </tr>
                        @foreach ($postRows as $index => $reportRow)
                            @php($reportAd = $reportRow['ad'])
                            @php($resultValue = $isConversion ? $reportRow['conversions'] : $reportRow['interactions'])
                            <tr class="{{ $index % 2 === 1 ? $theme['rowOdd'] : 'bg-white' }} border-b border-slate-50">
                                <td class="px-2.5 py-1.5">
                                    <p class="font-medium text-slate-800">{{ $reportAd->ad_name ?: 'Sans nom' }}</p>
                                </td>
                                <td class="hidden px-2.5 py-1.5 text-slate-500 sm:table-cell">{{ \Illuminate\Support\Str::limit($reportAd->campaign_name ?: '—', 28) }}</td>
                                <td class="px-2.5 py-1.5 text-right text-slate-700">
                                    @include('integrations.meta.partials.spend-amount', [
                                        'amount' => $reportRow['spend'],
                                        'usdToTndRate' => $usdToTndRate,
                                        'class' => 'inline-block text-right',
                                    ])
                                </td>
                                <td class="px-2.5 py-1.5 text-right font-semibold text-slate-900">{{ number_format($resultValue, 0, ',', ' ') }}</td>
                            </tr>
                        @endforeach
                        @php($postTotals = $postTotalsByName->get($postName))
                        @php($postResult = $isConversion ? (int) ($postTotals['conversions'] ?? 0) : (int) ($postTotals['interactions'] ?? 0))
                        <tr class="{{ $theme['subtotal'] }}">
                            <td class="px-2.5 py-1.5 font-semibold" colspan="2">Sous-total</td>
                            <td class="px-2.5 py-1.5 text-right font-bold">
                                @include('integrations.meta.partials.spend-amount', [
                                    'amount' => (float) ($postTotals['spend'] ?? 0),
                                    'usdToTndRate' => $usdToTndRate,
                                    'class' => 'inline-block text-right',
                                ])
                            </td>
                            <td class="px-2.5 py-1.5 text-right font-bold">{{ number_format($postResult, 0, ',', ' ') }}</td>
                        </tr>
                    @endforeach
                    </tbody>
                    <tfoot class="sticky bottom-0">
                    <tr class="{{ $theme['sectionTotal'] }} text-[11px]">
                        <td class="px-2.5 py-2 font-bold" colspan="2">Total {{ $label }}</td>
                        <td class="px-2.5 py-2 text-right font-bold">
                            @include('integrations.meta.partials.spend-amount', [
                                'amount' => $objectiveData['totals']['spend'],
                                'usdToTndRate' => $usdToTndRate,
                                'class' => 'inline-block text-right',
                                'tndClass' => 'text-white/80',
                            ])
                        </td>
                        <td class="px-2.5 py-2 text-right font-bold">{{ number_format($objectiveData['totals']['results'], 0, ',', ' ') }}</td>
                    </tr>
                    </tfoot>
                </table>
            </div>
        </div>
    </div>
</section>

<script>
    document.addEventListener('DOMContentLoaded', () => {
        const chartEl = document.getElementById(@js($chartId));
        if (!chartEl || !window.ApexCharts) {
            return;
        }

        const byPost = @json($objectiveData['by_post'] ?? []);
        const daily = @json($objectiveData['daily'] ?? []);
        const hasDaily = @json($usesDailyMetrics) && Array.isArray(daily) && daily.length > 0;
        const isConversion = @json($isConversion);
        const resultLabel = @json($resultLabel);
        const usdToTndRate = @json($usdToTndRate);
        const colors = @json($theme['chartColors']);

        const categories = hasDaily
            ? daily.map((row) => row.date)
            : byPost.map((row) => row.post_name);

        const spendSeries = hasDaily
            ? daily.map((row) => Number(row.spend || 0) * usdToTndRate)
            : byPost.map((row) => Number(row.spend || 0) * usdToTndRate);

        const resultSeries = hasDaily
            ? daily.map((row) => Number(row.results || 0))
            : byPost.map((row) => Number(isConversion ? row.conversions : row.interactions) || 0);

        new window.ApexCharts(chartEl, {
            chart: {
                type: 'bar',
                height: 180,
                toolbar: { show: false },
                fontFamily: 'inherit',
                sparkline: { enabled: false },
            },
            series: [
                { name: 'Spend (TND)', data: spendSeries },
                { name: resultLabel, data: resultSeries },
            ],
            plotOptions: {
                bar: {
                    horizontal: false,
                    columnWidth: '62%',
                    borderRadius: 3,
                },
            },
            stroke: { show: true, width: 2, colors: ['transparent'] },
            dataLabels: { enabled: false },
            xaxis: {
                categories,
                labels: {
                    rotate: hasDaily ? -25 : 0,
                    style: { fontSize: '9px', colors: '#94a3b8' },
                    trim: true,
                    maxHeight: 40,
                },
                axisBorder: { show: false },
                axisTicks: { show: false },
            },
            yaxis: [
                {
                    seriesName: 'Spend (TND)',
                    title: { text: 'TND', style: { fontSize: '9px', color: '#64748b' } },
                    labels: { style: { fontSize: '9px' }, formatter: (v) => Number(v).toFixed(0) },
                    axisBorder: { show: false },
                },
                {
                    seriesName: resultLabel,
                    opposite: true,
                    title: { text: resultLabel, style: { fontSize: '9px', color: '#64748b' } },
                    labels: { style: { fontSize: '9px' }, formatter: (v) => Number(v).toFixed(0) },
                    axisBorder: { show: false },
                },
            ],
            colors,
            legend: {
                position: 'top',
                horizontalAlign: 'left',
                fontSize: '10px',
                itemMargin: { horizontal: 8, vertical: 0 },
                offsetY: -4,
            },
            grid: {
                borderColor: '#f1f5f9',
                strokeDashArray: 3,
                padding: { top: 0, right: 8, bottom: 0, left: 8 },
            },
            tooltip: {
                shared: true,
                intersect: false,
                y: {
                    formatter(value, { seriesIndex, w }) {
                        const seriesName = w.globals.seriesNames[seriesIndex] ?? '';
                        if (seriesName === 'Spend (TND)') {
                            const usd = Number(value) / usdToTndRate;
                            return `${Number(value).toFixed(2)} TND (${usd.toFixed(2)} $)`;
                        }

                        return Number(value).toFixed(0);
                    },
                },
            },
        }).render();
    });
</script>
@endif