document.addEventListener('DOMContentLoaded', () => {
    // Initialize editor functionality
    const editorCanvas = document.getElementById('editor-canvas');
    
    // Drag and drop functionality
    editorCanvas.addEventListener('dragover', (e) => {
        e.preventDefault();
        editorCanvas.classList.add('border-lime-500', 'bg-lime-50');
    });

    editorCanvas.addEventListener('dragleave', () => {
        editorCanvas.classList.remove('border-lime-500', 'bg-lime-50');
    });

    editorCanvas.addEventListener('drop', (e) => {
        e.preventDefault();
        editorCanvas.classList.remove('border-lime-500', 'bg-lime-50');
        
        // Handle dropped files
        const file = e.dataTransfer.files[0];
        if (file && file.type.match('image.*')) {
            const reader = new FileReader();
            reader.onload = (event) => {
                editorCanvas.innerHTML = `<img src="${event.target.result}" class="max-h-full max-w-full object-contain">`;
            };
            reader.readAsDataURL(file);
        }
    });

    // File input handler
    document.getElementById('upload-btn')?.addEventListener('click', () => {
        const input = document.createElement('input');
        input.type = 'file';
        input.accept = 'image/*';
        input.onchange = (e) => {
            const file = e.target.files[0];
            if (file) {
                const reader = new FileReader();
                reader.onload = (event) => {
                    editorCanvas.innerHTML = `<img src="${event.target.result}" class="max-h-full max-w-full object-contain">`;
                };
                reader.readAsDataURL(file);
            }
        };
        input.click();
    });
});