@props([
    'guard' => 'web',
    'variant' => 'admin',
    'showHomeButton' => false,
    'showDashboardLink' => true,
    'showProfileLink' => false,
    'showMemberLink' => true,
    'homeUrl' => url('/'),
    'homeLabel' => '사이트 홈',
    'dashboardUrl' => url('/'),
    'dashboardLabel' => '대시보드',
    'profileUrl' => url('/'),
    'profileLabel' => '정보수정',
    'memberUrl' => url('/'),
    'memberLabel' => '회원관리',
    'logoutUrl' => url('/'),
])

@php
    $auth = auth($guard);
    $currentUser = $auth->user();
    $isAuthenticated = $auth->check();
    $profileInitial = mb_substr($currentUser?->name ?? 'U', 0, 1);
    $menuTriggerClass = 'grid h-10 w-10 cursor-pointer place-items-center rounded-full bg-primary-soft text-sm font-extrabold c-primary transition-colors hover:bg-primary-soft/80';
    $menuPanelClass = 'absolute right-0 top-[calc(100%+0.5rem)] z-50 hidden w-44 overflow-hidden rounded-xl border border-muted bg-card p-1 text-[rgb(var(--color-text-main-rgb))] shadow-[0_18px_40px_rgba(15,23,42,0.12)]';
@endphp

<div class="flex items-center gap-2">
    @if ($showHomeButton)
        <x-ui.button
            href="{{ $homeUrl }}"
            variant="ghost"
            size="sm"
            iconOnly
            class="h-10 w-10 rounded-full"
            aria-label="{{ $homeLabel }}"
            title="{{ $homeLabel }}"
        >
            <svg viewBox="0 0 24 24" class="h-5 w-5" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                <path d="M3 11.5 12 4l9 7.5"></path>
                <path d="M5 10.5V20h14v-9.5"></path>
                <path d="M9 20v-6h6v6"></path>
            </svg>
        </x-ui.button>
    @endif

    @if ($isAuthenticated)
        <div class="relative" data-profile-menu data-profile-variant="{{ $variant }}">
            <button
                type="button"
                class="{{ $menuTriggerClass }}"
                aria-label="프로필 메뉴"
                aria-expanded="false"
                data-profile-menu-toggle
            >
                {{ $profileInitial }}
            </button>

            <div class="{{ $menuPanelClass }}" data-profile-menu-panel>
                @if ($showDashboardLink)
                    <a href="{{ $dashboardUrl }}" class="flex w-full cursor-pointer items-center rounded-xl px-3 py-2 text-sm font-medium text-[rgb(var(--color-text-main-rgb))] transition-colors hover:bg-surface1">
                        {{ $dashboardLabel }}
                    </a>
                @endif

                @if ($showProfileLink)
                    <a href="{{ $profileUrl }}" class="flex w-full cursor-pointer items-center rounded-xl px-3 py-2 text-sm font-medium text-[rgb(var(--color-text-main-rgb))] transition-colors hover:bg-surface1">
                        {{ $profileLabel }}
                    </a>
                @endif

                @if ($showMemberLink)
                    <a href="{{ $memberUrl }}" class="flex w-full items-center rounded-xl px-3 py-2 text-sm font-medium text-[rgb(var(--color-text-main-rgb))] transition-colors hover:bg-surface1">
                        {{ $memberLabel }}
                    </a>
                @endif

                <form method="POST" action="{{ $logoutUrl }}">
                    @csrf
                    <button type="submit" class="flex w-full cursor-pointer items-center rounded-xl px-3 py-2 text-sm font-medium text-[rgb(var(--color-text-main-rgb))] transition-colors hover:bg-surface1">
                        로그아웃
                    </button>
                </form>
            </div>
        </div>
    @endif
</div>

@once
    @push('scripts')
        <script>
            (() => {
                const menus = document.querySelectorAll('[data-profile-menu]');

                if (!menus.length) {
                    return;
                }

                const closeAll = () => {
                    menus.forEach((menu) => {
                        const toggle = menu.querySelector('[data-profile-menu-toggle]');
                        const panel = menu.querySelector('[data-profile-menu-panel]');

                        if (!toggle || !panel) {
                            return;
                        }

                        panel.classList.add('hidden');
                        toggle.setAttribute('aria-expanded', 'false');
                    });
                };

                menus.forEach((menu) => {
                    const toggle = menu.querySelector('[data-profile-menu-toggle]');
                    const panel = menu.querySelector('[data-profile-menu-panel]');

                    if (!toggle || !panel) {
                        return;
                    }

                    toggle.addEventListener('click', (event) => {
                        event.stopPropagation();

                        const isHidden = panel.classList.contains('hidden');
                        closeAll();

                        if (isHidden) {
                            panel.classList.remove('hidden');
                            toggle.setAttribute('aria-expanded', 'true');
                        }
                    });

                    panel.addEventListener('click', (event) => {
                        event.stopPropagation();
                    });
                });

                document.addEventListener('click', closeAll);
                window.addEventListener('keydown', (event) => {
                    if (event.key === 'Escape') {
                        closeAll();
                    }
                });
            })();
        </script>
    @endpush
@endonce