{% extends 'base.html.twig' %}

{% block title %}{{ "Générer un QR Code sécurisé"|trans }}{% endblock %}

{% block body %}

    <div class="row justify-content-center mt-5">
        <div class="col-md-8">
            <h3>{{ "Générer un QR Code sécurisé"|trans }}</h3>

            <div class="password-info mt-3">
                <strong>⚠️ Attention :</strong> Votre mot de passe sera inclus dans le QR Code de manière chiffrée.
                Assurez-vous de conserver ce QR Code en lieu sûr.
            </div>

            {% if not qrcode %}
                <div class="card mt-3 shadow-sm">
                    <div class="card-body">
                        {{ form_start(form, {'attr': {'id': 'qrcode-form'}}) }}
                        <div class="mb-3">
                            {{ form_label(form.password) }}
                            {{ form_widget(form.password) }}
                            {{ form_errors(form.password) }}
                        </div>

                        <div class="text-center mt-3">
                            {{ form_widget(form.submit) }}
                        </div>
                        {{ form_end(form) }}
                    </div>
                </div>
            {% endif %}

            {% if qrcode %}
                <div class="qrcode-result mt-4" id="qrcode-result">
                    <div class="qrcode-container text-center">
                        <h3 class="mb-4">Votre QR Code</h3>
                        <img src="data:image/png;base64,{{ qrcode }}" alt="QR Code" class="img-fluid mb-3" id="qrcode-image">

                        <div class="text-center">
                            <div class="btn-group" role="group">
                                {#                            <button type="button" class="btn btn-success" id="download-btn">#}
                                {#                                <i class="bi bi-download"></i> Télécharger#}
                                {#                            </button>#}
                                {#                            <button type="button" class="btn btn-secondary" id="print-btn">#}
                                {#                                <i class="bi bi-printer"></i> Imprimer#}
                                {#                            </button>#}
                                <button type="button" class="btn btn-dark bg-evalulu" id="copy-btn">
                                    <i class="bi bi-clipboard"></i> Copier l'image
                                </button>
                            </div>

                            {% if is_granted('ROLE_ADMIN') %}
                                <!-- Nouveau bouton de test -->
                                <div class="mb-3">
                                    <button type="button" class="btn btn-dark bg-evalulu mt-3" id="test-decode-btn">
                                        <i class="bi bi-shield-check"></i> Tester le décodage
                                    </button>
                                </div>

                                <!-- Zone de résultat du test -->
                                <div id="test-result" class="alert" style="display: none;"></div>

{#                                <!-- Affichage des données originales pour comparaison -->#}
{#                                {% if original_data %}#}
{#                                    <div class="mt-4">#}
{#                                        <button class="btn btn-outline-secondary btn-sm" type="button" data-bs-toggle="collapse" data-bs-target="#originalData">#}
{#                                            <i class="bi bi-eye"></i> Voir les données originales#}
{#                                        </button>#}
{#                                        <div class="collapse mt-2" id="originalData">#}
{#                                            <div class="card card-body text-start">#}
{#                                                <h5>Données originales encodées :</h5>#}
{#                                                <pre><code>{{ original_data|json_encode(constant('JSON_PRETTY_PRINT')) }}</code></pre>#}
{#                                            </div>#}
{#                                        </div>#}
{#                                    </div>#}
{#                                {% endif %}#}
                            {% endif %}

                            {#                        <form method="post" action="{{ path('app_qrcode_download') }}" id="download-form" class="d-none">#}
                            {#                            <input type="hidden" name="password" id="download-password">#}
                            {#                        </form>#}
                        </div>

                    </div>
                </div>

            {% endif %}
        </div>
    </div>
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script>
        $(document).ready(function() {
            // Afficher le QR Code avec animation si présent
            {% if qrcode %}
            $('#qrcode-result').slideDown(500);
            {% endif %}

            // Stockage temporaire du mot de passe pour le téléchargement
            let userPassword = '';

            $('#qrcode-form').on('submit', function() {
                userPassword = $('#qrcode_password_type_password').val();

                // Animation de chargement
                const submitBtn = $(this).find('button[type="submit"]');
                submitBtn.prop('disabled', true);
                submitBtn.html('<span class="spinner-border spinner-border-sm" role="status"></span> Génération...');
            });

            // // Bouton télécharger
            // $('#download-btn').on('click', function() {
            //     if (userPassword) {
            //         $('#download-password').val(userPassword);
            //         $('#download-form').submit();
            //     } else {
            //         alert('Erreur : mot de passe non disponible');
            //     }
            // });

            // // Bouton imprimer
            // $('#print-btn').on('click', function() {
            //     const imgSrc = $('#qrcode-image').attr('src');
            //     const printWindow = window.open('', '_blank');
            //     printWindow.document.write('<html><head><title>QR Code</title></head><body style="text-align:center;">');
            //     printWindow.document.write('<img src="' + imgSrc + '" style="max-width:100%;">');
            //     printWindow.document.write('</body></html>');
            //     printWindow.document.close();
            //     printWindow.onload = function() {
            //         printWindow.print();
            //         printWindow.close();
            //     };
            // });

            // Bouton copier
            $('#copy-btn').on('click', function() {
                const img = document.getElementById('qrcode-image');
                const canvas = document.createElement('canvas');
                canvas.width = img.naturalWidth;
                canvas.height = img.naturalHeight;
                const ctx = canvas.getContext('2d');
                ctx.drawImage(img, 0, 0);

                canvas.toBlob(function(blob) {
                    const item = new ClipboardItem({ 'image/png': blob });
                    navigator.clipboard.write([item]).then(function() {
                        alert('QR Code copié dans le presse-papier !');
                    }).catch(function(err) {
                        console.error('Erreur lors de la copie:', err);
                        alert('Impossible de copier l\'image');
                    });
                });
            });

            // Effacer le mot de passe de la mémoire après 5 minutes
            setTimeout(function() {
                userPassword = '';
                console.log('Mot de passe effacé de la mémoire');
            }, 300000);

            // Test de décodage du QR Code
            $('#test-decode-btn').on('click', function() {
                const qrcodeData = $('#qrcode-image').attr('src');

                $.ajax({
                    url: '{{ path('app_qrcode_test_ajax') }}',
                    method: 'POST',
                    data: { qrcode_data: qrcodeData },
                    beforeSend: function() {
                        $('#test-decode-btn').prop('disabled', true)
                            .html('<span class="spinner-border spinner-border-sm"></span> Test en cours...');
                        $('#test-result').hide();
                    },
                    success: function(response) {
                        if (response.success) {
                            showTestResult(response.data, true);
                        } else {
                            showTestResult(null, false, response.error);
                        }
                    },
                    error: function(xhr) {
                        const response = xhr.responseJSON || {};
                        showTestResult(null, false, response.error || 'Erreur inconnue');
                    },
                    complete: function() {
                        $('#test-decode-btn').prop('disabled', false)
                            .html('<i class="bi bi-shield-check"></i> Tester le décodage');
                    }
                });
            });

            function showTestResult(decodedData, success, error = null) {
                let html = '';
                const $result = $('#test-result');

                if (success && decodedData) {
                    $result.removeClass('alert-danger').addClass('alert-success');

                    html = `
            <h4><i class="bi bi-check-circle-fill"></i> Test réussi !</h4>
            <p>Le QR Code a été décodé correctement.</p>
            <div class="table-responsive text-start">
                <table class="table table-sm table-bordered comparison-table">
                    <thead>
                        <tr>
                            <th>Clé</th>
                            <th>Valeur décodée</th>
                            {% if original_data %}
                            <th>Valeur originale</th>
                            <th>Statut</th>
                            {% endif %}
                        </tr>
                    </thead>
                    <tbody>`;

                    {% if original_data %}
                    const originalData = {{ original_data|json_encode|raw }};

                    for (const [key, value] of Object.entries(decodedData)) {
                        const originalValue = originalData[key];
                        const match = String(value) === String(originalValue);
                        const statusIcon = match ?
                            '<span class="match"><i class="bi bi-check-circle-fill"></i> OK</span>' :
                            '<span class="mismatch"><i class="bi bi-x-circle-fill"></i> Différent</span>';

                        html += `
                    <tr>
                        <td><strong>${key}</strong></td>
                        <td><code>${value}</code></td>
                        <td><code>${originalValue}</code></td>
                        <td>${statusIcon}</td>
                    </tr>`;
                    }
                    {% else %}
                    for (const [key, value] of Object.entries(decodedData)) {
                        html += `
                    <tr>
                        <td><strong>${key}</strong></td>
                        <td><code>${value}</code></td>
                    </tr>`;
                    }
                    {% endif %}

                    html += `
                    </tbody>
                </table>
            </div>
            <details class="mt-2">
                <summary>Voir le JSON décodé</summary>
                <pre class="mt-2"><code>${JSON.stringify(decodedData, null, 2)}</code></pre>
            </details>`;

                } else {
                    $result.removeClass('alert-success').addClass('alert-danger');
                    html = `
            <h4><i class="bi bi-x-circle-fill"></i> Test échoué</h4>
            <p>${error || 'Impossible de décoder le QR Code'}</p>`;
                }

                $result.html(html).slideDown();
            }


        });
    </script>
{% endblock %}