document.addEventListener('DOMContentLoaded', () => {
    const video = document.getElementById('video');
    const canvas = document.getElementById('canvas');
    const capturedImage = document.getElementById('capturedImage');
    const cameraBtn = document.getElementById('cameraBtn');
    const frontCam = document.getElementById('frontCam');
    const backCam = document.getElementById('backCam');
    const captureBtn = document.getElementById('captureBtn');
    const retakeBtn = document.getElementById('retakeBtn');
    const uploadBtn = document.getElementById('uploadBtn');
    const cameraControls = document.getElementById('cameraControls');
    const postCapture = document.getElementById('postCapture');

    let stream = null;

    cameraBtn.addEventListener('click', async () => {
        try {
            stream = await navigator.mediaDevices.getUserMedia({ video: { facingMode: 'user' } });
            video.srcObject = stream;
            video.classList.remove('hidden');
            cameraBtn.classList.add('hidden');
            cameraControls.classList.remove('hidden');
        } catch (err) {
            alert('Error accessing camera: ' + err.message);
        }
    });

    frontCam.addEventListener('click', async () => {
        if (stream) {
            stream.getTracks().forEach(track => track.stop());
        }
        try {
            stream = await navigator.mediaDevices.getUserMedia({ video: { facingMode: 'user' } });
            video.srcObject = stream;
            fetch('/switch_camera', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ camera_type: 'user' })
            });
        } catch (err) {
            alert('Error switching to front camera: ' + err.message);
        }
    });

    backCam.addEventListener('click', async () => {
        if (stream) {
            stream.getTracks().forEach(track => track.stop());
        }
        try {
            stream = await navigator.mediaDevices.getUserMedia({ video: { facingMode: 'environment' } });
            video.srcObject = stream;
            fetch('/switch_camera', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ camera_type: 'environment' })
            });
        } catch (err) {
            alert('Error switching to back camera: ' + err.message);
        }
    });

    captureBtn.addEventListener('click', () => {
    const context = canvas.getContext('2d');
    canvas.width = video.videoWidth;
    canvas.height = video.videoHeight;
    context.drawImage(video, 0, 0, canvas.width, canvas.height);

    canvas.toBlob(blob => {
        const formData = new FormData();
        formData.append('image', blob, 'captured.jpg');

        fetch('/capture', {
            method: 'POST',
            body: formData
        })
        .then(response => response.json())
        .then(data => {
            if (data.status === 'captured') {
                video.classList.add('hidden');
                capturedImage.src = '/uploads/captured.jpg?' + new Date().getTime();
                capturedImage.classList.remove('hidden');
                cameraControls.classList.add('hidden');
                postCapture.classList.remove('hidden');

                if (stream) {
                    stream.getTracks().forEach(track => track.stop());
                }
            } else {
                alert(data.message);
            }
        });
    }, 'image/jpeg');
});


    retakeBtn.addEventListener('click', () => {
        fetch('/retake', { method: 'POST' })
            .then(response => response.json())
            .then(data => {
                if (data.status === 'retake') {
                    capturedImage.classList.add('hidden');
                    video.classList.remove('hidden');
                    cameraControls.classList.remove('hidden');
                    postCapture.classList.add('hidden');
                    cameraBtn.click();
                }
            });
    });

    uploadBtn.addEventListener('click', () => {
        fetch('/upload', { method: 'POST' })
            .then(response => response.json())
            .then(data => {
                if (data.status === 'uploaded') {
                    alert('Image uploaded to Instagram!');
                    capturedImage.classList.add('hidden');
                    cameraBtn.classList.remove('hidden');
                    postCapture.classList.add('hidden');
                } else {
                    alert('Error uploading: ' + data.message);
                }
            });
    });
});