window.WhiteboardSync = {
    lastStudentDrawTime: 0,
    lastStrokeId: null,
    lastDrawnIndex: 0,
    pauseSync: false, // 🚀 1. تمت إضافة متغير الإيقاف المؤقت لمنع التداخل (Race Condition)

    sendStudentData: function(pointsArray, color, width, tool, tid, strokeId) {
        // إرسال عبر السيرفر الجديد (Socket.io)
        if (typeof window.socket !== 'undefined' && window.socket.connected) {
            window.socket.emit('draw', {
                points: pointsArray,
                strokeId: strokeId,
                color: color,
                width: width,
                tool: tool,
                timestamp: Date.now()
            });
        }

        // إرسال عبر الطريقة القديمة (للأمان والنسخ الاحتياطي)
        let formData = new FormData();
        formData.append('payload', JSON.stringify({ 
            type: 'draw', 
            points: pointsArray, 
            strokeId: strokeId, 
            color: color, 
            width: width, 
            tool: tool,
            timestamp: Date.now() 
        }));
        
        fetch(`../zoom_api/waiting_room_api.php?action=sync_student_draw&tid=${tid}`, {
            method: 'POST', body: formData
        }).catch(()=>{});
    },

    sendClearSignal: function(tid) {
        let formData = new FormData();
        // نرسل حزمة صغيرة تخبر الطالب بالمسح فوراً
        formData.append('payload', JSON.stringify({ action: 'clear_board', timestamp: Date.now() }));
        fetch(`../zoom_api/waiting_room_api.php?action=sync_whiteboard&tid=${tid}`, {
            method: 'POST', body: formData
        }).catch(()=>{});
    },

    startTeacherSync: function(tid) {
        // 1. إرسال صورة المدرس للطالب (بصيغة PNG الشفافة)
        setInterval(() => {
            if (WhiteboardSync.pauseSync) return; 

            const canvas = document.getElementById('whiteboard');
            if(!canvas) return;
            
            // 🚀 السر هنا: استخدام PNG للحفاظ على الشفافية ومنع اللون الأسود
            const img = canvas.toDataURL('image/png'); 
            
            let formData = new FormData();
            formData.append('payload', JSON.stringify({ image: img }));
            fetch(`../zoom_api/waiting_room_api.php?action=sync_whiteboard&tid=${tid}`, {
                method: 'POST', body: formData
            }).catch(()=>{});
        }, 1000);

        // 2. استقبال رسم الطالب عند المدرس
        setInterval(() => {
            fetch(`../zoom_api/waiting_room_api.php?action=get_whiteboard_sync&tid=${tid}&nocache=${Date.now()}`, { cache: 'no-store' })
            .then(res => res.json())
            .then(data => {
                if(data.student_payload) {
                    let payloadObj = data.student_payload;
                    if (typeof payloadObj === 'string') {
                        try { payloadObj = JSON.parse(payloadObj); } catch(e) { return; }
                    }

                    if (payloadObj && payloadObj.type === 'draw') {
                        if (payloadObj.timestamp > WhiteboardSync.lastStudentDrawTime) {
                            WhiteboardSync.drawOnCanvas(payloadObj);
                            WhiteboardSync.lastStudentDrawTime = payloadObj.timestamp;
                        }
                    }
                }
            }).catch(()=>{});
        }, 150); 
    },
    drawOnCanvas: function(payload) {
        const canvas = document.getElementById('whiteboard');
        if(!canvas) return;
        const ctx = canvas.getContext('2d');
        
        ctx.strokeStyle = payload.color;
        ctx.lineWidth = payload.width;
        if(payload.tool === 'eraser') {
            ctx.strokeStyle = '#ffffff';
            ctx.lineWidth = payload.width * 4;
        }

        if (payload.strokeId !== WhiteboardSync.lastStrokeId) {
            WhiteboardSync.lastStrokeId = payload.strokeId;
            WhiteboardSync.lastDrawnIndex = 0;
        }

        let points = payload.points || [];
        if (points.length > 0 && WhiteboardSync.lastDrawnIndex < points.length) {
            if (WhiteboardSync.lastDrawnIndex === 0) {
                ctx.beginPath();
                ctx.moveTo(points[0].x * canvas.width, points[0].y * canvas.height);
                WhiteboardSync.lastDrawnIndex = 1;
            }
            for (let i = WhiteboardSync.lastDrawnIndex; i < points.length; i++) {
                ctx.lineTo(points[i].x * canvas.width, points[i].y * canvas.height);
                ctx.stroke();
            }
            WhiteboardSync.lastDrawnIndex = points.length;
        }
    },

    startStudentSync: function(tid) {
        setInterval(() => {
            fetch(`../zoom_api/waiting_room_api.php?action=get_whiteboard_sync&tid=${tid}&nocache=${Date.now()}`, { cache: 'no-store' })
            .then(res => res.json())
            .then(data => {
                if(!data.teacher_payload) return;
                const canvas = document.getElementById('whiteboard');
                if(!canvas) return;

                // 🚀 إذا كانت الإشارة القادمة من المدرس هي مسح السبورة
                if (data.teacher_payload.action === 'clear_board') {
                    canvas.style.backgroundImage = 'none'; // نحذف الخلفية فوراً
                    
                    // 🚀 3. تفعيل مسح شخبطة الطالب فوراً في نفس اللحظة
                    const ctx = canvas.getContext('2d');
                    ctx.clearRect(0, 0, canvas.width, canvas.height);
                    return;
                }

                // إذا كان إرسالاً عادياً لصورة المدرس
                if(data.teacher_payload.image) {
                    canvas.style.backgroundImage = `url(${data.teacher_payload.image})`;
                    canvas.style.backgroundSize = '100% 100%';
                    canvas.style.backgroundRepeat = 'no-repeat';
                }
            }).catch(()=>{});
        }, 1000);
    },
};