{% extends "mobile/mobile_base.html" %}
{% load static %}
{% load i18n %}

{% block extra_head %}
<!-- MapLibre GL -->
<link href="{% static 'common/maplibre-gl.css' %}" rel="stylesheet">
<link href="{% static 'controls/controls_index_mobile.css' %}" rel="stylesheet">
{% endblock extra_head %}

{% block title %}
    {% translate "Contrôles" %}
{% endblock title %}

{% block content %}

<!-- Filters -->
<form method="get" class="d-flex flex-column gap-2 mb-3">
    {% if is_add_control_allowed %}
    <!-- Add control button -->
    <div class="d-grid mb-2">
        <a href="{% url 'controls:controls_add' %}?v=mobile" class="btn btn-primary">
            <i class="bi bi-plus-circle me-1"></i> {% translate "Ajouter un contrôle" %}
        </a>
    </div>
    {% endif %}

    <!-- Filter buttons -->
    <div class="d-flex justify-content-between align-items-center mb-1">
        <div class="form-check m-0">
            <input
                type="checkbox"
                class="form-check-input"
                name="mine"
                id="filter-mine"
                value="1"
                {% if show_mine_only %}checked{% endif %}
                data-autosubmit
            >
            <label class="form-check-label" for="filter-mine">
                <i class="bi bi-person me-1"></i> {% translate "Mes contrôles" %}
            </label>
        </div>
        <div class="d-flex align-items-center gap-2">
            {% if type_filters %}
            <button id="toggle-type-filter"
                    class="btn btn-outline-secondary btn-sm"
                    type="button"
                    aria-expanded="false"
                    aria-controls="typeFilterPanel"
                    title="{% translate 'Filtrer par type' %}">
                <i class="bi bi-tag"></i>
                <span id="typeCountBadge" class="badge text-bg-primary ms-1 d-none">0</span>
            </button>
            {% endif %}
            {% if status_filters %}
            <button id="toggle-status-filter"
                    class="btn btn-outline-secondary btn-sm"
                    type="button"
                    aria-expanded="false"
                    aria-controls="statusFilterPanel"
                    title="{% translate 'Filtrer par statut' %}">
                <i class="bi bi-funnel"></i>
                <span id="statusCountBadge" class="badge text-bg-primary ms-1 d-none">0</span>
            </button>
            {% endif %}
        </div>
    </div>

    <!-- Type filter panel -->
    {% if type_filters %}
    <div id="typeFilterPanel" class="collapse mb-2">
        <p class="mb-1 fw-semibold small text-uppercase text-muted">{% translate "Types de contrôle" %}</p>
        <div class="d-flex flex-wrap gap-2">
            {% for type in type_filters %}
            {% with field_id="type-filter-"|add:type.key %}
            <input
                type="checkbox"
                class="btn-check"
                name="type"
                id="{{ field_id }}"
                value="{{ type.key }}"
                {% if type.checked %}checked{% endif %}
                data-type-filter
                autocomplete="off"
            >
            <label class="btn btn-outline-type btn-outline-type-{{ type.key }} btn-sm" for="{{ field_id }}">
                {% if type.icon %}<i class="bi {{ type.icon }} me-1"></i>{% endif %}{{ type.label }}
            </label>
            {% endwith %}
            {% endfor %}
        </div>
    </div>
    {% endif %}

    <!-- Status filter panel -->
    {% if status_filters %}
    <div id="statusFilterPanel" class="collapse mb-2">
        <p class="mb-1 fw-semibold small text-uppercase text-muted">{% translate "Statuts" %}</p>
        <div class="d-flex flex-wrap gap-2">
            {% for status in status_filters %}
            {% with field_id="status-filter-"|add:status.key %}
            <input
                type="checkbox"
                class="btn-check"
                name="status"
                id="{{ field_id }}"
                value="{{ status.key }}"
                {% if status.checked %}checked{% endif %}
                data-status-filter
                autocomplete="off"
            >
            <label class="btn btn-outline-status btn-outline-status-{{ status.key }} btn-sm" for="{{ field_id }}">
                {{ status.label }}
            </label>
            {% endwith %}
            {% endfor %}
        </div>
    </div>
    {% endif %}

    <!-- Search field -->
    <div class="input-group">
        <button type="button" class="btn btn-outline-secondary" id="clearSearch" title="{% translate 'Effacer' %}" aria-label="{% translate 'Effacer la recherche' %}">
            <i class="bi bi-x"></i>
        </button>

        <input
            type="text"
            name="q"
            id="searchInput"
            class="form-control"
            placeholder="{% translate 'Rechercher un contrôle…' %}"
            value="{{ search_query }}"
        >

        <button type="submit" class="btn btn-primary" title="{% translate 'Rechercher' %}">
            <i class="bi bi-search"></i>
        </button>
    </div>
</form>

<!-- Bouton flottant carte -->
<button id="map-fab-btn" class="btn btn-primary" title="{% translate 'Voir la carte' %}" aria-label="{% translate 'Voir la carte' %}">
    <i class="bi bi-map fs-5"></i>
</button>

<!-- Overlay pleine page : carte -->
<div id="map-overlay" role="dialog" aria-modal="true" aria-label="{% translate 'Carte des contrôles' %}">
    <button id="map-close-btn" class="btn btn-primary shadow-sm" aria-label="{% translate 'Fermer la carte' %}">
        <i class="bi bi-x-lg"></i>
    </button>
    <div id="controls-map-mobile"></div>
</div>

<!-- Controls list -->
<div id="controls-list">
    <!-- Loading spinner -->
    <div id="loading-spinner" class="d-none">
        <div class="spinner-border text-primary" role="status">
            <span class="visually-hidden">{% translate "Chargement..." %}</span>
        </div>
    </div>
    <div id="controls-list-content">
        {% include 'controls/_controls_list_mobile.html' %}
    </div>
</div>

{% endblock content %}

{% block extra_scripts %}
<script>
document.addEventListener('DOMContentLoaded', function() {
    const form = document.querySelector('form[method="get"]');
    if (!form) return;

    const input = document.getElementById('searchInput');
    const clearBtn = document.getElementById('clearSearch');
    const listContainer = document.getElementById('controls-list');
    const listContent = document.getElementById('controls-list-content');
    const spinner = document.getElementById('loading-spinner');

    let submitTimer = null;
    const SUBMIT_DELAY = 250;
    let requestCounter = 0;

    function showSpinner() {
        if (spinner) spinner.classList.remove('d-none');
        if (listContainer) listContainer.classList.add('loading');
    }

    function hideSpinner() {
        if (spinner) spinner.classList.add('d-none');
        if (listContainer) listContainer.classList.remove('loading');
    }

    async function submitForm(preserveFocus) {
        const requestId = ++requestCounter;

        clearTimeout(submitTimer);
        submitTimer = setTimeout(async () => {
            showSpinner();

            const formData = new FormData(form);
            const params = new URLSearchParams();
            for (const [key, value] of formData.entries()) {
                if (value !== '') params.append(key, value);
            }

            const queryString = params.toString();
            const action = form.getAttribute('action') || window.location.pathname;
            const targetUrl = queryString ? `${action}?${queryString}` : action;

            try {
                const response = await fetch(targetUrl, {
                    method: 'GET',
                    headers: { 'X-Requested-With': 'XMLHttpRequest' },
                });
                if (!response.ok) throw new Error(`HTTP ${response.status}`);
                const payload = await response.json();
                if (requestId !== requestCounter) return;

                if (payload.html !== undefined && (listContent || listContainer)) {
                    if (listContent) {
                        listContent.innerHTML = payload.html;
                    } else {
                        listContainer.innerHTML = payload.html;
                    }
                    initCardsIfNeeded();
                }

                // Mettre à jour les marqueurs de la carte
                if (payload.markers !== undefined) {
                    document.dispatchEvent(new CustomEvent('controls-markers-updated', {
                        detail: { markers: payload.markers }
                    }));
                }

                const historyUrl = queryString ? `${window.location.pathname}?${queryString}` : window.location.pathname;
                window.history.replaceState(null, '', historyUrl);

                if (preserveFocus && input) {
                    input.focus({ preventScroll: true });
                    const len = input.value.length;
                    if (typeof input.setSelectionRange === 'function') input.setSelectionRange(len, len);
                }
            } catch (error) {
                console.error('AJAX error:', error);
                form.removeEventListener('submit', handleSubmit);
                form.submit();
            } finally {
                hideSpinner();
            }
        }, SUBMIT_DELAY);
    }

    async function handleSubmit(event) {
        event.preventDefault();
        const preserveFocus = !!input && (document.activeElement === input);
        await submitForm(preserveFocus);
    }

    form.addEventListener('submit', handleSubmit);

    if (clearBtn && input) {
        clearBtn.addEventListener('click', function() {
            input.value = '';
            submitForm(true);
        });
    }

    const autoSubmitTargets = form.querySelectorAll('[data-autosubmit]');
    autoSubmitTargets.forEach((el) => {
        el.addEventListener('change', () => submitForm(false));
    });

    if (input) {
        input.addEventListener('input', () => {
            const value = (input.value || '').trim();
            if (value.length === 0 || value.length >= 2) {
                submitForm(true);
            }
        });
    }

    // Persistence des filtres
    const STORAGE_KEY_TYPE = 'ctrl_typeFilterOpen';
    const STORAGE_KEY_STATUS = 'ctrl_statusFilterOpen';

    const typePanel = document.getElementById('typeFilterPanel');
    const typeBtn = document.getElementById('toggle-type-filter');
    const typeBadge = document.getElementById('typeCountBadge');
    const typeChecks = Array.from(form.querySelectorAll('input[data-type-filter]'));

    if (typePanel && typeBtn) {
        const typeCollapse = bootstrap.Collapse.getOrCreateInstance(typePanel, { toggle: false });

        if (sessionStorage.getItem(STORAGE_KEY_TYPE) === 'true') {
            typeCollapse.show();
        }

        typePanel.addEventListener('shown.bs.collapse', () => {
            typeBtn.setAttribute('aria-expanded', 'true');
            sessionStorage.setItem(STORAGE_KEY_TYPE, 'true');
        });
        typePanel.addEventListener('hidden.bs.collapse', () => {
            typeBtn.setAttribute('aria-expanded', 'false');
            sessionStorage.setItem(STORAGE_KEY_TYPE, 'false');
        });

        typeBtn.addEventListener('click', () => typeCollapse.toggle());
    }

    function updateTypeCountBadge() {
        const count = typeChecks.filter(c => c.checked).length;
        if (!typeBadge) return;
        if (count > 0) {
            typeBadge.textContent = count;
            typeBadge.classList.remove('d-none');
        } else {
            typeBadge.classList.add('d-none');
        }
    }

    typeChecks.forEach((checkbox) => {
        checkbox.addEventListener('change', () => {
            updateTypeCountBadge();
            submitForm(false);
        });
    });
    updateTypeCountBadge();

    const statusPanel = document.getElementById('statusFilterPanel');
    const statusBtn = document.getElementById('toggle-status-filter');
    const statusBadge = document.getElementById('statusCountBadge');
    const statusChecks = Array.from(form.querySelectorAll('input[data-status-filter]'));

    if (statusPanel && statusBtn) {
        const statusCollapse = bootstrap.Collapse.getOrCreateInstance(statusPanel, { toggle: false });

        if (sessionStorage.getItem(STORAGE_KEY_STATUS) === 'true') {
            statusCollapse.show();
        }

        statusPanel.addEventListener('shown.bs.collapse', () => {
            statusBtn.setAttribute('aria-expanded', 'true');
            sessionStorage.setItem(STORAGE_KEY_STATUS, 'true');
        });
        statusPanel.addEventListener('hidden.bs.collapse', () => {
            statusBtn.setAttribute('aria-expanded', 'false');
            sessionStorage.setItem(STORAGE_KEY_STATUS, 'false');
        });

        statusBtn.addEventListener('click', () => statusCollapse.toggle());
    }

    function updateStatusCountBadge() {
        const count = statusChecks.filter(c => c.checked).length;
        if (!statusBadge) return;
        if (count > 0) {
            statusBadge.textContent = count;
            statusBadge.classList.remove('d-none');
        } else {
            statusBadge.classList.add('d-none');
        }
    }

    statusChecks.forEach((checkbox) => {
        checkbox.addEventListener('change', () => {
            updateStatusCountBadge();
            submitForm(false);
        });
    });
    updateStatusCountBadge();

    function initCardsIfNeeded() {
        document.querySelectorAll('.control-card[data-href]').forEach(card => {
            if (card._clickInitDone) return;
            card._clickInitDone = true;
            card.addEventListener('click', e => {
                if (e.target.closest('a, button, input, label, .form-check')) return;
                window.location.href = card.dataset.href;
            });
        });
    }
    initCardsIfNeeded();
});
</script>

<!-- MapLibre GL JS -->
<script src="{% static 'common/maplibre-gl.js' %}"></script>
<script>
(function () {
    let currentMarkers = {{ markers_json|safe }};
    let map = null;
    let fitOnOpen = true;
    const SOURCE_ID = 'controls-points';
    const LAYER_ID  = 'controls-circles';

    function toGeoJSON(markersData) {
        return {
            type: 'FeatureCollection',
            features: markersData.map(m => ({
                type: 'Feature',
                geometry: { type: 'Point', coordinates: [m.lon, m.lat] },
                properties: {
                    id:                 m.id,
                    code:               m.code,
                    description:        m.description,
                    status:             m.status,
                    status_label:       m.status_label,
                    status_badge:       m.status_badge,
                    status_color:       m.status_color,
                    control_type:       m.control_type,
                    control_type_label: m.control_type_label,
                    location:           m.location,
                    project_name:       m.project_name,
                    author:             m.author,
                    remarks_count:      m.remarks_count,
                    url:                m.url,
                    fill:               m.status_color || '#6c757d',
                },
            })),
        };
    }

    function buildPopupHtml(features) {
        return features.map((f, idx) => {
            const p = f.properties;
            const sep = idx > 0 ? '<hr style="margin:5px 0">' : '';
            return `${sep}
                <div style="margin:2px 0; font-size:0.85rem;">
                    <strong><a href="${p.url}">${p.code}</a></strong>
                    <div class="d-flex flex-wrap gap-1 my-1">
                        <span class="badge text-bg-${p.status_badge || 'secondary'}">${p.status_label}</span>
                        <span class="badge bg-light text-dark border">${p.control_type_label}</span>
                    </div>
                    ${p.description ? `<div style="color:#555;margin-top:2px">${p.description}</div>` : ''}
                    ${p.location ? `<div class="text-muted small mt-1"><i class="bi bi-geo-alt me-1"></i>${p.location}</div>` : ''}
                    ${p.project_name ? `<div class="text-muted small"><i class="bi bi-folder me-1"></i>${p.project_name}</div>` : ''}
                </div>`;
        }).join('');
    }

    function updateSource(markersData) {
        if (!map) return;
        const src = map.getSource(SOURCE_ID);
        if (src) src.setData(toGeoJSON(markersData));
    }

    function initMap() {
        if (map) return;
        map = new maplibregl.Map({
            container: 'controls-map-mobile',
            style: window.MAP_STYLE_LIGHT || 'https://basemaps.cartocdn.com/gl/positron-gl-style/style.json',
            center: [4.35, 50.85],
            zoom: 12,
        });

        map.addControl(new maplibregl.NavigationControl(), 'top-right');
        map.addControl(new maplibregl.GeolocateControl({
            positionOptions: { enableHighAccuracy: true },
            trackUserLocation: false,
        }), 'top-right');

        map.on('load', function () {
            map.addSource(SOURCE_ID, {
                type: 'geojson',
                data: toGeoJSON(currentMarkers),
            });

            map.addLayer({
                id: LAYER_ID,
                type: 'circle',
                source: SOURCE_ID,
                paint: {
                    'circle-radius': ['interpolate', ['linear'], ['zoom'], 10, 5, 14, 9, 18, 14],
                    'circle-color': ['get', 'fill'],
                    'circle-stroke-width': 1.5,
                    'circle-stroke-color': '#fff',
                    'circle-opacity': 0.9,
                },
            });

            map.on('click', LAYER_ID, function (e) {
                const features = e.features;
                if (!features || !features.length) return;
                new maplibregl.Popup()
                    .setLngLat(e.lngLat)
                    .setHTML(buildPopupHtml(features))
                    .addTo(map);
            });

            if (fitOnOpen) fitBounds();
        });
    }

    function fitBounds() {
        if (!map || !currentMarkers.length) return;
        const bounds = new maplibregl.LngLatBounds();
        currentMarkers.forEach(m => bounds.extend([m.lon, m.lat]));
        if (!bounds.isEmpty()) {
            map.fitBounds(bounds, { padding: 40, maxZoom: 16 });
        }
    }

    const overlay = document.getElementById('map-overlay');
    const fabBtn = document.getElementById('map-fab-btn');
    const closeBtn = document.getElementById('map-close-btn');

    if (fabBtn && overlay) {
        fabBtn.addEventListener('click', function () {
            overlay.classList.add('active');
            if (!map) {
                initMap();
            } else {
                map.resize();
                if (fitOnOpen) fitBounds();
            }
        });
    }

    if (closeBtn && overlay) {
        closeBtn.addEventListener('click', function () {
            overlay.classList.remove('active');
        });
    }

    document.addEventListener('controls-markers-updated', function (e) {
        currentMarkers = e.detail.markers || [];
        updateSource(currentMarkers);
        fitOnOpen = true;
    });
})();
</script>
{% endblock extra_scripts %}