popup.js

log("✅ popup.js chargé avec succès !");

// === 1. Mise à jour du bouton Connexion/Déconnexion ===
async function updateConnectionButton() {
  const { accessToken } = await browser.storage.local.get("accessToken");
  const button = document.getElementById("auth-button");

  if (button) {
    if (accessToken) {
      button.textContent = "Se déconnecter";
      button.title = "En vous déconnectant, vous perdrez l'accès à vos lexiques personnels, ainsi que les fonctionnalités d'ajout automatique et de statistiques d'utilisation.";
    } else {
      button.textContent = "Se connecter";
      button.title = "En vous connectant, vous pourrez accéder à vos lexiques personnels, ainsi qu'aux fonctionnalités d'ajout automatique et de statistiques d'utilisation.";
    }
    button.onclick = async () => {
      await browser.runtime.sendMessage({ action: "toggleAuth" });
    };
  } else {
    console.error("❌ Le bouton de connexion n'a pas été trouvé.");
  }
}

// === 2. Mise à jour dynamique de la sélection des langues ===
async function updateLanguageSelection() {
  const languageSelection = document.getElementById("language-selection");
  languageSelection.innerHTML = "<p id='loading-languages' style='color: gray;'>Chargement...</p>";

  const { accessToken } = await browser.storage.local.get("accessToken");
  if (!accessToken) {
    languageSelection.innerHTML = "<p style='color: red;'>Veuillez vous connecter.</p>";
    return;
  }

  const lexicons = await getLexicons(accessToken);
  const userLanguages = [...new Set(lexicons.map(lex => lex.language))];

  // Récupérer les langues suivies depuis le stockage
  const { trackedLanguages } = await browser.storage.local.get("trackedLanguages") || { trackedLanguages: [] };

  languageSelection.innerHTML = ""; 

  if (userLanguages.length === 0) {
    languageSelection.innerHTML = "<p style='color: red;'>Aucun lexique personnel trouvé.</p>";
    return;
  }

  userLanguages.forEach(lang => {
    const langButton = document.createElement("div");
    langButton.classList.add("lang-option");
    langButton.textContent = lang.toUpperCase();
    langButton.dataset.value = lang;

    if (trackedLanguages && trackedLanguages.includes(lang)) {
      langButton.classList.add("selected");
    }

    langButton.addEventListener("click", () => {
      langButton.classList.toggle("selected");
    });

    languageSelection.appendChild(langButton);
  });

  log("✅ Sélection des langues mise à jour avec :", userLanguages);
}

// === 3. Mise à jour des options utilisateur et des statistiques ===
async function updateOptionsUI() {
  const { accessToken, extensionActive } = await browser.storage.local.get(["accessToken", "extensionActive"]);
  const isLoggedIn = !!accessToken;

  const toggleStatsBtn = document.getElementById("toggleStatsBtn");
  const statsOptions = document.getElementById("stats-options");
  const autoAddContainer = document.getElementById("auto-add")?.parentElement;
  const autoAddCheckbox = document.getElementById("auto-add");
  const autoAddOptions = document.getElementById("auto-add-options");
  const thresholdInput = document.getElementById("threshold");
  const saveOptionsBtn = document.getElementById("save-options");
  const openStats = document.getElementById("open-stats");

  if (autoAddContainer) {
    autoAddContainer.style.display = isLoggedIn ? "block" : "none";
  }

  const { isTrackingActive, autoAdd, threshold } = await browser.storage.local.get([
    "isTrackingActive",
    "autoAdd",
    "threshold"
  ]) || { isTrackingActive: false };

  if (toggleStatsBtn) {
    if (!isLoggedIn) {
      openStats.style.display = "none";
    } else {
      openStats.style.display = "block";
    }
    if (!accessToken) {
      toggleStatsBtn.textContent = "Activer les statistiques";
      toggleStatsBtn.style.opacity = "0.5";
      toggleStatsBtn.title = "Connectez-vous pour activer les statistiques";
    } else {
      toggleStatsBtn.style.opacity = "1";
      toggleStatsBtn.textContent = isTrackingActive ? "Désactiver les statistiques" : "Activer les statistiques";
      toggleStatsBtn.title = "";
    }
  }

  if (statsOptions) {
    statsOptions.classList.toggle("hidden", !extensionActive || !isTrackingActive);
  }

  if (isLoggedIn) {
    if (autoAddCheckbox) {
      autoAddCheckbox.checked = autoAdd || false;
    }
    if (thresholdInput && threshold !== undefined) {
      thresholdInput.value = threshold;
    }
    if (autoAddOptions) {
      autoAddOptions.classList.toggle("hidden", !autoAdd);
    }
    if (saveOptionsBtn) {
      saveOptionsBtn.classList.toggle("hidden", !autoAdd);
    }
  } else {
    if (autoAddCheckbox) {
      autoAddCheckbox.checked = false;
    }
    if (autoAddOptions) {
      autoAddOptions.classList.add("hidden");
    }
    if (saveOptionsBtn) {
      saveOptionsBtn.classList.add("hidden");
    }
  }
}

// === 4. Gestion des événements pour options/statistiques ===
document.getElementById("toggleStatsBtn").addEventListener("click", async () => {
  const { accessToken } = await browser.storage.local.get("accessToken");
  if (!accessToken) {
    return;
  }
  const current = await browser.storage.local.get("isTrackingActive");
  const newState = !(current.isTrackingActive);

  await browser.storage.local.set({ isTrackingActive: newState });

  if (!newState) {
    await browser.storage.local.set({ autoAdd: false });
    document.getElementById("auto-add").checked = false;
    document.getElementById("auto-add-options").classList.add("hidden");
    document.getElementById("save-options").classList.add("hidden");
  }

  document.getElementById("toggleStatsBtn").textContent = newState ? "Désactiver les statistiques" : "Activer les statistiques";
  document.getElementById("stats-options").classList.toggle("hidden", !newState);

  browser.runtime.sendMessage({ command: "toggle-stats", isActive: newState });

  if (newState) {
    log("[Popup] Demande d'initialisation de Pyodide...");
    browser.runtime.sendMessage({ command: "init-pyodide" });
  }
});

document.getElementById("auto-add").addEventListener("change", async () => {
  const isChecked = document.getElementById("auto-add").checked;
  document.getElementById("auto-add-options").classList.toggle("hidden", !isChecked);
  document.getElementById("save-options").classList.toggle("hidden", !isChecked);

  if (!isChecked) {
    await browser.storage.local.set({ autoAdd: false });
  }
});

document.getElementById("save-options").addEventListener("click", async () => {
  const autoAdd = document.getElementById("auto-add").checked;
  const threshold = parseInt(document.getElementById("threshold").value, 10);
  const selectedLanguages = Array.from(document.querySelectorAll("#language-selection .lang-option.selected"))
    .map(option => option.dataset.value);

  await browser.storage.local.set({
    autoAdd,
    threshold,
    trackedLanguages: selectedLanguages
  });

  log("Options sauvegardées :", { autoAdd, threshold, trackedLanguages: selectedLanguages });
});

document.getElementById("open-stats").addEventListener("click", function() {
  window.open("stats.html", "_blank");
});


// === 5. Gestion de l'activation/désactivation de l'analyse ===
async function updateExtensionToggleButton() {
  const { accessToken, extensionActive } = await browser.storage.local.get(["accessToken", "extensionActive"]);
  const toggleButton = document.getElementById("toggleExtensionBtn");

  if (toggleButton) {
    if (!accessToken) {
      toggleButton.textContent = "Activer l'analyse";
      toggleButton.style.opacity = "0.5";
      toggleButton.title = "Connectez-vous pour activer l'analyse";
    } else {
      toggleButton.style.opacity = "1";
      toggleButton.textContent = extensionActive ? "Désactiver l'analyse" : "Activer l'analyse";
      toggleButton.title = "";
    }

    if (!toggleButton.dataset.listenerAdded) {
      toggleButton.addEventListener("click", handleToggleExtension);
      toggleButton.dataset.listenerAdded = "true";
    }
  } else {
    console.error("Le bouton d'activation de l'anlyse n'a pas été trouvé.");
  }
}

// Gestion du clic sur le bouton d'activation/désactivation
function handleToggleExtension(event) {
  browser.storage.local.get("accessToken").then(({ accessToken }) => {
    if (!accessToken) {
      return;
    }
    proceedToggleExtension();
  });
}

async function proceedToggleExtension() {
  const { extensionActive, isTrackingActive } = await browser.storage.local.get({
    extensionActive: false,
    isTrackingActive: false
  });
  const newState = !extensionActive;

  await browser.storage.local.set({ extensionActive: newState });
  const toggleButton = document.getElementById("toggleExtensionBtn");
  if (toggleButton) {
    toggleButton.textContent = newState ? "Désactiver l'analyse" : "Activer l'analyse";
  }

  browser.runtime.sendMessage({ action: "toggleExtension", isActive: newState });
  
  if (!newState) {
    await browser.storage.local.set({ isTrackingActive: false });
    if (isTrackingActive) {
      window.open("stats.html", "_blank");
    }
    browser.runtime.sendMessage({ action: "closeSidebarBlocks" });
  }

  await updateOptionsUI();
}

// === 6. Mise à jour de l'UI du popup en fonction d'un message ===
async function updatePopupUI(message) {
  log("🔄 Mise à jour du popup avec :", message);

  const statsOptions = document.getElementById("stats-options");
  const autoAddCheckbox = document.getElementById("auto-add");
  const autoAddOptions = document.getElementById("auto-add-options");

  if (message.isTrackingActive !== undefined) {
    if (statsOptions) {
      statsOptions.classList.toggle("hidden", !message.isTrackingActive);
    } else {
      console.warn("⚠️ Élément #stats-options introuvable.");
    }
  }

  if (message.autoAdd !== undefined) {
    if (autoAddCheckbox) {
      autoAddCheckbox.checked = message.autoAdd;
    } else {
      console.warn("⚠️ Élément #auto-add introuvable.");
    }

    if (autoAddOptions) {
      autoAddOptions.classList.toggle("hidden", !message.autoAdd);
    } else {
      console.warn("⚠️ Élément #auto-add-options introuvable.");
    }
  }

  const toggleButton = document.getElementById("toggleExtensionBtn");
  if (toggleButton && message.extensionActive !== undefined) {
    toggleButton.textContent = message.extensionActive ? "Désactiver l'analyse" : "Activer l'analyse";
  }
}

// === 7. Écoute des messages depuis le background ===
browser.runtime.onMessage.addListener(async (message) => {
  log("📩 Message reçu dans popup.js :", message);

  if (message.action === "updateUI") {
    log("🔄 Mise à jour de l'UI du popup...");
    await updateConnectionButton();
    await updateOptionsUI();
    await updateLanguageSelection();
    updatePopupUI(message);
  } else if (message.action === "showNotification") {
    // Logique pour afficher une notification si nécessaire
  }
});

browser.storage.onChanged.addListener((changes, area) => {
  if (area === "local" && changes.accessToken) {
    updateConnectionButton();
    updateExtensionToggleButton();
  }
});

// === 8. Notification d'activation/désactivation (optionnelle) ===
function showNotification(message) {
  const notificationBox = document.getElementById("extension-notification");
  const notificationText = document.getElementById("notification-text");
  const closeButton = document.getElementById("close-notification");

  if (notificationBox && notificationText && closeButton) {
    notificationText.textContent = message;
    notificationBox.classList.remove("hidden");

    closeButton.addEventListener("click", () => {
      notificationBox.classList.add("hidden");
    }, { once: true });
  } else {
    console.error("❌ Impossible d'afficher la notification : élément manquant.");
  }
}

// === 9. Initialisation lors du DOMContentLoaded ===
document.addEventListener("DOMContentLoaded", async () => {
  await updateConnectionButton();
  await updateOptionsUI();
  await updateLanguageSelection();
  await updateExtensionToggleButton();
});