{% load i18n %}
{% comment %}
  Reusable component: modals + JS for editing, creating, and deleting locations.
  Include this in any location detail or list template.

  Required template variables:
    thematic_code  – e.g. "trafficlights"
    location_type  – e.g. "trafficlightintersection"

  Optional:
    location_instance – model instance (for the edit/delete modals)
    entry_label       – human-readable label, e.g. "Intersection"
{% endcomment %}

{# ── Edit Modal ──────────────────────────────────────────────────────── #}
<div class="modal fade" id="locationEditModal" tabindex="-1" aria-labelledby="locationEditModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-scrollable">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="locationEditModalLabel">
                    <i class="bi bi-pencil-square me-2"></i>
                    {% blocktranslate with label=entry_label|default:location_type %}Modifier {{ label }}{% endblocktranslate %}
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{% translate 'Fermer' %}"></button>
            </div>
            <div class="modal-body">
                <form id="locationEditForm" method="post">
                    {% csrf_token %}
                    <div id="locationEditAlert" class="alert d-none" role="alert"></div>
                    <div id="locationEditFormFields">
                        <div class="text-center py-4">
                            <div class="spinner-border text-primary" role="status"></div>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{% translate "Annuler" %}</button>
                <button type="submit" form="locationEditForm" class="btn btn-primary" id="locationEditSubmit">
                    {% translate "Enregistrer" %}
                    <span class="spinner-border spinner-border-sm ms-1 d-none" id="locationEditSpinner" role="status" aria-hidden="true"></span>
                </button>
            </div>
        </div>
    </div>
</div>

{# ── Delete Modal ────────────────────────────────────────────────────── #}
<div class="modal fade" id="locationDeleteModal" tabindex="-1" aria-labelledby="locationDeleteModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header bg-danger text-white">
                <h5 class="modal-title" id="locationDeleteModalLabel">
                    <i class="bi bi-trash me-2"></i>{% translate "Confirmer la suppression" %}
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="{% translate 'Fermer' %}"></button>
            </div>
            <div class="modal-body">
                <p>{% blocktranslate with label=entry_label|default:location_type %}Êtes-vous sûr de vouloir supprimer cette localisation ({{ label }}) ?{% endblocktranslate %}</p>
                <p class="text-muted small">{% translate "Cette action est irréversible. Tous les assets associés seront également affectés." %}</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{% translate "Annuler" %}</button>
                <button type="button" class="btn btn-danger" id="locationDeleteConfirm">
                    {% translate "Supprimer" %}
                    <span class="spinner-border spinner-border-sm ms-1 d-none" id="locationDeleteSpinner" role="status" aria-hidden="true"></span>
                </button>
            </div>
        </div>
    </div>
</div>

{# ── Create Modal ────────────────────────────────────────────────────── #}
<div class="modal fade" id="locationCreateModal" tabindex="-1" aria-labelledby="locationCreateModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-scrollable">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="locationCreateModalLabel">
                    <i class="bi bi-plus-circle me-2"></i>
                    {% blocktranslate with label=entry_label|default:location_type %}Créer une nouvelle localisation ({{ label }}){% endblocktranslate %}
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{% translate 'Fermer' %}"></button>
            </div>
            <div class="modal-body">
                <form id="locationCreateForm" method="post">
                    {% csrf_token %}
                    <div id="locationCreateAlert" class="alert d-none" role="alert"></div>
                    <div id="locationCreateFormFields">
                        <div class="text-center py-4">
                            <div class="spinner-border text-primary" role="status"></div>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{% translate "Annuler" %}</button>
                <button type="submit" form="locationCreateForm" class="btn btn-success" id="locationCreateSubmit">
                    {% translate "Créer" %}
                    <span class="spinner-border spinner-border-sm ms-1 d-none" id="locationCreateSpinner" role="status" aria-hidden="true"></span>
                </button>
            </div>
        </div>
    </div>
</div>

{# ── JavaScript ──────────────────────────────────────────────────────── #}
<script>
(function () {
    'use strict';

    const THEMATIC = '{{ thematic_code }}';
    const LOC_TYPE = '{{ location_type }}';
    const AUTOCOMPLETE_STREET_URL = "{% url 'common:autocomplete_street' %}";

    // ---- Map location picker (uses AddressSearchControl) ----
    let _locPickerMap  = null;
    let _locPickerCtrl = null;   // AddressSearchControl instance

    // ---- Polygon picker state ----
    let _polyDrawing    = false;   // are we currently drawing a polygon?
    let _polyVertices   = [];      // [ [lng, lat], ... ] in WGS84
    let _polyMarkers    = [];      // MapLibre markers for each vertex

    function _isPolygonMode() {
        return !!document.getElementById('id_geom_geojson');
    }

    // ---- Serialise _polyVertices to a closed GeoJSON Polygon string ----
    function _verticesToGeoJSON(vertices) {
        if (vertices.length < 3) return '';
        const ring = vertices.concat([vertices[0]]);   // close the ring
        return JSON.stringify({
            type: 'Polygon',
            coordinates: [ring],
        });
    }

    // ---- Render the current polygon on the map ----
    function _renderPoly(vertices) {
        if (!_locPickerMap) return;
        const closed = vertices.length >= 3 ? vertices.concat([vertices[0]]) : vertices;
        const geojson = {
            type: 'Feature',
            geometry: { type: 'LineString', coordinates: closed },
        };
        if (_locPickerMap.getSource('poly-preview')) {
            _locPickerMap.getSource('poly-preview').setData(geojson);
        } else {
            _locPickerMap.addSource('poly-preview', { type: 'geojson', data: geojson });
            _locPickerMap.addLayer({
                id: 'poly-preview-line',
                type: 'line',
                source: 'poly-preview',
                paint: { 'line-color': '#0d6efd', 'line-width': 2 },
            });
            _locPickerMap.addLayer({
                id: 'poly-preview-fill',
                type: 'fill',
                source: 'poly-preview',
                paint: { 'fill-color': '#0d6efd', 'fill-opacity': 0.15 },
            });
        }
    }

    // ---- Remove polygon vertices markers ----
    function _clearPolyMarkers() {
        _polyMarkers.forEach(m => m.remove());
        _polyMarkers = [];
    }

    // ---- Add a vertex marker to the map ----
    function _addVertexMarker(lng, lat, index) {
        const el = document.createElement('div');
        el.style.cssText = 'width:10px;height:10px;border-radius:50%;background:#0d6efd;border:2px solid #fff;box-shadow:0 0 2px rgba(0,0,0,.4);cursor:pointer;';
        const marker = new maplibregl.Marker({ element: el }).setLngLat([lng, lat]).addTo(_locPickerMap);
        _polyMarkers.push(marker);
        // Clicking the first vertex closes the polygon
        if (index === 0) {
            el.title = '{% translate "Cliquez pour fermer le polygone" %}';
            el.addEventListener('click', (e) => {
                e.stopPropagation();
                _finishPolygon();
            });
        }
    }

    // ---- Commit the drawn polygon ----
    function _finishPolygon() {
        if (_polyVertices.length < 3) return;
        _polyDrawing = false;
        const geojson = _verticesToGeoJSON(_polyVertices);
        const input = document.getElementById('id_geom_geojson');
        if (input) input.value = geojson;
        _renderPoly(_polyVertices);
        // Render a solid fill polygon source instead of the preview line
        const fillGeojson = {
            type: 'Feature',
            geometry: {
                type: 'Polygon',
                coordinates: [_polyVertices.concat([_polyVertices[0]])],
            },
        };
        if (_locPickerMap.getSource('poly-preview')) {
            _locPickerMap.getSource('poly-preview').setData(fillGeojson);
        }
        _updatePolyUI(false);
        document.getElementById('polyPickerHint').textContent = '{% translate "Polygone enregistré. Cliquez sur « Dessiner » pour le redessiner." %}';
    }

    function _updatePolyUI(drawing) {
        document.getElementById('polyPickerDrawBtn')?.classList.toggle('d-none', drawing);
        document.getElementById('polyPickerFinishBtn')?.classList.toggle('d-none', !drawing);
        if (_locPickerMap) {
            _locPickerMap.getCanvas().style.cursor = drawing ? 'crosshair' : 'default';
        }
    }

    // ---- Show existing polygon on the map (edit mode) ----
    function _showExistingPolygon(geojsonStr) {
        if (!_locPickerMap || !geojsonStr) return;
        try {
            const geom = JSON.parse(geojsonStr);
            let coordinates = null;
            if (geom.type === 'Polygon') {
                coordinates = geom.coordinates[0];
            } else if (geom.type === 'MultiPolygon') {
                coordinates = geom.coordinates[0][0];
            }
            if (!coordinates) return;
            // Fly to centroid
            const lngs = coordinates.map(c => c[0]);
            const lats = coordinates.map(c => c[1]);
            const cx = (Math.min(...lngs) + Math.max(...lngs)) / 2;
            const cy = (Math.min(...lats) + Math.max(...lats)) / 2;
            _locPickerMap.flyTo({ center: [cx, cy], zoom: 14, duration: 600 });
            // Draw the polygon
            const feature = { type: 'Feature', geometry: geom.type === 'MultiPolygon' ? geom : { type: 'Polygon', coordinates: geom.coordinates } };
            if (_locPickerMap.getSource('poly-preview')) {
                _locPickerMap.getSource('poly-preview').setData(feature);
            } else {
                _locPickerMap.addSource('poly-preview', { type: 'geojson', data: feature });
                _locPickerMap.addLayer({ id: 'poly-preview-line', type: 'line', source: 'poly-preview', paint: { 'line-color': '#0d6efd', 'line-width': 2 } });
                _locPickerMap.addLayer({ id: 'poly-preview-fill', type: 'fill', source: 'poly-preview', paint: { 'fill-color': '#0d6efd', 'fill-opacity': 0.15 } });
            }
        } catch (err) {
            console.warn('Could not parse existing polygon geojson', err);
        }
    }

    function initLocationPickerMap() {
        // Destroy any existing instance before re-initialising (modal reopen)
        if (_locPickerMap) { _locPickerMap.remove(); _locPickerMap = null; _locPickerCtrl = null; }
        _polyDrawing = false; _polyVertices = []; _polyMarkers = [];

        const mapDiv = document.getElementById('locPickerMap');
        if (!mapDiv || typeof maplibregl === 'undefined') return;

        // ---- Polygon picker mode ----
        if (_isPolygonMode()) {
            const geomInput = document.getElementById('id_geom_geojson');
            const existingGeojson = geomInput?.value || '';

            let center = [4.3572, 50.8477];
            let zoom = 11;

            _locPickerMap = new maplibregl.Map({
                container: mapDiv,
                style    : window.MAP_STYLE_LIGHT,
                center, zoom,
                minZoom: 9, maxZoom: 24,
                cooperativeGestures: true,
            });

            _locPickerMap.on('load', () => {
                if (existingGeojson) {
                    _showExistingPolygon(existingGeojson);
                }
            });

            // Click → add vertex when drawing
            _locPickerMap.on('click', (e) => {
                if (!_polyDrawing) return;
                const { lng, lat } = e.lngLat;
                _polyVertices.push([lng, lat]);
                _addVertexMarker(lng, lat, _polyVertices.length - 1);
                _renderPoly(_polyVertices);
                document.getElementById('polyPickerHint').textContent = `{% translate "Sommets" %}: ${_polyVertices.length}. {% translate "Cliquez sur le premier sommet ou « Terminer » pour clore." %}`;
            });

            // Draw button
            document.getElementById('polyPickerDrawBtn')?.addEventListener('click', (e) => {
                e.preventDefault();
                _polyDrawing = true;
                _polyVertices = [];
                _clearPolyMarkers();
                // Clear the preview layer
                if (_locPickerMap.getSource('poly-preview')) {
                    _locPickerMap.getSource('poly-preview').setData({ type: 'Feature', geometry: { type: 'LineString', coordinates: [] } });
                }
                if (geomInput) geomInput.value = '';
                _updatePolyUI(true);
                document.getElementById('polyPickerHint').textContent = '{% translate "Cliquez sur la carte pour ajouter des sommets." %}';
            });

            // Finish button
            document.getElementById('polyPickerFinishBtn')?.addEventListener('click', (e) => {
                e.preventDefault();
                _finishPolygon();
            });

            // Clear button
            document.getElementById('polyPickerClearBtn')?.addEventListener('click', (e) => {
                e.preventDefault();
                _polyDrawing = false;
                _polyVertices = [];
                _clearPolyMarkers();
                if (geomInput) geomInput.value = '';
                if (_locPickerMap.getSource('poly-preview')) {
                    _locPickerMap.getSource('poly-preview').setData({ type: 'Feature', geometry: { type: 'LineString', coordinates: [] } });
                }
                _updatePolyUI(false);
                document.getElementById('polyPickerHint').textContent = '{% translate "Polygone effacé. Cliquez sur « Dessiner » pour en tracer un nouveau." %}';
                _locPickerMap.flyTo({ center: [4.3572, 50.8477], zoom: 11, duration: 800 });
            });

            return;  // polygon mode initialised — skip point-mode logic below
        }

        // ---- Point picker mode (default) ----
        if (typeof AddressSearchControl === 'undefined') return;

        const lonInput = document.getElementById('id_lon');
        const latInput = document.getElementById('id_lat');

        let center = [4.3572, 50.8477];
        let zoom = 11;
        if (lonInput?.value && latInput?.value) {
            center = [parseFloat(lonInput.value), parseFloat(latInput.value)];
            zoom = 17;
        }

        _locPickerMap = new maplibregl.Map({
            container : mapDiv,
            style     : window.MAP_STYLE_LIGHT,
            center, zoom,
            minZoom: 9, maxZoom: 24,
            cooperativeGestures: true,
        });

        // Address search control
        _locPickerCtrl = new AddressSearchControl({
            autocompleteUrl  : AUTOCOMPLETE_STREET_URL,
            lonInputId       : 'id_lon',
            latInputId       : 'id_lat',
        });
        _locPickerMap.addControl(_locPickerCtrl, 'top-left');

        _locPickerMap.on('load', () => {
            // Restore existing coordinates (edit mode)
            if (lonInput?.value && latInput?.value) {
                _locPickerCtrl.setMarker(parseFloat(lonInput.value), parseFloat(latInput.value), false);
            }
        });

        // Click on map → place marker
        _locPickerMap.on('click', (e) => {
            _locPickerCtrl.setMarker(e.lngLat.lng, e.lngLat.lat);
        });

        // Geolocation button
        document.getElementById('locPickerGeoBtn')?.addEventListener('click', (e) => {
            e.preventDefault();
            if (!navigator.geolocation) return;
            navigator.geolocation.getCurrentPosition(
                pos => _locPickerCtrl.setMarker(pos.coords.longitude, pos.coords.latitude),
                err  => console.warn('Geolocation error', err),
                { enableHighAccuracy: true, timeout: 10000 }
            );
        });

        // Clear marker button
        document.getElementById('locPickerClearBtn')?.addEventListener('click', (e) => {
            e.preventDefault();
            _locPickerCtrl.clearMarker();
            _locPickerMap.flyTo({ center: [4.3572, 50.8477], zoom: 11, duration: 800 });
        });
    }

    // ---- Helpers ----
    function getCsrfToken() {
        return document.querySelector('[name=csrfmiddlewaretoken]')?.value || '';
    }

    function showAlert(containerId, message, variant) {
        const el = document.getElementById(containerId);
        if (!el) return;
        el.className = `alert alert-${variant}`;
        el.textContent = message;
        el.classList.remove('d-none');
    }

    function clearAlert(containerId) {
        const el = document.getElementById(containerId);
        if (el) { el.classList.add('d-none'); el.textContent = ''; }
    }

    function setLoading(submitBtnId, spinnerId, loading) {
        const btn = document.getElementById(submitBtnId);
        const spinner = document.getElementById(spinnerId);
        if (btn) btn.disabled = loading;
        if (spinner) spinner.classList.toggle('d-none', !loading);
    }

    async function fetchFormHtml(url) {
        const resp = await fetch(url, { headers: { 'X-Requested-With': 'XMLHttpRequest' } });
        if (!resp.ok) throw new Error('HTTP ' + resp.status);
        const data = await resp.json();
        return data.html;
    }

    // ---- Edit ----
    document.addEventListener('click', async function (e) {
        const btn = e.target.closest('[data-location-edit]');
        if (!btn) return;
        const locationId = btn.dataset.locationEdit;
        const url = `/assets/locations/${THEMATIC}/${LOC_TYPE}/${locationId}/form/`;
        const formContainer = document.getElementById('locationEditFormFields');
        const form = document.getElementById('locationEditForm');
        clearAlert('locationEditAlert');
        formContainer.innerHTML = '<div class="text-center py-4"><div class="spinner-border text-primary" role="status"></div></div>';
        form.dataset.locationId = locationId;
        bootstrap.Modal.getOrCreateInstance(document.getElementById('locationEditModal')).show();
        try {
            formContainer.innerHTML = await fetchFormHtml(url);
            initLocationPickerMap();
            bootstrap.Modal.getInstance(document.getElementById('locationEditModal'))?.handleUpdate();
        } catch {
            formContainer.innerHTML = '';
            showAlert('locationEditAlert', '{% translate "Erreur lors du chargement du formulaire." %}', 'danger');
        }
    });

    document.getElementById('locationEditForm')?.addEventListener('submit', async function (e) {
        e.preventDefault();
        const locationId = this.dataset.locationId;
        if (!locationId) return;
        setLoading('locationEditSubmit', 'locationEditSpinner', true);
        clearAlert('locationEditAlert');
        const url = `/assets/locations/${THEMATIC}/${LOC_TYPE}/${locationId}/update/`;
        const formData = new FormData(this);
        try {
            const resp = await fetch(url, {
                method: 'POST',
                headers: { 'X-CSRFToken': getCsrfToken(), 'X-Requested-With': 'XMLHttpRequest' },
                body: formData,
            });
            const data = await resp.json();
            if (data.success) {
                bootstrap.Modal.getInstance(document.getElementById('locationEditModal'))?.hide();
                window.location.reload();
            } else {
                const errors = Object.values(data.errors || {}).flat().join(' ');
                showAlert('locationEditAlert', errors || '{% translate "Erreur lors de la sauvegarde." %}', 'danger');
            }
        } catch {
            showAlert('locationEditAlert', '{% translate "Erreur réseau." %}', 'danger');
        } finally {
            setLoading('locationEditSubmit', 'locationEditSpinner', false);
        }
    });

    // ---- Delete ----
    let pendingDeleteId = null;
    document.addEventListener('click', function (e) {
        const btn = e.target.closest('[data-location-delete]');
        if (!btn) return;
        pendingDeleteId = btn.dataset.locationDelete;
        bootstrap.Modal.getOrCreateInstance(document.getElementById('locationDeleteModal')).show();
    });

    document.getElementById('locationDeleteConfirm')?.addEventListener('click', async function () {
        if (!pendingDeleteId) return;
        const spinner = document.getElementById('locationDeleteSpinner');
        this.disabled = true;
        spinner?.classList.remove('d-none');
        const url = `/assets/locations/${THEMATIC}/${LOC_TYPE}/${pendingDeleteId}/delete/`;
        try {
            const resp = await fetch(url, {
                method: 'POST',
                headers: { 'X-CSRFToken': getCsrfToken(), 'X-Requested-With': 'XMLHttpRequest' },
            });
            const data = await resp.json();
            if (data.success) {
                window.location.href = data.redirect_url || '/';
            }
        } catch (err) {
            console.error(err);
        } finally {
            this.disabled = false;
            spinner?.classList.add('d-none');
        }
    });

    // ---- Create ----
    document.addEventListener('click', async function (e) {
        const btn = e.target.closest('[data-location-create]');
        if (!btn) return;
        const url = `/assets/locations/${THEMATIC}/${LOC_TYPE}/form/`;
        const formContainer = document.getElementById('locationCreateFormFields');
        clearAlert('locationCreateAlert');
        formContainer.innerHTML = '<div class="text-center py-4"><div class="spinner-border text-primary" role="status"></div></div>';
        bootstrap.Modal.getOrCreateInstance(document.getElementById('locationCreateModal')).show();
        try {
            formContainer.innerHTML = await fetchFormHtml(url);
            initLocationPickerMap();
            bootstrap.Modal.getInstance(document.getElementById('locationCreateModal'))?.handleUpdate();
        } catch {
            formContainer.innerHTML = '';
            showAlert('locationCreateAlert', '{% translate "Erreur lors du chargement du formulaire." %}', 'danger');
        }
    });

    document.getElementById('locationCreateForm')?.addEventListener('submit', async function (e) {
        e.preventDefault();
        setLoading('locationCreateSubmit', 'locationCreateSpinner', true);
        clearAlert('locationCreateAlert');
        const url = `/assets/locations/${THEMATIC}/${LOC_TYPE}/create/`;
        const formData = new FormData(this);
        try {
            const resp = await fetch(url, {
                method: 'POST',
                headers: { 'X-CSRFToken': getCsrfToken(), 'X-Requested-With': 'XMLHttpRequest' },
                body: formData,
            });
            const data = await resp.json();
            if (data.success) {
                bootstrap.Modal.getInstance(document.getElementById('locationCreateModal'))?.hide();
                if (data.redirect_url) {
                    window.location.href = data.redirect_url;
                } else {
                    window.location.reload();
                }
            } else {
                const errors = Object.values(data.errors || {}).flat().join(' ');
                showAlert('locationCreateAlert', errors || '{% translate "Erreur lors de la création." %}', 'danger');
            }
        } catch {
            showAlert('locationCreateAlert', '{% translate "Erreur réseau." %}', 'danger');
        } finally {
            setLoading('locationCreateSubmit', 'locationCreateSpinner', false);
        }
    });
})();
</script>