{% comment %}
  Renders a two-button "action bar" that scrolls/slides the product media gallery
  to an image matching the given alt text, or scrolls to a section by ID.

  Accepts:
  - block: {Object} Block object with all settings

  Usage:
  {% render 'action-buttons-block', block: block %}
{% endcomment %}

{%- liquid
  assign bid          = block.id
  assign bg_color     = block.settings.bg_color
  assign text_color   = block.settings.text_color
  assign div_color    = block.settings.divider_color
  assign border_color = block.settings.border_color
  assign border_r     = block.settings.border_radius
  assign border_w     = block.settings.border_width
  assign hover_bg     = block.settings.hover_bg_color
  assign mobile_style = block.settings.mobile_style
  assign font_desktop = block.settings.font_size_desktop
  assign font_mobile  = block.settings.font_size_mobile
  assign show_btn1    = block.settings.show_btn1
  assign show_btn2    = block.settings.show_btn2
-%}

{%- unless show_btn1 == false and show_btn2 == false -%}

<style>
  /* Wrapper */
  .action-buttons--{{ bid }} {
    position: relative;
    display: flex;
    align-items: stretch;
    background-color: {{ bg_color }};
    border: {{ border_w }}px solid {{ border_color }};
    border-radius: {{ border_r }}px;
    overflow: hidden;
    margin-top: {{ block.settings.margin_top | divided_by: 10.0 }}rem;
    margin-bottom: {{ block.settings.margin_bottom | divided_by: 10.0 }}rem;
  }

  /* Center divider via pseudo-element */
  .action-buttons--{{ bid }}::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: {{ border_w }}px;
    background-color: {{ div_color }};
    pointer-events: none;
  }

  /* Single-button mode: no divider, button fills full width */
  .action-buttons--{{ bid }}.action-buttons--single-btn::after {
    display: none;
  }

  .action-buttons--{{ bid }}.action-buttons--single-btn .action-btn--{{ bid }} {
    flex: 1 1 100%;
  }

  /* Buttons */
  .action-btn--{{ bid }} {
    flex: 1 1 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1.2rem 1rem;
    background: transparent;
    border: none;
    cursor: pointer;
    color: {{ text_color }};
    font-size: {{ font_desktop }}px;
    font-weight: 500;
    font-family: inherit;
    line-height: 1.2;
    white-space: nowrap;
    transition: background-color 0.2s ease;
    outline: none;
    -webkit-tap-highlight-color: transparent;
  }

  .action-btn--{{ bid }}:hover,
  .action-btn--{{ bid }}:focus-visible {
    background-color: {{ hover_bg }};
  }

  .action-btn--{{ bid }} svg,
  .action-btn--{{ bid }} img.action-btn__icon {
    flex-shrink: 0;
    width: 15px;
    height: 15px;
    display: block;
  }

  /* Gallery placement wrapper — desktop only, always full width below gallery */
  @media screen and (min-width: 750px) {
    .action-buttons-gallery-wrapper--{{ bid }} {
      display: block;
      width: 100%;
      position: relative;
      z-index: 1;
    }
  }

  @media screen and (max-width: 749px) {
    .action-btn--{{ bid }} {
      font-size: {{ font_mobile }}px;
    }

    /* Flush: full viewport bleed, no side borders, no radius */
    .action-buttons--{{ bid }}.action-buttons--mobile-flush {
      border-radius: 0;
      border-left: none;
      border-right: none;
      width: 100vw;
      position: relative;
      left: 50%;
      margin-left: -50vw;
      margin-right: -50vw;
    }

    .action-buttons--{{ bid }}.action-buttons--mobile-flush .action-btn--{{ bid }} {
      padding: 1rem 1rem;
    }
  }
</style>

<div
  class="action-buttons--{{ bid }}{% if mobile_style == 'flush' %} action-buttons--mobile-flush{% endif %}{% if show_btn1 == false or show_btn2 == false %} action-buttons--single-btn{% endif %}{% if block.settings.visibility != 'always-display' %} {{ block.settings.visibility }}{% endif %}"
  {{ block.shopify_attributes }}
>

  {%- if show_btn1 != false -%}
  <button
    type="button"
    class="action-btn--{{ bid }}"
    data-action-btn-id="{{ bid }}-1"
    {% if block.settings.btn1_action == 'alt' and block.settings.btn1_image_alt != blank %}
      data-target-alt="{{ block.settings.btn1_image_alt | escape }}"
    {% elsif block.settings.btn1_action == 'section' and block.settings.btn1_section_id != blank %}
      data-target-section="{{ block.settings.btn1_section_id | escape }}"
    {% endif %}
    aria-label="{{ block.settings.btn1_label | escape }}"
  >
    {%- if block.settings.btn1_custom_icon != blank -%}
      <img class="action-btn__icon" src="{{ block.settings.btn1_custom_icon | image_url }}" alt="" aria-hidden="true" width="15" height="15">
    {%- else -%}
      <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
        <rect width="14" height="14" rx="7" fill="{{ text_color }}"></rect>
        <path d="M10.0073 7.27515L5.6454 9.79374H5.64488C5.55767 9.84402 5.45044 9.84402 5.36323 9.79374C5.27652 9.74346 5.22266 9.6506 5.22266 9.55003V4.51286C5.22266 4.4123 5.27653 4.31943 5.36323 4.26915C5.45044 4.21888 5.55767 4.21888 5.64488 4.26915L10.0068 6.78774H10.0073C10.094 6.83802 10.1478 6.93088 10.1478 7.03145C10.1478 7.13201 10.094 7.22487 10.0073 7.27515Z" fill="{{ bg_color }}"></path>
      </svg>
    {%- endif -%}
    <span>{{ block.settings.btn1_label }}</span>
  </button>
  {%- endif -%}

  {%- if show_btn2 != false -%}
  <button
    type="button"
    class="action-btn--{{ bid }}"
    data-action-btn-id="{{ bid }}-2"
    {% if block.settings.btn2_action == 'alt' and block.settings.btn2_image_alt != blank %}
      data-target-alt="{{ block.settings.btn2_image_alt | escape }}"
    {% elsif block.settings.btn2_action == 'section' and block.settings.btn2_section_id != blank %}
      data-target-section="{{ block.settings.btn2_section_id | escape }}"
    {% endif %}
    aria-label="{{ block.settings.btn2_label | escape }}"
  >
    {%- if block.settings.btn2_custom_icon != blank -%}
      <img class="action-btn__icon" src="{{ block.settings.btn2_custom_icon | image_url }}" alt="" aria-hidden="true" width="15" height="15">
    {%- else -%}
      <svg width="15" height="16" viewBox="0 0 15 16" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
        <path d="M12.0002 1.25H8V2.375H12.0002C12.6189 2.375 13.1252 2.88125 13.1252 3.5V12.5C13.1252 13.1187 12.6189 13.625 12.0002 13.625H8V14.75H12.0002C13.2377 14.75 14.2502 13.7375 14.2502 12.5V3.5C14.2502 2.2625 13.2377 1.25 12.0002 1.25Z" fill="{{ text_color }}"></path>
        <path d="M12.0002 2.375H8V13.625H12.0002C12.6189 13.625 13.1252 13.1187 13.1252 12.5V3.5C13.1252 2.88125 12.6189 2.375 12.0002 2.375Z" fill="{{ bg_color }}"></path>
        <path d="M6.9375 1.25H3C1.7625 1.25 0.75 2.2625 0.75 3.5V12.5C0.75 13.7375 1.7625 14.75 3 14.75H6.9375V15.875H8.0625V0.125H6.9375V1.25Z" fill="{{ text_color }}"></path>
      </svg>
    {%- endif -%}
    <span>{{ block.settings.btn2_label }}</span>
  </button>
  {%- endif -%}

</div>

<script>
(function() {
  var bid = {{ bid | json }};

  // Liquid-stamped map of mediaId → alt text for ALL media types (image, video, model, external_video).
  // This is the authoritative source since JS cannot reliably read alt from video slides.
  var mediaAltMap = {
    {%- for media in product.media -%}
      {{ media.id | json }}: {{ media.alt | default: '' | json }}{% unless forloop.last %},{% endunless %}
    {%- endfor -%}
  };

  function slideToAlt(targetAlt) {
    var gallery = document.querySelector('media-gallery');
    if (!gallery) return;

    var needle = targetAlt.toLowerCase();

    // --- Splide-based slider ---
    var splideEl = gallery.querySelector('.product-media-slider .splide');
    if (splideEl && splideEl.splide) {
      var slides = splideEl.querySelectorAll('.splide__slide');
      for (var i = 0; i < slides.length; i++) {
        if (slideMatchesAlt(slides[i], needle)) {
          splideEl.splide.go(i);
          return;
        }
      }
    }

    // --- Fallback: native scroll slider ---
    var mediaList = gallery.querySelector('.product__media-list');
    if (mediaList) {
      var items = mediaList.querySelectorAll('.product__media-item, .slider__slide');
      for (var j = 0; j < items.length; j++) {
        if (slideMatchesAlt(items[j], needle)) {
          items[j].scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'start' });
          var counterLinks = gallery.querySelectorAll('.slider-counter__link');
          if (counterLinks[j]) counterLinks[j].click();
          return;
        }
      }
    }
  }

  function slideMatchesAlt(slide, needle) {
    // 1. Check media-id on the modal-opener button → look up Liquid-stamped alt map
    //    This works for ALL media types including video and 3D models.
    var opener = slide.querySelector('[data-media-id]');
    if (opener) {
      var mediaId = opener.getAttribute('data-media-id');
      if (mediaId && mediaAltMap[mediaId] !== undefined) {
        var mappedAlt = (mediaAltMap[mediaId] || '').toLowerCase();
        if (mappedAlt && mappedAlt.indexOf(needle) !== -1) return true;
      }
    }

    // 2. Fallback: check any img alt in the slide (catches cases where media-id is absent)
    var imgs = slide.querySelectorAll('img');
    for (var k = 0; k < imgs.length; k++) {
      if (imgs[k].alt && imgs[k].alt.toLowerCase().indexOf(needle) !== -1) return true;
    }

    // 3. Fallback: check video element title or source src filename
    var video = slide.querySelector('video');
    if (video) {
      if (video.title && video.title.toLowerCase().indexOf(needle) !== -1) return true;
      var sources = video.querySelectorAll('source');
      for (var s = 0; s < sources.length; s++) {
        var src = sources[s].getAttribute('src') || sources[s].getAttribute('data-src') || '';
        if (src.toLowerCase().indexOf(needle) !== -1) return true;
      }
    }

    return false;
  }

  var buttons = document.querySelectorAll('[data-action-btn-id^="' + bid + '"]');
  buttons.forEach(function(btn) {
    btn.addEventListener('click', function() {
      var targetAlt     = btn.getAttribute('data-target-alt');
      var targetSection = btn.getAttribute('data-target-section');

      if (targetSection) {
        var anchor = targetSection.charAt(0) === '#' ? targetSection : '#' + targetSection;
        var target = document.querySelector(anchor);
        if (target) {
          target.scrollIntoView({ behavior: 'smooth', block: 'start' });
        } else {
          location.href = anchor;
        }
        return;
      }

      if (targetAlt) {
        slideToAlt(targetAlt);
      }
    });
  });
})();
</script>

{%- endunless -%}