// const: no se puede reasignar
const PI = 3.14159;
const nombre = "JavaScript";

// let: se puede reasignar
let contador = 0;
contador = 1; // ✅ válido

// var: evitar en código moderno
var antigua = "no usar"; // scope de función, permite hoisting

// Lógicos clásicos
const a = true && false;  // false (AND)
const b = true || false;  // true (OR)
const c = !true;           // false (NOT)

// Nullish coalescing (??) - solo null/undefined
const nombre = null ?? "Anónimo";  // "Anónimo"
const cero = 0 ?? 42;             // 0 (no es null ni undefined)

// Optional chaining (?.)
const usuario = { perfil: { nombre: "Ana" } };
console.log(usuario?.perfil?.nombre);  // "Ana"
console.log(usuario?.direccion?.calle); // undefined (sin error)

// Spread operator (...)
const nums = [1, 2, 3];
const copia = [...nums, 4, 5]; // [1, 2, 3, 4, 5]

// Rest operator
function sumar(...numeros) {
  return numeros.reduce((acc, n) => acc + n, 0);
}
console.log(sumar(1, 2, 3, 4)); // 10

// if / else if / else
const edad = 18;
if (edad >= 18) {
  console.log("Mayor de edad");
} else if (edad >= 16) {
  console.log("Casi mayor");
} else {
  console.log("Menor de edad");
}

// Operador ternario
const estado = edad >= 18 ? "adulto" : "menor";

// switch
const dia = "lunes";
switch (dia) {
  case "lunes":
  case "martes":
    console.log("Inicio de semana");
    break;
  case "viernes":
    console.log("¡Por fin viernes!");
    break;
  default:
    console.log("Otro día");
}

// for clásico
for (let i = 0; i < 5; i++) {
  console.log(i); // 0, 1, 2, 3, 4
}

// for...of (iterar valores de arrays, strings, etc.)
const frutas = ["manzana", "naranja", "plátano"];
for (const fruta of frutas) {
  console.log(fruta);
}

// for...in (iterar propiedades de objetos)
const persona = { nombre: "Ana", edad: 25 };
for (const clave in persona) {
  console.log(`${clave}: ${persona[clave]}`);
}

// while y do...while
let n = 0;
while (n < 3) {
  console.log(n++);
}
// do...while ejecuta al menos una vez
do {
  console.log("Se ejecuta al menos una vez");
} while (false);

// 1. Declaración de función (function declaration)
// Se eleva (hoisting): puedes llamarla antes de declararla
function sumar(a, b) {
  return a + b;
}

// 2. Expresión de función (function expression)
// NO se eleva
const restar = function(a, b) {
  return a - b;
};

// 3. Arrow function (ES6+)
// Sintaxis compacta, no tiene su propio 'this'
const multiplicar = (a, b) => a * b;

// Arrow con cuerpo
const dividir = (a, b) => {
  if (b === 0) throw new Error("No se puede dividir entre 0");
  return a / b;
};

// Parámetros por defecto
function saludar(nombre = "Mundo") {
  return `¡Hola, ${nombre}!`;
}
console.log(saludar());       // "¡Hola, Mundo!"
console.log(saludar("Ana"));  // "¡Hola, Ana!"

// Rest parameters
function sumarTodos(...nums) {
  return nums.reduce((acc, n) => acc + n, 0);
}
console.log(sumarTodos(1, 2, 3, 4)); // 10

// Destructuring en parámetros
function crearUsuario({ nombre, edad, rol = "user" }) {
  return `${nombre} (${edad}) - ${rol}`;
}
crearUsuario({ nombre: "Ana", edad: 25 });

const productos = [
  { nombre: "Laptop", precio: 999, stock: 5 },
  { nombre: "Mouse", precio: 25, stock: 50 },
  { nombre: "Teclado", precio: 75, stock: 0 },
  { nombre: "Monitor", precio: 450, stock: 8 }
];

// .map() → Transforma cada elemento
const nombres = productos.map(p => p.nombre);
// ["Laptop", "Mouse", "Teclado", "Monitor"]

// .filter() → Filtra elementos
const enStock = productos.filter(p => p.stock > 0);
// Solo Laptop, Mouse, Monitor

// .find() → Encuentra el primero que cumple
const caro = productos.find(p => p.precio > 500);
// { nombre: "Laptop", ... }

// .reduce() → Acumula un valor
const total = productos.reduce((sum, p) => sum + p.precio, 0);
// 1549

// .some() / .every() → Comprobaciones
const hayBarato = productos.some(p => p.precio < 50);  // true
const todosStock = productos.every(p => p.stock > 0);   // false

// Encadenado (chaining)
const resumen = productos
  .filter(p => p.stock > 0)
  .map(p => `${p.nombre}: ${p.precio}€`)
  .join(", ");
// "Laptop: 999€, Mouse: 25€, Monitor: 450€"

// Destructuring de arrays
const [primero, segundo, ...resto] = [1, 2, 3, 4, 5];
console.log(primero); // 1
console.log(resto);   // [3, 4, 5]

// Destructuring de objetos
const usuario = { nombre: "Ana", edad: 25, ciudad: "Madrid" };
const { nombre, edad, pais = "España" } = usuario;

// Spread para copiar/combinar
const arr1 = [1, 2, 3];
const arr2 = [...arr1, 4, 5]; // [1, 2, 3, 4, 5]

const obj1 = { a: 1, b: 2 };
const obj2 = { ...obj1, c: 3 }; // { a:1, b:2, c:3 }

// ✅ Modernos (recomendados)
const btn = document.querySelector("#miBoton");    // Uno solo
const items = document.querySelectorAll(".item");  // NodeList

// ⚠️ Clásicos (aún válidos pero menos flexibles)
const titulo = document.getElementById("titulo");
const parrafos = document.getElementsByClassName("parrafo");

// Recorrer NodeList
items.forEach(item => {
  console.log(item.textContent);
});

const titulo = document.querySelector("h1");

// Contenido
titulo.textContent = "Nuevo título";      // Solo texto
titulo.innerHTML = "<em>Cursiva</em>"; // HTML (cuidado XSS)

// Estilos
titulo.style.color = "blue";
titulo.style.fontSize = "2rem";

// Clases CSS (la mejor forma de cambiar estilos)
titulo.classList.add("activo");
titulo.classList.remove("oculto");
titulo.classList.toggle("destacado");

// Atributos
titulo.setAttribute("data-id", "123");
const id = titulo.getAttribute("data-id");

// Crear elementos
const nuevoParrafo = document.createElement("p");
nuevoParrafo.textContent = "Párrafo creado con JS";
document.body.appendChild(nuevoParrafo);

const boton = document.querySelector("#miBoton");

// ✅ Forma recomendada
boton.addEventListener("click", function(evento) {
  console.log("¡Click!", evento.target);
});

// Con arrow function
boton.addEventListener("click", (e) => {
  e.preventDefault(); // Evita comportamiento por defecto
  console.log("Coordenadas:", e.clientX, e.clientY);
});

// Eventos comunes:
// click, dblclick, mouseenter, mouseleave
// keydown, keyup, keypress
// submit, change, input, focus, blur
// scroll, resize, load, DOMContentLoaded

// Event Delegation: un solo listener para muchos hijos
// Útil para listas dinámicas
const lista = document.querySelector("#miLista");

lista.addEventListener("click", (e) => {
  // Verificar que el click fue en un <li>
  if (e.target.tagName === "LI") {
    console.log("Clicked:", e.target.textContent);
    e.target.classList.toggle("seleccionado");
  }
});

// Propagación: los eventos "burbujean" del hijo al padre
// evento.stopPropagation() detiene la propagación

const global = "Soy global"; // ← Scope global

function ejemplo() {
  const local = "Soy local"; // ← Scope de función
  
  if (true) {
    const bloque = "Soy de bloque"; // ← Scope de bloque
    var noBloque = "var ignora bloques"; // ← Scope de función
    console.log(global);  // ✅ Accesible
    console.log(local);   // ✅ Accesible
    console.log(bloque);  // ✅ Accesible
  }
  
  console.log(noBloque);  // ✅ var tiene scope de función
  // console.log(bloque); // ❌ ReferenceError
}
// console.log(local); // ❌ ReferenceError

// Ejemplo clásico de closure
function crearContador() {
  let cuenta = 0; // Variable "privada"
  
  return {
    incrementar() { return ++cuenta; },
    decrementar() { return --cuenta; },
    obtener() { return cuenta; }
  };
}

const contador = crearContador();
console.log(contador.incrementar()); // 1
console.log(contador.incrementar()); // 2
console.log(contador.obtener());     // 2
// No hay forma de acceder a 'cuenta' directamente

// Uso práctico: función factory
function multiplicador(factor) {
  return (numero) => numero * factor;
}
const doble = multiplicador(2);
const triple = multiplicador(3);
console.log(doble(5));  // 10
console.log(triple(5)); // 15

class Animal {
  // Constructor: se ejecuta al crear una instancia
  constructor(nombre, sonido) {
    this.nombre = nombre;
    this.sonido = sonido;
  }
  
  // Método
  hablar() {
    return `${this.nombre} dice ${this.sonido}`;
  }
  
  // Método estático (no necesita instancia)
  static esAnimal(obj) {
    return obj instanceof Animal;
  }
}

// Herencia con extends
class Perro extends Animal {
  constructor(nombre, raza) {
    super(nombre, "Guau"); // Llama al constructor padre
    this.raza = raza;
  }
  
  // Sobreescribir método
  hablar() {
    return `${super.hablar()}! (${this.raza})`;
  }
}

const rex = new Perro("Rex", "Pastor Alemán");
console.log(rex.hablar()); // "Rex dice Guau! (Pastor Alemán)"
console.log(Animal.esAnimal(rex)); // true

// rex → Perro.prototype → Animal.prototype → Object.prototype → null

console.log(rex.__proto__ === Perro.prototype); // true
console.log(rex.__proto__.__proto__ === Animal.prototype); // true

// Verificar herencia
console.log(rex instanceof Perro);   // true
console.log(rex instanceof Animal);  // true
console.log(rex instanceof Object);  // true

// Promise.all → Espera a TODAS (falla si una falla)
const [users, posts] = await Promise.all([
  fetch("/api/users").then(r => r.json()),
  fetch("/api/posts").then(r => r.json())
]);

// Promise.allSettled → Espera a todas sin importar si fallan
const resultados = await Promise.allSettled([
  fetch("/api/ok"),
  fetch("/api/error-404")
]);
// [{status: "fulfilled", value: ...}, {status: "rejected", reason: ...}]

console.log("1 - Síncrono");

setTimeout(() => {
  console.log("2 - Macrotask (setTimeout)");
}, 0);

Promise.resolve().then(() => {
  console.log("3 - Microtask (Promise)");
});

console.log("4 - Síncrono");

// Orden de salida:
// 1 - Síncrono
// 4 - Síncrono
// 3 - Microtask (Promise)  ← Se ejecuta antes que setTimeout
// 2 - Macrotask (setTimeout)

// Ejemplo de una petición POST enviando datos
async function crearUsuario(nuevoUsuario) {
  try {
    const respuesta = await fetch('https://api.ejemplo.com/usuarios', {
      method: 'POST',
      headers: { 
        'Content-Type': 'application/json',
        'Authorization': 'Bearer mi_token_secreto' 
      },
      // Transformamos el objeto JS a un string JSON compatible con la red
      body: JSON.stringify(nuevoUsuario) 
    });

    if (!respuesta.ok) throw new Error(`HTTP Error: ${respuesta.status}`);
    
    return await respuesta.json();
  } catch (error) {
    console.error("Fallo al enviar datos:", error.message);
  }
}

// --- math.js (Archivo exportador) ---
// Exportación nombrada (Puedes tener múltiples)
export const sumar = (a, b) => a + b;
export const PI = 3.14159;

// Exportación por defecto (Ideal para clases o componentes principales)
export default class Calculadora {
  constructor() { this.resultado = 0; }
}

// --- app.js (Archivo importador) ---
// Importamos el Default (sin llaves) y los nombrados (con llaves)
import Calculadora, { sumar, PI } from './math.js';

const miCalc = new Calculadora();
console.log(sumar(10, 5)); // 15

const preferencias = { tema: "oscuro", visitas: 5 };

// 1. GUARDAR (Serialización)
// Transformamos el Objeto a una cadena de texto JSON
const stringData = JSON.stringify(preferencias);
localStorage.setItem("userPrefs", stringData);

// 2. LEER (Deserialización)
const savedData = localStorage.getItem("userPrefs");
if (savedData) {
  // Convertimos el String de vuelta a un Objeto real manipulable
  const configParseada = JSON.parse(savedData);
  console.log(configParseada.tema); // "oscuro"
}

// 3. BORRAR
localStorage.removeItem("userPrefs"); 
// localStorage.clear(); // Borra la base de datos entera de ese dominio

// Definimos nuestro error de dominio personalizado
class ValidationError extends Error {
  constructor(mensaje, campoProblematico) {
    super(mensaje); 
    this.name = "ValidationError";
    this.campo = campoProblematico;
  }
}

function registrarUsuario(edad) {
  if (typeof edad !== "number") {
    // Abortamos la ejecución instanciando nuestro error
    throw new ValidationError("La edad debe ser un número", "input_edad");
  }
  return "Registro exitoso";
}

try {
  registrarUsuario("veinte");
} catch (error) {
  // Enrutamos la lógica basándonos en el TIPO de error
  if (error instanceof ValidationError) {
    console.warn(`Error en UX (${error.campo}): ${error.message}`);
    // pintarBordeRojo(error.campo);
  } else {
    console.error("Fallo crítico del sistema:", error);
  }
}

/**
 * Al usar JSDoc, el editor nos regala autocompletado e inteligencia (IntelliSense)
 * * @typedef {Object} Usuario
 * @property {number} id - Identificador único
 * @property {string} nombre - Nombre completo
 * @property {string} [rol] - Rol opcional (por defecto será user)
 */

/**
 * Registra un usuario en la base de datos
 * @param {Usuario} userObj - El objeto de configuración del usuario
 * @returns {boolean} Retorna true si fue exitoso
 */
function registrar(userObj) {
  console.log(`Registrando a ${userObj.nombre}`);
  return true;
}

// VS Code nos marcará un error rojo aquí abajo porque falta la propiedad obligatoria 'id':
// registrar({ nombre: "Ana" }); 

// Patrón Higher-Order Function para crear un Debounce (Aprovechando Closures)
function debounce(func, timeout = 500) {
  let timer; // Este temporizador sobrevive gracias al Closure
  
  return (...args) => {
    // Si el usuario vuelve a teclear antes de los 500ms, borramos el temporizador anterior
    clearTimeout(timer);
    // Y creamos uno completamente nuevo
    timer = setTimeout(() => {
      func.apply(this, args);
    }, timeout);
  };
}

function simularLlamadaApi(busqueda) {
  console.log(`Buscando en servidor: ${busqueda}`);
}

const inputBuscador = document.querySelector("#search");
// Solo se llamará a la API cuando el usuario haga una pausa de medio segundo al teclear
const peticionDebounceada = debounce(simularLlamadaApi, 500);

// inputBuscador.addEventListener('input', (e) => peticionDebounceada(e.target.value));

// Configuración del vigilante
const opciones = {
  root: null, // null significa que vigilamos el Viewport del navegador entero
  rootMargin: '0px',
  threshold: 0.1 // Avisar cuando al menos el 10% del elemento sea visible
};

// Callback que se ejecuta asíncronamente cuando hay intersección
const vigilarEntrada = (entradas, observer) => {
  entradas.forEach(entrada => {
    if (entrada.isIntersecting) {
      console.log("¡El elemento ha entrado a la pantalla!");
      entrada.target.classList.add('animacion-fade-in');
      
      // Buena práctica: Dejar de observarlo si ya no nos importa para ahorrar memoria
      observer.unobserve(entrada.target);
    }
  });
};

// Creamos la instancia y le pasamos a quién tiene que vigilar
const miObserver = new IntersectionObserver(vigilarEntrada, opciones);
const imagenSecreta = document.querySelector('.imagen-perezosa');
miObserver.observe(imagenSecreta);

// --- math.js (Nuestra función de negocio) ---
export const calcularDescuento = (precio, descuentoPorcentaje) => {
  if (precio < 0 || descuentoPorcentaje < 0) throw new Error("Valores inválidos");
  return precio - (precio * (descuentoPorcentaje / 100));
};

// --- math.test.js (Nuestro archivo de pruebas) ---
import { calcularDescuento } from './math';

// Suite de pruebas semántica
describe("Función calcularDescuento", () => {
  
  test("Debería aplicar un 20% a 100 devolviendo 80", () => {
    const resultado = calcularDescuento(100, 20);
    // Asserts (Afirmaciones matemáticas)
    expect(resultado).toBe(80); 
  });

  test("Debería lanzar error si el precio es negativo", () => {
    // Para probar errores, debemos envolver la ejecución en una función anónima
    expect(() => calcularDescuento(-50, 10)).toThrow("Valores inválidos");
  });
});

// === SET: Limpieza automática de duplicados ===
const numerosConDuplicados = [1, 2, 2, 3, 4, 4, 5];
// Pasamos el array al Set (elimina duplicados) y lo esparcimos (...) de vuelta a un array limpio
const numerosUnicos = [...new Set(numerosConDuplicados)];
console.log(numerosUnicos); // [1, 2, 3, 4, 5]

// === MAP: Diccionario de alto rendimiento ===
const diccionario = new Map();
const objClave = { id: 1 }; // Un objeto como clave (imposible con diccionarios normales)

diccionario.set(objClave, "Datos privados del usuario");
diccionario.set("stringNormal", 42);

console.log(diccionario.get(objClave)); // "Datos privados del usuario"
console.log(diccionario.size); // 2

// WeakMap y WeakSet existen para guardar referencias débiles a elementos del DOM.
// Si el elemento HTML se borra, el WeakMap lo elimina automáticamente para evitar Memory Leaks.

const usuarioFisico = { nombre: "Ana", edad: 25 };

// Creamos un Handler (Trampas / Traps) para interceptar las interacciones
const interceptor = {
  // Se dispara cada vez que alguien intenta leer (ej: proxyUser.edad)
  get(target, prop) {
    console.log(`[LOG] Alguien está leyendo la propiedad: ${prop}`);
    return prop in target ? target[prop] : "Propiedad inexistente";
  },
  // Se dispara cada vez que alguien intenta reasignar (ej: proxyUser.edad = 10)
  set(target, prop, value) {
    if (prop === 'edad' && typeof value !== 'number') {
      throw new Error("La edad debe ser obligatoriamente un número");
    }
    console.log(`[LOG] Cambiando ${prop} a ${value}`);
    target[prop] = value;
    return true; // Obligatorio indicar que la operación fue un éxito
  }
};

// Envolvemos el objeto real con el Proxy
const proxyUser = new Proxy(usuarioFisico, interceptor);

console.log(proxyUser.nombre); // Dispara el get()
proxyUser.edad = 26;           // Dispara el set()
// proxyUser.edad = "veinte";  // Dispararía nuestro Error personalizado

// --- hilo_principal.js (Tu web normal) ---
// Levantamos un nuevo hilo de ejecución en el sistema operativo
const worker = new Worker('worker_pesado.js');

// Escuchamos las respuestas que lleguen del otro hilo
worker.addEventListener('message', (evento) => {
  console.log("El worker ha terminado el cálculo:", evento.data);
});

// Le enviamos la tarea pesada al worker
worker.postMessage({ comando: 'empezar_calculo', valor: 1000000000 });


// --- worker_pesado.js (El archivo en paralelo) ---
// Este archivo NO tiene acceso al DOM (no puede hacer document.querySelector)
self.addEventListener('message', (evento) => {
  if (evento.data.comando === 'empezar_calculo') {
    let resultado = 0;
    // Bucle extremadamente pesado que congelaría el hilo principal, 
    // pero aquí corre de forma segura en paralelo.
    for (let i = 0; i < evento.data.valor; i++) {
      resultado += i;
    }
    
    // Enviamos el resultado de vuelta a la página principal
    self.postMessage(resultado);
  }
});

// Función Generadora (nota el asterisco)
function* generarSecuencia() {
  console.log("Iniciando generador...");
  yield 1; // Pausa aquí y devuelve 1
  
  console.log("Reanudando tras el primer yield...");
  yield 2; // Pausa aquí y devuelve 2
  
  console.log("Reanudando hasta el final...");
  return 3; // Termina la función
}

// Al llamar a la función NO se ejecuta, solo devuelve un "Iterador"
const iterador = generarSecuencia();

// Tenemos que forzar el avance paso a paso usando .next()
console.log(iterador.next()); 
// Consola: "Iniciando generador..."
// Imprime: { value: 1, done: false }

console.log(iterador.next()); 
// Consola: "Reanudando tras el primer yield..."
// Imprime: { value: 2, done: false }

console.log(iterador.next()); 
// Consola: "Reanudando hasta el final..."
// Imprime: { value: 3, done: true } (done: true significa que finalizó)

// ❌ MAL: variable global, nombre genérico, mutación
var d = [];
function p(x) { d.push(x); }

// ✅ BIEN: scope limitado, nombres claros, inmutabilidad
const agregarProducto = (productos, nuevoProducto) => {
  return [...productos, nuevoProducto]; // No muta el original
};

// ❌ MAL: callback hell, sin manejo de errores
fetch("/api").then(r => r.json()).then(d => {
  fetch("/api/" + d.id).then(r => r.json()).then(d2 => {
    console.log(d2);
  });
});

// ✅ BIEN: async/await con try/catch
async function obtenerDetalle() {
  try {
    const res = await fetch("/api");
    const data = await res.json();
    const detalle = await fetch(`/api/${data.id}`);
    return await detalle.json();
  } catch (error) {
    console.error("Error:", error.message);
    throw error; // Re-lanzar para el caller
  }
}