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

    {{-- Back Link --}}
    <a href="{{ route('admin.users.detail', $user) }}" wire:navigate class="inline-flex items-center gap-1.5 text-sm text-gray-500 hover:text-gray-700 transition-colors">
        <x-heroicon-o-arrow-left class="w-4 h-4"/>
        {{ t('admin.calendar.back_to') }} {{ $user->name }}
    </a>

    {{-- Header --}}
    <div>
        <h1 class="text-xl font-semibold text-gray-800">{{ t('admin.calendar.title') }} {{ $user->name }}</h1>
        <p class="text-sm text-gray-500 mt-1">{{ $events->count() }} {{ t('admin.calendar.events_total') }}</p>
    </div>

    @if($events->isEmpty())
        <div class="bg-white border border-gray-100 rounded-xl shadow-sm px-5 py-12 text-center">
            <x-heroicon-o-calendar class="w-10 h-10 text-gray-300 mx-auto mb-3"/>
            <p class="text-sm text-gray-400">{{ t('admin.calendar.no_events') }}</p>
        </div>
    @else
        @php
            $grouped = $events->groupBy(fn($e) => ($e->starts_at ?? $e->start_date)?->translatedFormat('F Y') ?? t('admin.calendar.no_date'));
        @endphp

        @foreach($grouped as $month => $monthEvents)
            <div>
                {{-- Monats-Header --}}
                <div class="flex items-center gap-3 mb-3">
                    <h2 class="text-sm font-semibold text-gray-700">{{ $month }}</h2>
                    <span class="text-[10px] font-medium px-1.5 py-0.5 rounded-full bg-gray-100 text-gray-500">{{ $monthEvents->count() }}</span>
                    <div class="flex-1 border-t border-gray-100"></div>
                </div>

                @php
                    $byDay = $monthEvents->groupBy(fn($e) => ($e->starts_at ?? $e->start_date)?->format('Y-m-d') ?? 'none');
                @endphp

                <div class="space-y-2">
                    @foreach($byDay as $date => $dayEvents)
                        @php
                            $dateObj = $date !== 'none' ? \Carbon\Carbon::parse($date) : null;
                        @endphp

                        <div class="flex gap-4">
                            {{-- Datum-Spalte --}}
                            <div class="w-14 shrink-0 text-center pt-2.5">
                                @if($dateObj)
                                    <p class="text-xs font-medium text-gray-400 uppercase">{{ $dateObj->translatedFormat('D') }}</p>
                                    <p class="text-lg font-bold text-gray-800 -mt-0.5">{{ $dateObj->format('d') }}</p>
                                @else
                                    <p class="text-xs text-gray-400">-</p>
                                @endif
                            </div>

                            {{-- Events des Tages --}}
                            <div class="flex-1 space-y-1.5">
                                @foreach($dayEvents as $event)
                                    <button wire:click="openEvent('{{ $event->id }}')"
                                            class="w-full text-left bg-white border border-gray-100 rounded-lg px-4 py-2.5 flex items-center gap-3 hover:shadow-sm hover:border-indigo-200 transition-all cursor-pointer group">
                                        {{-- Farb-Indikator --}}
                                        <div class="w-1 h-8 rounded-full shrink-0" style="background-color: {{ $event->color ?? '#6366f1' }}"></div>

                                        {{-- Inhalt --}}
                                        <div class="flex-1 min-w-0">
                                            <p class="text-sm font-medium text-gray-800 truncate group-hover:text-indigo-700 transition-colors">{{ $event->title }}</p>
                                            <div class="flex items-center gap-2 mt-0.5">
                                                @if($event->is_all_day)
                                                    <span class="text-[10px] font-medium px-1.5 py-0.5 rounded-md bg-blue-50 text-blue-700">{{ t('calendar.all_day_full') }}</span>
                                                @else
                                                    <span class="text-xs text-gray-400">
                                                        {{ $event->starts_at?->format('H:i') }}{{ $event->ends_at ? ' – ' . $event->ends_at->format('H:i') : '' }}
                                                    </span>
                                                @endif

                                                @if($event->notes)
                                                    <span class="text-xs text-gray-400 truncate max-w-[200px]">
                                                        · {{ Str::limit($event->notes, 40) }}
                                                    </span>
                                                @endif
                                            </div>
                                        </div>

                                        {{-- Pfeil --}}
                                        <x-heroicon-o-chevron-right class="w-4 h-4 text-gray-300 group-hover:text-indigo-400 shrink-0 transition-colors"/>
                                    </button>
                                @endforeach
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        @endforeach
    @endif


    {{-- EVENT DETAIL SIDEBAR --}}
    <div
        x-data="{ open: @entangle('sidebarOpen') }"
        x-cloak
        class="fixed inset-0 z-50 pointer-events-none"
    >
        {{-- Backdrop --}}
        <div
            x-show="open"
            x-transition.opacity
            class="absolute inset-0 bg-black/10 pointer-events-auto"
            wire:click="closeSidebar"
        ></div>

        {{-- Panel --}}
        <div
            x-show="open"
            x-transition:enter="transition ease-out duration-300"
            x-transition:enter-start="translate-x-full"
            x-transition:enter-end="translate-x-0"
            x-transition:leave="transition ease-in duration-200"
            x-transition:leave-start="translate-x-0"
            x-transition:leave-end="translate-x-full"
            class="absolute top-0 right-0 h-full w-[420px] max-w-full bg-white border-l border-gray-100 shadow-xl flex flex-col pointer-events-auto"
        >
            @if($selectedEvent)
                {{-- Header --}}
                <div class="shrink-0 px-5 py-4 border-b border-gray-100 flex justify-between items-center">
                    <div class="flex items-center gap-3">
                        <div class="w-8 h-8 rounded-lg flex items-center justify-center" style="background-color: {{ $selectedEvent->color ?? '#6366f1' }}20">
                            <x-heroicon-o-calendar class="w-4 h-4" style="color: {{ $selectedEvent->color ?? '#6366f1' }}"/>
                        </div>
                        <div>
                            <p class="font-semibold text-gray-800 text-sm leading-tight">{{ t('admin.calendar.event_details') }}</p>
                            <p class="text-xs text-gray-400 mt-0.5">{{ t('admin.calendar.read_only') }}</p>
                        </div>
                    </div>
                    <button wire:click="closeSidebar"
                            class="w-7 h-7 rounded-md flex items-center justify-center text-gray-400 hover:text-gray-600 hover:bg-gray-100 transition-colors">
                        <x-heroicon-o-x-mark class="w-4 h-4"/>
                    </button>
                </div>

                {{-- Content --}}
                <div class="flex-1 overflow-y-auto px-5 py-5 space-y-5">

                    {{-- Titel --}}
                    <div>
                        <div class="flex items-center gap-2 mb-1">
                            @if($selectedEvent->color)
                                <span class="w-3 h-3 rounded-full shrink-0" style="background-color: {{ $selectedEvent->color }}"></span>
                            @endif
                            <h3 class="text-lg font-semibold text-gray-800">{{ $selectedEvent->title }}</h3>
                        </div>
                    </div>

                    {{-- Datum & Zeit --}}
                    <div class="bg-gray-50 rounded-lg p-4 space-y-3">
                        <div class="flex items-center gap-3">
                            <x-heroicon-o-calendar-days class="w-4 h-4 text-gray-400 shrink-0"/>
                            <div>
                                <p class="text-sm text-gray-700">
                                    {{ ($selectedEvent->starts_at ?? $selectedEvent->start_date)?->translatedFormat('l, d. F Y') ?? '-' }}
                                </p>
                                @if($selectedEvent->ends_at && $selectedEvent->starts_at?->toDateString() !== $selectedEvent->ends_at->toDateString())
                                    <p class="text-xs text-gray-400 mt-0.5">
                                        {{ t('common.until') }} {{ $selectedEvent->ends_at->translatedFormat('l, d. F Y') }}
                                    </p>
                                @endif
                            </div>
                        </div>

                        <div class="flex items-center gap-3">
                            <x-heroicon-o-clock class="w-4 h-4 text-gray-400 shrink-0"/>
                            <p class="text-sm text-gray-700">
                                @if($selectedEvent->is_all_day)
                                    <span class="text-[10px] font-medium px-1.5 py-0.5 rounded-md bg-blue-50 text-blue-700">{{ t('calendar.all_day_full') }}</span>
                                @else
                                    {{ $selectedEvent->starts_at?->format('H:i') }}
                                    @if($selectedEvent->ends_at)
                                        – {{ $selectedEvent->ends_at->format('H:i') }}
                                        <span class="text-xs text-gray-400 ml-1">
                                            ({{ $selectedEvent->starts_at->diff($selectedEvent->ends_at)->format('%hh %imin') }})
                                        </span>
                                    @endif
                                @endif
                            </p>
                        </div>
                    </div>

                    {{-- Notizen --}}
                    @if($selectedEvent->notes)
                        <div>
                            <p class="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-2">{{ t('admin.calendar.notes') }}</p>
                            <div class="bg-gray-50 rounded-lg p-4">
                                <p class="text-sm text-gray-700 whitespace-pre-line">{{ $selectedEvent->notes }}</p>
                            </div>
                        </div>
                    @endif

                    {{-- Meta --}}
                    <div>
                        <p class="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-2">{{ t('admin.calendar.details') }}</p>
                        <div class="space-y-2">
                            <div class="flex items-center justify-between text-sm">
                                <span class="text-gray-500">{{ t('admin.calendar.created') }}</span>
                                <span class="text-gray-700">{{ $selectedEvent->created_at?->translatedFormat('d. M Y, H:i') }}</span>
                            </div>
                            <div class="flex items-center justify-between text-sm">
                                <span class="text-gray-500">{{ t('admin.calendar.updated') }}</span>
                                <span class="text-gray-700">{{ $selectedEvent->updated_at?->translatedFormat('d. M Y, H:i') }}</span>
                            </div>
                            @if($selectedEvent->google_event_id)
                                <div class="flex items-center justify-between text-sm">
                                    <span class="text-gray-500">{{ t('admin.calendar.google_sync') }}</span>
                                    <span class="text-[10px] font-medium px-1.5 py-0.5 rounded-md bg-green-50 text-green-700">{{ t('admin.calendar.connected') }}</span>
                                </div>
                            @endif
                            <div class="flex items-center justify-between text-sm">
                                <span class="text-gray-500">ID</span>
                                <span class="text-xs text-gray-400 font-mono">{{ Str::limit($selectedEvent->id, 12) }}</span>
                            </div>
                        </div>
                    </div>

                </div>
            @endif
        </div>
    </div>

</div>
