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

@php
    $isConversion = $objectiveKey === 'conversion';
    $label = $isConversion ? 'Couverture' : 'Interaction';
    $resultLabel = $isConversion ? 'Couverture' : 'Interactions';
    $adsWithMetrics = $objectiveData['ads_with_metrics'] ?? [];
    $groupedReportAds = collect($adsWithMetrics)->groupBy(fn ($row) => (string) $row['ad']->post_name);
    $postTotalsByName = collect($objectiveData['by_post'] ?? [])->keyBy('post_name');
    $headerBg = $isConversion ? '#ecfdf5' : '#f5f3ff';
    $headerColor = $isConversion ? '#065f46' : '#5b21b6';
    $pubBg = $isConversion ? '#d1fae5' : '#ede9fe';
    $subtotalBg = $isConversion ? '#a7f3d0' : '#ddd6fe';
    $totalBg = $isConversion ? '#059669' : '#7c3aed';
    $rowAltBg = $isConversion ? '#f0fdf4' : '#f5f3ff';
    $barSpendColor = '#E83646';
    $barResultColor = $isConversion ? '#16a34a' : '#7c3aed';

    if ($usesDailyMetrics && ($objectiveData['daily'] ?? []) !== []) {
        $chartRows = collect($objectiveData['daily'])->map(fn (array $row) => [
            'label' => (string) $row['date'],
            'spend' => (float) $row['spend'],
            'results' => (int) $row['results'],
        ]);
    } else {
        $chartRows = collect($objectiveData['by_post'] ?? [])->map(fn (array $row) => [
            'label' => (string) $row['post_name'],
            'spend' => (float) $row['spend'],
            'results' => $isConversion ? (int) $row['conversions'] : (int) $row['interactions'],
        ]);
    }

    $maxSpend = max($chartRows->pluck('spend')->all() ?: [1]);
    $maxResults = max($chartRows->pluck('results')->all() ?: [1]);
    if ($maxSpend <= 0) {
        $maxSpend = 1;
    }
    if ($maxResults <= 0) {
        $maxResults = 1;
    }
@endphp

@if ($adsWithMetrics !== [])
    <div style="margin-top: 14px; border: 1px solid #e2e8f0; border-radius: 8px; overflow: hidden; page-break-inside: avoid;">
        <div style="padding: 8px 12px; background: {{ $headerBg }}; border-bottom: 1px solid #e2e8f0;">
            <table width="100%" cellpadding="0" cellspacing="0">
                <tr>
                    <td style="font-size: 12px; font-weight: bold; color: {{ $headerColor }};">{{ $label }}</td>
                    <td style="text-align: right; font-size: 10px; color: #475569;">
                        {{ count($adsWithMetrics) }} ad{{ count($adsWithMetrics) > 1 ? 's' : '' }}
                        &nbsp;·&nbsp;
                        Spend <strong>{{ number_format($objectiveData['totals']['spend'], 2, ',', ' ') }} $</strong>
                        <span style="color: #64748b;">({{ number_format($objectiveData['totals']['spend'] * $usdToTndRate, 2, ',', ' ') }} TND)</span>
                        &nbsp;·&nbsp;
                        {{ $resultLabel }} <strong>{{ number_format($objectiveData['totals']['results'], 0, ',', ' ') }}</strong>
                    </td>
                </tr>
            </table>
        </div>

        <table width="100%" cellpadding="0" cellspacing="0" style="background: #fff;">
            <tr>
                <td width="38%" valign="top" style="padding: 8px; border-right: 1px solid #f1f5f9; background: #f8fafc;">
                    <div style="font-size: 9px; text-transform: uppercase; color: #94a3b8; margin-bottom: 6px;">Graphique</div>
                    @if ($chartRows->isNotEmpty())
                        <table width="100%" cellpadding="0" cellspacing="0" style="font-size: 9px;">
                            <tr>
                                <td colspan="3" style="padding-bottom: 4px; color: #64748b;">
                                    <span style="display:inline-block;width:8px;height:8px;background:{{ $barSpendColor }};margin-right:4px;"></span>Spend (TND)
                                    <span style="display:inline-block;width:8px;height:8px;background:{{ $barResultColor }};margin-left:8px;margin-right:4px;"></span>{{ $resultLabel }}
                                </td>
                            </tr>
                            @foreach ($chartRows as $chartRow)
                                @php
                                    $spendWidth = max(4, (int) round(($chartRow['spend'] / $maxSpend) * 100));
                                    $resultWidth = max(4, (int) round(($chartRow['results'] / $maxResults) * 100));
                                @endphp
                                <tr>
                                    <td style="padding: 3px 4px 3px 0; width: 28%; color: #475569; vertical-align: middle;">
                                        {{ \Illuminate\Support\Str::limit($chartRow['label'], 14) }}
                                    </td>
                                    <td style="padding: 3px 0; width: 46%; vertical-align: middle;">
                                        <table width="100%" cellpadding="0" cellspacing="0">
                                            <tr>
                                                <td width="48%" style="padding-right: 2px; vertical-align: middle;">
                                                    <table width="100%" cellpadding="0" cellspacing="0">
                                                        <tr>
                                                            <td style="width: {{ $spendWidth }}%; background: {{ $barSpendColor }}; height: 10px; font-size: 1px;">&nbsp;</td>
                                                            <td style="background: #e2e8f0; height: 10px; font-size: 1px;">&nbsp;</td>
                                                        </tr>
                                                    </table>
                                                </td>
                                                <td width="48%" style="padding-left: 2px; vertical-align: middle;">
                                                    <table width="100%" cellpadding="0" cellspacing="0">
                                                        <tr>
                                                            <td style="width: {{ $resultWidth }}%; background: {{ $barResultColor }}; height: 10px; font-size: 1px;">&nbsp;</td>
                                                            <td style="background: #e2e8f0; height: 10px; font-size: 1px;">&nbsp;</td>
                                                        </tr>
                                                    </table>
                                                </td>
                                            </tr>
                                        </table>
                                    </td>
                                    <td style="padding: 3px 0 3px 4px; width: 26%; text-align: right; color: #334155; vertical-align: middle;">
                                        <span style="color: {{ $barSpendColor }};">{{ number_format($chartRow['spend'] * $usdToTndRate, 0, ',', ' ') }} TND</span><br>
                                    <span style="font-size: 8px; color: #94a3b8;">{{ number_format($chartRow['spend'], 0, ',', ' ') }} $</span><br>
                                        <span style="color: {{ $barResultColor }};">{{ number_format($chartRow['results'], 0, ',', ' ') }}</span>
                                    </td>
                                </tr>
                            @endforeach
                        </table>
                    @else
                        <div style="font-size: 10px; color: #94a3b8; padding: 20px 8px; text-align: center;">Aucune donnee</div>
                    @endif
                </td>
                <td width="62%" valign="top" style="padding: 0;">
                    <table width="100%" cellpadding="0" cellspacing="0" style="border-collapse: collapse; font-size: 10px;">
                        <thead>
                        <tr style="background: #f8fafc;">
                            <th style="padding: 6px 8px; text-align: left; color: #64748b; font-size: 9px; text-transform: uppercase;">Publication / Ad</th>
                            <th style="padding: 6px 8px; text-align: left; color: #64748b; font-size: 9px; text-transform: uppercase;">Campagne</th>
                            <th style="padding: 6px 8px; text-align: right; color: #64748b; font-size: 9px; text-transform: uppercase;">Spend</th>
                            <th style="padding: 6px 8px; text-align: right; color: #64748b; font-size: 9px; text-transform: uppercase;">{{ $resultLabel }}</th>
                        </tr>
                        </thead>
                        <tbody>
                        @foreach ($groupedReportAds as $postName => $postRows)
                            <tr>
                                <td colspan="4" style="padding: 5px 8px; background: {{ $pubBg }}; font-weight: bold; color: {{ $headerColor }};">{{ $postName }}</td>
                            </tr>
                            @foreach ($postRows as $index => $reportRow)
                                @php($reportAd = $reportRow['ad'])
                                @php($resultValue = $isConversion ? $reportRow['conversions'] : $reportRow['interactions'])
                                <tr style="background: {{ $index % 2 === 1 ? $rowAltBg : '#ffffff' }};">
                                    <td style="padding: 5px 8px; border-bottom: 1px solid #f1f5f9;">
                                        <strong>{{ $reportAd->ad_name ?: 'Sans nom' }}</strong>
                                    </td>
                                    <td style="padding: 5px 8px; border-bottom: 1px solid #f1f5f9; color: #64748b;">
                                        {{ \Illuminate\Support\Str::limit($reportAd->campaign_name ?: '—', 32) }}
                                    </td>
                                    <td style="padding: 5px 8px; border-bottom: 1px solid #f1f5f9; text-align: right;">
                                        @include('integrations.meta.partials.spend-amount-pdf', [
                                            'amount' => $reportRow['spend'],
                                            'usdToTndRate' => $usdToTndRate,
                                        ])
                                    </td>
                                    <td style="padding: 5px 8px; border-bottom: 1px solid #f1f5f9; text-align: right; font-weight: bold;">
                                        {{ number_format($resultValue, 0, ',', ' ') }}
                                    </td>
                                </tr>
                            @endforeach
                            @php($postTotals = $postTotalsByName->get($postName))
                            @php($postResult = $isConversion ? (int) ($postTotals['conversions'] ?? 0) : (int) ($postTotals['interactions'] ?? 0))
                            <tr>
                                <td colspan="2" style="padding: 5px 8px; background: {{ $subtotalBg }}; font-weight: bold;">Sous-total</td>
                                <td style="padding: 5px 8px; background: {{ $subtotalBg }}; text-align: right; font-weight: bold;">
                                    @include('integrations.meta.partials.spend-amount-pdf', [
                                        'amount' => (float) ($postTotals['spend'] ?? 0),
                                        'usdToTndRate' => $usdToTndRate,
                                    ])
                                </td>
                                <td style="padding: 5px 8px; background: {{ $subtotalBg }}; text-align: right; font-weight: bold;">
                                    {{ number_format($postResult, 0, ',', ' ') }}
                                </td>
                            </tr>
                        @endforeach
                        </tbody>
                        <tfoot>
                        <tr>
                            <td colspan="2" style="padding: 6px 8px; background: {{ $totalBg }}; color: #fff; font-weight: bold;">Total {{ $label }}</td>
                            <td style="padding: 6px 8px; background: {{ $totalBg }}; color: #fff; text-align: right; font-weight: bold;">
                                @include('integrations.meta.partials.spend-amount-pdf', [
                                    'amount' => $objectiveData['totals']['spend'],
                                    'usdToTndRate' => $usdToTndRate,
                                    'mutedColor' => 'rgba(255,255,255,0.8)',
                                    'textColor' => '#ffffff',
                                ])
                            </td>
                            <td style="padding: 6px 8px; background: {{ $totalBg }}; color: #fff; text-align: right; font-weight: bold;">
                                {{ number_format($objectiveData['totals']['results'], 0, ',', ' ') }}
                            </td>
                        </tr>
                        </tfoot>
                    </table>
                </td>
            </tr>
        </table>
    </div>
@endif