document.addEventListener('DOMContentLoaded', () => {
    // Make screen elements draggable between screens
    const draggableElements = document.querySelectorAll('.left-screen .grid > div');
    
    draggableElements.forEach(element => {
        element.setAttribute('draggable', 'true');
        
        element.addEventListener('dragstart', (e) => {
            e.dataTransfer.setData('text/plain', element.innerHTML);
            element.classList.add('opacity-50');
        });
        
        element.addEventListener('dragend', () => {
            element.classList.remove('opacity-50');
        });
    });
    
    const previewArea = document.querySelector('.preview-area');
    
    previewArea.addEventListener('dragover', (e) => {
        e.preventDefault();
        previewArea.classList.add('bg-blue-50');
    });
    
    previewArea.addEventListener('dragleave', () => {
        previewArea.classList.remove('bg-blue-50');
    });
    
    previewArea.addEventListener('drop', (e) => {
        e.preventDefault();
        previewArea.classList.remove('bg-blue-50');
        const data = e.dataTransfer.getData('text/plain');
        previewArea.innerHTML = `<div class="dropped-content p-4">${data}</div>`;
    });
    
    // Screen resizing functionality
    const resizeHandle = document.createElement('div');
    resizeHandle.className = 'resize-handle w-2 bg-gray-300 cursor-col-resize hover:bg-blue-500 transition-colors';
    document.querySelector('.dual-screen-container').appendChild(resizeHandle);
    
    let isResizing = false;
    
    resizeHandle.addEventListener('mousedown', () => {
        isResizing = true;
        document.body.style.cursor = 'col-resize';
    });
    
    document.addEventListener('mousemove', (e) => {
        if (!isResizing) return;
        
        const container = document.querySelector('.dual-screen-container');
        const leftScreen = document.querySelector('.left-screen');
        const rightScreen = document.querySelector('.right-screen');
        
        const containerRect = container.getBoundingClientRect();
        const newLeftWidth = e.clientX - containerRect.left;
        const newRightWidth = containerRect.width - newLeftWidth - 8; // 8px for handle width
        
        leftScreen.style.flex = `0 0 ${newLeftWidth}px`;
        rightScreen.style.flex = `0 0 ${newRightWidth}px`;
    });
    
    document.addEventListener('mouseup', () => {
        isResizing = false;
        document.body.style.cursor = '';
    });
});