/*
 * Welcome to your app's main JavaScript file!
 *
 * We recommend including the built version of this JavaScript file
 * (and its CSS file) in your base layout (base.html.twig).
 */

// any CSS you import will output into a single css file (app.css in this case)
import './styles/app.css';
import './utils.js';
import './opening_hours.js';
import './josm.js';



// Attendre le chargement du DOM
document.addEventListener('DOMContentLoaded', () => {
  console.log('DOMContentLoaded');





  updateMapHeightForLargeScreens()

  function check_validity(e) {
    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');
    }
  }
  // Générer une couleur pastel aléatoire
  const genererCouleurPastel = () => {
    // Utiliser des valeurs plus claires (180-255) pour obtenir des tons pastel
    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})`;
  };

  const randombg = genererCouleurPastel();
  // Appliquer la couleur au body
  document.body.style.backgroundColor = randombg;

  // Gestion du bouton pour afficher tous les champs
  const btnShowAllFields = document.querySelector('#showAllFields');
  if (btnShowAllFields) {
    console.log('btnShowAllFields détecté');
    btnShowAllFields.addEventListener('click', () => {
      // Sélectionner tous les inputs dans le formulaire
      const form = document.querySelector('form');
      if (form) {
        const hiddenInputs = form.querySelectorAll('.d-none');
        hiddenInputs.forEach(input => {
          input.classList.toggle('d-none');
        });
      }
    });
  }
  const btnClosedCommerce = document.querySelector('#closedCommerce');
  if (btnClosedCommerce) {
    btnClosedCommerce.addEventListener('click', () => {

      if (!confirm('Êtes-vous sûr de vouloir signaler ce commerce comme fermé ?')) {
        return;
      }
      window.location.href = '/closed_commerce/' + document.getElementById('app_public_closed_commerce').value;
    });
  }

  openingHoursFormManager.init();


  // lister les changesets de l'utilisateur osm-commerces 
  async function listChangesets() {
    // const changesets = await fetch('https://api.openstreetmap.org/api/0.6/changesets?display_name=osm-commerce-fr');
    // Ajouter le header Accept pour demander du JSON
    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);

    // Grouper les changesets par période
    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++;
      }
    });

    // Afficher les statistiques
    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>
      `;
    }
  }

  // Vérifier si l'élément avec l'ID 'userChangesHistory' existe avant d'appeler la fonction
  if (document.getElementById('userChangesHistory')) {
    listChangesets();
  } else {
    console.log('userChangesHistory non trouvé');
  }



  /**
   * mettre à jour la barre de progression 
   * pour le formulaire de modification
   */
  function updateCompletionProgress() {
    const inputs = document.querySelectorAll('input[type="text"]');
    let filledInputs = 0;
    let totalInputs = inputs.length;

    inputs.forEach(input => {
      if (input.value.trim() !== '') {
        filledInputs++;
      }
    });

    const completionPercentage = (filledInputs / totalInputs) * 100;
    const progressBar = document.querySelector('#completion_progress .progress-bar');
    if (progressBar) {
      progressBar.style.width = completionPercentage + '%';
      progressBar.setAttribute('aria-valuenow', completionPercentage);
      document.querySelector('#completion_display').innerHTML = `Votre commerce est complété à ${Math.round(completionPercentage)}%`;
    }
  }

  document.querySelectorAll('input[type="text"]').forEach(input => {
    input.addEventListener('blur', updateCompletionProgress);
  });
  const form = document.querySelector('form')
  if (form) {
    form.addEventListener('submit', check_validity);
    updateCompletionProgress()
  }
  updateCompletionProgress();

  // Focus sur le premier champ texte au chargement 
  const firstTextInput = document.querySelector('input.form-control');
  if (firstTextInput) {
    firstTextInput.focus();
    console.log('focus sur le premier champ texte', firstTextInput);
  } else {
    console.log('pas de champ texte trouvé');
  }



  function parseCuisine() {
    const cuisineInput = document.querySelector('input[name="commerce_tag_value__cuisine"]');

    // Récupérer tous les checkboxes de type de cuisine
    const cuisineCheckboxes = document.querySelectorAll('input[name="cuisine_type"]');

    // Ajouter un écouteur d'événement sur chaque checkbox
    cuisineCheckboxes.forEach(checkbox => {
      checkbox.addEventListener('change', () => {
        // Récupérer toutes les checkboxes cochées
        const checkedCuisines = Array.from(document.querySelectorAll('input[name="cuisine_type"]:checked'))
          .map(input => input.value);

        // Mettre à jour l'input avec les valeurs séparées par des points-virgules
        cuisineInput.value = checkedCuisines.join(';');
      });
    });
  }

  parseCuisine();

  // Tri automatique des tableaux
  const tables = document.querySelectorAll('table');
  tables.forEach(table => {
    table.classList.add('js-sort-table');
  });

  async function searchInseeCode(query) {
    try {

      // Afficher l'indicateur de chargement
      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 [];
    }
  }

  // Modifier la fonction de recherche existante
  const searchInput = document.getElementById('app_admin_labourer');
  const suggestionList = document.getElementById('suggestionList');

  if (searchInput && suggestionList) {
    let timeoutId;

    searchInput.addEventListener('input', () => {
      clearTimeout(timeoutId);
      const query = searchInput.value.trim();

      if (query.length < 2) {
        suggestionList.innerHTML = '';
        return;
      }

      timeoutId = setTimeout(async () => {
        const suggestions = await searchInseeCode(query);
        suggestionList.innerHTML = '';

        if (suggestions.length === 0) {
          const li = document.createElement('li');
          li.style.cssText = `
            padding: 8px 12px;
            color: #666;
            font-style: italic;
          `;
          li.textContent = 'Aucun résultat trouvé';
          suggestionList.appendChild(li);
          return;
        }

        suggestions.forEach(suggestion => {
          const li = document.createElement('li');
          li.style.cssText = `
            padding: 8px 12px;
            cursor: pointer;
            border-bottom: 1px solid #eee;
          `;
          li.textContent = suggestion.label;

          li.addEventListener('mouseenter', () => {
            li.style.backgroundColor = '#f0f0f0';
          });

          li.addEventListener('mouseleave', () => {
            li.style.backgroundColor = 'white';
          });

          li.addEventListener('click', () => {
            searchInput.value = suggestion.insee;
            suggestionList.innerHTML = '';
            labourer();
          });

          suggestionList.appendChild(li);
        });
      }, 300);
    });
  }
});