<?php
// Desktop header component - shown on desktop, hidden on mobile via responsive.css
// Loads navigation from NavigationHelper

if (!class_exists('NavigationHelper')) {
    require_once __DIR__ . '/../helpers/navigation_helper.php';
}

$featuredPages = [];
$allPages = [];

if (class_exists('NavigationHelper')) {
    $featuredPages = NavigationHelper::getFeaturedPages();
    $allPages = NavigationHelper::getAllPages();
}

// Get non-featured pages for "More" dropdown
$morePages = array_diff_key($allPages, array_flip(array_map(function($p) { return $p['url']; }, $featuredPages)));
?>

<!-- Desktop Header (hidden on mobile via responsive.css) -->
<header class="site-header">
    <div class="site-nav">
        <!-- Brand Logo -->
        <a href="/" class="brand">
            <img src="sport-pics/logo-1.png" alt="Emporio Sport Logo" />
        </a>
        
        <!-- Navigation Links -->
        <div class="nav-links">
            <?php foreach ($featuredPages as $page): ?>
                <a href="<?php echo htmlspecialchars($page['url']); ?>" title="<?php echo htmlspecialchars($page['title']); ?>">
                    <?php echo htmlspecialchars($page['title']); ?>
                </a>
            <?php endforeach; ?>
        </div>
        
        <!-- Right Side: Search, Language, Currency, User -->
        <div class="nav-right">
            <!-- Search -->
            <div class="search">
                <input type="text" id="searchInput" placeholder="Search..." style="padding:8px 12px; border:1px solid #ddd; border-radius:4px; width:200px;">
                <button class="search-icon-btn" onclick="document.getElementById('searchInput').focus()" title="Search" style="background:none; border:none; cursor:pointer; font-size:16px; padding:0;"><i class="fa-solid fa-magnifying-glass"></i></button>
            </div>
            
            <!-- Language Selector -->
            <select id="languageSelect" onchange="changeLanguage(this.value)" style="padding:6px 8px; border:1px solid #ddd; border-radius:4px;">
                <option value="eng">EN</option>
                <option value="ita">IT</option>
                <option value="spa">ES</option>
                <option value="ger">DE</option>
            </select>
            
            <!-- Currency Selector -->
            <select id="currencySelect" onchange="changeCurrency(this.value)" style="padding:6px 8px; border:1px solid #ddd; border-radius:4px;">
                <option value="usd">USD</option>
                <option value="eur">EUR</option>
                <option value="gbp">GBP</option>
            </select>
            
            <!-- User Menu -->
            <div class="nav-user">
                <button class="user-btn" onclick="toggleUserDropdown(event)" title="User Account" style="background:none; border:none; cursor:pointer; font-size:16px; padding:0;"><i class="fa-solid fa-user"></i></button>
                <div id="userDropdown" style="display:none; position:absolute; top:100%; right:0; background:#fff; border:1px solid #ddd; border-radius:4px; box-shadow:0 4px 8px rgba(0,0,0,0.1); z-index:100; min-width:180px;">
                    <?php if (!empty($_SESSION['user_id'])): ?>
                        <a href="dashboard.php" style="display:block; padding:10px 16px; text-decoration:none; color:#333; border-bottom:1px solid #f0f0f0;">Dashboard</a>
                        <a href="logout.php" style="display:block; padding:10px 16px; text-decoration:none; color:#333;">Logout</a>
                    <?php else: ?>
                        <a href="#" onclick="openLoginModal(); return false;" style="display:block; padding:10px 16px; text-decoration:none; color:#333; border-bottom:1px solid #f0f0f0;">Login</a>
                        <a href="#" onclick="showSignupType(); return false;" style="display:block; padding:10px 16px; text-decoration:none; color:#333;">Sign Up</a>
                    <?php endif; ?>
                </div>
            </div>
            
            <!-- Wishlist -->
            <a href="wishlist.php" title="Wishlist" style="text-decoration:none; color:inherit; font-size:18px; padding:0;"><i class="fa-regular fa-heart"></i></a>
            
            <!-- Shopping Cart -->
            <a href="cart.php" title="Shopping Cart" style="text-decoration:none; color:inherit; font-size:18px; padding:0;"><i class="fa-solid fa-shopping-cart"></i></a>
        </div>
    </div>
</header>

<script>
function toggleUserDropdown(e) {
    e.preventDefault();
    const d = document.getElementById('userDropdown');
    if (d) d.style.display = (d.style.display === 'none' ? 'block' : 'none');
}

document.addEventListener('click', function(e) {
    const d = document.getElementById('userDropdown');
    if (d && !e.target.closest('.nav-user')) {
        d.style.display = 'none';
    }
});

function changeLanguage(lang) {
    if (typeof fetch !== 'undefined') {
        fetch('api_set_preference.php', {
            method: 'POST',
            headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
            body: 'pref_type=language&pref_value=' + encodeURIComponent(lang)
        }).then(() => location.reload());
    }
}

function changeCurrency(curr) {
    if (typeof fetch !== 'undefined') {
        fetch('api_set_preference.php', {
            method: 'POST',
            headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
            body: 'pref_type=currency&pref_value=' + encodeURIComponent(curr)
        }).then(() => location.reload());
    }
}
</script>
