<?php
// Ensure session is started for header
if (session_status() === PHP_SESSION_NONE) {
    session_start();
}

$isLoggedIn = isset($_SESSION['user_id']);
$userName = $isLoggedIn ? ($_SESSION['name'] ?? 'User') : 'User';
$userEmail = $isLoggedIn ? ($_SESSION['email'] ?? '') : '';
$userAvatar = $isLoggedIn ? ($_SESSION['avatar'] ?? '') : '';
?>
<style>
    /* Customer Dashboard Header Styles */
    :root {
        --header-bg: #1a1a1a;
        --header-accent: #b58a5a;
        --header-accent-dark: #8a643f;
        --header-text: #ffffff;
        --header-text-muted: #e0d5c7;
        --header-border: #333333;
    }

    * {
        box-sizing: border-box;
    }

    .customer-header-wrapper {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        background: #9a7249;
        border-bottom: 2px solid var(--header-accent);
        z-index: 999;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    }

    .customer-header-container {
        max-width: 1400px;
        margin: 0 auto;
        padding: 0 20px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 80px;
    }

    .customer-header-logo {
        display: flex;
        align-items: center;
        gap: 12px;
        text-decoration: none;
        flex: 0 0 auto;
    }

    .customer-header-logo img {
        height: 40px;
        width: auto;
        display: block;
    }

    .customer-header-logo-text {
        display: none;
        color: var(--header-text);
        font-size: 18px;
        font-weight: 700;
        text-decoration: none;
    }

    .customer-header-center {
        display: flex;
        align-items: center;
        gap: 30px;
        flex: 1;
        margin-left: 40px;
    }

    .customer-header-nav {
        display: flex;
        gap: 8px;
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .customer-header-nav li {
        margin: 0;
    }

    .customer-header-nav a {
        display: flex;
        align-items: center;
        gap: 6px;
        padding: 10px 16px;
        color: black;
        text-decoration: none;
        font-size: 14px;
        font-weight: 600;
        border-radius: 8px;
        transition: all 0.3s ease;
    }

    .customer-header-nav a:hover {
        background: rgba(181, 138, 90, 0.15);
        color: var(--header-accent);
    }

    .customer-header-right {
        display: flex;
        align-items: center;
        gap: 20px;
        flex: 0 0 auto;
    }

    .customer-header-user {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 8px 12px;
        border-radius: 8px;
        cursor: pointer;
        transition: all 0.3s ease;
    }

    .customer-header-user:hover {
        background: rgba(181, 138, 90, 0.1);
    }

    .customer-header-avatar {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: linear-gradient(135deg, var(--header-accent), var(--header-accent-dark));
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-weight: 700;
        font-size: 16px;
        border: 2px solid var(--header-accent);
        flex: 0 0 40px;
    }

    .customer-header-avatar img {
        width: 100%;
        height: 100%;
        border-radius: 50%;
        object-fit: cover;
    }

    .customer-header-user-info {
        display: flex;
        flex-direction: column;
        gap: 2px;
    }

    .customer-header-user-name {
        color: black;
        font-size: 14px;
        font-weight: 700;
        margin: 0;
    }

    .customer-header-user-email {
        color: var(--header-text-muted);
        font-size: 12px;
        margin: 0;
    }

    .customer-header-user-dropdown {
        position: relative;
    }

    .customer-header-dropdown-menu {
        display: none;
        position: absolute;
        top: 100%;
        right: 0;
        background: white;
        border: 1px solid #e0e0e0;
        border-radius: 10px;
        min-width: 220px;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
        z-index: 1000;
        margin-top: 8px;
        overflow: hidden;
    }

    .customer-header-dropdown-menu.show {
        display: block;
        animation: slideDown 0.3s ease;
    }

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

    .customer-header-dropdown-item {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 12px 16px;
        color: #333;
        text-decoration: none;
        font-size: 14px;
        border-bottom: 1px solid #f0f0f0;
        transition: all 0.2s ease;
    }

    .customer-header-dropdown-item:last-child {
        border-bottom: none;
    }

    .customer-header-dropdown-item:hover {
        background: #f5f5f5;
        color: var(--header-accent);
    }

    .customer-header-logout {
        background: #f5f5f5;
        color: #d32f2f;
    }

    .customer-header-logout:hover {
        background: #e8e8e8;
        color: #d32f2f;
    }

    .customer-header-logout i {
        color: #d32f2f;
    }

    .customer-header-mobile-toggle {
        display: none;
        background: none;
        border: none;
        color: var(--header-text);
        font-size: 24px;
        cursor: pointer;
        padding: 8px;
    }

    /* Tablet Responsive */
    @media (max-width: 1000px) {
        .customer-header-center {
            margin-left: 20px;
            gap: 20px;
        }

        .customer-header-nav a {
            padding: 8px 12px;
            font-size: 13px;
        }

        .customer-header-user-info {
            display: none;
        }

        .customer-header-right {
            gap: 12px;
        }
    }

    /* Tablet/Mobile Responsive */
    @media (max-width: 768px) {
        .customer-header-container {
            height: 70px;
            padding: 0 16px;
        }

        .customer-header-logo img {
            height: 36px;
        }

        .customer-header-center {
            display: none;
            position: fixed;
            top: 70px;
            left: 0;
            right: 0;
            background: linear-gradient(135deg, var(--header-bg) 0%, #2f251c 100%);
            flex-direction: column;
            gap: 0;
            margin: 0;
            border-bottom: 1px solid var(--header-border);
            max-height: calc(100vh - 70px);
            overflow-y: auto;
            z-index: 998;
        }

        .customer-header-center.show {
            display: flex;
        }

        .customer-header-nav {
            flex-direction: column;
            width: 100%;
            gap: 0;
        }

        .customer-header-nav a {
            padding: 12px 16px;
            border-radius: 0;
            border-bottom: 1px solid var(--header-border);
        }

        .customer-header-nav a:hover {
            background: rgba(181, 138, 90, 0.2);
        }

        .customer-header-mobile-toggle {
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .customer-header-right {
            gap: 12px;
        }

        .customer-header-avatar {
            width: 36px;
            height: 36px;
            font-size: 14px;
        }

        .customer-header-user {
            padding: 6px 10px;
        }
    }

    /* Mobile Small */
    @media (max-width: 480px) {
        .customer-header-container {
            height: 60px;
            padding: 0 12px;
        }

        .customer-header-logo img {
            height: 32px;
        }

        .customer-header-center {
            top: 60px;
        }

        .customer-header-avatar {
            width: 32px;
            height: 32px;
            font-size: 13px;
        }

        .customer-header-user {
            padding: 4px 6px;
        }

        .customer-header-mobile-toggle {
            font-size: 20px;
            padding: 6px;
        }

        .customer-header-right {
            gap: 8px;
        }
    }

    /* Extra Small Mobile */
    @media (max-width: 360px) {
        .customer-header-container {
            height: 56px;
            padding: 0 10px;
        }

        .customer-header-logo img {
            height: 28px;
        }

        .customer-header-center {
            top: 56px;
        }

        .customer-header-avatar {
            width: 28px;
            height: 28px;
            font-size: 11px;
        }
    }
</style>

<header class="customer-header-wrapper">
    <div class="customer-header-container">
        <!-- Logo -->
        <a href="index.php" class="customer-header-logo">
            <img src="assets/img/logo.svg" alt="Faren Interior Design">
            <span class="customer-header-logo-text">Dashboard</span>
        </a>

        <!-- Navigation Menu -->
        <nav class="customer-header-center" id="customerHeaderMenu">
            <ul class="customer-header-nav">
                <li><a href="index.php"><i class="fas fa-home"></i> <span>Home</span></a></li>
                <!-- <li><a href="#" onclick="switchTab('overview', event)"><i class="fas fa-chart-line"></i> <span>Overview</span></a></li>
                <li><a href="#" onclick="switchTab('orders', event)"><i class="fas fa-shopping-cart"></i> <span>Orders</span></a></li>
                <li><a href="#" onclick="switchTab('consultations', event)"><i class="fas fa-calendar"></i> <span>Consultations</span></a></li> -->
            </ul>
        </nav>

        <!-- Right Side (User & Dropdown) -->
        <div class="customer-header-right">
            <div class="customer-header-user-dropdown">
                <button class="customer-header-user" onclick="toggleCustomerHeaderDropdown()">
                    <div class="customer-header-avatar" id="customerHeaderAvatar">
                        <?php echo strtoupper(substr($userName, 0, 1)); ?>
                    </div>
                    <div class="customer-header-user-info" style="display: flex;">
                        <p class="customer-header-user-name"><?php echo htmlspecialchars($userName); ?></p>
                    </div>
                    <i class="fas fa-chevron-down" style="color:black; font-size: 12px; margin-left: 4px;"></i>
                </button>

                <!-- Dropdown Menu -->
                <div class="customer-header-dropdown-menu" id="customerHeaderDropdown">
                    <a href="#" onclick="switchTab('profile', event)" class="customer-header-dropdown-item">
                        <i class="fas fa-user"></i> My Profile
                    </a>
                    <a href="#" onclick="switchTab('password', event)" class="customer-header-dropdown-item">
                        <i class="fas fa-lock"></i> Change Password
                    </a>
                    <a href="#" onclick="switchTab('favorites', event)" class="customer-header-dropdown-item">
                        <i class="fas fa-heart"></i> Favorites
                    </a>
                    <a href="auth-system/logout.php" class="customer-header-dropdown-item customer-header-logout">
                        <i class="fas fa-sign-out-alt"></i> Logout
                    </a>
                </div>
            </div>

            <!-- Mobile Menu Toggle -->
            <button class="customer-header-mobile-toggle" onclick="toggleCustomerHeaderMenu()" aria-label="Toggle Menu">
                <i class="fas fa-bars"></i>
            </button>
        </div>
    </div>
</header>

<script>
    function toggleCustomerHeaderDropdown() {
        const dropdown = document.getElementById('customerHeaderDropdown');
        if (dropdown) {
            dropdown.classList.toggle('show');
        }
    }

    function toggleCustomerHeaderMenu() {
        const menu = document.getElementById('customerHeaderMenu');
        if (menu) {
            menu.classList.toggle('show');
        }
    }

    function closeCustomerHeaderMenu() {
        const menu = document.getElementById('customerHeaderMenu');
        if (menu) {
            menu.classList.remove('show');
        }
    }

    // Close dropdown when clicking outside
    document.addEventListener('click', function(event) {
        const dropdown = document.getElementById('customerHeaderDropdown');
        const userBtn = event.target.closest('.customer-header-user');
        
        if (dropdown && !dropdown.contains(event.target) && !userBtn) {
            dropdown.classList.remove('show');
        }

        // Close mobile menu when clicking outside
        const menu = document.getElementById('customerHeaderMenu');
        const mobileBtn = event.target.closest('.customer-header-mobile-toggle');
        
        if (menu && !menu.contains(event.target) && !mobileBtn) {
            menu.classList.remove('show');
        }
    });

    // Close menu when navigating
    document.querySelectorAll('.customer-header-nav a').forEach(link => {
        link.addEventListener('click', function() {
            closeCustomerHeaderMenu();
        });
    });

    // Adjust header height based on viewport
    function adjustHeaderMargin() {
        const wrapper = document.querySelector('.customer-header-wrapper');
        if (wrapper) {
            const height = wrapper.offsetHeight;
            document.body.style.paddingTop = height + 'px';
        }
    }

    window.addEventListener('load', adjustHeaderMargin);
    window.addEventListener('resize', adjustHeaderMargin);

    // Update avatar if user picture changes
    function updateCustomerHeaderAvatar(imageUrl) {
        const avatar = document.getElementById('customerHeaderAvatar');
        if (avatar && imageUrl) {
            avatar.innerHTML = '<img src="' + imageUrl + '" alt="User Avatar">';
        }
    }

    // Listen for avatar updates from other parts of the app
    window.addEventListener('storage', function(event) {
        if (event.key === 'userAvatarUrl') {
            updateCustomerHeaderAvatar(event.newValue);
        }
    });
</script>
