@php
    $d = $this->getData();
    $cards        = $d['cards'];
    $maxImp       = $d['maxImp'];
    $maxViews     = $d['maxViews'];
    $maxClicks    = $d['maxClicks'];
    $maxBadge     = $d['maxBadge'];
    $maxBoost     = $d['maxBoost'];
    $best         = $d['best'];
    $atRiskCount  = $d['atRiskCount'];
    $warningCount = $d['warningCount'];

    $tierConfig = [
        'good'    => ['bg' => 'bg-emerald-50', 'border' => 'border-emerald-200', 'badge' => 'bg-emerald-100 text-emerald-700', 'ring' => '#10b981', 'track' => '#d1fae5', 'label' => 'Good'],
        'warning' => ['bg' => 'bg-amber-50',   'border' => 'border-amber-200',   'badge' => 'bg-amber-100 text-amber-700',   'ring' => '#f59e0b', 'track' => '#fef3c7', 'label' => 'Review'],
        'danger'  => ['bg' => 'bg-rose-50',    'border' => 'border-rose-200',    'badge' => 'bg-rose-100 text-rose-700',    'ring' => '#f43f5e', 'track' => '#ffe4e6', 'label' => 'Needs Attention'],
    ];
@endphp

<x-filament-widgets::widget>
    <x-filament::section>
        <x-slot name="heading">Marketing Performance by Platform</x-slot>
        <x-slot name="description">Health scores and per-metric breakdown. CTR and view rate drive the score.</x-slot>

        {{-- Summary Banner --}}
        @if (count($cards) > 0)
            <div class="mb-6 flex flex-wrap gap-3">
                @if ($best)
                    <div class="flex items-center gap-2 rounded-lg bg-emerald-50 border border-emerald-200 px-4 py-2 text-sm">
                        <x-heroicon-s-trophy class="h-4 w-4 text-emerald-600" />
                        <span class="text-emerald-800 font-medium">Top performer:</span>
                        <span class="text-emerald-700">{{ $best['name'] }} — score {{ $best['score'] }}</span>
                    </div>
                @endif
                @if ($atRiskCount > 0)
                    <div class="flex items-center gap-2 rounded-lg bg-rose-50 border border-rose-200 px-4 py-2 text-sm">
                        <x-heroicon-s-exclamation-circle class="h-4 w-4 text-rose-500" />
                        <span class="text-rose-700 font-medium">{{ $atRiskCount }} platform{{ $atRiskCount > 1 ? 's' : '' }} need attention</span>
                    </div>
                @endif
                @if ($warningCount > 0)
                    <div class="flex items-center gap-2 rounded-lg bg-amber-50 border border-amber-200 px-4 py-2 text-sm">
                        <x-heroicon-s-exclamation-triangle class="h-4 w-4 text-amber-500" />
                        <span class="text-amber-700 font-medium">{{ $warningCount }} under review</span>
                    </div>
                @endif
            </div>
        @endif

        {{-- Platform Cards Grid --}}
        @if (count($cards) === 0)
            <div class="flex flex-col items-center justify-center py-16 text-gray-400">
                <x-heroicon-o-chart-bar class="h-12 w-12 mb-3 opacity-40" />
                <p class="text-sm font-medium">No platform data for this period</p>
                <p class="text-xs mt-1">Add platforms or adjust the date range filter</p>
            </div>
        @else
            <div class="grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-3">
                @foreach ($cards as $card)
                    @php
                        $tc  = $tierConfig[$card['tier']];
                        $circumference = 2 * M_PI * 28; // r=28
                        $offset = $circumference - ($card['score'] / 100) * $circumference;
                        $metrics = [
                            ['label' => 'Impressions',    'value' => number_format($card['impressions']),  'raw' => $card['impressions'],  'max' => $maxImp,    'sub' => null],
                            ['label' => 'Profile Views',  'value' => number_format($card['profileViews']), 'raw' => $card['profileViews'], 'max' => $maxViews,  'sub' => $card['viewRate'] . '% view rate'],
                            ['label' => 'Clicks',         'value' => number_format($card['clicks']),       'raw' => $card['clicks'],       'max' => $maxClicks, 'sub' => 'CTR ' . $card['ctr'] . '%'],
                            ['label' => 'Badge Connect',  'value' => number_format($card['badgeConnect']), 'raw' => $card['badgeConnect'], 'max' => $maxBadge,  'sub' => null],
                            ['label' => 'Boost Profile',  'value' => number_format($card['boostProfile']), 'raw' => $card['boostProfile'], 'max' => $maxBoost,  'sub' => null],
                        ];
                    @endphp

                    <div class="rounded-xl border {{ $tc['border'] }} {{ $tc['bg'] }} p-4 flex flex-col gap-4 transition-shadow hover:shadow-md">

                        {{-- Card Header --}}
                        <div class="flex items-start justify-between gap-2">
                            <div>
                                <p class="font-semibold text-gray-900 text-sm leading-tight">{{ $card['name'] }}</p>
                                <span class="mt-1 inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium {{ $tc['badge'] }}">
                                    {{ $tc['label'] }}
                                </span>
                            </div>

                            {{-- Score Ring --}}
                            <div class="relative shrink-0" title="Health score {{ $card['score'] }}/100">
                                <svg width="72" height="72" viewBox="0 0 72 72" class="-rotate-90">
                                    <circle cx="36" cy="36" r="28" fill="none" stroke="{{ $tc['track'] }}" stroke-width="7"/>
                                    <circle
                                        cx="36" cy="36" r="28"
                                        fill="none"
                                        stroke="{{ $tc['ring'] }}"
                                        stroke-width="7"
                                        stroke-linecap="round"
                                        stroke-dasharray="{{ $circumference }}"
                                        stroke-dashoffset="{{ $offset }}"
                                    />
                                </svg>
                                <div class="absolute inset-0 flex flex-col items-center justify-center">
                                    <span class="text-base font-bold text-gray-800 leading-none">{{ $card['score'] }}</span>
                                    <span class="text-[10px] text-gray-500 leading-none mt-0.5">/ 100</span>
                                </div>
                            </div>
                        </div>

                        {{-- Metrics --}}
                        <div class="space-y-2.5">
                            @foreach ($metrics as $m)
                                @php
                                    $pct = $m['max'] > 0 ? min(100, round($m['raw'] / $m['max'] * 100)) : 0;
                                    // highlight CTR metric
                                    $isCtr = $m['label'] === 'Clicks';
                                    $barColor = match ($card['tier']) {
                                        'good'    => 'bg-emerald-400',
                                        'warning' => 'bg-amber-400',
                                        default   => 'bg-rose-400',
                                    };
                                @endphp
                                <div>
                                    <div class="flex items-center justify-between mb-1">
                                        <span class="text-xs text-gray-600 font-medium">{{ $m['label'] }}</span>
                                        <div class="flex items-center gap-1.5">
                                            <span class="text-xs font-semibold text-gray-800 tabular-nums">{{ $m['value'] }}</span>
                                            @if ($m['sub'])
                                                <span @class([
                                                    'text-[10px] rounded px-1 py-0.5 font-medium tabular-nums',
                                                    'bg-rose-100 text-rose-600'   => $isCtr && $card['ctr'] < 1,
                                                    'bg-amber-100 text-amber-600' => $isCtr && $card['ctr'] >= 1 && $card['ctr'] < 3,
                                                    'bg-emerald-100 text-emerald-600' => $isCtr && $card['ctr'] >= 3,
                                                    'bg-gray-100 text-gray-500'   => !$isCtr,
                                                ])>{{ $m['sub'] }}</span>
                                            @endif
                                        </div>
                                    </div>
                                    <div class="h-1.5 w-full rounded-full bg-white/70 overflow-hidden">
                                        <div class="h-full rounded-full {{ $barColor }} transition-all duration-500"
                                             style="width: {{ $pct }}%"></div>
                                    </div>
                                </div>
                            @endforeach
                        </div>

                        {{-- Insights --}}
                        @if (count($card['insights']) > 0)
                            <div class="border-t border-white/50 pt-3 space-y-1">
                                @foreach ($card['insights'] as $insight)
                                    <div class="flex items-start gap-1.5 text-xs text-gray-600">
                                        <x-heroicon-s-light-bulb class="mt-0.5 h-3.5 w-3.5 shrink-0 text-amber-500" />
                                        <span>{{ $insight }}</span>
                                    </div>
                                @endforeach
                            </div>
                        @else
                            <div class="border-t border-white/50 pt-3 flex items-center gap-1.5 text-xs text-emerald-600">
                                <x-heroicon-s-check-circle class="h-3.5 w-3.5 shrink-0" />
                                <span>All metrics look healthy</span>
                            </div>
                        @endif
                    </div>
                @endforeach
            </div>

            {{-- Legend --}}
            <div class="mt-4 flex flex-wrap gap-4 text-xs text-gray-500">
                <div class="flex items-center gap-1.5">
                    <span class="h-2 w-2 rounded-full bg-emerald-400 inline-block"></span> Good (score ≥ 70)
                </div>
                <div class="flex items-center gap-1.5">
                    <span class="h-2 w-2 rounded-full bg-amber-400 inline-block"></span> Review (score 40–69)
                </div>
                <div class="flex items-center gap-1.5">
                    <span class="h-2 w-2 rounded-full bg-rose-400 inline-block"></span> Needs Attention (score &lt; 40)
                </div>
                <div class="flex items-center gap-1.5 ml-auto">
                    <span class="text-gray-400">Progress bars = relative to best performer. CTR badge = clicks ÷ impressions.</span>
                </div>
            </div>
        @endif
    </x-filament::section>
</x-filament-widgets::widget>