/**
 * Notes en markdown : rendu et bloc d'édition.
 *
 * Deux choses ici, qui vont ensemble. Le **rendu** d'abord — `rendreMarkdown`
 * transforme l'arbre de `markdown.js` en DOM, et sert aussi bien au panneau
 * qu'à la vue par mois. Le **bloc de notes** ensuite : l'aperçu, la barre
 * d'outils et la zone de saisie que les deux panneaux se partagent.
 *
 * **Aucun `innerHTML`.** Le DOM est bâti nœud par nœud. Un planning s'échange —
 * on en reçoit un par courriel, on en ouvre un que quelqu'un d'autre a écrit —
 * et une note est du texte libre : la seule façon sûre d'en afficher est de ne
 * jamais laisser le navigateur l'interpréter comme du balisage. Les URL sont
 * filtrées en amont par `urlSure`.
 *
 * **On lit d'abord, on écrit ensuite.** Le bloc s'ouvre sur l'aperçu quand la
 * note existe déjà, sur la saisie quand elle est vide. C'est l'usage : on ouvre
 * une phase commentée pour relire pourquoi elle est bloquée, et une phase
 * vierge pour y consigner quelque chose. Le crayon bascule d'un état à l'autre.
 */

import { analyserMarkdown, basculerCase } from './markdown.js';

// ---------------------------------------------------------------------------
// Rendu
// ---------------------------------------------------------------------------

/**
 * Rend une note en fragment de DOM.
 *
 * @param {string} texte la note, en markdown.
 * @param {object} options
 *   - casesActives : rend les cases à cocher cliquables. Faux ailleurs que dans
 *     le panneau — la vue par mois est en lecture seule (décision 24), et une
 *     case cochable y serait la seule chose qu'on puisse y modifier.
 * @returns {DocumentFragment}
 */
export function rendreMarkdown(texte, { casesActives = false } = {}) {
  const fragment = document.createDocumentFragment();
  peindreBlocs(analyserMarkdown(texte), fragment, casesActives);
  return fragment;
}

function peindreBlocs(blocs, parent, casesActives) {
  for (const bloc of blocs) {
    switch (bloc.type) {
      case 'titre': {
        // La balise est décalée de deux rangs : le titre du panneau est un
        // `h2`, et une note ne peut pas ouvrir une section de rang supérieur à
        // ce qui la contient. Mais le **style** suit `data-niveau`, c'est-à-dire
        // le nombre de dièses écrits, et non la balise : le plafond à `h6`
        // écrase les rangs 4 à 6 sur une même balise, et styler par balise
        // rendait `#` plus petit que `##` — soit exactement l'inverse de ce que
        // l'auteur de la note a demandé.
        const titre = document.createElement(`h${Math.min(6, bloc.niveau + 2)}`);
        titre.className = 'md-titre';
        titre.dataset.niveau = String(bloc.niveau);
        peindreInline(bloc.contenu, titre);
        parent.append(titre);
        break;
      }

      case 'paragraphe': {
        const paragraphe = document.createElement('p');
        paragraphe.className = 'md-paragraphe';
        peindreInline(bloc.contenu, paragraphe);
        parent.append(paragraphe);
        break;
      }

      case 'liste':
        parent.append(peindreListe(bloc, casesActives));
        break;

      case 'citation': {
        const citation = document.createElement('blockquote');
        citation.className = 'md-citation';
        peindreBlocs(bloc.blocs, citation, casesActives);
        parent.append(citation);
        break;
      }

      case 'code': {
        const preforme = document.createElement('pre');
        preforme.className = 'md-code';
        const code = document.createElement('code');
        code.textContent = bloc.lignes.join('\n');
        preforme.append(code);
        parent.append(preforme);
        break;
      }

      case 'separateur':
        parent.append(document.createElement('hr'));
        break;
    }
  }
}

function peindreListe(bloc, casesActives) {
  const liste = document.createElement(bloc.ordonnee ? 'ol' : 'ul');
  liste.className = 'md-liste';

  // Une liste de cases à cocher perd sa puce : la case *est* la puce, et les
  // deux côte à côte décalent le texte sans rien ajouter.
  if (bloc.elements.some((element) => element.coche !== null)) {
    liste.classList.add('md-liste--taches');
  }

  for (const element of bloc.elements) {
    const item = document.createElement('li');

    if (element.coche === null) {
      peindreInline(element.contenu, item);
    } else {
      item.append(peindreTache(element, casesActives));
    }

    peindreBlocs(element.blocs, item, casesActives);
    liste.append(item);
  }

  return liste;
}

/**
 * Élément de liste porteur d'une case.
 *
 * La case et son texte sont dans un même `<label>` : toute la ligne devient
 * cliquable, ce qui vaut mieux qu'une cible de treize pixels de côté. Le numéro
 * de ligne voyage dans un `data-` — c'est lui que le bloc de notes rendra à
 * `basculerCase` pour réécrire la bonne ligne de la note.
 */
function peindreTache(element, casesActives) {
  const etiquette = document.createElement('label');
  etiquette.className = 'md-tache';

  const coche = document.createElement('input');
  coche.type = 'checkbox';
  coche.checked = element.coche;
  coche.dataset.ligne = String(element.ligne);
  coche.disabled = !casesActives;
  etiquette.append(coche);

  const texte = document.createElement('span');
  if (element.coche) texte.className = 'md-tache--faite';
  peindreInline(element.contenu, texte);
  etiquette.append(texte);

  return etiquette;
}

function peindreInline(noeuds, parent) {
  for (const noeud of noeuds) {
    switch (noeud.type) {
      case 'texte':
        parent.append(document.createTextNode(noeud.valeur));
        break;

      case 'saut':
        parent.append(document.createElement('br'));
        break;

      case 'gras': {
        const gras = document.createElement('strong');
        peindreInline(noeud.contenu, gras);
        parent.append(gras);
        break;
      }

      case 'italique': {
        const italique = document.createElement('em');
        peindreInline(noeud.contenu, italique);
        parent.append(italique);
        break;
      }

      case 'code': {
        const code = document.createElement('code');
        code.className = 'md-code-ligne';
        code.textContent = noeud.valeur;
        parent.append(code);
        break;
      }

      case 'lien': {
        const lien = document.createElement('a');
        lien.href = noeud.url;
        // Le planning s'ouvre dans un onglet où l'on travaille : suivre un lien
        // ne doit pas le remplacer. `noopener` coupe l'accès de la page ouverte
        // à celle-ci, `noreferrer` lui tait d'où l'on vient.
        lien.target = '_blank';
        lien.rel = 'noopener noreferrer';
        lien.title = noeud.url;
        peindreInline(noeud.contenu, lien);
        parent.append(lien);
        break;
      }
    }
  }
}

// ---------------------------------------------------------------------------
// Bloc de notes
// ---------------------------------------------------------------------------

/**
 * Barre d'outils, volontairement courte.
 *
 * Six boutons pour ce qu'on écrit vraiment dans une note de suivi. Le markdown
 * complet est accessible au clavier — c'est du texte —, la barre ne sert qu'à
 * ne pas avoir à se rappeler la syntaxe des quatre ou cinq formes courantes.
 * Une barre exhaustive prendrait deux rangées dans un volet de 340 pixels et
 * repousserait la note d'autant.
 */
const OUTILS = [
  { cle: 'gras', libelle: 'B', titre: 'Gras (Ctrl+B)', entoure: '**' },
  { cle: 'italique', libelle: 'I', titre: 'Italique (Ctrl+I)', entoure: '*' },
  { cle: 'titre', libelle: 'H', titre: 'Titre', prefixe: '## ' },
  { cle: 'liste', libelle: '•', titre: 'Liste à puces', prefixe: '- ' },
  { cle: 'tache', libelle: '☑', titre: 'Case à cocher', prefixe: '- [ ] ' },
  { cle: 'lien', libelle: '🔗', titre: 'Lien', lien: true },
];

/**
 * Construit le bloc de notes dans son hôte et renvoie de quoi le piloter.
 *
 * @param {HTMLElement} hote conteneur, vidé puis rempli.
 * @param {object} options
 *   - nom : attribut `name` de la zone de saisie. Le bloc vit dans un `<form>`,
 *     et c'est ce nom qui le rend lisible par `formulaire.notes.value` — les
 *     deux panneaux continuent donc de lire leur formulaire comme avant.
 *   - libelle : intitulé affiché.
 *
 * Toute modification — frappe, bouton de la barre, case cochée — émet un
 * `input` qui remonte au formulaire. Les panneaux appliquent déjà les
 * changements au fil de la saisie : ils n'ont rien à savoir de ce bloc.
 */
export function creerBlocNotes(hote, { nom = 'notes', libelle = 'Notes' } = {}) {
  hote.classList.add('notes');
  hote.replaceChildren();

  const entete = document.createElement('div');
  entete.className = 'notes__entete';

  const intitule = document.createElement('span');
  intitule.className = 'notes__intitule';
  intitule.textContent = libelle;
  entete.append(intitule);

  const outils = document.createElement('div');
  outils.className = 'notes__outils';
  outils.hidden = true;
  entete.append(outils);

  const bascule = document.createElement('button');
  bascule.type = 'button';
  bascule.className = 'notes__bascule';
  entete.append(bascule);

  const apercu = document.createElement('div');
  apercu.className = 'notes__apercu';

  const champ = document.createElement('textarea');
  champ.className = 'notes__saisie';
  champ.name = nom;
  champ.hidden = true;
  champ.spellcheck = true;

  hote.append(entete, apercu, champ);

  let enEdition = false;

  function afficherMode() {
    outils.hidden = !enEdition;
    champ.hidden = !enEdition;
    apercu.hidden = enEdition;
    bascule.textContent = enEdition ? '👁' : '✎';
    bascule.title = enEdition ? 'Aperçu' : 'Modifier';
    bascule.setAttribute('aria-label', bascule.title);
    bascule.setAttribute('aria-pressed', String(enEdition));
  }

  function peindreApercu() {
    apercu.replaceChildren();

    if (!champ.value.trim()) {
      // Un aperçu vide n'apprend rien et n'offre aucune prise. Cette invite est
      // à la fois le message et le bouton : cliquer n'importe où dans la zone
      // vide ouvre la saisie, ce qui est le seul geste qu'on puisse y vouloir.
      const invite = document.createElement('p');
      invite.className = 'notes__invite';
      invite.textContent = 'Aucune note — cliquer pour écrire.';
      apercu.append(invite);
      return;
    }

    apercu.append(rendreMarkdown(champ.value, { casesActives: true }));
  }

  /** Signale au formulaire hôte que la note a changé. */
  function signaler() {
    champ.dispatchEvent(new Event('input', { bubbles: true }));
  }

  function passerEnEdition({ focus = true } = {}) {
    enEdition = true;
    afficherMode();
    if (focus) champ.focus();
  }

  bascule.addEventListener('click', () => {
    if (enEdition) {
      enEdition = false;
      peindreApercu();
      afficherMode();
    } else {
      passerEnEdition();
    }
  });

  // Cliquer dans le vide de l'aperçu ouvre la saisie ; cliquer un lien ou une
  // case, non — ces deux-là ont déjà leur propre effet, et basculer en édition
  // sous le doigt de qui vient de cocher serait une trahison du geste.
  apercu.addEventListener('click', (evenement) => {
    if (evenement.target.closest('a, .md-tache')) return;
    passerEnEdition();
  });

  apercu.addEventListener('change', (evenement) => {
    const coche = evenement.target;
    if (!coche.matches('input[type="checkbox"]')) return;
    // Seule écriture qui ne passe pas par `remplacer` : le champ est masqué en
    // mode aperçu, il ne peut donc pas prendre le focus dont `execCommand` a
    // besoin. Cocher une case vide la pile d'annulation du champ — sans grande
    // conséquence, puisqu'on n'était pas en train d'y taper.
    champ.value = basculerCase(champ.value, Number(coche.dataset.ligne));
    // On repeint : la bascule a pu ne rien changer — note modifiée ailleurs
    // entre le rendu et le clic —, et la case doit alors revenir à l'état que
    // le texte décrit vraiment, pas à celui que le navigateur vient de cocher.
    peindreApercu();
    signaler();
  });

  outils.addEventListener('mousedown', (evenement) => {
    // Sans cela, le bouton prendrait le focus et la sélection du textarea
    // s'évanouirait avant que l'action ne s'applique.
    if (evenement.target.closest('button')) evenement.preventDefault();
  });

  outils.addEventListener('click', (evenement) => {
    const bouton = evenement.target.closest('button');
    if (!bouton) return;
    appliquerOutil(champ, OUTILS.find((outil) => outil.cle === bouton.dataset.outil));
    signaler();
  });

  for (const outil of OUTILS) {
    const bouton = document.createElement('button');
    bouton.type = 'button';
    bouton.dataset.outil = outil.cle;
    bouton.textContent = outil.libelle;
    bouton.title = outil.titre;
    bouton.setAttribute('aria-label', outil.titre);
    outils.append(bouton);
  }

  champ.addEventListener('keydown', (evenement) => {
    if (!evenement.ctrlKey && !evenement.metaKey) return;
    const cle = evenement.key.toLowerCase() === 'b' ? 'gras'
      : evenement.key.toLowerCase() === 'i' ? 'italique'
      : null;
    if (!cle) return;
    evenement.preventDefault();
    appliquerOutil(champ, OUTILS.find((outil) => outil.cle === cle));
    signaler();
  });

  afficherMode();
  peindreApercu();

  return {
    champ,

    /**
     * Charge une note.
     *
     * @param {object} options
     *   - reinitialiserMode : choisit le mode d'après le contenu. Vrai à
     *     l'ouverture du panneau, faux quand la note est rechargée depuis
     *     ailleurs — refermer l'aperçu sur les doigts de qui tape serait le
     *     pire moment pour changer de mode.
     */
    definir(texte, { reinitialiserMode = false } = {}) {
      // Réécrire la valeur d'un textarea y replace le curseur à la fin : on
      // s'en abstient quand rien n'a changé, ce qui est le cas le plus fréquent
      // lors d'un rafraîchissement venu de la frise.
      if (champ.value !== (texte ?? '')) champ.value = texte ?? '';

      if (reinitialiserMode) enEdition = !champ.value.trim();
      if (!enEdition) peindreApercu();
      afficherMode();
    },

    /** Repeint l'aperçu après une frappe, quand il est visible. */
    synchroniser() {
      if (!enEdition) peindreApercu();
    },
  };
}

/**
 * Applique une action de la barre d'outils à la sélection courante.
 *
 * Trois formes, selon l'outil : entourer la sélection, préfixer les lignes
 * qu'elle touche, ou insérer un lien. Dans les trois cas la sélection reste
 * cohérente après coup — on continue de taper là où on en était.
 */
function appliquerOutil(champ, outil) {
  if (!outil) return;
  if (outil.entoure) return entourer(champ, outil.entoure);
  if (outil.prefixe) return prefixer(champ, outil.prefixe);
  if (outil.lien) return insererLien(champ);
}

/**
 * Remplace une plage du champ **sans rompre la pile d'annulation** du
 * navigateur.
 *
 * Affecter `champ.value` vide cette pile : `Ctrl+Z` cesse alors de remonter au
 * delà de l'action, et la frappe qui précédait devient irrécupérable. C'est un
 * prix qu'on ne peut pas faire payer à un champ de saisie — annuler est le
 * réflexe le plus élémentaire qu'on ait devant du texte.
 *
 * `execCommand` n'a pas de remplaçant pour cet usage. Il est marqué obsolète et
 * reste pourtant la seule façon d'écrire dans un `textarea` en laissant le
 * navigateur enregistrer l'opération comme si elle avait été tapée. Les API qui
 * devaient lui succéder (`InputEvent` synthétiques) ne modifient rien : le
 * navigateur ignore un événement qu'il n'a pas produit lui-même. Écrire notre
 * propre historique reviendrait à réimplémenter `Ctrl+Z`, `Ctrl+Y` et leur
 * fusion des frappes voisines — pour un champ de notes, la dépense est sans
 * commune mesure avec le service.
 *
 * D'où le repli sur l'affectation directe si la commande échoue : on perd
 * l'annulation, jamais la saisie.
 *
 * Le curseur est laissé à la fin de l'insertion ; c'est à l'appelant de le
 * replacer, ce qui ne touche pas à l'historique.
 */
function remplacer(champ, debut, fin, texte) {
  champ.focus();
  champ.setSelectionRange(debut, fin);

  // `execCommand` écrit là où est le focus, pas dans l'élément qu'on lui
  // désigne — il n'en prend aucun. Si le champ n'a pas pu le prendre (il est
  // masqué en mode aperçu), la commande irait écrire dans le champ « Nom » ou
  // dans le dernier élément actif. On vérifie donc, plutôt que d'insérer du
  // markdown au hasard dans le panneau.
  if (document.activeElement === champ) {
    // Une insertion vide n'en est pas une : c'est une suppression, et
    // `insertText` ne la traite pas partout.
    const commande = texte ? 'insertText' : 'delete';
    try {
      if (document.execCommand(commande, false, texte)) return;
    } catch {
      // Commande refusée : on retombe sur l'affectation ci-dessous.
    }
  }

  const valeur = champ.value;
  champ.value = valeur.slice(0, debut) + texte + valeur.slice(fin);
  champ.setSelectionRange(debut + texte.length, debut + texte.length);
}

function entourer(champ, marque) {
  const { selectionStart: debut, selectionEnd: fin, value: texte } = champ;
  const selection = texte.slice(debut, fin);

  // Sélection déjà entourée : le bouton retire la marque. C'est ce qu'on attend
  // d'un bouton à deux états, et sans cela « gras » deux fois de suite produit
  // un `****` qui n'a plus rien de gras.
  const dedans =
    texte.slice(debut - marque.length, debut) === marque &&
    texte.slice(fin, fin + marque.length) === marque;

  if (dedans) {
    remplacer(champ, debut - marque.length, fin + marque.length, selection);
    champ.setSelectionRange(debut - marque.length, fin - marque.length);
  } else {
    remplacer(champ, debut, fin, marque + selection + marque);
    // Sans sélection, le curseur se pose entre les deux marques : le bouton
    // arme la mise en forme et on tape dedans.
    champ.setSelectionRange(debut + marque.length, fin + marque.length);
  }
}

/** Pose (ou retire) un préfixe en tête de chaque ligne touchée par la sélection. */
function prefixer(champ, prefixe) {
  const texte = champ.value;
  const debutLigne = texte.lastIndexOf('\n', champ.selectionStart - 1) + 1;
  const finBrute = texte.indexOf('\n', champ.selectionEnd);
  const finLigne = finBrute < 0 ? texte.length : finBrute;

  const lignes = texte.slice(debutLigne, finLigne).split('\n');
  const toutesPrefixees = lignes.every((ligne) => ligne.startsWith(prefixe));
  const modifiees = lignes.map((ligne) =>
    toutesPrefixees ? ligne.slice(prefixe.length) : prefixe + ligne
  );

  const remplacement = modifiees.join('\n');
  remplacer(champ, debutLigne, finLigne, remplacement);
  champ.setSelectionRange(debutLigne, debutLigne + remplacement.length);
}

/**
 * Insère `[libellé](url)` et présélectionne la partie à remplir : l'adresse si
 * un libellé était sélectionné, le libellé sinon. On tape aussitôt, sans avoir
 * à viser au curseur entre deux parenthèses.
 */
function insererLien(champ) {
  const { selectionStart: debut, selectionEnd: fin, value: texte } = champ;
  const selection = texte.slice(debut, fin);
  const libelle = selection || 'texte';
  const insertion = `[${libelle}](https://)`;

  remplacer(champ, debut, fin, insertion);

  if (selection) {
    const debutUrl = debut + libelle.length + 3;
    champ.setSelectionRange(debutUrl + 'https://'.length, debutUrl + 'https://'.length);
  } else {
    champ.setSelectionRange(debut + 1, debut + 1 + libelle.length);
  }
}