{% doc %}
  @prompt
    bulle style stories Instagram, qui, quand on clique dessus, ouvre un popup avec une vidéo
{% enddoc %}
{% assign ai_gen_id = block.id | replace: '_', '' | downcase %}

{% style %}
  .ai-story-bubble-{{ ai_gen_id }} {
    display: block;
    width: {{ block.settings.desktop_width_percent }}%;
    max-width: 100%;
  }

  .ai-story-bubble-container-{{ ai_gen_id }} {
    display: flex;
    gap: {{ block.settings.bubble_spacing }}px;
    overflow-x: auto;
    padding: 20px 0;
    scrollbar-width: none;
  }

  .ai-story-bubble-container-{{ ai_gen_id }}::-webkit-scrollbar {
    display: none;
  }

  .ai-story-bubble-item-{{ ai_gen_id }} {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    cursor: pointer;
  }

  .ai-story-bubble-ring-{{ ai_gen_id }} {
    width: {{ block.settings.bubble_size }}px;
    height: {{ block.settings.bubble_size }}px;
    border-radius: 50%;
    padding: {{ block.settings.ring_width }}px;
    background: {{ block.settings.ring_color }};
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease;
  }

  .ai-story-bubble-item-{{ ai_gen_id }}:hover .ai-story-bubble-ring-{{ ai_gen_id }} {
    transform: scale(1.05);
  }

  .ai-story-bubble-image-wrapper-{{ ai_gen_id }} {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    overflow: hidden;
    background-color: {{ block.settings.background_color }};
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .ai-story-bubble-image-{{ ai_gen_id }} {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .ai-story-bubble-image-placeholder-{{ ai_gen_id }} {
    width: 100%;
    height: 100%;
    background-color: #f4f4f4;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .ai-story-bubble-image-placeholder-{{ ai_gen_id }} svg {
    width: 60%;
    height: 60%;
  }

  .ai-story-bubble-label-{{ ai_gen_id }} {
    font-size: {{ block.settings.label_size }}px;
    color: {{ block.settings.label_color }};
    text-align: center;
    max-width: {{ block.settings.bubble_size }}px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .ai-story-bubble-modal-{{ ai_gen_id }} {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9);
    z-index: 9999;
    align-items: center;
    justify-content: center;
  }

  .ai-story-bubble-modal-{{ ai_gen_id }}.active {
    display: flex;
  }

  .ai-story-bubble-modal-content-{{ ai_gen_id }} {
    position: relative;
    width: 90%;
    max-width: 600px;
    background-color: {{ block.settings.modal_background }};
    border-radius: {{ block.settings.modal_border_radius }}px;
    overflow: hidden;
  }

  .ai-story-bubble-modal-close-{{ ai_gen_id }} {
    position: absolute;
    top: 15px;
    right: 15px;
    background: rgba(0, 0, 0, 0.5);
    border: none;
    color: #ffffff;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    transition: background 0.2s ease;
  }

  .ai-story-bubble-modal-close-{{ ai_gen_id }}:hover {
    background: rgba(0, 0, 0, 0.7);
  }

  .ai-story-bubble-video-wrapper-{{ ai_gen_id }} {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%;
    background-color: #000000;
  }

  .ai-story-bubble-video-{{ ai_gen_id }} {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }

  .ai-story-bubble-empty-state-{{ ai_gen_id }} {
    padding: 40px;
    text-align: center;
    color: #666;
    font-size: 14px;
  }

  @media screen and (max-width: 749px) {
    .ai-story-bubble-ring-{{ ai_gen_id }} {
      width: {{ block.settings.bubble_size | times: 0.8 }}px;
      height: {{ block.settings.bubble_size | times: 0.8 }}px;
    }

    .ai-story-bubble-label-{{ ai_gen_id }} {
      font-size: {{ block.settings.label_size | times: 0.9 }}px;
      max-width: {{ block.settings.bubble_size | times: 0.8 }}px;
    }
  }
{% endstyle %}

<story-bubbles-{{ ai_gen_id }}
  class="ai-story-bubble-{{ ai_gen_id }}"
  {{ block.shopify_attributes }}
>
  <div class="ai-story-bubble-container-{{ ai_gen_id }}">
    {% for i in (1..6) %}
      {% liquid
        assign story_enabled_key = 'story_' | append: i | append: '_enabled'
        assign story_image_key = 'story_' | append: i | append: '_image'
        assign story_label_key = 'story_' | append: i | append: '_label'
        assign story_video_key = 'story_' | append: i | append: '_video'

        assign story_enabled = block.settings[story_enabled_key]
        assign story_image = block.settings[story_image_key]
        assign story_label = block.settings[story_label_key]
        assign story_video = block.settings[story_video_key]
      %}

      {% if story_enabled %}
        <div
          class="ai-story-bubble-item-{{ ai_gen_id }}"
          data-story-index="{{ i }}"
        >
          <div class="ai-story-bubble-ring-{{ ai_gen_id }}">
            <div class="ai-story-bubble-image-wrapper-{{ ai_gen_id }}">
              {% if story_image %}
                <img
                  src="{{ story_image | image_url: width: 200 }}"
                  alt="{{ story_label | escape }}"
                  class="ai-story-bubble-image-{{ ai_gen_id }}"
                  loading="lazy"
                  width="200"
                  height="200"
                >
              {% else %}
                <div class="ai-story-bubble-image-placeholder-{{ ai_gen_id }}">
                  {{ 'image' | placeholder_svg_tag }}
                </div>
              {% endif %}
            </div>
          </div>
          {% if story_label != blank %}
            <div class="ai-story-bubble-label-{{ ai_gen_id }}">{{ story_label }}</div>
          {% endif %}
        </div>
      {% endif %}
    {% endfor %}
  </div>

  <div class="ai-story-bubble-modal-{{ ai_gen_id }}" data-modal>
    <div class="ai-story-bubble-modal-content-{{ ai_gen_id }}">
      <button
        class="ai-story-bubble-modal-close-{{ ai_gen_id }}"
        aria-label="Fermer"
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="24"
          height="24"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
        >
          <line x1="18" y1="6" x2="6" y2="18"></line>
          <line x1="6" y1="6" x2="18" y2="18"></line>
        </svg>
      </button>
      <div class="ai-story-bubble-video-wrapper-{{ ai_gen_id }}">
        <div class="ai-story-bubble-video-{{ ai_gen_id }}" data-video-container></div>
      </div>
    </div>
  </div>
</story-bubbles-{{ ai_gen_id }}>

<script>
  (function() {
    class StoryBubbles{{ ai_gen_id }} extends HTMLElement {
      constructor() {
        super();
        this.stories = [
          {% for i in (1..6) %}
            {% liquid
              assign story_enabled_key = 'story_' | append: i | append: '_enabled'
              assign story_video_key = 'story_' | append: i | append: '_video'
              assign story_enabled = block.settings[story_enabled_key]
              assign story_video = block.settings[story_video_key]
            %}
            {% if story_enabled %}
              {
                index: {{ i }},
                video: {{ story_video | json }}
              }{% unless forloop.last %},{% endunless %}
            {% endif %}
          {% endfor %}
        ];
      }

      connectedCallback() {
        this.modal = this.querySelector('[data-modal]');
        this.videoContainer = this.querySelector('[data-video-container]');
        this.closeButton = this.querySelector('.ai-story-bubble-modal-close-{{ ai_gen_id }}');
        this.bubbles = this.querySelectorAll('.ai-story-bubble-item-{{ ai_gen_id }}');

        this.setupEventListeners();
      }

      setupEventListeners() {
        this.bubbles.forEach((bubble) => {
          bubble.addEventListener('click', () => {
            const storyIndex = parseInt(bubble.getAttribute('data-story-index'));
            this.openStory(storyIndex);
          });
        });

        this.closeButton.addEventListener('click', () => {
          this.closeModal();
        });

        this.modal.addEventListener('click', (e) => {
          if (e.target === this.modal) {
            this.closeModal();
          }
        });

        document.addEventListener('keydown', (e) => {
          if (e.key === 'Escape' && this.modal.classList.contains('active')) {
            this.closeModal();
          }
        });
      }

      openStory(index) {
        const story = this.stories.find(s => s.index === index);
        if (!story || !story.video) {
          this.videoContainer.innerHTML = '<div class="ai-story-bubble-empty-state-{{ ai_gen_id }}">Aucune vidéo disponible pour cette story</div>';
          this.modal.classList.add('active');
          document.body.style.overflow = 'hidden';
          return;
        }

        this.videoContainer.innerHTML = story.video;
        this.modal.classList.add('active');
        document.body.style.overflow = 'hidden';

        const video = this.videoContainer.querySelector('video');
        if (video) {
          video.play();
        }
      }

      closeModal() {
        this.modal.classList.remove('active');
        document.body.style.overflow = '';

        const video = this.videoContainer.querySelector('video');
        if (video) {
          video.pause();
          video.currentTime = 0;
        }

        this.videoContainer.innerHTML = '';
      }
    }

    customElements.define('story-bubbles-{{ ai_gen_id }}', StoryBubbles{{ ai_gen_id }});
  })();
</script>

{% schema %}
{
  "name": "Stories Instagram",
  "tag": null,
  "settings": [
    {
      "type": "header",
      "content": "Apparence des bulles"
    },
    {
      "type": "range",
      "id": "bubble_size",
      "label": "Taille des bulles",
      "min": 60,
      "max": 120,
      "step": 5,
      "unit": "px",
      "default": 80
    },
    {
      "type": "range",
      "id": "bubble_spacing",
      "label": "Espacement",
      "min": 8,
      "max": 32,
      "step": 2,
      "unit": "px",
      "default": 16
    },
    {
      "type": "range",
      "id": "ring_width",
      "label": "Épaisseur de l'anneau",
      "min": 2,
      "max": 6,
      "step": 1,
      "unit": "px",
      "default": 3
    },
    {
      "type": "color",
      "id": "ring_color",
      "label": "Couleur de l'anneau",
      "default": "#E1306C"
    },
    {
      "type": "color",
      "id": "background_color",
      "label": "Couleur de fond",
      "default": "#FFFFFF"
    },
    {
      "type": "range",
      "id": "label_size",
      "label": "Taille du texte",
      "min": 10,
      "max": 16,
      "step": 1,
      "unit": "px",
      "default": 12
    },
    {
      "type": "color",
      "id": "label_color",
      "label": "Couleur du texte",
      "default": "#000000"
    },
    {
      "type": "range",
      "id": "desktop_width_percent",
      "label": "Largeur sur desktop",
      "min": 50,
      "max": 100,
      "step": 5,
      "unit": "%",
      "default": 100
    },
    {
      "type": "header",
      "content": "Popup vidéo"
    },
    {
      "type": "color",
      "id": "modal_background",
      "label": "Couleur de fond",
      "default": "#000000"
    },
    {
      "type": "range",
      "id": "modal_border_radius",
      "label": "Arrondi des coins",
      "min": 0,
      "max": 24,
      "step": 2,
      "unit": "px",
      "default": 12
    },
    {
      "type": "header",
      "content": "Story 1"
    },
    {
      "type": "checkbox",
      "id": "story_1_enabled",
      "label": "Activer la story 1",
      "default": true
    },
    {
      "type": "image_picker",
      "id": "story_1_image",
      "label": "Image"
    },
    {
      "type": "text",
      "id": "story_1_label",
      "label": "Libellé",
      "default": "Story 1"
    },
    {
      "type": "html",
      "id": "story_1_video",
      "label": "Code vidéo"
    },
    {
      "type": "header",
      "content": "Story 2"
    },
    {
      "type": "checkbox",
      "id": "story_2_enabled",
      "label": "Activer la story 2",
      "default": true
    },
    {
      "type": "image_picker",
      "id": "story_2_image",
      "label": "Image"
    },
    {
      "type": "text",
      "id": "story_2_label",
      "label": "Libellé",
      "default": "Story 2"
    },
    {
      "type": "html",
      "id": "story_2_video",
      "label": "Code vidéo"
    },
    {
      "type": "header",
      "content": "Story 3"
    },
    {
      "type": "checkbox",
      "id": "story_3_enabled",
      "label": "Activer la story 3",
      "default": true
    },
    {
      "type": "image_picker",
      "id": "story_3_image",
      "label": "Image"
    },
    {
      "type": "text",
      "id": "story_3_label",
      "label": "Libellé",
      "default": "Story 3"
    },
    {
      "type": "html",
      "id": "story_3_video",
      "label": "Code vidéo"
    },
    {
      "type": "header",
      "content": "Story 4"
    },
    {
      "type": "checkbox",
      "id": "story_4_enabled",
      "label": "Activer la story 4",
      "default": false
    },
    {
      "type": "image_picker",
      "id": "story_4_image",
      "label": "Image"
    },
    {
      "type": "text",
      "id": "story_4_label",
      "label": "Libellé",
      "default": "Story 4"
    },
    {
      "type": "html",
      "id": "story_4_video",
      "label": "Code vidéo"
    },
    {
      "type": "header",
      "content": "Story 5"
    },
    {
      "type": "checkbox",
      "id": "story_5_enabled",
      "label": "Activer la story 5",
      "default": false
    },
    {
      "type": "image_picker",
      "id": "story_5_image",
      "label": "Image"
    },
    {
      "type": "text",
      "id": "story_5_label",
      "label": "Libellé",
      "default": "Story 5"
    },
    {
      "type": "html",
      "id": "story_5_video",
      "label": "Code vidéo"
    },
    {
      "type": "header",
      "content": "Story 6"
    },
    {
      "type": "checkbox",
      "id": "story_6_enabled",
      "label": "Activer la story 6",
      "default": false
    },
    {
      "type": "image_picker",
      "id": "story_6_image",
      "label": "Image"
    },
    {
      "type": "text",
      "id": "story_6_label",
      "label": "Libellé",
      "default": "Story 6"
    },
    {
      "type": "html",
      "id": "story_6_video",
      "label": "Code vidéo"
    }
  ],
  "presets": [
    {
      "name": "Stories Instagram"
    }
  ]
}
{% endschema %}
