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', () => {
        fetch('/capture', { method: 'POST' })
            .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());
                    }
                }
            });
    });

    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);
                }
            });
    });
});