@extends('admin.layout')
@section('title', __('Page analytics'))

@section('content')

@php
    $fmt  = fn($n) => number_format((float) $n, 0, ',', '.');
    $pct  = fn($a, $b) => $b > 0 ? round($a / $b * 100) : 0;
    $dur  = function($sec) {
        $sec = (int) round($sec);
        if ($sec < 60) return $sec . 's';
        if ($sec < 3600) return floor($sec/60) . 'm ' . ($sec%60) . 's';
        return floor($sec/3600) . 'u ' . floor(($sec%3600)/60) . 'm';
    };

    $periods = [
        '24h'   => __('Last 24 hours'),
        'week'  => __('Last week'),
        'month' => __('Last month'),
        'year'  => __('Last year'),
    ];

    $typeColors = [
        'guest'   => '#6b7280',
        'free'    => '#3b82f6',
        'premium' => '#f59e0b',
        'pro'     => '#8b5cf6',
    ];
    $typeLabels = [
        'guest'   => __('Guest'),
        'free'    => __('Free'),
        'premium' => __('Premium'),
        'pro'     => 'PRO',
    ];

    $sourceLabels = [
        'direct'   => __('Direct'),
        'organic'  => __('Organic search'),
        'social'   => __('Social media'),
        'paid'     => __('Paid ads'),
        'email'    => __('E-mail'),
        'pwa'      => 'PWA / App',
        'referral' => __('Referral'),
    ];

    $featureLabels = [
        'dashboard' => 'Dashboard',
        'matching'  => __('Matching'),
        'chat'      => 'Chat',
        'groups'    => __('Groups'),
        'events'    => __('Events'),
        'premium'   => 'Premium / PRO',
        'profile'   => __('Profile'),
    ];

    $filterLabels = [
        'gender'    => __('Gender'),
        'age_from'  => __('Age (from)'),
        'age_to'    => __('Age (to)'),
        'city'      => __('City'),
        'zip'       => __('Zip code'),
        'country'   => __('Country'),
        'lang_1'    => __('Language 1'),
        'lang_2'    => __('Language 2'),
        'lang_3'    => __('Language 3'),
        'diagnosis' => __('Diagnosis'),
        'strength'  => __('Strength'),
    ];

    $sc = fn($label, $value, $color = 'gray', $sub = '') =>
        "<div class='bg-white rounded-lg border border-gray-100 px-3 py-2.5'>
            <p class='text-[11px] text-gray-400 uppercase tracking-wide leading-none mb-1'>{$label}</p>
            <p class='text-xl font-bold text-{$color}-600 leading-none'>{$value}</p>" .
            ($sub ? "<p class='text-[11px] text-gray-400 mt-0.5'>{$sub}</p>" : '') .
        "</div>";

    $days = ['Ma', 'Di', 'Wo', 'Do', 'Vr', 'Za', 'Zo'];
@endphp

{{-- ── Period tabs ──────────────────────────────────────────────────────── --}}
<div class="flex flex-wrap gap-2 mb-5 items-center justify-between">
    <div class="flex gap-1 bg-white border border-gray-100 rounded-lg p-1">
        @foreach ($periods as $key => $label)
            <a href="{{ route('admin.page-analytics', ['period' => $key, 'include_admin' => $includeAdmin ? 1 : 0]) }}"
               class="px-3 py-1.5 rounded-md text-xs font-medium transition"
               style="{{ $period === $key ? 'background:rgb(var(--a6,99 102 241));color:#fff' : 'color:#6b7280' }}">
                {{ $label }}
            </a>
        @endforeach
    </div>
    <label class="flex items-center gap-2 text-xs text-gray-500 cursor-pointer">
        <input type="checkbox" class="rounded"
               onchange="location.href='{{ route('admin.page-analytics', ['period' => $period]) }}&include_admin=' + (this.checked ? 1 : 0)"
               {{ $includeAdmin ? 'checked' : '' }}>
        {{ __('Include admin traffic') }}
    </label>
</div>

{{-- ── Summary cards ────────────────────────────────────────────────────── --}}
<div class="grid gap-2 mb-5" style="grid-template-columns: repeat(auto-fill, minmax(140px, 1fr))">
    {!! $sc(__('Page views'), $fmt($totalViews), 'blue') !!}
    {!! $sc(__('Unique sessions'), $fmt($totalSessions), 'violet') !!}
    {!! $sc(__('Avg. session duration'), $dur($avgDurationSec), 'green') !!}
    {!! $sc(__('Avg. pages / session'), number_format($avgPages, 1, ',', '.'), 'amber') !!}
</div>

{{-- ── Views by user type & Gender ────────────────────────────────────── --}}
<div class="grid gap-4 mb-5" style="grid-template-columns: 1fr 1fr">

    {{-- Views by type --}}
    <div class="bg-white rounded-lg border border-gray-100 p-4">
        <h3 class="text-xs font-semibold text-gray-500 uppercase tracking-wide mb-3">{{ __('Page views by user type') }}</h3>
        @foreach (['guest','free','premium','pro'] as $type)
            @php $n = $byUserType[$type] ?? 0; $p = $pct($n, max(1,$totalViews)); @endphp
            <div class="mb-2">
                <div class="flex justify-between text-xs mb-0.5">
                    <span class="font-medium text-gray-700">{{ $typeLabels[$type] }}</span>
                    <span class="text-gray-400">{{ $fmt($n) }} ({{ $p }}%)</span>
                </div>
                <div class="h-2 bg-gray-100 rounded-full overflow-hidden">
                    <div class="h-full rounded-full" style="width:{{ $p }}%;background:{{ $typeColors[$type] }}"></div>
                </div>
            </div>
        @endforeach
    </div>

    {{-- Gender breakdown --}}
    <div class="bg-white rounded-lg border border-gray-100 p-4">
        <h3 class="text-xs font-semibold text-gray-500 uppercase tracking-wide mb-3">{{ __('Gender (logged-in users)') }}</h3>
        @php
            $genderTotals = ['male' => 0, 'female' => 0, 'other' => 0];
            foreach ($genderStats as $g) { $genderTotals[$g->gender] = ($genderTotals[$g->gender] ?? 0) + $g->sessions; }
            $genderTotal = array_sum($genderTotals);
            $genderColors = ['male' => '#3b82f6', 'female' => '#ec4899', 'other' => '#6b7280'];
            $genderNames = ['male' => __('Male'), 'female' => __('Female'), 'other' => __('Other')];
        @endphp
        @foreach (['male','female','other'] as $g)
            @php $n = $genderTotals[$g]; $p = $pct($n, max(1,$genderTotal)); @endphp
            <div class="mb-2">
                <div class="flex justify-between text-xs mb-0.5">
                    <span class="font-medium text-gray-700">{{ $genderNames[$g] }}</span>
                    <span class="text-gray-400">{{ $fmt($n) }} ({{ $p }}%)</span>
                </div>
                <div class="h-2 bg-gray-100 rounded-full overflow-hidden">
                    <div class="h-full rounded-full" style="width:{{ $p }}%;background:{{ $genderColors[$g] }}"></div>
                </div>
            </div>
        @endforeach
    </div>
</div>

{{-- ── Session stats per user type ─────────────────────────────────────── --}}
<div class="bg-white rounded-lg border border-gray-100 p-4 mb-5">
    <h3 class="text-xs font-semibold text-gray-500 uppercase tracking-wide mb-3">{{ __('Session statistics by user type') }}</h3>
    <div class="overflow-x-auto">
        <table class="w-full text-xs">
            <thead>
                <tr class="border-b border-gray-100">
                    <th class="text-left py-1.5 pr-4 text-gray-400 font-medium">{{ __('Type') }}</th>
                    <th class="text-right py-1.5 px-3 text-gray-400 font-medium">{{ __('Sessions') }}</th>
                    <th class="text-right py-1.5 px-3 text-gray-400 font-medium">{{ __('Avg. duration') }}</th>
                    <th class="text-right py-1.5 px-3 text-gray-400 font-medium">{{ __('Avg. pages') }}</th>
                    <th class="text-right py-1.5 pl-3 text-gray-400 font-medium">{{ __('Bounce rate') }}</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-gray-50">
                @foreach (['guest','free','premium','pro'] as $type)
                    @php $s = $sessionStats[$type] ?? null; @endphp
                    <tr>
                        <td class="py-1.5 pr-4">
                            <span class="inline-block w-2 h-2 rounded-full mr-1.5" style="background:{{ $typeColors[$type] }}"></span>
                            <span class="font-medium text-gray-700">{{ $typeLabels[$type] }}</span>
                        </td>
                        <td class="text-right py-1.5 px-3 text-gray-600">{{ $s ? $fmt($s->sessions) : '—' }}</td>
                        <td class="text-right py-1.5 px-3 text-gray-600">{{ $s ? $dur($s->avg_duration_sec) : '—' }}</td>
                        <td class="text-right py-1.5 px-3 text-gray-600">{{ $s ? number_format($s->avg_pages, 1, ',', '.') : '—' }}</td>
                        <td class="text-right py-1.5 pl-3 {{ $s && $s->sessions > 0 && ($s->bounces/$s->sessions) > 0.6 ? 'text-red-500' : 'text-gray-600' }}">
                            {{ $s && $s->sessions > 0 ? $pct($s->bounces, $s->sessions) . '%' : '—' }}
                        </td>
                    </tr>
                @endforeach
            </tbody>
        </table>
    </div>
</div>

{{-- ── Top pages ────────────────────────────────────────────────────────── --}}
<div class="bg-white rounded-lg border border-gray-100 p-4 mb-5">
    <h3 class="text-xs font-semibold text-gray-500 uppercase tracking-wide mb-3">{{ __('Top pages') }}</h3>
    <div class="overflow-x-auto">
        <table class="w-full text-xs">
            <thead>
                <tr class="border-b border-gray-100">
                    <th class="text-left py-1.5 pr-4 text-gray-400 font-medium">{{ __('Page') }}</th>
                    <th class="text-right py-1.5 px-2 text-gray-400 font-medium">{{ __('Total') }}</th>
                    <th class="text-right py-1.5 px-2" style="color:{{ $typeColors['guest'] }}">{{ $typeLabels['guest'] }}</th>
                    <th class="text-right py-1.5 px-2" style="color:{{ $typeColors['free'] }}">{{ $typeLabels['free'] }}</th>
                    <th class="text-right py-1.5 px-2" style="color:{{ $typeColors['premium'] }}">{{ $typeLabels['premium'] }}</th>
                    <th class="text-right py-1.5 pl-2" style="color:{{ $typeColors['pro'] }}">{{ $typeLabels['pro'] }}</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-gray-50">
                @foreach ($topPages as $row)
                    <tr>
                        <td class="py-1.5 pr-4 font-mono text-gray-700 max-w-xs truncate">{{ $row->path }}</td>
                        <td class="text-right py-1.5 px-2 font-semibold text-gray-700">{{ $fmt($row->total) }}</td>
                        <td class="text-right py-1.5 px-2 text-gray-400">{{ $row->guest > 0 ? $fmt($row->guest) : '–' }}</td>
                        <td class="text-right py-1.5 px-2 text-gray-400">{{ $row->free > 0 ? $fmt($row->free) : '–' }}</td>
                        <td class="text-right py-1.5 px-2 text-gray-400">{{ $row->premium > 0 ? $fmt($row->premium) : '–' }}</td>
                        <td class="text-right py-1.5 pl-2 text-gray-400">{{ $row->pro > 0 ? $fmt($row->pro) : '–' }}</td>
                    </tr>
                @endforeach
                @if ($topPages->isEmpty())
                    <tr><td colspan="6" class="py-4 text-center text-gray-400">{{ __('No data') }}</td></tr>
                @endif
            </tbody>
        </table>
    </div>
</div>

{{-- ── Feature engagement ───────────────────────────────────────────────── --}}
<div class="bg-white rounded-lg border border-gray-100 p-4 mb-5">
    <h3 class="text-xs font-semibold text-gray-500 uppercase tracking-wide mb-3">{{ __('Feature engagement') }}</h3>
    @php $featureMax = max(1, $featureEngagement->max('total')); @endphp
    <div class="space-y-3">
        @foreach ($featureEngagement as $key => $data)
            @php $p = $pct($data['total'], $featureMax); @endphp
            <div>
                <div class="flex justify-between text-xs mb-1">
                    <span class="font-medium text-gray-700">{{ $featureLabels[$key] ?? $key }}</span>
                    <span class="text-gray-400">{{ $fmt($data['total']) }} {{ __('views') }}</span>
                </div>
                <div class="h-5 bg-gray-50 rounded overflow-hidden flex">
                    @foreach (['guest','free','premium','pro'] as $type)
                        @php $tp = $pct($data[$type], max(1,$data['total'])) * $p / 100; @endphp
                        @if ($data[$type] > 0)
                            <div class="h-full" style="width:{{ $pct($data[$type], max(1,$data['total'])) }}%;background:{{ $typeColors[$type] }};opacity:0.85"
                                 title="{{ $typeLabels[$type] }}: {{ $fmt($data[$type]) }}"></div>
                        @endif
                    @endforeach
                </div>
                <div class="flex gap-3 mt-0.5">
                    @foreach (['guest','free','premium','pro'] as $type)
                        @if ($data[$type] > 0)
                            <span class="text-[10px]" style="color:{{ $typeColors[$type] }}">
                                {{ $typeLabels[$type] }}: {{ $fmt($data[$type]) }}
                            </span>
                        @endif
                    @endforeach
                </div>
            </div>
        @endforeach
    </div>
</div>

{{-- ── Traffic sources ──────────────────────────────────────────────────── --}}
<div class="grid gap-4 mb-5" style="grid-template-columns: 1fr 1fr">

    <div class="bg-white rounded-lg border border-gray-100 p-4">
        <h3 class="text-xs font-semibold text-gray-500 uppercase tracking-wide mb-3">{{ __('Traffic sources') }}</h3>
        @php $sourceTotal = $sourceStats->sum('sessions'); @endphp
        <div class="overflow-x-auto">
            <table class="w-full text-xs">
                <thead>
                    <tr class="border-b border-gray-100">
                        <th class="text-left py-1.5 pr-3 text-gray-400 font-medium">{{ __('Source') }}</th>
                        <th class="text-right py-1.5 px-2 text-gray-400 font-medium">{{ __('Sessions') }}</th>
                        <th class="text-right py-1.5 px-2 text-gray-400 font-medium">%</th>
                        <th class="text-right py-1.5 pl-2" style="color:{{ $typeColors['premium'] }}">Prem.</th>
                        <th class="text-right py-1.5 pl-2" style="color:{{ $typeColors['pro'] }}">PRO</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-50">
                    @forelse ($sourceStats as $row)
                        <tr>
                            <td class="py-1.5 pr-3 font-medium text-gray-700">{{ $sourceLabels[$row->source_type] ?? $row->source_type }}</td>
                            <td class="text-right py-1.5 px-2 text-gray-600">{{ $fmt($row->sessions) }}</td>
                            <td class="text-right py-1.5 px-2 text-gray-400">{{ $pct($row->sessions, max(1,$sourceTotal)) }}%</td>
                            <td class="text-right py-1.5 pl-2 text-gray-400">{{ $row->premium > 0 ? $fmt($row->premium) : '–' }}</td>
                            <td class="text-right py-1.5 pl-2 text-gray-400">{{ $row->pro > 0 ? $fmt($row->pro) : '–' }}</td>
                        </tr>
                    @empty
                        <tr><td colspan="5" class="py-3 text-center text-gray-400">{{ __('No data') }}</td></tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>

    <div class="bg-white rounded-lg border border-gray-100 p-4">
        <h3 class="text-xs font-semibold text-gray-500 uppercase tracking-wide mb-3">{{ __('Top landing pages per source') }}</h3>
        @php $haslanding = false; @endphp
        @foreach ($sourceStats->take(4) as $row)
            @php $pages = $landingPages[$row->source_type] ?? collect(); @endphp
            @if ($pages->isNotEmpty())
                @php $haslanding = true; @endphp
                <div class="mb-2.5">
                    <p class="text-[10px] font-semibold text-gray-400 uppercase mb-1">{{ $sourceLabels[$row->source_type] ?? $row->source_type }}</p>
                    @foreach ($pages->take(3) as $lp)
                        <div class="flex justify-between text-[11px]">
                            <span class="font-mono text-gray-600 truncate max-w-[180px]">{{ $lp->landing_page }}</span>
                            <span class="text-gray-400 ml-2 shrink-0">{{ $lp->sessions }}</span>
                        </div>
                    @endforeach
                </div>
            @endif
        @endforeach
        @if (!$haslanding)
            <p class="text-xs text-gray-400">{{ __('No data') }}</p>
        @endif
    </div>
</div>

{{-- ── Browser & Device ─────────────────────────────────────────────────── --}}
<div class="grid gap-4 mb-5" style="grid-template-columns: 1fr 1fr">

    <div class="bg-white rounded-lg border border-gray-100 p-4">
        <h3 class="text-xs font-semibold text-gray-500 uppercase tracking-wide mb-3">{{ __('Device type') }}</h3>
        @php
            $deviceTotal = $deviceStats->sum('sessions');
            $deviceColors = ['desktop' => '#3b82f6', 'mobile' => '#10b981', 'tablet' => '#f59e0b'];
            $deviceLabels = ['desktop' => __('Desktop'), 'mobile' => __('Mobile'), 'tablet' => __('Tablet')];
        @endphp
        @foreach (['desktop','mobile','tablet'] as $d)
            @php $n = $deviceStats[$d]->sessions ?? 0; $p = $pct($n, max(1,$deviceTotal)); @endphp
            <div class="mb-2">
                <div class="flex justify-between text-xs mb-0.5">
                    <span class="font-medium text-gray-700">{{ $deviceLabels[$d] }}</span>
                    <span class="text-gray-400">{{ $fmt($n) }} ({{ $p }}%)</span>
                </div>
                <div class="h-2 bg-gray-100 rounded-full overflow-hidden">
                    <div class="h-full rounded-full" style="width:{{ $p }}%;background:{{ $deviceColors[$d] }}"></div>
                </div>
            </div>
        @endforeach
    </div>

    <div class="bg-white rounded-lg border border-gray-100 p-4">
        <h3 class="text-xs font-semibold text-gray-500 uppercase tracking-wide mb-3">{{ __('Browser') }}</h3>
        @php $browserTotal = $browserStats->sum('sessions'); @endphp
        <div class="space-y-1.5">
            @forelse ($browserStats as $row)
                @php $p = $pct($row->sessions, max(1,$browserTotal)); @endphp
                <div class="flex items-center gap-2 text-xs">
                    <span class="w-16 font-medium text-gray-700 shrink-0">{{ $row->browser }}</span>
                    <div class="flex-1 h-2 bg-gray-100 rounded-full overflow-hidden">
                        <div class="h-full bg-indigo-400 rounded-full" style="width:{{ $p }}%"></div>
                    </div>
                    <span class="text-gray-400 w-8 text-right shrink-0">{{ $p }}%</span>
                </div>
            @empty
                <p class="text-xs text-gray-400">{{ __('No data') }}</p>
            @endforelse
        </div>
    </div>
</div>

{{-- ── IP regions by user category ─────────────────────────────────────── --}}
<div class="bg-white rounded-lg border border-gray-100 p-4 mb-5">
    <h3 class="text-xs font-semibold text-gray-500 uppercase tracking-wide mb-3">{{ __('IP regions by user category') }}</h3>
    @if ($regionStats->isNotEmpty())
        @php
            $regionTotal = $regionStats->sum('total');
            $flagEmoji = function(string $code): string {
                $code = strtoupper($code);
                if (strlen($code) !== 2) return '🌐';
                return mb_chr(0x1F1E6 - 0x41 + ord($code[0])) . mb_chr(0x1F1E6 - 0x41 + ord($code[1]));
            };
        @endphp
        <div class="overflow-x-auto">
            <table class="w-full text-xs">
                <thead>
                    <tr class="border-b border-gray-100">
                        <th class="text-left py-1.5 pr-3 text-gray-400 font-medium">{{ __('Country') }}</th>
                        <th class="text-left py-1.5 pr-4 text-gray-400 font-medium">{{ __('Region') }}</th>
                        <th class="text-right py-1.5 px-2 text-gray-400 font-medium">{{ __('Sessions') }}</th>
                        <th class="text-right py-1.5 px-2 text-gray-400 font-medium">%</th>
                        <th class="text-right py-1.5 px-2" style="color:{{ $typeColors['guest'] }}">{{ $typeLabels['guest'] }}</th>
                        <th class="text-right py-1.5 px-2" style="color:{{ $typeColors['free'] }}">{{ $typeLabels['free'] }}</th>
                        <th class="text-right py-1.5 px-2" style="color:{{ $typeColors['premium'] }}">{{ $typeLabels['premium'] }}</th>
                        <th class="text-right py-1.5 pl-2" style="color:{{ $typeColors['pro'] }}">PRO</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-50">
                    @foreach ($regionStats->take(25) as $row)
                        <tr>
                            <td class="py-1.5 pr-3 font-medium text-gray-700 whitespace-nowrap">
                                <span class="mr-1">{{ $flagEmoji($row['code']) }}</span>{{ $row['name'] }}
                            </td>
                            <td class="py-1.5 pr-4 text-gray-500">{{ $row['region'] ?: '—' }}</td>
                            <td class="text-right py-1.5 px-2 font-semibold text-gray-700">{{ $fmt($row['total']) }}</td>
                            <td class="text-right py-1.5 px-2 text-gray-400">{{ $pct($row['total'], max(1, $regionTotal)) }}%</td>
                            <td class="text-right py-1.5 px-2 text-gray-400">{{ $row['guest'] > 0 ? $fmt($row['guest']) : '–' }}</td>
                            <td class="text-right py-1.5 px-2 text-gray-400">{{ $row['free'] > 0 ? $fmt($row['free']) : '–' }}</td>
                            <td class="text-right py-1.5 px-2 text-gray-400">{{ $row['premium'] > 0 ? $fmt($row['premium']) : '–' }}</td>
                            <td class="text-right py-1.5 pl-2 text-gray-400">{{ $row['pro'] > 0 ? $fmt($row['pro']) : '–' }}</td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
        <p class="text-[10px] text-gray-400 mt-2">{{ __('Country resolved from visitor IP via ip-api.com · cached 30 days per IP · private IPs excluded') }}</p>
    @else
        <p class="text-xs text-gray-400">{{ __('No geodata available — check that ip-api.com is reachable.') }}</p>
    @endif
</div>

{{-- ── Hourly heatmap ───────────────────────────────────────────────────── --}}
<div class="bg-white rounded-lg border border-gray-100 p-4 mb-5 overflow-x-auto">
    <h3 class="text-xs font-semibold text-gray-500 uppercase tracking-wide mb-3">{{ __('Activity heatmap (day × hour)') }}</h3>
    <div style="min-width:600px">
        <div class="flex text-[9px] text-gray-400 mb-1 ml-8">
            @foreach (range(0,23) as $h)
                <div class="flex-1 text-center">{{ $h }}</div>
            @endforeach
        </div>
        @foreach ($days as $di => $dayName)
            <div class="flex items-center mb-px">
                <div class="w-8 text-[10px] text-gray-400 shrink-0">{{ $dayName }}</div>
                @foreach (range(0,23) as $h)
                    @php
                        $val = $heatmap[$di][$h];
                        $intensity = $heatmapMax > 0 ? $val / $heatmapMax : 0;
                        $opacity = round(0.08 + $intensity * 0.92, 2);
                        $bg = $val > 0 ? "rgba(99,102,241,{$opacity})" : '#f3f4f6';
                    @endphp
                    <div class="flex-1 aspect-square rounded-sm mx-px"
                         style="background:{{ $bg }}"
                         title="{{ $dayName }} {{ $h }}:00 — {{ $val }} {{ __('views') }}"></div>
                @endforeach
            </div>
        @endforeach
        <div class="flex items-center gap-2 mt-2 text-[10px] text-gray-400">
            <span>{{ __('Low') }}</span>
            @foreach ([0.1,0.3,0.5,0.7,0.9] as $op)
                <div class="w-4 h-3 rounded-sm" style="background:rgba(99,102,241,{{ $op }})"></div>
            @endforeach
            <span>{{ __('High') }}</span>
        </div>
    </div>
</div>

{{-- ── Filter usage ─────────────────────────────────────────────────────── --}}
<div class="bg-white rounded-lg border border-gray-100 p-4 mb-5">
    <h3 class="text-xs font-semibold text-gray-500 uppercase tracking-wide mb-3">{{ __('Filter usage') }}
        <span class="font-normal text-gray-400 normal-case">({{ $fmt($filterTotalSearches) }} {{ __('searches with filters') }})</span>
    </h3>
    @if ($filterTotalSearches > 0)
        <div class="overflow-x-auto">
            <table class="w-full text-xs">
                <thead>
                    <tr class="border-b border-gray-100">
                        <th class="text-left py-1.5 pr-4 text-gray-400 font-medium">{{ __('Filter') }}</th>
                        <th class="text-right py-1.5 px-3 text-gray-400 font-medium">{{ __('Uses') }}</th>
                        <th class="text-right py-1.5 px-3 text-gray-400 font-medium">%</th>
                        <th class="text-right py-1.5 px-2" style="color:{{ $typeColors['free'] }}">{{ $typeLabels['free'] }}</th>
                        <th class="text-right py-1.5 px-2" style="color:{{ $typeColors['premium'] }}">{{ $typeLabels['premium'] }}</th>
                        <th class="text-right py-1.5 pl-2" style="color:{{ $typeColors['pro'] }}">PRO</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-50">
                    @foreach ($filterKeys as $key)
                        @php
                            $total_uses  = (int) ($filterTotals?->$key ?? 0);
                            $pct_uses    = $pct($total_uses, max(1, $filterTotalSearches));
                            $free_uses   = (int) ($filterByType['free']?->$key ?? 0);
                            $prem_uses   = (int) ($filterByType['premium']?->$key ?? 0);
                            $pro_uses    = (int) ($filterByType['pro']?->$key ?? 0);
                        @endphp
                        <tr>
                            <td class="py-1.5 pr-4 font-medium text-gray-700">{{ $filterLabels[$key] ?? $key }}</td>
                            <td class="text-right py-1.5 px-3 text-gray-600">{{ $fmt($total_uses) }}</td>
                            <td class="text-right py-1.5 px-3">
                                <div class="flex items-center justify-end gap-1.5">
                                    <div class="w-16 h-1.5 bg-gray-100 rounded-full overflow-hidden">
                                        <div class="h-full bg-indigo-400 rounded-full" style="width:{{ $pct_uses }}%"></div>
                                    </div>
                                    <span class="text-gray-400">{{ $pct_uses }}%</span>
                                </div>
                            </td>
                            <td class="text-right py-1.5 px-2 text-gray-400">{{ $free_uses > 0 ? $fmt($free_uses) : '–' }}</td>
                            <td class="text-right py-1.5 px-2 text-gray-400">{{ $prem_uses > 0 ? $fmt($prem_uses) : '–' }}</td>
                            <td class="text-right py-1.5 pl-2 text-gray-400">{{ $pro_uses > 0 ? $fmt($pro_uses) : '–' }}</td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    @else
        <p class="text-xs text-gray-400">{{ __('No filter searches recorded yet for this period.') }}</p>
    @endif
</div>

{{-- ── Conversion funnel ────────────────────────────────────────────────── --}}
<div class="bg-white rounded-lg border border-gray-100 p-4 mb-5">
    <h3 class="text-xs font-semibold text-gray-500 uppercase tracking-wide mb-4">{{ __('Conversion funnel') }}</h3>
    @php
        $funnelSteps = [
            ['key' => 'sessions',      'label' => __('Total sessions'),     'color' => '#6b7280'],
            ['key' => 'guests',        'label' => __('Guest sessions'),     'color' => '#9ca3af'],
            ['key' => 'registrations', 'label' => __('Registrations'),      'color' => '#3b82f6'],
            ['key' => 'verified',      'label' => __('E-mail verified'),    'color' => '#06b6d4'],
            ['key' => 'has_photo',     'label' => __('Photo uploaded'),     'color' => '#10b981'],
            ['key' => 'first_like',    'label' => __('First like sent'),    'color' => '#f59e0b'],
            ['key' => 'premium',       'label' => __('Became Premium/PRO'), 'color' => '#8b5cf6'],
        ];
        $funnelMax = max(1, $funnel['sessions']);
    @endphp
    <div class="space-y-2">
        @foreach ($funnelSteps as $i => $step)
            @php
                $val  = $funnel[$step['key']];
                $prev = $i > 0 ? $funnel[$funnelSteps[$i-1]['key']] : $val;
                $cvr  = $i > 0 ? $pct($val, max(1,$prev)) : 100;
                $bar  = $pct($val, $funnelMax);
            @endphp
            <div>
                <div class="flex items-center gap-3 text-xs">
                    <span class="w-40 text-gray-600 shrink-0">{{ $step['label'] }}</span>
                    <div class="flex-1 h-6 bg-gray-50 rounded overflow-hidden">
                        <div class="h-full rounded flex items-center px-2 text-white text-[10px] font-semibold"
                             style="width:{{ max(2,$bar) }}%;background:{{ $step['color'] }}">
                            {{ $bar > 10 ? $fmt($val) : '' }}
                        </div>
                    </div>
                    <span class="w-12 text-right font-semibold text-gray-700 shrink-0">{{ $fmt($val) }}</span>
                    @if ($i > 0)
                        <span class="w-12 text-right text-[11px] shrink-0 {{ $cvr < 30 ? 'text-red-400' : ($cvr < 60 ? 'text-amber-400' : 'text-green-500') }}">
                            {{ $cvr }}%
                        </span>
                    @else
                        <span class="w-12"></span>
                    @endif
                </div>
            </div>
        @endforeach
    </div>
    <p class="text-[10px] text-gray-400 mt-3">{{ __('Percentages show conversion from the previous step.') }}</p>
</div>

{{-- ── Hoe gevonden? ─────────────────────────────────────────────────────── --}}
<div class="bg-white rounded-lg border border-gray-100 p-4 mb-5">
    <h3 class="text-xs font-semibold text-gray-500 uppercase tracking-wide mb-4">Hoe gevonden? <span class="normal-case font-normal text-gray-400">(registraties in periode)</span></h3>
    @php
        $howFoundLabels = [
            'search_engine' => 'Zoekmachine',
            'social_media'  => 'Social media',
            'friend_family' => 'Vriend of familie',
            'professional'  => 'Therapeut / coach / professional',
            'news_blog'     => 'Nieuwsartikel of blog',
            'event'         => 'Evenement of activiteit',
            'other'         => 'Anders',
            'unknown'       => 'Niet ingevuld',
        ];
        $howFoundColors = [
            'search_engine' => '#6366f1',
            'social_media'  => '#ec4899',
            'friend_family' => '#10b981',
            'professional'  => '#3b82f6',
            'news_blog'     => '#f59e0b',
            'event'         => '#f97316',
            'other'         => '#9ca3af',
            'unknown'       => '#d1d5db',
        ];
        $howFoundTotal = max(1, $howFoundStats->sum('total'));

        $cumDeg = 0;
        $stops  = [];
        foreach ($howFoundStats as $row) {
            $start  = $cumDeg;
            $cumDeg += $row->total / $howFoundTotal * 360;
            $color  = $howFoundColors[$row->how_found] ?? '#9ca3af';
            $stops[] = "{$color} {$start}deg {$cumDeg}deg";
        }
        $gradient = 'conic-gradient(' . implode(', ', $stops) . ')';
    @endphp
    @if ($howFoundStats->isEmpty())
        <p class="text-sm text-gray-400">Geen registraties in deze periode.</p>
    @else
        <div class="flex flex-wrap items-center gap-8">
            {{-- Donut --}}
            <div class="relative shrink-0" style="width:160px;height:160px;">
                <div class="absolute inset-0 rounded-full" style="background:{{ $gradient }}"></div>
                <div class="absolute rounded-full bg-white" style="inset:36px"></div>
                <div class="absolute inset-0 flex flex-col items-center justify-center">
                    <span class="text-xl font-bold text-gray-700 leading-none">{{ $howFoundStats->sum('total') }}</span>
                    <span class="text-[10px] text-gray-400 mt-0.5">registraties</span>
                </div>
            </div>
            {{-- Legend --}}
            <div class="flex-1 grid grid-cols-1 gap-1.5 min-w-0" style="min-width:160px">
                @foreach ($howFoundStats as $row)
                    @php
                        $label  = $howFoundLabels[$row->how_found] ?? $row->how_found;
                        $color  = $howFoundColors[$row->how_found] ?? '#9ca3af';
                        $pctVal = round($row->total / $howFoundTotal * 100);
                    @endphp
                    <div class="flex items-center gap-2 text-xs">
                        <span class="inline-block w-2.5 h-2.5 rounded-sm shrink-0" style="background:{{ $color }}"></span>
                        <span class="flex-1 text-gray-600 truncate">{{ $label }}</span>
                        <span class="tabular-nums text-gray-400 shrink-0">{{ $row->total }} ({{ $pctVal }}%)</span>
                    </div>
                @endforeach
            </div>
        </div>
    @endif
</div>

@endsection