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

    {{-- HEADER --}}
    <div class="flex items-start justify-between">
        <div>
            <h2 class="text-xl font-semibold text-gray-800">
                {{ $greeting }}, {{ $firstName }}
            </h2>
            <p class="text-sm text-gray-500 mt-1">
                {{ now($tz)->translatedFormat('l, d. F Y') }}
            </p>
        </div>

        <div class="flex items-center gap-2">
            @if($stats['overdue_tasks'] > 0)
                <span class="flex items-center gap-1.5 text-xs text-red-600 bg-red-50 border border-red-100 px-2.5 py-1 rounded-full">
                    <x-heroicon-o-exclamation-triangle class="w-3.5 h-3.5"/>
                    {{ $stats['overdue_tasks'] }} {{ t('dashboard.overdue') }}
                </span>
            @endif
            <a href="{{ route('calendar.index') }}"
               class="flex items-center gap-1.5 text-xs text-gray-500 hover:text-indigo-600 bg-white border border-gray-200 hover:border-indigo-200 px-3 py-1.5 rounded-lg transition-colors">
                <x-heroicon-o-calendar class="w-3.5 h-3.5"/>
                {{ t('dashboard.open_calendar') }}
            </a>
        </div>
    </div>


    {{-- STATS --}}
    <div class="grid grid-cols-2 md:grid-cols-4 gap-3">
        @foreach([
            ['label' => t('dashboard.events_today'), 'value' => $stats['events_today'],  'icon' => 'calendar',      'color' => 'text-indigo-600', 'bg' => 'bg-indigo-50',  'href' => route('calendar.index')],
            ['label' => t('dashboard.open_tasks'),  'value' => $stats['open_tasks'],    'icon' => 'check-circle',  'color' => 'text-teal-600',   'bg' => 'bg-teal-50',    'href' => route('tasks.index')],
            ['label' => t('dashboard.notes'),        'value' => $stats['notes_total'],   'icon' => 'document-text', 'color' => 'text-amber-600',  'bg' => 'bg-amber-50',   'href' => route('notes.index')],
        ] as $stat)
            <a href="{{ $stat['href'] }}"
               class="bg-white border border-gray-100 rounded-xl px-4 py-3.5 flex items-center gap-3 shadow-sm hover:shadow-md hover:border-gray-200 transition-all">
                <div class="w-9 h-9 rounded-lg {{ $stat['bg'] }} flex items-center justify-center shrink-0">
                    @if($stat['icon'] === 'calendar')         <x-heroicon-o-calendar class="w-5 h-5 {{ $stat['color'] }}"/>
                    @elseif($stat['icon'] === 'check-circle') <x-heroicon-o-check-circle class="w-5 h-5 {{ $stat['color'] }}"/>
                    @else                                     <x-heroicon-o-document-text class="w-5 h-5 {{ $stat['color'] }}"/>
                    @endif
                </div>
                <div>
                    <p class="text-xl font-semibold text-gray-800 leading-none">{{ number_format($stat['value']) }}</p>
                    <p class="text-xs text-gray-400 mt-0.5">{{ $stat['label'] }}</p>
                </div>
            </a>
        @endforeach

        {{-- Credits Card --}}
        @if(auth()->user()->isUnlimitedUser())
            <a href="{{ route('agent.index') }}"
               class="bg-white border border-gray-100 rounded-xl px-4 py-3.5 flex items-center gap-3 shadow-sm hover:shadow-md hover:border-gray-200 transition-all">
                <div class="w-9 h-9 rounded-lg bg-green-50 flex items-center justify-center shrink-0">
                    <x-heroicon-o-bolt class="w-5 h-5 text-green-600"/>
                </div>
                <div>
                    <span style="display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:20px;font-size:11px;font-weight:500;background:#F0FDF4;color:#065F46;border:1px solid #10B98122;">
                        <span style="width:5px;height:5px;border-radius:50%;background:#10B981;display:inline-block;"></span>
                        {{ t('dashboard.unlimited') }}
                    </span>
                    <p class="text-xs text-gray-400 mt-0.5">{{ t('dashboard.credits_month') }}</p>
                </div>
            </a>
        @else
            <a href="{{ route('agent.index') }}"
               class="bg-white border border-gray-100 rounded-xl px-4 py-3.5 flex items-center gap-3 shadow-sm hover:shadow-md hover:border-gray-200 transition-all">
                <div class="w-9 h-9 rounded-lg bg-purple-50 flex items-center justify-center shrink-0">
                    <x-heroicon-o-bolt class="w-5 h-5 text-purple-600"/>
                </div>
                <div>
                    <p class="text-xl font-semibold text-gray-800 leading-none">{{ number_format($stats['credits_month']) }}</p>
                    <p class="text-xs text-gray-400 mt-0.5">{{ t('dashboard.credits_month') }}</p>
                </div>
            </a>
        @endif
    </div>


    {{-- GEBURTSTAGE --}}
    @if($birthdaysToday->count() > 0)
    <div class="bg-pink-50 border border-pink-100 rounded-xl px-4 py-3 flex items-center gap-3 flex-wrap">
        <div class="w-6 h-6 rounded-md bg-pink-100 flex items-center justify-center shrink-0">
            <x-heroicon-o-cake class="w-3.5 h-3.5 text-pink-500"/>
        </div>
        <div class="flex items-center gap-2 flex-1 flex-wrap">
            @foreach($birthdaysToday->take(3) as $c)
            <div class="flex items-center gap-1.5 bg-white rounded-full px-3 py-1 border border-pink-100">
                <div class="w-5 h-5 rounded-full bg-pink-200 flex items-center justify-center shrink-0">
                    <span class="text-[10px] font-semibold text-pink-700">{{ strtoupper(substr($c->name, 0, 1)) }}</span>
                </div>
                <span class="text-sm font-medium text-gray-800">{{ $c->name }}</span>
                @if(\Carbon\Carbon::parse($c->birthday)->year > 1900)
                <span class="text-xs text-pink-400">{{ now()->year - \Carbon\Carbon::parse($c->birthday)->year }} {{ t('common.age_short', [], $locale) }}</span>
                @endif
            </div>
            @endforeach
            @if($birthdaysToday->count() > 3)
            <span class="text-sm text-pink-400">{{ t('dashboard.birthday.more', ['count' => $birthdaysToday->count() - 3], $locale) }}</span>
            @endif
        </div>
        <div class="flex items-center gap-1 shrink-0">
            <x-heroicon-o-sparkles class="w-3.5 h-3.5 text-pink-400"/>
            <span class="text-xs font-medium text-pink-500 whitespace-nowrap">{{ t('dashboard.birthday.today', [], $locale) }}</span>
        </div>
    </div>

    @elseif($birthdaysSoon->count() > 0)
    <div class="bg-gray-50 border border-gray-100 rounded-xl px-4 py-2.5 flex items-center gap-3">
        <div class="w-6 h-6 rounded-md bg-gray-100 flex items-center justify-center shrink-0">
            <x-heroicon-o-cake class="w-3.5 h-3.5 text-gray-400"/>
        </div>
        <div class="flex items-center gap-2 flex-1 flex-wrap">
            @foreach($birthdaysSoon->take(2) as $c)
            @php $days = (int) now()->diffInDays(\Carbon\Carbon::parse($c->birthday)->setYear(now()->year), false); @endphp
            <span class="text-sm text-gray-600">
                <span class="font-medium">{{ $c->name }}</span>
                <span class="text-gray-400 text-xs ml-1">{{ t($days === 1 ? 'dashboard.birthday.in_day' : 'dashboard.birthday.in_days', ['days' => $days], $locale) }}</span>
            </span>
            @if(!$loop->last && $birthdaysSoon->count() > 1)
            <span class="text-gray-300">·</span>
            @endif
            @endforeach
            @if($birthdaysSoon->count() > 2)
            <span class="text-xs text-gray-400">{{ t('dashboard.birthday.more', ['count' => $birthdaysSoon->count() - 2], $locale) }}</span>
            @endif
        </div>
    </div>
    @endif

    {{-- MAIN GRID: Termine + Aufgaben | Aktivitäten + Schnellzugriff --}}
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-5">

        {{-- LINKE SPALTE (2/3) --}}
        <div class="lg:col-span-2 space-y-5">

            {{-- HEUTE: TERMINE --}}
            <div class="bg-white border border-gray-100 rounded-xl shadow-sm">
                <div class="flex items-center justify-between px-5 pt-4 pb-3 border-b border-gray-50">
                    <div class="flex items-center gap-2.5">
                        <div class="w-7 h-7 rounded-lg bg-indigo-50 flex items-center justify-center">
                            <x-heroicon-o-calendar class="w-4 h-4 text-indigo-600"/>
                        </div>
                        <span class="text-sm font-semibold text-gray-800">{{ t('dashboard.events_today') }}</span>
                    </div>
                    <div class="flex items-center gap-2">
                        @if($todayEvents->count() > 0)
                            <span class="text-xs text-gray-400 bg-gray-50 px-2 py-0.5 rounded-full">{{ $todayEvents->count() }}</span>
                        @endif
                        <a href="{{ route('calendar.index') }}" class="text-xs text-indigo-600 hover:underline">{{ t('common.all') }}</a>
                    </div>
                </div>

                <div class="px-5 py-3">
                    @forelse($todayEvents as $event)
                        @php
                            $startLocal   = $event->starts_at->setTimezone($tz);
                            $endLocal     = $event->ends_at?->setTimezone($tz);
                            $hex          = $event->color ?? '#6366f1';
                            $isMultiDay   = $event->spansMultipleDays();
                            $startsToday  = $startLocal->toDateString() === now($tz)->toDateString();
                            $endsToday    = $endLocal?->toDateString() === now($tz)->toDateString();
                        @endphp
                        <div class="flex items-center gap-3 py-2.5 border-b border-gray-50 last:border-0">
                            <div class="w-1 h-10 rounded-full shrink-0" style="background: {{ $hex }}"></div>

                            {{-- Zeit-Spalte --}}
                            <div class="w-14 shrink-0 text-center">
                                @if($event->is_all_day)
                                    {{-- Ganztag: nur bei mehrtägig das Datum anzeigen --}}
                                    @if($isMultiDay)
                                        <p class="text-[10px] text-gray-400 leading-tight">
                                            {{ $startLocal->format('d.m.') }}<br>– {{ $endLocal?->format('d.m.') }}
                                        </p>
                                    @endif
                                @else
                                    <p class="text-sm font-semibold text-gray-800">{{ $startLocal->format('H:i') }}</p>
                                    @if($endLocal && $endsToday)
                                        <p class="text-[10px] text-gray-400">{{ $endLocal->format('H:i') }}</p>
                                    @elseif($endLocal && !$endsToday)
                                        <p class="text-[10px] text-gray-400">→ {{ $endLocal->format('d.m.') }}</p>
                                    @endif
                                @endif
                            </div>

                            <div class="flex-1 min-w-0">
                                <p class="text-sm font-medium text-gray-800 truncate">{{ $event->title }}</p>
                                @if($event->notes)
                                    <p class="text-xs text-gray-400 truncate">{{ $event->notes }}</p>
                                @endif
                            </div>

                            {{-- Badge --}}
                            @if($event->is_all_day)
                                <span class="text-[10px] text-indigo-500 bg-indigo-50 px-1.5 py-0.5 rounded-md shrink-0">
                                    {{ $isMultiDay ? t('dashboard.multiday') : t('dashboard.all_day') }}
                                </span>
                            @elseif($isMultiDay)
                                <span class="text-[10px] text-gray-400 bg-gray-50 px-1.5 py-0.5 rounded-md shrink-0">{{ t('dashboard.multiday') }}</span>
                            @endif
                        </div>
                    @empty
                        <div class="py-6 flex flex-col items-center gap-2">
                            <x-heroicon-o-calendar class="w-8 h-8 text-gray-200"/>
                            <p class="text-sm text-gray-400">{{ t('dashboard.no_events') }}</p>
                            <a href="{{ route('calendar.index') }}" class="text-xs text-indigo-600 hover:underline">{{ t('dashboard.create_event') }}</a>
                        </div>
                    @endforelse
                </div>

                {{-- Next Events (wenn heute leer) --}}
                @if($todayEvents->isEmpty() && $upcomingEvents->count() > 0)
                    <div class="px-5 pb-4 border-t border-gray-50 pt-3">
                        <p class="text-xs font-medium text-gray-400 mb-2">{{ t('dashboard.next_events') }}</p>
                        @foreach($upcomingEvents as $event)
                            <div class="flex items-center gap-3 py-1.5">
                                <x-heroicon-o-clock class="w-3.5 h-3.5 text-gray-300 shrink-0"/>
                                <p class="text-sm text-gray-600 truncate">{{ $event->title }}</p>
                                <span class="ml-auto text-xs text-gray-400 shrink-0 whitespace-nowrap">
                                    {{ $event->starts_at->setTimezone($tz)->format('d.m. H:i') }}
                                </span>
                            </div>
                        @endforeach
                    </div>
                @endif
            </div>


            {{-- OFFENE AUFGABEN --}}
            <div class="bg-white border border-gray-100 rounded-xl shadow-sm">
                <div class="flex items-center justify-between px-5 pt-4 pb-3 border-b border-gray-50">
                    <div class="flex items-center gap-2.5">
                        <div class="w-7 h-7 rounded-lg bg-teal-50 flex items-center justify-center">
                            <x-heroicon-o-check-circle class="w-4 h-4 text-teal-600"/>
                        </div>
                        <span class="text-sm font-semibold text-gray-800">{{ t('dashboard.open_tasks') }}</span>
                    </div>
                    <div class="flex items-center gap-2">
                        @if($stats['open_tasks'] > 0)
                            <span class="text-xs text-gray-400 bg-gray-50 px-2 py-0.5 rounded-full">{{ $stats['open_tasks'] }}</span>
                        @endif
                        <a href="{{ route('tasks.index') }}" class="text-xs text-indigo-600 hover:underline">{{ t('common.all') }}</a>
                    </div>
                </div>

                <div class="px-5 py-3">
                    @forelse($openTasks as $task)
                        @php $p = $task->priorityClasses(); @endphp
                        <div class="flex items-center gap-3 py-2.5 border-b border-gray-50 last:border-0">
                            <span class="w-2 h-2 rounded-full shrink-0 {{ $p['dot'] }}"></span>
                            <div class="flex-1 min-w-0">
                                <p class="text-sm text-gray-800 truncate {{ $task->isOverdue() ? 'text-red-600' : '' }}">
                                    {{ $task->title }}
                                </p>
                            </div>
                            @php
                                $isOverdue   = $task->due_at && $task->due_at->isPast();
                                $hasReminder = $task->reminder_at
                                    && $task->reminder_at->isFuture()
                                    && !$task->reminder_sent;
                            @endphp
                            <div class="flex items-center gap-1.5 shrink-0">
                                @if($isOverdue)
                                    <span class="text-xs text-red-500 font-medium">
                                        {{ $task->due_at->format('d.m.') }}
                                    </span>
                                    <x-heroicon-o-exclamation-triangle class="w-3.5 h-3.5 text-red-400"/>
                                @elseif($task->due_at)
                                    <span class="text-[11px] text-gray-400 whitespace-nowrap">
                                        {{ $task->due_at->format('d.m.') }}
                                    </span>
                                @endif
                                @if($hasReminder)
                                    <span class="text-xs text-indigo-500 font-medium flex items-center gap-1">
                                        <x-heroicon-o-bell class="w-3 h-3"/>
                                        {{ $task->reminder_at->setTimezone(auth()->user()->timezone ?? 'Europe/Vienna')->format('H:i') }}
                                    </span>
                                @endif
                            </div>
                        </div>
                    @empty
                        <div class="py-6 flex flex-col items-center gap-2">
                            <x-heroicon-o-check-circle class="w-8 h-8 text-gray-200"/>
                            <p class="text-sm text-gray-400">{{ t('dashboard.all_tasks_done') }}</p>
                            <a href="{{ route('tasks.index') }}" class="text-xs text-indigo-600 hover:underline">{{ t('dashboard.new_task') }}</a>
                        </div>
                    @endforelse
                </div>
            </div>

        </div>


        {{-- RECHTE SPALTE (1/3) --}}
        <div class="space-y-5">

            {{-- PLAN + CREDITS --}}
            <div class="bg-white border border-gray-100 rounded-xl shadow-sm p-5 space-y-3">
                <div class="flex items-center justify-between">
                    <span class="text-sm font-semibold text-gray-800">{{ $plan?->name ?? 'Free' }}</span>
                    @if($subscription?->ends_at)
                        <span class="text-[11px] text-gray-400">{{ t('common.until') }} {{ $subscription->ends_at->format('d.m.Y') }}</span>
                    @else
                        <span class="text-[10px] text-green-600 bg-green-50 px-2 py-0.5 rounded-full">{{ t('common.active') }}</span>
                    @endif
                </div>

                @if(auth()->user()->isUnlimitedUser())
                    <div class="flex items-center justify-between">
                        <span class="flex items-center gap-1 text-xs text-gray-500">
                            <x-heroicon-o-bolt class="w-3 h-3 text-amber-500"/>
                            {{ t('dashboard.credits') }}
                        </span>
                        <span style="
                            display: inline-flex; align-items: center; gap: 4px;
                            padding: 2px 8px; border-radius: 20px; font-size: 10px; font-weight: 500;
                            background: #F0FDF4; color: #065F46; border: 1px solid #10B98122;
                        ">
                            <span style="width: 5px; height: 5px; border-radius: 50%; background: #10B981; display: inline-block;"></span>
                            {{ t('dashboard.unlimited') }}
                        </span>
                    </div>
                @elseif($creditLimit > 0)
                    <div>
                        <div class="flex justify-between text-xs text-gray-500 mb-1.5">
                            <span class="flex items-center gap-1">
                                <x-heroicon-o-bolt class="w-3 h-3 text-amber-500"/>
                                {{ t('dashboard.credits_this_month') }}
                            </span>
                            <span class="font-medium text-gray-700">{{ number_format($stats['credits_month']) }} / {{ number_format($creditLimit) }}</span>
                        </div>
                        <div class="w-full bg-gray-100 rounded-full h-1.5">
                            <div class="h-1.5 rounded-full transition-all
                                {{ $usagePercent >= 90 ? 'bg-red-500' : ($usagePercent >= 70 ? 'bg-amber-400' : 'bg-indigo-500') }}"
                                 style="width: {{ $usagePercent }}%"></div>
                        </div>
                    </div>
                @else
                    <p class="text-xs text-gray-400">{{ t('dashboard.no_credit_limit') }}</p>
                @endif

                @if(!auth()->user()->isInternalUser())
                    <a href="{{ route('plans.index') }}"
                       class="block text-center text-xs text-indigo-600 hover:text-indigo-700 border border-indigo-100 hover:border-indigo-200 rounded-lg py-1.5 transition-colors">
                        {{ t('dashboard.manage_plan') }}
                    </a>
                @endif
            </div>


            {{-- LETZTE AKTIVITÄTEN --}}
            <div class="bg-white border border-gray-100 rounded-xl shadow-sm p-5">
                <div class="flex items-center justify-between mb-4">
                    <span class="text-sm font-semibold text-gray-800">{{ t('dashboard.activities') }}</span>
                    <a href="{{ route('activities.index') }}" class="text-xs text-indigo-600 hover:underline">{{ t('common.all') }}</a>
                </div>

                <div class="space-y-1">
                    @forelse($recentActivities as $activity)
                        @php $v = $activity->visual(); @endphp
                        <div class="flex items-start gap-2.5 py-1.5">
                            <div class="w-5 h-5 rounded-md {{ $v['bg'] }} flex items-center justify-center shrink-0 mt-0.5">
                                @if($v['icon'] === 'calendar')          <x-heroicon-o-calendar class="w-3 h-3 {{ $v['text'] }}"/>
                                @elseif($v['icon'] === 'bell')          <x-heroicon-o-bell class="w-3 h-3 {{ $v['text'] }}"/>
                                @elseif($v['icon'] === 'bolt')          <x-heroicon-o-bolt class="w-3 h-3 {{ $v['text'] }}"/>
                                @elseif($v['icon'] === 'user')          <x-heroicon-o-user class="w-3 h-3 {{ $v['text'] }}"/>
                                @elseif($v['icon'] === 'document-text') <x-heroicon-o-document-text class="w-3 h-3 {{ $v['text'] }}"/>
                                @elseif($v['icon'] === 'check-circle')  <x-heroicon-o-check-circle class="w-3 h-3 {{ $v['text'] }}"/>
                                @elseif($v['icon'] === 'link')          <x-heroicon-o-link class="w-3 h-3 {{ $v['text'] }}"/>
                                @else                                   <x-heroicon-o-cog-6-tooth class="w-3 h-3 {{ $v['text'] }}"/>
                                @endif
                            </div>
                            <div class="flex-1 min-w-0">
                                <p class="text-xs text-gray-700 truncate leading-snug">{{ $activity->title }}</p>
                                <p class="text-[10px] text-gray-400">{{ $activity->created_at->diffForHumans() }}</p>
                            </div>
                        </div>
                    @empty
                        <p class="text-xs text-gray-400 py-2">{{ t('dashboard.no_activities') }}</p>
                    @endforelse
                </div>
            </div>


            {{-- LETZTE NOTIZEN --}}
            @if($recentNotes->count() > 0)
                <div class="bg-white border border-gray-100 rounded-xl shadow-sm p-5">
                    <div class="flex items-center justify-between mb-3">
                        <span class="text-sm font-semibold text-gray-800">{{ t('dashboard.notes') }}</span>
                        <a href="{{ route('notes.index') }}" class="text-xs text-indigo-600 hover:underline">{{ t('common.all') }}</a>
                    </div>
                    <div class="space-y-2">
                        @foreach($recentNotes as $note)
                            @php $c = $note->colorClasses(); @endphp
                            <div class="{{ $c['bg'] }} border {{ $c['border'] }} rounded-lg px-3 py-2">
                                @if($note->title)
                                    <p class="text-xs font-medium {{ $c['text'] }} truncate">{{ $note->title }}</p>
                                @endif
                                <p class="text-xs {{ $c['text'] }} truncate {{ $note->title ? 'opacity-75' : '' }}">{{ $note->content }}</p>
                            </div>
                        @endforeach
                    </div>
                </div>
            @endif

        </div>

    </div>


    {{-- ASSISTENT CTA --}}
    <div class="bg-white border border-gray-100 rounded-xl shadow-sm px-5 py-4 flex items-center gap-4">
        <div class="w-9 h-9 rounded-lg bg-indigo-50 flex items-center justify-center shrink-0">
            <x-heroicon-o-sparkles class="w-5 h-5 text-indigo-600"/>
        </div>
        <div class="flex-1">
            <p class="text-sm font-medium text-gray-800">{{ t('dashboard.ai_assistant') }}</p>
            <p class="text-xs text-gray-400">{{ t('dashboard.ai_subtitle') }}</p>
        </div>
        <a href="{{ route('agent.index') }}"
           class="flex items-center gap-2 bg-indigo-600 hover:bg-indigo-700 text-white text-sm font-medium px-4 py-2 rounded-lg transition-colors shrink-0">
            <x-heroicon-o-arrow-right class="w-4 h-4"/>
            {{ t('dashboard.open_assistant') }}
        </a>
    </div>

</div>
