// Intercepteur global pour gérer les erreurs 401 (session expirée)
const originalFetch = window.fetch;
window.fetch = async function (...args) {
  const response = await originalFetch.apply(this, args);
  if (response.status === 401) {
    try {
      const data = await response.clone().json();
      if (data.redirect) {
        alert(
          "Votre session a expiré. Vous allez être redirigé vers la page de connexion.",
        );
        window.location.href = data.redirect;
      }
    } catch (e) {
      // Si ce n'est pas du JSON, on laisse passer
    }
  }
  return response;
};

//gestion des form villes et adresse
const ADDOK_URL = "https://api-adresse.data.gouv.fr/search/";

function debounce(fn, delay) {
  let timer;
  return function (...args) {
    clearTimeout(timer);
    timer = setTimeout(() => fn.apply(this, args), delay);
  };
}

/**
 * Objectif : Configurer un champ d'adresse avec autocomplétion en utilisant une API externe.
 * Paramètres :
 *   - param1 (string) : L'identifiant de l'élément input où l'utilisateur saisit l'adresse.
 *   - param2 (string) : L'identifiant de l'élément où les suggestions d'autocomplétion seront affichées.
 *   - requete (string) : La requête supplémentaire à ajouter à l'URL de l'API.
 */
async function setupadresse(param1, param2, requete) {
  const inputElement = document.getElementById(param1);
  const suggestionsElement = document.getElementById(param2);

  if (!inputElement || !suggestionsElement) {
    console.error("Éléments DOM non trouvés");
    return;
  }

  inputElement.addEventListener(
    "input",
    debounce(async function () {
      const query = inputElement.value;

      // Si la longueur de la requête est inférieure à 3, efface les suggestions
      if (query.length < 3) {
        suggestionsElement.innerHTML = "";
        return;
      }

      try {
        // Envoie une requête à l'API pour obtenir des suggestions d'autocomplétion
        const response = await fetch(
          `${ADDOK_URL}?q=${query}&limit=5${requete}`,
        );
        const data = await response.json();

        suggestionsElement.innerHTML = "";

        // Si des suggestions sont disponibles, les affiche
        if (data.features.length > 0) {
          data.features.forEach((feature) => {
            const suggestion = document.createElement("div");
            suggestion.classList.add("autocomplete-suggestion");

            // Détermine le contenu de la suggestion en fonction de la requête
            if (requete === "&type=municipality") {
              suggestion.textContent = `${feature.properties.city} (${feature.properties.postcode})`;
            } else {
              suggestion.textContent = feature.properties.label;
            }

            // Ajoute un écouteur d'événement 'click' à chaque suggestion
            suggestion.addEventListener("click", function () {
              if (requete === "&type=municipality") {
                inputElement.value = `${feature.properties.city} (${feature.properties.postcode})`;
              } else {
                inputElement.value = feature.properties.label;
              }
              suggestionsElement.innerHTML = "";
            });

            // Ajoute la suggestion à l'élément de suggestions
            suggestionsElement.appendChild(suggestion);
          });
        }
      } catch (error) {
        console.error("Erreur lors de la récupération des suggestions:", error);
      }
    }, 300),
  );
}

/**
 * Objectif : Décoder une chaîne base64 et parser le JSON.
 * Paramètres :
 *   - encodedString (string) : La chaîne encodée en base64.
 * Retourne :
 *   - (object) : L'objet JSON décodé.
 */
function decodeBase64Json(encodedString) {
  return JSON.parse(
    new TextDecoder().decode(
      Uint8Array.from(atob(encodedString), (c) => c.charCodeAt(0)),
    ),
  );
}
/**
 * Objectif : Afficher les informations d'une personne dans une fenêtre contextuelle en fonction de son rôle (bénévole ou jeune).
 * Paramètres :
 *   - personne (string) : Une chaîne encodée en base64 contenant les informations de la personne au format JSON.
 */
function PopUpInfos(personne) {
  // Décode la chaîne base64 et parse le JSON
  const personneData = decodeBase64Json(personne);

  let content = "";

  // Si la personne est un bénévole (contient voeu1), affiche les informations correspondantes
  if (personneData.voeu1) {
    const isGroupRole = ["responsable de groupe", "accompagnateur"].includes(
      (personneData.voeu1 || "").trim().toLowerCase(),
    );
    content = `
        <p><b>${personneData.voeu1 || "—"}</b></p>
        ${isGroupRole && personneData.groupe_nom ? `<p>${personneData.groupe_nom}</p>` : ""}
        <hr>
        <p>${personneData.tel}</p>
        <p>${personneData.email}</p>
        <hr>
        <p>Contact d'urgence: ${personneData.contact_urgence}</p>
        <p>${personneData.tel_urgence}</p>
        <hr>
        <p>Problèmes médicaux: ${personneData.alergie || "aucun"}</p>
        <p>Régime: ${personneData.regime || "aucun"}</p>
        <p>Date de naissance: ${formatDateFR(personneData.date_naissance)}</p>
        <hr>
        ${(["responsable de groupe", "accompagnateur"].includes((personneData.voeu1 || "").trim().toLowerCase()) ? personneData.groupe_paiement : true) ? `<p>Paiement : ${personneData.paye ? '<span style="color:green;">&#x2705;</span>' : '<span style="color:red;">&#x274C;</span>'}</p>` : ""}
        <p>B3 : ${personneData.B2depose ? (personneData.B2valide ? '<span style="color:green;">&#x2705;</span>' : "<span>&#128065; déposé</span>") : '<span style="color:red;">&#x274C;</span>'}</p>
        <button class="medical-file-button" onclick="afficheplanben(${personneData.id})">Planning</button>`;
  } else {
    // Si la personne est un jeune, affiche les informations correspondantes
    content = `
        <p>${
          new Date().getFullYear() -
          new Date(personneData.date_naissance).getFullYear()
        } ans (${formatDateFR(personneData.date_naissance)})</p>
        ${personneData.groupe_nom ? `<p><b>${personneData.groupe_nom}</b></p>` : ""}
        <hr>
        <p><b>${personneData.prenom_responsable} ${
          personneData.nom_responsable
        }</b></p>
        <p>${personneData.email_responsable}</p>
        <p>${personneData.tel_responsable}</p>
        <hr>
        <p>Régime: ${personneData.regime || "aucun"}</p>
        ${personneData.groupe_paiement ? `<p>Paiement : ${personneData.paye ? '<span style="color:green;">&#x2705;</span>' : '<span style="color:red;">&#x274C;</span>'}</p>` : ""}
        <button class="medical-file-button" onclick="openMedicalFile('${
          personneData.id
        }')">Fiche médicale</button>`;
  }

  // Affiche la fenêtre contextuelle avec les informations de la personne
  const overlayPoste = document.getElementById("overlayPoste");
  const namediv = document.getElementById("namediv");
  const modifdiv = document.getElementById("modif");
  modifdiv.innerHTML = "";
  const contentdiv = document.getElementById("contentdiv");

  if (overlayPoste && namediv && contentdiv) {
    overlayPoste.style.display = "flex";
    namediv.innerHTML = `${personneData.prenom} ${personneData.nom}`;
    contentdiv.innerHTML = content;
  } else {
    console.error("Éléments DOM non trouvés");
  }
}

function toggleField(number) {
  //affiche le champ regime ou alergie
  var regimeInput = document.getElementById(number);

  if (document.getElementById(number.concat("_oui")).checked) {
    regimeInput.style.display = "block";
  } else {
    regimeInput.style.display = "none";
  }
}

const formatDateFR = (dateString) => {
  const date = new Date(dateString);
  const day = String(date.getDate()).padStart(2, "0");
  const month = String(date.getMonth() + 1).padStart(2, "0");
  const year = date.getFullYear();
  return `${day}-${month}-${year}`;
};

function getCookie(name) {
  const value = `; ${document.cookie}`;
  const parts = value.split(`; ${name}=`);
  if (parts.length === 2) return parts.pop().split(";").shift();
}

function cleanmessage(time = 10) {
  setTimeout(() => {
    document.getElementById("paramMessage").innerText = "";
    document.getElementById("paramMessage").style.display = "none";
  }, time * 1000);
}

function aff_message(message, backgroundColor) {
  document.getElementById("paramMessage").innerText = message;
  document.getElementById("paramMessage").style.backgroundColor =
    backgroundColor;
  document.getElementById("paramMessage").style.display = "block";
}

/**
 * Objectif : Remplir un formulaire de modification des informations d'un jeune en fonction de son ID et du statut administrateur de l'utilisateur.
 * Paramètres :
 *   - id (string) : L'identifiant du jeune dont les informations doivent être modifiées.
 */
async function formModifJeune(id) {
  try {
    // Récupère les informations du jeune à partir de l'API
    const response = await fetch("/infojeune/" + id);
    const data = await response.json();

    // Met à jour le titre de la section de modification
    const namediv = document.getElementById("namediv");
    if (namediv) {
      namediv.innerText = `Modifiez le profil de ${data.prenom} ${data.nom}`;
    }

    // Remplit le formulaire avec les informations du jeune
    const modifDiv = document.getElementById("modif");
    if (modifDiv) {
      modifDiv.innerHTML = `
                <form action="/modifJeune/${id}" method="post">
                    <div class="form-group">
                        <label for="prenom">Prénom</label>
                        <input type="text" name="prenom" value="${
                          data.prenom
                        }" required>
                    </div>
                    <div class="form-group">
                        <label for="nom">Nom</label>
                        <input type="text" name="nom" value="${
                          data.nom
                        }" required>
                    </div>
                    <div class="form-group">
                        <label for="genre">Genre :</label>
                        <select id="genre_modif" name="genre">
                            <option value="Fille">Fille</option>
                            <option value="Garçon">Garçon</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="date_naissance">Date de naissance</label>
                        <input type="date" name="date_naissance" value="${
                          data.date_naissance
                        }" required>
                    </div>
                    <div class="form-group">
                        <label for="classe">Classe :</label>
                        <select id="classe_modif" name="classe">
                            <option value="6ème">6ème</option>
                            <option value="5ème">5ème</option>
                            <option value="4ème">4ème</option>
                            <option value="3ème">3ème</option>
                            <option value="Seconde">Seconde</option>
                            <option value="Première">Première</option>
                            <option value="Terminale">Terminale</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="adresse_mail_jeune">Email du jeune</label>
                        <input type="email" name="adresse_mail_jeune" value="${
                          data.adresse_mail_jeune
                        }">
                    </div>
                    <div class="form-group">
                        <label for="nom_responsable">Nom responsable</label>
                        <input type="text" name="nom_responsable" value="${
                          data.nom_responsable
                        }" required>
                    </div>
                    <div class="form-group">
                        <label for="prenom_responsable">Prénom responsable</label>
                        <input type="text" name="prenom_responsable" value="${
                          data.prenom_responsable
                        }" required>
                    </div>
                    <div class="form-group">
                        <label for="tel">Téléphone du responsable</label>
                        <input type="tel" name="tel_responsable" value="${
                          data.tel_responsable
                        }" required>
                    </div>
                    <div class="form-group">
                        <label for="email_responsable">Email du responsable</label>
                        <input type="email" name="email_responsable" value="${
                          data.email_responsable
                        }" required>
                    </div>
                    <div class="form-group">
                        <label for="adresse_responsable">Adresse du responsable</label>
                        <input type="text" name="adresse_responsable" value="${
                          data.adresse_responsable
                        }" required>
                    </div>
                    <div class="form-group">
                        <label for="instrument">Instrument</label>
                        <input type="text" name="instrument" value="${
                          data.instrument
                        }">
                    </div>
                    <div class="form-group">
                        <label for="regime">Régime particulier</label>
                        <input type="text" name="regime" value="${data.regime}">
                    </div>
                    ${
                      data.isAdmin
                        ? `
                    <div class="form-group">
                        <label for="groupe_id">Groupe</label>
                        <select id="groupe_id" name="groupe_id" required>
                            <option value="" selected disabled>Sélectionne ton groupe</option>
                            <!-- Options avec le JS -->
                        </select>
                    </div>
                    `
                        : `<input type="hidden" id="groupe_id" name="groupe_id" value="${data.groupe_id}" />`
                    }
                    <br>
                    <input type="hidden" id="paye" name="paye" value="${
                      data.paye
                    }" />
                    <input type="hidden" id="paiementref" name="paiementref" value="${
                      data.paiementref
                    }" />
                    <button type="submit">Modifier</button>
                </form>
            `;
    }

    // Sélectionne la classe actuelle du jeune
    let selectElement = document.getElementById("classe_modif");
    if (selectElement) {
      selectElement.value = data.classe;
    }

    // Sélectionne le genre actuel du jeune
    selectElement = document.getElementById("genre_modif");
    if (selectElement) {
      selectElement.value = data.genre;
    }

    // Si l'utilisateur est administrateur, récupère la liste des groupes et remplit le select
    if (data.isAdmin != 0) {
      try {
        const data2 = await fetch("/list_groupe").then((r) => r.json());
        const select = document.getElementById("groupe_id");
        if (select) {
          const frag = document.createDocumentFragment();
          data2.forEach((group) => {
            const option = document.createElement("option");
            option.value = group.id;
            option.textContent = group.nom;
            if (group.id === data.groupe_id) option.selected = true;
            frag.appendChild(option);
          });
          select.appendChild(frag);
        }
      } catch (error) {
        console.error("Error fetching group list:", error);
      }
    }

    // Affiche la fenêtre contextuelle
    const overlayPoste = document.getElementById("overlayPoste");
    if (overlayPoste) {
      overlayPoste.style.display = "flex";
    }
  } catch (error) {
    console.error("Error fetching user data:", error);
  }
}

function formValidePaiement(id, name, paye, paiementref, type) {
  document.getElementById("namediv").innerHTML =
    `<strong>Paiement de <span >${decodeURIComponent(name)}</span></strong>`;

  // Définition des états des radios avec icônes
  let checkedPayé = paye ? "checked" : "";
  let checkedNonPayé = !paye ? "checked" : "";

  // Formulaire stylisé avec classes CSS
  document.getElementById("modif").innerHTML = `
        <div class="radio-container">
            <label>
                <input type="radio" name="statusPaiement" value="payé" ${checkedPayé}>
                <span>Payé <span style="color: green;">&#x2705;</span></span>
            </label>
            <label>
                <input type="radio" name="statusPaiement" value="nonpayé" ${checkedNonPayé}>
                <span>Non payé <span style="color: red;">&#x274C;</span></span>
            </label>
        </div>
        <div><br></div>

        <input class="inputpaiement" type="text" id="refPaiement" placeholder="Référence de paiement" value="${
          decodeURIComponent(paiementref) || ""
        }" required>
        <br><br>
        <button id="Valide1">Valider</button>
        <br>
    `;

  // Affichage du formulaire
  document.getElementById("overlayPoste").style.display = "flex";

  // Gestion du bouton Valider
  document.getElementById("Valide1").addEventListener("click", function () {
    let selectedStatus = document.querySelector(
      'input[name="statusPaiement"]:checked',
    ).value;
    let refPaiement = document.getElementById("refPaiement").value;

    // Redirection avec les paramètres en GET
    window.location.href = `/modifPaiemnt/${type}/${id}/${selectedStatus}/${encodeURIComponent(
      refPaiement,
    )}`;
  });
}

function formValideB3Direct(id, name) {
  document.getElementById("namediv").innerHTML =
    `<strong>Valider le B3 de <span>${decodeURIComponent(name)}</span></strong>`;
  document.getElementById("modif").innerHTML = `
    <p>Valider un B3 reçu par un autre moyen (mail, messagerie...)</p>
    <button id="Valide1">Valider</button>
  `;
  document.getElementById("overlayPoste").style.display = "flex";
  document.getElementById("Valide1").addEventListener("click", function () {
    window.location.href = `/valideB3Direct/${id}`;
  });
}

function suppr(type, id) {
  let message = "";
  let fetchUrl = "";
  let redirectUrl = "";

  if (type === "ben") {
    fetchUrl = "/infoBen/" + id;
    redirectUrl = "/suppr_ben/" + id; // URL de redirection pour la suppression du bénévole
  } else if (type === "jeune") {
    fetchUrl = "/infojeune/" + id;
    redirectUrl = "/suppr_jeune/" + id; // URL de redirection pour la suppression du jeune
  } else if (type === "groupe") {
    fetchUrl = "/list_groupe"; // URL pour récupérer les infos du groupe
    redirectUrl = "/suppr_groupe/" + id; // URL de redirection pour la suppression du groupe
  }

  fetch(fetchUrl)
    .then((response) => response.json())
    .then((data) => {
      // Construire le message d'information
      if (type === "groupe") {
        data.forEach((groupe) => {
          if (groupe.id == id) {
            nomgroupe = groupe.nom;
          }
        });
        message = `Supprimer le groupe ${nomgroupe}`;
      } else {
        message = `Supprimer l'inscription de ${data.prenom} ${data.nom}`;
      }

      const confirmDelete = confirm(message);
      if (confirmDelete) {
        window.location.href = redirectUrl;
      }
    })
    .catch((error) =>
      console.error("Erreur lors de la récupération des informations:", error),
    );
}

function afficheplanben(id) {
  window.open(
    `/calendar/${id} `,
    "_blank",
    "location=yes,height=570,width=800,scrollbars=yes,status=yes",
  );
}

// affiche feuille medicale
function openMedicalFile(id) {
  window.open("/fiche-medicale/".concat(id));
}

function formModifBenevole(id) {
  fetch("/infoBen/" + id)
    .then((response) => response.json())
    .then((data) => {
      document.getElementById("namediv").innerText =
        `Modifiez le profil de ${data.prenom} ${data.nom}`;
      document.getElementById("modif").innerHTML = `
                <form action="/modifben/${id}" method="post">
                    <div class="form-group">
                        <label for="prenom">Prénom</label>
                        <input type="text" name="prenom" value="${
                          data.prenom
                        }" required>
                    </div>
                    <div class="form-group">
                        <label for="nom">Nom</label>
                        <input type="text" name="nom" value="${
                          data.nom
                        }" required>
                    </div>
                    <div class="form-group">
                        <label for="date_naissance">Date de naissance</label>
                        <input type="date" name="date_naissance" value="${
                          data.date_naissance
                        }" required>
                    </div>
                    <div class="form-group">
                        <label for="email">Email</label>
                        <input type="email" name="email" value="${
                          data.email
                        }" required>
                    </div>
                    <div class="form-group">
                        <label for="tel">Téléphone</label>
                        <input type="tel" name="tel" value="${
                          data.tel
                        }" required>
                    </div>
                    <div class="form-group">
                        <label for="adresse">Adresse</label>
                        <input type="text" name="adresse" value="${
                          data.adresse
                        }" required>
                    </div>
                    <div class="form-group">
                        <label for="alergie">Problèmes médicaux</label>
                        <input type="text" name="alergie" value="${
                          data.alergie
                        }">
                    </div>
                    <div class="form-group">
                        <label for="regime">Régime particulier</label>
                        <input type="text" name="regime" value="${data.regime}">
                    </div>
                    <div class="form-group">
                        <label for="contact_urgence">Contact d'urgence</label>
                        <input type="text" name="contact_urgence" value="${
                          data.contact_urgence
                        }" required>
                    </div>
                    <div class="form-group">
                        <label for="tel_urgence">Téléphone d'urgence</label>
                        <input type="tel" name="tel_urgence" value="${
                          data.tel_urgence
                        }" required>
                    </div>


                    ${
                      data.isAdmin &&
                      ["responsable de groupe", "accompagnateur"].includes(
                        (data.voeu1 || "").trim().toLowerCase(),
                      )
                        ? `
                    <div class="form-group">
                        <label for="groupe_id">Groupe</label>
                        <select id="groupe_id" name="groupe_id" required>
                            <option value="" selected disabled>Sélectionne ton groupe</option>
                            <!-- Options avec le JS -->
                        </select>
                    </div>
                    `
                        : `<input type="hidden" id="groupe_id" name="groupe_id" value="${data.groupe_id}" />`
                    }
                    <input type="hidden" id="paye" name="paye" value="${
                      data.paye
                    }" />
                    <input type="hidden" id="paiementref" name="paiementref" value="${
                      data.paiementref
                    }" />
                    <br>
                    <button type="submit">Modifier</button>
                </form>
                `;

      const select = document.getElementById("groupe_id");
      if (select && select.tagName === "SELECT") {
        fetch("/list_groupe")
          .then((response) => response.json())
          .then((data2) => {
            const frag = document.createDocumentFragment();
            const emptyOption = document.createElement("option");
            emptyOption.value = "";
            emptyOption.textContent = "Sans groupe";
            frag.appendChild(emptyOption);

            data2.forEach((group) => {
              const option = document.createElement("option");
              option.value = group.id;
              option.textContent = group.nom;
              if (group.id === data.groupe_id) option.selected = true;
              frag.appendChild(option);
            });

            select.appendChild(frag);
            document.getElementById("overlayPoste").style.display = "flex";
          })
          .catch((error) => console.error("Error fetching group list:", error));
      } else {
        document.getElementById("overlayPoste").style.display = "flex";
      }
    });
}

//downlad excel from table
function exporterTableauxEnExcel(nom, tabs) {
  var wb = XLSX.utils.book_new();
  tabs.forEach((tab) => {
    var tableau1 = document.getElementById(tab);
    var data = [];
    var rows = tableau1.querySelectorAll("tr");
    rows.forEach((row) => {
      var rowData = [];
      var cells = row.querySelectorAll("th, td");
      cells.forEach((cell, index) => {
        if (
          cell.id !== "omit-column" &&
          !cell.classList.contains("omit-column")
        ) {
          rowData.push(cell.innerText);
        }
      });
      data.push(rowData);
    });
    var ws1 = XLSX.utils.aoa_to_sheet(data);
    XLSX.utils.book_append_sheet(wb, ws1, tab);
  });
  var currentDate = formatDateFR(new Date().toISOString());

  var name = `${nom}_${currentDate}.xlsx`;

  XLSX.writeFile(wb, name);
}

function downladBadgeZIP(id, jeune, ben) {
  // Transformer les listes de jeunes et bénévoles en une chaîne de caractères
  const jeunes = jeune.split(",").map(Number).join(",");
  const benevoles = ben.split(",").map(Number).join(",");

  // Télécharger le fichier ZIP contenant tous les badges
  const zipUrl = `/download-pdf-zip?id=${id}&jeunes=${jeunes}&benevoles=${benevoles}`;

  window.location.href = zipUrl;
}

function downladBadgeZIPListe(type, liste, filtre = "") {
  // Transformer les listes de jeunes et bénévoles en une chaîne de caractères
  liste = liste.split(",").map(Number).join(",");

  // Télécharger le fichier ZIP contenant tous les badges
  let zipUrl = `/download-pdf-liste-zip?type=${type}&liste=${liste}`;
  if (filtre && filtre !== "tous")
    zipUrl += `&filtre=${encodeURIComponent(filtre)}`;

  window.location.href = zipUrl;
}

function toggleSection(name, toog, nonclique) {
  const formContent = document.getElementById(name);
  const toggleButton = document.getElementById(toog);

  let cookiedisplay = null;
  if (nonclique != null) {
    cookiedisplay = getCookie(name);
    if (cookiedisplay == null) {
      cookiedisplay = nonclique;
    }
  }

  const date = new Date();
  date.setTime(date.getTime() + 15 * 60 * 1000); // expire apres 15 min
  const expires = "expires=" + date.toUTCString();

  if (
    cookiedisplay == "block" ||
    (!nonclique &&
      (formContent.style.display === "none" ||
        formContent.style.display === ""))
  ) {
    formContent.style.display = "block"; // Afficher le contenu
    toggleButton.classList.add("rotate"); // Tourner la flèche vers le bas
    document.cookie = `${name}=block;${expires};SameSite=Strict; path=/; secure`;
  } else if (
    cookiedisplay == "none" ||
    (!nonclique && formContent.style.display === "block")
  ) {
    formContent.style.display = "none"; // Masquer le contenu
    toggleButton.classList.remove("rotate"); // Tourner la flèche vers la droite
    document.cookie = `${name}=none;${expires};SameSite=Strict; path=/; secure`;
  }
}

function loadQuill(quill, name, editor, content) {
  // Vérifier si Quill est déjà chargé
  if (typeof Quill === "undefined") {
    // Créer un élément <link> pour charger le CSS de Quill
    var link = document.createElement("link");
    link.rel = "stylesheet";
    link.href = "https://cdn.jsdelivr.net/npm/quill@2.0.3/dist/quill.snow.css";
    document.head.appendChild(link);

    // Créer un élément <script> pour charger le JS de Quill
    var script = document.createElement("script");
    script.src = "https://cdn.jsdelivr.net/npm/quill@2.0.3/dist/quill.js";
    script.onload = function () {
      // Initialiser Quill une fois le script chargé
      initializeQuill(quill, name, editor, content);
    };
    document.head.appendChild(script);
  } else {
    // Si Quill est déjà chargé, on peut initialiser directement
    initializeQuill(quill, name, editor, content);
  }
}

function setupMailImageResize(editorSelector) {
  const editorEl = document.querySelector(editorSelector + " .ql-editor");
  if (!editorEl) return;

  let toolbar = null;
  let currentImg = null;

  function removeToolbar() {
    if (toolbar) { toolbar.remove(); toolbar = null; }
    if (currentImg) { currentImg.style.outline = ""; currentImg = null; }
  }

  function positionToolbar(img) {
    if (!toolbar) return;
    const rect = img.getBoundingClientRect();
    const top = rect.top - toolbar.offsetHeight - 6;
    toolbar.style.top = (top < 4 ? rect.bottom + 6 : top) + "px";
    toolbar.style.left = Math.max(4, rect.left) + "px";
  }

  function showToolbar(img) {
    removeToolbar();
    currentImg = img;
    img.style.outline = "2px solid #4a9eff";

    toolbar = document.createElement("div");
    toolbar.style.cssText =
      "position:fixed;z-index:9999;background:#fff;border:1px solid #ccc;" +
      "border-radius:4px;padding:4px 8px;display:flex;align-items:center;" +
      "gap:6px;box-shadow:0 2px 8px rgba(0,0,0,.18);font-size:12px;";

    [
      { label: "25%", w: "25%" },
      { label: "50%", w: "50%" },
      { label: "75%", w: "75%" },
      { label: "100%", w: "100%" },
      { label: "Original", w: "" },
    ].forEach(({ label, w }) => {
      const btn = document.createElement("button");
      btn.textContent = label;
      btn.type = "button";
      btn.style.cssText =
        "border:1px solid #ddd;background:#f5f5f5;padding:2px 6px;" +
        "cursor:pointer;border-radius:3px;";
      btn.onmousedown = (e) => {
        e.preventDefault();
        img.style.width = w;
        img.style.maxWidth = w ? "100%" : "";
        positionToolbar(img);
      };
      toolbar.appendChild(btn);
    });

    const sep = document.createElement("span");
    sep.textContent = "|";
    sep.style.cssText = "color:#ccc;user-select:none;";
    toolbar.appendChild(sep);

    const input = document.createElement("input");
    input.type = "number";
    input.placeholder = "px";
    input.min = "10";
    input.title = "Largeur en pixels (Entrée pour valider)";
    input.style.cssText =
      "width:52px;border:1px solid #ddd;padding:2px 4px;border-radius:3px;";
    input.onkeydown = (e) => {
      if (e.key === "Enter" && input.value) {
        img.style.width = input.value + "px";
        img.style.maxWidth = "100%";
        positionToolbar(img);
      }
    };
    toolbar.appendChild(input);

    document.body.appendChild(toolbar);
    positionToolbar(img);
  }

  editorEl.addEventListener("click", (e) => {
    if (e.target.tagName === "IMG") showToolbar(e.target);
    else removeToolbar();
  });

  document.addEventListener("mousedown", (e) => {
    if (toolbar && !toolbar.contains(e.target) && e.target.tagName !== "IMG") {
      removeToolbar();
    }
  });

  document.addEventListener("scroll", () => {
    if (currentImg) positionToolbar(currentImg);
  }, true);
}

function initializeQuill(quill, name, editor, content) {
  if (editor) {
    if (editor == "mail") {
      const quillVarName = quill;
      window[quill] = new Quill(name, {
        theme: "snow",
        readOnly: false,
        modules: {
          toolbar: {
            container: [
              [{ header: [] }],
              [{ list: "ordered" }, { list: "bullet" }],
              [{ align: [] }],
              [{ color: [] }],
              ["bold", "italic", "underline"],
              ["link", "image"],
            ],
            handlers: {
              image: function () {
                const input = document.createElement("input");
                input.type = "file";
                input.accept = "image/*";
                input.click();
                input.onchange = async () => {
                  const file = input.files[0];
                  if (!file) return;
                  const formData = new FormData();
                  formData.append("image", file);
                  try {
                    const resp = await fetch("/upload-mail-image", {
                      method: "POST",
                      body: formData,
                    });
                    const data = await resp.json();
                    if (!resp.ok) {
                      alert("Erreur : " + (data.error || "Erreur inconnue"));
                      return;
                    }
                    const quillInstance = window[quillVarName];
                    const range = quillInstance.getSelection(true);
                    quillInstance.insertEmbed(range.index, "image", data.url);
                    quillInstance.setSelection(range.index + 1);
                  } catch (e) {
                    alert("Erreur lors du chargement de l'image");
                  }
                };
              },
            },
          },
        },
      });
      setupMailImageResize(name);
    } else {
      window[quill] = new Quill(name, {
        theme: "snow",
        readOnly: false,
        modules: {
          toolbar: [
            [{ header: [] }],
            [{ list: "ordered" }, { list: "bullet" }],
            [{ align: [] }],
            [{ color: [] }],
            ["bold", "italic", "underline"],
            ["link", "image"],
          ],
        },
      });
    }
  } else {
    window[quill] = new Quill(name, {
      theme: "snow",
      readOnly: true,
      modules: {
        toolbar: false,
      },
    });
  }
  if (content) {
    try {
      // Essayer de parser comme du JSON (format Quill Delta)
      const delta = JSON.parse(content);
      window[quill].setContents(delta, "api");
    } catch (e) {
      // Si ce n'est pas du JSON valide, traiter comme du texte brut
      console.warn("Contenu non-JSON détecté, conversion en format Quill:", e);
      const textDelta = {
        ops: [{ insert: content + "\n" }],
      };
      window[quill].setContents(textDelta, "api");
    }
  }
}
function sendModif(quill, adresse) {
  //modif de la remarque groupe

  let textevalue = "";

  // Préparer les données à envoyer
  if (quill.getLength() > 1) {
    textevalue = btoa(
      String.fromCharCode(
        ...new TextEncoder().encode(JSON.stringify(quill.getContents())),
      ),
    );
  }

  const data = {
    groupeID: groupeID,
    cookie: document.cookie, // Récupérer le cookie actuel si nécessaire
    texte: textevalue,
  };
  let url = window.location.search;

  let urlParams = new URLSearchParams(url);
  const form = urlParams.get("form");

  fetch(adresse, {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify(data),
  })
    .then((response) => {
      if (!response.ok) {
        throw new Error("Erreur lors de la modification.");
      }
      afficherParametresURL(
        "?form=" + form + "&success=Modification enregistrée",
      );
    })
    .catch((error) => {
      console.error("Erreur lors de l'envoi de la modification:", error);
      afficherParametresURL(
        "?form=" + form + "&error=Erreur lors de la modification",
      );
    });
}

function updateParam(name, value) {
  const params = new URLSearchParams(window.location.search);
  const originalForm = params.get("form") || "adminsettings";

  fetch(`/change/${name}/${value}`, {
    method: "GET",
  })
    .then((response) => response.json())
    .then((data) => {
      afficherParametresURL(`?form=${originalForm}&success=Paramètre modifié`);
    })
    .catch((error) => {
      console.error("Error updating parameter:", error);
      afficherParametresURL(
        `?form=${originalForm}&error=Erreur lors de la modification du paramètre`,
      );
    });
}