// هذا هو "المدير" الذي سيربط كل شيء
console.log("🚀 النظام الأساسي يعمل بنجاح!");

// سنقوم هنا بتحميل الوحدات (Modules) لاحقاً
// مثل:
// import { initWhiteboard } from './modules/whiteboard.js';
window.addEventListener('DOMContentLoaded', () => {
    if (typeof AIAssistantModule !== 'undefined') 
        console.log("AI Init executed");
    // 1. تفعيل السبورة
    if (typeof WhiteboardModule !== 'undefined') WhiteboardModule.init();
    
    // 2. تفعيل الذكاء الاصطناعي
    if (typeof AIAssistantModule !== 'undefined') AIAssistantModule.init();
   
        console.log("3D Module Init executed");
   
    
    // 3. تفعيل نافذة الـ 3D
    if (typeof ThreeDModule !== 'undefined') ThreeDModule.init();
    
    console.log("تم الضغط على الزر، والآن نحاول فتح السلايد...");
});

const makeDraggable = (elementId) => {
    const el = document.getElementById(elementId);
    if(!el) return; // حماية إضافية
    let isDragging = false, offset = {x: 0, y: 0};

    el.onmousedown = (e) => {
        isDragging = true;
        offset = { x: e.clientX - el.offsetLeft, y: e.clientY - el.offsetTop };
    };

    document.onmousemove = (e) => {
        if (!isDragging) return;
        el.style.left = (e.clientX - offset.x) + 'px';
        el.style.top = (e.clientY - offset.y) + 'px';
    };

    document.onmouseup = () => isDragging = false;
};

// تفعيل السحب للكاميرا
makeDraggable('teacher-video-container');

// دالة لجعل عنصر الكاميرا قابلاً للسحب
function initDraggableCamera(elementId) {
    const el = document.getElementById(elementId);
    if (!el) return;

    // إضافة ستايل CSS ضروري للتحريك
    el.style.position = 'fixed';
    el.style.zIndex = '9999';
    el.style.cursor = 'move';
    el.style.top = '20px'; // الموقع الافتراضي
    el.style.right = '20px';

    let isDragging = false, offset = {x: 0, y: 0};

    el.onmousedown = (e) => {
        isDragging = true;
        offset = { x: e.clientX - el.offsetLeft, y: e.clientY - el.offsetTop };
    };

    document.onmousemove = (e) => {
        if (!isDragging) return;
        el.style.left = (e.clientX - offset.x) + 'px';
        el.style.top = (e.clientY - offset.y) + 'px';
    };

    document.onmouseup = () => isDragging = false;
}

// استدعاء الدالة عند تحميل الصفحة
window.addEventListener('DOMContentLoaded', () => {
    initDraggableCamera('teacher-video-container'); // تأكد أن الـ ID هذا هو نفس الـ ID للكاميرا عندك
});

// 1. دالة إظهار النافذة وجلب كاميرات الطلاب الحاضرين
function showStudentCams() {
    const modal = document.getElementById('student-cams-modal');
    const grid = document.getElementById('student-cams-grid');
    if (!modal || !grid) return;
    
    // فتح النافذة وإظهار مؤشر التحميل
    modal.style.display = 'block';
    grid.innerHTML = '<div style="grid-column: 1/-1; text-align:center; padding:20px; color:#6b1024; font-weight:bold;">جاري الاتصال بقائمة الحضور وجلب الكاميرات...</div>';

    // جلب الطلاب المقبولين حالياً في الحصة عبر الـ API
    const teacherId = typeof phpTid !== 'undefined' ? phpTid : '';
    fetch(`../zoom_api/waiting_room_api.php?action=get_pending&tid=${teacherId}`)
    .then(res => res.json())
    .then(data => {
        grid.innerHTML = ''; // تفريغ رسالة التحميل
        
        if (!data.accepted || data.accepted.length === 0) {
            grid.innerHTML = '<div style="grid-column: 1/-1; text-align:center; padding:20px; color:#999;"><i class="fas fa-users-slash"></i> لا يوجد طلاب حاضرون في الغرفة حالياً.</div>';
            return;
        }

        // بناء مربع مستقل لكل طالب حاضر
        data.accepted.forEach(student => {
            const card = document.createElement('div');
            card.className = 'student-cam-card';
            card.style.position = 'relative';
            card.style.background = '#1a1a1a';
            card.style.borderRadius = '8px';
            card.style.overflow = 'hidden';
            card.style.aspectRatio = '16/9';
            card.style.border = '2px solid #ccc';
            card.style.cursor = 'pointer';
            card.style.transition = 'all 0.25s ease-in-out';

            // اسم الطالب أسفل الكاميرا
            const label = document.createElement('div');
            label.innerText = student.student_name;
            label.style.position = 'absolute';
            label.style.bottom = '8px';
            label.style.right = '8px';
            label.style.background = 'rgba(0, 0, 0, 0.7)';
            label.style.color = '#fff';
            label.style.padding = '3px 10px';
            label.style.borderRadius = '4px';
            label.style.fontSize = '12px';
            label.style.zIndex = '10';

            // عرض البث أو أيقونة الكاميرا المغلقة بناءً على حالة can_cam
            const streamContainer = document.createElement('div');
            streamContainer.style.width = '100%';
            streamContainer.style.height = '100%';
            streamContainer.style.display = 'flex';
            streamContainer.style.alignItems = 'center';
            streamContainer.style.justifyContent = 'center';

            // 🚀 التعديل الذكي: نضع عنصر الفيديو والأيقونة معاً لمنع تدمير البث وتجمد الشاشة
            streamContainer.innerHTML = `
                <video id="zoom_stream_${student.student_id}" autoplay playsinline 
                       style="width:100%; height:100%; object-fit:cover; 
                              display: ${student.can_cam == 1 ? 'block' : 'none'};">
                </video>
                <div id="placeholder_${student.student_id}" 
                     style="display: ${student.can_cam == 0 ? 'flex' : 'none'}; 
                            align-items:center; justify-content:center; width:100%; height:100%;">
                    <i class="fas fa-video-slash" style="font-size:28px; color:#555;"></i>
                </div>
            `;

            // 💡 إذا عادت الكاميرا للعمل، نضمن أن المتصفح سيقوم بعمل تشغيل (Play) للفيديو دون تجمد
            if (student.can_cam == 1) {
                setTimeout(() => {
                    const activeVid = document.getElementById(`zoom_stream_${student.student_id}`);
                    if (activeVid && activeVid.paused) {
                        activeVid.play().catch(e => console.log("في انتظار فريمات البث الجديدة..."));
                    }
                }, 300);
            }

            // 👇 من هنا نُبقي الكود الخاص بك كما هو تماماً لكي لا تفقد ميزة التكبير!
            card.appendChild(label);
            card.appendChild(streamContainer);

            // 🚀 ميزة التكبير الذكي عند الضغط لتأخذ حجم الشاشة المنبثقة بالكامل
            card.onclick = function(e) {
                // منع التداخل إذا كان يضغط على عناصر داخلية
                if (card.classList.contains('cam-maximized')) {
                    // العودة للوضع الطبيعي داخل الـ Grid
                    card.classList.remove('cam-maximized');
                    card.style.position = 'relative';
                    card.style.top = 'auto';
                    card.style.left = 'auto';
                    card.style.width = '100%';
                    card.style.height = '100%';
                    card.style.zIndex = '1';
                    card.style.border = '2px solid #ccc';
                    grid.style.display = 'grid'; // إعادة إظهار باقي الطلاب
                } else {
                    // إلغاء تكبير أي كاميرا أخرى أولاً
                    document.querySelectorAll('.student-cam-card').forEach(c => c.classList.remove('cam-maximized'));
                    
                    // تكبير الكاميرا الحالية لتملأ النافذة بالكامل
                    card.classList.add('cam-maximized');
                    grid.style.display = 'block'; // تحويل الحاوية إلى block لتسهيل تحديد الأبعاد المطلقة
                    card.style.position = 'absolute';
                    card.style.top = '65px';
                    card.style.left = '20px';
                    card.style.width = 'calc(100% - 40px)';
                    card.style.height = 'calc(100% - 95px)';
                    card.style.zIndex = '9999';
                    card.style.border = '2px solid #6b1024';
                }
            };

            grid.appendChild(card);
        });
    })
    .catch(err => {
        grid.innerHTML = '<div style="grid-column: 1/-1; text-align:center; padding:20px; color:#cc0000;">عذراً، حدث خلل أثناء جلب الاتصال المباشر للكاميرات.</div>';
    });
}

// 2. دالة إغلاق نافذة الكاميرات وإعادة تهيئة الشاشة
function closeStudentCams() {
    const modal = document.getElementById('student-cams-modal');
    const grid = document.getElementById('student-cams-grid');
    if (modal) modal.style.display = 'none';
    if (grid) grid.style.display = 'grid'; // إرجاع توزيع الـ Grid الطبيعي
}