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

<x-base-layout :title="$title">
    <div x-data="{ sidebarOpen: false }" class="min-h-screen flex">

        {{-- Overlay mobile --}}
        <div x-show="sidebarOpen" x-cloak @click="sidebarOpen = false" class="fixed inset-0 bg-black/40 z-30 lg:hidden"></div>

        {{-- Sidebar --}}
        <aside
            :class="sidebarOpen ? 'translate-x-0' : '-translate-x-full lg:translate-x-0'"
            class="fixed inset-y-0 left-0 z-40 w-64 bg-white dark:bg-slate-800 border-r border-slate-200 dark:border-slate-700 transition-transform duration-200 flex flex-col"
        >
            {{-- Header sidebar --}}
            <div class="h-16 flex items-center gap-3 px-5 border-b border-slate-200 dark:border-slate-700 flex-shrink-0">
                @php $logo = \App\Models\VillageSetting::logoUrl(); @endphp
                @if($logo)
                    <img src="{{ $logo }}" class="w-9 h-9 rounded-lg object-cover" alt="Logo Desa">
                @else
                    <div class="w-9 h-9 rounded-lg bg-primary-700 flex items-center justify-center text-white font-bold text-sm">
                        {{ strtoupper(substr(\App\Models\VillageSetting::get('village_name','D'),0,1)) }}
                    </div>
                @endif
                <div class="leading-tight min-w-0">
                    <p class="font-bold text-sm text-slate-800 dark:text-white truncate">
                        {{ \App\Models\VillageSetting::get('village_name', 'Desa') }}
                    </p>
                    <p class="text-[10px] text-slate-400">Sistem Layanan Mandiri Desa</p>
                </div>
            </div>

            {{-- Navigasi --}}
            <nav class="flex-1 overflow-y-auto py-4 px-3 space-y-0.5 scrollbar-thin">

                {{-- Dashboard --}}
                <x-nav-link-admin route="admin.dashboard" icon="layout-dashboard">Dashboard</x-nav-link-admin>

                {{-- KEPENDUDUKAN --}}
                @canany(['penduduk.lihat', 'penduduk.kelola'])
                    <p class="px-3 pt-4 pb-1 text-[10px] font-bold uppercase text-slate-400 tracking-wider">Kependudukan</p>
                    <x-nav-link-admin route="admin.penduduk.*" icon="users">Data Penduduk</x-nav-link-admin>
                    <x-nav-link-admin route="admin.keluarga.*" icon="home">Kartu Keluarga</x-nav-link-admin>
                @endcanany

                @can('wilayah.kelola')
                    <x-nav-link-admin route="admin.wilayah.*" icon="map-pin">Wilayah (Dusun/RW/RT)</x-nav-link-admin>
                @endcan

                {{-- LAPORAN --}}
                @can('laporan.lihat')
                    <p class="px-3 pt-4 pb-1 text-[10px] font-bold uppercase text-slate-400 tracking-wider">Laporan</p>
                    <x-nav-link-admin route="admin.laporan.penduduk" icon="bar-chart-2">Laporan Kependudukan</x-nav-link-admin>
                @endcan

                {{-- LAYANAN SURAT --}}
                @canany(['surat.lihat-semua', 'template-surat.kelola'])
                    <p class="px-3 pt-4 pb-1 text-[10px] font-bold uppercase text-slate-400 tracking-wider">Layanan Surat</p>
                    @can('surat.lihat-semua')
                        <x-nav-link-admin route="admin.surat.index" icon="file-text">Pengajuan Surat</x-nav-link-admin>
                    @endcan
                    @can('template-surat.kelola')
                        <x-nav-link-admin route="admin.jenis-surat.*" icon="file-cog">Jenis &amp; Template</x-nav-link-admin>
                    @endcan
                @endcanany

                {{-- INFORMASI --}}
                @can('berita.kelola')
                    <p class="px-3 pt-4 pb-1 text-[10px] font-bold uppercase text-slate-400 tracking-wider">Informasi</p>
                    <x-nav-link-admin route="admin.berita.*" icon="newspaper">Berita Desa</x-nav-link-admin>
                @endcan

                {{-- ADMINISTRASI --}}
                @canany(['user.kelola', 'role.kelola', 'aktivitas-log.lihat'])
                    <p class="px-3 pt-4 pb-1 text-[10px] font-bold uppercase text-slate-400 tracking-wider">Administrasi</p>
                    @can('user.kelola')
                        <x-nav-link-admin route="admin.user.*" icon="user-cog">Pengguna &amp; Role</x-nav-link-admin>
                    @endcan
                    @can('aktivitas-log.lihat')
                        <x-nav-link-admin route="admin.activity-log" icon="activity">Log Aktivitas</x-nav-link-admin>
                    @endcan
                @endcanany

                {{-- PENGATURAN --}}
                @canany(['pengaturan.kelola', 'backup.kelola'])
                    <p class="px-3 pt-4 pb-1 text-[10px] font-bold uppercase text-slate-400 tracking-wider">Pengaturan</p>
                    @can('pengaturan.kelola')
                        {{-- Identitas Desa (BARU - multi-tab) --}}
                        <x-nav-link-admin route="admin.identitas-desa.index" icon="building-2">Identitas Desa</x-nav-link-admin>
                        <x-nav-link-admin route="admin.perangkat-desa.index" icon="users-2">Perangkat Desa</x-nav-link-admin>
                        {{-- Pengaturan lama (simplified, redirect ke identitas) --}}
                        <x-nav-link-admin route="admin.pengaturan.index" icon="settings">Pengaturan Lain</x-nav-link-admin>
                    @endcan
                    @can('backup.kelola')
                        <x-nav-link-admin route="admin.backup.index" icon="database">Backup Database</x-nav-link-admin>
                    @endcan
                @endcanany

            </nav>

            {{-- User & Logout --}}
            <div class="p-3 border-t border-slate-200 dark:border-slate-700 flex-shrink-0">
                <div class="flex items-center gap-2 px-3 py-2 mb-1 rounded-xl bg-slate-50 dark:bg-slate-700/50">
                    <div class="w-8 h-8 rounded-full bg-gradient-to-br from-primary-500 to-teal-500 flex items-center justify-center text-white text-xs font-bold flex-shrink-0">
                        {{ strtoupper(substr(auth()->user()->name ?? 'U', 0, 1)) }}
                    </div>
                    <div class="min-w-0">
                        <p class="text-xs font-semibold text-slate-800 dark:text-white truncate">{{ auth()->user()->name }}</p>
                        <p class="text-[10px] text-slate-400 truncate">{{ auth()->user()->roles->pluck('name')->join(', ') }}</p>
                    </div>
                </div>
                <form method="POST" action="{{ route('logout') }}">
                    @csrf
                    <button type="submit" class="w-full flex items-center gap-2 px-3 py-2 rounded-xl text-sm font-medium text-red-600 hover:bg-red-50 dark:hover:bg-red-900/20 transition">
                        <x-icon name="log-out" class="w-4 h-4" />
                        Keluar
                    </button>
                </form>
            </div>
        </aside>

        {{-- Main content --}}
        <div class="flex-1 lg:ml-64 flex flex-col min-h-screen">

            {{-- Header --}}
            <header class="h-16 bg-white/80 dark:bg-slate-800/80 backdrop-blur-md border-b border-slate-200 dark:border-slate-700 sticky top-0 z-20 flex items-center justify-between px-4 lg:px-6">
                <div class="flex items-center gap-3">
                    <button @click="sidebarOpen = !sidebarOpen" class="lg:hidden p-2 rounded-lg hover:bg-slate-100 dark:hover:bg-slate-700">
                        <x-icon name="menu" class="w-5 h-5" />
                    </button>
                    <h1 class="font-bold text-lg text-slate-800 dark:text-white">{{ $title ?? 'Dashboard' }}</h1>
                </div>

                <div class="flex items-center gap-2">
                    {{-- Dark mode toggle --}}
                    <button @click="darkMode = !darkMode" class="p-2 rounded-lg hover:bg-slate-100 dark:hover:bg-slate-700 transition">
                        <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>

                    {{-- Notifikasi --}}
                    <a href="{{ route('admin.surat.index', ['status' => 'pending']) }}"
                       class="relative p-2 rounded-lg hover:bg-slate-100 dark:hover:bg-slate-700 transition">
                        <x-icon name="bell" class="w-5 h-5" />
                        @php
                            $pendingCount = \App\Models\LetterRequest::where('status', 'pending')->count();
                        @endphp
                        @if($pendingCount > 0)
                        <span class="absolute top-1 right-1 w-4 h-4 rounded-full bg-red-500 text-white text-[9px] flex items-center justify-center font-bold">
                            {{ min($pendingCount, 9) }}{{ $pendingCount > 9 ? '+' : '' }}
                        </span>
                        @endif
                    </a>

                    {{-- Profil dropdown --}}
                    <div class="relative" x-data="{ open: false }">
                        <button @click="open = !open" class="flex items-center gap-2 pl-2 pr-3 py-1.5 rounded-xl hover:bg-slate-100 dark:hover:bg-slate-700 transition">
                            <div class="w-8 h-8 rounded-full bg-gradient-to-br from-primary-500 to-teal-500 flex items-center justify-center text-white text-xs font-bold">
                                {{ strtoupper(substr(auth()->user()->name ?? 'U', 0, 1)) }}
                            </div>
                            <span class="text-sm font-medium text-slate-700 dark:text-slate-200 hidden sm:block">{{ auth()->user()->name }}</span>
                            <x-icon name="chevron-down" class="w-4 h-4 text-slate-400" />
                        </button>
                        <div x-show="open" x-cloak @click.outside="open = false"
                             class="absolute right-0 mt-2 w-52 bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-2xl shadow-xl p-1.5 z-50">
                            <a href="{{ route('admin.dashboard') }}" class="flex items-center gap-2 px-3 py-2 text-sm rounded-xl hover:bg-slate-100 dark:hover:bg-slate-700 text-slate-700 dark:text-slate-300 transition">
                                <x-icon name="user" class="w-4 h-4 text-slate-400"/>
                                Profil Saya
                            </a>
                            <div class="h-px bg-slate-100 dark:bg-slate-700 my-1"></div>
                            <form method="POST" action="{{ route('logout') }}">
                                @csrf
                                <button type="submit" class="w-full text-left flex items-center gap-2 px-3 py-2 text-sm rounded-xl hover:bg-red-50 dark:hover:bg-red-900/20 text-red-600 transition">
                                    <x-icon name="log-out" class="w-4 h-4"/>
                                    Keluar
                                </button>
                            </form>
                        </div>
                    </div>
                </div>
            </header>

            {{-- Page content --}}
            <main class="flex-1 p-4 lg:p-6">
                {{ $slot }}
            </main>

            {{-- Footer admin --}}
            <footer class="px-6 py-3 border-t border-slate-200 dark:border-slate-700 text-center">
                <p class="text-xs text-slate-400">
                    {{ \App\Models\VillageSetting::get('village_name', 'Desa Digital') }} &copy; {{ date('Y') }}
                    &middot; Layanan Mandiri Desa Digital
                </p>
            </footer>
        </div>
    </div>
</x-base-layout>