@extends('admin.layout')
@section('title', 'Wellness')

@section('content')
@php
    $zoneConfig = [
        'green'  => ['label' => 'Groen',  'color' => '#22c55e', 'bg' => '#f0fdf4', 'border' => '#bbf7d0'],
        'yellow' => ['label' => 'Geel',   'color' => '#eab308', 'bg' => '#fefce8', 'border' => '#fef08a'],
        'orange' => ['label' => 'Oranje', 'color' => '#f97316', 'bg' => '#fff7ed', 'border' => '#fed7aa'],
        'red'    => ['label' => 'Rood',   'color' => '#ef4444', 'bg' => '#fef2f2', 'border' => '#fecaca'],
    ];
    $maxEmotion = $topEmotions->max('total') ?: 1;
    $mbtiMax    = $mbtiStats->max('total') ?: 1;
@endphp

<div class="space-y-6">

    {{-- Emotion overview --}}
    <div>
        <h2 class="text-sm font-semibold text-gray-700 uppercase tracking-wide mb-3">{{ __('Emotions') }}</h2>

        {{-- Totals --}}
        <div class="grid gap-4 mb-4" style="grid-template-columns:repeat(2,minmax(0,1fr))">
            <div class="bg-white rounded-xl border border-gray-200 p-5">
                <p class="text-xs text-gray-500 uppercase tracking-wide">{{ __('Total logs') }}</p>
                <p class="text-3xl font-bold text-gray-800 mt-1">{{ number_format($emotionTotal) }}</p>
            </div>
            <div class="bg-white rounded-xl border border-gray-200 p-5">
                <p class="text-xs text-gray-500 uppercase tracking-wide">{{ __('Unique users') }}</p>
                <p class="text-3xl font-bold text-indigo-600 mt-1">{{ number_format($emotionUsers) }}</p>
            </div>
        </div>

        {{-- Zone cards --}}
        <div class="grid gap-4 mb-4" style="grid-template-columns:repeat(4,minmax(0,1fr))">
            @foreach($zoneConfig as $key => $cfg)
                @php $zoneTotal = $emotionByZone->get($key)?->total ?? 0; @endphp
                <div class="bg-white rounded-xl border p-4" style="border-color:{{ $cfg['border'] }}; background:{{ $cfg['bg'] }}">
                    <div class="flex items-center gap-2 mb-2">
                        <span class="w-3 h-3 rounded-full inline-block" style="background:{{ $cfg['color'] }}"></span>
                        <span class="text-sm font-medium text-gray-700">{{ $cfg['label'] }}</span>
                    </div>
                    <p class="text-2xl font-bold" style="color:{{ $cfg['color'] }}">{{ number_format($zoneTotal) }}</p>
                    @if($emotionTotal > 0)
                        <p class="text-xs text-gray-500 mt-1">{{ round($zoneTotal / $emotionTotal * 100) }}%</p>
                    @endif
                </div>
            @endforeach
        </div>

        {{-- 30-day trend --}}
        <div class="bg-white rounded-xl border border-gray-200 p-5 mb-4">
            <p class="text-xs font-semibold text-gray-600 uppercase tracking-wide mb-3">{{ __('Last 30 days') }}</p>
            @php
                $trendDays   = collect();
                $trendMax    = 1;
                for ($i = 29; $i >= 0; $i--) {
                    $day   = now()->subDays($i)->format('Y-m-d');
                    $count = $emotionTrend->get($day, 0);
                    $trendDays->push(['day' => $day, 'count' => $count]);
                    if ($count > $trendMax) $trendMax = $count;
                }
            @endphp
            <div class="flex items-end gap-0.5" style="height:64px">
                @foreach($trendDays as $td)
                    @php $pct = round($td['count'] / $trendMax * 100); @endphp
                    <div class="flex-1 bg-indigo-400 rounded-sm hover:bg-indigo-600 transition cursor-default"
                         style="height:{{ max(2, $pct) }}%"
                         title="{{ $td['day'] }}: {{ $td['count'] }}"></div>
                @endforeach
            </div>
            <div class="flex justify-between text-xs text-gray-400 mt-1">
                <span>{{ now()->subDays(29)->format('d M') }}</span>
                <span>{{ now()->format('d M') }}</span>
            </div>
        </div>

        {{-- Top emotions + recent logs --}}
        <div class="grid gap-4" style="grid-template-columns:1fr 1fr">

            <div class="bg-white rounded-xl border border-gray-200 p-5">
                <p class="text-xs font-semibold text-gray-600 uppercase tracking-wide mb-3">{{ __('Top emotions') }}</p>
                <div class="space-y-2">
                    @foreach($topEmotions as $em)
                        <div>
                            <div class="flex justify-between text-xs mb-0.5">
                                <span class="font-medium text-gray-700">{{ $em->emotion_key }}</span>
                                <span class="text-gray-500">{{ number_format($em->total) }}</span>
                            </div>
                            <div class="h-2 rounded-full bg-gray-100 overflow-hidden">
                                <div class="h-full rounded-full bg-indigo-500"
                                     style="width:{{ round($em->total / $maxEmotion * 100) }}%"></div>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>

            <div class="bg-white rounded-xl border border-gray-200 p-5">
                <p class="text-xs font-semibold text-gray-600 uppercase tracking-wide mb-3">{{ __('Recent logs') }}</p>
                <div class="space-y-2 text-sm">
                    @foreach($recentLogs as $log)
                        <div class="flex items-start gap-3">
                            @php $zc = $zoneConfig[$log->zone] ?? ['color'=>'#6b7280','bg'=>'#f9fafb','border'=>'#e5e7eb']; @endphp
                            <span class="w-2.5 h-2.5 rounded-full mt-1 shrink-0" style="background:{{ $zc['color'] }}"></span>
                            <div class="min-w-0">
                                <span class="font-medium text-gray-700 truncate block">{{ $log->emotion_key }}</span>
                                <span class="text-xs text-gray-400">
                                    @if($log->user) <span class="font-mono">#{{ $log->user->id }}</span> @endif{{ $log->user?->name ?? '—' }} · {{ $log->logged_at?->diffForHumans() }}
                                </span>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        </div>
    </div>

    {{-- MBTI --}}
    <div>
        <h2 class="text-sm font-semibold text-gray-700 uppercase tracking-wide mb-3">{{ __('MBTI') }}</h2>

        <div class="grid gap-4" style="grid-template-columns:1fr 1fr">

            {{-- Type distribution --}}
            <div class="bg-white rounded-xl border border-gray-200 p-5">
                <p class="text-xs font-semibold text-gray-600 uppercase tracking-wide mb-1">
                    {{ __('Type distribution') }}
                    <span class="font-normal text-gray-400 ml-1">({{ number_format($mbtiTotal) }} {{ __('total') }})</span>
                </p>
                <div class="space-y-1.5 mt-3">
                    @foreach($mbtiStats as $ms)
                        <div>
                            <div class="flex justify-between text-xs mb-0.5">
                                <span class="font-mono font-medium text-gray-700">{{ $ms->mbti_type }}</span>
                                <span class="text-gray-500">{{ $ms->total }}</span>
                            </div>
                            <div class="h-2 rounded-full bg-gray-100 overflow-hidden">
                                <div class="h-full rounded-full bg-violet-500"
                                     style="width:{{ round($ms->total / $mbtiMax * 100) }}%"></div>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>

            {{-- Dimension breakdown --}}
            <div class="bg-white rounded-xl border border-gray-200 p-5">
                <p class="text-xs font-semibold text-gray-600 uppercase tracking-wide mb-3">{{ __('Dimension breakdown') }}</p>
                <div class="space-y-4">
                    @foreach($mbtiDimensions as $dim => $counts)
                        @php
                            $keys   = array_keys($counts);
                            $total  = array_sum($counts);
                            $pctA   = $total > 0 ? round($counts[$keys[0]] / $total * 100) : 50;
                            $pctB   = 100 - $pctA;
                        @endphp
                        <div>
                            <div class="flex justify-between text-xs text-gray-600 mb-1">
                                <span class="font-mono font-bold">{{ $keys[0] }} <span class="font-normal text-gray-400">({{ $counts[$keys[0]] }})</span></span>
                                <span class="font-mono font-bold">{{ $keys[1] }} <span class="font-normal text-gray-400">({{ $counts[$keys[1]] }})</span></span>
                            </div>
                            <div class="h-4 rounded-full bg-gray-100 overflow-hidden flex">
                                <div class="h-full bg-violet-500 transition-all" style="width:{{ $pctA }}%"></div>
                                <div class="h-full bg-violet-200 transition-all" style="width:{{ $pctB }}%"></div>
                            </div>
                            <div class="flex justify-between text-xs text-gray-400 mt-0.5">
                                <span>{{ $pctA }}%</span>
                                <span>{{ $pctB }}%</span>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        </div>
    </div>

</div>
@endsection