@props([
    'tenantId' => tenant('id'),
    'variant' => 'admin',
    'showHomeButton' => false,
])

@php
    $currentUser = auth('tenant')->user();
    $isAuthenticated = auth('tenant')->check();
    $isManager = $currentUser?->isManager() ?? false;
    $profileInitial = mb_substr($currentUser?->name ?? 'U', 0, 1);
@endphp

<div class="tenant-profile-menu">
    @if ($showHomeButton)
        <x-ui.button
            href="{{ tenant_url(null, 'user') }}"
            variant="ghost"
            size="sm"
            iconOnly
            class="tenant-profile-menu__home-button"
            aria-label="사용자 페이지"
            title="사용자 페이지"
        >
            <svg viewBox="0 0 24 24" class="tenant-profile-menu__home-icon" 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="tenant-profile-menu__shell" data-profile-menu data-profile-variant="{{ $variant }}">
            <button
                type="button"
                class="tenant-profile-menu__trigger"
                aria-label="프로필 메뉴"
                aria-expanded="false"
                data-profile-menu-toggle
            >
                {{ $profileInitial }}
            </button>

            <div
                class="tenant-profile-menu__panel"
                data-profile-menu-panel
            >
                @if ($isManager)
                    <a href="{{ tenant_admin_url() }}" class="tenant-profile-menu__item">
                        관리자 페이지
                    </a>
                @endif

                <a href="{{ tenant_url(null, 'user') }}" class="tenant-profile-menu__item">
                    정보수정
                </a>

                <form method="POST" action="{{ tenant_url(null, 'logout') }}">
                    @csrf
                    <button type="submit" class="tenant-profile-menu__button">
                        로그아웃
                    </button>
                </form>
            </div>
        </div>

        @if ($variant === 'app')
            <div class="tenant-profile-menu__mobile-actions">
                @if ($isManager)
                    <x-ui.button
                        href="{{ tenant_admin_url() }}"
                        variant="outline"
                        size="sm"
                        class="tenant-profile-menu__mobile-button"
                    >
                        관리자 페이지
                    </x-ui.button>
                @endif

                <x-ui.button
                    href="{{ tenant_url(null, 'user') }}"
                    variant="soft"
                    size="sm"
                    class="tenant-profile-menu__mobile-button"
                >
                    정보수정
                </x-ui.button>

                <form method="POST" action="{{ tenant_url(null, 'logout') }}" class="tenant-profile-menu__mobile-form">
                    @csrf
                    <x-ui.button
                        type="submit"
                        variant="ghost"
                        size="sm"
                        class="tenant-profile-menu__mobile-button"
                    >
                        로그아웃
                    </x-ui.button>
                </form>
            </div>
        @endif
    @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.remove('is-open');
                        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 isOpen = panel.classList.contains('is-open');
                        closeAll();

                        if (! isOpen) {
                            panel.classList.add('is-open');
                            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