{% extends 'gestion/_base.html.twig' %}
{% set active = 'affutages' %}

{% block title %}Affûtage {{ demande.reference }}{% endblock %}

{% block content %}
    <div class="adm-page-head">
        <div>
            <span class="adm-eyebrow">Affûtage professionnel</span>
            <h1 class="adm-page-title">{{ demande.etablissement }}</h1>
            <p class="adm-page-sub">
                {{ demande.reference }} · déposée le {{ demande.createdAt|date('d/m/Y à H:i') }} ·
                <span id="aff-head-badge">{% include 'gestion/affutages/_status_badge.html.twig' with { statut: demande.statut } only %}</span>
            </p>
        </div>
        <div class="adm-page-head-actions">
            <a class="adm-btn adm-btn--ghost" href="{{ path('gestion_affutages') }}">← Retour à la liste</a>
        </div>
    </div>

    <div class="adm-grid adm-grid--2">
        {# ---------------- Colonne gauche : la demande ---------------- #}
        <div>
            <div class="adm-card">
                <div class="adm-card-title">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" width="18" height="18"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
                    Établissement
                </div>
                <dl class="aff-adm-facts">
                    <div><dt>Contact</dt><dd><a href="mailto:{{ demande.email }}">{{ demande.email }}</a> · <a href="tel:{{ demande.telephone|replace({' ': ''}) }}">{{ demande.telephone }}</a></dd></div>
                    <div><dt>Adresse (retour)</dt><dd>{{ demande.adresse }}</dd></div>
                    <div><dt>Volume annoncé</dt><dd><strong>{{ demande.nbCouteaux }}</strong> couteau{{ demande.nbCouteaux > 1 ? 'x' }}{% if demande.nbAutres > 0 %} + <strong>{{ demande.nbAutres }}</strong> autre{{ demande.nbAutres > 1 ? 's' }} article{{ demande.nbAutres > 1 ? 's' }}{% endif %}</dd></div>
                    {% if demande.description %}
                        <div><dt>Précisions</dt><dd>{{ demande.description|nl2br }}</dd></div>
                    {% endif %}
                    {% if demande.motifRefus %}
                        <div><dt>Motif de refus</dt><dd>{{ demande.motifRefus|nl2br }}</dd></div>
                    {% endif %}
                </dl>
                <p class="aff-adm-hint" style="margin-top:16px;">
                    <button type="button" class="adm-btn adm-btn--ghost adm-btn--sm" disabled title="Bientôt disponible">Générer l'étiquette Colissimo / Chronopost</button>
                    <span style="display:block;margin-top:6px;">La génération d'étiquettes arrivera dans une prochaine version — le transporteur choisi est déjà enregistré pour ça.</span>
                </p>
            </div>
        </div>

        {# ---------------- Colonne droite : traitement guidé ---------------- #}
        <div>
            <div class="adm-card" id="aff-flow-wrap">
                {% include 'gestion/affutages/_flow.html.twig' %}
            </div>
        </div>
    </div>
{% endblock %}

{% block scripts %}
<script>
(function () {
    'use strict';
    var apiStatus = '{{ path('gestion_api_affutage_status', {reference: demande.reference}) }}';
    var apiTracking = '{{ path('gestion_api_affutage_tracking', {reference: demande.reference}) }}';
    var apiTrackNow = '{{ path('gestion_api_affutage_track_now', {reference: demande.reference}) }}';
    var flowUrl = window.location.pathname + '?fragment=1';
    var wrap = document.getElementById('aff-flow-wrap');

    /* Recharge le bloc Traitement seul — pas de refresh page : les
       notifications restent affichées le temps prévu. */
    function refreshFlow() {
        return fetch(flowUrl, { headers: { 'X-Requested-With': 'XMLHttpRequest' } })
            .then(function (r) { return r.text(); })
            .then(function (html) {
                wrap.innerHTML = html;
                // Le badge d'en-tête suit le nouveau statut.
                var badge = wrap.querySelector('[data-flow-badge]');
                var head = document.getElementById('aff-head-badge');
                if (badge && head) { head.innerHTML = badge.innerHTML; }
            });
    }

    function scopeOf(el) {
        return el.closest('[data-flow-scope]') || wrap;
    }
    function notifyChecked(scope) {
        var box = scope.querySelector('[data-flow-notify]');
        return !box || box.checked;
    }

    function reportEmail(data) {
        if (data.emailError) {
            showNotification({ success: 'attention', title: 'Email client non envoyé', message: data.emailError });
        }
    }

    function doStatus(btn) {
        var scope = scopeOf(btn);
        var payload = {
            action: btn.getAttribute('data-flow-status'),
            notifyClient: notifyChecked(scope)
        };
        if ('refuser' === payload.action) {
            var motif = scope.querySelector('[data-flow-refuse-motif]');
            payload.motif = motif ? motif.value.trim() : '';
        }
        if ('livree' === payload.action) { payload.notifyClient = false; }
        btn.disabled = true;
        admFetch(apiStatus, { body: payload })
            .then(function (data) {
                showNotification({
                    success: true,
                    title: 'Étape validée',
                    message: data.label + (data.emailSent ? ' — email envoyé au client.' : '.')
                });
                reportEmail(data);
                refreshFlow();
            })
            .catch(function () { btn.disabled = false; });
    }

    function doTracking(btn) {
        var scope = scopeOf(btn);
        var sens = btn.getAttribute('data-flow-tracking');
        var number = scope.querySelector('[data-flow-number]');
        var num = number ? (number.value || '').trim() : '';
        if (!num) {
            showNotification({ success: false, title: 'Numéro manquant', message: 'Renseignez le numéro de suivi du colis.' });
            return;
        }
        var carrier = scope.querySelector('[data-flow-carrier]');
        var url = scope.querySelector('[data-flow-url]');
        btn.disabled = true;
        admTrackingSave(apiTracking, {
            sens: sens,
            transporteur: carrier ? carrier.value : '',
            numero: num,
            url: url ? url.value.trim() : '',
            notifyClient: notifyChecked(scope)
        })
            .then(function (data) {
                showNotification({
                    success: true,
                    title: 'Suivi enregistré',
                    message: data.statutLabel + (data.emailSent ? ' — email envoyé au client.' : '.')
                        + (data.trackingError ? ' (Suivi : ' + data.trackingError + ')' : '')
                });
                reportEmail(data);
                refreshFlow();
            })
            .catch(function (err) {
                btn.disabled = false;
                if (err.cancelled) { return; }
            });
    }

    /* Délégation : le bloc Traitement est re-rendu en AJAX, aucun rebind nécessaire. */
    wrap.addEventListener('click', function (e) {
        var statusBtn = e.target.closest('[data-flow-status]');
        if (statusBtn) {
            admConfirm({
                title: 'Confirmer l\'étape',
                message: statusBtn.getAttribute('data-flow-confirm'),
                okLabel: statusBtn.getAttribute('data-flow-ok') || 'Confirmer',
                danger: 'refuser' === statusBtn.getAttribute('data-flow-status')
            }).then(function (ok) { if (ok) doStatus(statusBtn); });
            return;
        }

        var trackingBtn = e.target.closest('[data-flow-tracking]');
        if (trackingBtn) {
            admConfirm({
                title: 'Confirmer l\'étape',
                message: trackingBtn.getAttribute('data-flow-confirm'),
                okLabel: trackingBtn.getAttribute('data-flow-ok') || 'Confirmer'
            }).then(function (ok) { if (ok) doTracking(trackingBtn); });
            return;
        }

        var verifyBtn = e.target.closest('[data-flow-verify]');
        if (verifyBtn) {
            var scope = scopeOf(verifyBtn);
            var number = scope.querySelector('[data-flow-number]');
            var num = number ? (number.value || '').trim() : '';
            if (!num) {
                showNotification({ success: false, title: 'Numéro manquant', message: 'Saisissez un numéro de suivi à vérifier.' });
                return;
            }
            verifyBtn.disabled = true;
            admVerifyTracking(num)
                .then(function (data) {
                    var found = data.verdict === 'found';
                    showNotification({
                        success: found,
                        title: data.verdictLabel,
                        message: found
                            ? (data.trackingStatusLabel + ' — ' + data.eventCount + ' événement' + (data.eventCount > 1 ? 's' : '') + ' de suivi.')
                            : data.message
                    });
                })
                .catch(function (err) {
                    showNotification({ success: false, title: 'Vérification impossible', message: err.message });
                })
                .then(function () { verifyBtn.disabled = false; });
            return;
        }

        var trackBtn = e.target.closest('[data-flow-track]');
        if (trackBtn) {
            trackBtn.disabled = true;
            admFetch(apiTrackNow, { body: { sens: trackBtn.getAttribute('data-flow-track') } })
                .then(function (data) {
                    showNotification({ success: true, title: 'Suivi actualisé', message: data.trackingStatusLabel || 'Aucun nouvel événement.' });
                    refreshFlow();
                })
                .catch(function () { trackBtn.disabled = false; });
            return;
        }

        var refuseToggle = e.target.closest('[data-flow-refuse-toggle]');
        if (refuseToggle) {
            var bloc = scopeOf(refuseToggle).querySelector('[data-flow-refuse-bloc]');
            if (bloc) { bloc.hidden = !bloc.hidden; }
            return;
        }

        var editToggle = e.target.closest('[data-flow-edit-toggle]');
        if (editToggle) {
            var edit = scopeOf(editToggle).querySelector('[data-flow-edit-bloc]');
            if (edit) { edit.hidden = !edit.hidden; }
        }
    });

    /* Le lien de suivi manuel n'a de sens qu'en mode libre. */
    wrap.addEventListener('change', function (e) {
        var carrier = e.target.closest('[data-flow-carrier]');
        if (!carrier) return;
        var urlWrap = scopeOf(carrier).querySelector('[data-flow-url-wrap]');
        if (urlWrap) { urlWrap.hidden = carrier.value !== 'libre'; }
    });
})();
</script>
{% endblock %}