{% doc %}
  @prompt
    Ensemble de mini pop-up paramétable permettant de : sélectionner un produit (le pop-up doit renvoyer vers la fiche produit quand on clique sur le pop-up), rentrer un prénom, rentrer une mention personnalisé (mettre par défaut : "acheté   y a 5 heures")
{% enddoc %}
{% assign ai_gen_id = block.id | replace: '_', '' | downcase %}

{% style %}
  .ai-social-proof-popup-{{ ai_gen_id }} {
    position: fixed;
    bottom: 20px;
    left: 20px;
    z-index: 9999;
    display: none;
    width: {{ block.settings.popup_width }}px;
    max-width: calc(100vw - 40px);
  }

  .ai-social-proof-popup-{{ ai_gen_id }}.active {
    display: block;
    animation: ai-social-proof-slide-in-{{ ai_gen_id }} 0.4s ease-out;
  }

  .ai-social-proof-popup-{{ ai_gen_id }}.hiding {
    animation: ai-social-proof-slide-out-{{ ai_gen_id }} 0.4s ease-out;
  }

  @keyframes ai-social-proof-slide-in-{{ ai_gen_id }} {
    from {
      transform: translateX(-100%);
      opacity: 0;
    }
    to {
      transform: translateX(0);
      opacity: 1;
    }
  }

  @keyframes ai-social-proof-slide-out-{{ ai_gen_id }} {
    from {
      transform: translateX(0);
      opacity: 1;
    }
    to {
      transform: translateX(-100%);
      opacity: 0;
    }
  }

  .ai-social-proof-popup-content-{{ ai_gen_id }} {
    background-color: {{ block.settings.background_color }};
    border-radius: {{ block.settings.border_radius }}px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    padding: 16px;
    display: flex;
    gap: 12px;
    align-items: center;
    cursor: pointer;
    transition: transform 0.2s ease;
  }

  .ai-social-proof-popup-content-{{ ai_gen_id }}:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
  }

  .ai-social-proof-popup-image-{{ ai_gen_id }} {
    width: 60px;
    height: 60px;
    flex-shrink: 0;
    border-radius: {{ block.settings.image_border_radius }}px;
    overflow: hidden;
  }

  .ai-social-proof-popup-image-{{ ai_gen_id }} img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

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

  .ai-social-proof-popup-image-placeholder-{{ ai_gen_id }} svg {
    width: 30px;
    height: 30px;
    opacity: 0.3;
  }

  .ai-social-proof-popup-text-{{ ai_gen_id }} {
    flex-grow: 1;
  }

  .ai-social-proof-popup-name-{{ ai_gen_id }} {
    font-weight: 600;
    font-size: 14px;
    color: {{ block.settings.text_color }};
    margin: 0 0 4px 0;
  }

  .ai-social-proof-popup-message-{{ ai_gen_id }} {
    font-size: 13px;
    color: {{ block.settings.text_color }};
    opacity: 0.8;
    margin: 0;
  }

  .ai-social-proof-popup-close-{{ ai_gen_id }} {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    color: {{ block.settings.text_color }};
    opacity: 0.5;
    flex-shrink: 0;
    transition: opacity 0.2s ease;
  }

  .ai-social-proof-popup-close-{{ ai_gen_id }}:hover {
    opacity: 1;
  }

  .ai-social-proof-popup-close-{{ ai_gen_id }} svg {
    width: 16px;
    height: 16px;
  }

  @media screen and (max-width: 749px) {
    .ai-social-proof-popup-{{ ai_gen_id }} {
      bottom: 10px;
      left: 10px;
      width: {{ block.settings.popup_width | times: 0.9 }}px;
    }

    .ai-social-proof-popup-image-{{ ai_gen_id }} {
      width: 50px;
      height: 50px;
    }

    .ai-social-proof-popup-name-{{ ai_gen_id }} {
      font-size: 13px;
    }

    .ai-social-proof-popup-message-{{ ai_gen_id }} {
      font-size: 12px;
    }
  }
{% endstyle %}

<social-proof-popup-{{ ai_gen_id }}
  class="ai-social-proof-popup-{{ ai_gen_id }}"
  data-display-delay="{{ block.settings.display_delay }}"
  data-display-duration="{{ block.settings.display_duration }}"
  {{ block.shopify_attributes }}
>
  {% if block.settings.product != blank %}
    <a
      href="{{ block.settings.product.url }}"
      class="ai-social-proof-popup-content-{{ ai_gen_id }}"
    >
      <div class="ai-social-proof-popup-image-{{ ai_gen_id }}">
        {% if block.settings.product.featured_image %}
          <img
            src="{{ block.settings.product.featured_image | image_url: width: 120 }}"
            alt="{{ block.settings.product.featured_image.alt | escape }}"
            width="120"
            height="120"
            loading="lazy"
          >
        {% else %}
          <div class="ai-social-proof-popup-image-placeholder-{{ ai_gen_id }}">
            {{ 'product-1' | placeholder_svg_tag }}
          </div>
        {% endif %}
      </div>
      <div class="ai-social-proof-popup-text-{{ ai_gen_id }}">
        <p class="ai-social-proof-popup-name-{{ ai_gen_id }}">
          {% if block.settings.customer_name != blank %}
            {{ block.settings.customer_name }}
          {% else %}
            Client
          {% endif %}
        </p>
        <p class="ai-social-proof-popup-message-{{ ai_gen_id }}">
          {% if block.settings.custom_message != blank %}
            {{ block.settings.custom_message }}
          {% else %}
            acheté il y a 5 heures
          {% endif %}
        </p>
      </div>
      <button
        class="ai-social-proof-popup-close-{{ ai_gen_id }}"
        aria-label="Fermer"
        type="button"
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          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>
    </a>
  {% endif %}
</social-proof-popup-{{ ai_gen_id }}>

<script>
  (function() {
    class SocialProofPopup{{ ai_gen_id }} extends HTMLElement {
      constructor() {
        super();
        this.displayDelay = parseInt(this.dataset.displayDelay) * 1000;
        this.displayDuration = parseInt(this.dataset.displayDuration) * 1000;
        this.isVisible = false;
      }

      connectedCallback() {
        this.closeButton = this.querySelector('.ai-social-proof-popup-close-{{ ai_gen_id }}');
        
        if (this.closeButton) {
          this.closeButton.addEventListener('click', (e) => {
            e.preventDefault();
            e.stopPropagation();
            this.hidePopup();
          });
        }

        setTimeout(() => {
          this.showPopup();
        }, this.displayDelay);
      }

      showPopup() {
        if (this.isVisible) return;
        
        this.classList.add('active');
        this.classList.remove('hiding');
        this.isVisible = true;

        setTimeout(() => {
          this.hidePopup();
        }, this.displayDuration);
      }

      hidePopup() {
        if (!this.isVisible) return;

        this.classList.add('hiding');
        this.classList.remove('active');
        this.isVisible = false;

        setTimeout(() => {
          this.classList.remove('hiding');
        }, 400);
      }
    }

    customElements.define('social-proof-popup-{{ ai_gen_id }}', SocialProofPopup{{ ai_gen_id }});
  })();
</script>

{% schema %}
{
  "name": "Pop-up preuve sociale",
  "settings": [
    {
      "type": "header",
      "content": "Produit"
    },
    {
      "type": "product",
      "id": "product",
      "label": "Produit"
    },
    {
      "type": "header",
      "content": "Informations client"
    },
    {
      "type": "text",
      "id": "customer_name",
      "label": "Prénom du client",
      "default": "Sophie"
    },
    {
      "type": "text",
      "id": "custom_message",
      "label": "Message personnalisé",
      "default": "acheté il y a 5 heures"
    },
    {
      "type": "header",
      "content": "Comportement"
    },
    {
      "type": "range",
      "id": "display_delay",
      "label": "Délai d'affichage",
      "min": 1,
      "max": 30,
      "step": 1,
      "unit": "s",
      "default": 5
    },
    {
      "type": "range",
      "id": "display_duration",
      "label": "Durée d'affichage",
      "min": 3,
      "max": 20,
      "step": 1,
      "unit": "s",
      "default": 8
    },
    {
      "type": "header",
      "content": "Style"
    },
    {
      "type": "range",
      "id": "popup_width",
      "label": "Largeur du pop-up",
      "min": 200,
      "max": 400,
      "step": 10,
      "unit": "px",
      "default": 320
    },
    {
      "type": "color",
      "id": "background_color",
      "label": "Couleur de fond",
      "default": "#ffffff"
    },
    {
      "type": "color",
      "id": "text_color",
      "label": "Couleur du texte",
      "default": "#000000"
    },
    {
      "type": "range",
      "id": "border_radius",
      "label": "Arrondi des coins",
      "min": 0,
      "max": 20,
      "step": 2,
      "unit": "px",
      "default": 8
    },
    {
      "type": "range",
      "id": "image_border_radius",
      "label": "Arrondi de l'image",
      "min": 0,
      "max": 30,
      "step": 2,
      "unit": "px",
      "default": 6
    }
  ],
  "presets": [
    {
      "name": "Pop-up preuve sociale"
    }
  ]
}
{% endschema %}
