content.js

/**
 * Crea un nodo del DOM para un valor JSON primitivo con el resaltado de sintaxis adecuado.
 */
function createPrimitiveNode(data) {
  const span = document.createElement('span');
  const type = typeof data;
  let value = data;
  let cssClass = 'json-null';

  if (type === 'string') {
    cssClass = 'json-string';
    value = `"${data}"`;
  } else if (type === 'number') {
    cssClass = 'json-number';
  } else if (type === 'boolean') {
    cssClass = 'json-boolean';
  }
  
  span.className = cssClass;
  span.textContent = value;
  return span;
}

/**
 * Función RECURSIVA que construye un árbol de nodos del DOM a partir de datos JSON.
 */
function createJsonNode(data) {
  if (data === null || typeof data !== 'object') {
    return createPrimitiveNode(data);
  }

  const isArray = Array.isArray(data);
  const keys = Object.keys(data);
  const count = keys.length;

  const container = document.createElement('div');
  container.className = 'collapsible';

  const toggler = document.createElement('span');
  toggler.className = 'toggler';

  const sizeText = isArray
    ? `// ${count} ${count === 1 ? 'elemento' : 'elementos'}`
    : `// ${count} ${count === 1 ? 'propiedad' : 'propiedades'}`;

  const sizeSpan = document.createElement('span');
  sizeSpan.className = 'json-size';
  sizeSpan.textContent = sizeText;

  if (count === 0) {
    toggler.style.visibility = 'hidden';
  }
  
  const openingBracket = document.createTextNode(isArray ? '[' : '{');
  const closingBracket = document.createTextNode(isArray ? ']' : '}');
  
  const ellipsis = document.createElement('span');
  ellipsis.className = 'ellipsis';
  ellipsis.textContent = `... ${count} ...`;

  const content = document.createElement('div');
  content.className = 'content';

  container.appendChild(toggler);
  container.appendChild(openingBracket);
  container.appendChild(sizeSpan);
  container.appendChild(ellipsis);
  container.appendChild(content);

  keys.forEach(key => {
    const itemContainer = document.createElement('div');
    itemContainer.className = 'item-container';
    
    if (!isArray) {
      const keySpan = document.createElement('span');
      keySpan.className = 'json-key';
      keySpan.textContent = `"${key}": `;
      itemContainer.appendChild(keySpan);
    }

    const valueNode = createJsonNode(data[key]);
    itemContainer.appendChild(valueNode);
    
    content.appendChild(itemContainer);
  });
  
  container.appendChild(closingBracket);
  return container;
}

/**
 * Procesa un único elemento .jsonable, formateándolo y añadiendo los controles.
 */
function processElement(element) {
  if (element.classList.contains('json-formatter-processed')) return;

  const originalText = element.textContent;

  try {
    const parsedJson = JSON.parse(originalText);
    const formattedText = JSON.stringify(parsedJson, null, 2);

    const controlsContainer = document.createElement('div');
    controlsContainer.className = 'json-controls';

    const toggleButton = document.createElement('button');
    toggleButton.textContent = 'Ocultar';

    const copyButton = document.createElement('button');
    copyButton.textContent = 'Copiar';
    
    controlsContainer.appendChild(toggleButton);
    controlsContainer.appendChild(copyButton);

    const preElement = document.createElement('pre');
    
    const jsonTree = createJsonNode(parsedJson);
    preElement.appendChild(jsonTree);

    preElement.addEventListener('click', (event) => {
      if (event.target.classList.contains('toggler')) {
        event.target.parentElement.classList.toggle('collapsed');
      }
    });

    element.innerHTML = '';
    element.appendChild(controlsContainer);
    element.appendChild(preElement);
    
    toggleButton.addEventListener('click', () => {
      const isHidden = preElement.style.display === 'none';
      preElement.style.display = isHidden ? 'block' : 'none';
      toggleButton.textContent = isHidden ? 'Ocultar' : 'Mostrar';
    });

    copyButton.addEventListener('click', () => {
      navigator.clipboard.writeText(formattedText).then(() => {
        copyButton.textContent = '¡Copiado!';
        copyButton.classList.add('copied');
        setTimeout(() => {
          copyButton.textContent = 'Copiar';
          copyButton.classList.remove('copied');
        }, 2000);
      }).catch(err => console.error('Error al copiar el JSON: ', err));
    });

  } catch (error) {
    element.innerHTML = '';
    const errorDiv = document.createElement('div');
    errorDiv.className = 'json-error-message';
    errorDiv.textContent = `Error: No se pudo procesar el JSON. (Detalle: ${error.message})`;
    element.appendChild(errorDiv);
  }
  
  element.classList.add('json-formatter-processed');
}

/**
 * Escanea un nodo del DOM en busca de elementos .jsonable no procesados y los procesa.
 */
function scanAndProcess(node) {
  if (node.matches && node.matches('.jsonable:not(.json-formatter-processed)')) {
    processElement(node);
  }
  
  const jsonableElements = node.querySelectorAll('.jsonable:not(.json-formatter-processed)');
  jsonableElements.forEach(processElement);
}

const observerCallback = (mutationsList, observer) => {
  for (const mutation of mutationsList) {
    if (mutation.type === 'childList') {
      for (const addedNode of mutation.addedNodes) {
        if (addedNode.nodeType === 1) {
          scanAndProcess(addedNode);
        }
      }
    }
  }
};

const observer = new MutationObserver(observerCallback);
scanAndProcess(document.body);
observer.observe(document.body, {
  childList: true,
  subtree: true
});