{% extends "reporting/base.html" %}
{% load i18n %}
{% load static %}

{% block head %}
<!-- ECharts 5.6 -->
<script src="https://cdn.jsdelivr.net/npm/echarts@5.6.0/dist/echarts.min.js"></script>
<!-- MapLibre GL -->
<link href="{% static 'common/maplibre-gl.css' %}" rel="stylesheet">
<script src="{% static 'common/maplibre-gl.js' %}"></script>
<style>
  #reporting-chart { width: 100%; height: 420px; }
  #volume-map { width: 100%; height: 420px; border-radius: 8px; border: 1px solid #dee2e6; }
  .filter-bar { background: #f8f9fa; border-radius: 8px; padding: 1rem 1.25rem; margin-bottom: 1.25rem; }
  .filter-bar .form-label { font-size: .82rem; font-weight: 600; color: #495057; margin-bottom: .25rem; }
  .kpi-card { border-left: 4px solid; border-radius: 6px; padding: .75rem 1rem; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.08); }
  .kpi-card .kpi-value { font-size: 1.6rem; font-weight: 700; }
  .kpi-card .kpi-label { font-size: .78rem; color: #6c757d; }
  .kpi-card.interactive { cursor: pointer; transition: transform 0.2s, box-shadow 0.2s, background-color 0.2s; }
  .kpi-card.interactive:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.12); background-color: #f8f9fa; }
  
  /* Modern styling for the grouping segment controls */
  .btn-group-segment .btn {
    font-size: 0.8rem;
    font-weight: 600;
    padding: 0.35rem 0.75rem;
  }
  
  /* Map Popup style adjustments */
  .maplibregl-popup-content {
    font-family: var(--bs-body-font-family), sans-serif;
    font-size: 0.82rem;
    padding: 12px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.15);
  }

  /* Premium styles for multiple selects */
  .filter-bar select[multiple] {
    height: 105px;
    border-radius: 6px;
    border: 1px solid #ced4da;
    padding: 0.35rem 0.5rem;
    background-color: #ffffff;
    font-size: 0.8rem;
    color: #495057;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  }
  
  .filter-bar select[multiple]:focus {
    border-color: #86b7fe;
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.15);
  }

  .filter-bar select[multiple] option {
    padding: 5px 8px;
    margin-bottom: 2px;
    border-radius: 4px;
    font-weight: 500;
    transition: background-color 0.15s ease, color 0.15s ease;
  }

  /* Soft and modern highlight color when checked */
  .filter-bar select[multiple] option:checked {
    background-color: #e7f1ff !important;
    color: #0d6efd !important;
  }
</style>
{% endblock %}

{% block content %}
<div class="container-fluid py-3">

  <!-- Header -->
  <div class="d-flex align-items-center justify-content-between mb-3">
    <h4 class="fw-bold text-dark mb-0">
      <i class="bi bi-bar-chart-line text-primary me-2"></i>
      {% translate "Nombre et répartition des interventions" %}
    </h4>
  </div>

  <!-- Filter bar -->
  <div class="card shadow-sm mb-4">
    <div class="card-body py-3">
      <div class="filter-bar row g-2 align-items-start mb-0">

        <!-- Group By (Regroupement) -->
        <div class="col-12 col-md-2">
          <label class="form-label d-block">{% translate "Regrouper par" %}</label>
          <div class="btn-group btn-group-segment w-100" role="group" aria-label="Grouping type">
            <input type="radio" class="btn-check" name="filter-groupby" id="groupby-thematic" value="thematic" checked>
            <label class="btn btn-outline-primary" for="groupby-thematic">{% translate "Thématique" %}</label>

            <input type="radio" class="btn-check" name="filter-groupby" id="groupby-contract" value="contract">
            <label class="btn btn-outline-primary" for="groupby-contract">{% translate "Contrat" %}</label>
          </div>
        </div>

        <!-- Thematics -->
        <div class="col-12 col-md-3" id="thematics-filter-col">
          <label class="form-label" for="filter-thematics">{% translate "Thématiques" %}</label>
          <select id="filter-thematics" class="form-select form-select-sm" multiple size="4">
            {% for t in accessible_thematics %}
            <option value="{{ t.id }}">{{ t.name }}</option>
            {% endfor %}
          </select>
          <div class="form-text">{% translate "Vide = toutes (Ctrl+clic pour choix multiples)" %}</div>
        </div>

        <!-- Contracts -->
        <div class="col-12 col-md-3">
          <label class="form-label" for="filter-contracts" id="contracts-label">{% translate "Contrats" %}</label>
          <select id="filter-contracts" class="form-select form-select-sm" multiple size="4">
            {% for c in accessible_contracts %}
            <option value="{{ c.id }}">{{ c.number }} - {{ c.company_name }}</option>
            {% endfor %}
          </select>
          <div class="form-text" id="contracts-help">{% translate "Vide = tous (Ctrl+clic pour choix multiples)" %}</div>
        </div>

        <!-- Granularity -->
        <div class="col-6 col-md-2">
          <label class="form-label" for="filter-granularity">{% translate "Granularité" %}</label>
          <select id="filter-granularity" class="form-select form-select-sm">
            <option value="day">{% translate "Jour" %}</option>
            <option value="week" selected>{% translate "Semaine" %}</option>
            <option value="month">{% translate "Mois" %}</option>
          </select>
        </div>

        <!-- Date range -->
        <div class="col-6 col-md-1">
          <label class="form-label" for="filter-date-from">{% translate "Du" %}</label>
          <input type="date" id="filter-date-from" class="form-control form-control-sm" value="2026-01-01">
        </div>
        <div class="col-6 col-md-1">
          <label class="form-label" for="filter-date-to">{% translate "Au" %}</label>
          <input type="date" id="filter-date-to" class="form-control form-control-sm">
        </div>

      </div>
    </div>
  </div>

  <!-- KPI cards -->
  <div class="row g-3 mb-4">
    <div class="col-12 col-md-4">
      <div class="kpi-card interactive" style="border-color:#0d6efd" id="kpi-card-total" title="{% translate 'Cliquer pour voir la liste des interventions' %}">
        <div class="kpi-value text-primary" id="kpi-total">—</div>
        <div class="kpi-label">{% translate "Interventions correctives au total" %}</div>
      </div>
    </div>
    <div class="col-12 col-md-4">
      <div class="kpi-card" style="border-color:#198754">
        <div class="kpi-value text-success" id="kpi-active-groups">—</div>
        <div class="kpi-label" id="kpi-groups-label">{% translate "Thématiques actives" %}</div>
      </div>
    </div>
    <div class="col-12 col-md-4">
      <div class="kpi-card" style="border-color:#ffc107">
        <div class="kpi-value text-warning" id="kpi-active-contracts">—</div>
        <div class="kpi-label">{% translate "Contrats actifs" %}</div>
      </div>
    </div>
  </div>

  <!-- Main Grid: Chart & Heatmap -->
  <div class="row g-3 mb-4">
    <!-- Chart Column -->
    <div class="col-12 col-lg-7">
      <div class="card shadow-sm h-100">
        <div class="card-header d-flex align-items-center justify-content-between py-2 bg-light">
          <div class="d-flex align-items-center gap-2">
            <i class="bi bi-bar-chart-fill text-primary"></i>
            <span class="fw-semibold" id="chart-title-span">{% translate "Évolution du volume par thématique" %}</span>
          </div>
          <div class="text-muted small">
            {% translate "Cliquer sur une barre pour lister les détails" %}
          </div>
        </div>
        <div class="card-body">
          <div id="reporting-chart-wrapper">
            <div id="reporting-chart-placeholder" class="text-center text-muted py-5">
              <i class="bi bi-hourglass-split d-block mb-2" style="font-size:2rem;"></i>
              {% translate "Chargement des données…" %}
            </div>
            <div id="reporting-chart" style="display:none"></div>
          </div>
        </div>
      </div>
    </div>

    <!-- Map Column -->
    <div class="col-12 col-lg-5">
      <div class="card shadow-sm h-100">
        <div class="card-header d-flex align-items-center py-2 bg-light">
          <i class="bi bi-geo-alt-fill text-danger me-2"></i>
          <span class="fw-semibold">{% translate "Carte de densité (Heatmap)" %}</span>
        </div>
        <div class="card-body position-relative">
          <div id="map-placeholder" class="position-absolute top-50 start-50 translate-middle text-center text-muted w-100" style="z-index: 10;">
            <i class="bi bi-geo d-block mb-2" style="font-size:2rem;"></i>
            {% translate "Chargement de la carte..." %}
          </div>
          <div id="volume-map" style="visibility:hidden;"></div>
        </div>
      </div>
    </div>
  </div>

  <!-- Modal Interventions -->
  <div class="modal fade" id="interventionsModal" tabindex="-1" aria-labelledby="interventionsModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-centered">
      <div class="modal-content shadow-lg border-0">
        <div class="modal-header bg-light border-bottom-0 pb-0">
          <h5 class="modal-title fw-bold text-dark d-flex align-items-center gap-2" id="interventionsModalLabel">
            <i class="bi bi-list-task text-primary"></i>
            <span>{% translate "Interventions prises en compte" %}</span>
          </h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body pt-2">
          <div class="d-flex flex-wrap align-items-center justify-content-between gap-2 mb-3 bg-light p-2 rounded">
            <div class="text-muted small fw-semibold" id="modal-period-info"></div>
            <div class="d-flex align-items-center gap-2">
              <input type="text" id="modal-search" class="form-control form-control-sm" placeholder="{% translate 'Rechercher...' %}" style="max-width: 200px;">
              <a id="modal-export-link" href="#" target="_blank" class="btn btn-sm btn-outline-primary d-none">
                <i class="bi bi-box-arrow-up-right me-1"></i>{% translate "Voir dans l'application" %}
              </a>
            </div>
          </div>
          
          <div class="table-responsive" style="max-height: 450px; min-height: 200px;">
            <table class="table table-hover align-middle table-sm" id="modal-table">
              <thead class="table-light sticky-top">
                <tr>
                  <th>{% translate "Code" %}</th>
                  <th>{% translate "Titre" %}</th>
                  <th>{% translate "Date de création" %}</th>
                  <th>{% translate "Statut" %}</th>
                  <th>{% translate "Priorité" %}</th>
                  <th>{% translate "Contrat" %}</th>
                </tr>
              </thead>
              <tbody id="modal-table-body">
                <!-- Rempli par le JS -->
              </tbody>
            </table>
          </div>
          
          <!-- Pagination inside modal -->
          <div class="d-flex align-items-center justify-content-between mt-3 pt-2 border-top">
            <div class="text-muted small" id="modal-pagination-info"></div>
            <nav aria-label="Modal pagination">
              <ul class="pagination pagination-sm mb-0" id="modal-pagination-controls">
                <!-- Controls populated by JS -->
              </ul>
            </nav>
          </div>
        </div>
      </div>
    </div>
  </div>

</div>
{% endblock %}

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

  const VOLUME_TS_URL  = '/api/reporting/interventions/volume-timeseries/';
  const MAP_LOCS_URL   = '/api/reporting/interventions/map-locations/';
  const PREFERENCES_URL = '/api/reporting/preferences/';
  const CSRF = document.cookie.match(/csrftoken=([^;]+)/)?.[1] || '';

  // Data injected by Django
  const THEMATIC_CONTRACT_MAP = {{ thematic_contract_map_json|safe }};
  const THEMATIC_CODE_MAP = {{ thematic_code_map_json|safe }};
  const SAVED_PREFS = {{ saved_prefs_json|safe }};

  // Harmonious palette of colors for themes/contracts
  const PALETTE = [
    '#4e79a7', '#f28e2b', '#e15759', '#76b7b2', '#59a14f',
    '#edc948', '#b07aa1', '#ff9da7', '#9c755f', '#bab0ac',
    '#5c83b8', '#f8a555', '#ea7476', '#8ec4c0', '#74b66b'
  ];

  let chart = null;
  let map = null;
  let _resizeHandler = null;
  let lastLoadedData = null; // Stored results for modal mapping
  let currentMapGeoJSON = null; // Stored GeoJSON for coordinates matching
  let markers = [];
  let currentVisibleGroupIds = null; // null = all are visible

  function applyMapBaseFilter() {
    if (!map || !map.isStyleLoaded()) return;
    
    let filter = null;
    if (currentVisibleGroupIds !== null) {
      const field = getActiveGroupBy() === 'thematic' ? 'thematic_id' : 'contract_id';
      if (currentVisibleGroupIds.length === 0) {
        filter = ['literal', false]; // hide everything
      } else if (currentVisibleGroupIds.length === 1) {
        filter = ['==', ['get', field], currentVisibleGroupIds[0]];
      } else {
        filter = ['any', ...currentVisibleGroupIds.map(id => ['==', ['get', field], id])];
      }
    }
    
    if (map.getLayer('interventions-points')) map.setFilter('interventions-points', filter);
    if (map.getLayer('interventions-heatmap')) map.setFilter('interventions-heatmap', filter);
  }

  // ── Helpers selection ───────────────────────────────────────────────────
  function getSelected(selectId) {
    return Array.from(document.getElementById(selectId).selectedOptions)
                .map(o => Number(o.value));
  }

  function getActiveGroupBy() {
    return document.querySelector('input[name="filter-groupby"]:checked').value;
  }

  // ── Dynamic Contract Options filtering by Thematics ──────────────────────
  function updateContractOptions() {
    const selectedThematics = getSelected('filter-thematics');
    const contractSel = document.getElementById('filter-contracts');
    const groupBy = getActiveGroupBy();

    // In contract view, we do NOT filter the options by thematics automatically 
    // unless they were explicitly selected, to let the user select any contract.
    if (groupBy === 'contract') {
      Array.from(contractSel.options).forEach(opt => opt.hidden = false);
      return;
    }

    const prevSelected = new Set(getSelected('filter-contracts').map(String));
    let allowedContracts = null; // null = all
    if (selectedThematics.length > 0) {
      allowedContracts = new Set();
      selectedThematics.forEach(tid => {
        (THEMATIC_CONTRACT_MAP[tid] || []).forEach(cid => allowedContracts.add(cid));
      });
    }

    Array.from(contractSel.options).forEach(opt => {
      const cid = Number(opt.value);
      const visible = allowedContracts === null || allowedContracts.has(cid);
      opt.hidden = !visible;
      if (!visible) opt.selected = false;
    });
  }

  // ── UI Updates on GroupBy Change ──────────────────────────────────────────
  function handleGroupByChange() {
    const groupBy = getActiveGroupBy();
    const chartTitleSpan = document.getElementById('chart-title-span');
    const kpiGroupsLabel = document.getElementById('kpi-groups-label');
    const contractsLabel = document.getElementById('contracts-label');
    const contractsHelp = document.getElementById('contracts-help');

    if (groupBy === 'contract') {
      chartTitleSpan.textContent = "{% translate 'Évolution du volume par contrat' %}";
      kpiGroupsLabel.textContent = "{% translate 'Contrats représentés' %}";
      contractsLabel.innerHTML = '{% translate "Contrats" %} <span class="text-danger">*</span>';
      contractsHelp.textContent = "{% translate 'Sélectionnez les contrats à inclure' %}";
      
      // Select none by default when switching to contract view so the user explicitly chooses
      // if everything is currently selected.
      const allSelected = Array.from(document.getElementById('filter-contracts').options).every(o => o.selected);
      if (allSelected) {
        Array.from(document.getElementById('filter-contracts').options).forEach((o, i) => o.selected = (i === 0)); // select first one
      }
    } else {
      chartTitleSpan.textContent = "{% translate 'Évolution du volume par thématique' %}";
      kpiGroupsLabel.textContent = "{% translate 'Thématiques actives' %}";
      contractsLabel.textContent = "{% translate 'Contrats' %}";
      contractsHelp.textContent = "{% translate 'Vide = tous' %}";
    }

    updateContractOptions();
    schedulePreferencesSave();
    loadAllData();
  }

  // ── Build Query Params ────────────────────────────────────────────────────
  function buildParams() {
    const params = new URLSearchParams();
    params.set('granularity', document.getElementById('filter-granularity').value);
    params.set('group_by', getActiveGroupBy());

    const thematicIds = getSelected('filter-thematics');
    if (thematicIds.length) params.set('thematic_id', thematicIds.join(','));

    const contractIds = getSelected('filter-contracts');
    if (contractIds.length) {
      params.set('contract_id', contractIds.join(','));
    } else if (getActiveGroupBy() === 'contract') {
      // If contract grouping is active but no contracts are selected, send a dummy ID to return nothing
      params.set('contract_id', '-1');
    }

    const from = document.getElementById('filter-date-from').value;
    const to   = document.getElementById('filter-date-to').value;
    if (from) params.set('created_after',  from);
    if (to)   params.set('created_before', to);
    return params;
  }

  // ── Preferences Save/Restore ──────────────────────────────────────────────
  let _saveTimer = null;
  function schedulePreferencesSave() {
    clearTimeout(_saveTimer);
    _saveTimer = setTimeout(savePreferences, 500);
  }

  async function savePreferences() {
    const prefs = {
      groupby:      getActiveGroupBy(),
      granularity:  document.getElementById('filter-granularity').value,
      thematic_ids: getSelected('filter-thematics'),
      contract_ids: getSelected('filter-contracts'),
      date_from:    document.getElementById('filter-date-from').value,
      date_to:      document.getElementById('filter-date-to').value,
    };
    try {
      await fetch(PREFERENCES_URL, {
        method: 'PATCH',
        headers: {
          'Content-Type': 'application/json',
          'X-CSRFToken': CSRF,
          'X-Requested-With': 'XMLHttpRequest',
        },
        credentials: 'same-origin',
        body: JSON.stringify({ page: 'volume_dashboard', prefs }),
      });
    } catch (_) { /* silent */ }
  }

  function restorePreferences() {
    const p = SAVED_PREFS;
    if (!p || !Object.keys(p).length) return;

    if (p.groupby) {
      document.getElementById(`groupby-${p.groupby}`).checked = true;
    }
    if (p.granularity) {
      document.getElementById('filter-granularity').value = p.granularity;
    }
    if (p.date_from) document.getElementById('filter-date-from').value = p.date_from;
    if (p.date_to)   document.getElementById('filter-date-to').value   = p.date_to;

    if (Array.isArray(p.thematic_ids) && p.thematic_ids.length) {
      const thematicSet = new Set(p.thematic_ids.map(Number));
      Array.from(document.getElementById('filter-thematics').options).forEach(opt => {
        opt.selected = thematicSet.has(Number(opt.value));
      });
      updateContractOptions();
    }

    if (Array.isArray(p.contract_ids) && p.contract_ids.length) {
      const contractSet = new Set(p.contract_ids.map(Number));
      Array.from(document.getElementById('filter-contracts').options).forEach(opt => {
        opt.selected = !opt.hidden && contractSet.has(Number(opt.value));
      });
    }
  }

  // ── Timeseries Period Formatter ───────────────────────────────────────────
  function formatPeriod(ts, granularity) {
    const d = new Date(ts);
    const lang = document.documentElement.lang || 'fr';
    if (granularity === 'month') {
      return d.toLocaleDateString(lang, { year: 'numeric', month: 'short' });
    }
    if (granularity === 'week') {
      return d.toLocaleDateString(lang, { day: '2-digit', month: '2-digit', year: '2-digit' });
    }
    return d.toLocaleDateString(lang, { day: '2-digit', month: '2-digit' });
  }

  // ── Render ECharts Histogram ──────────────────────────────────────────────
  function renderChart(data) {
    currentVisibleGroupIds = null;
    const wrapper = document.getElementById('reporting-chart');
    const placeholder = document.getElementById('reporting-chart-placeholder');
    const results = data.results || [];
    const gran = data.granularity || 'week';
    const groupBy = data.group_by || 'thematic';
    const lang = document.documentElement.lang || 'fr';

    if (!results.length) {
      placeholder.innerHTML =
        '<i class="bi bi-inbox d-block mb-2" style="font-size:2rem;"></i>' +
        "{% translate 'Aucune donnée disponible pour les filtres sélectionnés.' %}";
      placeholder.style.display = '';
      wrapper.style.display = 'none';
      
      document.getElementById('kpi-total').textContent = '0';
      document.getElementById('kpi-active-groups').textContent = '0';
      document.getElementById('kpi-active-contracts').textContent = '0';
      return;
    }

    placeholder.style.display = 'none';
    wrapper.style.display = '';

    // KPI Aggregations
    const totalCount = results.reduce((s, r) => s + (r.count || 0), 0);
    const uniqueGroups = new Set(results.map(r => r.group_id).filter(id => id !== null));
    
    document.getElementById('kpi-total').textContent = totalCount.toLocaleString();
    if (groupBy === 'thematic') {
      document.getElementById('kpi-active-groups').textContent = uniqueGroups.size;
    } else {
      document.getElementById('kpi-active-groups').textContent = uniqueGroups.size;
    }
    
    // Count active contracts from filters or loaded results
    const activeContracts = getSelected('filter-contracts');
    document.getElementById('kpi-active-contracts').textContent = 
      activeContracts.length ? activeContracts.length : document.getElementById('filter-contracts').options.length;

    // Build timeline x-axis buckets
    const periodMap = new Map(); // iso -> ms timestamp
    results.forEach(r => {
      const ts = new Date(r.period).getTime();
      periodMap.set(r.period, ts);
    });
    const sortedPeriods = Array.from(periodMap.keys()).sort();
    const timestamps = sortedPeriods.map(p => periodMap.get(p));

    // Group rows by group_id (thematic or contract)
    const groups = {}; // id -> { name, counts: { period: count } }
    results.forEach(r => {
      const gid = r.group_id || 0;
      const gname = lang === 'nl' ? (r.group_name_nl || r.group_name_fr) : r.group_name_fr;
      if (!groups[gid]) {
        groups[gid] = {
          name: gname,
          counts: {}
        };
      }
      groups[gid].counts[r.period] = r.count || 0;
    });

    // Create ECharts series (Grouped Bar Histogram)
    const series = Object.keys(groups).map((gid, idx) => {
      const g = groups[gid];
      return {
        name: g.name,
        type: 'bar',
        // stack: 'total', // côte à côte au lieu de superposées
        emphasis: {
          focus: 'series'
        },
        itemStyle: {
          color: PALETTE[idx % PALETTE.length]
        },
        data: sortedPeriods.map(p => g.counts[p] || 0),
        // Store group id for click event mapping
        groupId: Number(gid)
      };
    });

    const option = {
      tooltip: {
        trigger: 'axis',
        axisPointer: { type: 'shadow' }
      },
      legend: {
        bottom: 0,
        type: 'scroll',
        data: Object.keys(groups).map(gid => groups[gid].name)
      },
      grid: { left: '3%', right: '4%', bottom: '12%', containLabel: true },
      xAxis: {
        type: 'category',
        data: timestamps,
        axisLabel: {
          fontSize: 11,
          rotate: gran === 'day' ? 45 : 0,
          formatter: ts => formatPeriod(Number(ts), gran)
        }
      },
      yAxis: {
        type: 'value',
        name: "{% translate 'Nombre d\'interventions' %}",
        nameTextStyle: { fontSize: 11 }
      },
      series
    };

    if (chart) {
      chart.dispose();
      window.removeEventListener('resize', _resizeHandler);
    }
    
    chart = echarts.init(wrapper);
    _resizeHandler = () => chart.resize();
    window.addEventListener('resize', _resizeHandler);
    chart.setOption(option);
    chart.resize();

    // Chart Click Handler
    chart.on('click', (params) => {
      // Check if they clicked a bar element
      if (params.componentType === 'series') {
        const timestamp = Number(params.name); // ECharts maps x-axis value to params.name
        const periodIso = sortedPeriods[params.dataIndex];
        const seriesObj = series[params.seriesIndex];
        
        // Open details modal filtered by that period and specific series group (thematic or contract)
        openInterventionsModal(periodIso, gran, seriesObj.groupId, groupBy);
      }
    });

    // Chart Hover Highlighting on Map (series or legend items)
    function highlightGroup(groupId) {
      if (map && map.isStyleLoaded() && groupId !== null) {
        const field = groupBy === 'thematic' ? 'thematic_id' : 'contract_id';
        const filter = ['==', ['get', field], groupId];
        if (map.getLayer('interventions-points')) map.setFilter('interventions-points', filter);
        if (map.getLayer('interventions-heatmap')) map.setFilter('interventions-heatmap', filter);
      }
    }

    function clearHighlight() {
      applyMapBaseFilter();
    }

    chart.on('mouseover', (params) => {
      if (params.componentType === 'series') {
        const seriesObj = series[params.seriesIndex];
        const groupId = seriesObj ? seriesObj.groupId : null;
        highlightGroup(groupId);
      }
    });

    chart.on('mouseout', () => {
      clearHighlight();
    });

    // Listen to highlight/downplay to capture legend hover events
    chart.on('highlight', (params) => {
      let name = params.name || params.seriesName;
      if (!name && params.batch && params.batch.length > 0) {
        name = params.batch[0].name || params.batch[0].seriesName;
      }
      if (name) {
        const seriesObj = series.find(s => s.name === name);
        const groupId = seriesObj ? seriesObj.groupId : null;
        highlightGroup(groupId);
      }
    });

    chart.on('downplay', () => {
      clearHighlight();
    });

    // Listen to legend selection clicks to filter map points
    chart.on('legendselectchanged', (params) => {
      if (params.selected) {
        const activeIds = [];
        Object.keys(params.selected).forEach(name => {
          if (params.selected[name] === true) {
            const seriesObj = series.find(s => s.name === name);
            if (seriesObj) {
              activeIds.push(seriesObj.groupId);
            }
          }
        });
        currentVisibleGroupIds = activeIds;
        applyMapBaseFilter();
      }
    });
  }

  // ── Initialize MapLibre Map ──────────────────────────────────────────────
  function initMap() {
    const mapPl = document.getElementById('map-placeholder');
    const mapDiv = document.getElementById('volume-map');
    
    mapDiv.style.visibility = 'visible';
    
    // MapLibre configuration with light style
    map = new maplibregl.Map({
      container: 'volume-map',
      style: window.MAP_STYLE_LIGHT,
      center: [4.35, 50.85], // Center in Brussels
      zoom: 11
    });

    map.addControl(new maplibregl.NavigationControl(), 'top-left');

    map.on('load', () => {
      mapPl.style.display = 'none';
      loadMapData();
    });
  }

  // ── Load Map Heatmap Data ─────────────────────────────────────────────────
  async function loadMapData() {
    if (!map || !map.isStyleLoaded()) return;

    const params = buildParams();
    try {
      const resp = await fetch(`${MAP_LOCS_URL}?${params.toString()}`, {
        headers: { 'X-Requested-With': 'XMLHttpRequest', 'X-CSRFToken': CSRF },
        credentials: 'same-origin'
      });
      if (!resp.ok) return;
      
      const geojson = await resp.json();
      
      // Calculate coordinates counts in-memory to tag duplicate points
      const coordCounts = {};
      geojson.features.forEach(f => {
        const key = f.geometry.coordinates.join(',');
        coordCounts[key] = (coordCounts[key] || 0) + 1;
      });
      geojson.features.forEach(f => {
        const key = f.geometry.coordinates.join(',');
        f.properties.point_count = coordCounts[key];
      });

      currentMapGeoJSON = geojson;
      
      // Center and fit bounds based on GeoJSON coordinates
      if (geojson.features && geojson.features.length > 0) {
        const bounds = new maplibregl.LngLatBounds();
        geojson.features.forEach(f => {
          bounds.extend(f.geometry.coordinates);
        });
        map.fitBounds(bounds, { padding: 40, maxZoom: 14 });
      }

      // Add or update Map source
      if (map.getSource('heatmap-source')) {
        map.getSource('heatmap-source').setData(geojson);
      } else {
        map.addSource('heatmap-source', {
          type: 'geojson',
          data: geojson
        });

        // 1. Heatmap Layer for zoom 0 to 14
        map.addLayer({
          id: 'interventions-heatmap',
          type: 'heatmap',
          source: 'heatmap-source',
          maxzoom: 14,
          paint: {
            'heatmap-weight': 1,
            'heatmap-intensity': [
              'interpolate', ['linear'], ['zoom'],
              0, 0.3,
              14, 1.2
            ],
            // Harmonious HSL gradients
            'heatmap-color': [
              'interpolate', ['linear'], ['heatmap-density'],
              0, 'rgba(0, 180, 255, 0)',
              0.1, 'rgba(0, 180, 255, 0.2)',
              0.3, 'rgb(89, 161, 79)',       // Smooth green
              0.6, 'rgb(242, 142, 43)',     // Smooth orange
              0.9, 'rgb(225, 87, 89)',      // Soft red
              1.0, 'rgb(178, 24, 43)'       // Dark red
            ],
            'heatmap-radius': [
              'interpolate', ['linear'], ['zoom'],
              0, 2,
              11, 6,
              14, 15
            ],
            'heatmap-opacity': [
              'interpolate', ['linear'], ['zoom'],
              13, 0.8,
              15, 0
            ]
          }
        });

        // 2. Point layer for high zoom (zoom 12.5 to 20)
        map.addLayer({
          id: 'interventions-points',
          type: 'circle',
          source: 'heatmap-source',
          minzoom: 12.5,
          paint: {
            'circle-radius': [
              'interpolate', ['linear'], ['get', 'point_count'],
              1, 6,
              3, 8,
              8, 11
            ],
            'circle-color': [
              'interpolate', ['linear'], ['get', 'point_count'],
              1, '#0d6efd',   // 1 intervention : Bleu standard
              2, '#59a14f',   // 2 interventions : Vert
              4, '#f28e2b',   // 4 interventions : Orange
              8, '#e15759'    // 8+ interventions : Rouge
            ],
            'circle-stroke-width': 1.5,
            'circle-stroke-color': '#fff',
            'circle-opacity': [
              'interpolate', ['linear'], ['zoom'],
              12.5, 0,
              14.5, 0.95
            ],
            'circle-stroke-opacity': [
              'interpolate', ['linear'], ['zoom'],
              12.5, 0,
              14.5, 0.95
            ]
          }
        });

        // Click event on circles to open a small details Popup
        map.on('click', 'interventions-points', (e) => {
          const clickCoords = e.features[0].geometry.coordinates;
          const coordinates = clickCoords.slice();
          const lang = document.documentElement.lang || 'fr';
          
          // Match all interventions at the exact same coordinates (with epsilon tolerance)
          const matchedFeatures = [];
          if (currentMapGeoJSON && currentMapGeoJSON.features) {
            currentMapGeoJSON.features.forEach(f => {
              const coords = f.geometry.coordinates;
              const match = Math.abs(coords[0] - clickCoords[0]) < 0.00001 &&
                            Math.abs(coords[1] - clickCoords[1]) < 0.00001;
              if (match) {
                matchedFeatures.push(f);
              }
            });
          }
          
          let html = '';
          if (matchedFeatures.length <= 1) {
            // Single feature popup (original premium style)
            const feat = matchedFeatures[0] || e.features[0];
            const props = feat.properties;
            const detailUrl = `/interventions/${props.id}/`;
            const thematicName = lang === 'nl' ? (props.thematic_name_nl || props.thematic_name_fr) : props.thematic_name_fr;
            
            html = `
              <div class="fw-bold text-primary mb-1">${props.code}</div>
              <div class="fw-semibold text-dark mb-1 text-wrap" style="max-width:200px;">${props.title}</div>
              <div class="text-muted mb-2 small">
                <i class="bi bi-tag-fill me-1"></i>${thematicName || '—'}<br>
                <i class="bi bi-file-text me-1"></i>${props.contract_number || '—'}
              </div>
              <a href="${detailUrl}" target="_blank" class="btn btn-xs btn-primary text-white d-block text-center py-1 fw-bold fs-7 rounded text-decoration-none">
                {% translate "Ouvrir l'intervention" %} <i class="bi bi-box-arrow-up-right small ms-1"></i>
              </a>
            `;
          } else {
            // Multiple features at this exact coordinate (beautiful scrollable list)
            html = `
              <div class="fw-bold text-primary mb-2" style="font-size: 0.88rem;">
                <i class="bi bi-geo-alt-fill text-danger me-1"></i>
                ${matchedFeatures.length} {% translate "interventions à cet endroit" %}
              </div>
              <div style="max-height: 200px; width: 250px; overflow-y: auto; padding-right: 4px;">
            `;
            
            matchedFeatures.forEach(feat => {
              const props = feat.properties;
              const detailUrl = `/interventions/${props.id}/`;
              const thematicName = lang === 'nl' ? (props.thematic_name_nl || props.thematic_name_fr) : props.thematic_name_fr;
              
              html += `
                <div class="border-bottom pb-2 mb-2">
                  <div class="d-flex justify-content-between align-items-center mb-1">
                    <a href="${detailUrl}" target="_blank" class="fw-bold text-decoration-none small">
                      ${props.code} <i class="bi bi-box-arrow-up-right small ms-0.5" style="font-size:0.7rem;"></i>
                    </a>
                    <span class="badge bg-light text-dark border small" style="font-size:0.7rem; padding: 0.15em 0.4em;">
                      ${props.contract_number || '—'}
                    </span>
                  </div>
                  <div class="fw-semibold text-dark small text-truncate" title="${escapeHtml(props.title)}">${escapeHtml(props.title)}</div>
                  <div class="text-muted small" style="font-size: 0.72rem;">
                    <i class="bi bi-tag-fill me-1"></i>${thematicName || '—'}
                  </div>
                </div>
              `;
            });
            
            html += `</div>`;
          }

          new maplibregl.Popup()
            .setLngLat(coordinates)
            .setHTML(html)
            .addTo(map);
        });

        // Cursor style transitions
        map.on('mouseenter', 'interventions-points', () => {
          map.getCanvas().style.cursor = 'pointer';
        });
        map.on('mouseleave', 'interventions-points', () => {
          map.getCanvas().style.cursor = '';
        });
      }
    } catch (e) { /* silent error */ }
  }

  // ── Load All Data ─────────────────────────────────────────────────────────
  async function loadAllData() {
    const placeholder = document.getElementById('reporting-chart-placeholder');
    const wrapper     = document.getElementById('reporting-chart');
    placeholder.innerHTML =
      '<i class="bi bi-hourglass-split d-block mb-2" style="font-size:2rem;"></i>' +
      "{% translate 'Chargement des données…' %}";
    placeholder.style.display = '';
    wrapper.style.display = 'none';

    const params = buildParams();
    try {
      const resp = await fetch(`${VOLUME_TS_URL}?${params.toString()}`, {
        headers: { 'X-Requested-With': 'XMLHttpRequest', 'X-CSRFToken': CSRF },
        credentials: 'same-origin',
      });
      if (!resp.ok) {
        const err = await resp.json().catch(() => ({}));
        placeholder.innerHTML =
          `<i class="bi bi-exclamation-triangle text-danger d-block mb-2" style="font-size:2rem;"></i>` +
          (err.error || "{% translate 'Erreur lors du chargement des données.' %}");
        return;
      }
      const data = await resp.json();
      lastLoadedData = data;
      renderChart(data);
      loadMapData();
    } catch (e) {
      placeholder.innerHTML =
        '<i class="bi bi-wifi-off text-danger d-block mb-2" style="font-size:2rem;"></i>' +
        "{% translate 'Impossible de contacter le serveur.' %}";
    }
  }

  // ── Interventions Modal management ────────────────────────────────────────
  const STATUS_LABELS = {
    fr: {
      'in_preparation': 'En préparation',
      'to_be_approved': 'A approuver',
      'to_be_planned': 'A planifier',
      'to_be_processed': 'A traiter',
      'assigned': 'Pris en charge',
      'in_progress': 'Démarré',
      'on_pause': 'En pause',
      'finished': 'Terminé',
      'processed': 'Traité',
      'to_be_corrected': 'A corriger',
      'corrected': 'Corrigé',
      'validated': 'Validé',
      'invoiced': 'Comptabilisé',
      'closed': 'Finalisé',
      'canceled': 'Annulé',
    },
    nl: {
      'in_preparation': 'In voorbereiding',
      'to_be_approved': 'Te goedkeuren',
      'to_be_planned': 'Te plannen',
      'to_be_processed': 'Te behandelen',
      'assigned': 'In behandeling',
      'in_progress': 'Gestart',
      'on_pause': 'Gepauzeerd',
      'finished': 'Voltooid',
      'processed': 'Verwerkt',
      'to_be_corrected': 'Te corrigeren',
      'corrected': 'Gecorrigeerd',
      'validated': 'Gevalideerd',
      'invoiced': 'Geboekt',
      'closed': 'Afgerond',
      'canceled': 'Geannuleerd',
    }
  };

  const STATUS_BADGES = {
    'in_preparation': 'bg-secondary',
    'to_be_approved': 'bg-warning text-dark',
    'to_be_planned': 'bg-warning text-dark',
    'to_be_processed': 'bg-danger',
    'assigned': 'bg-warning text-dark',
    'in_progress': 'bg-primary',
    'on_pause': 'bg-warning text-dark',
    'finished': 'bg-info text-dark',
    'processed': 'bg-info text-dark',
    'to_be_corrected': 'bg-danger',
    'corrected': 'bg-info text-dark',
    'validated': 'bg-success',
    'invoiced': 'bg-dark',
    'closed': 'bg-dark',
    'canceled': 'bg-secondary',
  };

  const PRIORITY_LABELS = {
    fr: { '1': 'Urgent', '2': 'Élevé', '3': 'Normal', '4': 'Bas' },
    nl: { '1': 'Urgent', '2': 'Hoog', '3': 'Normaal', '4': 'Laag' }
  };

  const PRIORITY_BADGES = {
    '1': 'bg-danger',
    '2': 'bg-warning text-dark',
    '3': 'bg-success',
    '4': 'bg-secondary'
  };

  function formatDate(isoStr) {
    if (!isoStr) return '—';
    const d = new Date(isoStr);
    return d.toLocaleDateString(document.documentElement.lang || 'fr', {
      day: '2-digit',
      month: '2-digit',
      year: 'numeric'
    });
  }

  function escapeHtml(str) {
    if (!str) return '';
    return str
      .replace(/&/g, "&amp;")
      .replace(/</g, "&lt;")
      .replace(/>/g, "&gt;")
      .replace(/"/g, "&quot;")
      .replace(/'/g, "&#039;");
  }

  let currentModalParams = null;

  async function openInterventionsModal(periodStartStr = null, granularity = null, specificGroupId = null, groupByType = null) {
    const periodInfo = document.getElementById('modal-period-info');
    const tableBody = document.getElementById('modal-table-body');
    const searchInput = document.getElementById('modal-search');
    const exportLink = document.getElementById('modal-export-link');
    
    searchInput.value = '';
    
    tableBody.innerHTML = `
      <tr>
        <td colspan="6" class="text-center py-5">
          <div class="spinner-border spinner-border-sm text-primary me-2" role="status"></div>
          {% translate "Chargement des interventions..." %}
        </td>
      </tr>
    `;
    
    const params = new URLSearchParams();
    params.set('maintenance_type', 'corrective');
    params.set('per_page', '50');
    
    // Default filters from selectors
    const thematicIds = getSelected('filter-thematics');
    if (thematicIds.length) params.set('thematic_id', thematicIds.join(','));
    const contractIds = getSelected('filter-contracts');
    if (contractIds.length) params.set('contract_id', contractIds.join(','));

    // Override with chart clicked specific elements
    if (specificGroupId) {
      if (groupByType === 'thematic') {
        params.set('thematic_id', specificGroupId);
      } else if (groupByType === 'contract') {
        params.set('contract_id', specificGroupId);
      }
    }
    
    let dateRangeTitle = '';
    const lang = (document.documentElement.lang || 'fr').substring(0, 2).toLowerCase();
    
    if (periodStartStr && granularity) {
      const start = new Date(periodStartStr);
      const end = new Date(start.getTime());
      
      if (granularity === 'day') {
        end.setDate(end.getDate() + 1);
        dateRangeTitle = start.toLocaleDateString(lang, { day: '2-digit', month: '2-digit', year: 'numeric' });
      } else if (granularity === 'week') {
        end.setDate(end.getDate() + 7);
        const endDisplay = new Date(end.getTime() - 1000);
        dateRangeTitle = lang === 'nl' 
          ? `Week van ${start.toLocaleDateString(lang, { day: '2-digit', month: '2-digit' })} tot ${endDisplay.toLocaleDateString(lang, { day: '2-digit', month: '2-digit', year: 'numeric' })}`
          : `Semaine du ${start.toLocaleDateString(lang, { day: '2-digit', month: '2-digit' })} au ${endDisplay.toLocaleDateString(lang, { day: '2-digit', month: '2-digit', year: 'numeric' })}`;
      } else if (granularity === 'month') {
        end.setMonth(end.getMonth() + 1);
        dateRangeTitle = start.toLocaleDateString(lang, { month: 'long', year: 'numeric' });
      }
      
      end.setSeconds(end.getSeconds() - 1);
      
      const formatLocalISO = (d) => {
        const pad = (n) => String(n).padStart(2, '0');
        return `${d.getFullYear()}-${pad(d.getMonth()+1)}-${pad(d.getDate())}T${pad(d.getHours())}:${pad(d.getMinutes())}:${pad(d.getSeconds())}`;
      };
      
      params.set('created_after', formatLocalISO(start));
      params.set('created_before', formatLocalISO(end));
    } else {
      const from = document.getElementById('filter-date-from').value;
      const to = document.getElementById('filter-date-to').value;
      
      if (from) params.set('created_after', from);
      if (to) params.set('created_before', to + 'T23:59:59');
      
      if (from && to) {
        dateRangeTitle = lang === 'nl'
          ? `Periode van ${new Date(from).toLocaleDateString(lang)} tot ${new Date(to).toLocaleDateString(lang)}`
          : `Période du ${new Date(from).toLocaleDateString(lang)} au ${new Date(to).toLocaleDateString(lang)}`;
      } else if (from) {
        dateRangeTitle = lang === 'nl'
          ? `Vanaf ${new Date(from).toLocaleDateString(lang)}`
          : `Depuis le ${new Date(from).toLocaleDateString(lang)}`;
      } else if (to) {
        dateRangeTitle = lang === 'nl'
          ? `Tot ${new Date(to).toLocaleDateString(lang)}`
          : `Jusqu'au ${new Date(to).toLocaleDateString(lang)}`;
      } else {
        dateRangeTitle = lang === 'nl' ? `Alle interventies` : `Toutes les interventions`;
      }
    }
    
    periodInfo.textContent = dateRangeTitle;
    
    // Configure Export Link pointing to the primary list of interventions
    const mainAppUrl = new URL(window.location.origin + '/interventions/');
    mainAppUrl.searchParams.set('maintain_type', 'corrective');
    
    const activeTids = params.get('thematic_id') ? params.get('thematic_id').split(',') : [];
    const thematicCodes = activeTids.map(tid => THEMATIC_CODE_MAP[tid]).filter(Boolean);
    thematicCodes.forEach(code => mainAppUrl.searchParams.append('thematic', code));
    
    const activeCids = params.get('contract_id') ? params.get('contract_id').split(',') : [];
    activeCids.forEach(cid => mainAppUrl.searchParams.append('contract', cid));
    
    if (params.get('created_after')) {
      mainAppUrl.searchParams.set('begin_date_min', params.get('created_after').split('T')[0]);
    }
    if (params.get('created_before')) {
      mainAppUrl.searchParams.set('begin_date_max', params.get('created_before').split('T')[0]);
    }
    
    exportLink.href = mainAppUrl.toString();
    exportLink.classList.remove('d-none');
    
    const modalObj = bootstrap.Modal.getOrCreateInstance(document.getElementById('interventionsModal'));
    modalObj.show();
    
    currentModalParams = params;
    loadModalPage(1);
  }

  async function loadModalPage(page) {
    const tableBody = document.getElementById('modal-table-body');
    const paginationControls = document.getElementById('modal-pagination-controls');
    const paginationInfo = document.getElementById('modal-pagination-info');
    
    tableBody.innerHTML = `
      <tr>
        <td colspan="6" class="text-center py-5">
          <div class="spinner-border spinner-border-sm text-primary me-2" role="status"></div>
          {% translate "Chargement des interventions..." %}
        </td>
      </tr>
    `;
    
    currentModalParams.set('page', page);
    currentModalParams.set('q', document.getElementById('modal-search').value);
    
    try {
      const resp = await fetch(`/api/reporting/interventions/?${currentModalParams.toString()}`, {
        headers: { 'X-Requested-With': 'XMLHttpRequest', 'X-CSRFToken': CSRF },
        credentials: 'same-origin'
      });
      
      if (!resp.ok) throw new Error();
      
      const data = await resp.json();
      const results = data.results || [];
      
      if (results.length === 0) {
        tableBody.innerHTML = `
          <tr>
            <td colspan="6" class="text-center py-4 text-muted">
              <i class="bi bi-inbox d-block mb-1 fs-4"></i>
              {% translate "Aucune intervention trouvée." %}
            </td>
          </tr>
        `;
        paginationInfo.textContent = '';
        paginationControls.innerHTML = '';
        return;
      }
      
      const lang = (document.documentElement.lang || 'fr').substring(0, 2).toLowerCase();
      tableBody.innerHTML = results.map(item => {
        const detailUrl = `/interventions/${item.id}/`;
        const statusLabel = (STATUS_LABELS[lang] || STATUS_LABELS['fr'])[item.status] || item.status;
        const statusBadge = STATUS_BADGES[item.status] || 'bg-secondary';
        const priorityLabel = (PRIORITY_LABELS[lang] || PRIORITY_LABELS['fr'])[item.priority] || item.priority;
        const priorityBadge = PRIORITY_BADGES[item.priority] || 'bg-secondary';
        
        return `
          <tr>
            <td>
              <a href="${detailUrl}" target="_blank" class="fw-semibold text-decoration-none">
                ${item.code} <i class="bi bi-box-arrow-up-right small ms-1" style="font-size: 0.75rem;"></i>
              </a>
            </td>
            <td class="text-wrap" style="max-width: 250px;">${escapeHtml(item.title)}</td>
            <td>${formatDate(item.dt_to_be_processed)}</td>
            <td><span class="badge ${statusBadge}">${statusLabel}</span></td>
            <td><span class="badge ${priorityBadge}">${priorityLabel}</span></td>
            <td><span class="text-muted small">${item.contract_number || '—'}</span></td>
          </tr>
        `;
      }).join('');
      
      const totalCount = data.count || 0;
      const perPage = data.per_page || 50;
      const totalPages = data.pages || 1;
      const currentPage = data.page || 1;
      
      const startRange = (currentPage - 1) * perPage + 1;
      const endRange = Math.min(currentPage * perPage, totalCount);
      
      paginationInfo.textContent = `${startRange} - ${endRange} sur ${totalCount}`;
      
      let controlsHtml = '';
      
      controlsHtml += `
        <li class="page-item ${currentPage === 1 ? 'disabled' : ''}">
          <button class="page-link" onclick="loadModalPage(${currentPage - 1})" aria-label="Previous">
            <span aria-hidden="true">&laquo;</span>
          </button>
        </li>
      `;
      
      const startPage = Math.max(1, currentPage - 2);
      const endPage = Math.min(totalPages, currentPage + 2);
      
      if (startPage > 1) {
        controlsHtml += `
          <li class="page-item"><button class="page-link" onclick="loadModalPage(1)">1</button></li>
          ${startPage > 2 ? '<li class="page-item disabled"><span class="page-link">...</span></li>' : ''}
        `;
      }
      
      for (let i = startPage; i <= endPage; i++) {
        controlsHtml += `
          <li class="page-item ${i === currentPage ? 'active' : ''}">
            <button class="page-link" onclick="loadModalPage(${i})">${i}</button>
          </li>
        `;
      }
      
      if (endPage < totalPages) {
        controlsHtml += `
          ${endPage < totalPages - 1 ? '<li class="page-item disabled"><span class="page-link">...</span></li>' : ''}
          <li class="page-item"><button class="page-link" onclick="loadModalPage(${totalPages})">${totalPages}</button></li>
        `;
      }
      
      controlsHtml += `
        <li class="page-item ${currentPage === totalPages ? 'disabled' : ''}">
          <button class="page-link" onclick="loadModalPage(${currentPage + 1})" aria-label="Next">
            <span aria-hidden="true">&raquo;</span>
          </button>
        </li>
      `;
      
      paginationControls.innerHTML = controlsHtml;
      
    } catch (e) {
      tableBody.innerHTML = `
        <tr>
          <td colspan="6" class="text-center py-4 text-danger">
            <i class="bi bi-exclamation-triangle d-block mb-1 fs-4"></i>
            {% translate "Erreur lors du chargement des interventions." %}
          </td>
        </tr>
      `;
      paginationInfo.textContent = '';
      paginationControls.innerHTML = '';
    }
  }

  window.loadModalPage = loadModalPage;

  // Bind Total KPI click
  document.getElementById('kpi-card-total').addEventListener('click', () => {
    openInterventionsModal();
  });

  // Bind modal search with debouncer
  let searchTimeout = null;
  document.getElementById('modal-search').addEventListener('input', () => {
    clearTimeout(searchTimeout);
    searchTimeout = setTimeout(() => {
      loadModalPage(1);
    }, 300);
  });

  // Event Listeners for Filters
  document.getElementById('filter-granularity').addEventListener('change', () => { schedulePreferencesSave(); loadAllData(); });
  document.getElementById('filter-date-from').addEventListener('change',   () => { schedulePreferencesSave(); loadAllData(); });
  document.getElementById('filter-date-to').addEventListener('change',     () => { schedulePreferencesSave(); loadAllData(); });
  document.getElementById('filter-thematics').addEventListener('change',   () => {
    updateContractOptions();
    schedulePreferencesSave();
    loadAllData();
  });
  document.getElementById('filter-contracts').addEventListener('change',   () => { schedulePreferencesSave(); loadAllData(); });

  // Bind Group By triggers
  document.querySelectorAll('input[name="filter-groupby"]').forEach(radio => {
    radio.addEventListener('change', handleGroupByChange);
  });

  // Init: restore, map, load
  document.addEventListener('DOMContentLoaded', () => {
    restorePreferences();
    initMap();
    updateContractOptions();
    handleGroupByChange();
  });


})();
</script>
{% endblock %}