@php
    $d            = $this->getData();
    $countries    = $d['countries'];
    $skills       = $d['skills'];
    $maxTotal     = $d['maxTotal'];
    $maxRevenue   = $d['maxRevenue'];
    $totalProposals  = $d['totalProposals'];
    $totalWon        = $d['totalWon'];
    $overallWinRate  = $d['overallWinRate'];
    $bestCountry     = $d['bestCountry'];
    $atRiskCount     = $d['atRiskCount'];

    $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">Proposal Stats</x-slot>
        <x-slot name="description">Country performance scorecards and skill demand analysis.</x-slot>

        <div x-data="{ tab: 'countries' }">

            {{-- Summary Bar --}}
            <div class="mb-5 flex flex-wrap items-center gap-3">
                <div class="flex items-center gap-2 rounded-lg bg-gray-50 border border-gray-200 px-4 py-2 text-sm">
                    <x-heroicon-s-document-text class="h-4 w-4 text-gray-500" />
                    <span class="text-gray-600">Total:</span>
                    <span class="font-semibold text-gray-900 tabular-nums">{{ number_format($totalProposals) }}</span>
                </div>
                <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-check-circle class="h-4 w-4 text-emerald-500" />
                    <span class="text-emerald-700">Won: <span class="font-semibold tabular-nums">{{ $totalWon }}</span></span>
                </div>
                <div @class([
                    'flex items-center gap-2 rounded-lg border px-4 py-2 text-sm',
                    'bg-emerald-50 border-emerald-200' => $overallWinRate >= 20,
                    'bg-amber-50 border-amber-200'     => $overallWinRate >= 10 && $overallWinRate < 20,
                    'bg-rose-50 border-rose-200'       => $overallWinRate < 10,
                ])>
                    <x-heroicon-s-chart-bar class="h-4 w-4 {{ $overallWinRate >= 20 ? 'text-emerald-500' : ($overallWinRate >= 10 ? 'text-amber-500' : 'text-rose-500') }}" />
                    <span class="{{ $overallWinRate >= 20 ? 'text-emerald-700' : ($overallWinRate >= 10 ? 'text-amber-700' : 'text-rose-700') }}">
                        Win rate: <span class="font-semibold tabular-nums">{{ $overallWinRate }}%</span>
                    </span>
                </div>
                @if ($bestCountry)
                    <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">Best market:</span>
                        <span class="text-emerald-700">{{ $bestCountry['name'] }} ({{ $bestCountry['winRate'] }}% win rate)</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 }} market{{ $atRiskCount > 1 ? 's' : '' }} need attention</span>
                    </div>
                @endif
            </div>

            {{-- Tabs --}}
            <div class="mb-5 flex gap-1 rounded-lg bg-gray-100 p-1 w-fit">
                <button
                    @click="tab = 'countries'"
                    :class="tab === 'countries' ? 'bg-white shadow text-gray-900' : 'text-gray-500 hover:text-gray-700'"
                    class="flex items-center gap-1.5 rounded-md px-4 py-1.5 text-sm font-medium transition-all"
                >
                    <x-heroicon-s-globe-alt class="h-4 w-4" />
                    Countries
                    <span class="ml-1 rounded-full bg-gray-200 px-1.5 py-0.5 text-xs tabular-nums">{{ count($countries) }}</span>
                </button>
                <button
                    @click="tab = 'skills'"
                    :class="tab === 'skills' ? 'bg-white shadow text-gray-900' : 'text-gray-500 hover:text-gray-700'"
                    class="flex items-center gap-1.5 rounded-md px-4 py-1.5 text-sm font-medium transition-all"
                >
                    <x-heroicon-s-tag class="h-4 w-4" />
                    Skills
                    <span class="ml-1 rounded-full bg-gray-200 px-1.5 py-0.5 text-xs tabular-nums">{{ count($skills) }}</span>
                </button>
            </div>

            {{-- Countries Tab --}}
            <div x-show="tab === 'countries'" x-transition>
                @if (count($countries) === 0)
                    <div class="flex flex-col items-center justify-center py-16 text-gray-400">
                        <x-heroicon-o-globe-alt class="h-12 w-12 mb-3 opacity-40" />
                        <p class="text-sm font-medium">No country data available</p>
                        <p class="text-xs mt-1">Add proposals with country information</p>
                    </div>
                @else
                    <div class="grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-3">
                        @foreach ($countries as $country)
                            @php
                                $tc = $tierConfig[$country['tier']];
                                $circumference = 2 * M_PI * 28;
                                $offset = $circumference - ($country['score'] / 100) * $circumference;
                                $metrics = [
                                    ['label' => 'Proposals',  'raw' => $country['total'],   'max' => $maxTotal,   'value' => number_format($country['total']),   'sub' => null],
                                    ['label' => 'Won',        'raw' => $country['won'],     'max' => $maxTotal,   'value' => number_format($country['won']),     'sub' => null],
                                    ['label' => 'Revenue',    'raw' => $country['revenue'], 'max' => $maxRevenue, 'value' => '$' . number_format($country['revenue']), 'sub' => null],
                                    ['label' => 'Avg Price',  'raw' => $country['avgPrice'],'max' => max(1, collect($countries)->max('avgPrice')), 'value' => '$' . number_format($country['avgPrice']), 'sub' => null],
                                ];
                                $barColor = match ($country['tier']) {
                                    'good'    => 'bg-emerald-400',
                                    'warning' => 'bg-amber-400',
                                    default   => 'bg-rose-400',
                                };
                            @endphp

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

                                {{-- Header --}}
                                <div class="flex items-start justify-between gap-2">
                                    <div>
                                        <p class="font-semibold text-gray-900 text-sm leading-tight">{{ $country['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="Score {{ $country['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">{{ $country['score'] }}</span>
                                            <span class="text-[10px] text-gray-500 leading-none mt-0.5">/ 100</span>
                                        </div>
                                    </div>
                                </div>

                                {{-- Win Rate Highlight --}}
                                <div @class([
                                    'rounded-lg px-3 py-2 flex items-center justify-between text-sm',
                                    'bg-emerald-100/60' => $country['winRate'] >= 20,
                                    'bg-amber-100/60'   => $country['winRate'] >= 10 && $country['winRate'] < 20,
                                    'bg-rose-100/60'    => $country['winRate'] < 10,
                                ])>
                                    <span class="text-xs font-medium text-gray-600">Win Rate</span>
                                    <span @class([
                                        'text-sm font-bold tabular-nums',
                                        'text-emerald-700' => $country['winRate'] >= 20,
                                        'text-amber-700'   => $country['winRate'] >= 10 && $country['winRate'] < 20,
                                        'text-rose-700'    => $country['winRate'] < 10,
                                    ])>{{ $country['winRate'] }}%</span>
                                </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; @endphp
                                        <div>
                                            <div class="flex items-center justify-between mb-1">
                                                <span class="text-xs text-gray-600 font-medium">{{ $m['label'] }}</span>
                                                <span class="text-xs font-semibold text-gray-800 tabular-nums">{{ $m['value'] }}</span>
                                            </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($country['insights']) > 0)
                                    <div class="border-t border-white/50 pt-3 space-y-1">
                                        @foreach ($country['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>Strong market performance</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 (≥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 (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 (&lt;40)</div>
                        <span class="ml-auto text-gray-400">Score = win rate (45%) + volume (30%) + avg price (25%)</span>
                    </div>
                @endif
            </div>

            {{-- Skills Tab --}}
            <div x-show="tab === 'skills'" x-transition>
                @if (count($skills) === 0)
                    <div class="flex flex-col items-center justify-center py-16 text-gray-400">
                        <x-heroicon-o-tag class="h-12 w-12 mb-3 opacity-40" />
                        <p class="text-sm font-medium">No skill data available</p>
                        <p class="text-xs mt-1">Tag proposals with skills to see analysis</p>
                    </div>
                @else
                    <div class="grid grid-cols-1 gap-2 sm:grid-cols-2">
                        @foreach ($skills as $i => $skill)
                            @php
                                $barColor = match ($skill['tier']) {
                                    'good'    => 'bg-emerald-400',
                                    'warning' => 'bg-amber-400',
                                    default   => 'bg-rose-400',
                                };
                                $winBadge = match ($skill['tier']) {
                                    'good'    => 'bg-emerald-100 text-emerald-700',
                                    'warning' => 'bg-amber-100 text-amber-700',
                                    default   => 'bg-rose-100 text-rose-700',
                                };
                            @endphp
                            <div class="rounded-lg border border-gray-100 bg-white px-4 py-3 hover:bg-gray-50 transition-colors">
                                <div class="flex items-center justify-between mb-2">
                                    <div class="flex items-center gap-2 min-w-0">
                                        <span class="text-xs font-medium text-gray-400 tabular-nums w-5 shrink-0">#{{ $i + 1 }}</span>
                                        <span class="text-sm font-semibold text-gray-800 truncate">{{ $skill['name'] }}</span>
                                    </div>
                                    <div class="flex items-center gap-2 shrink-0">
                                        <span class="text-xs text-gray-500 tabular-nums">{{ $skill['total'] }} proposals</span>
                                        <span class="rounded-full px-2 py-0.5 text-xs font-medium {{ $winBadge }} tabular-nums">
                                            {{ $skill['winRate'] }}% won
                                        </span>
                                    </div>
                                </div>
                                <div class="flex items-center gap-2">
                                    <div class="flex-1 h-2 rounded-full bg-gray-100 overflow-hidden">
                                        <div class="h-full rounded-full {{ $barColor }} transition-all duration-500" style="width: {{ $skill['pct'] }}%"></div>
                                    </div>
                                    <span class="text-xs text-gray-400 shrink-0 tabular-nums w-16 text-right">${{ number_format($skill['revenue']) }}</span>
                                </div>
                            </div>
                        @endforeach
                    </div>
                    <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> Win rate ≥ 20%</div>
                        <div class="flex items-center gap-1.5"><span class="h-2 w-2 rounded-full bg-amber-400 inline-block"></span> 10–19%</div>
                        <div class="flex items-center gap-1.5"><span class="h-2 w-2 rounded-full bg-rose-400 inline-block"></span> &lt; 10%</div>
                        <span class="ml-auto text-gray-400">Bar = demand relative to top skill. Revenue = total from won proposals.</span>
                    </div>
                @endif
            </div>

        </div>
    </x-filament::section>
</x-filament-widgets::widget>