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

{% block body %}
    <div class="container mt-5">
        <h1>Scanner de fichiers MP3</h1>

        <div class="card mt-4">
            <div class="card-header">
                Progression du scan
            </div>
            <div class="card-body">
                <div class="progress mb-3">
                    <div id="progress-bar" class="progress-bar progress-bar-striped progress-bar-animated"
                         role="progressbar" style="width: 0%"></div>
                </div>
                <div id="progress-text" class="mb-3">Prêt à démarrer...</div>
                <div id="file-info" class="text-muted small mb-3"></div>

                <button id="start-btn" class="btn btn-primary">Démarrer le scan</button>

                <div id="error-container" class="mt-4" style="display: none;">
                    <h5>Erreurs survenues :</h5>
                    <ul id="error-list" class="list-group"></ul>
                </div>
            </div>
            <div class="card-footer text-muted">
                <span id="stats">0 fichiers traités sur 0</span>
            </div>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const startBtn = document.getElementById('start-btn');
            const progressBar = document.getElementById('progress-bar');
            const progressText = document.getElementById('progress-text');
            const fileInfo = document.getElementById('file-info');
            const errorContainer = document.getElementById('error-container');
            const errorList = document.getElementById('error-list');
            const stats = document.getElementById('stats');

            let checkInterval;

            startBtn.addEventListener('click', function() {
                startBtn.disabled = true;
                progressText.textContent = 'Initialisation...';

                fetch('{{ path('app_start_scan') }}')
                    .then(response => response.json())
                    .then(data => {
                        if (data.status === 'started') {
                            checkProgress();
                        }
                    });
            });

            function checkProgress() {
                checkInterval = setInterval(() => {
                    fetch('{{ path('app_scan_progress') }}')
                        .then(response => response.json())
                        .then(data => {
                            // Mise à jour de la progress bar
                            progressBar.style.width = data.progress + '%';

                            // Mise à jour des textes
                            stats.textContent = Math.round(data.total * data.progress / 100) +
                                ' fichiers traités sur ' + data.total;
                            fileInfo.textContent = 'Fichier en cours : ' + data.current;

                            // Gestion des erreurs
                            if (data.errors && data.errors.length > 0) {
                                errorContainer.style.display = 'block';
                                errorList.innerHTML = data.errors.map(err =>
                                    `<li class="list-group-item list-group-item-danger">${err}</li>`
                                ).join('');
                            }

                            // Si terminé
                            if (data.progress >= 100) {
                                clearInterval(checkInterval);
                                progressBar.classList.remove('progress-bar-animated');
                                progressText.textContent = 'Scan terminé !';
                                startBtn.disabled = false;
                            }
                        });
                }, 1000);
            }
        });
    </script>

    <style>
        .progress {
            height: 30px;
        }
        .progress-bar {
            transition: width 0.5s ease;
        }
    </style>
{% endblock %}