document.addEventListener('DOMContentLoaded', () => {
    const video = document.getElementById('video');
    const canvas = document.getElementById('canvas');
    const captureButton = document.getElementById('capture');
    const message = document.getElementById('message');

    // Access the webcam
    navigator.mediaDevices.getUserMedia({ video: true })
        .then(stream => {
            video.srcObject = stream;
        })
        .catch(err => {
            message.textContent = 'Error accessing webcam: ' + err;
            message.style.color = 'red';
        });

    // Capture image when button is clicked
    captureButton.addEventListener('click', () => {
        const context = canvas.getContext('2d');
        canvas.width = video.videoWidth;
        canvas.height = video.videoHeight;
        context.drawImage(video, 0, 0, canvas.width, canvas.height);

        // Convert to base64
        const dataUrl = canvas.toDataURL('image/png');

        // Send to server
        fetch('/capture', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded',
            },
            body: 'image=' + encodeURIComponent(dataUrl)
        })
        .then(response => response.json())
        .then(data => {
            if (data.error) {
                message.textContent = 'Error: ' + data.error;
                message.style.color = 'red';
            } else {
                message.textContent = data.message + ' (' + data.filename + ')';
                message.style.color = 'green';
            }
        })
        .catch(err => {
            message.textContent = 'Error: ' + err;
            message.style.color = 'red';
        });
    });
});