{% extends "base.html" %}

{% block title %}Mein QR Code{% 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>Mein QR Code</h3>
                </div>
                <div class="card-body text-center">
                    <div id="qrcode-container" class="mb-3">
                        <div id="qrcode" class="mx-auto"></div>
                    </div>
                    
                    <div id="countdown" class="mb-3">
                        <span id="timer">30</span> Sekunden bis refresh
                    </div>
                    
                    <button id="refresh-btn" class="btn btn-primary">
                        Refresh
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
{% include 'components/imports/qrcode.html' %}
<script>
    document.addEventListener('DOMContentLoaded', function() {
        let countdownInterval;
        const qrcodeContainer = document.getElementById('qrcode-container');
        const timerElement = document.getElementById('timer');
        const refreshBtn = document.getElementById('refresh-btn');
        
        // Function to generate QR code
        function generateQRCode(code) {
            // Clear previous QR code
            document.getElementById('qrcode').innerHTML = '';
            
            // Generate QR code with larger size
            const qr = qrcode(0, 'L');
            qr.addData(code);
            qr.make();
            
            // Create QR code image with larger size (10 instead of 5)
            const qrImage = qr.createImgTag(10);
            document.getElementById('qrcode').innerHTML = qrImage;
        }
        
        // Function to fetch new code from server
        function fetchNewCode() {
            console.log('Fetching new code...');
            fetch('/permissions/generate-code')
                .then(response => {
                    console.log('Response status:', response.status);
                    return response.json();
                })
                .then(data => {
                    console.log('Received data:', data);
                    if (data.success) {
                        console.log('Generating QR code with:', data.code);
                        generateQRCode(data.code);
                        startCountdown();
                    } else {
                        console.error('Failed to generate code:', data.error);
                        qrcodeContainer.innerHTML = '<div class="alert alert-danger">Failed to generate QR code</div>';
                    }
                })
                .catch(error => {
                    console.error('Error:', error);
                    qrcodeContainer.innerHTML = '<div class="alert alert-danger">Failed to connect to server</div>';
                });
        }
        
        // Function to start countdown timer
        function startCountdown() {
            // Clear any existing interval
            if (countdownInterval) {
                clearInterval(countdownInterval);
            }
            
            let timeLeft = 30;
            timerElement.textContent = timeLeft;
            
            countdownInterval = setInterval(() => {
                timeLeft--;
                timerElement.textContent = timeLeft;
                
                if (timeLeft <= 0) {
                    clearInterval(countdownInterval);
                    fetchNewCode();
                }
            }, 1000);
        }
        
        // Initialize QR code
        fetchNewCode();
        
        // Refresh button click handler
        refreshBtn.addEventListener('click', fetchNewCode);
    });
</script>
{% endblock %}