js/component/header.js

class HeaderComponent {
    static render() {
        const header = document.getElementById('mainHeader');
        if (!header) return;

        header.innerHTML = `
            <div class="header-content">
                <div class="header-brand">
                    <h1>🎓 RewardApp</h1>
                    <span class="header-subtitle">پلتفرم آموزش توسعه وب</span>
                </div>
                
                <div class="header-stats" id="headerStats">
                    <!-- توسط JavaScript پر می‌شود -->
                </div>
                
                <div class="header-actions">
                    <button class="header-btn" onclick="HeaderComponent.showUserMenu()">
                        👤 حساب کاربری
                    </button>
                    <button class="header-btn" onclick="HeaderComponent.toggleTheme()">
                        🌙 تغییر تم
                    </button>
                </div>
            </div>
            
            <div class="user-menu" id="userMenu" style="display: none;">
                <div class="menu-content">
                    <div class="menu-header">
                        <div class="user-avatar">U</div>
                        <div class="user-details">
                            <span class="user-name" id="menuUserName">کاربر مهمان</span>
                            <span class="user-role" id="menuUserRole">ورود نکرده</span>
                        </div>
                    </div>
                    <div class="menu-items">
                        <a href="login.html" class="menu-item">🔐 ورود به سیستم</a>
                        <a href="register.html" class="menu-item">📝 ثبت نام</a>
                        <hr class="menu-divider">
                        <button class="menu-item" onclick="HeaderComponent.resetProgress()">
                            🔄 بازنشانی پیشرفت
                        </button>
                        <button class="menu-item" onclick="HeaderComponent.exportData()">
                            💾 ذخیره اطلاعات
                        </button>
                        <hr class="menu-divider">
                        <button class="menu-item" onclick="HeaderComponent.showAbout()">
                            ℹ️ درباره برنامه
                        </button>
                    </div>
                </div>
            </div>
        `;

        this.updateStats();
        this.setupEventListeners();
    }

    static updateStats() {
        const headerStats = document.getElementById('headerStats');
        if (!headerStats) return;

        const user = authManager.getCurrentUser();
        
        if (user) {
            const stats = learningLogic.getUserStats();
            headerStats.innerHTML = `
                <div class="stat-item">
                    <span class="stat-label">سطح</span>
                    <span class="stat-value">${stats.level}</span>
                </div>
                <div class="stat-item">
                    <span class="stat-label">امتیاز</span>
                    <span class="stat-value">${Utils.formatNumber(stats.totalScore)}</span>
                </div>
                <div class="stat-item">
                    <span class="stat-label">استریک</span>
                    <span class="stat-value">${stats.streak}</span>
                </div>
            `;
        } else {
            headerStats.innerHTML = `
                <div class="stat-item">
                    <span class="stat-label">وضعیت</span>
                    <span class="stat-value">ورود نکرده</span>
                </div>
            `;
        }
    }

    static setupEventListeners() {
        // بستن منو با کلیک خارج از آن
        document.addEventListener('click', (e) => {
            const userMenu = document.getElementById('userMenu');
            const headerBtn = e.target.closest('.header-btn');
            
            if (userMenu && !userMenu.contains(e.target) && !headerBtn) {
                userMenu.style.display = 'none';
            }
        });

        // به‌روزرسانی آمار هنگام تغییر وضعیت
        document.addEventListener('authStateChanged', () => {
            this.updateStats();
            this.updateUserMenu();
        });

        document.addEventListener('progressUpdated', () => {
            this.updateStats();
        });
    }

    static showUserMenu() {
        const userMenu = document.getElementById('userMenu');
        if (!userMenu) return;

        this.updateUserMenu();
        userMenu.style.display = userMenu.style.display === 'none' ? 'block' : 'none';
    }

    static updateUserMenu() {
        const menuUserName = document.getElementById('menuUserName');
        const menuUserRole = document.getElementById('menuUserRole');
        
        if (!menuUserName || !menuUserRole) return;

        const user = authManager.getCurrentUser();
        
        if (user) {
            menuUserName.textContent = user.profile.fullName || user.username;
            menuUserRole.textContent = this.getRoleText(user.role);
        } else {
            menuUserName.textContent = 'کاربر مهمان';
            menuUserRole.textContent = 'ورود نکرده';
        }
    }

    static getRoleText(role) {
        const roles = {
            'student': 'دانشجو',
            'instructor': 'مربی',
            'admin': 'مدیر'
        };
        return roles[role] || role;
    }

    static toggleTheme() {
        const currentTheme = localStorage.getItem('theme') || 'light';
        const newTheme = currentTheme === 'light' ? 'dark' : 'light';
        
        localStorage.setItem('theme', newTheme);
        document.body.setAttribute('data-theme', newTheme);
        
        Utils.showNotification(
            `تم ${newTheme === 'dark' ? 'تاریک' : 'روشن'} فعال شد`,
            'success'
        );
    }

    static resetProgress() {
        if (confirm('آیا از بازنشانی تمام پیشرفت خود مطمئن هستید؟ این عمل غیرقابل برگشت است.')) {
            learningLogic.resetProgress();
            Utils.showNotification('پیشرفت با موفقیت بازنشانی شد', 'success');
            document.dispatchEvent(new CustomEvent('progressUpdated'));
            this.showUserMenu(); // بستن منو
        }
    }

    static exportData() {
        const userProgress = learningLogic.userProgress;
        const dataStr = JSON.stringify(userProgress, null, 2);
        const dataBlob = new Blob([dataStr], { type: 'application/json' });
        
        const url = URL.createObjectURL(dataBlob);
        const link = document.createElement('a');
        link.href = url;
        link.download = `rewardapp-backup-${Utils.getCurrentDate()}.json`;
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
        URL.revokeObjectURL(url);
        
        Utils.showNotification('اطلاعات با موفقیت ذخیره شد', 'success');
        this.showUserMenu(); // بستن منو
    }

    static showAbout() {
        const aboutHTML = `
            <div class="about-modal">
                <h3>🎓 درباره RewardApp</h3>
                <div class="about-content">
                    <p><strong>نسخه:</strong> ۱.۰.۰</p>
                    <p><strong>توضیحات:</strong> پلتفرم آموزشی تعاملی برای یادگیری توسعه وب</p>
                    <p><strong>امکانات:</strong></p>
                    <ul>
                        <li>📖 درس‌های تعاملی</li>
                        <li>❓ آزمون‌های کوتاه</li>
                        <li>✏️ تمرین‌های عملی</li>
                        <li>🏆 سیستم پاداش و سطح‌بندی</li>
                        <li>📊 ردیابی پیشرفت</li>
                    </ul>
                    <hr>
                    <p>ساخته شده با ❤️ برای جامعه توسعه‌دهندگان وب</p>
                </div>
                <button class="btn btn-primary" onclick="ModalComponent.closeCurrentModal()">
                    بستن
                </button>
            </div>
        `;
        
        ModalComponent.showCustomModal('about-modal', aboutHTML);
        this.showUserMenu(); // بستن منو
    }
}

// اعمال تم ذخیره شده
document.addEventListener('DOMContentLoaded', () => {
    const savedTheme = localStorage.getItem('theme');
    if (savedTheme) {
        document.body.setAttribute('data-theme', savedTheme);
    }
});