{% extends "base.html" %}

{% block title %}Check Permission QR Code{% endblock %}

{% block extra_head %}
<style>
    #scanner-container {
        display: none;
        position: relative;
        width: 100%;
        max-width: 500px;
        margin: 0 auto;
        height: auto;
        overflow: hidden;
    }
    
    #video {
        width: 100%;
        max-height: 400px;
        object-fit: cover;
        border-radius: 8px;
    }
    
    #scanner-overlay {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        border: 2px solid #fff;
        box-shadow: 0 0 0 1000px rgba(0, 0, 0, 0.5);
        border-radius: 8px;
    }
    
    .group-btn {
        margin: 5px;
        padding: 10px 15px;
    }
    
    .group-btn.active {
        background-color: #007bff;
        color: white;
    }
    
    #result-container {
        margin-top: 20px;
        padding: 30px;
        border-radius: 8px;
        display: none;
        text-align: center;
        width: 100%;
        transition: all 0.3s ease;
    }
    
    .result-success {
        background-color: #28a745;
        color: white;
        box-shadow: 0 4px 8px rgba(40, 167, 69, 0.3);
    }
    
    .result-error {
        background-color: #dc3545;
        color: white;
        box-shadow: 0 4px 8px rgba(220, 53, 69, 0.3);
    }
    
    #result-title {
        font-size: 2rem;
        font-weight: bold;
        margin-bottom: 15px;
    }
    
    #result-message {
        font-size: 1.2rem;
    }
    
    #result-icon {
        font-size: 4rem;
        margin-bottom: 20px;
    }
    
    @keyframes pulse {
        0% {
            transform: scale(0.95);
            box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7);
        }
        
        70% {
            transform: scale(1);
            box-shadow: 0 0 0 10px rgba(255, 255, 255, 0);
        }
        
        100% {
            transform: scale(0.95);
            box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
        }
    }
</style>
{% endblock %}

{% block content %}
<div class="container mt-4">
    <div class="row">
        <div class="col-md-8 offset-md-2">
            <div class="card">
                <div class="card-header">
                    <h3>Check Permission QR Code</h3>
                </div>
                <div class="card-body">
                    <div class="mb-4">
                        <h5>1. Select a group to check permission for:</h5>
                        <div id="group-buttons" class="d-flex flex-wrap">
                            <!-- Group buttons will be added here dynamically -->
                        </div>
                    </div>
                    
                    <div class="mb-4">
                        <h5>2. Scan QR code:</h5>
                        <button id="start-scan" class="btn btn-primary mb-3" disabled>
                            Start Camera
                        </button>
                        <div id="scanner-container">
                            <video id="video" playsinline></video>
                            <div id="scanner-overlay"></div>
                        </div>
                    </div>
                    
                    <div id="result-container">
                        <div id="result-icon"></div>
                        <h4 id="result-title"></h4>
                        <p id="result-message"></p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
{% include 'components/imports/jsqr.html' %}
<script>
    document.addEventListener('DOMContentLoaded', function() {
        let selectedGroup = null;
        const groupButtons = document.getElementById('group-buttons');
        const startScanButton = document.getElementById('start-scan');
        const scannerContainer = document.getElementById('scanner-container');
        const video = document.getElementById('video');
        const resultContainer = document.getElementById('result-container');
        const resultTitle = document.getElementById('result-title');
        const resultMessage = document.getElementById('result-message');
        
        let scanning = false;
        let videoStream = null;
        
        // Load available groups
        fetch('/permissions/groups')
            .then(response => response.json())
            .then(data => {
                if (data.success && data.groups) {
                    data.groups.forEach(group => {
                        const button = document.createElement('button');
                        button.className = 'btn btn-outline-secondary group-btn';
                        button.textContent = group;
                        button.dataset.group = group;
                        button.addEventListener('click', () => selectGroup(button, group));
                        groupButtons.appendChild(button);
                    });
                }
            })
            .catch(error => {
                console.error('Error loading groups:', error);
            });
        
        // Select a group
        function selectGroup(button, group) {
            // Remove active class from all buttons
            document.querySelectorAll('.group-btn').forEach(btn => {
                btn.classList.remove('active');
            });
            
            // Add active class to selected button
            button.classList.add('active');
            
            // Set selected group
            selectedGroup = group;
            
            // Enable scan button
            startScanButton.disabled = false;
        }
        
        // Start/stop scanning
        startScanButton.addEventListener('click', function() {
            if (scanning) {
                stopScanning();
                startScanButton.textContent = 'Start Camera';
            } else {
                startScanning();
                startScanButton.textContent = 'Stop Camera';
            }
        });
        
        // Start scanning
        function startScanning() {
            if (!selectedGroup) {
                alert('Please select a group first');
                return;
            }
            
            // Hide any previous results
            resultContainer.style.display = 'none';
            
            // Request camera access
            navigator.mediaDevices.getUserMedia({ 
                video: { 
                    facingMode: 'environment',
                    width: { ideal: 640 },
                    height: { ideal: 480 },
                    aspectRatio: { ideal: 4/3 }
                } 
            })
            .then(stream => {
                videoStream = stream;
                video.srcObject = stream;
                video.setAttribute('playsinline', true);
                
                // Handle video metadata loaded
                video.onloadedmetadata = function() {
                    // Adjust container height if needed
                    const aspectRatio = video.videoWidth / video.videoHeight;
                    if (aspectRatio > 1.5) {
                        // Wide video, constrain height
                        video.style.height = 'auto';
                        video.style.maxHeight = '350px';
                    } else {
                        // Tall video, ensure it fits
                        video.style.width = '100%';
                        video.style.maxHeight = '400px';
                    }
                };
                
                video.play();
                scanning = true;
                scannerContainer.style.display = 'block';
                
                requestAnimationFrame(tick);
            })
            .catch(error => {
                console.error('Error accessing camera:', error);
                alert('Could not access the camera. Please make sure you have granted camera permissions.');
            });
        }
        
        // Stop scanning
        function stopScanning() {
            if (videoStream) {
                videoStream.getTracks().forEach(track => {
                    track.stop();
                });
                videoStream = null;
            }
            
            scanning = false;
            scannerContainer.style.display = 'none';
        }
        
        // Process video frames
        function tick() {
            if (!scanning) return;
            
            if (video.readyState === video.HAVE_ENOUGH_DATA) {
                // Create canvas to capture video frame
                const canvas = document.createElement('canvas');
                const canvasContext = canvas.getContext('2d');
                canvas.width = video.videoWidth;
                canvas.height = video.videoHeight;
                canvasContext.drawImage(video, 0, 0, canvas.width, canvas.height);
                
                // Get image data for QR code scanning
                const imageData = canvasContext.getImageData(0, 0, canvas.width, canvas.height);
                
                // Scan for QR code
                const code = jsQR(imageData.data, imageData.width, imageData.height, {
                    inversionAttempts: 'dontInvert'
                });
                
                if (code) {
                    // QR code found
                    console.log('QR code detected:', code.data);
                    
                    // Validate the code
                    validateCode(code.data, selectedGroup);
                    
                    // Stop scanning after finding a code
                    stopScanning();
                    startScanButton.textContent = 'Start Camera';
                }
            }
            
            // Continue scanning
            requestAnimationFrame(tick);
        }
        
        // Validate the scanned code
        function validateCode(code, group) {
            fetch(`/permissions/validate?code=${encodeURIComponent(code)}&group=${encodeURIComponent(group)}`)
                .then(response => response.json())
                .then(data => {
                    // Hide scanner and show full-screen result
                    scannerContainer.style.display = 'none';
                    resultContainer.style.display = 'block';
                    
                    // Scroll to result
                    resultContainer.scrollIntoView({ behavior: 'smooth' });
                    
                    const resultIcon = document.getElementById('result-icon');
                    
                    if (data.success) {
                        // Success result
                        resultContainer.className = 'result-success';
                        resultTitle.textContent = 'Permission Granted';
                        resultMessage.textContent = `The user has permission to access the ${group} group.`;
                        resultIcon.innerHTML = '<i class="fas fa-check-circle"></i>';
                        
                        // Add animation
                        resultContainer.style.animation = 'pulse 1s';
                    } else {
                        // Error result
                        resultContainer.className = 'result-error';
                        resultTitle.textContent = 'Permission Denied';
                        resultMessage.textContent = data.message || `The user does not have permission to access the ${group} group.`;
                        resultIcon.innerHTML = '<i class="fas fa-times-circle"></i>';
                    }
                    
                    // Remove any existing scan again buttons
                    const existingScanAgainBtn = document.querySelector('#scan-again-btn');
                    if (existingScanAgainBtn) {
                        existingScanAgainBtn.remove();
                    }
                    
                    // Add a button to scan again
                    const scanAgainBtn = document.createElement('button');
                    scanAgainBtn.id = 'scan-again-btn';
                    scanAgainBtn.className = 'btn btn-outline-light mt-4';
                    scanAgainBtn.textContent = 'Scan Another Code';
                    scanAgainBtn.onclick = function() {
                        resultContainer.style.display = 'none';
                        startScanButton.textContent = 'Start Camera';
                        startScanButton.disabled = false;
                    };
                    resultContainer.appendChild(scanAgainBtn);
                })
                .catch(error => {
                    console.error('Error validating code:', error);
                    
                    // Hide scanner and show full-screen result
                    scannerContainer.style.display = 'none';
                    resultContainer.style.display = 'block';
                    
                    // Scroll to result
                    resultContainer.scrollIntoView({ behavior: 'smooth' });
                    
                    // Set error display
                    resultContainer.className = 'result-error';
                    resultTitle.textContent = 'Error';
                    resultMessage.textContent = 'Failed to validate the QR code. Please try again.';
                    document.getElementById('result-icon').innerHTML = '<i class="fas fa-exclamation-triangle"></i>';
                    
                    // Remove any existing scan again buttons
                    const existingScanAgainBtn = document.querySelector('#scan-again-btn');
                    if (existingScanAgainBtn) {
                        existingScanAgainBtn.remove();
                    }
                    
                    // Add a button to scan again
                    const scanAgainBtn = document.createElement('button');
                    scanAgainBtn.id = 'scan-again-btn';
                    scanAgainBtn.className = 'btn btn-outline-light mt-4';
                    scanAgainBtn.textContent = 'Try Again';
                    scanAgainBtn.onclick = function() {
                        resultContainer.style.display = 'none';
                        startScanButton.textContent = 'Start Camera';
                        startScanButton.disabled = false;
                    };
                    resultContainer.appendChild(scanAgainBtn);
                });
        }
    });
</script>
{% endblock %}