<?php
/**
 * City Screen Venues agrupadas por Route en sliders (archive-grid cards)
 *
 * Espera en contexto:
 * - $venues_list : array de venues, cada venue con:
 *   name, address, image(array sizes[url]/url), description(html),
 *   artists, exhibitions, type_of_event (exhibition|video|screening|installation),
 *   curator, start_date, end_date, link(url),
 *   route (string ACF select: eixample|gracia|hospitalet|raval|trafalgar|special)
 *
 * @package far_loop
 */

if ( empty( $venues_list ) || ! is_array( $venues_list ) ) {
    return;
}

// Rutas definidas + grupo "others"
$known_routes = ['eixample','gracia','hospitalet','raval','trafalgar','special'];
$groups = array_fill_keys( array_merge($known_routes, ['others']), [] );

// Agrupar
foreach ( $venues_list as $idx => $venue ) {
    if ( !is_array($venue) ) continue;

    $route = '';
    if (isset($venue['route'])) {
        // normalizamos
        $route = is_string($venue['route']) ? strtolower(trim($venue['route'])) : '';
    }
    $bucket = in_array($route, $known_routes, true) ? $route : 'others';
    $groups[$bucket][] = $venue;
}

// Mapa bonito para títulos
$labels = [
    'eixample'   => 'Eixample Route',
    'gracia'     => 'Gràcia Route',
    'hospitalet' => 'L’Hospitalet Route',
    'raval'      => 'Raval - Sant Antoini Route',
    'trafalgar'  => 'Trafalgar Route',
    'special'    => 'Special Route',
    'others'     => __('Others Routes', 'far_loop'),
];

// Helper para card (reutiliza “archive-grid”)
function far_loop_city_screen_card( $venue, $key = 0 ) {
    // Imagen
    $img_src = '';
    if ( ! empty($venue['image']) && is_array($venue['image']) ) {
        if ( ! empty($venue['image']['sizes']['large']) ) {
            $img_src = $venue['image']['sizes']['large'];
        } elseif ( ! empty($venue['image']['url']) ) {
            $img_src = $venue['image']['url'];
        }
    }
    if ( ! $img_src ) {
        $img_src = get_template_directory_uri() . '/img/horizontal-placeholder.svg';
    }

    $title   = isset($venue['name']) ? trim($venue['name']) : '';
    $address = isset($venue['address']) ? trim($venue['address']) : '';

    $artists     = isset($venue['artists']) ? trim($venue['artists']) : '';
    $exhibitions = isset($venue['exhibitions']) ? trim($venue['exhibitions']) : '';

    // Fechas
    $date_string = '';
    if ( !empty($venue['start_date']) || !empty($venue['end_date']) ) {
        $date_string = date_string( [
            'start_date' => $venue['start_date'] ?? '',
            'end_date'   => $venue['end_date']   ?? '',
        ] );
    }

    // Enlace
    $url   = ! empty($venue['link']) ? $venue['link'] : '';
    $open  = $url ? '<a href="' . esc_url($url) . '" target="_blank" rel="noopener" class="archive-new-thumb">' : '<div class="archive-new-thumb">';
    $close = $url ? '</a>' : '</div>';

    // Línea secundaria combinada (artistas + expos) con límite 100
    $label_html = '';
    if ( $artists || $exhibitions ) {
        $parts = [];
        if ( $artists )     $parts[] = esc_html($artists);
        if ( $exhibitions ) $parts[] = '<em>' . esc_html($exhibitions) . '</em>';

        $full_text_plain = wp_strip_all_tags( implode(' — ', $parts) );
        $truncated_plain = mb_strimwidth( $full_text_plain, 0, 100, '...', 'UTF-8' );

        // Re-armamos con <em> sólo si el bloque de expos existe y cabe
        // (simplificación: mostramos todo truncado plano para evitar cortar tags a mitad)
        $label_html = esc_html( $truncated_plain );
    }
    ?>
    <div class="archive-item">
        <?php echo $open; ?>
            <div class="archive-thumb__image-container award">
                <img src="<?php echo esc_url($img_src); ?>" alt="<?php echo esc_attr($title ?: __('Venue','far_loop')); ?>">
            </div>
            <div class="archive-thumb__text">
                <?php if ( $date_string ): ?>
                    <div class="archive-thumb__year"><?php echo esc_html($date_string); ?></div>
                <?php endif; ?>

                <h3 class="archive-thumb__title"><?php echo esc_html( $title ?: __('Venue','far_loop') ); ?></h3>

                <?php if ( $label_html ): ?>
                    <div class="archive-thumb__label"><?php echo $label_html; ?></div>
                <?php endif; ?>
            </div>
        <?php echo $close; ?>
    </div>
    <?php
}

// Pintar sliders por grupo
foreach ( $labels as $slug => $title ) :
    $items = $groups[$slug];
    if ( empty($items) ) continue;

    $root_id  = 'cityscreen-' . $slug . '-' . uniqid();
    $swiper_id= $root_id . '-swiper';
    $prev_id  = $root_id . '-prev';
    $next_id  = $root_id . '-next';
    $count    = count($items);
    ?>
    <div class="u_mt-4 city-screen-route-block" data-cityscreen-root="<?php echo esc_attr($root_id); ?>">
        <h3 class="section-heading delta"><span class="u_text-underline"><?php echo esc_html($title); ?></span></h3>

        <div class="swiper-nav cityscreen-swiper__controls u_mt-1">
            <button class="swiper-btn prev" id="<?php echo esc_attr($prev_id); ?>" aria-label="<?php esc_attr_e('Previous','far_loop'); ?>">&larr;</button>
            <button class="swiper-btn next" id="<?php echo esc_attr($next_id); ?>" aria-label="<?php esc_attr_e('Next','far_loop'); ?>">&rarr;</button>
        </div>

        <div class="swiper cityscreen-swiper" id="<?php echo esc_attr($swiper_id); ?>"
             data-items-count="<?php echo esc_attr($count); ?>"
             style="opacity:0; transition:opacity .2s;">
            <div class="swiper-wrapper">
                <?php foreach ( $items as $i => $venue ) : ?>
                    <div class="swiper-slide">
                        <div class="archive-item-container">
                            <?php far_loop_city_screen_card( $venue, $i ); ?>
                        </div>
                    </div>
                <?php endforeach; ?>
            </div>
        </div>
    </div>
<?php endforeach; ?>

<?php
// ====== JS de inicialización (seguro y idempotente) ======
?>
<script>
(function () {
  // Loader Swiper único
  window.__ensureSwiper = window.__ensureSwiper || (function(){
    var p;
    return function ensureSwiper(){
      if (window.Swiper) return Promise.resolve();
      if (p) return p;
      p = new Promise(function(resolve){
        if (!document.getElementById('swiper-css-cdn')) {
          var link = document.createElement('link');
          link.id = 'swiper-css-cdn';
          link.rel = 'stylesheet';
          link.href = 'https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.css';
          document.head.appendChild(link);
        }
        if (!document.getElementById('swiper-js-cdn')) {
          var script = document.createElement('script');
          script.id = 'swiper-js-cdn';
          script.src = 'https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.js';
          script.defer = true;
          script.onload = function(){ resolve(); };
          document.head.appendChild(script);
        } else {
          var i = setInterval(function(){
            if (window.Swiper) { clearInterval(i); resolve(); }
          }, 30);
        }
      });
      return p;
    };
  })();

  function initCityScreenSwipers(){
    if (!window.Swiper) return;

    document.querySelectorAll('.cityscreen-swiper').forEach(function(el){
      if (el.__inited) return;
      el.__inited = true;

      var wrapper = el.closest('[data-cityscreen-root]') || document;
      var nextEl  = wrapper.querySelector('.swiper-btn.next');
      var prevEl  = wrapper.querySelector('.swiper-btn.prev');

      var total   = parseInt(el.getAttribute('data-items-count') || '0', 10);

      // Config slidesPerView según cantidad:
      // <=3 -> 3 en desktop grande, ==4 -> 4, >4 -> 4.2
      var pvDesktop, pv1024;
      if (total <= 3) { pvDesktop = 3; pv1024 = 3; }
      else if (total === 4) { pvDesktop = 4; pv1024 = 3.2; }
      else { pvDesktop = 4.2; pv1024 = 3.2; }

      var sw = new Swiper(el, {
        slidesPerView: 1.2,
        spaceBetween: 16,
        watchSlidesProgress: true,
        observer: true,
        observeParents: true,
        preloadImages: false,
        lazy: { loadOnTransitionStart: true },
        navigation: (nextEl && prevEl) ? { nextEl: nextEl, prevEl: prevEl } : undefined,
        breakpoints: {
          768:  { slidesPerView: 2.2, spaceBetween: 20 },
          1024: { slidesPerView: pv1024, spaceBetween: 28 },
          1366: { slidesPerView: pvDesktop, spaceBetween: 32 }
        },
        on: {
          init: function(){
            el.style.opacity = '1';
            toggleNav(this);
          },
          resize: function(){
            toggleNav(this);
          }
        }
      });

      // Refrescos
      var imgs = el.querySelectorAll('img');
      var refresh = function () { if (sw && sw.update) { sw.update(); toggleNav(sw); } };
      imgs.forEach(function(img){
        if (img.complete) refresh();
        img.addEventListener('load',  refresh, { once:true });
        img.addEventListener('error', refresh, { once:true });
      });
      if (document.fonts && document.fonts.ready) document.fonts.ready.then(refresh);
      window.addEventListener('load', refresh);
      setTimeout(refresh, 500);
      setTimeout(refresh, 1500);

      function toggleNav(instance){
        if (!instance) return;
        var count = instance.slides ? instance.slides.length : total;
        // PV esperado actual
        var w = window.innerWidth || 1366;
        var currentPV = 1.2;
        if (w >= 1366) currentPV = pvDesktop;
        else if (w >= 1024) currentPV = pv1024;
        else if (w >= 768) currentPV = 2.2;

        var need = count > currentPV;

        // Navigation seguro
        var nav = instance.navigation || {};
        var nEl = (nav.nextEl instanceof HTMLElement) ? nav.nextEl : nextEl;
        var pEl = (nav.prevEl instanceof HTMLElement) ? nav.prevEl : prevEl;
        if (nEl) nEl.style.display = need ? '' : 'none';
        if (pEl) pEl.style.display = need ? '' : 'none';
      }
    });
  }

  function boot(){ window.__ensureSwiper().then(initCityScreenSwipers); }
  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', boot);
  } else {
    boot();
  }
})();
</script>