function colorHeadingTable() {
  const headers = document.querySelectorAll('th');
  headers.forEach(header => {
    const text = header.textContent;
    const match = text.match(/\((\d+)\s*\/\s*(\d+)\)/);
    if (match) {
      const [_, completed, total] = match;
      const ratio = completed / total;
      const alpha = ratio.toFixed(2);
      header.style.backgroundColor = `rgba(154, 205, 50, ${alpha})`;
    }
  });
}

function check_validity(e) {
  list_inputs_good_to_fill = [
    'input[name="commerce_tag_value__contact:email"]',
    'input[name="commerce_tag_value__contact:phone"]',
    'input[name="commerce_tag_value__contact:website"]',
    'input[name="commerce_tag_value__contact:mastodon"]',
    'input[name="commerce_tag_value__address"]',
    'input[name="custom_opening_hours"]',
    'input[name="commerce_tag_value__contact:street"]',
    'input[name="commerce_tag_value__contact:housenumber"]',
    'input[name="custom__cuisine"]',
  ]

  list_inputs_good_to_fill.forEach(selector => {
    const input = document.querySelector(selector);
    if (input) {
      if (input.value.trim() !== '') {
        input.classList.add('good_filled');
      } else {
        input.classList.remove('good_filled');
      }
    }
  });
  let errors = [];
  document.querySelectorAll('.is-invalid').forEach(input => {
    input.classList.remove('is-invalid');
  });

  const nameInput = document.querySelector('input[name="commerce_tag_value__name"]');
  if (!nameInput.value.trim()) {
    errors.push("Le nom de l'établissement est obligatoire");
    nameInput.classList.add('is-invalid');
  }

  const emailInput = document.querySelector('input[name="commerce_tag_value__contact:email"]');
  if (emailInput && emailInput.value) {
    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    if (!emailRegex.test(emailInput.value)) {
      errors.push("L'adresse email n'est pas valide");
      emailInput.classList.add('is-invalid');
    }
  }

  const phoneInput = document.querySelector('input[name="commerce_tag_value__contact:phone"]');
  if (phoneInput && phoneInput.value) {
    const phoneRegex = /^(\+33|0)[1-9](\d{2}){4}$/;
    if (!phoneRegex.test(phoneInput.value.replace(/\s/g, ''))) {
      errors.push("Le numéro de téléphone n'est pas valide");
      phoneInput.classList.add('is-invalid');
    }
  }

  if (errors.length > 0) {
    e.preventDefault();
    document.querySelector('#validation_messages').innerHTML = errors.join('<br>');
    document.querySelector('#validation_messages').classList.add('is-invalid');
  }
}

const genererCouleurPastel = () => {
  const r = Math.floor(Math.random() * 75 + 180);
  const g = Math.floor(Math.random() * 75 + 180);
  const b = Math.floor(Math.random() * 75 + 180);
  return `rgb(${r}, ${g}, ${b})`;
};

async function searchInseeCode(query) {
  try {
    document.querySelector('#loading_search_insee').classList.remove('d-none');

    const response = await fetch(`https://geo.api.gouv.fr/communes?nom=${query}&fields=nom,code,codesPostaux&limit=10`);
    const data = await response.json();
    document.querySelector('#loading_search_insee').classList.add('d-none');

    return data.map(commune => ({
      label: `${commune.nom} (${commune.codesPostaux.join(', ')}, code insee ${commune.code})`,
      insee: commune.code,
      postcodes: commune.codesPostaux
    }));
  } catch (error) {
    console.error('Erreur lors de la recherche du code INSEE:', error);
    return [];
  }
}

function updateMapHeightForLargeScreens() {
  const mapFound = document.querySelector('#map');
  if (mapFound && window.innerHeight > 800 && window.innerWidth > 800) {
    mapFound.style.height = window.innerWidth * 0.8 + 'px';
  } else {
    console.log('window.innerHeight', window.innerHeight);
  }
}

async function listChangesets() {
  const options = {
    headers: {
      'Accept': 'application/json'
    }
  };
  const changesets = await fetch('https://api.openstreetmap.org/api/0.6/changesets?display_name=osm-commerce-fr', options);
  const data = await changesets.json();
  console.log(data.changesets.length);

  const now = new Date();
  const last24h = new Date(now - 24 * 60 * 60 * 1000);
  const last7days = new Date(now - 7 * 24 * 60 * 60 * 1000);
  const last30days = new Date(now - 30 * 24 * 60 * 60 * 1000);

  const stats = {
    last24h: 0,
    last7days: 0,
    last30days: 0
  };

  data.changesets.forEach(changeset => {
    const changesetDate = new Date(changeset.closed_at);

    if (changesetDate >= last24h) {
      stats.last24h++;
    }
    if (changesetDate >= last7days) {
      stats.last7days++;
    }
    if (changesetDate >= last30days) {
      stats.last30days++;
    }
  });

  const historyDiv = document.getElementById('userChangesHistory');
  if (historyDiv) {
    historyDiv.innerHTML = `
      <div id="changesets_history">
        <p>Changesets créés :</p>
        <div class="row">
           <div class="col-6">Dernières 24h :</div> <div class="col-6 text-right">${stats.last24h}</div>
           <div class="col-6">7 derniers jours :</div> <div class="col-6 text-right">${stats.last7days}</div>
           <div class="col-6">30 derniers jours :</div> <div class="col-6 text-right">${stats.last30days}</div>
        </div>
      </div>
      `;
  }
}

function openInPanoramax() {
  const center = map.getCenter();
  const zoom = map.getZoom();
  const panoramaxUrl = `https://api.panoramax.xyz/?focus=map&map=${zoom}/${center.lat}/${center.lng}`;
  window.open(panoramaxUrl);
}

function enableLabourageForm() {
  const citySearchInput = document.getElementById('citySearch');
  const citySuggestionsList = document.getElementById('citySuggestions');

  if (citySearchInput && citySuggestionsList) {
    setupCitySearch('citySearch', 'citySuggestions', function (result_search) {
      const labourageBtn = document.querySelector('.btn-labourer');
      if (labourageBtn) {
        labourageBtn.innerHTML = '<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> Chargement...';
        labourageBtn.disabled = true;
      }
      window.location.href = getLabourerUrl(result_search);
    });
  }
}

function setupCitySearch(inputId, suggestionListId, onSelect) {
  const searchInput = document.getElementById(inputId);
  const suggestionList = document.getElementById(suggestionListId);

  if (!searchInput || !suggestionList) return;

  let timeoutId = null;
  let searchOngoing = false;

  searchInput.addEventListener('input', function () {
    clearTimeout(timeoutId);
    const query = this.value.trim();
    if (query.length < 3) {
      clearSuggestions();
      return;
    }
    timeoutId = setTimeout(() => {
      if (!searchOngoing) {
        searchOngoing = true;
        performSearch(query).then(() => {
            searchOngoing = false;
        });
      }
    }, 300);
  });

  async function performSearch(query) {
    try {
      const response = await fetch(`https://geo.api.gouv.fr/communes?nom=${encodeURIComponent(query)}&fields=nom,code,codesPostaux&limit=5`);
      const data = await response.json();
      const citySuggestions = data.map(city => ({
        name: city.nom,
        postcode: city.codesPostaux[0],
        insee: city.code,
        display_name: `${city.nom} (${city.codesPostaux[0]})`
      }));
      displaySuggestions(citySuggestions);
    } catch (error) {
      console.error("Erreur de recherche:", error);
    }
  }

  function displaySuggestions(suggestions) {
    clearSuggestions();
    suggestions.forEach(suggestion => {
      const item = document.createElement('div');
      item.classList.add('suggestion-item');
      item.textContent = suggestion.display_name;
      item.addEventListener('click', () => {
        searchInput.value = suggestion.display_name;
        clearSuggestions();
        if (onSelect) {
          onSelect(suggestion);
        }
      });
      suggestionList.appendChild(item);
    });
    suggestionList.style.display = 'block';
  }

  function clearSuggestions() {
    suggestionList.innerHTML = '';
    suggestionList.style.display = 'none';
  }

  document.addEventListener('click', (e) => {
    if (!searchInput.contains(e.target) && !suggestionList.contains(e.target)) {
      clearSuggestions();
    }
  });
}

function getLabourerUrl(obj) {
  if (obj && obj.insee) {
    return `/admin/labourer_insee/${obj.insee}`;
  }
  return '#';
}

function handleAddCityFormSubmit(event) {
    event.preventDefault();
    const zipCode = document.getElementById('selectedZipCode').value;
    if (zipCode && zipCode.match(/^\d{5}$/)) {
        window.location.href = `/admin/labourer/${zipCode}`;
    } else {
        alert('Veuillez sélectionner une ville valide avec un code postal.');
    }
}

function colorizePercentageCells(selector, color = '154, 205, 50') {
  document.querySelectorAll(selector).forEach(cell => {
    const percentage = parseInt(cell.textContent);
    if (!isNaN(percentage)) {
      const alpha = percentage / 100;
      cell.style.backgroundColor = `rgba(${color}, ${alpha})`;
    }
  });
}

function colorizePercentageCellsRelative(selector, color = '154, 205, 50') {
  const cells = document.querySelectorAll(selector);

  let maxValue = 0;
  cells.forEach(cell => {
    const value = parseInt(cell.textContent);
    if (!isNaN(value) && value > maxValue) {
      maxValue = value;
    }
  });

  cells.forEach(cell => {
    const value = parseInt(cell.textContent);
    if (!isNaN(value)) {
      const alpha = value / maxValue;
      cell.style.backgroundColor = `rgba(${color}, ${alpha})`;
    }
  });
}

function adjustListGroupFontSize(selector, minFont = 0.8, maxFont = 1.2) {
  const items = document.querySelectorAll(selector);
  const count = items.length;
  let fontSize = maxFont;
  if (count > 0) {
    fontSize = Math.max(minFont, maxFont - (count - 5) * 0.05);
  }
  items.forEach(item => {
    item.style.fontSize = fontSize + 'rem';
  });
}

window.setupCitySearch = setupCitySearch;
window.handleAddCityFormSubmit = handleAddCityFormSubmit;
window.colorizePercentageCells = colorizePercentageCells;
window.colorizePercentageCellsRelative = colorizePercentageCellsRelative;
window.check_validity = check_validity;
window.openInPanoramax = openInPanoramax;
window.listChangesets = listChangesets;
window.colorHeadingTable = colorHeadingTable;
window.adjustListGroupFontSize = adjustListGroupFontSize;
window.genererCouleurPastel = genererCouleurPastel;