js/app.js

class LearningPlatform {
    constructor() {
        this.currentDay = 1;
        this.maxDays = 3;
        this.isInitialized = false;
        this.components = {};
    }

    async initialize() {
        try {
            console.log('🚀 Initializing Learning Platform...');
            
            // مقداردهی اولیه سیستم احراز هویت
            this.initializeAuth();
            
            // دیباگ اطلاعات احراز هویت
            this.debugAuth();
            
            // بارگذاری کامپوننت‌ها
            this.loadComponents();
            
            // راه‌اندازی event listeners
            this.setupEventListeners();
            
            // بارگذاری محتوای اولیه
            await this.loadInitialContent();
            
            // به‌روزرسانی UI
            this.updateUI();
            
            this.isInitialized = true;
            console.log('✅ Platform initialized successfully');
            
        } catch (error) {
            console.error('❌ Failed to initialize platform:', error);
            this.showError('خطا در بارگذاری برنامه. لطفاً صفحه را رفرش کنید.');
        }
    }

    initializeAuth() {
        console.log('🔐 Initializing authentication system...');
        
        // مقداردهی اولیه کاربران پیش‌فرض
        if (typeof authManager !== 'undefined') {
            authManager.initializeDefaultUsers();
            console.log('👥 Default users initialized');
        } else {
            console.error('❌ authManager is not defined');
        }
        
        // مقداردهی اولیه میان‌افزار
        if (typeof AuthMiddleware !== 'undefined') {
            AuthMiddleware.initializeApp();
        }
        
        // اعمال تم ذخیره شده
        const savedTheme = localStorage.getItem('theme');
        if (savedTheme) {
            document.body.setAttribute('data-theme', savedTheme);
        }
    }

    debugAuth() {
        console.log('🔍 Auth Debug Info:');
        console.log('- Token:', authManager?.getToken());
        console.log('- Current User:', authManager?.getCurrentUser());
        console.log('- All Users:', authManager?.getUsers());
        console.log('- Is Authenticated:', authManager?.isAuthenticated());
    }

    loadComponents() {
        console.log('🔧 Loading components...');
        
        // بارگذاری کامپوننت‌های اصلی
        this.components = {
            header: typeof HeaderComponent !== 'undefined' ? new HeaderComponent() : null,
            modal: typeof ModalComponent !== 'undefined' ? new ModalComponent() : null,
            navigation: typeof NavigationComponent !== 'undefined' ? new NavigationComponent() : null,
            lessonUI: typeof LessonUI !== 'undefined' ? new LessonUI() : null,
            quizUI: typeof QuizUI !== 'undefined' ? new QuizUI() : null,
            exerciseUI: typeof ExerciseUI !== 'undefined' ? new ExerciseUI() : null
        };

        console.log('✅ Components loaded:', Object.keys(this.components));

        // رندر کامپوننت‌ها
        if (this.components.header) {
            this.components.header.render();
        }
        
        if (this.components.navigation) {
            this.components.navigation.render();
        }
    }

    setupEventListeners() {
        console.log('🎯 Setting up event listeners...');
        
        // مدیریت تغییر روز
        document.addEventListener('dayChanged', (event) => {
            this.handleDayChange(event.detail.day);
        });

        // مدیریت وضعیت احراز هویت
        document.addEventListener('authStateChanged', () => {
            this.handleAuthStateChange();
        });

        // مدیریت تکمیل درس
        document.addEventListener('lessonCompleted', (event) => {
            this.handleLessonCompleted(event.detail);
        });

        // مدیریت ارسال تمرین
        document.addEventListener('exerciseSubmitted', (event) => {
            this.handleExerciseSubmitted(event.detail);
        });

        // مدیریت به‌روزرسانی پیشرفت
        document.addEventListener('progressUpdated', () => {
            this.handleProgressUpdate();
        });

        // مدیریت کلیک روی دکمه‌های ناوبری
        document.addEventListener('click', (e) => {
            if (e.target.matches('[data-day]')) {
                const day = parseInt(e.target.getAttribute('data-day'));
                this.handleDayChange(day);
            }
            
            if (e.target.matches('.next-day')) {
                this.nextDay();
            }
            
            if (e.target.matches('.prev-day')) {
                this.previousDay();
            }
        });

        // جلوگیری از ارسال فرم‌ها
        document.addEventListener('submit', (e) => {
            if (e.target.tagName === 'FORM') {
                e.preventDefault();
            }
        });

        // مدیریت خطاهای全局
        window.addEventListener('error', (event) => {
            console.error('Global error:', event.error);
        });

        window.addEventListener('unhandledrejection', (event) => {
            console.error('Unhandled promise rejection:', event.reason);
        });
    }

    async loadInitialContent() {
        console.log('📚 Loading initial content...');
        
        // نمایش وضعیت loading
        this.showLoadingState();

        try {
            // بارگذاری محتوا
            await this.loadLesson();
            await this.loadQuiz();
            await this.loadExercise();
        } catch (error) {
            console.error('Error loading content:', error);
        } finally {
            // پنهان کردن وضعیت loading
            this.hideLoadingState();
        }
    }

    async loadLesson() {
        try {
            console.log(`📖 Loading lesson for day ${this.currentDay}...`);
            
            // شبیه‌سازی بارگذاری داده
            const lessonData = await this.simulateLessonLoad();
            
            const lessonContent = document.getElementById('lessonContent');
            if (lessonContent) {
                lessonContent.innerHTML = this.renderLesson(lessonData);
            }
            
        } catch (error) {
            console.error('Error loading lesson:', error);
            this.showContentError('lessonContent', 'خطا در بارگذاری درس');
        }
    }

    async loadQuiz() {
        try {
            console.log(`❓ Loading quiz for day ${this.currentDay}...`);
            
            // شبیه‌سازی بارگذاری داده
            const quizData = await this.simulateQuizLoad();
            
            const quizForm = document.getElementById('quizForm');
            if (quizForm) {
                quizForm.innerHTML = this.renderQuiz(quizData);
            }
            
        } catch (error) {
            console.error('Error loading quiz:', error);
            this.showContentError('quizForm', 'خطا در بارگذاری آزمون');
        }
    }

    async loadExercise() {
        try {
            console.log(`✏️ Loading exercise for day ${this.currentDay}...`);
            
            // شبیه‌سازی بارگذاری داده
            const exerciseData = await this.simulateExerciseLoad();
            
            const exerciseContent = document.getElementById('exerciseContent');
            if (exerciseContent) {
                exerciseContent.innerHTML = this.renderExercise(exerciseData);
            }
            
        } catch (error) {
            console.error('Error loading exercise:', error);
            this.showContentError('exerciseContent', 'خطا در بارگذاری تمرین');
        }
    }

    // شبیه‌سازهای بارگذاری داده
    simulateLessonLoad() {
        return new Promise((resolve) => {
            setTimeout(() => {
                resolve({
                    title: `درس روز ${this.currentDay}: مقدمات توسعه وب`,
                    content: `این محتوای آموزشی برای روز ${this.currentDay} است. در این درس با مفاهیم پایه توسعه وب آشنا می‌شوید.`,
                    points: 10
                });
            }, 500);
        });
    }

    simulateQuizLoad() {
        return new Promise((resolve) => {
            setTimeout(() => {
                resolve({
                    question: `سوال روز ${this.currentDay}: HTML چیست؟`,
                    options: [
                        'زبان برنامه‌نویسی',
                        'زبان نشانه‌گذاری',
                        'پایگاه داده',
                        'فریمورک CSS'
                    ],
                    correctAnswer: 1
                });
            }, 500);
        });
    }

    simulateExerciseLoad() {
        return new Promise((resolve) => {
            setTimeout(() => {
                resolve({
                    title: `تمرین روز ${this.currentDay}`,
                    description: 'یک صفحه HTML ساده ایجاد کنید.',
                    keywords: ['html', 'body', 'title'],
                    points: 15
                });
            }, 500);
        });
    }

    // رندررهای ساده
    renderLesson(data) {
        return `
            <div class="lesson-container">
                <h2>${data.title}</h2>
                <div class="lesson-content">
                    <p>${data.content}</p>
                </div>
                <div class="lesson-meta">
                    <span class="points">🏆 ${data.points} امتیاز</span>
                </div>
                <button class="btn btn-primary complete-lesson" onclick="app.completeLesson(${this.currentDay})">
                    تکمیل درس
                </button>
            </div>
        `;
    }

    renderQuiz(data) {
        return `
            <div class="quiz-container">
                <h3>آزمون کوتاه</h3>
                <p>${data.question}</p>
                <form id="quizFormElement">
                    ${data.options.map((option, index) => `
                        <div class="quiz-option">
                            <input type="radio" id="option${index}" name="quiz" value="${index}">
                            <label for="option${index}">${option}</label>
                        </div>
                    `).join('')}
                    <button type="submit" class="btn btn-primary">ارسال پاسخ</button>
                </form>
            </div>
        `;
    }

    renderExercise(data) {
        return `
            <div class="exercise-container">
                <h3>${data.title}</h3>
                <p>${data.description}</p>
                <form id="exerciseFormElement">
                    <div class="form-group">
                        <label for="exerciseAnswer">پاسخ خود را وارد کنید:</label>
                        <textarea id="exerciseAnswer" rows="4" placeholder="کد یا پاسخ خود را اینجا بنویسید..."></textarea>
                    </div>
                    <button type="submit" class="btn btn-primary">ارسال تمرین</button>
                </form>
                <div class="exercise-info">
                    <small>کلیدواژه‌های مهم: ${data.keywords.join(', ')}</small>
                    <br>
                    <small>🏅 ${data.points} امتیاز</small>
                </div>
            </div>
        `;
    }

    async handleDayChange(newDay) {
        if (newDay < 1 || newDay > this.maxDays) {
            console.warn('Invalid day number:', newDay);
            return;
        }

        console.log(`📅 Changing to day ${newDay}`);
        this.currentDay = newDay;
        
        // نمایش وضعیت loading
        this.showLoadingState();

        try {
            // بارگذاری محتوای جدید
            await this.loadLesson();
            await this.loadQuiz();
            await this.loadExercise();

            // به‌روزرسانی navigation
            this.updateNavigation();

            // اسکرول به بالای صفحه
            window.scrollTo({ top: 0, behavior: 'smooth' });

        } catch (error) {
            console.error('Error changing day:', error);
        } finally {
            // پنهان کردن وضعیت loading
            this.hideLoadingState();
        }
    }

    handleAuthStateChange() {
        console.log('🔄 Auth state changed');
        this.updateAuthDisplay();
        this.updateProgressDisplay();
    }

    handleLessonCompleted(detail) {
        console.log('📚 Lesson completed:', detail);
        
        // به‌روزرسانی امتیاز کاربر
        if (authManager.isAuthenticated()) {
            const user = authManager.getCurrentUser();
            userManager.updateUserProgress(detail.points || 10, this.currentDay);
        }
        
        this.updateProgressDisplay();
        this.showMessage('🎉 درس تکمیل شد! امتیاز شما به روز شد.', 'success');
    }

    handleExerciseSubmitted(detail) {
        console.log('✏️ Exercise submitted:', detail);
        this.updateProgressDisplay();
        this.showMessage('✅ تمرین ارسال شد!', 'success');
    }

    handleProgressUpdate() {
        this.updateProgressDisplay();
    }

    updateUI() {
        this.updateAuthDisplay();
        this.updateProgressDisplay();
        this.updateNavigation();
    }

    updateAuthDisplay() {
        const authSection = document.getElementById('authSection');
        if (!authSection) return;

        const user = authManager.getCurrentUser();
        
        if (user) {
            authSection.innerHTML = `
                <div class="user-welcome">
                    <div class="user-info">
                        <span class="welcome-text">خوش آمدید, ${user.profile.fullName || user.username}!</span>
                        <span class="user-role">${this.getRoleText(user.role)}</span>
                    </div>
                    <button onclick="app.logout()" class="btn btn-outline">خروج</button>
                </div>
            `;
        } else {
            authSection.innerHTML = `
                <div class="auth-actions">
                    <p>برای ذخیره پیشرفت وارد شوید</p>
                    <div class="auth-buttons">
                        <button onclick="app.showLogin()" class="btn btn-primary">ورود</button>
                        <button onclick="app.showRegister()" class="btn btn-secondary">ثبت نام</button>
                    </div>
                </div>
            `;
        }
    }

    updateProgressDisplay() {
        const progressContent = document.getElementById('progressContent');
        if (!progressContent) return;

        const user = authManager.getCurrentUser();
        
        if (user) {
            const progress = user.progress || { totalScore: 0, completedLessons: [] };
            const completedCount = progress.completedLessons?.length || 0;
            
            progressContent.innerHTML = `
                <div class="progress-stats">
                    <div class="stat-card">
                        <div class="stat-value">${Math.floor(completedCount / 3 * 100)}%</div>
                        <div class="stat-label">پیشرفت کل</div>
                    </div>
                    <div class="stat-card">
                        <div class="stat-value">${progress.totalScore || 0}</div>
                        <div class="stat-label">امتیاز کل</div>
                    </div>
                    <div class="stat-card">
                        <div class="stat-value">${completedCount}</div>
                        <div class="stat-label">درس تکمیل شده</div>
                    </div>
                </div>
            `;
        } else {
            progressContent.innerHTML = `
                <div class="guest-progress">
                    <p>👋 برای مشاهده پیشرفت خود وارد شوید</p>
                </div>
            `;
        }
    }

    updateNavigation() {
        const navigation = document.getElementById('dayNavigation');
        if (navigation) {
            navigation.innerHTML = this.createDayNavigation();
        }
    }

    createDayNavigation() {
        let navigationHTML = '<div class="day-navigation">';
        
        for (let day = 1; day <= this.maxDays; day++) {
            const isActive = day === this.currentDay;
            navigationHTML += `
                <button class="day-btn ${isActive ? 'active' : ''}" data-day="${day}">
                    روز ${day}
                </button>
            `;
        }
        
        navigationHTML += '</div>';
        return navigationHTML;
    }

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

    showLoadingState() {
        const sections = ['lessonContent', 'quizForm', 'exerciseContent'];
        sections.forEach(sectionId => {
            const element = document.getElementById(sectionId);
            if (element) {
                element.style.opacity = '0.6';
                element.style.pointerEvents = 'none';
            }
        });
    }

    hideLoadingState() {
        const sections = ['lessonContent', 'quizForm', 'exerciseContent'];
        sections.forEach(sectionId => {
            const element = document.getElementById(sectionId);
            if (element) {
                element.style.opacity = '1';
                element.style.pointerEvents = 'auto';
            }
        });
    }

    showContentError(elementId, message) {
        const element = document.getElementById(elementId);
        if (element) {
            element.innerHTML = `
                <div class="error-state">
                    <div class="error-message">${message}</div>
                    <button onclick="app.retryLoading()" class="btn btn-outline">
                        تلاش مجدد
                    </button>
                </div>
            `;
        }
    }

    showMessage(message, type = 'info') {
        // ایجاد یک نوتیفیکیشن ساده
        const notification = document.createElement('div');
        notification.className = `notification ${type}`;
        notification.innerHTML = `
            <div class="notification-content">
                <span>${message}</span>
                <button onclick="this.parentElement.parentElement.remove()">×</button>
            </div>
        `;
        
        document.body.appendChild(notification);
        
        // حذف خودکار بعد از 5 ثانیه
        setTimeout(() => {
            if (notification.parentElement) {
                notification.remove();
            }
        }, 5000);
    }

    // متدهای عمومی
    showLogin() {
        window.location.href = 'login.html';
    }

    showRegister() {
        window.location.href = 'register.html';
    }

    logout() {
        authManager.logout();
        this.handleAuthStateChange();
        this.showMessage('با موفقیت از سیستم خارج شدید.', 'info');
    }

    nextDay() {
        if (this.currentDay < this.maxDays) {
            this.handleDayChange(this.currentDay + 1);
        }
    }

    previousDay() {
        if (this.currentDay > 1) {
            this.handleDayChange(this.currentDay - 1);
        }
    }

    completeLesson(day) {
        document.dispatchEvent(new CustomEvent('lessonCompleted', {
            detail: { day: day, points: 10 }
        }));
    }

    async retryLoading() {
        await this.loadInitialContent();
    }

    showError(message) {
        this.showMessage(message, 'error');
    }

    showSuccess(message) {
        this.showMessage(message, 'success');
    }
}

// ایجاد نمونه اصلی برنامه
const app = new LearningPlatform();

// قرار دادن در scope全局 برای دسترسی از HTML
window.app = app;

// راه‌اندازی برنامه هنگام بارگذاری صفحه
document.addEventListener('DOMContentLoaded', () => {
    app.initialize();
});