/*
 * 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 jQuery from 'jquery';
window.$ = jQuery;
window.jQuery = jQuery;
import 'tablesort/tablesort.css';

// start the Stimulus application
// import './bootstrap';

import './utils.js';
import './opening_hours.js';
import './josm.js';
import './edit.js';
import './table-map-toggles.js';
import './stats-charts.js';
import './dashboard-charts.js';

import Chart from 'chart.js/auto';
import ChartDataLabels from 'chartjs-plugin-datalabels';
import maplibregl from 'maplibre-gl';
import {
  genererCouleurPastel,
  setupCitySearch,
  handleAddCityFormSubmit,
  enableLabourageForm,
  getLabourerUrl,
  adjustListGroupFontSize,
  toggleCompletionInfo,
  updateMapHeightForLargeScreens
} from './utils.js';
import tableSortJs from 'table-sort-js/table-sort.js';
console.log('TableSort', tableSortJs)

// Charger table-sortable (version non minifiée locale)
// import '../assets/js/table-sortable.js';

window.Chart = Chart;
window.genererCouleurPastel = genererCouleurPastel;
window.setupCitySearch = setupCitySearch;
window.handleAddCityFormSubmit = handleAddCityFormSubmit;
window.getLabourerUrl = getLabourerUrl;
window.ChartDataLabels = ChartDataLabels;
window.maplibregl = maplibregl;
window.toggleCompletionInfo = toggleCompletionInfo;
window.updateMapHeightForLargeScreens = updateMapHeightForLargeScreens;
// window.Tablesort = Tablesort;

Chart.register(ChartDataLabels);

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

  if(updateMapHeightForLargeScreens){

    
    window.addEventListener('resize', updateMapHeightForLargeScreens);
  }

  const randombg = genererCouleurPastel();
  // Appliquer la couleur au body

  document.querySelectorAll('body, .edit-land, .body-landing').forEach(element => {
    element.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) {
        // Sélectionner tous les inputs sauf #validation_messages
        const hiddenInputs = form.querySelectorAll('#advanced_tags');

        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();


  // 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é');
  }

  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é');
  // }




  parseCuisine();

  // 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);
    });
  }

  if(enableLabourageForm){

    enableLabourageForm();
  }
  adjustListGroupFontSize('.list-group-item');

  // Activer le tri naturel sur tous les tableaux avec la classe table-sort
  if (tableSortJs) {
    tableSortJs();
  }else{
    console.log('pas de tablesort')
  }

  // Initialisation du tri et filtrage sur les tableaux du dashboard et de la page stats
  // if (document.querySelector('#dashboard-table')) {
  //   $('#dashboard-table').tableSortable({
  //     pagination: false,
  //     showPaginationLabel: true,
  //     searchField: '#dashboard-table-search',
  //     responsive: false
  //   });
  // }
  // if (document.querySelector('#stats-table')) {
  //   $('#stats-table').tableSortable({
  //     pagination: false,
  //     showPaginationLabel: true,
  //     searchField: '#stats-table-search',
  //     responsive: false
  //   });
  // }

  // Correction pour le formulaire de labourage
  const labourerForm = document.getElementById('labourerForm');
  if (labourerForm) {
    labourerForm.addEventListener('submit', async function(e) {
      e.preventDefault();
      const zipInput = document.getElementById('selectedZipCode');
      const cityInput = document.getElementById('citySearch');
      let insee = zipInput.value;
      if (!insee && cityInput && cityInput.value.trim().length > 0) {
        // Recherche du code INSEE via l'API
        const response = await fetch(`https://geo.api.gouv.fr/communes?nom=${encodeURIComponent(cityInput.value.trim())}&fields=nom,code&limit=1`);
        const data = await response.json();
        if (data.length > 0) {
          insee = data[0].code;
        }
      }
      if (insee) {
        window.location.href = `/admin/labourer/${insee}`;
      } else {
        alert('Veuillez sélectionner une ville valide.');
      }
    });
  }

  // Ajouter un écouteur pour l'événement 'load' de MapLibre afin d'ajuster la hauteur de la carte
  if (window.maplibregl && document.getElementById('map')) {
    // On suppose que la carte est initialisée ailleurs et accessible via window.mapInstance
    // Sinon, on peut essayer de détecter l'instance automatiquement
    let mapInstance = window.mapInstance;
    if (!mapInstance && window.maplibreMap) {
      mapInstance = window.maplibreMap;
    }
    // Si l'instance n'est pas trouvée, essayer de la récupérer via une variable globale courante
    if (!mapInstance && window.map) {
      mapInstance = window.map;
    }
    if (mapInstance && typeof mapInstance.on === 'function') {
      mapInstance.on('load', function() {
        updateMapHeightForLargeScreens();
      });
    }
  }
  //updateMapHeightForLargeScreens();

});