class UIManager {
  constructor(mapSelector) {
    this.mapSelector = mapSelector;
  }

  updateSelectedAreasList() {
    const list = this._getElement('#selectedAreasList');
    if (!list) return;

    list.innerHTML = '';

    if (this.mapSelector.selectedAreas.length === 0) {
      const li = document.createElement('li');
      li.className = 'no-areas';
      list.appendChild(li);
      return;
    }

    this.mapSelector.selectedAreas.forEach((area, index) => {
      const li = document.createElement('li');
      li.className = 'selectedAreaItem';

      let zoneLabel = this._createZoneLabel(area, index);

      li.innerHTML = `
        <span>${zoneLabel}</span>
        <button class="removeAreaBtn" data-index="${index}">×</button>
      `;

      list.appendChild(li);
    });

    this._bindRemoveAreaEvents();
  }

  _createZoneLabel(area, index) {
    return this.mapSelector.geoJSONHandler.createZoneLabel(area, index);
  }

  _bindRemoveAreaEvents() {
    document.querySelectorAll('.removeAreaBtn').forEach(btn => {
      btn.addEventListener('click', (e) => {
        e.preventDefault();
        e.stopPropagation();

        const index = parseInt(e.target.dataset.index);
        this.mapSelector.selectedAreas.splice(index, 1);
        this.mapSelector.drawnItems.clearLayers();
        this.mapSelector.searchResultsLayer.clearLayers();

        this.mapSelector.selectedAreas.forEach(area => {
          this.mapSelector.geoJSONHandler.renderGeoJSONOnMap(area);
        });

        this.updateSelectedAreasList();
      });
    });
  }

  _getElement(selector) {
    const element = document.querySelector(selector);
    if (!element) {
      console.warn(`Element not found: ${selector}`);
    }
    return element;
  }

  bindEvents() {
    const confirmButton = document.querySelector('#confirmSelectionBtn');
    const clearButton = document.querySelector('#clearSelectionBtn');
    const closeButton = document.querySelector('.mapSelectorCloseBtn');

    if (confirmButton) {
      confirmButton.addEventListener('click', () => {
        const selectedAreas = this.mapSelector.getSelectedAreas();
        let totalArea = 0;

        selectedAreas.forEach(area => {
          const areaSize = GeoJSONHandler.calculateArea(area);
          totalArea += areaSize / 1000000;
        });

        if (totalArea > 1300) {
          alert('La zone sélectionnée est trop grande. Maximum autorisé: 1300 km²');
          return;
        }

        this.mapSelector.options.onSelectionConfirmed(selectedAreas);
        this.mapSelector.close();
      });
    }

    if (clearButton) {
      clearButton.addEventListener('click', () => {
        this.mapSelector.clearSelection();
      });
    }

    if (closeButton) {
      closeButton.addEventListener('click', () => {
        if (this.mapSelector.isEditing) {
          e.preventDefault();
          alert('Veuillez terminer ou annuler vos modifications avant de fermer');
          return;
        }
        this.mapSelector.close();
      });
    }

    if (this.mapSelector._eventsBound) return;
    this.mapSelector._eventsBound = true;

    if (this.mapSelector.modalWrapper) {
      this.mapSelector.modalWrapper.addEventListener('click', (e) => {
        e.stopPropagation();
      });

      const mapContainer = this.mapSelector.modalWrapper.querySelector('#mapSelectorContainer');
      if (mapContainer) {
        mapContainer.addEventListener('click', (e) => {
          e.stopPropagation();
        });
      }
    }

    window.addEventListener('resize', () => {
      if (this.mapSelector.map) {
        const isMobile = window.innerWidth <= 768;
        if (isMobile) {
          const controls = document.querySelectorAll(".leaflet-control");
          controls.forEach((control) => {
            if (control.classList.contains("leaflet-draw")) {
              control.style.marginRight = "10px";
            }
            if (control.classList.contains("leaflet-control-zoom")) {
              control.style.marginLeft = "10px";
            }
          });
        }
      }
    });
  }

  setupModalEvents() {
    const closeBtn = document.querySelector('.mapSelectorCloseBtn');
    const confirmBtn = document.querySelector('#confirmSelectionBtn');

    if (closeBtn) {
      closeBtn.addEventListener('click', (e) => {
        if (this.mapSelector.isEditing) {
          e.preventDefault();
          alert('Veuillez terminer ou annuler vos modifications avant de fermer');
          return;
        }
        this.mapSelector.close();
      });
    }

    if (confirmBtn) {
      confirmBtn.addEventListener('click', (e) => {
        if (this.mapSelector.isEditing) {
          e.preventDefault();
          alert('Veuillez terminer ou annuler vos modifications avant de confirmer');
          return;
        }
        this.mapSelector.options.onSelectionConfirmed(this.mapSelector.getSelectedAreas());
        this.mapSelector.close();
      });
    }
  }
}