@php
    $currentUser = auth()->user();
    $userRole = strtolower((string) ($currentUser->role ?? ''));
    $roleBadgeClass = match ($userRole) {
        'developer' => 'bg-purple-50 text-purple-700 dark:bg-purple-500/15 dark:text-purple-400',
        'owner' => 'bg-warning-50 text-warning-700 dark:bg-warning-500/15 dark:text-warning-400',
        'spv', 'svp', 'supervisor' => 'bg-teal-50 text-teal-700 dark:bg-teal-500/15 dark:text-teal-400',
        'designer', 'design' => 'bg-brand-50 text-brand-700 dark:bg-brand-500/15 dark:text-brand-400',
        'kasir', 'cashier' => 'bg-success-50 text-success-700 dark:bg-success-500/15 dark:text-success-400',
        'operator' => 'bg-blue-light-50 text-blue-light-700 dark:bg-blue-light-500/15 dark:text-blue-light-400',
        'finishing' => 'bg-orange-50 text-orange-700 dark:bg-orange-500/15 dark:text-orange-400',
        'instalasi', 'installation' => 'bg-cyan-50 text-cyan-700 dark:bg-cyan-500/15 dark:text-cyan-300',
        'administrasi', 'admin', 'administrator' => 'bg-gray-100 text-gray-700 dark:bg-gray-500/10 dark:text-gray-300',
        default => 'bg-gray-100 text-gray-700 dark:bg-gray-500/10 dark:text-gray-300',
    };
@endphp

<div
    class="relative"
    x-data="{
        dropdownOpen: false,
        panelStyle: '',
        toggleDropdown() {
            this.dropdownOpen = !this.dropdownOpen;

            if (this.dropdownOpen) {
                this.$nextTick(() => this.updatePosition());
            }
        },
        closeDropdown() {
            this.dropdownOpen = false;
        },
        updatePosition() {
            if (!this.$refs.userButton) return;

            const rect = this.$refs.userButton.getBoundingClientRect();
            const panelWidth = 260;
            const gap = 14;
            const right = Math.max(12, window.innerWidth - rect.right);
            const maxLeft = Math.max(12, window.innerWidth - panelWidth - 12);
            const preferredLeft = Math.min(maxLeft, Math.max(12, rect.right - panelWidth));

            this.panelStyle = `position: fixed; top: ${rect.bottom + gap}px; right: ${right}px; width: ${panelWidth}px; max-width: calc(100vw - 24px); z-index: 999999;`;

            if (window.innerWidth < panelWidth + 24) {
                this.panelStyle = `position: fixed; top: ${rect.bottom + gap}px; left: 12px; right: 12px; width: auto; z-index: 999999;`;
            } else if (right + panelWidth > window.innerWidth - 12) {
                this.panelStyle = `position: fixed; top: ${rect.bottom + gap}px; left: ${preferredLeft}px; width: ${panelWidth}px; z-index: 999999;`;
            }
        }
    }"
    x-effect="if ($store.sidebar?.isMobileOpen) dropdownOpen = false"
    @keydown.escape.window="closeDropdown()"
    @resize.window="if (dropdownOpen) updatePosition()"
    @scroll.window.throttle.100ms="if (dropdownOpen) updatePosition()"
>
    <button
        x-ref="userButton"
        class="relative z-[100] flex items-center text-gray-700 dark:text-gray-400"
        @click.prevent.stop="toggleDropdown()"
        type="button"
        aria-haspopup="true"
        :aria-expanded="dropdownOpen ? 'true' : 'false'"
    >
        <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($currentUser->name ?? 'U', 0, 2)) }}
        </span>

        <span class="mr-1 block font-medium text-theme-sm">{{ $currentUser->name ?? 'User' }}</span>

        <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>

    <template x-teleport="body">
        <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"
            :style="panelStyle"
            class="flex flex-col rounded-2xl border border-gray-200 bg-white p-3 shadow-theme-lg dark:border-gray-800 dark:bg-gray-dark"
            @click.stop
            @click.outside="closeDropdown()"
        >
            <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">{{ $currentUser->name ?? 'User' }}</span>
                <span class="mt-0.5 block text-theme-xs text-gray-500 dark:text-gray-400">{{ $currentUser->email ?? '-' }}</span>
                <span class="mt-1 inline-flex rounded-full px-2 py-0.5 text-xs font-medium {{ $roleBadgeClass }}">
                    {{ $userRole === 'instalasi' ? 'Instalasi' : (method_exists($currentUser, 'getRoleLabel') ? $currentUser->getRoleLabel() : ucfirst($currentUser->role ?? '-')) }}
                </span>
            </div>

            <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 max-h-56 flex-col gap-1 overflow-y-auto pr-1">
                        @foreach($switchUsers as $switchUser)
                            @php
                                $switchRole = strtolower((string) ($switchUser->role ?? ''));
                                $switchBadgeClass = match ($switchRole) {
                                    'owner' => 'bg-warning-50 text-warning-700 dark:bg-warning-500/15 dark:text-warning-400',
                                    'spv', 'svp', 'supervisor' => 'bg-teal-50 text-teal-700 dark:bg-teal-500/15 dark:text-teal-400',
                                    'designer', 'design' => 'bg-brand-50 text-brand-700 dark:bg-brand-500/15 dark:text-brand-400',
                                    'kasir', 'cashier' => 'bg-success-50 text-success-700 dark:bg-success-500/15 dark:text-success-400',
                                    'operator' => 'bg-blue-light-50 text-blue-light-700 dark:bg-blue-light-500/15 dark:text-blue-light-400',
                                    'finishing' => 'bg-orange-50 text-orange-700 dark:bg-orange-500/15 dark:text-orange-400',
                                    'instalasi', 'installation' => 'bg-cyan-50 text-cyan-700 dark:bg-cyan-500/15 dark:text-cyan-300',
                                    default => 'bg-gray-100 text-gray-700 dark:bg-gray-500/10 dark:text-gray-300',
                                };
                            @endphp

                            <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] {{ $switchBadgeClass }}">
                                    {{ $switchRole === 'instalasi' ? 'Instalasi' : (method_exists($switchUser, 'getRoleLabel') ? $switchUser->getRoleLabel() : ucfirst($switchUser->role ?? '-')) }}
                                </span>
                            </a>
                        @endforeach
                    </div>
                </div>
            @endif

            <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>
    </template>
</div>