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

  initSearchControls() {
    const searchControlDiv = document.createElement('div');
    searchControlDiv.id = 'mapSearchControlContainer';
    searchControlDiv.innerHTML = `
      <div class="mapModeSelector">
        <div class="modeSwitcherButtons">
          <button id="searchModeBtn" class="modeSwitcherBtn ${this.mapSelector.activeMode === 'search' ? 'active' : ''}">
            <i class="fa-solid fa-search"></i> Rechercher
          </button>
          <span class="modeSeparator">OU</span>
          <button id="drawModeBtn" class="modeSwitcherBtn ${this.mapSelector.activeMode === 'draw' ? 'active' : ''}">
            <i class="fa-solid fa-draw-polygon"></i> Dessiner
          </button>
        </div>
      </div>
      <div class="mapSearchInputContainer ${this.mapSelector.activeMode === 'search' ? '' : 'hidden'}">
        <div class="mapSearchControl">
          <input type="text" id="mapSearchInput" placeholder="Rechercher une ville ou un lieu...">
          <button id="mapSearchButton">OK</button>
        </div>
        <div id="mapSearchResults" class="hidden"></div>
      </div>
    `;

    const mapControl = document.getElementById('mapSelectorContainer');
    if (mapControl) {
      mapControl.appendChild(searchControlDiv);
      this._bindSearchEvents();
    } else {
      console.error("Container mapSelectorContainer non trouvé");
    }
  }

  _bindSearchEvents() {
    const searchButton = document.getElementById('mapSearchButton');
    const searchInput = document.getElementById('mapSearchInput');
    const searchModeBtn = document.getElementById('searchModeBtn');
    const drawModeBtn = document.getElementById('drawModeBtn');

    if (searchButton && searchInput) {
      searchButton.addEventListener('click', () => this.performSearch());

      searchInput.addEventListener('input', () => {
        this.performSearch();
      });
    }

    if (searchModeBtn) {
      searchModeBtn.addEventListener('click', () => {
        this.setMode('search');
      });
    }

    if (drawModeBtn) {
      drawModeBtn.addEventListener('click', () => {
        this.setMode('draw');
      });
    }
  }

  performSearch() {
    const searchInput = document.getElementById('mapSearchInput');
    const searchResults = document.getElementById('mapSearchResults');

    if (!searchInput || !searchResults) return;

    const query = searchInput.value;
    if (!query) return;

    this.mapSelector.searchResultsLayer.clearLayers();
    searchResults.innerHTML = '<p>Recherche en cours...</p>';
    searchResults.classList.remove('hidden');

    searchLocation(query)
      .then(data => {
        if (data && data.length > 0) {
          this.displaySearchResults(data, searchResults);
        } else {
          searchResults.innerHTML = '<p>Aucun résultat trouvé.</p>';
        }
      })
      .catch(error => {
        console.error('Erreur lors de la recherche:', error);
        searchResults.innerHTML = '<p>Erreur lors de la recherche. Veuillez réessayer.</p>';
      });
  }

  displaySearchResults(results, resultsContainer) {
    resultsContainer.innerHTML = '';

    const resultList = document.createElement('ul');
    resultList.className = 'mapSearchResultsList';

    results.forEach(result => {
      const resultItem = document.createElement('li');
      resultItem.className = 'mapSearchResultItem';
      resultItem.textContent = result.properties.city + (result.properties.postcode ? ` (${result.properties.postcode})` : '');

      resultItem.addEventListener('click', () => {
        this.selectSearchResult(result);
        resultsContainer.classList.add('hidden');
      });

      resultList.appendChild(resultItem);
    });

    resultsContainer.appendChild(resultList);
  }

  selectSearchResult(result) {
    try {
      const { geometry, osm_type, osm_id } = result;

      if (Array.isArray(geometry.coordinates)) {
        const geoJSON = {
          type: 'Feature',
          geometry,
          properties: {
            name: result.display_name,
            source: 'search'
          }
        };

        this.mapSelector.drawingManager.disableEditingForMultiPolygon(geoJSON);
        this.mapSelector.geoJSONHandler.addGeoJSONToSelection(geoJSON);

        const bounds = L.geoJSON(geoJSON).getBounds();
        this.mapSelector.map.fitBounds(bounds);
      } else {
        if (osm_type && osm_id) {
          this.fetchBoundary(osm_type, osm_id, result);
        }
      }
    } catch (error) {
      console.error("Erreur lors de la sélection du résultat", error);
    }
  }

  fetchBoundary(osmType, osmId, resultData) {
    const osmTypeFormatted = osmType.charAt(0).toUpperCase() + osmType.slice(1);
    const url = `https://nominatim.openstreetmap.org/details.php?osmtype=${osmTypeFormatted}&osmid=${osmId}&format=json&polygon_geojson=1`;

    fetch(url)
      .then(response => response.json())
      .then(data => {
        if (data && data.geometry) {
          const geoJSON = {
            type: 'Feature',
            geometry: data.geometry,
            properties: {
              name: resultData.display_name,
              source: 'search'
            }
          };

          this.mapSelector.drawingManager.disableEditingForMultiPolygon(geoJSON);
          this.mapSelector.geoJSONHandler.addGeoJSONToSelection(geoJSON);
        } else {
          console.warn("Pas de géométrie trouvée pour:", resultData.display_name);
        }
      })
      .catch(error => {
        console.error('Erreur lors de la récupération de la limite:', error);
      });
  }

  setMode(mode) {
    this.mapSelector.activeMode = mode;
    const drawControls = document.querySelector('.leaflet-draw');
    const searchControls = document.querySelector('.mapSearchInputContainer');

    if (mode === 'draw') {
      drawControls?.classList.remove('hidden');
      searchControls?.classList.add('hidden');
    } else if (mode === 'search') {
      drawControls?.classList.add('hidden');
      searchControls?.classList.remove('hidden');
    }

    // Mettre à jour l'état des boutons
    const drawModeBtn = document.querySelector('#drawModeBtn');
    const searchModeBtn = document.querySelector('#searchModeBtn');

    if (drawModeBtn && searchModeBtn) {
      drawModeBtn.classList.toggle('active', mode === 'draw');
      searchModeBtn.classList.toggle('active', mode === 'search');
    }
  }
}