{% extends 'admin/_layout.html.twig' %}
{% block admin %}
    <h1 class="rule-gold font-display text-2xl font-semibold">Import MP3</h1>
    <p class="mt-3 text-sm text-sand">
        Déposez vos fichiers <code class="text-gold-300">.mp3</code> dans <code class="text-gold-300">{{ importDir }}</code>
        (scp, FTP…) ou envoyez-les ci-dessous, puis lancez l'import : les tags ID3 (titre, année, commentaire)
        et la durée sont lus automatiquement, les doublons sont ignorés (empreinte SHA-1).
    </p>

    <form action="{{ path('admin_import_upload') }}" method="post" enctype="multipart/form-data" class="card mt-6 flex flex-col gap-4 p-6 sm:flex-row sm:items-end">
        <input type="hidden" name="_token" value="{{ csrf_token('admin_upload') }}">
        <div class="flex-1">
            <label class="label" for="files">Ajouter des fichiers à la file</label>
            <input class="field" type="file" id="files" name="files[]" accept=".mp3,audio/mpeg" multiple>
        </div>
        <button class="btn-ghost" type="submit">Déposer</button>
    </form>

    <div class="card mt-6 p-6">
        <div class="flex items-center justify-between">
            <h2 class="font-display text-lg font-semibold">File d'attente (<span id="import-count">{{ pending|length }}</span>)</h2>
            {% if pending|length %}
                <form id="import-fallback-form" action="{{ path('admin_import_run') }}" method="post">
                    <input type="hidden" name="_token" value="{{ csrf_token('admin_import') }}">
                    <button id="import-start" class="btn-gold" type="submit">⚡ Lancer l'import</button>
                </form>
            {% endif %}
        </div>

        <div id="import-progress" class="mt-4 hidden">
            <div class="flex items-center justify-between text-xs text-sand-dim">
                <span id="import-status">Préparation…</span>
                <span id="import-pct">0 %</span>
            </div>
            <div class="mt-1.5 h-2 w-full overflow-hidden rounded-full bg-night-700/60">
                <div id="import-bar" class="h-full w-0 rounded-full bg-gradient-to-r from-gold-500 to-gold-300 transition-all duration-300 ease-out"></div>
            </div>
        </div>

        <ul id="import-log" class="mt-4 max-h-80 divide-y divide-night-700/50 overflow-y-auto text-sm"></ul>

        <ul id="import-pending-list" class="mt-4 divide-y divide-night-700/50 text-sm">
            {% for f in pending %}
                <li class="flex justify-between py-2" data-filename="{{ f.name }}"><span class="truncate">{{ f.name }}</span><span class="text-sand-dim">{{ (f.size / 1048576)|number_format(1) }} Mo</span></li>
            {% else %}
                <li class="py-2 text-sand-dim">Aucun fichier en attente.</li>
            {% endfor %}
        </ul>
    </div>

    <script>
        (function () {
            var pending = {{ pending|map(f => f.name)|json_encode|raw }};
            var startBtn = document.getElementById('import-start');
            var fallbackForm = document.getElementById('import-fallback-form');
            if (!startBtn || !pending.length) return;

            var progressWrap = document.getElementById('import-progress');
            var bar = document.getElementById('import-bar');
            var pctLabel = document.getElementById('import-pct');
            var statusLabel = document.getElementById('import-status');
            var log = document.getElementById('import-log');
            var pendingList = document.getElementById('import-pending-list');
            var countLabel = document.getElementById('import-count');
            var csrfToken = '{{ csrf_token('admin_import') }}';
            var processUrl = '{{ path('admin_import_process') }}';
            var redirectUrl = '{{ path('admin_podcasts') }}';

            function escapeHtml(str) {
                var div = document.createElement('div');
                div.textContent = str;
                return div.innerHTML;
            }

            function removeFromPendingList(name) {
                var row = pendingList.querySelector('[data-filename="' + CSS.escape(name) + '"]');
                if (row) row.remove();
            }

            function appendLog(iconClass, icon, text) {
                var li = document.createElement('li');
                li.className = 'flex items-center gap-2 py-1.5';
                li.innerHTML = '<span class="' + iconClass + '">' + icon + '</span><span class="truncate">' + escapeHtml(text) + '</span>';
                log.appendChild(li);
                log.scrollTop = log.scrollHeight;
            }

            fallbackForm.addEventListener('submit', function (e) {
                e.preventDefault();
                runImport();
            });

            async function runImport() {
                startBtn.disabled = true;
                startBtn.textContent = 'Import en cours…';
                progressWrap.classList.remove('hidden');
                log.innerHTML = '';

                var imported = 0, skipped = 0, errors = 0;
                var total = pending.length;

                for (var i = 0; i < total; i++) {
                    var name = pending[i];
                    statusLabel.textContent = 'Traitement de « ' + name + ' » (' + (i + 1) + '/' + total + ')';

                    try {
                        var res = await fetch(processUrl, {
                            method: 'POST',
                            headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
                            body: new URLSearchParams({ _token: csrfToken, filename: name }),
                        });
                        var data = await res.json();

                        if (data.status === 'imported') {
                            imported++;
                            appendLog('text-emerald-400', '✔', data.title || name);
                        } else if (data.status === 'skipped') {
                            skipped++;
                            appendLog('text-sand-dim', '⏭', name + ' (doublon, retiré de la file)');
                        } else {
                            errors++;
                            appendLog('text-red-400', '✘', data.error || name);
                        }
                    } catch (err) {
                        errors++;
                        appendLog('text-red-400', '✘', name + ' : erreur réseau, réessayez plus tard.');
                    }

                    removeFromPendingList(name);
                    var pct = Math.round(((i + 1) / total) * 100);
                    bar.style.width = pct + '%';
                    pctLabel.textContent = pct + ' %';
                    countLabel.textContent = String(total - i - 1);
                }

                statusLabel.textContent = 'Terminé : ' + imported + ' importé(s), ' + skipped + ' doublon(s) ignoré(s)' + (errors ? ', ' + errors + ' erreur(s)' : '') + '.';
                startBtn.textContent = 'Import terminé';

                setTimeout(function () { window.location.href = redirectUrl; }, 1500);
            }
        })();
    </script>
{% endblock %}