class LessonUI {
    constructor() {
        this.currentLesson = null;
        this.lessonStartTime = null;
        this.interactionCount = 0;
    }

    async render(lessonData) {
        this.currentLesson = lessonData;
        this.lessonStartTime = Date.now();
        this.interactionCount = 0;

        const lessonContent = document.getElementById('lessonContent');
        if (!lessonContent) return;

        let html = `
            <div class="lesson-header">
                <h3>${this.escapeHtml(lessonData.title)}</h3>
                <div class="lesson-meta">
                    <span class="lesson-day">روز ${lessonData.day}</span>
                    <span class="lesson-duration">⏱️ حدود ${lessonData.estimated_duration || '10'} دقیقه</span>
                </div>
            </div>
            <div class="lesson-sections">
        `;

        lessonData.sections.forEach((section, index) => {
            html += this.renderSection(section, index);
        });

        html += `
            </div>
            <div class="lesson-actions">
                <button class="btn btn-primary" onclick="lessonUI.completeLesson()">
                    ✅ تکمیل درس
                </button>
                <button class="btn btn-secondary" onclick="lessonUI.toggleBookmark()">
                    📌 نشان کردن
                </button>
            </div>
            <div class="lesson-progress">
                <div class="progress-bar">
                    <div class="progress-fill" style="width: 0%"></div>
                </div>
                <span class="progress-text">0% مطالعه شده</span>
            </div>
        `;

        lessonContent.innerHTML = html;
        this.setupInteractions();
        this.startProgressTracking();
    }

    renderSection(section, index) {
        let sectionHtml = `<div class="lesson-section" data-section="${index}">`;

        switch (section.type) {
            case 'text':
                sectionHtml += `
                    <div class="text-content">
                        ${this.formatTextContent(section.content)}
                    </div>
                `;
                break;

            case 'image':
                sectionHtml += `
                    <div class="image-content">
                        <img src="${section.url}" alt="${this.escapeHtml(section.alt)}" loading="lazy">
                        ${section.caption ? `<div class="image-caption">${this.escapeHtml(section.caption)}</div>` : ''}
                    </div>
                `;
                break;

            case 'code':
                sectionHtml += `
                    <div class="code-content">
                        <pre><code class="language-${section.language || 'html'}">${this.escapeHtml(section.code)}</code></pre>
                        ${section.explanation ? `<div class="code-explanation">${this.formatTextContent(section.explanation)}</div>` : ''}
                    </div>
                `;
                break;

            case 'video':
                sectionHtml += `
                    <div class="video-content">
                        <div class="video-placeholder">
                            🎥 محتوای ویدئویی: ${this.escapeHtml(section.title)}
                        </div>
                        ${section.description ? `<div class="video-description">${this.formatTextContent(section.description)}</div>` : ''}
                    </div>
                `;
                break;

            default:
                sectionHtml += `<div class="unknown-content">نوع محتوای ناشناخته</div>`;
        }

        sectionHtml += `</div>`;
        return sectionHtml;
    }

    formatTextContent(content) {
        // تبدیل مارک‌داون ساده به HTML
        return content
            .replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>')
            .replace(/\*(.*?)\*/g, '<em>$1</em>')
            .replace(/`(.*?)`/g, '<code>$1</code>')
            .replace(/\n/g, '<br>');
    }

    escapeHtml(unsafe) {
        return unsafe
            .replace(/&/g, "&amp;")
            .replace(/</g, "&lt;")
            .replace(/>/g, "&gt;")
            .replace(/"/g, "&quot;")
            .replace(/'/g, "&#039;");
    }

    setupInteractions() {
        // ردیابی اسکرول برای پیشرفت
        let scrollTimeout;
        const lessonSections = document.querySelector('.lesson-sections');
        
        if (lessonSections) {
            lessonSections.addEventListener('scroll', () => {
                clearTimeout(scrollTimeout);
                scrollTimeout = setTimeout(() => {
                    this.trackInteraction('scroll');
                    this.updateProgress();
                }, 100);
            });
        }

        // ردیابی کلیک
        document.addEventListener('click', (e) => {
            if (e.target.closest('.lesson-section')) {
                this.trackInteraction('click');
            }
        });
    }

    startProgressTracking() {
        this.progressInterval = setInterval(() => {
            this.updateProgress();
        }, 2000);
    }

    updateProgress() {
        const sections = document.querySelectorAll('.lesson-section');
        const lessonSections = document.querySelector('.lesson-sections');
        
        if (!sections.length || !lessonSections) return;

        let visibleSections = 0;
        const containerRect = lessonSections.getBoundingClientRect();

        sections.forEach(section => {
            const rect = section.getBoundingClientRect();
            if (rect.top >= containerRect.top && rect.bottom <= containerRect.bottom) {
                visibleSections++;
            }
        });

        const progress = (visibleSections / sections.length) * 100;
        this.updateProgressBar(progress);
    }

    updateProgressBar(progress) {
        const progressFill = document.querySelector('.progress-fill');
        const progressText = document.querySelector('.progress-text');
        
        if (progressFill && progressText) {
            progressFill.style.width = `${progress}%`;
            progressText.textContent = `${Math.round(progress)}% مطالعه شده`;
        }
    }

    trackInteraction(type) {
        this.interactionCount++;
        
        // ذخیره تعاملات مهم
        const interactions = Utils.loadFromLocalStorage('lesson_interactions') || {};
        const lessonId = this.currentLesson?.day;
        
        if (lessonId) {
            if (!interactions[lessonId]) {
                interactions[lessonId] = [];
            }
            interactions[lessonId].push({
                type: type,
                timestamp: new Date().toISOString()
            });
            
            Utils.saveToLocalStorage('lesson_interactions', interactions);
        }
    }

    async completeLesson() {
        if (!this.currentLesson) return;

        const duration = Math.round((Date.now() - this.lessonStartTime) / 1000 / 60); // دقیقه
        const result = learningLogic.completeLesson(
            this.currentLesson.day,
            duration,
            this.interactionCount
        );

        // نمایش نتیجه
        Utils.showNotification(
            `درس تکمیل شد! 🎉 ${result.reward} امتیاز دریافت کردید.`,
            'success'
        );

        // به‌روزرسانی UI
        this.updateProgressBar(100);
        
        // غیرفعال کردن دکمه
        const completeBtn = document.querySelector('.lesson-actions .btn-primary');
        if (completeBtn) {
            completeBtn.disabled = true;
            completeBtn.textContent = '✅ تکمیل شده';
        }

        // ارسال event برای به‌روزرسانی سایر بخش‌ها
        document.dispatchEvent(new CustomEvent('lessonCompleted', {
            detail: {
                lesson: this.currentLesson,
                reward: result.reward,
                duration: duration
            }
        }));
    }

    toggleBookmark() {
        if (!this.currentLesson) return;

        const bookmarks = Utils.loadFromLocalStorage('bookmarked_lessons') || [];
        const lessonId = this.currentLesson.day;
        const index = bookmarks.indexOf(lessonId);

        let isBookmarked;
        if (index > -1) {
            bookmarks.splice(index, 1);
            isBookmarked = false;
            Utils.showNotification('نشان درس حذف شد', 'info');
        } else {
            bookmarks.push(lessonId);
            isBookmarked = true;
            Utils.showNotification('درس نشان شده', 'success');
        }

        Utils.saveToLocalStorage('bookmarked_lessons', bookmarks);

        // به‌روزرسانی دکمه
        const bookmarkBtn = document.querySelector('.lesson-actions .btn-secondary');
        if (bookmarkBtn) {
            bookmarkBtn.innerHTML = isBookmarked ? '📌 نشان شده' : '📌 نشان کردن';
        }
    }

    destroy() {
        if (this.progressInterval) {
            clearInterval(this.progressInterval);
        }
    }
}

// ایجاد نمونه اصلی
const lessonUI = new LessonUI();