{# templates/qrcode/test.html.twig #}
{% extends 'base.html.twig' %}

{% block title %}Tester le décodage QR Code{% endblock %}

{% block body %}
    <div class="container mt-5">
        <div class="row">
            <div class="col-md-10 offset-md-1">
                <h1 class="mb-4">
                    <i class="bi bi-qr-code-scan"></i> Tester le décodage QR Code
                </h1>

                {% for message in app.flashes('success') %}
                    <div class="alert alert-success alert-dismissible fade show" role="alert">
                        {{ message }}
                        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                    </div>
                {% endfor %}

                {% for message in app.flashes('error') %}
                    <div class="alert alert-danger alert-dismissible fade show" role="alert">
                        {{ message }}
                        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                    </div>
                {% endfor %}

                <!-- Section 1: Upload de fichier -->
                <div class="test-section">
                    <div class="card shadow-sm">
                        <div class="card-body">
                            {{ form_start(decode_form) }}
                            <div class="mb-3">
                                {{ form_label(decode_form.qrcode_file) }}
                                {{ form_widget(decode_form.qrcode_file, {'attr': {'id': 'file-input'}}) }}
                                {{ form_errors(decode_form.qrcode_file) }}
                                <small class="form-text text-muted">
                                    Formats acceptés : JPG, PNG, GIF, WebP (max 5 Mo)
                                </small>
                            </div>

                            <div id="file-preview" class="mb-3" style="display: none;">
                                <label>Aperçu :</label>
                                <div>
                                    <img id="preview-image" src="" alt="Preview" style="max-width: 300px; border: 1px solid #ddd; padding: 5px;">
                                </div>
                            </div>

                            <div class="d-grid">
                                {{ form_widget(decode_form.submit) }}
                            </div>
                            {{ form_end(decode_form) }}
                        </div>
                    </div>
                </div>

{#                <!-- Section 2: Scan depuis la caméra -->#}
{#                <div class="test-section">#}
{#                    <div class="card shadow-sm">#}
{#                        <div class="card-header bg-evalulu text-white">#}
{#                            <h3 class="mb-0">#}
{#                                <i class="bi bi-camera"></i>Scanner avec la caméra#}
{#                            </h3>#}
{#                        </div>#}
{#                        <div class="card-body">#}
{#                            <div class="text-center mb-3">#}
{#                                <button type="button" class="btn btn-dark bg-evalulu btn-lg" id="start-camera-btn">#}
{#                                    <i class="bi bi-camera-fill"></i> Activer la caméra#}
{#                                </button>#}
{#                                <button type="button" class="btn btn-danger btn-lg" id="stop-camera-btn" style="display: none;">#}
{#                                    <i class="bi bi-camera-video-off"></i> Arrêter la caméra#}
{#                                </button>#}
{#                            </div>#}

{#                            <div id="camera-container" style="display: none;">#}
{#                                <video id="camera-preview" autoplay playsinline></video>#}
{#                                <canvas id="camera-canvas" style="display: none;"></canvas>#}

{#                                <div class="text-center mt-3">#}
{#                                    <button type="button" class="btn btn-primary" id="capture-btn">#}
{#                                        <i class="bi bi-camera"></i> Capturer et décoder#}
{#                                    </button>#}
{#                                </div>#}
{#                            </div>#}

{#                            <div id="camera-result" class="scan-result mt-3"></div>#}
{#                        </div>#}
{#                    </div>#}
{#                </div>#}

                <!-- Résultats du décodage -->
                {% if decoded_data %}
                    <div class="decoded-data">
                        <h3 class="my-3">
                            <i class="bi bi-check-circle-fill"></i> Données décodées
                        </h3>

                        <div class="table-responsive">
                            <table class="table table-bordered">
                                <thead class="table-light">
                                <tr>
                                    <th>Clé</th>
                                    <th>Valeur</th>
                                </tr>
                                </thead>
                                <tbody>
                                {% for key, value in decoded_data %}
                                    <tr>
                                        <td><strong>{{ key }}</strong></td>
                                        <td>
                                            {% if key == 'password' %}
                                                <code>{{ value }}</code>
                                                <small class="text-muted">(mot de passe en clair)</small>
                                            {% else %}
                                                {{ value }}
                                            {% endif %}
                                        </td>
                                    </tr>
                                {% endfor %}
                                </tbody>
                            </table>
                        </div>

                        <div class="alert alert-info mt-3">
                            <i class="bi bi-info-circle"></i>
                            <strong>Données JSON déchiffrées :</strong>
                            <pre class="mb-0 mt-2"><code>{{ decoded_data|json_encode(constant('JSON_PRETTY_PRINT')) }}</code></pre>
                        </div>
                    </div>
                {% endif %}
            </div>
        </div>
    </div>
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script>
        $(document).ready(function() {
            let stream = null;

            // Prévisualisation du fichier uploadé
            $('#file-input').on('change', function(e) {
                const file = e.target.files[0];
                if (file) {
                    const reader = new FileReader();
                    reader.onload = function(e) {
                        $('#preview-image').attr('src', e.target.result);
                        $('#file-preview').slideDown();
                    };
                    reader.readAsDataURL(file);
                }
            });

            // Gestion de la caméra
            $('#start-camera-btn').on('click', async function() {
                try {
                    stream = await navigator.mediaDevices.getUserMedia({
                        video: { facingMode: 'environment' }
                    });

                    const video = document.getElementById('camera-preview');
                    video.srcObject = stream;

                    $('#camera-container').slideDown();
                    $('#start-camera-btn').hide();
                    $('#stop-camera-btn').show();
                } catch (err) {
                    alert('Erreur d\'accès à la caméra : ' + err.message);
                }
            });

            $('#stop-camera-btn').on('click', function() {
                if (stream) {
                    stream.getTracks().forEach(track => track.stop());
                    $('#camera-container').slideUp();
                    $('#start-camera-btn').show();
                    $('#stop-camera-btn').hide();
                    $('#camera-result').hide();
                }
            });

            // Capturer et décoder l'image
            $('#capture-btn').on('click', function() {
                const video = document.getElementById('camera-preview');
                const canvas = document.getElementById('camera-canvas');
                const context = canvas.getContext('2d');

                canvas.width = video.videoWidth;
                canvas.height = video.videoHeight;
                context.drawImage(video, 0, 0);

                const imageData = canvas.toDataURL('image/png');

                // Envoi AJAX pour décodage
                $.ajax({
                    url: '{{ path('app_qrcode_test_ajax') }}',
                    method: 'POST',
                    data: { qrcode_data: imageData },
                    beforeSend: function() {
                        $('#capture-btn').prop('disabled', true).html('<span class="spinner-border spinner-border-sm"></span> Décodage...');
                    },
                    success: function(response) {
                        if (response.success) {
                            displayResult(response.data, true);
                        } else {
                            displayResult(null, false, response.error);
                        }
                    },
                    error: function(xhr) {
                        const response = xhr.responseJSON || {};
                        displayResult(null, false, response.error || 'Erreur inconnue');
                    },
                    complete: function() {
                        $('#capture-btn').prop('disabled', false).html('<i class="bi bi-camera"></i> Capturer et décoder');
                    }
                });
            });

            function displayResult(data, success, error = null) {
                let html = '';

                if (success && data) {
                    html = `
                        <div class="alert alert-success">
                            <h4><i class="bi bi-check-circle-fill"></i> QR Code décodé avec succès !</h4>
                            <table class="table table-sm table-bordered mt-3 bg-white">
                                <thead>
                                    <tr>
                                        <th>Clé</th>
                                        <th>Valeur</th>
                                    </tr>
                                </thead>
                                <tbody>`;

                    for (const [key, value] of Object.entries(data)) {
                        html += `
                            <tr>
                                <td><strong>${key}</strong></td>
                                <td>${key === 'password' ? '<code>' + value + '</code>' : value}</td>
                            </tr>`;
                    }

                    html += `
                                </tbody>
                            </table>
                            <pre class="mt-2"><code>${JSON.stringify(data, null, 2)}</code></pre>
                        </div>`;
                } else {
                    html = `
                        <div class="alert alert-danger">
                            <h4><i class="bi bi-x-circle-fill"></i> Erreur de décodage</h4>
                            <p>${error || 'Impossible de décoder le QR Code'}</p>
                        </div>`;
                }

                $('#camera-result').html(html).slideDown();
            }
        });
    </script>
{% endblock %}