/*
  ============================================================
  POPUP.JS + NAVEGACIÃ“N HÃBRIDA LOCAL / IQVIA OCE
  ============================================================

  Este archivo controla:

  1. NavegaciÃ³n entre slides
     - En local/prepro usa href normal: href="02_index.html"
     - En IQVIA OCE usa CLMPlayer.gotoSlide()

  2. Apertura de popups
     - data-popup-open="popup-01"

  3. Cierre de popups
     - data-popup-close="popup-01"

  4. Cierre de todos los popups con tecla Escape
     - Ãºtil en navegador/local
*/

(function () {
  'use strict';

  /*
    ============================================================
    NAVEGACIÃ“N HÃBRIDA LOCAL / IQVIA OCE
    ============================================================

    En los hotspots de navegaciÃ³n usaremos esta estructura:

    <a
      class="hotspot"
      href="02_index.html"
      data-oce-slide="02_index.html">
    </a>

    href:
    - sirve para navegar en local/prepro

    data-oce-slide:
    - sirve para indicar a OCE quÃ© slide debe abrir con CLMPlayer.gotoSlide()
  */

  /*
    ------------------------------------------------------------
    FUNCIÃ“N: hasOcePlayer
    ------------------------------------------------------------

    Comprueba si estamos dentro de IQVIA OCE y si existe
    el objeto CLMPlayer con el mÃ©todo gotoSlide.

    Si existe:
    - navegamos con CLMPlayer.gotoSlide()

    Si no existe:
    - navegamos con window.location.href
  */
  function hasOcePlayer() {
    return (
      typeof window.CLMPlayer !== 'undefined' &&
      window.CLMPlayer !== null &&
      typeof window.CLMPlayer.gotoSlide === 'function'
    );
  }

  /*
    ------------------------------------------------------------
    FUNCIÃ“N: goToSlide
    ------------------------------------------------------------

    Recibe:
    - slideName: nombre de la slide destino para OCE
    - fallbackHref: URL local para navegador/prepro

    Ejemplo:
    goToSlide('02_index.html', '02_index.html')
  */
  function goToSlide(slideName, fallbackHref) {
    /*
      Si no recibimos slideName, intentamos usar fallbackHref.
    */
    var targetSlide = slideName || fallbackHref;

    /*
      Si no hay destino, detenemos la funciÃ³n.
    */
    if (!targetSlide) return;

    /*
      CASO 1: Estamos dentro de IQVIA OCE

      CLMPlayer.gotoSlide recibe normalmente:
      - null: usa la secuencia actual
      - targetSlide: nombre del HTML destino
      - null: sin animaciÃ³n/transiciÃ³n especÃ­fica
    */
    if (hasOcePlayer()) {
      window.CLMPlayer.gotoSlide(null, targetSlide, null);
      return;
    }

    /*
      CASO 2: Estamos en local/prepro/navegador

      Usamos navegaciÃ³n HTML estÃ¡ndar.
    */
    window.location.href = fallbackHref || targetSlide;
  }

  /*
    ============================================================
    POPUPS
    ============================================================
  */

  /*
    ------------------------------------------------------------
    FUNCIÃ“N: openPopup
    ------------------------------------------------------------

    Abre un popup concreto.

    Recibe el ID del popup que queremos abrir.

    Ejemplo:
    openPopup('popup-01')

    Busca en el HTML:
    <section class="popup" id="popup-01">
  */
  function openPopup(popupId) {
    var popup = document.getElementById(popupId);

    /*
      Si no existe ningÃºn elemento con ese ID,
      detenemos la funciÃ³n para evitar errores.
    */
    if (!popup) return;

    /*
      Antes de abrir un popup, cerramos cualquier otro popup
      que pudiera estar abierto.
    */
    closeAllPopups();

    /*
      Activamos el popup:
      - AÃ±adimos la clase .is-active
      - Cambiamos aria-hidden a false
      - AÃ±adimos .has-popup al body
    */
    popup.classList.add('is-active');
    popup.setAttribute('aria-hidden', 'false');
    document.body.classList.add('has-popup');

    /*
      Si el popup es multipÃ¡gina, siempre lo abrimos por la pÃ¡gina 1.
    */
    goToPopupPage(popup, 1);
  }

  /*
    ------------------------------------------------------------
    FUNCIÃ“N: goToPopupPage
    ------------------------------------------------------------

    Para popups multipÃ¡gina (con varias .popup-page dentro).
    Muestra la pÃ¡gina indicada y oculta el resto.

    Si el popup no tiene .popup-page (popup normal de 1 imagen),
    no hace nada.

    Ejemplo:
    goToPopupPage(popupEl, 2)
  */
  function goToPopupPage(popup, pageNum) {
    if (!popup) return;

    var pages = popup.querySelectorAll('.popup-page');
    if (!pages.length) return;

    pages.forEach(function (page) {
      var isTarget = page.getAttribute('data-page') === String(pageNum);
      page.classList.toggle('is-active', isTarget);
    });
  }

  /*
    ------------------------------------------------------------
    FUNCIÃ“N: closePopup
    ------------------------------------------------------------

    Cierra un popup concreto.

    Recibe el ID del popup que queremos cerrar.

    Ejemplo:
    closePopup('popup-01')
  */
  function closePopup(popupId) {
    var popup = document.getElementById(popupId);

    /*
      Si no existe el popup, no hacemos nada.
    */
    if (!popup) return;

    /*
      Cerramos el popup:
      - Quitamos la clase .is-active
      - Marcamos aria-hidden como true
    */
    popup.classList.remove('is-active');
    popup.setAttribute('aria-hidden', 'true');

    /*
      Si ya no queda ningÃºn popup abierto,
      quitamos la clase .has-popup del body.
    */
    if (!document.querySelector('.popup.is-active')) {
      document.body.classList.remove('has-popup');
    }
  }

  /*
    ------------------------------------------------------------
    FUNCIÃ“N: closeAllPopups
    ------------------------------------------------------------

    Cierra todos los popups de la slide.

    Se usa:
    - antes de abrir uno nuevo
    - al pulsar Escape
  */
  function closeAllPopups() {
    var popups = document.querySelectorAll('.popup');

    /*
      Recorremos todos los elementos con clase .popup
      y los dejamos ocultos.
    */
    popups.forEach(function (popup) {
      popup.classList.remove('is-active');
      popup.setAttribute('aria-hidden', 'true');
    });

    /*
      Eliminamos del body la marca de que hay un popup abierto.
    */
    document.body.classList.remove('has-popup');
  }

  /*
    ============================================================
    ESCUCHA GLOBAL DE CLICKS
    ============================================================

    Escuchamos todos los clicks del documento.

    Este listener gestiona tres tipos de hotspots:

    1. NavegaciÃ³n:
       data-oce-slide="02_index.html"

    2. Abrir popup:
       data-popup-open="popup-01"

    3. Cerrar popup:
       data-popup-close="popup-01"
  */
  document.addEventListener('click', function (event) {
    /*
      Busca si el click se hizo sobre un hotspot de navegaciÃ³n
      o sobre algÃºn elemento dentro de Ã©l.
    */
    var navTrigger = event.target.closest('[data-oce-slide]');

    /*
      Busca si el click se hizo sobre un hotspot de abrir popup
      o sobre algÃºn elemento dentro de Ã©l.
    */
    var openTrigger = event.target.closest('[data-popup-open]');

    /*
      Busca si el click se hizo sobre un hotspot de cerrar popup
      o sobre algÃºn elemento dentro de Ã©l.
    */
    var closeTrigger = event.target.closest('[data-popup-close]');

    /*
      Busca si el click se hizo sobre un hotspot de cambio de pÃ¡gina
      dentro de un popup multipÃ¡gina (data-popup-page="2").
    */
    var pageTrigger = event.target.closest('[data-popup-page]');

    /*
      ------------------------------------------------------------
      CASO 1: NAVEGACIÃ“N ENTRE SLIDES
      ------------------------------------------------------------

      Este caso se ejecuta cuando el hotspot tiene:
      data-oce-slide="02_index.html"
    */
    if (navTrigger) {
      /*
        Evita que el navegador ejecute automÃ¡ticamente el href.
        AsÃ­ podemos decidir si usamos OCE o navegaciÃ³n local.
      */
      event.preventDefault();

      /*
        Evita propagaciÃ³n del click.
      */
      event.stopPropagation();

      /*
        Nombre de la slide destino para OCE.
      */
      var oceSlide = navTrigger.getAttribute('data-oce-slide');

      /*
        URL fallback para local/prepro.
        Normalmente serÃ¡ igual que data-oce-slide.
      */
      var fallbackHref = navTrigger.getAttribute('href');

      /*
        Ejecutamos navegaciÃ³n hÃ­brida.
      */
      goToSlide(oceSlide, fallbackHref);
      return;
    }

    /*
      ------------------------------------------------------------
      CASO 2: ABRIR POPUP
      ------------------------------------------------------------

      Este caso se ejecuta cuando el hotspot tiene:
      data-popup-open="popup-01"
    */
    if (openTrigger) {
      /*
        Evita que el navegador salte al ancla href="#popup-01".
      */
      event.preventDefault();

      /*
        Evita que el click siga propagÃ¡ndose.
      */
      event.stopPropagation();

      /*
        Abrimos el popup cuyo ID estÃ¡ definido en data-popup-open.
      */
      openPopup(openTrigger.getAttribute('data-popup-open'));
      return;
    }

    /*
      ------------------------------------------------------------
      CASO 2b: CAMBIO DE PÃGINA DENTRO DE UN POPUP MULTIPÃGINA
      ------------------------------------------------------------

      Hotspot con data-popup-page="N". Cambia a la pÃ¡gina N del
      popup que lo contiene (.popup mÃ¡s cercano). No cierra ni abre.
    */
    if (pageTrigger) {
      event.preventDefault();
      event.stopPropagation();
      goToPopupPage(
        pageTrigger.closest('.popup'),
        pageTrigger.getAttribute('data-popup-page')
      );
      return;
    }

    /*
      ------------------------------------------------------------
      CASO 3: CERRAR POPUP
      ------------------------------------------------------------

      Este caso se ejecuta cuando el hotspot tiene:
      data-popup-close="popup-01"
    */
    if (closeTrigger) {
      /*
        Evita que el navegador procese href="#".
      */
      event.preventDefault();

      /*
        Evita propagaciÃ³n del click.
      */
      event.stopPropagation();

      /*
        Cerramos el popup cuyo ID estÃ¡ definido en data-popup-close.
      */
      closePopup(closeTrigger.getAttribute('data-popup-close'));
    }
  });

  /*
    ============================================================
    CIERRE CON TECLA ESCAPE
    ============================================================

    Esto es Ãºtil mientras se prueba en navegador.
    En iPad no es imprescindible, pero no molesta.
  */
  document.addEventListener('keydown', function (event) {
    if (event.key === 'Escape') {
      closeAllPopups();
    }
  });

})();
