JavaScript Esencial

// CONST: valor que no cambia (usa esto por defecto)
const nombre = 'Ana García';
const edad = 28;
const activo = true;
const colores = ['rojo', 'verde', 'azul']; // array = const aunque se modifique
const usuario = { nombre: 'Ana', rol: 'admin' }; // objeto = const

// LET: valor que necesita reasignarse
let intentos = 0;
let mensaje = '';
let loading = false;

// REASIGNACIÓN
intentos = intentos + 1;   // ✓ OK, reasignación con let
nombre = 'Otra persona';   // ✗ ERROR: const no se puede reasignar

// Parámetros por defecto
function saludar(nombre = 'amigo', saludo = 'Hola') {
  return `${saludo}, ${nombre}!`;
}
saludar();               // 'Hola, amigo!'
saludar('Ana', 'Hey');   // 'Hey, Ana!'

// Rest (...): recibe múltiples argumentos como array
function suma(...numeros) {
  return numeros.reduce((total, n) => total + n, 0);
}
suma(1, 2, 3, 4, 5); // 15

// Spread (...): expande un array o un objeto
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const combinado = [...arr1, ...arr2]; // [1,2,3,4,5,6]

const original = { nombre: 'Ana', rol: 'user' };
const admin    = { ...original, rol: 'admin' }; // override: rol = 'admin'

// UN elemento (el primero que encuentre)
const titulo  = document.querySelector('h1');
const boton   = document.querySelector('#enviar');
const card    = document.querySelector('.card');
const input   = document.querySelector('input[type="email"]');

// MÚLTIPLES elementos (devuelve NodeList)
const cards = document.querySelectorAll('.card');
const links = document.querySelectorAll('nav a');

// Iterar sobre múltiples
cards.forEach(card => card.classList.add('visible'));

// También puedes convertirlo a array para usar map/filter
const cardsArr = Array.from(cards);

// Dentro de un elemento (más eficiente, solo busca dentro)
const nav      = document.querySelector('nav');
const linksNav = nav.querySelectorAll('a');

const elemento = document.querySelector('.titulo');

// LEER
elemento.textContent            // texto plano (seguro)
elemento.innerHTML              // HTML interno (cuidado con XSS)
elemento.value                  // valor de inputs y textareas
elemento.getAttribute('href')   // cualquier atributo HTML

// ESCRIBIR
elemento.textContent = 'Nuevo título';
elemento.innerHTML   = '<strong>Negrita</strong> y texto';
elemento.value       = 'nuevo valor';
elemento.setAttribute('data-id', '42');

// CLASES
elemento.classList.add('activo');
elemento.classList.remove('inactivo');
elemento.classList.toggle('visible');
elemento.classList.contains('activo');        // true/false
elemento.classList.replace('viejo', 'nuevo');

// ESTILOS INLINE (usa clases cuando puedas, esto es para casos dinámicos)
elemento.style.display          = 'none';
elemento.style.backgroundColor  = '#f0e040';
elemento.style.cssText          = 'display:flex; gap:16px;';

// CREAR
const div = document.createElement('div');
div.className = 'card';
div.innerHTML = `
  <h3>Título</h3>
  <p>Descripción</p>
`;

// INSERTAR
document.body.appendChild(div);              // al final del body
container.prepend(div);                      // al inicio del container
lista.insertBefore(div, lista.children[2]);  // en posición específica

// insertAdjacentHTML: más control sobre dónde insertas
referencia.insertAdjacentHTML('afterend', '<p>Después del elemento</p>');
// posiciones: 'beforebegin' | 'afterbegin' | 'beforeend' | 'afterend'

// ELIMINAR
elemento.remove();
container.removeChild(hijo);

document.querySelector('form').addEventListener('submit', (event) => {
  event.preventDefault(); // evita el comportamiento por defecto (recargar)

  // El objeto event contiene info del evento
  console.log(event.target);  // el elemento que disparó el evento
  console.log(event.type);    // 'submit'

  const datos = new FormData(event.target);
  const email = datos.get('email');
  const nombre = datos.get('nombre');
});

document.addEventListener('keydown', (e) => {
  if (e.key === 'Escape')                cerrarModal();
  if (e.ctrlKey && e.key === 's') {
    e.preventDefault(); // evita guardar el html del navegador
    guardarDraft();
  }
});

// EVENT DELEGATION: un solo listener para múltiples elementos
// Más eficiente que añadir uno a cada elemento.
// Funciona incluso con elementos añadidos dinámicamente.
document.querySelector('.lista').addEventListener('click', (e) => {
  // closest() sube por el DOM hasta encontrar el selector
  const item = e.target.closest('.item');
  if (item) {
    item.classList.toggle('completado');
    const id = item.dataset.id; // lee atributo data-id
  }
});

// FETCH BÁSICO
async function obtenerUsuario(id) {
  try {
    const response = await fetch(`https://api.ejemplo.com/usuarios/${id}`);

    // Siempre verifica el status — fetch no lanza error en 404/500
    if (!response.ok) {
      throw new Error(`Error ${response.status}: ${response.statusText}`);
    }

    const usuario = await response.json(); // parsea el JSON
    return usuario;

  } catch (error) {
    console.error('Error al obtener usuario:', error);
    throw error; // propaga el error para que el llamador lo maneje
  }
}

// LLAMAR CON ESTADO DE LOADING
async function cargarPerfil() {
  const loading  = document.querySelector('.loading');
  const contenido = document.querySelector('.perfil');

  loading.style.display  = 'block';
  contenido.style.opacity = '0';

  try {
    const usuario = await obtenerUsuario(1);
    contenido.querySelector('.nombre').textContent = usuario.name;
    contenido.querySelector('.email').textContent  = usuario.email;
    contenido.style.opacity = '1';
  } catch (error) {
    contenido.innerHTML = '<p class="error">Error al cargar. Intenta de nuevo.</p>';
  } finally {
    loading.style.display = 'none'; // se ejecuta SIEMPRE, con o sin error
  }
}

// POST: enviar datos al servidor
async function crearUsuario(datos) {
  const response = await fetch('https://api.ejemplo.com/usuarios', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'Authorization': `Bearer ${token}`
    },
    body: JSON.stringify(datos) // convierte el objeto a string JSON
  });

  if (!response.ok) throw new Error('Error al crear usuario');
  return response.json();
}

// MÚLTIPLES PETICIONES EN PARALELO
async function cargarDashboard() {
  const [usuario, posts, stats] = await Promise.all([
    fetch('/api/usuario').then(r => r.json()),
    fetch('/api/posts').then(r => r.json()),
    fetch('/api/stats').then(r => r.json())
  ]);
  // los tres se piden al mismo tiempo, no uno tras otro
}

// GUARDAR
localStorage.setItem('tema', 'dark');
localStorage.setItem('usuario', JSON.stringify({ nombre: 'Ana', rol: 'admin' }));

// LEER
const tema    = localStorage.getItem('tema');           // 'dark' o null si no existe
const usuario = JSON.parse(localStorage.getItem('usuario') || 'null');

// ELIMINAR
localStorage.removeItem('tema');
localStorage.clear(); // elimina TODO el localStorage de ese origen (cuidado)

// PATRÓN COMÚN: leer con fallback
const preferencias = JSON.parse(localStorage.getItem('preferencias')) || {
  tema: 'dark',
  idioma: 'es',
  notificaciones: true
};

// PATRÓN: CRUD de un array (notas, tareas, carrito)
function cargarNotas() {
  return JSON.parse(localStorage.getItem('notas')) || [];
}

function guardarNotas(notas) {
  localStorage.setItem('notas', JSON.stringify(notas));
}

function agregarNota(nota) {
  const notas = cargarNotas();
  notas.push({ id: Date.now(), ...nota });
  guardarNotas(notas);
}

function eliminarNota(id) {
  const notas = cargarNotas().filter(n => n.id !== id);
  guardarNotas(notas);
}