{% load static %}
{% load i18n %}

{# ──────────────────────────────────────────────────────────────────────── #}
{# Shared scripts — included by both intervention_add.html (desktop)      #}
{# and intervention_add_mobile.html (mobile).                             #}
{# Prerequisites (loaded by parent template / base):                      #}
{#   - jQuery, MapLibre GL JS, javascript-catalog                         #}
{# Expected context: thematic, symptoms_data, source_categories_data      #}
{# ──────────────────────────────────────────────────────────────────────── #}

<script>
    {# Configuration variables expected by intervention_add.js #}
    const thematic = '{{ thematic.code }}';
    const symptomsData = {{ symptoms_data|safe }};
    const sourceCategoriesData = {{ source_categories_data|safe }};
    const autocomplete_street_url = "{% url 'common:autocomplete_street' %}";
    var autocomplete_locations_url = "{% url 'assets:locations_autocomplete' %}?thematic={{ thematic.code }}{% if inspection_config %}&prioritize={% if inspection_config.default_category %}{{ inspection_config.default_category.code|lower }}{% else %}giep{% endif %}{% endif %}";
    var regional_roads_url = '{% url "common:get_regional_roads_geojson" %}';
    var intervention_subcategories_url = "{% url 'interventions:ajax_get_subcategories' %}";
    var check_assets_locations_status_url = "{% url 'interventions:check_assets_locations_status' %}";
    var initialIntervSubCategoryId = {{ initial_interv_sub_category_id|default:"null" }};
    var inspectionConfigName = {% if inspection_config %}"{{ inspection_config.name|escapejs }}"{% else %}null{% endif %};
    var inspectionConfigId = {% if inspection_config %}{{ inspection_config.id }}{% else %}null{% endif %};
    var structureLocationCtId = {{ structure_location_ct_id|default:"null" }};
    var trafficLightIntersectionCtId = {{ traffic_light_intersection_ct_id|default:"null" }};
    var controlCenterLocationCtId = {{ control_center_location_ct_id|default:"null" }};

    {# Per-thematic autocomplete URL for equipment #}
    {% if thematic.code == 'structures' %}
        var autocomplete_assets_url = "{% url 'assets:structures_autocomplete_assets' %}";
    {% elif thematic.code == 'trafficlights' %}
        var autocomplete_assets_url = "{% url 'assets:trafficlights_autocomplete_assets' %}";
    {% elif thematic.code == 'publiclighting' %}
        var autocomplete_assets_url = "{% url 'assets:publiclighting_autocomplete_assets' %}";
    {% elif thematic.code == 'nature' %}
        var autocomplete_assets_url = "{% url 'assets:nature_autocomplete_assets' %}";
    {% elif thematic.code == 'water' %}
        var autocomplete_assets_url = "{% url 'assets:water_autocomplete_assets' %}";
    {% elif thematic.code == 'artworks' %}
        var autocomplete_assets_url = "{% url 'assets:artworks_autocomplete_assets' %}";
    {% elif thematic.code == 'controlcenters' %}
        var autocomplete_assets_url = "{% url 'assets:controlcenters_autocomplete_assets' %}";
    {% elif thematic.code == 'roads' %}
        var autocomplete_assets_url = "{% url 'assets:roads_autocomplete_assets' %}";
    {% elif thematic.code == 'sign' %}
        var autocomplete_assets_url = "{% url 'assets:sign_autocomplete_assets' %}";
    {% elif thematic.code == 'its' %}
        var autocomplete_assets_url = "{% url 'assets:its_autocomplete_assets' %}";
    {% elif thematic.code == 'clean' %}
        var autocomplete_assets_url = "{% url 'assets:clean_autocomplete_assets' %}";
    {% else %}
        var autocomplete_assets_url = null;
    {% endif %}
</script>

<!-- intervention_add.js (split) -->
<script src="{% static 'interventions/add/map.js' %}"></script>
<script src="{% static 'interventions/add/source.js' %}"></script>
<script src="{% static 'interventions/add/assets_table_commented.js' %}"></script>
<script src="{% static 'interventions/add/categories.js' %}"></script>
<script src="{% static 'interventions/add/title.js' %}"></script>
<script src="{% static 'interventions/add/autocomplete.js' %}"></script>
<script src="{% static 'interventions/add/documents.js' %}"></script>
<script src="{% static 'interventions/add/validation.js' %}"></script>
<script src="{% static 'interventions/add/linked_interventions.js' %}"></script>
<!-- jQuery UI 1.14.1 (local) -->
<script src="{% static 'common/jquery-ui.min.js' %}"></script>

<!-- Per-thematic map layers -->
{% if thematic.code == 'structures' %}
<script>
    const setupStructures = async () => {
        if (map.getSource('structures')) return;
        const structures_layer_def = {
            'id': 'structures',
            'type': 'fill',
            'source': 'structures',
            'paint': {
                'fill-color': '#0094ff',
                'fill-opacity': 0.7,
                'fill-outline-color': '#0094aa'
            }
        };
        const structures_label_def = {
            'id': 'structure-labels',
            'type': 'symbol',
            'source': 'structures',
            'layout': {
                'text-field': ['get', 'code'],
                'text-font': ['Noto Sans Regular'],
                'text-size': 12,
                'text-offset': [0, 1.2],
                'text-anchor': 'top'
            },
            'paint': {
                'text-color': '#0094ff',
                'text-halo-color': '#ffffff',
                'text-halo-width': 1.5
            },
            'minzoom': 13,
        };
        map.addSource('structures', {
            'type': 'geojson',
            'data': window.location.origin + '/assets/structures/locations/geojson/'
        });
        map.addLayer(structures_layer_def);
        map.addLayer(structures_label_def);
    };

    if (map.loaded()) {
        setupStructures();
    } else {
        map.on('load', setupStructures);
    }
</script>

{% elif thematic.code == 'trafficlights' %}
<script>
    const setupTrafficLights = async () => {
        if (map.getSource('traffic-lights')) return;
        const intersections_layer_def = {
            'id': 'traffic-lights',
            'type': 'circle',
            'source': 'traffic-lights',
            'paint': {
                'circle-radius': [
                    'interpolate',
                    ['linear'],
                    ['zoom'],
                    10, 1,
                    17, 25
                ],
                'circle-color': [
                    'match', ['get', 'status'],
                    'active', '#0094ff',
                    'in_preparation', '#f59f00',
                    'under_repair', '#f76707',
                    'voluntarily_out_of_service', '#e03131',
                    'inactive', '#e03131',
                    'archived', '#6c757d',
                    '#6c757d'
                ],
                'circle-opacity': 0.7
            }
        }
        const intersections_label_def = {
            'id': 'traffic-light-labels',
            'type': 'symbol',
            'source': 'traffic-lights',
            'layout': {
                'text-field': ['get', 'code'],
                'text-font': ['Noto Sans Regular'],
                'text-size': 12,
                'text-offset': [0, 1.2],
                'text-anchor': 'top'
            },
            'paint': {
                'text-color': '#0094ff',
                'text-halo-color': '#ffffff',
                'text-halo-width': 1.5
            },
            'minzoom': 13,
        };
        map.addSource('traffic-lights', {
            'type': 'geojson',
            'data': window.location.origin + '/assets/trafficlights/intersections/geojson/'
        });
        map.addLayer(intersections_layer_def);
        map.addLayer(intersections_label_def);
    };

    if (map.loaded()) {
        setupTrafficLights();
    } else {
        map.on('load', setupTrafficLights);
    }
</script>

{% elif thematic.code == 'controlcenters' %}
<script>
    const setupControlCenters = async () => {
        if (map.getSource('controlcenters')) return;
        const controlcenters_layer_def = {
            'id': 'controlcenters',
            'type': 'fill',
            'source': 'controlcenters',
            'paint': {
                'fill-color': '#0094ff',
                'fill-opacity': 0.7,
                'fill-outline-color': '#0094aa'
            }
        };
        const controlcenters_label_def = {
            'id': 'controlcenter-labels',
            'type': 'symbol',
            'source': 'controlcenters',
            'layout': {
                'text-field': ['get', 'code'],
                'text-font': ['Noto Sans Regular'],
                'text-size': 12,
                'text-offset': [0, 1.2],
                'text-anchor': 'top'
            },
            'paint': {
                'text-color': '#0094ff',
                'text-halo-color': '#ffffff',
                'text-halo-width': 1.5
            },
            'minzoom': 13,
        };
        map.addSource('controlcenters', {
            'type': 'geojson',
            'data': window.location.origin + '/assets/controlcenters/locations/geojson/'
        });
        map.addLayer(controlcenters_layer_def);
        map.addLayer(controlcenters_label_def);
    };

    if (map.loaded()) {
        setupControlCenters();
    } else {
        map.on('load', setupControlCenters);
    }
</script>

{% elif thematic.code == 'artworks' %}
<script>
    const setupArtworks = async () => {
        if (map.getSource('fountains')) return;
        const fountains_layer_def = {
            'id': 'fountains',
            'type': 'circle',
            'source': 'fountains',
            'paint': {
                'circle-radius': [
                    'interpolate',
                    ['linear'],
                    ['zoom'],
                    10, 1,
                    17, 25
                ],
                'circle-color': '#0000aa',
                'circle-opacity': 0.7
            }
        }
        const fountains_label_def = {
            'id': 'fountains-labels',
            'type': 'symbol',
            'source': 'fountains',
            'layout': {
                'text-field': ['get', 'name_fr'],
                'text-font': ['Noto Sans Regular'],
                'text-size': 12,
                'text-offset': [0, 1.2],
                'text-anchor': 'top'
            },
            'paint': {
                'text-color': '#0094ff',
                'text-halo-color': '#ffffff',
                'text-halo-width': 1.5
            },
            'minzoom': 13,
        };
        map.addSource('fountains', {
            'type': 'geojson',
            'data': window.location.origin + '/assets/artworks/fountains/geojson/'
        });
        map.addLayer(fountains_layer_def);
        map.addLayer(fountains_label_def);

        const monuments_layer_def = {
            'id': 'monuments',
            'type': 'circle',
            'source': 'monuments',
            'paint': {
                'circle-radius': [
                    'interpolate',
                    ['linear'],
                    ['zoom'],
                    10, 1,
                    17, 25
                ],
                'circle-color': '#f24141',
                'circle-opacity': 0.7
            }
        }
        const monuments_label_def = {
            'id': 'monuments-labels',
            'type': 'symbol',
            'source': 'monuments',
            'layout': {
                'text-field': ['get', 'name_fr'],
                'text-font': ['Noto Sans Regular'],
                'text-size': 12,
                'text-offset': [0, 1.2],
                'text-anchor': 'top'
            },
            'paint': {
                'text-color': '#f24141',
                'text-halo-color': '#ffffff',
                'text-halo-width': 1.5
            },
            'minzoom': 13,
        };
        map.addSource('monuments', {
            'type': 'geojson',
            'data': window.location.origin + '/assets/artworks/monuments/geojson/'
        });
        map.addLayer(monuments_layer_def);
        map.addLayer(monuments_label_def);
    };

    if (map.loaded()) {
        setupArtworks();
    } else {
        map.on('load', setupArtworks);
    }
</script>
{% endif %}

<script>
// Contrôle photo aérienne (LayerSwitcherControl)
if (typeof LayerSwitcherControl !== 'undefined') {
    const layerSwitcher = new LayerSwitcherControl({
        layers: [
            {
                id: 'ortho',
                name: 'Orthophotos',
                icon: 'satellite',
                group: 'ortho',
                layer: {
                    type: 'raster',
                    paint: { 'raster-opacity': 1 }
                },
                sublayers: [
                    {
                        id: 'urbis',
                        name: window.MAP_ORTHO_WMS_NAME || 'Urbis (Bruxelles)',
                        default: true,
                        source: {
                            type: 'raster',
                            tiles: [
                                window.MAP_ORTHO_WMS_URL || 'https://geoservices-urbis.irisnet.be/geoserver/urbisgrid/wms?service=WMS&version=1.3.0&request=GetMap&layers=Ortho&styles=&format=image/png&transparent=true&width=256&height=256&crs=EPSG:3857&bbox={bbox-epsg-3857}'
                            ],
                            tileSize: 256,
                            attribution: window.MAP_ORTHO_WMS_ATTRIBUTION || '© Brussels UrbIS'
                        }
                    },
                    {
                        id: 'vlaanderen',
                        name: 'Vlaanderen 2023',
                        source: {
                            type: 'raster',
                            tiles: [
                                'https://geo.api.vlaanderen.be/OMW/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=omwrgb23vl&STYLE=&FORMAT=image/png&TILEMATRIXSET=GoogleMapsVL&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}'
                            ],
                            tileSize: 256,
                            attribution: '© Digitaal Vlaanderen - Orthofoto 2023'
                        }
                    }
                ]
            }
        ]
    });
    map.addControl(layerSwitcher, 'top-left');
}
</script>

{% if inspection_config %}
<script>
    const setupInspectionZones = async () => {
        const geojsonUrl = "{% url 'interventions:inspection_configuration_geojson' inspection_config.id %}";
        
        // Prevent duplicate source/layers addition
        if (map.getSource('inspection-zones')) {
            return;
        }

        try {
            const response = await fetch(geojsonUrl);
            const data = await response.json();

            // Generate centroid point features to ensure they are visible when zoomed out
            if (data.features) {
                const centroidFeatures = [];
                data.features.forEach(feat => {
                    if (feat.properties && feat.properties.lon && feat.properties.lat) {
                        centroidFeatures.push({
                            'type': 'Feature',
                            'geometry': {
                                'type': 'Point',
                                'coordinates': [parseFloat(feat.properties.lon), parseFloat(feat.properties.lat)]
                            },
                            'properties': {
                                ...feat.properties,
                                'is_centroid': true
                            }
                        });
                    }
                });
                data.features = data.features.concat(centroidFeatures);
            }

            map.addSource('inspection-zones', {
                'type': 'geojson',
                'data': data,
                'tolerance': 0,
                'buffer': 256,
                'maxzoom': 16
            });

            // 1. Layer for polygons/multipolygons (fill)
            map.addLayer({
                'id': 'inspection-zones-fill',
                'type': 'fill',
                'source': 'inspection-zones',
                'filter': [
                    'all',
                    ['!=', ['get', 'is_centroid'], true],
                    ['any', ['==', ['geometry-type'], 'Polygon'], ['==', ['geometry-type'], 'MultiPolygon']]
                ],
                'paint': {
                    'fill-color': '#2e7d32',
                    'fill-opacity': 0.4,
                    'fill-outline-color': '#1b5e20'
                }
            });

            // 2. Layer for outlines (line)
            map.addLayer({
                'id': 'inspection-zones-line',
                'type': 'line',
                'source': 'inspection-zones',
                'filter': [
                    'all',
                    ['!=', ['get', 'is_centroid'], true],
                    ['any', ['==', ['geometry-type'], 'Polygon'], ['==', ['geometry-type'], 'MultiPolygon']]
                ],
                'paint': {
                    'line-color': '#1b5e20',
                    'line-width': 3,
                    'line-opacity': 0.7
                }
            });

            // 3. Layer for centroids (circle)
            map.addLayer({
                'id': 'inspection-zones-circle',
                'type': 'circle',
                'source': 'inspection-zones',
                'filter': ['==', ['get', 'is_centroid'], true],
                'paint': {
                    'circle-radius': 7,
                    'circle-color': '#2e7d32',
                    'circle-stroke-width': 2,
                    'circle-stroke-color': '#ffffff',
                    'circle-opacity': 0.95
                }
            });

            // 4. Labels for zones/elements (placed below the circle markers)
            map.addLayer({
                'id': 'inspection-zones-labels',
                'type': 'symbol',
                'source': 'inspection-zones',
                'filter': ['==', ['get', 'is_centroid'], true],
                'layout': {
                    'text-field': ['get', 'code'],
                    'text-font': ['Noto Sans Regular'],
                    'text-size': 11,
                    'text-offset': [0, 1.5],
                    'text-anchor': 'top',
                    'text-allow-overlap': true,
                    'text-ignore-placement': true
                },
                'paint': {
                    'text-color': '#1b5e20',
                    'text-halo-color': '#ffffff',
                    'text-halo-width': 2
                }
            });

            // Fit map bounds to show all elements
            if (data.features && data.features.length > 0) {
                const bounds = new maplibregl.LngLatBounds();
                data.features.forEach(feature => {
                    if (feature.geometry.type === 'Point') {
                        bounds.extend(feature.geometry.coordinates);
                    } else if (feature.geometry.type === 'Polygon') {
                        feature.geometry.coordinates[0].forEach(coord => {
                            bounds.extend(coord);
                        });
                    } else if (feature.geometry.type === 'MultiPolygon') {
                        feature.geometry.coordinates.forEach(poly => {
                            poly[0].forEach(coord => {
                                bounds.extend(coord);
                            });
                        });
                    } else if (feature.geometry.type === 'LineString') {
                        feature.geometry.coordinates.forEach(coord => {
                            bounds.extend(coord);
                        });
                    }
                });
                map.fitBounds(bounds, { padding: 50, maxZoom: 17 });
            }
        } catch (e) {
            console.error("Error loading bounds for inspection zones:", e);
        }
    };

    if (map.loaded()) {
        setupInspectionZones();
    } else {
        map.on('load', setupInspectionZones);
    }
</script>
{% endif %}

{% if form.status %}
<script>
document.addEventListener("DOMContentLoaded", function() {
    const statusField = document.getElementById("id_status");
    const container = document.getElementById("status-badges-container");
    if (!statusField || !container) return;

    const colors = {
        'in_preparation':  '#6c757d',
        'to_be_approved':  '#ffc107',
        'to_be_planned':   '#ffc107',
        'to_be_processed': '#dc3545',
        'assigned':        '#fd7e14'
    };

    const darkText = new Set(['to_be_approved', 'to_be_planned', 'assigned']);

    const buttons = container.querySelectorAll(".status-badge-btn");

    function updateStyles() {
        const currentVal = statusField.value || "to_be_processed"; // fallback
        buttons.forEach(btn => {
            const status = btn.getAttribute("data-status");
            const color = colors[status] || "#6c757d";
            const isDark = darkText.has(status);

            if (status === currentVal) {
                // Selected state: filled background with glow and bold text
                btn.style.backgroundColor = color;
                btn.style.borderColor = color;
                btn.style.color = isDark ? "#000000" : "#ffffff";
                btn.style.opacity = "1";
                btn.style.boxShadow = `0 4px 10px ${color}40, 0 0 4px ${color}`;
                btn.style.transform = "scale(1.05)";
            } else {
                // Unselected state: outlined and muted
                btn.style.backgroundColor = "transparent";
                btn.style.borderColor = color;
                btn.style.color = color;
                btn.style.opacity = "0.55";
                btn.style.boxShadow = "none";
                btn.style.transform = "scale(1.0)";
            }
        });
    }

    buttons.forEach(btn => {
        btn.addEventListener("click", function() {
            statusField.value = this.getAttribute("data-status");
            updateStyles();
        });
        
        // Hover effects
        btn.addEventListener("mouseenter", function() {
            const status = this.getAttribute("data-status");
            if (statusField.value !== status) {
                this.style.opacity = "0.85";
                this.style.transform = "scale(1.02)";
            }
        });
        btn.addEventListener("mouseleave", function() {
            const status = this.getAttribute("data-status");
            if (statusField.value !== status) {
                this.style.opacity = "0.55";
                this.style.transform = "scale(1.0)";
            }
        });
    });

    // Initialize style
    updateStyles();
    
    // Listen for changes to the status input (e.g. if set by other JS scripts)
    statusField.addEventListener("change", updateStyles);
});
</script>
{% endif %}