// دالة ذكية لجلب الوسائل وعرضها في القائمة الجانبية (media_sync.js)
async function loadLessonsList(subject) {
    const listDiv = document.getElementById('lessons-list');
    if (!listDiv) return;

    listDiv.innerHTML = '<p style="color: #64748b;"><i class="fas fa-spinner fa-spin"></i> جاري التحميل...</p>';

    try {
        const response = await fetch(`../zoom_api/get_media.php?subject=${subject}`);
        if (!response.ok) throw new Error(`خطأ في السيرفر`);
        
        const textData = await response.text();
        let lessons = JSON.parse(textData); 
        
        listDiv.innerHTML = '';
        if (!lessons || lessons.length === 0) {
            listDiv.innerHTML = '<p style="color:#888; font-size: 13px; text-align:center;">لا توجد وسائل مضافة.</p>';
            return;
        }
        
        lessons.forEach(lesson => {
            const div = document.createElement('div');
            div.className = 'media-item';
            div.style.cssText = 'cursor:pointer; padding:10px; border-bottom:1px solid #eee;';
            div.innerHTML = `📦 ${lesson.title}`;
            
            div.onclick = () => {
                // توافق تام مع قاعدة البيانات
                const url = lesson.url || lesson.source_url || lesson.id;
                const type = (lesson.type || lesson.media_type || '').toUpperCase();
                const uniqueId = 'media-' + Date.now(); 

                const mediaWindow = document.createElement('div');
                mediaWindow.id = uniqueId;
                mediaWindow.className = 'draggable-video-wrapper';
                mediaWindow.style.cssText = 'position: absolute; top: 15%; left: 20%; width: 50%; height: 60%; z-index: 9999 !important; background: #fff; border: 2px solid #6b1024; border-radius: 8px; overflow: hidden; resize: both; box-shadow: 0 5px 15px rgba(0,0,0,0.2); flex-direction: column; display: flex; pointer-events: auto;';

                mediaWindow.innerHTML = `
                    <div id="drag-${uniqueId}" style="background: #6b1024; color: white; padding: 8px 15px; display: flex; justify-content: space-between; align-items: center; font-size: 14px; cursor: move; user-select: none;">
                        <span><i class="fas fa-file-alt"></i> ${lesson.title}</span>
                        <button onclick="
                            document.getElementById('${uniqueId}').remove();
                            fetch('../zoom_api/media_sync_api.php?action=send_command&tid=' + new URLSearchParams(window.location.search).get('tid'), {
                                method: 'POST', headers: { 'Content-Type': 'application/json' },
                                body: JSON.stringify({ action: 'CLEAR' })
                            });
                        " style="background: none; border: none; color: white; cursor: pointer; font-size: 16px;"><i class="fas fa-times"></i></button>
                    </div>
                    <div id="content-${uniqueId}" style="width: 100%; flex: 1; position: relative; background: #f0f2f5;"></div>
                `;

                document.body.appendChild(mediaWindow); // إجبار المتصفح على وضعه في المقدمة

                // 🚀 تفعيل السحب بشكل آمن
                setTimeout(() => {
                    const dragHandle = document.getElementById(`drag-${uniqueId}`);
                    if (typeof makeVideoDraggable === 'function' && dragHandle) {
                        makeVideoDraggable(mediaWindow, dragHandle);
                    }
                }, 50);

                const contentArea = document.getElementById(`content-${uniqueId}`);
                if (type === '3D' || url.toLowerCase().endsWith('.glb')) {
                    contentArea.innerHTML = `<model-viewer src="${url}" camera-controls auto-rotate style="width:100%; height:100%; outline:none;"></model-viewer>`;
                } else if (type === 'IMAGE' || url.match(/\.(jpeg|jpg|gif|png)$/i)) {
                    contentArea.innerHTML = `<img src="${url}" style="width:100%; height:100%; object-fit:contain;">`;
                } else if (type === 'YOUTUBE' || url.includes('youtube.com') || url.includes('youtu.be')) {
                    let embedUrl = url.replace('watch?v=', 'embed/');
                    contentArea.innerHTML = `<iframe src="${embedUrl}" style="width:100%; height:100%; border:none;" allowfullscreen></iframe>`;
                } else {
                    contentArea.innerHTML = `<iframe src="${url}" style="width:100%; height:100%; border:none;"></iframe>`;
                }

                const closeBtn = document.getElementById('close-3d');
                if (closeBtn) closeBtn.click();

                // الإرسال للطالب عند الفتح
                const tid = new URLSearchParams(window.location.search).get('tid');
                const payload = { action: 'LOAD_FILE', data: { id: uniqueId, url: url, title: lesson.title, type: type } };
                fetch(`../zoom_api/media_sync_api.php?action=send_command&tid=${tid}`, { 
                    method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(payload) 
                }).catch(e => console.log(""));
            };
            listDiv.appendChild(div);
        });
    } catch (e) {}
}

// 🚀 حل مشكلة تسابق الأكواد: محرك بحث ذكي لا يستسلم حتى يجد القائمة
function initMediaSync() {
    const subjectSelector = document.getElementById('subject-selector');
    if (subjectSelector) {
        console.log("✅ تم العثور على المختبر بنجاح! جاري تحميل المجسمات...");
        
        // مسح أي أحداث قديمة لمنع التكرار
        const newSelector = subjectSelector.cloneNode(true);
        subjectSelector.parentNode.replaceChild(newSelector, subjectSelector);
        
        newSelector.addEventListener('change', (e) => loadLessonsList(e.target.value));
        loadLessonsList(newSelector.value || 'biology');  
    } else {
        // إذا لم يجد القائمة، ينتظر نصف ثانية ويبحث مجدداً (لن تحتاج لتحديث الصفحة بعد اليوم)
        setTimeout(initMediaSync, 500); 
    }
}

// 🚀 تشغيل المحرك (تم مسح القوس الزائد الذي كان يدمر الملف من هنا)
initMediaSync();

// =========================================================
// 🚀 رادار المزامنة الخارجي المطور (يدعم السحب + التكبير والتصغير)
// =========================================================
document.addEventListener('mouseup', function(e) {
    // 💡 التعديل هنا: أصبحنا نراقب النافذة بالكامل وليس فقط شريط السحب، لكي نلتقط تغيير الحجم (Resize) من الحواف
    const mediaWindow = e.target.closest('.draggable-video-wrapper');
    
    if (mediaWindow) {
        const parent = document.getElementById('board-wrapper');
        
        if (parent) {
            const tid = new URLSearchParams(window.location.search).get('tid');
            
            // حساب الإحداثيات والحجم بالنسبة المئوية لضمان التطابق على كل الشاشات
            const leftPerc = (mediaWindow.offsetLeft / parent.offsetWidth) * 100;
            const topPerc = (mediaWindow.offsetTop / parent.offsetHeight) * 100;
            const widthPerc = (mediaWindow.offsetWidth / parent.offsetWidth) * 100;
            const heightPerc = (mediaWindow.offsetHeight / parent.offsetHeight) * 100;
            
            // إرسال الحركة والحجم للطالب
            fetch(`../zoom_api/media_sync_api.php?action=send_command&tid=${tid}`, { 
                method: 'POST', 
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ 
                    action: 'MOVE_MEDIA', 
                    data: { id: mediaWindow.id, left: leftPerc + '%', top: topPerc + '%', width: widthPerc + '%', height: heightPerc + '%' } 
                }) 
            }).catch(err => {});
        }
    }
    
});
// 🚀 الحارس الذكي لحماية أزرار المجسمات من التدخلات الخارجية (main.js)
setInterval(() => {
    const listDiv = document.getElementById('lessons-list');
    if(listDiv) {
        // إذا وجدنا أن الأزرار تغيرت واختفت أيقونة الصندوق 📦، نقوم بإعادة بناء أزرارنا المبرمجة للمزامنة فوراً!
        if(listDiv.innerHTML.length > 5 && !listDiv.innerHTML.includes('📦')) {
            console.log("تم اكتشاف تدخل خارجي في القائمة، جاري استعادة أزرار المزامنة...");
            const subjectSelector = document.getElementById('subject-selector');
            loadLessonsList(subjectSelector ? subjectSelector.value : 'biology');
        }
    }
}, 1000);