/* =====================================================================
   script.js — le "moteur" de la page
   ---------------------------------------------------------------------
   Ce fichier fait fonctionner les éditeurs de code interactifs.
   Il est volontairement TRÈS commenté : c'est lui-même un exemple
   de vrai code JavaScript. Une fois que tu auras lu les chapitres,
   reviens le lire : tu devrais tout comprendre !

   Ce qu'il fait :
     1. Trouver tous les éditeurs (.bac) de la page
     2. Quand on clique « Exécuter », lancer le code écrit dedans
     3. Intercepter les console.log pour les afficher DANS la page
     4. Traduire les erreurs en français pour aider à comprendre
     5. Surligner dans le menu le chapitre en cours de lecture
     6. Gérer le bouton clair / sombre
   ===================================================================== */


/* ---------------------------------------------------------------------
   "use strict" active le MODE STRICT : JavaScript devient plus sévère
   et signale des erreurs qu'il ignorerait sinon (ex : utiliser une
   variable jamais déclarée). C'est une bonne habitude.
   --------------------------------------------------------------------- */
"use strict";


/* =====================================================================
   1. OUTIL : transformer n'importe quelle valeur en texte lisible
   =====================================================================
   console.log("bonjour") est facile à afficher. Mais comment afficher
   un tableau [1, 2, 3] ou un objet { nom: "Ada" } ? Cette fonction
   regarde le TYPE de la valeur et fabrique un texte adapté.

   Elle renvoie un élément HTML <span> coloré selon le type.
   --------------------------------------------------------------------- */
function formaterValeur(valeur, profondeur = 0) {
  // typeof renvoie le type de la valeur sous forme de texte :
  // "string", "number", "boolean", "undefined", "object", "function"…
  const type = typeof valeur;

  // Un "texte" (string) : au premier niveau on l'affiche tel quel,
  // à l'intérieur d'un tableau/objet on l'entoure de guillemets.
  if (type === "string") {
    return profondeur === 0 ? valeur : `"${valeur}"`;
  }

  if (type === "number" || type === "boolean" || type === "bigint") {
    return String(valeur);       // String(42) → "42"
  }

  if (valeur === undefined) return "undefined";
  if (valeur === null)      return "null";

  if (type === "function") {
    // valeur.name = le nom de la fonction (vide si anonyme)
    return `ƒ ${valeur.name || "(anonyme)"}()`;
  }

  // On évite de descendre trop profond (objets imbriqués à l'infini)
  if (profondeur > 3) return "…";

  // Un tableau : Array.isArray est LA façon fiable de le reconnaître,
  // car typeof [] renvoie "object" (une bizarrerie historique).
  if (Array.isArray(valeur)) {
    // .map transforme chaque élément, .join colle le tout avec ", "
    const morceaux = valeur.map(v => formaterValeur(v, profondeur + 1));
    return `[${morceaux.join(", ")}]`;
  }

  // Un élément HTML (ex : document.querySelector("h1"))
  if (valeur instanceof Element) {
    const classes = valeur.className ? "." + String(valeur.className).split(" ").join(".") : "";
    return `<${valeur.tagName.toLowerCase()}${valeur.id ? "#" + valeur.id : ""}${classes}>`;
  }

  // Une Promise (chapitre asynchrone)
  if (valeur instanceof Promise) return "Promise { … }";

  // Une erreur
  if (valeur instanceof Error) return `${valeur.name}: ${valeur.message}`;

  // Un objet "classique" : { cle: valeur, ... }
  if (type === "object") {
    // Le nom du "constructeur" : utile pour les objets créés avec une classe
    const nomClasse = valeur.constructor && valeur.constructor.name !== "Object"
      ? valeur.constructor.name + " "
      : "";
    // Object.entries({a:1, b:2}) → [["a",1], ["b",2]]
    const paires = Object.entries(valeur).map(
      ([cle, v]) => `${cle}: ${formaterValeur(v, profondeur + 1)}`
    );
    return `${nomClasse}{ ${paires.join(", ")} }`;
  }

  return String(valeur);
}

/* Renvoie le nom d'une classe CSS selon le type, pour colorer la sortie */
function classeCouleur(valeur) {
  if (typeof valeur === "number")  return "t-nombre";
  if (typeof valeur === "string")  return "t-texte";
  if (typeof valeur === "boolean") return "t-booleen";
  if (valeur === null || valeur === undefined) return "t-vide";
  return "";
}


/* =====================================================================
   2. OUTIL : traduire les erreurs JavaScript en français
   =====================================================================
   Quand le code plante, JavaScript lance une "erreur" avec un nom
   (ReferenceError, TypeError…) et un message en anglais.
   On ajoute une petite explication pour débutant.
   --------------------------------------------------------------------- */
const EXPLICATIONS_ERREURS = {
  // Un objet utilisé comme un "dictionnaire" : nom de l'erreur → explication
  ReferenceError: "Tu utilises un nom (variable ou fonction) qui n'existe pas. Faute de frappe ? Variable déclarée plus bas ou dans un autre bloc { } ?",
  TypeError:      "Tu fais une opération impossible sur ce type de valeur (ex : appeler quelque chose qui n'est pas une fonction, lire une propriété de undefined, modifier une const).",
  SyntaxError:    "Le code est mal écrit : il manque sans doute une parenthèse, une accolade, un guillemet ou une virgule.",
  RangeError:     "Une valeur est hors des limites autorisées (souvent : une fonction qui s'appelle elle-même à l'infini).",
};

function expliquerErreur(erreur) {
  // L'opérateur ?? ("coalescence des nuls") donne la valeur de droite
  // si celle de gauche est null ou undefined.
  return EXPLICATIONS_ERREURS[erreur.name] ?? "";
}


/* =====================================================================
   3. UNE "FAUSSE" CONSOLE pour chaque éditeur
   =====================================================================
   Le vrai console.log écrit dans les outils de développement (F12).
   On fabrique un objet qui a les MÊMES méthodes (log, warn, error…)
   mais qui écrit dans la zone .sortie de l'éditeur.

   C'est une "fabrique" : une fonction qui renvoie un objet.
   --------------------------------------------------------------------- */
function creerConsole(zoneSortie) {

  // Fonction interne qui ajoute UNE ligne dans la zone de sortie.
  // "...valeurs" (paramètre du reste) récupère TOUS les arguments
  // dans un tableau : console.log("a", 1, true) → ["a", 1, true]
  function ecrire(niveau, ...valeurs) {
    const ligne = document.createElement("div");  // crée un <div> vide
    ligne.className = "ligne " + niveau;

    // Pour chaque valeur, on crée un <span> coloré, séparés par un espace
    valeurs.forEach((valeur, index) => {
      if (index > 0) ligne.append(" ");
      const span = document.createElement("span");
      span.className = classeCouleur(valeur);
      // textContent (et pas innerHTML) : le texte est affiché tel quel,
      // une balise <b> s'affichera littéralement au lieu d'être interprétée.
      span.textContent = formaterValeur(valeur);
      ligne.append(span);
    });

    zoneSortie.append(ligne);                         // ajoute dans la page
    zoneSortie.scrollTop = zoneSortie.scrollHeight;   // défile tout en bas

    // On envoie AUSSI dans la vraie console du navigateur (F12)
    console[niveau === "err" ? "error" : niveau === "warn" ? "warn" : "log"](...valeurs);
  }

  // L'objet renvoyé : mêmes noms de méthodes que la vraie console
  return {
    log:   (...v) => ecrire("", ...v),
    info:  (...v) => ecrire("info", ...v),
    warn:  (...v) => ecrire("warn", "⚠", ...v),
    error: (...v) => ecrire("err", "✖", ...v),
    clear: ()     => { zoneSortie.innerHTML = ""; },

    // console.table : affiche un tableau d'objets sous forme de lignes
    table: (donnees) => {
      if (!Array.isArray(donnees)) return ecrire("", donnees);
      donnees.forEach((element, i) => ecrire("", `[${i}]`, element));
    },
  };
}


/* =====================================================================
   4. EXÉCUTER LE CODE d'un éditeur
   =====================================================================
   Comment exécuter du texte comme si c'était du code ?
   On crée une fonction à partir d'une chaîne de caractères.

   AsyncFunction est le "constructeur" des fonctions async : il permet
   d'utiliser "await" directement dans les exemples (chapitre 12).
   On passe à cette fonction nos propres "console" et "scene", qui
   REMPLACENT les vrais à l'intérieur du code exécuté.

   ⚠ Exécuter du texte comme du code est dangereux avec du texte venant
   d'inconnus. Ici, c'est TOI qui écris le code, donc pas de souci.
   --------------------------------------------------------------------- */
const AsyncFunction = (async function () {}).constructor;

async function executer(bac) {
  // querySelector cherche le PREMIER élément correspondant au sélecteur CSS,
  // mais seulement À L'INTÉRIEUR de "bac".
  const editeur = bac.querySelector("textarea");
  const sortie  = bac.querySelector(".sortie");
  const scene   = bac.querySelector(".scene");   // peut être null s'il n'y en a pas

  sortie.innerHTML = "";               // on efface l'ancienne sortie

  // Si l'éditeur a une scène, on la remet dans son état de départ.
  // (dataset.initial = l'attribut data-initial, rempli au chargement)
  if (scene) scene.innerHTML = scene.dataset.initial;

  const maConsole = creerConsole(sortie);

  // try / catch : on "essaie" un bloc de code ; si une erreur survient,
  // au lieu de tout planter, on "attrape" l'erreur dans catch.
  try {
    const fonction = new AsyncFunction("console", "scene", editeur.value);
    await fonction(maConsole, scene);
  } catch (erreur) {
    maConsole.error(`${erreur.name} : ${erreur.message}`);
    const aide = expliquerErreur(erreur);
    if (aide) maConsole.info("💡 " + aide);
  }
}


/* =====================================================================
   5. BRANCHER chaque éditeur : boutons, raccourcis clavier
   =====================================================================
   document.querySelectorAll renvoie TOUS les éléments correspondants.
   On boucle dessus avec forEach.
   --------------------------------------------------------------------- */
function preparerEditeurs() {
  document.querySelectorAll(".bac").forEach((bac) => {
    const editeur = bac.querySelector("textarea");
    const scene   = bac.querySelector(".scene");

    // On mémorise le code d'origine pour le bouton « Réinitialiser ».
    // .trim() enlève les espaces / retours à la ligne au début et à la fin.
    editeur.value = editeur.value.trim();
    const codeOriginal = editeur.value;

    // On mémorise aussi le contenu de départ de la scène
    if (scene) scene.dataset.initial = scene.innerHTML;

    // L'éditeur s'adapte à la hauteur de son code
    ajusterHauteur(editeur);
    editeur.addEventListener("input", () => ajusterHauteur(editeur));

    // Désactive le correcteur orthographique (inutile pour du code)
    editeur.spellcheck = false;

    // --- Bouton « Exécuter » ---
    bac.querySelector(".executer").addEventListener("click", () => executer(bac));

    // --- Bouton « Réinitialiser » ---
    bac.querySelector(".reinit").addEventListener("click", () => {
      editeur.value = codeOriginal;
      ajusterHauteur(editeur);
      bac.querySelector(".sortie").innerHTML = "";
      if (scene) scene.innerHTML = scene.dataset.initial;
    });

    // --- Raccourcis clavier dans l'éditeur ---
    // L'événement "keydown" se déclenche quand on enfonce une touche.
    // L'objet "evenement" décrit la touche (evenement.key) et les
    // touches spéciales tenues (ctrlKey, metaKey = Cmd sur Mac…).
    editeur.addEventListener("keydown", (evenement) => {

      // Ctrl+Entrée (ou Cmd+Entrée) → exécuter
      if (evenement.key === "Enter" && (evenement.ctrlKey || evenement.metaKey)) {
        evenement.preventDefault();   // empêche le retour à la ligne
        executer(bac);
      }

      // Tab → insérer 2 espaces au lieu de quitter le champ
      // (Échap puis Tab permet quand même de sortir au clavier)
      if (evenement.key === "Tab" && !evenement.shiftKey && !editeur.dataset.sortir) {
        evenement.preventDefault();
        const debut = editeur.selectionStart;   // position du curseur
        const fin   = editeur.selectionEnd;
        editeur.value = editeur.value.slice(0, debut) + "  " + editeur.value.slice(fin);
        editeur.selectionStart = editeur.selectionEnd = debut + 2;
      }
      // Échap : le prochain Tab sortira de l'éditeur (accessibilité clavier)
      editeur.dataset.sortir = evenement.key === "Escape" ? "1" : "";
    });
  });
}

/* Fait grandir le <textarea> pour qu'il montre tout son code */
function ajusterHauteur(editeur) {
  editeur.style.height = "auto";                       // on remet à zéro…
  editeur.style.height = editeur.scrollHeight + 4 + "px"; // …puis on mesure
}


/* =====================================================================
   6. MENU : surligner le chapitre en cours
   =====================================================================
   IntersectionObserver "observe" des éléments et nous prévient quand
   ils entrent ou sortent de l'écran. Bien plus efficace que de
   recalculer à chaque mouvement de molette.
   --------------------------------------------------------------------- */
function suivreLecture() {
  const liens = document.querySelectorAll(".sommaire a");

  const observateur = new IntersectionObserver((entrees) => {
    entrees.forEach((entree) => {
      if (!entree.isIntersecting) return;      // pas visible → on ignore
      const id = entree.target.id;
      liens.forEach((lien) => {
        // classList.toggle(nom, condition) : ajoute la classe si la
        // condition est vraie, l'enlève sinon.
        lien.classList.toggle("actif", lien.getAttribute("href") === "#" + id);
      });
    });
  }, {
    // On considère qu'une section est "lue" quand elle passe
    // dans la bande située entre 20 % et 40 % du haut de l'écran.
    rootMargin: "-20% 0px -60% 0px",
  });

  document.querySelectorAll("section.chapitre").forEach((s) => observateur.observe(s));
}


/* =====================================================================
   7. THÈME clair / sombre
   =====================================================================
   localStorage permet de garder une petite info dans le navigateur,
   même après fermeture de la page. On l'entoure de try/catch car il
   peut être bloqué (navigation privée, réglages de confidentialité…).
   --------------------------------------------------------------------- */
function gererTheme() {
  const racine = document.documentElement;          // la balise <html>
  const bouton = document.querySelector("#bouton-theme");

  // Relire le choix enregistré, s'il existe
  try {
    const sauvegarde = localStorage.getItem("theme");
    if (sauvegarde) racine.dataset.theme = sauvegarde;
  } catch (e) { /* pas grave : on garde le thème du système */ }

  bouton.addEventListener("click", () => {
    // Quel thème est affiché en ce moment ?
    const sombreSysteme = window.matchMedia("(prefers-color-scheme: dark)").matches;
    const actuel = racine.dataset.theme || (sombreSysteme ? "dark" : "light");
    const nouveau = actuel === "dark" ? "light" : "dark";

    racine.dataset.theme = nouveau;   // → <html data-theme="dark">, lu par le CSS
    try { localStorage.setItem("theme", nouveau); } catch (e) {}
  });
}


/* =====================================================================
   8. DÉMARRAGE
   =====================================================================
   La balise <script> est chargée avec l'attribut "defer" dans le HTML :
   le script s'exécute seulement quand tout le HTML a été lu.
   On peut donc chercher les éléments de la page sans risque.
   --------------------------------------------------------------------- */
preparerEditeurs();
suivreLecture();
gererTheme();