<?php
/**
 * @var string $locale
 * @var Johncms\System\Legacy\Tools $tools
 * @var Johncms\System\Users\User $user
 */

?>
<!-- User Menu -->
<div class="border-b border-primary-200/30 backdrop-blur-lg">
    <!-- User Header -->
    <button class="w-full flex items-center justify-between p-6 text-left hover:bg-primary-50/50 dark:hover:bg-primary-900/20 transition-all duration-500 rounded-2xl group animate-fade-in-up"
            onclick="toggleUserMenu()"
            aria-expanded="false"
            aria-controls="userMenuDropdown"
            aria-label="Меню користувача"
            id="userMenuButton">
        <div class="flex items-center space-x-4">
            <!-- Avatar with Notification Badge -->
            <div class="relative">
                <?php if (! empty($notifications['all'])): ?>
                    <span class="absolute -top-1 -right-1 inline-flex items-center justify-center w-6 h-6 text-xs font-bold text-white bg-gradient-to-r from-red-500 to-pink-500 rounded-full transform translate-x-1/2 -translate-y-1/2 ring-2 ring-white dark:ring-gray-900 shadow-lg animate-pulse-slow">
                        <?= $notifications['all'] ?>
                    </span>
                <?php endif ?>
                <div class="w-12 h-12 rounded-2xl border-2 border-primary-200/50 dark:border-primary-600/50 overflow-hidden bg-gradient-to-br from-primary-100 to-primary-200 dark:from-primary-800 dark:to-primary-900 shadow-lg group-hover:scale-110 transition-transform duration-500">
                    <img src="<?= $this->avatar($user->id ?? 0) ?>" class="w-full h-full object-cover" alt="<?= $user->name ?? '' ?>">
                </div>
            </div>
            
            <!-- User Name -->
            <div class="flex flex-col text-left">
                <div class="text-base font-bold text-gray-900 dark:text-white group-hover:text-primary-600 dark:group-hover:text-primary-400 transition-colors duration-300">
                    <?= ($user->id ? $user->name : d__('system', 'Log In')) ?>
                </div>
                <div class="text-sm text-primary-500 dark:text-primary-400 font-medium flex items-center space-x-2 mt-1">
                    <?php if ($user->id): ?>
                        <div class="w-2 h-2 bg-green-500 rounded-full animate-pulse"></div>
                        <span><?= d__('system', 'Online') ?></span>
                    <?php else: ?>
                        <div class="w-2 h-2 bg-gray-400 rounded-full"></div>
                        <span><?= d__('system', 'Guest') ?></span>
                    <?php endif ?>
                </div>
            </div>
        </div>
        
        <!-- Chevron Icon -->
        <svg id="userMenuChevron" class="w-5 h-5 text-primary-400 group-hover:text-primary-600 dark:group-hover:text-primary-300 transition-all duration-500 transform group-hover:scale-110" 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 Menu -->
    <div id="userMenuDropdown" class="hidden border-t border-primary-200/30 bg-white/80 dark:bg-gray-800/80 backdrop-blur-xl rounded-b-2xl shadow-2xl overflow-hidden animate-fade-in-up">
        <div class="py-2">
            <?php if ($user->isValid()): ?>
                <!-- Authenticated User Menu -->
                <a href="/notifications/" class="group flex items-center px-6 py-4 text-sm font-semibold text-gray-700 dark:text-gray-200 hover:text-white hover:bg-gradient-to-r hover:from-blue-500 hover:to-blue-600 transition-all duration-500 ease-out transform hover:scale-[1.02] relative overflow-hidden">
                    <div class="absolute inset-0 bg-gradient-to-r from-blue-500 to-blue-600 opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
                    <svg class="w-5 h-5 mr-4 text-blue-500 group-hover:text-white relative z-10 transform group-hover:scale-110 transition-transform duration-300 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M15 17h5l-5 5v-5zM8.515 4.486A4 4 0 0112 3a4 4 0 013.485 1.486M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                    </svg>
                    <span class="flex-1 font-semibold relative z-10"><?= d__('system', 'Notifications') ?></span>
                    <?php if (! empty($notifications['all'])): ?>
                        <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-bold bg-gradient-to-r from-red-500 to-pink-500 text-white shadow-lg relative z-10 transform group-hover:scale-110 transition-transform duration-300">
                            <?= $notifications['all'] ?>
                        </span>
                    <?php endif ?>
                </a>

                <a href="/profile/?act=office" class="group flex items-center px-6 py-4 text-sm font-semibold text-gray-700 dark:text-gray-200 hover:text-white hover:bg-gradient-to-r hover:from-green-500 hover:to-green-600 transition-all duration-500 ease-out transform hover:scale-[1.02] relative overflow-hidden">
                    <div class="absolute inset-0 bg-gradient-to-r from-green-500 to-green-600 opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
                    <svg class="w-5 h-5 mr-4 text-green-500 group-hover:text-white relative z-10 transform group-hover:scale-110 transition-transform duration-300 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path>
                    </svg>
                    <span class="flex-1 font-semibold relative z-10"><?= d__('system', 'Personal') ?></span>
                </a>

                <a href="/login" class="group flex items-center px-6 py-4 text-sm font-semibold text-red-600 dark:text-red-400 hover:text-white hover:bg-gradient-to-r hover:from-red-500 hover:to-red-600 transition-all duration-500 ease-out transform hover:scale-[1.02] relative overflow-hidden">
                    <div class="absolute inset-0 bg-gradient-to-r from-red-500 to-red-600 opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
                    <svg class="w-5 h-5 mr-4 text-red-500 group-hover:text-white relative z-10 transform group-hover:scale-110 transition-transform duration-300 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" 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 class="flex-1 font-semibold relative z-10"><?= d__('system', 'Exit') ?></span>
                </a>
            <?php else: ?>
                <!-- Guest Menu -->
                <a href="/login/" class="group flex items-center px-6 py-4 text-sm font-semibold text-gray-700 dark:text-gray-200 hover:text-white hover:bg-gradient-to-r hover:from-blue-500 hover:to-blue-600 transition-all duration-500 ease-out transform hover:scale-[1.02] relative overflow-hidden">
                    <div class="absolute inset-0 bg-gradient-to-r from-blue-500 to-blue-600 opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
                    <svg class="w-5 h-5 mr-4 text-blue-500 group-hover:text-white relative z-10 transform group-hover:scale-110 transition-transform duration-300 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M11 16l-4-4m0 0l4-4m-4 4h14m-5 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h7a3 3 0 013 3v1"></path>
                    </svg>
                    <span class="flex-1 font-semibold relative z-10"><?= d__('system', 'Login') ?></span>
                </a>

                <a href="/registration/" class="group flex items-center px-6 py-4 text-sm font-semibold text-gray-700 dark:text-gray-200 hover:text-white hover:bg-gradient-to-r hover:from-green-500 hover:to-green-600 transition-all duration-500 ease-out transform hover:scale-[1.02] relative overflow-hidden">
                    <div class="absolute inset-0 bg-gradient-to-r from-green-500 to-green-600 opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
                    <svg class="w-5 h-5 mr-4 text-green-500 group-hover:text-white relative z-10 transform group-hover:scale-110 transition-transform duration-300 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z"></path>
                    </svg>
                    <span class="flex-1 font-semibold relative z-10"><?= d__('system', 'Registration') ?></span>
                </a>
            <?php endif ?>
        </div>
    </div>
</div>

<script>
function toggleUserMenu() {
    const dropdown = document.getElementById('userMenuDropdown');
    const chevron = document.getElementById('userMenuChevron');
    const button = document.getElementById('userMenuButton');
    
    const isExpanded = dropdown.classList.toggle('hidden');
    chevron.classList.toggle('rotate-180');
    button.setAttribute('aria-expanded', !isExpanded);
    
    // Add animation class when opening
    if (!isExpanded) {
        dropdown.classList.add('animate-fade-in-up');
    }
}

// Close menu when clicking outside
document.addEventListener('click', function(event) {
    const userMenu = document.querySelector('.border-b.border-primary-200\\/30');
    if (userMenu && !userMenu.contains(event.target)) {
        const dropdown = document.getElementById('userMenuDropdown');
        const chevron = document.getElementById('userMenuChevron');
        const button = document.getElementById('userMenuButton');
        
        if (!dropdown.classList.contains('hidden')) {
            dropdown.classList.add('hidden');
            chevron.classList.remove('rotate-180');
            button.setAttribute('aria-expanded', 'false');
        }
    }
});

// Keyboard support
document.addEventListener('keydown', function(event) {
    if (event.key === 'Escape') {
        const dropdown = document.getElementById('userMenuDropdown');
        if (!dropdown.classList.contains('hidden')) {
            toggleUserMenu();
        }
    }
});

// Add hover effects for better UX
document.addEventListener('DOMContentLoaded', function() {
    const menuItems = document.querySelectorAll('#userMenuDropdown a');
    
    menuItems.forEach(item => {
        item.addEventListener('mouseenter', function() {
            this.style.transform = 'translateX(8px) scale(1.02)';
        });
        
        item.addEventListener('mouseleave', function() {
            this.style.transform = 'translateX(0) scale(1)';
        });
    });
});
</script>

<style>
.rotate-180 {
    transform: rotate(180deg);
}

.animate-fade-in-up {
    animation: fadeInUp 0.3s ease-out forwards;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Smooth transitions for all interactive elements */
#userMenuDropdown a {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Enhanced focus states for accessibility */
#userMenuButton:focus {
    outline: 2px solid #4f46e5;
    outline-offset: 2px;
}

#userMenuDropdown a:focus {
    outline: 2px solid #4f46e5;
    outline-offset: -2px;
}
</style>