{% extends "base.html" %}

{% block title %}Schlüssel abgeben{% 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;
    }
    
    #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>Schlüssel abgeben: {{ key.name }}</h3>
                </div>
                <div class="card-body">
                    <div class="mb-4">
                        <p>Du gibst den Schlüssel <strong>{{ key.name }}</strong> ab. Bitte scanne den QR-Code der Person, die den Schlüssel erhalten soll.</p>
                        <input type="hidden" id="key-id" value="{{ key.id }}">
                        <input type="hidden" id="transfer-token" value="{{ transfer_token }}">
                    </div>
                    
                    <div class="mb-4">
                        <button id="start-scan" class="btn btn-primary mb-3">
                            Kamera starten
                        </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() {
        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');
        const keyId = document.getElementById('key-id').value;
        const transferToken = document.getElementById('transfer-token').value;
        
        let scanning = false;
        let videoStream = null;
        
        // Start/stop scanning
        startScanButton.addEventListener('click', function() {
            if (scanning) {
                stopScanning();
                startScanButton.textContent = 'Kamera starten';
            } else {
                startScanning();
                startScanButton.textContent = 'Kamera stoppen';
            }
        });
        
        // Start scanning
        function startScanning() {
            // 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('Konnte nicht auf die Kamera zugreifen. Bitte stelle sicher, dass du die Kameraberechtigungen erteilt hast.');
            });
        }
        
        // 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);
                    
                    // Stop scanning after finding a code
                    stopScanning();
                    startScanButton.textContent = 'Kamera starten';
                }
            }
            
            // Continue scanning
            requestAnimationFrame(tick);
        }
        
        // Validate the scanned code
        function validateCode(code) {
            fetch(`/keys/transfer-validate`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({
                    code: code,
                    key_id: keyId,
                    transfer_token: transferToken
                })
            })
            .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 = 'Schlüssel übertragen';
                    resultMessage.textContent = `Der Schlüssel wurde erfolgreich an ${data.user_name} übertragen.`;
                    resultIcon.innerHTML = '<i class="fas fa-check-circle"></i>';
                    
                    // Add animation
                    resultContainer.style.animation = 'pulse 1s';
                    
                    // Redirect after 3 seconds
                    setTimeout(() => {
                        window.location.href = '/keys';
                    }, 3000);
                } else {
                    // Error result
                    resultContainer.className = 'result-error';
                    resultTitle.textContent = 'Übertragung fehlgeschlagen';
                    resultMessage.textContent = data.message || 'Die Schlüsselübertragung ist fehlgeschlagen.';
                    resultIcon.innerHTML = '<i class="fas fa-times-circle"></i>';
                    
                    // Add a button to try again
                    const tryAgainBtn = document.createElement('button');
                    tryAgainBtn.className = 'btn btn-outline-light mt-4';
                    tryAgainBtn.textContent = 'Erneut versuchen';
                    tryAgainBtn.onclick = function() {
                        resultContainer.style.display = 'none';
                        startScanButton.textContent = 'Kamera starten';
                    };
                    resultContainer.appendChild(tryAgainBtn);
                }
            })
            .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 = 'Fehler';
                resultMessage.textContent = 'Fehler bei der Validierung des QR-Codes. Bitte versuche es erneut.';
                document.getElementById('result-icon').innerHTML = '<i class="fas fa-exclamation-triangle"></i>';
                
                // Add a button to try again
                const tryAgainBtn = document.createElement('button');
                tryAgainBtn.className = 'btn btn-outline-light mt-4';
                tryAgainBtn.textContent = 'Erneut versuchen';
                tryAgainBtn.onclick = function() {
                    resultContainer.style.display = 'none';
                    startScanButton.textContent = 'Kamera starten';
                };
                resultContainer.appendChild(tryAgainBtn);
            });
        }
    });
</script>
{% endblock %}