BONUS: this a fondo — quién es this según cómo lo llamas

// ════════════════════════════════════════════════════════════════════════════
// SOLUCIÓN OK — Funciona, pero con un patrón anticuado
//
// El problema: pasar this.registrarEntrada a forEach desconecta el método
// de su instancia. Cuando forEach lo llama, ya no hay objeto a la izquierda
// del punto → this es undefined en modo estricto → TypeError.
//
// Solución OK: guardar this en una variable antes del callback.
// Es la técnica que se usaba antes de que existieran las arrow functions
// (anterior a ES6, 2015). Hoy es código legacy, pero aún se ve en proyectos viejos.
// ════════════════════════════════════════════════════════════════════════════

const cola = [
  { nombre: "Tracer", rol: "Daño" },
  { nombre: "Reinhardt", rol: "Tanque" },
  { nombre: "Mercy", rol: "Apoyo" },
];

class GestorTurnos {
  constructor() {
    // acumula los mensajes de entrada
    this.registros = [];
  }

  registrarEntrada(heroe) {
    const mensaje = heroe.nombre + " (" + heroe.rol + ") ha entrado en partida";
    // necesita que this sea la instancia
    this.registros.push(mensaje);
    console.log(mensaje);
  }

  procesarCola(heroes) {
    // guardamos la instancia en una variable del scope exterior
    const self = this;

    // La función anónima cierra sobre 'self' (un closure).
    // Cuando forEach la llama, 'self' sigue siendo la instancia de GestorTurnos.
    heroes.forEach(function (heroe) {
      // llamamos el método desde la instancia via 'self'
      self.registrarEntrada(heroe);
    });
  }
}

const gestor = new GestorTurnos();
gestor.procesarCola(cola);
// los tres mensajes guardados en el array
console.log(gestor.registros);

// ════════════════════════════════════════════════════════════════════════════
// SOLUCIÓN MEJOR — Arrow function o bind: las herramientas modernas
//
// Hay dos enfoques limpios para arreglar la pérdida de this en un callback.
// Aquí se muestran los dos, con sus ventajas, para que elijas con criterio.
// ════════════════════════════════════════════════════════════════════════════

const cola = [
  { nombre: "Tracer", rol: "Daño" },
  { nombre: "Reinhardt", rol: "Tanque" },
  { nombre: "Mercy", rol: "Apoyo" },
];

// ── Versión A: arrow function como callback ───────────────────────────────
// Una arrow no tiene this propio: hereda el del scope donde se DEFINE.
// Se define dentro de procesarCola, cuyo this es la instancia → captura la instancia.
class GestorTurnosArrow {
  constructor() {
    this.registros = [];
  }

  registrarEntrada(heroe) {
    const mensaje = heroe.nombre + " (" + heroe.rol + ") ha entrado en partida";
    this.registros.push(mensaje);
    console.log(mensaje);
  }

  procesarCola(heroes) {
    // Arrow function: no tiene this propio → hereda el this de procesarCola.
    // procesarCola se llama como gestor.procesarCola(), así que su this es la instancia.
    heroes.forEach((heroe) => {
      // this es la instancia GestorTurnosArrow
      this.registrarEntrada(heroe);
    });
  }
}

const gestorA = new GestorTurnosArrow();
gestorA.procesarCola(cola);
console.log("Registros (arrow): " + gestorA.registros.length + " entradas");

// ── Versión B: bind para fijar this en el método ─────────────────────────
// bind devuelve una función nueva con this permanentemente fijado al valor dado.
// La función nueva siempre usará ese this, sin importar cómo se la llame.
class GestorTurnosBind {
  constructor() {
    this.registros = [];
  }

  registrarEntrada(heroe) {
    const mensaje = heroe.nombre + " (" + heroe.rol + ") ha entrado en partida";
    this.registros.push(mensaje);
    console.log(mensaje);
  }

  procesarCola(heroes) {
    // bind(this) crea una copia de registrarEntrada con this bloqueado a la instancia.
    // forEach recibirá esa copia: llámala como quiera, this siempre será la instancia.
    heroes.forEach(this.registrarEntrada.bind(this));
  }
}

const gestorB = new GestorTurnosBind();
gestorB.procesarCola(cola);
console.log("Registros (bind): " + gestorB.registros.length + " entradas");

// ── ¿Cuándo usar cada uno? ────────────────────────────────────────────────
// Arrow en callback (versión A): más legible cuando el callback es cortito.
// bind (versión B): útil cuando quieres reutilizar el método vinculado en varios sitios.
// Ambas son válidas; la arrow es la más común en código moderno.

// ════════════════════════════════════════════════════════════════════════════
// SOLUCIÓN EXCELENTE — Herramienta correcta según el caso, con criterio
//
// La diferencia entre "mejor" y "excelente" no es qué funciona, sino saber
// CUÁNDO usar arrow y cuándo usar función normal, y explicar el porqué.
//
// Regla:
//   - Arrow en callback interno: conserva el this del método que lo contiene.
//   - Función normal en event handler: su this dinámico ES el elemento que
//     disparó el evento, que es exactamente lo que necesitas.
//
// Los dos casos siguientes lo demuestran con el Team Builder.
// ════════════════════════════════════════════════════════════════════════════

// ── Caso 1: callback interno → arrow ─────────────────────────────────────
// procesarCola necesita que this sea la instancia GestorTurnos dentro del forEach.
// La arrow captura el this del scope donde se DEFINE (dentro de procesarCola).
// procesarCola se invoca como gestor.procesarCola(), así que su this es la instancia.

const cola = [
  { nombre: "Tracer", rol: "Daño" },
  { nombre: "Reinhardt", rol: "Tanque" },
  { nombre: "Mercy", rol: "Apoyo" },
];

class GestorTurnos {
  constructor() {
    // historial de entradas a partida
    this.registros = [];
  }

  registrarEntrada(heroe) {
    const mensaje = heroe.nombre + " (" + heroe.rol + ") ha entrado en partida";
    // this es la instancia → correcto con arrow
    this.registros.push(mensaje);
    console.log(mensaje);
  }

  procesarCola(heroes) {
    // Arrow: hereda this del scope de procesarCola → la instancia GestorTurnos.
    // No necesitamos self, bind ni trucos: el comportamiento es el esperado.
    heroes.forEach((heroe) => this.registrarEntrada(heroe));
  }
}

const gestor = new GestorTurnos();
gestor.procesarCola(cola);
// 3
console.log("Entradas registradas: " + gestor.registros.length);

// ── Caso 2: event handler → función normal ────────────────────────────────
// En el DOM, cuando usas una función normal como event handler,
// el navegador llama la función con this = el elemento que disparó el evento.
// Eso es útil: puedes leer el elemento sin necesidad de parámetros extra.
//
// Con una arrow, this NO sería el botón: sería el scope exterior (la clase,
// el módulo... lo que sea donde se definió). Perderías el acceso directo.
//
// Nota: este snippet es código comentado porque el playground es consola pura
// (sin DOM). En una página real, funcionaría exactamente así.

/*
class PanelHeroes {
  constructor(elemento) {
    // el div del panel
        this.elemento = elemento;

    // Función normal: this dinámico = el botón que haga clic.
    // Si usáramos arrow aquí, this sería la instancia PanelHeroes, NO el botón.
    this.elemento.addEventListener('click', function(evento) {
      // this es el elemento que recibió el evento (this.elemento).
      // añade/quita la clase CSS 'activo'
            this.classList.toggle('activo');
    });
  }
}
*/

// ── Tabla de decisión ─────────────────────────────────────────────────────
// ¿Necesitas this = instancia?      → arrow function
// ¿Necesitas this = elemento del DOM? → función normal
// ¿No necesitas this para nada?     → indiferente; arrow es más concisa

// ── Forward: React funcional ──────────────────────────────────────────────
// En React moderno (nivel 6 del curso), los componentes son funciones, no clases.
// Los hooks (useState, useEffect) reemplazan el estado de instancia.
// En ese contexto, la mayor parte de los líos de this desaparecen:
// los callbacks de botones son arrow functions de JSX y this no entra en juego.
// Entender this bien es igual de necesario: lo encontrarás en código legacy
// y en librerías escritas con clases (NestJS, algunas utilidades de DOM...).