{# templates/admin/sync/index.html.twig #}
{% extends 'admin/base.html.twig' %}

{% block title %}Synchronisation serveur - AMA EDU{% endblock %}

{% block body %}
<div class="container py-4" style="max-width: 800px;">

    <h2 class="mb-1">
        <i class="bi bi-arrow-repeat"></i> Synchronisation avec le serveur central
    </h2>
    <p class="text-muted mb-4">
        Envoie les données locales vers <strong>amaedu.servicesproviders.org</strong>.
        Ne fermez pas la page pendant l'opération.
    </p>

    {# ── Statut maintenance ────────────────────────────────── #}
    {% if maintenance_active %}
    <div class="alert alert-warning d-flex align-items-center" id="maintenance-banner">
        <span class="spinner-border spinner-border-sm me-2"></span>
        <strong>Synchronisation en cours…</strong>&nbsp; Veuillez patienter.
    </div>
    {% endif %}

    {# ── Bouton principal ──────────────────────────────────── #}
    <div class="card shadow-sm mb-4">
        <div class="card-body text-center py-5">
            <p class="fs-5 mb-4">
                Cliquez sur le bouton pour envoyer toutes les données locales
                vers le serveur central.
            </p>

            <form id="sync-form" method="post" action="{{ path('admin_sync_launch') }}">
                <input type="hidden" name="_token"
                       value="{{ csrf_token('sync_launch') }}">
                <button type="submit"
                        id="sync-btn"
                        class="btn btn-primary btn-lg px-5"
                        {% if maintenance_active %}disabled{% endif %}>
                    <i class="bi bi-cloud-upload me-2"></i>
                    Synchroniser avec le serveur
                </button>
            </form>

            <div id="sync-result" class="mt-4" style="display:none;"></div>
        </div>
    </div>

    {# ── Barre de progression ──────────────────────────────── #}
    <div id="progress-section" style="display:none;" class="mb-4">
        <label class="form-label fw-semibold">Progression</label>
        <div class="progress" style="height: 24px;">
            <div id="progress-bar"
                 class="progress-bar progress-bar-striped progress-bar-animated"
                 role="progressbar" style="width: 0%">0%</div>
        </div>
        <small class="text-muted" id="progress-label">Démarrage…</small>
    </div>

    {# ── Journal ───────────────────────────────────────────── #}
    <div class="card">
        <div class="card-header d-flex justify-content-between align-items-center">
            <span><i class="bi bi-journal-text me-1"></i> Journal (20 dernières lignes)</span>
            <button class="btn btn-sm btn-outline-secondary" onclick="refreshLog()">
                <i class="bi bi-arrow-clockwise"></i> Actualiser
            </button>
        </div>
        <div class="card-body p-0">
            <pre id="log-output"
                 class="m-0 p-3"
                 style="background:#1e1e1e; color:#d4d4d4; font-size:.8rem;
                        max-height:300px; overflow-y:auto; border-radius:0 0 .375rem .375rem;">{% for line in last_log_lines %}{{ line }}
{% endfor %}</pre>
        </div>
    </div>

</div>
{% endblock %}

{% block javascripts %}
{{ parent() }}
<script>
const STATUS_URL  = '{{ path("admin_sync_status") }}';
const CSRF_TOKEN  = '{{ csrf_token("sync_launch") }}';

let pollInterval  = null;
let stepProgress  = 0;

const steps = [
    'Vérifications préalables…',
    'Activation maintenance…',
    'Export base de données…',
    'Compression…',
    'Envoi vers le serveur…',
    'Import sur le serveur…',
    'Vérification application…',
    'Finalisation…',
];

// ── Soumission du formulaire ─────────────────────────────────
document.getElementById('sync-form').addEventListener('submit', async function(e) {
    e.preventDefault();

    const btn = document.getElementById('sync-btn');
    btn.disabled = true;
    btn.innerHTML = '<span class="spinner-border spinner-border-sm me-2"></span>Démarrage…';

    document.getElementById('sync-result').style.display = 'none';
    document.getElementById('progress-section').style.display = 'block';
    setProgress(5, steps[0]);

    try {
        const resp = await fetch(this.action, {
            method: 'POST',
            headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
            body: '_token=' + encodeURIComponent(CSRF_TOKEN),
        });
        const data = await resp.json();

        if (data.status === 'ok') {
            startPolling();
        } else {
            showResult('error', data.message);
            btn.disabled = false;
            btn.innerHTML = '<i class="bi bi-cloud-upload me-2"></i>Synchroniser avec le serveur';
        }
    } catch (err) {
        showResult('error', 'Erreur réseau : ' + err.message);
        btn.disabled = false;
        btn.innerHTML = '<i class="bi bi-cloud-upload me-2"></i>Synchroniser avec le serveur';
    }
});

// ── Polling statut ───────────────────────────────────────────
function startPolling() {
    stepProgress = 0;
    pollInterval = setInterval(pollStatus, 2000);
}

async function pollStatus() {
    try {
        const resp = await fetch(STATUS_URL);
        const data = await resp.json();

        // Avancer la barre de progression visuellement
        if (data.running && stepProgress < steps.length - 1) {
            stepProgress++;
            const pct = Math.round((stepProgress / steps.length) * 90);
            setProgress(pct, steps[stepProgress] || 'En cours…');
        }

        // Mettre à jour le log
        refreshLog();

        // Vérifier fin
        if (!data.running && data.last_status) {
            clearInterval(pollInterval);

            if (data.last_status === 'success') {
                setProgress(100, 'Terminé !');
                showResult('success', '✔ Synchronisation terminée avec succès !');
            } else {
                setProgress(100, 'Erreur');
                showResult('error', '✖ Erreur lors de la synchronisation. Consultez le journal ci-dessous.');
            }

            const btn = document.getElementById('sync-btn');
            btn.disabled = false;
            btn.innerHTML = '<i class="bi bi-cloud-upload me-2"></i>Synchroniser avec le serveur';
        }
    } catch (err) {
        console.error('Polling error:', err);
    }
}

// ── Rafraîchir le journal ────────────────────────────────────
async function refreshLog() {
    try {
        const resp = await fetch(STATUS_URL);
        const data = await resp.json();
        if (data.last_line) {
            const pre = document.getElementById('log-output');
            // Ajouter la ligne si elle n'est pas déjà présente
            if (!pre.textContent.includes(data.last_line)) {
                pre.textContent += data.last_line + '\n';
                pre.scrollTop = pre.scrollHeight;
            }
        }
    } catch (e) {}
}

// ── Helpers ──────────────────────────────────────────────────
function setProgress(pct, label) {
    const bar = document.getElementById('progress-bar');
    bar.style.width = pct + '%';
    bar.textContent = pct + '%';
    document.getElementById('progress-label').textContent = label;
}

function showResult(type, message) {
    const el = document.getElementById('sync-result');
    el.style.display = 'block';
    el.className = type === 'success'
        ? 'alert alert-success fs-5'
        : 'alert alert-danger fs-5';
    el.textContent = message;
}
</script>
{% endblock %}