{% extends 'gestion/_base.html.twig' %}
{% set active = 'points-depot' %}

{% block title %}{{ isNew ? 'Nouveau point de dépôt' : point.nom }}{% endblock %}

{% block content %}
    <div class="adm-page-head">
        <div>
            <span class="adm-eyebrow">Service d'affûtage</span>
            <h1 class="adm-page-title">{{ isNew ? 'Nouveau point de dépôt' : 'Modifier le point de dépôt' }}</h1>
            {% if not isNew %}<p class="adm-page-sub adm-mono">#{{ point.id }} · ajouté le {{ point.createdAt|date('d/m/Y') }}</p>{% endif %}
        </div>
        <div class="adm-page-head-actions">
            <a class="adm-btn adm-btn--ghost" href="{{ path('gestion_points_depot') }}">← Retour</a>
        </div>
    </div>

    <form method="post" class="adm-card" style="max-width:720px;" data-point-form>
        <input type="hidden" name="_csrf_token" value="{{ csrf_token('gestion_point_depot') }}">
        <div class="adm-form">
            <div class="adm-field">
                <input type="text" id="pd-nom" name="nom" placeholder=" " required maxlength="120" value="{{ point.nom }}">
                <label for="pd-nom">Nom affiché (ex. « Boucherie Martin »)</label>
            </div>

            <div class="adm-field adm-field--ac" data-pd-adresse>
                <input type="text" id="pd-adresse" name="adresse" placeholder=" " required maxlength="255"
                       autocomplete="off" role="combobox" aria-expanded="false" aria-autocomplete="list" aria-owns="pd-adresse-list"
                       value="{{ point.adresse }}">
                <label for="pd-adresse">Adresse du point de dépôt</label>
                <ul class="adm-suggest" id="pd-adresse-list" role="listbox" hidden></ul>
                <input type="hidden" name="code_postal" value="{{ point.codePostal }}">
                <input type="hidden" name="ville" value="{{ point.ville }}">
                <input type="hidden" name="latitude" value="{{ point.latitude }}">
                <input type="hidden" name="longitude" value="{{ point.longitude }}">
                <p class="adm-field-help" data-pd-status>
                    {%- if point.latitude is not null -%}
                        Localisé : {{ point.ville ?: 'coordonnées enregistrées' }} ({{ point.latitude|number_format(5, '.', '') }}, {{ point.longitude|number_format(5, '.', '') }})
                    {%- else -%}
                        Tapez l'adresse puis choisissez une proposition — c'est elle qui fournit les coordonnées du point.
                    {%- endif -%}
                </p>
            </div>

            <label class="adm-check">
                <input type="checkbox" name="actif" value="1" {{ isNew or point.actif ? 'checked' }}>
                Visible sur le site
            </label>
            <p class="adm-field-help">Les clients voient les points de dépôt situés à moins de 30 km de l'adresse qu'ils saisissent, du plus proche au plus éloigné.</p>

            <div style="text-align:right;">
                <button type="submit" class="adm-btn">{{ isNew ? 'Créer le point de dépôt' : 'Enregistrer' }}</button>
            </div>
        </div>
    </form>
{% endblock %}

{% block scripts %}
<script>
(function () {
    'use strict';

    /* Autocomplétion Base Adresse Nationale : la sélection d'une proposition
       est le seul chemin qui renseigne latitude/longitude — une saisie libre
       laisse les champs vides et le serveur refuse l'enregistrement. */
    var wrap = document.querySelector('[data-pd-adresse]');
    if (!wrap) return;

    var input = wrap.querySelector('input[name="adresse"]');
    var list = document.getElementById('pd-adresse-list');
    var cp = wrap.querySelector('input[name="code_postal"]');
    var ville = wrap.querySelector('input[name="ville"]');
    var lat = wrap.querySelector('input[name="latitude"]');
    var lng = wrap.querySelector('input[name="longitude"]');
    var status = wrap.querySelector('[data-pd-status]');
    var timer = null;
    var controller = null;
    var activeIndex = -1;

    function closeList() {
        list.hidden = true;
        list.innerHTML = '';
        activeIndex = -1;
        input.setAttribute('aria-expanded', 'false');
    }

    function pick(f) {
        var p = f.properties;
        var coords = f.geometry && f.geometry.coordinates ? f.geometry.coordinates : [null, null];
        input.value = p.label || '';
        cp.value = p.postcode || '';
        ville.value = p.city || '';
        lng.value = coords[0];
        lat.value = coords[1];
        status.textContent = 'Localisé : ' + (p.city || 'coordonnées enregistrées')
            + ' (' + Number(coords[1]).toFixed(5) + ', ' + Number(coords[0]).toFixed(5) + ')';
        closeList();
        input.focus();
    }

    function highlight(items) {
        items.forEach(function (li, i) {
            li.classList.toggle('is-active', i === activeIndex);
            li.setAttribute('aria-selected', i === activeIndex ? 'true' : 'false');
        });
    }

    function search(q) {
        if (controller) { controller.abort(); }
        controller = new AbortController();
        fetch('https://api-adresse.data.gouv.fr/search/?limit=6&autocomplete=1&q=' + encodeURIComponent(q), { signal: controller.signal })
            .then(function (r) { return r.ok ? r.json() : null; })
            .then(function (data) {
                if (!data || !data.features || !data.features.length) { closeList(); return; }
                list.innerHTML = '';
                data.features.forEach(function (f) {
                    var li = document.createElement('li');
                    li.setAttribute('role', 'option');
                    li.textContent = f.properties.label;
                    li.addEventListener('mousedown', function (e) {
                        e.preventDefault(); // avant le blur de l'input
                        pick(f);
                    });
                    list.appendChild(li);
                });
                list.hidden = false;
                activeIndex = -1;
                input.setAttribute('aria-expanded', 'true');
            })
            .catch(function () { /* réseau/abort : silencieux */ });
    }

    input.addEventListener('input', function () {
        // Toute retouche manuelle invalide la localisation mémorisée.
        cp.value = ''; ville.value = ''; lat.value = ''; lng.value = '';
        status.textContent = 'Choisissez une proposition dans la liste pour localiser le point.';
        clearTimeout(timer);
        var q = input.value.trim();
        if (q.length < 4) { closeList(); return; }
        timer = setTimeout(function () { search(q); }, 250);
    });

    input.addEventListener('keydown', function (e) {
        var items = Array.prototype.slice.call(list.querySelectorAll('li'));
        if (list.hidden || !items.length) { return; }
        if (e.key === 'ArrowDown') {
            e.preventDefault();
            activeIndex = (activeIndex + 1) % items.length;
            highlight(items);
        } else if (e.key === 'ArrowUp') {
            e.preventDefault();
            activeIndex = (activeIndex - 1 + items.length) % items.length;
            highlight(items);
        } else if (e.key === 'Enter' && activeIndex >= 0) {
            e.preventDefault();
            items[activeIndex].dispatchEvent(new MouseEvent('mousedown'));
        } else if (e.key === 'Escape') {
            closeList();
        }
    });

    input.addEventListener('blur', function () { setTimeout(closeList, 150); });

    // Garde-fou côté client : message immédiat plutôt qu'un aller-retour serveur.
    document.querySelector('[data-point-form]').addEventListener('submit', function (e) {
        if (!lat.value || !lng.value) {
            e.preventDefault();
            showNotification({ success: false, title: 'Adresse non localisée', message: 'Sélectionnez une adresse proposée par la recherche.' });
            input.focus();
        }
    });
})();
</script>
{% endblock %}