<?php
/**
 * Template name: City Screen
 *
 * @package far_loop
 */

get_header();

$fields = array_fill_keys( array(
  'featured_image',
  'description',
  'venues',
), null );

foreach ( $fields as $field => $value ) {
  $fields[ $field ] = get_field( $field );
}

$page_id = get_queried_object_id();
?>

<div class="u_pt-3 u_pt-md-6">
  <div class="l_container">



    <!-- Mapa (va después del nav de past editions) -->
    <div class="places-map-horizontal">
      <?php get_template_part( 'page-templates/locations/content' ); ?>
    </div>

    <!-- Cabecera descriptiva -->
    <div class="grid u_mh-min1p5 u_mt-4">
      <div data-sticky-sidebar class="col--sm--three--seventh col--tb--three--seventh col--md--two--fifth u_ph-1p5">
        <h1 class="page-title__apex-title">City Screen</h1>
      </div>
      <div class="col--sm--four--seventh col--tb--four--seventh col--md--three--fifth u_ph-1p5">
        <div class="wysiwyg">
          <p><?php echo esc_html( $fields['description'] );?></p>
        </div>
      </div>
    </div>

    <!-- Venues (ordenados alfabéticamente) -->
    <div class="u_mt-3">
      <div class="grid">
        <?php
        $venues = $fields['venues'] ?? array();
        $names  = array();

        if ( ! empty( $venues ) ) {
          foreach ( $venues as $k => $venue ) {
            $names[$k] = remove_accents( $venue['name'] ?? '' );
          }
          $names_lower = array_map( 'strtolower', $names );
          array_multisort( $names_lower, SORT_ASC, $names, $venues );
        }
        ?>

        <?php if ( ! empty( $venues ) ) : ?>
          <div class="wrapper-city-screen-venues">
            <?php
            // Pasamos el array a un parcial que ya lo muestre con el layout/slide deseado
            set_query_var( 'venues_list', $venues );
            get_template_part( 'template-parts/city-screen-venue' );
            ?>
          </div>
        <?php endif; ?>

      </div>
    </div>


<?php
// ====== CITY SCREEN — PAST EDITIONS (slider) ======
$cs_base     = 'city-screen-';   // cambia si usas otro prefijo
$min_year    = 2006;
$current_year = (int) date('Y');
$placeholder = get_template_directory_uri() . '/img/horizontal-placeholder.svg';

// 1) Recolecta TODAS las páginas (idioma actual), y filtra por slug: city-screen-YYYY[-xx]
$pages = get_posts(array(
  'post_type'           => 'page',
  'posts_per_page'      => -1,
  'no_found_rows'       => true,
  'ignore_sticky_posts' => true,
  'suppress_filters'    => false, // respeta WPML (idioma activo)
  'fields'              => 'ids',
));

$editions = array();
if ( $pages ) {
  foreach ( $pages as $pid ) {
    $p = get_post( $pid );
    if ( ! $p || empty( $p->post_name ) ) continue;

    // city-screen-2024  |  city-screen-2024-en  |  city-screen-2024-es ...
    if ( preg_match('/^' . preg_quote($cs_base, '/') . '(\d{4})(?:-[a-z]{2})?$/i', $p->post_name, $m) ) {
      $year = (int) $m[1];

      // Excluye años fuera de rango y la edición actual
      if ( $year < $min_year || $year >= $current_year ) continue;

      // Imagen: destacada o ACF featured_image
      $thumb = get_the_post_thumbnail_url( $pid, 'large' );
      if ( ! $thumb ) {
        $fi = get_field('featured_image', $pid);
        if ( is_array($fi) ) {
          $thumb = $fi['sizes']['large'] ?? $fi['url'] ?? '';
        } elseif ( is_numeric($fi) ) {
          $src = wp_get_attachment_image_src( (int)$fi, 'large' );
          $thumb = $src[0] ?? '';
        } elseif ( is_string($fi) ) {
          $thumb = $fi;
        }
      }
      if ( ! $thumb ) $thumb = $placeholder;

      $editions[] = array(
        'year'  => $year,
        'id'    => $pid,
        'url'   => get_permalink($pid),
        'title' => get_the_title($pid),
        'img'   => $thumb,
      );
    }
  }
}

// 2) Ordénalas DESC por año y quita duplicados de año (por si WPML devuelve varias)
if ( $editions ) {
  usort($editions, function($a,$b){ return $b['year'] <=> $a['year']; });

  $seen = array();
  $editions = array_values(array_filter($editions, function($e) use (&$seen){
    if ( isset($seen[$e['year']]) ) return false;
    $seen[$e['year']] = true;
    return true;
  }));
}

// 3) Render
if ( ! empty($editions) ) :
  $root_id = 'cs-past-editions-' . wp_generate_uuid4();
  ?>
  <section id="past-editions" class="cityscreen-past u_mv-0">
    <div class="grid u_mh-min1p5">
      <div class="col--sm--one u_ph-1p5">
        <h3 class="section-heading delta">
          <span class="u_text-underline"><?php esc_html_e('Past Editions', 'far_loop'); ?></span>
        </h3>
      </div>
    </div>

    <div class="cityscreen-past-swiper-outer" data-cs-past-root="<?php echo esc_attr($root_id); ?>">
      <div class="swiper cityscreen-past-swiper"
           id="<?php echo esc_attr($root_id); ?>-swiper"
           data-swiper-cs-past
           data-items-count="<?php echo esc_attr(count($editions)); ?>"
           style="opacity:0; transition:opacity .2s;">
        
        <div class="swiper-nav">
          <button class="swiper-btn prev" id="<?php echo esc_attr($root_id); ?>-prev" aria-label="<?php esc_attr_e('Previous','far_loop'); ?>">&larr;</button>
          <button class="swiper-btn next" id="<?php echo esc_attr($root_id); ?>-next" aria-label="<?php esc_attr_e('Next','far_loop'); ?>">&rarr;</button>
        </div>

        <div class="swiper-wrapper">
          <?php foreach ( $editions as $ed ) : ?>
            <div class="swiper-slide">
              <div class="archive-item">
                <a href="<?php echo esc_url($ed['url']); ?>" class="archive-new-thumb">
                  <div class="archive-thumb__image-container page">
                    <img src="<?php echo esc_url($ed['img']); ?>" alt="<?php echo esc_attr($ed['title']); ?>">
                  </div>
                  <div class="archive-thumb__text">
                    <div class="archive-thumb__label"><?php echo esc_html( sprintf(__('Edition %d','far_loop'), $ed['year']) ); ?></div>
                    <h3 class="archive-thumb__title"><?php echo esc_html($ed['title']); ?></h3>
                  </div>
                </a>
              </div>
            </div>
          <?php endforeach; ?>
        </div>

      </div>
    </div>
  </section>

  <script>
  (function(){
    // Loader único Swiper (reutilizable si ya lo tienes cargado)
    window.__ensureSwiper = window.__ensureSwiper || (function(){
      let 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')) {
            const 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')) {
            const 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 {
            const i = setInterval(function(){ if (window.Swiper) { clearInterval(i); resolve(); } }, 30);
          }
        });
        return p;
      };
    })();

    function pvDesktop(count){ return (count <= 4) ? Math.max(count,1) : 4.2; }

    function initCityScreenPast(){
      document.querySelectorAll('[data-swiper-cs-past]').forEach(function(el){
        if (el.__inited) return;
        el.__inited = true;

        const root = el.closest('[data-cs-past-root]') || document;
        const count = parseInt(el.getAttribute('data-items-count') || '0', 10);
        const pvD   = pvDesktop(count);
        const next  = root.querySelector('.swiper-btn.next');
        const prev  = root.querySelector('.swiper-btn.prev');

        const sw = new Swiper(el, {
          slidesPerView: 1.2,
          spaceBetween: 15,
          watchSlidesProgress: true,
          observer: true,
          observeParents: true,
          preloadImages: false,
          lazy: { loadOnTransitionStart: true },
          navigation: (next && prev) ? { nextEl: next, prevEl: prev } : undefined,
          breakpoints: {
            640:  { slidesPerView: 1.2, spaceBetween: 15 },
            768:  { slidesPerView: 2.2, spaceBetween: 15 },
            1024: { slidesPerView: pvD, spaceBetween: 15 },
            1400: { slidesPerView: pvD,  spaceBetween: 15 },
            1800: { slidesPerView: pvD,  spaceBetween: 32 }
          },
          on: {
            init(){
              el.style.opacity = '1';
              const need = (this.slides?.length || count) > (this.params.slidesPerView || pvD);
              if (next) next.style.display = need ? '' : 'none';
              if (prev) prev.style.display = need ? '' : 'none';
            },
            resize(){ this.update(); }
          }
        });

        const refresh = ()=> sw.update();
        el.querySelectorAll('img').forEach(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, 400);
        setTimeout(refresh, 1200);
      });
    }

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


  </div>
</div>

<?php get_footer();