@props(['title' => null])

<x-base-layout :title="$title">
    <div x-data="{ profileMenu: false }" class="min-h-screen flex flex-col max-w-2xl mx-auto bg-slate-50 dark:bg-slate-900 pb-20 lg:pb-0">

        {{-- Topbar --}}
        <header class="sticky top-0 z-20 glass border-b border-slate-200/60 dark:border-slate-700/60">
            <div class="flex items-center justify-between px-4 py-3">

                {{-- Kiri: Logo + dropdown profil --}}
                <div class="relative">
                    <button @click="profileMenu = !profileMenu" class="flex items-center gap-3 focus:outline-none">
                        @php $logo = \App\Models\VillageSetting::get('village_logo'); @endphp
                        @if($logo)
                            <img src="{{ Storage::url($logo) }}" class="w-9 h-9 rounded-xl object-cover" alt="Logo">
                        @else
                            <div class="w-9 h-9 rounded-xl bg-primary-700 flex items-center justify-center text-white font-bold text-sm">D</div>
                        @endif
                        <div class="leading-tight text-left">
                            <p class="text-xs text-slate-400">Selamat datang,</p>
                            <p class="font-bold text-sm text-slate-800 dark:text-white">{{ auth()->user()->name }}</p>
                        </div>
                        <x-icon name="chevron-down" class="w-4 h-4 text-slate-400" />
                    </button>

                    {{-- Dropdown menu --}}
                    <div x-show="profileMenu" x-cloak @click.outside="profileMenu = false" x-transition
                        class="absolute left-0 top-full mt-2 w-52 bg-white dark:bg-slate-800 rounded-2xl shadow-soft border border-slate-100 dark:border-slate-700 py-1 z-50">
                        <a href="{{ route('warga.profil.edit') }}" class="flex items-center gap-2 px-4 py-2.5 text-sm hover:bg-slate-50 dark:hover:bg-slate-700 text-slate-700 dark:text-slate-200">
                            <x-icon name="user-check" class="w-4 h-4 text-slate-400" /> Profil Kependudukan
                        </a>
                        <a href="{{ route('akun.edit') }}" class="flex items-center gap-2 px-4 py-2.5 text-sm hover:bg-slate-50 dark:hover:bg-slate-700 text-slate-700 dark:text-slate-200">
                            <x-icon name="settings" class="w-4 h-4 text-slate-400" /> Pengaturan Akun
                        </a>
                        <div class="border-t border-slate-100 dark:border-slate-700 my-1"></div>
                        <form method="POST" action="{{ route('logout') }}">
                            @csrf
                            <button type="submit" class="w-full flex items-center gap-2 px-4 py-2.5 text-sm text-red-600 hover:bg-red-50 dark:hover:bg-red-900/20">
                                <x-icon name="log-out" class="w-4 h-4" /> Keluar
                            </button>
                        </form>
                    </div>
                </div>

                {{-- Kanan: dark mode + notifikasi --}}
                <div class="flex items-center gap-1">
                    <button @click="darkMode = !darkMode" class="p-2 rounded-full hover:bg-slate-100 dark:hover:bg-slate-700">
                        <x-icon name="sun" x-show="darkMode" class="w-5 h-5" />
                        <x-icon name="moon" x-show="!darkMode" class="w-5 h-5" />
                    </button>
                    <a href="{{ route('warga.notifikasi') }}" class="relative p-2 rounded-full hover:bg-slate-100 dark:hover:bg-slate-700">
                        <x-icon name="bell" class="w-5 h-5" />
                        @php $unread = auth()->user()->unreadNotifications()->count(); @endphp
                        @if($unread > 0)
                            <span class="absolute top-1 right-1 w-4 h-4 rounded-full bg-red-500 text-white text-[9px] font-bold flex items-center justify-center">{{ $unread > 9 ? '9+' : $unread }}</span>
                        @endif
                    </a>
                </div>
            </div>
        </header>

        <main class="flex-1 px-4 py-5">
            {{ $slot }}
        </main>

        {{-- Bottom navigation (mobile) --}}
        <nav class="fixed bottom-0 inset-x-0 lg:hidden bg-white dark:bg-slate-800 border-t border-slate-200 dark:border-slate-700 z-30">
            <div class="max-w-2xl mx-auto grid grid-cols-4">
                <x-bottom-nav-link route="warga.dashboard" icon="layout-dashboard" label="Beranda" />
                <x-bottom-nav-link route="warga.surat.pilih-jenis" icon="file-text" label="Ajukan" />
                <x-bottom-nav-link route="warga.surat.riwayat" icon="clock" label="Riwayat" />
                <x-bottom-nav-link route="warga.profil.edit" icon="user-check" label="Profil" />
            </div>
        </nav>
    </div>
</x-base-layout>