// ── VARIABLES ────────────────────────────────────
const nombre = "Ana";      // constante — no cambia
let edad = 17;             // variable — puede cambiar
// var (evitar en código moderno)

// ── TIPOS DE DATOS ────────────────────────────────
const num = 42;            // number
const texto = "Hola";     // string
const activo = true;      // boolean
const nada = null;        // null
const sinDef = undefined; // undefined

// ── TEMPLATE LITERALS ────────────────────────────
const saludo = `Hola, ${nombre}! Tenés ${edad} años.`;

// ── OPERADORES MODERNOS ──────────────────────────
const x = null;
const valor = x ?? "valor por defecto"; // Nullish coalescing

let usuario = null;
const clave = usuario?.nombre ?? "Anónimo"; // Optional chaining

// ── CONDICIONALES ────────────────────────────────
if (edad >= 18) {
  console.log("Mayor de edad");
} else if (edad >= 13) {
  console.log("Adolescente");
} else {
  console.log("Niño");
}

// Ternario
const estado = edad >= 18 ? "mayor" : "menor";

// Función tradicional
function sumar(a, b) {
  return a + b;
}

// Arrow function (la forma moderna)
const sumar = (a, b) => a + b;

// Con cuerpo (bloque)
const calcular = (a, b, op) => {
  if (op === "+") return a + b;
  if (op === "-") return a - b;
  return null;
};

// Parámetros por defecto
const saludar = (nombre = "Mundo") => `¡Hola, ${nombre}!`;
saludar();         // ¡Hola, Mundo!
saludar("Ana");   // ¡Hola, Ana!

// Rest params: recibir cantidad variable de argumentos
const promedio = (...nums) => {
  const suma = nums.reduce((a, b) => a + b, 0);
  return suma / nums.length;
};
promedio(8, 7, 9, 10);  // 8.5

// Destructuring
const [x, y, ...resto] = [1, 2, 3, 4, 5];
const { nombre, edad, ciudad = "BA" } = { nombre: "Ana", edad: 17 };

const notas = [8, 5, 9, 7, 6, 10, 4];

// map() — transforma cada elemento
const dobles = notas.map(n => n * 2);
// [16, 10, 18, 14, 12, 20, 8]

// filter() — filtra según condición
const aprobadas = notas.filter(n => n >= 6);
// [8, 9, 7, 6, 10]

// find() — primer elemento que cumple
const primera10 = notas.find(n => n === 10);
// 10

// reduce() — acumula en un solo valor
const suma = notas.reduce((acc, n) => acc + n, 0);
const prom = suma / notas.length;

// some() — ¿alguno cumple?
const hayDesaprobados = notas.some(n => n < 6); // true

// every() — ¿todos cumplen?
const todosAprobados = notas.every(n => n >= 6); // false

// sort() — ordenar (CUIDADO: modifica el original)
const ordenadas = [...notas].sort((a, b) => a - b);

// Objetos y spread operator
const alumno = { nombre: "Ana", edad: 17 };
const actualizado = { ...alumno, edad: 18, ciudad: "BA" };

// Array de objetos
const alumnos = [
  { nombre: "Ana", nota: 9 },
  { nombre: "Luis", nota: 7 },
  { nombre: "Pedro", nota: 5 }
];

const aprobados = alumnos
  .filter(a => a.nota >= 6)
  .map(a => a.nombre);
// ["Ana", "Luis"]

// ── SELECCIONAR ELEMENTOS ────────────────────────
const titulo = document.getElementById("titulo");
const boton = document.querySelector(".btn-enviar");
const cards = document.querySelectorAll(".card");

// ── LEER Y MODIFICAR CONTENIDO ───────────────────
titulo.textContent = "Nuevo título";  // solo texto
titulo.innerHTML = "Título con <strong>negrita</strong>"; // HTML

// ── MODIFICAR ESTILOS ─────────────────────────────
titulo.style.color = "#00b4ff";
titulo.style.fontSize = "2rem";

// ── CLASES ────────────────────────────────────────
boton.classList.add("activo");
boton.classList.remove("deshabilitado");
boton.classList.toggle("visible");  // agrega/quita
boton.classList.contains("activo"); // true/false

// ── ATRIBUTOS ─────────────────────────────────────
const link = document.querySelector("a");
link.setAttribute("href", "https://nueva-url.com");
link.getAttribute("href");

// ── CREAR Y AGREGAR ELEMENTOS ─────────────────────
const nuevoItem = document.createElement("li");
nuevoItem.textContent = "Nuevo ítem";
nuevoItem.classList.add("item-lista");

const lista = document.querySelector("ul");
lista.appendChild(nuevoItem);  // al final
lista.prepend(nuevoItem);      // al principio
nuevoItem.remove();           // eliminar

const boton = document.getElementById("mi-btn");

// Agregar escuchador de eventos
boton.addEventListener("click", (event) => {
  console.log("¡Click!");
  event.preventDefault();  // evitar comportamiento default
});

// Otros eventos comunes
document.addEventListener("DOMContentLoaded", () => {
  // El DOM está listo
});

const input = document.querySelector("input");
input.addEventListener("input", (e) => {
  console.log(`Valor: ${e.target.value}`);
});

input.addEventListener("keydown", (e) => {
  if (e.key === "Enter") buscar();
});

window.addEventListener("scroll", () => {
  const pct = (window.scrollY / (document.body.scrollHeight - window.innerHeight)) * 100;
  progressBar.style.width = `${pct}%`;
});

// Event Delegation: escuchar eventos en el padre
documento.querySelector(".lista").addEventListener("click", (e) => {
  if (e.target.matches(".item")) {
    e.target.classList.toggle("completado");
  }
});

// ── FETCH con async/await ────────────────────────
async function obtenerUsuarios() {
  try {
    // 1. Hacemos la petición
    const respuesta = await fetch("https://jsonplaceholder.typicode.com/users");

    // 2. Verificamos que fue exitosa
    if (!respuesta.ok) {
      throw new Error(`Error HTTP: ${respuesta.status}`);
    }

    // 3. Convertimos la respuesta a JSON
    const usuarios = await respuesta.json();

    // 4. Mostramos los datos
    renderizarUsuarios(usuarios);

  } catch (error) {
    console.error("Error al traer usuarios:", error);
    mostrarError("No se pudo cargar la información");
  }
}

// Función para renderizar
function renderizarUsuarios(usuarios) {
  const lista = document.getElementById("lista-usuarios");
  lista.innerHTML = usuarios.map(u => `
    <li class="usuario">
      <strong>${u.name}</strong> — ${u.email}
    </li>
  `).join("");
}

// Llamamos la función
obtenerUsuarios();

// ── POST con fetch ────────────────────────────────
async function crearPost(datos) {
  const res = await fetch("https://jsonplaceholder.typicode.com/posts", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify(datos)
  });
  const nuevo = await res.json();
  console.log("Creado:", nuevo);
}