<?php
/*
 * Template Name: Videocloop Archive
 *
 * @package far_loop
 */
get_header();

?>



<div class="wrapper-videocloop dark-theme">

  <div class="header-new-archive header-videocloop-archive">
    <!-- Filtros principales -->
    <div class="archive-categories">
      <span data-filter="all" class="is-active"><?php esc_html_e('All','far_loop'); ?></span>
      <span data-filter="loop-fair"><?php esc_html_e('Loop Fair','far_loop'); ?></span>
      <span data-filter="loop-festival"><?php esc_html_e('Loop Festival','far_loop'); ?></span>
     
    </div>

<?php
$videocloop_editions = far_loop_get_videocloop_editions(); // ya deduplicado y con count>0
?>
<div class="agenda-dates agenda-dates-festival show" style="display:flex;" id="videocloop-dates-sub">
    <span data-filter="" class="is-active"><?php esc_html_e('All Dates','far_loop'); ?></span>

    <?php if ( ! empty($videocloop_editions) ) : ?>
        <?php foreach ( $videocloop_editions as $ed ) :
            // Usamos año si existe; si no, usamos el label
            $label = $ed['year'] ? (string)$ed['year'] : $ed['label'];
            // Clase para Isotope (p. ej. ".edition-2025" o ".edition-edition-2024")
            $cls = $ed['year'] ? ('year-'.$ed['year']) : ('edition-'.sanitize_title($ed['slug']));
        ?>
            <span data-filter=".<?php echo esc_attr($cls); ?>">
                <?php echo esc_html($label); ?>
            </span>
        <?php endforeach; ?>
    <?php endif; ?>
</div>

    <!-- Buscador -->
    <div class="archive-search">
      <svg class="search-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
        <path fill="none" stroke="currentColor" stroke-width="2" d="M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16zm11 3-6-6"/>
      </svg>
      <input type="text" id="archive-search-input" placeholder="<?php esc_attr_e('What are you looking for?', 'far_loop'); ?>" />
    </div>
  </div>

  <div id="toggle-view-archive" class="is-grid"><?php esc_html_e('List View','far_loop'); ?></div>

  <!-- Contenedor grid -->
  <div class="u_pt-3 u_pt-md-6 archive-grid-container videocloop-grid-container">
    <div class="l_container u_mv-5">
      <div class="archive-grid"></div>
      <div id="load-more-trigger" style="height: 50px;"></div>
    </div>
  </div>

  <!-- Contenedor texto -->
  <div class="archive-text-container l_container u_mv-5" style="display:none;"></div>

</div>

<!-- libs como en page-archive -->
<script src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.min.js"></script>
<script src="https://unpkg.com/imagesloaded@4/imagesloaded.pkgd.min.js"></script>






<script>
document.addEventListener("DOMContentLoaded", function () {
  // Estado
  let page = 1;
  let loading = false;
  let noMoreItems = false;

  // Filtro principal (servidor) y subfiltro (cliente con Isotope)
  let currentFilter = "all";           // all | loop-fair | loop-festival | ...
  let currentEditionFilter = "";       // "" | ".year-2025" | ".edition-edition-2024" ...
  let currentView   = "grid";
  let currentSearch = "";
  const perPage = 120;

  // DOM
  const grid          = document.querySelector('.archive-grid');
  const textContainer = document.querySelector('.archive-text-container');
  const gridContainer = document.querySelector('.archive-grid-container');
  const toggleBtn     = document.getElementById("toggle-view-archive");
  const searchInput   = document.getElementById("archive-search-input");
  const datesSub      = document.getElementById("videocloop-dates-sub");

  const iso = new Isotope(grid, { itemSelector: '.archive-item', layoutMode: 'fitRows' });

  // Helpers Isotope: combinar filtro principal + subfiltro edición
  function mainSelectorFromFilter() {
    // Si quieres que el filtro principal también sea client-side, mapea aquí:
    if (currentFilter === 'loop-fair') return '.loop-fair';
    if (currentFilter === 'loop-festival') return '.loop-festival';
    // 'all' u otros => sin restricción
    return '';
  }
  function combinedSelector() {
    const a = mainSelectorFromFilter();     // p.ej. ".loop-fair" o ""
    const b = currentEditionFilter;         // p.ej. ".year-2025" o ""
    if (!a && !b) return '*';
    return (a || '') + (b || '');           // concatenación CSS (AND)
  }
  function applyIsotopeFilter() {
    iso.arrange({ filter: combinedSelector() });
  }

  // Footer reveal (si lo usas)
  const footer = document.querySelector(".reveal-footer");
  let footerActive = false;

  // Scroll helpers
  let observer = null;

  // Control fetch
  let currentController = null;
  let searchTimeout = null;

  function activarFooterReveal() {
    if (footerActive) return;
    if (currentView !== 'grid') return;
    footerActive = true;
    document.body.classList.add("footer-reveal-active");
    if (footer) footer.style.transform = "translateY(0%)";
  }

  function resetGrid() {
    if (observer) observer.disconnect();
    iso.remove(iso.getItemElements());
    grid.innerHTML = "";
    iso.layout();
    page = 1;
    loading = false;
    noMoreItems = false;
    footerActive = false;
    document.body.classList.remove("footer-reveal-active");
    if (footer) footer.style.transform = "translateY(100%)";
  }

  function attachObserver() {
    const trigger = document.querySelector("#load-more-trigger");
    if (!trigger) return;
    observer = new IntersectionObserver(entries => {
      if (entries[0].isIntersecting && !loading && !noMoreItems && !footerActive) {
        loadItems();
      }
    }, { rootMargin: "800px" });
    observer.observe(trigger);
  }

  function cancelPreviousRequest() {
    if (currentController) currentController.abort();
    currentController = new AbortController();
    return currentController.signal;
  }

  // Carga GRID (AJAX)
  function loadItems(reset = false) {
    if (loading || (noMoreItems && !reset)) return;
    loading = true;
    if (reset) resetGrid();

    const signal = cancelPreviousRequest();

    const url = `<?php echo admin_url('admin-ajax.php'); ?>?action=load_videocloop_items&page=${page}&ppp=${perPage}&filter=${encodeURIComponent(currentFilter)}&search=${encodeURIComponent(''+(window.currentSearch||''))}`;

    fetch(url, { signal })
      .then(res => res.text())
      .then(html => {
        if (!html.trim()) {
          noMoreItems = true;
          loading = false;
          return;
        }

        const tempDiv = document.createElement('div');
        tempDiv.innerHTML = html;
        const items = Array.from(tempDiv.children);

        imagesLoaded(items, function () {
          grid.append(...items);
          iso.appended(items);
          // ⬇️ aplicar SIEMPRE el filtro vigente tras añadir
          applyIsotopeFilter();
          iso.layout();

          page++;
          loading = false;
          if (reset) attachObserver();
        });
      })
      .catch(err => {
        if (err.name !== 'AbortError') console.error(err);
        loading = false;
      });
  }

  // Carga LISTA/TEXTO (AJAX)
  function loadTextView() {
    textContainer.innerHTML = "<p><?php echo esc_js(__('Loading…','far_loop')); ?></p>";
    const signal = cancelPreviousRequest();

    const base = `<?php echo admin_url('admin-ajax.php'); ?>?action=load_videocloop_text`
      + `&filter=${encodeURIComponent(currentFilter)}`
      + `&edition_slug=${encodeURIComponent(currentEditionFilter)}`
      + `&search=${encodeURIComponent(currentSearch)}`;

    fetch(base + `&offset=0&limit=4`, { signal })
      .then(res => res.text())
      .then(html => {
        textContainer.innerHTML = `<div class="archive-text-view">${html}</div>`;
        animateColumns(textContainer.querySelectorAll('.edition-group'));
        setTimeout(() => {
          fetch(base + `&offset=4&limit=0`)
            .then(res => res.text())
            .then(extraHtml => {
              const container = textContainer.querySelector('.archive-text-view');
              const temp = document.createElement('div');
              temp.innerHTML = extraHtml;
              const newCols = temp.querySelectorAll('.edition-group');
              newCols.forEach(col => container.appendChild(col));
              animateColumns(newCols);
            });
        }, 150);
      })
      .catch(err => {
        if (err.name !== 'AbortError') console.error(err);
      });
  }

  function animateColumns(columns) {
    columns.forEach((col, i) => {
      col.style.animationDelay = `${i * 0.15}s`;
    });
  }


  // Filtro principal (clic)
  document.querySelectorAll(".archive-categories span").forEach(cat => {
    cat.addEventListener("click", function(){
      if (this.classList.contains("is-active")) return;
      document.querySelectorAll(".archive-categories span").forEach(c => c.classList.remove("is-active"));
      this.classList.add("is-active");

      currentFilter = this.getAttribute("data-filter"); // "all" | "loop-fair" | "loop-festival"
      // No tocamos currentEditionFilter: se mantiene
      window.currentSearch = ""; // si usas búsqueda
      if (searchInput) searchInput.value = "";

      if (currentView === "grid") {
        loadItems(true);         // recarga desde servidor
      } else {
         loadTextView();       // si usas vista texto
      }
    });
  });

  // Sub-filtro edición (clic) — usa data-filter del HTML
  document.querySelectorAll(".agenda-dates span").forEach(btn => {
    btn.addEventListener("click", function(){
      if (this.classList.contains("is-active")) return;
      document.querySelectorAll(".agenda-dates span").forEach(c => c.classList.remove("is-active"));
      this.classList.add("is-active");

      // vacío = All, si trae ".year-2025" lo cogemos tal cual
      currentEditionFilter = this.getAttribute("data-filter") || "";

      if (currentView === "grid") {
        // No hace falta recargar del servidor: filtramos con Isotope
        applyIsotopeFilter();
      } else {
         loadTextView(); // si aplicas subfiltro también en lista (opcional)
      }
    });
  });

  // Búsqueda con debounce (si la usas)
  if (searchInput) {
    searchInput.addEventListener("input", function(){
      clearTimeout(searchTimeout);
      searchTimeout = setTimeout(() => {
        window.currentSearch = searchInput.value.trim();

        // al buscar, activamos "All"
        document.querySelectorAll(".archive-categories span").forEach(c => c.classList.remove("is-active"));
        const allBtn = document.querySelector('.archive-categories span[data-filter="all"]');
        if (allBtn) allBtn.classList.add("is-active");
        currentFilter = "all";

        if (currentView === "grid") {
          loadItems(true);
        } else {
           loadTextView();
        }
      }, 300);
    });
  }

  // Toggle Grid/List
  toggleBtn.addEventListener("click", function(){
    if (currentView === "grid") {
      currentView = "text";
      toggleBtn.textContent = "<?php echo esc_js(__('Grid View','far_loop')); ?>";
      gridContainer.style.display = "none";
      datesSub.style.display = "none";
      textContainer.style.display = "block";
      loadTextView();
    } else {
      currentView = "grid";
      toggleBtn.textContent = "<?php echo esc_js(__('List View','far_loop')); ?>";
      textContainer.style.display = "none";
      datesSub.style.display = "flex";
      gridContainer.style.display = "block";
      loadItems(true);
    }
  });

  // Scroll: precarga y footer reveal
  window.addEventListener('scroll', () => {
    if (currentView !== "grid" || loading || footerActive) return;
    const scrolledBottom = window.scrollY + window.innerHeight;
    const pageHeight     = document.body.offsetHeight;

    // precargar ~200px antes del final
    if (!noMoreItems && scrolledBottom >= pageHeight - 200) {
      loadItems();
    }

    const gridBottom = grid.offsetTop + grid.offsetHeight;
    if (noMoreItems && scrolledBottom >= pageHeight - 10 && scrolledBottom >= gridBottom) {
      activarFooterReveal();
    }
  });

  // Carga inicial
  loadItems(true);
});
</script>







<?php get_footer(); ?>