<div
    class="relative"
    x-data="{
        dropdownOpen: false,
        toggleDropdown() {
            this.dropdownOpen = !this.dropdownOpen;
        },
        closeDropdown() {
            this.dropdownOpen = false;
        }
    }"
    x-effect="if ($store.sidebar?.isMobileOpen) dropdownOpen = false"
    @click.away="closeDropdown()"
>
    <!-- User Button -->
    <button
        class="flex items-center text-gray-700 dark:text-gray-400"
        @click.prevent="toggleDropdown()"
        type="button"
    >
        <span class="mr-3 flex h-11 w-11 items-center justify-center overflow-hidden rounded-full bg-brand-500 font-semibold text-white">
            {{ strtoupper(substr(auth()->user()->name, 0, 2)) }}
        </span>

        <span class="mr-1 block font-medium text-theme-sm">{{ auth()->user()->name }}</span>

        <!-- Chevron Icon -->
        <svg
            class="h-5 w-5 transition-transform duration-200"
            :class="{ 'rotate-180': dropdownOpen }"
            fill="none"
            stroke="currentColor"
            viewBox="0 0 24 24"
        >
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
        </svg>
    </button>

    <!-- Dropdown Start -->
    <div
        x-show="dropdownOpen"
        x-cloak
        x-transition:enter="transition ease-out duration-100"
        x-transition:enter-start="transform opacity-0 scale-95"
        x-transition:enter-end="transform opacity-100 scale-100"
        x-transition:leave="transition ease-in duration-75"
        x-transition:leave-start="transform opacity-100 scale-100"
        x-transition:leave-end="transform opacity-0 scale-95"
        class="absolute right-0 z-10 mt-[17px] flex w-[260px] flex-col rounded-2xl border border-gray-200 bg-white p-3 shadow-theme-lg dark:border-gray-800 dark:bg-gray-dark"
        style="display: none;"
    >
        <!-- User Info -->
        <div class="border-b border-gray-200 pb-3 dark:border-gray-800">
            <span class="block text-theme-sm font-medium text-gray-700 dark:text-gray-400">{{ auth()->user()->name }}</span>
            <span class="mt-0.5 block text-theme-xs text-gray-500 dark:text-gray-400">{{ auth()->user()->email }}</span>
            <span class="mt-1 inline-flex rounded-full px-2 py-0.5 text-xs font-medium
                @if(auth()->user()->role === 'developer') bg-purple-50 text-purple-700 dark:bg-purple-500/15 dark:text-purple-400
                @elseif(auth()->user()->role === 'owner') bg-warning-50 text-warning-700 dark:bg-warning-500/15 dark:text-warning-400
                @elseif(auth()->user()->role === 'spv') bg-teal-50 text-teal-700 dark:bg-teal-500/15 dark:text-teal-400
                @elseif(auth()->user()->role === 'designer') bg-brand-50 text-brand-700 dark:bg-brand-500/15 dark:text-brand-400
                @elseif(auth()->user()->role === 'kasir') bg-success-50 text-success-700 dark:bg-success-500/15 dark:text-success-400
                @elseif(auth()->user()->role === 'operator') bg-blue-light-50 text-blue-light-700 dark:bg-blue-light-500/15 dark:text-blue-light-400
                @elseif(auth()->user()->role === 'finishing') bg-orange-50 text-orange-700 dark:bg-orange-500/15 dark:text-orange-400
                @elseif(auth()->user()->role === 'administrasi') bg-gray-100 text-gray-700 dark:bg-gray-500/10 dark:text-gray-300
                @else bg-gray-100 text-gray-700 dark:bg-gray-500/10 dark:text-gray-300
                @endif">
                {{ auth()->user()->getRoleLabel() }}
            </span>
        </div>

        <!-- Menu Items -->
        <ul class="flex flex-col gap-1 border-b border-gray-200 pb-3 pt-3 dark:border-gray-800">
            @can('manage users')
            <li>
                <a
                    href="{{ route('users.index') }}"
                    class="group flex items-center gap-3 rounded-lg px-3 py-2 text-theme-sm font-medium text-gray-700 hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-white/5 dark:hover:text-gray-300"
                    @click="closeDropdown()"
                >
                    <span class="text-gray-500 group-hover:text-gray-700 dark:group-hover:text-gray-300">
                        <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197m13.5-9a2.5 2.5 0 11-5 0 2.5 2.5 0 015 0z" />
                        </svg>
                    </span>
                    Manajemen User
                </a>
            </li>
            @endcan

            @can('manage settings')
            <li>
                <a
                    href="{{ route('settings.index') }}"
                    class="group flex items-center gap-3 rounded-lg px-3 py-2 text-theme-sm font-medium text-gray-700 hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-white/5 dark:hover:text-gray-300"
                    @click="closeDropdown()"
                >
                    <span class="text-gray-500 group-hover:text-gray-700 dark:group-hover:text-gray-300">
                        <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
                        </svg>
                    </span>
                    Pengaturan
                </a>
            </li>
            @endcan
        </ul>

        @if(config('app.debug'))
        <div class="border-b border-gray-200 px-4 py-2 dark:border-gray-800">
            <p class="mb-2 text-xs font-bold uppercase text-gray-400">Switch Account</p>

            @php
                $switchUsers = \App\Models\User::where('is_active', true)
                    ->where('id', '!=', auth()->id())
                    ->where('role', '!=', 'developer')
                    ->orderBy('role')
                    ->orderBy('name')
                    ->get();
            @endphp

            <div class="flex flex-col gap-1">
                @foreach($switchUsers as $switchUser)
                    <a
                        href="{{ route('dev.switch-user', $switchUser->email) }}"
                        class="flex items-center justify-between rounded-md px-2 py-1.5 text-xs font-medium text-gray-600 transition-colors hover:bg-gray-100 hover:text-gray-900 dark:text-gray-400 dark:hover:bg-white/5 dark:hover:text-white"
                        @click="closeDropdown()"
                    >
                        <span>{{ $switchUser->name }}</span>

                        <span class="rounded px-1.5 py-0.5 text-[10px]
                            @if($switchUser->role === 'owner') bg-warning-50 text-warning-700 dark:bg-warning-500/15 dark:text-warning-400
                            @elseif($switchUser->role === 'spv') bg-teal-50 text-teal-700 dark:bg-teal-500/15 dark:text-teal-400
                            @elseif($switchUser->role === 'designer') bg-brand-50 text-brand-700 dark:bg-brand-500/15 dark:text-brand-400
                            @elseif($switchUser->role === 'kasir') bg-success-50 text-success-700 dark:bg-success-500/15 dark:text-success-400
                            @elseif($switchUser->role === 'operator') bg-blue-light-50 text-blue-light-700 dark:bg-blue-light-500/15 dark:text-blue-light-400
                            @elseif($switchUser->role === 'finishing') bg-orange-50 text-orange-700 dark:bg-orange-500/15 dark:text-orange-400
                            @elseif($switchUser->role === 'administrasi') bg-gray-100 text-gray-700 dark:bg-gray-500/10 dark:text-gray-300
                            @else bg-gray-100 text-gray-700 dark:bg-gray-500/10 dark:text-gray-300
                            @endif"
                        >
                            {{ method_exists($switchUser, 'getRoleLabel') ? $switchUser->getRoleLabel() : ucfirst($switchUser->role ?? '-') }}
                        </span>
                    </a>
                @endforeach
            </div>
        </div>
        @endif

        <!-- Sign Out -->
        <form method="POST" action="{{ route('logout') }}" @submit="closeDropdown()">
            @csrf
            <button
                type="submit"
                class="group mt-3 flex w-full items-center gap-3 rounded-lg px-3 py-2 text-theme-sm font-medium text-gray-700 hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-white/5 dark:hover:text-gray-300"
            >
                <span class="text-gray-500 group-hover:text-gray-700 dark:group-hover:text-gray-300">
                    <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"></path>
                    </svg>
                </span>
                Keluar
            </button>
        </form>
    </div>
    <!-- Dropdown End -->
</div>