document.addEventListener('DOMContentLoaded', () => {
    // Canvas setup
    const canvas = document.getElementById('drawing-canvas');
    const previewCanvas = document.getElementById('preview-canvas');
    const ctx = canvas.getContext('2d');
    const previewCtx = previewCanvas.getContext('2d');
    
    // Resize canvases to match their display size
    function resizeCanvases() {
        const containerWidth = canvas.parentElement.clientWidth;
        const displayHeight = window.innerWidth < 768 ? 400 : 500;
        
        canvas.width = containerWidth;
        canvas.height = displayHeight;
        previewCanvas.width = containerWidth;
        previewCanvas.height = displayHeight;
        
        // Redraw any existing content
        refreshPreview();
    }
    
    window.addEventListener('resize', resizeCanvases);
    resizeCanvases();
    
    // Drawing state
    let isDrawing = false;
    let lastX = 0;
    let lastY = 0;
    let currentTool = 'pen';
    let currentColor = '#000000';
    let currentSize = 5;
    
    // DOM Elements
    const penBtn = document.getElementById('pen-btn');
    const eraserBtn = document.getElementById('eraser-btn');
    const colorPicker = document.getElementById('color-picker');
    const brushSize = document.getElementById('brush-size');
    const brushSizeValue = document.getElementById('brush-size-value');
    const clearBtn = document.getElementById('clear-btn');
    const uploadBtn = document.getElementById('upload-btn');
    const imageUpload = document.getElementById('image-upload');
    
    // Tool selection
    penBtn.addEventListener('click', () => {
        currentTool = 'pen';
        penBtn.classList.add('tool-active');
        eraserBtn.classList.remove('tool-active');
    });
    
    eraserBtn.addEventListener('click', () => {
        currentTool = 'eraser';
        eraserBtn.classList.add('tool-active');
        penBtn.classList.remove('tool-active');
    });
    
    // Set initial active tool
    penBtn.classList.add('tool-active');
    
    // Color and size selection
    colorPicker.addEventListener('input', (e) => {
        currentColor = e.target.value;
    });
    
    brushSize.addEventListener('input', (e) => {
        currentSize = e.target.value;
        brushSizeValue.textContent = `${currentSize}px`;
    });
    
    // Clear canvas
    clearBtn.addEventListener('click', () => {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        previewCtx.clearRect(0, 0, previewCanvas.width, previewCanvas.height);
    });
    
    // Upload image
    uploadBtn.addEventListener('click', () => {
        imageUpload.click();
    });
    
    imageUpload.addEventListener('change', (e) => {
        const file = e.target.files[0];
        if (!file) return;
        
        const reader = new FileReader();
        reader.onload = (event) => {
            const img = new Image();
            img.onload = () => {
                // Draw image to canvas
                ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
                refreshPreview();
            };
            img.src = event.target.result;
        };
        reader.readAsDataURL(file);
    });
    
    // Drawing functions