.headerInfos {
  display: flex;
  justify-content: space-between;
  margin: 20px;
  background: rgba(23, 42, 75, 0.15);
}

.divDate, .meteo {
  background-color: rgba(23, 42, 75, 0.1);
  border-radius: 10px;
  box-shadow: inset 0 1px 2px 0 rgba(0,0,0,.2);
  padding: 10px 20px;
  display: flex;
  align-items: center;
}

.divDate {
  order: 1;
  gap: 10px;
}

.horloge, .ladate {
  margin-right: 10px;
  font-size: 2em;
  font-weight: bold;
  color: white;
}

.ladate span {
  display: block;
  margin-bottom: 0;
}

.temperature {
  font-size: 2.5em;
  font-weight: bold;
  padding-right: 50px;
  color: white;
}

.meteo {
  order: 2;
  display: flex;
  flex-direction: column;
  color: white;
}

.ville-temp-container {
  display: flex;
  justify-content: space-between;
  gap: 20px;
}

.icon {
  margin-top: 5px;
}

span.ville {
  padding-right: 50px;
  color: white;
}

.horloge, .ladate, .temperature, .ville, .description {
  color: white;
}

/* Responsive pour les écrans plus petits */
@media (max-width: 700px) {
  .headerInfos {
    flex-direction: column;
    margin: 10px;
  }
  .ville-temp-container {
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
  }
  .temperature, .ville {
    padding-right: 0;
    font-size: 1.5em;
  }
}

const sortableElement = document.querySelector('.appheader');

function insertAfter(referenceNode, newNode) {
  referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
}

function createAndInsertDiv(className, referenceNode) {
  var newDiv = document.createElement("div");
  newDiv.classList.add(className);
  referenceNode.appendChild(newDiv);
  return newDiv;
}

if (sortableElement) {
  var headerInfos = document.createElement('div');
  headerInfos.classList.add('headerInfos');
  insertAfter(sortableElement, headerInfos);

  var divDate = createAndInsertDiv('divDate', headerInfos);
  var timeDiv = createAndInsertDiv('horloge', divDate);
  var dateDiv = createAndInsertDiv('ladate', divDate);

  // Réduction taille police date
  dateDiv.style.fontSize = '1.2em';

  var meteoDiv = createAndInsertDiv('meteo', headerInfos);

  function afficherDateHeure() {
    const maintenant = new Date();

    const optionsJour = {
      weekday: 'long'
    };

    const optionsHeure = {
      hour: 'numeric',
      minute: 'numeric'
    };

    const optionsDate = {
      year: 'numeric',
      month: 'long',
      day: 'numeric'
    };

    const jourFormatted = maintenant.toLocaleDateString('fr-FR', optionsJour);
    const dateFormatted = maintenant.toLocaleDateString('fr-FR', optionsDate);
    const heureFormatted = maintenant.toLocaleTimeString('fr-FR', optionsHeure);

    dateDiv.innerHTML = '';
    var spanJourSemaine = document.createElement('span');
    spanJourSemaine.textContent = jourFormatted;
    dateDiv.appendChild(spanJourSemaine);

    timeDiv.textContent = heureFormatted;
    dateDiv.appendChild(document.createTextNode(dateFormatted));
  }

  function afficherMeteo(latitude, longitude) {
    const apiKey = '10c9572181cd9fcdf21ac73568f7f06d';

    fetch(`https://api.openweathermap.org/data/2.5/weather?lat=${latitude}&lon=${longitude}&appid=${apiKey}&units=metric&lang=fr`)
      .then(response => response.json())
      .then(data => {
        const temperature = Math.round(data.main.temp);
        const ville = data.name;
        const icon = data.weather[0].icon;
        const description = data.weather[0].description;

        meteoDiv.innerHTML = `
          <div class="ville-temp-container">
            <div class="temperature">${temperature}°C</div>
            <div class="icon"><img src="https://openweathermap.org/img/wn/${icon}.png" alt="${description}"></div>
          </div>
          <div class="ville-temp-container">
            <span class="ville">${ville}</span>
            <span class="description">${description}</span>
          </div>`;
      })
      .catch(error => {
        console.error('Erreur lors de la récupération des données météo', error);
        meteoDiv.textContent = 'Impossible de récupérer les données météo';
      });
  }

  const latitudeDefault = 48.8566;
  const longitudeDefault = 2.3522;

  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(
      (position) => {
        afficherMeteo(position.coords.latitude, position.coords.longitude);
      },
      () => {
        afficherMeteo(latitudeDefault, longitudeDefault);
      }
    );
  } else {
    afficherMeteo(latitudeDefault, longitudeDefault);
  }

  afficherDateHeure();
  setInterval(afficherDateHeure, 1000);
}