/**
 * @fileoverview Main application entry point for a web-based camera application.
 * 
 * @description
 * 
 * Susan Sontag:
 * > The camera makes everyone a tourist in other people's reality, 
 * > and eventually in one's own.
 * 
 * A functional architecture implementing image processing effects with real-time camera preview.
 * Uses multiple design patterns for robust state management and effect application:
 * - Observer Pattern: For state management and effect application across modules
 * - State Pattern: For mode management (camera/edit)
 * - Factory Pattern: For UI initialization and media device creation
 * - Strategy Pattern: For algorithm selection in effect application
 * - Command Pattern: For canvas operations and state reset
 * - Chain of Responsibility: For sequential effect application
 * 
 * 
 * @architecture
 * The application is structured into separate manager modules for each effect:
 * - ColorManager: HSL-based color manipulation
 * - DitherManager: Multiple dithering algorithms
 * - ContrastManager: Linear contrast adjustment
 * - BlurManager: Optimized box blur
 * - BalanceManager: Temperature-based color adjustment
 * 
 * Each manager implements the Observer pattern for state changes and the Strategy pattern
 * for effect application algorithms.
 * 
 */

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
const video = document.createElement('video');
const toggleCameraButton = document.getElementById('toggle-camera');
const captureButton = document.getElementById('capture');
const editImageButton = document.getElementById('edit-image');
const imageInput = document.getElementById('image-input');
const focusControl = document.getElementById('focus-control');
const focusSlider = document.getElementById('focus-slider');
const focusValue = document.getElementById('focus-value');
const slideControls = document.querySelector('.slide-controls');

let cameraOn = false;
let stream = null;
let track = null;
let isEditMode = false;
let originalImage = null; // Store the original image for edit mode

// Initialize managers - each implements the Observer pattern for state changes
ColorManager.init();
DitherManager.init();
ContrastManager.init();
BlurManager.init();
BalanceManager.init();

/**
 * Updates visibility of controls based on camera/edit mode state
 * Uses the State pattern to manage UI visibility
 */
function updateSliderControlsVisibility() {
    const settingsContainer = document.getElementById('settings-container');
    if (cameraOn || isEditMode) {
        slideControls.classList.add('visible');
        settingsContainer.classList.add('visible');
    } else {
        slideControls.classList.remove('visible');
        settingsContainer.classList.remove('visible');
    }
}

/**
 * Updates canvas dimensions while maintaining aspect ratio
 * Implements the Strategy pattern for different aspect ratio calculations
 */
function updateCanvasSize() {
    const container = document.querySelector('.preview-container');
    const containerWidth = container.clientWidth;
    const containerHeight = container.clientHeight;
    
    if (video.videoWidth && video.videoHeight) {
        const videoAspect = video.videoWidth / video.videoHeight;
        const containerAspect = containerWidth / containerHeight;
        
        if (containerAspect > videoAspect) {
            canvas.height = containerHeight;
            canvas.width = containerHeight * videoAspect;
        } else {
            canvas.width = containerWidth;
            canvas.height = containerWidth / videoAspect;
        }
    } else {
        canvas.width = containerWidth;
        canvas.height = containerHeight;
    }
}

// Observer pattern: Listen for window resize events
window.addEventListener('resize', () => {
    if (cameraOn || isEditMode) {
        updateCanvasSize();
        if (isEditMode && originalImage) {
            applyEffects();
        }
    }
});

updateCanvasSize();

/**
 * Clears the canvas and resets its state
 * Implements the Command pattern for canvas operations
 */
function clearCanvas() {
    const container = document.querySelector('.preview-container');
    const containerWidth = container.clientWidth;
    const containerHeight = container.clientHeight;
    
    canvas.width = containerWidth;
    canvas.height = containerHeight;
    ctx.clearRect(0, 0, containerWidth, containerHeight);
    ctx.setTransform(1, 0, 0, 1, 0, 0);
    canvas.style.display = 'none';
}

/**
 * Initializes camera access and sets up video stream
 * Implements the Factory pattern for media device creation
 * Uses the State pattern for mode management and UI state
 */
function startCamera() {
    if (isEditMode) {
        if (!confirm('Switching to camera mode will discard your current image and edits. Continue?')) {
            return;
        }
        isEditMode = false;
        originalImage = null;
        clearCanvas();
    }

    navigator.mediaDevices.getUserMedia({ video: { facingMode: { ideal: 'environment' } } })
        .then(s => {
            stream = s;
            video.srcObject = stream;
            video.play();
            canvas.style.display = 'block';
            captureButton.disabled = false;
            captureButton.active = true;
            editImageButton.classList.add('hidden');
            toggleCameraButton.classList.add('hidden');
            isEditMode = false;
            originalImage = null;
            updateSliderControlsVisibility();

            track = stream.getVideoTracks()[0];
            const settings = track.getSettings();

            // Feature detection for focus control
            if ('focusDistance' in settings) {
                focusControl.style.display = 'flex';
                focusSlider.disabled = false;
                focusSlider.value = settings.focusDistance || focusSlider.min;
                focusValue.textContent = `${focusSlider.value}%`;

                focusSlider.addEventListener('input', () => {
                    const value = focusSlider.value;
                    focusValue.textContent = `${value}%`;
                    track.applyConstraints({
                        advanced: [{ focusDistance: value }]
                    });
                });
            } else {
                console.warn('Focus control is not supported on this device.');
                focusControl.style.display = 'none';
            }

            // Animation loop using requestAnimationFrame
            video.addEventListener('play', function() {
                function step() {
                    if (!cameraOn) return;
                    drawVideoProportional();
                    applyContrast();
                    applyColorTint();
                    applyBlur();
                    applyBalance();
                    applyDither();
                    requestAnimationFrame(step);
                }
                requestAnimationFrame(step);
            });
        })
        .catch(err => {
            console.error('Error accessing camera: ', err);
            toggleCameraButton.classList.remove('hidden');
        });
}

/**
 * Stops camera stream and resets UI state
 * Implements the Command pattern for cleanup operations
 */
function stopCamera() {
    if (stream) {
        stream.getTracks().forEach(track => track.stop());
        video.pause();
        clearCanvas();
        captureButton.disabled = true;
        captureButton.active = false;
        focusSlider.disabled = true;
        focusControl.style.display = 'none';
        stream = null;
        editImageButton.classList.remove('hidden');
        toggleCameraButton.classList.remove('hidden');
        updateSliderControlsVisibility();
    }
}

/**
 * Loads and displays an image file
 * Implements the Factory pattern for image creation
 * Uses aspect ratio preservation strategy for responsive display
 */
function loadImage(file) {
    const reader = new FileReader();
    reader.onload = function(e) {
        const img = new Image();
        img.onload = function() {
            clearCanvas();
            
            const container = document.querySelector('.preview-container');
            const containerWidth = container.clientWidth;
            const containerHeight = container.clientHeight;
            
            const imgAspect = img.width / img.height;
            const containerAspect = containerWidth / containerHeight;
            
            let canvasWidth, canvasHeight;
            
            if (containerAspect > imgAspect) {
                canvasHeight = containerHeight;
                canvasWidth = containerHeight * imgAspect;
            } else {
                canvasWidth = containerWidth;
                canvasHeight = containerWidth / imgAspect;
            }
            
            canvas.width = canvasWidth;
            canvas.height = canvasHeight;
            originalImage = img;
            
            ctx.drawImage(img, 0, 0, canvasWidth, canvasHeight);
            canvas.style.display = 'block';
            captureButton.disabled = false;
            captureButton.active = true;
            updateSliderControlsVisibility();
            
            function step() {
                if (!isEditMode) return;
                applyEffects();
                requestAnimationFrame(step);
            }
            requestAnimationFrame(step);
        };
        img.src = e.target.result;
    };
    reader.readAsDataURL(file);
}

/**
 * Applies all effects in sequence using the Chain of Responsibility pattern
 * Each effect is applied using the Strategy pattern for algorithm selection
 */
function applyEffects() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.drawImage(originalImage, 0, 0, canvas.width, canvas.height);
    applyContrast();
    applyColorTint();
    applyBlur();
    applyBalance();
    applyDither();
}

/**
 * Draws video feed maintaining aspect ratio
 * Implements the Strategy pattern for aspect ratio handling
 */
function drawVideoProportional() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    
    const videoAspectRatio = video.videoWidth / video.videoHeight;
    const canvasAspectRatio = canvas.width / canvas.height;

    let drawWidth, drawHeight;

    if (canvasAspectRatio > videoAspectRatio) {
        drawHeight = canvas.height;
        drawWidth = videoAspectRatio * drawHeight;
    } else {
        drawWidth = canvas.width;
        drawHeight = drawWidth / videoAspectRatio;
    }

    const offsetX = (canvas.width - drawWidth) / 2;
    const offsetY = (canvas.height - drawHeight) / 2;
    
    ctx.drawImage(video, offsetX, offsetY, drawWidth, drawHeight);
}

/**
 * Applies color tint effect using the Strategy pattern
 */
function applyColorTint() {
    const currentColor = ColorManager.getCurrentColor();
    if (!currentColor) return;

    const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
    const tintedImageData = ColorManager.applyTint(imageData, currentColor);
    ctx.putImageData(tintedImageData, 0, 0);
}

/**
 * Applies white balance effect using the Strategy pattern
 */
function applyBalance() {
    const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
    const balancedImageData = BalanceManager.applyBalance(imageData);
    ctx.putImageData(balancedImageData, 0, 0);
}

/**
 * Applies contrast effect using the Strategy pattern
 */
function applyContrast() {
    const currentContrast = ContrastManager.getCurrentContrast();
    if (!currentContrast || currentContrast === 1.0) return;

    const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
    const contrastedImageData = ContrastManager.applyContrast(imageData, currentContrast);
    ctx.putImageData(contrastedImageData, 0, 0);
}

/**
 * Applies dithering effect using the Strategy pattern
 */
function applyDither() {
    const currentMode = DitherManager.getCurrentMode();
    if (!currentMode || currentMode === 'none') return;

    const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
    const ditheredImageData = DitherManager.applyDither(imageData, currentMode);
    ctx.putImageData(ditheredImageData, 0, 0);
}

/**
 * Applies blur effect using the Strategy pattern
 */
function applyBlur() {
    const currentBlur = BlurManager.getCurrentBlur();
    if (!currentBlur) return;

    const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
    const blurredImageData = BlurManager.applyBlur(imageData, currentBlur);
    ctx.putImageData(blurredImageData, 0, 0);
}

/**
 * Captures the current canvas state with effects
 * Implements the Command pattern for image capture
 */
captureButton.addEventListener('click', () => {
    const currentColor = ColorManager.getCurrentColor();
    const borderWidth = 4;
    
    const captureCanvas = document.createElement('canvas');
    const captureCtx = captureCanvas.getContext('2d');
    
    captureCanvas.width = canvas.width + (borderWidth * 2);
    captureCanvas.height = canvas.height + (borderWidth * 2);
    
    if (currentColor) {
        captureCtx.fillStyle = currentColor;
        captureCtx.fillRect(0, 0, captureCanvas.width, captureCanvas.height);
    }
    
    captureCtx.drawImage(canvas, borderWidth, borderWidth);
    
    const link = document.createElement('a');
    link.download = 'captured-image.png';
    link.href = captureCanvas.toDataURL('image/png');
    link.click();
});

/**
 * Toggles camera state using the State pattern
 */
toggleCameraButton.addEventListener('click', () => {
    cameraOn = !cameraOn;
    if (cameraOn) {
        startCamera();
        toggleCameraButton.textContent = 'Camera Off';
    } else {
        stopCamera();
        toggleCameraButton.textContent = 'Camera On';
    }
});

/**
 * Handles image upload using the Factory pattern
 */
editImageButton.addEventListener('click', () => {
    if (!cameraOn) {
        imageInput.click();
    }
});

imageInput.addEventListener('change', (e) => {
    if (e.target.files && e.target.files[0]) {
        isEditMode = true;
        loadImage(e.target.files[0]);
    }
});

/**
 * Service Worker registration for offline functionality
 * Implements the Service Worker pattern for PWA support
 */
if ('serviceWorker' in navigator) {
    window.addEventListener('load', () => {
        navigator.serviceWorker.register('/service-worker.js')
        .then(registration => {
            console.log('ServiceWorker registration successful with scope: ', registration.scope);
        }, err => {
            console.log('ServiceWorker registration failed: ', err);
        });
    });
}

ColorManager._setupEventListeners();

/**
 * Resets all effects using the Command pattern
 */
function resetEffects() {
    if (isEditMode && originalImage) {
        applyEffects();
    }
}

/**
 * Reset handlers for each effect manager
 * Implements the Command pattern for state reset
 */
BlurManager.reset = function() {
    this._currentBlur = 0;
    this._slider.value = 0;
    this._value.textContent = '0%';
    this._notifyObservers();
    resetEffects();
};

ContrastManager.reset = function() {
    this._currentContrast = 1.0;
    this._slider.value = 0;
    document.getElementById('contrast-value').textContent = '0';
    this._notifyObservers();
    resetEffects();
};

ColorManager.reset = function() {
    this._currentColor = null;
    this._colorInput.value = '#ffffff';
    this._notifyObservers();
    resetEffects();
};

BalanceManager.reset = function() {
    this.balanceSlider.value = 6500;
    this.balanceValue.textContent = '6500K';
    resetEffects();
};

DitherManager.reset = function() {
    this._currentMode = 'none';
    this._modeSelect.value = 'none';
    this._notifyObservers();
    resetEffects();
};