{% load humanize %}
<!-- Ajusta la ruta si lo necesitas. Asegúrate de que django.contrib.humanize esté en INSTALLED_APPS -->

<!-- Estilos de Swiper -->
<link
  rel="stylesheet"
  href="https://unpkg.com/swiper/swiper-bundle.min.css"
/>

<div class="col-md-3 overflow-visible">
  <div class="p-3">
    <h5 class="mb-3 fw-bold text-center">Vistazos</h5>

    <!-- Contenedor principal en horizontal -->
    <div class="d-flex flex-row align-items-center story-container">
      <!-- Crear Historia -->
      {% if productos %}
        <div class="me-2 text-center story-item">
          <div
            id="btnUpload1"
            class="story-image add-story"
            style="
              cursor: pointer; 
              width: 60px; 
              height: 60px; 
              border-radius: 50%; 
              background-color: #e9ecef;
              display: flex;
              align-items: center; 
              justify-content: center;
            "
          >
            <span class="plus-icon fw-bold" style="font-size: 24px;">+</span>
          </div>
          <p class="mt-1 text-primary story-title">Nueva</p>
        </div>
      {% endif %}

      <!-- Esfera única para las historias del usuario -->
      {% if historias %}
        <div class="me-2 text-center story-item">
          <div
            class="story-image border border-secondary rounded-circle"
            style="
              background-image: url('{{ historias.0.ruta_imagen }}');
              background-size: cover;
              background-position: center;
              cursor: pointer;
              width: 60px; 
              height: 60px; 
            "
            data-bs-toggle="modal"
            data-bs-target="#customModal1"
          ></div>
          <p class="mt-1 text-muted story-title">Mis historias</p>
        </div>
      {% endif %}
    </div>
  </div>
</div>

<!-- Modal con flechas, progresos y Swiper -->
<div
  class="modal fade"
  id="customModal1"
  tabindex="-1"
  aria-labelledby="customModalLabel"
  aria-hidden="true"
>
  <div class="modal-dialog modal-fullscreen modal-dialog-centered">
    <div class="modal-content border-0 bg-transparent">
      <!-- Encabezado del modal -->
      <div class="modal-header border-0 d-flex flex-column align-items-start text-white">
        <div class="d-flex align-items-center mt-2 w-100 justify-content-between">
          <!-- Información del usuario -->
          <div class="d-flex align-items-center">
            <img
              src="{{ usuario.foto_perfil|default:'https://via.placeholder.com/50' }}"
              alt="Avatar"
              class="rounded-circle me-2"
              style="width: 50px; height: 50px"
            />
            <div>
              <h6 class="mb-0 fw-bold" style="font-size: 14px;">
                {{ usuario.nombre }}
              </h6>
              {% if historias and historias.0.fecha_hora_creado %}
              <p class="mb-0 text-muted" style="font-size: 12px;">
                Hace {{ historias.0.fecha_hora_creado|timesince }}
              </p>
              {% endif %}
            </div>
          </div>
          <!-- Botón cerrar -->
          <button
            type="button"
            class="btn-close btn-close-white"
            data-bs-dismiss="modal"
            aria-label="Cerrar"
          ></button>
        </div>
        <!-- Barras de progreso -->
        <div class="d-flex w-100 mt-2 progress-container">
          {% for story in historias %}
          <div class="progress me-1" style="height: 5px; flex: 1; background-color: rgba(255,255,255,0.3);">
            <div 
              class="progress-bar" 
              style="width: 0%; background-color: #ff0055; transition: none;">
            </div>
          </div>
          {% endfor %}
        </div>
      </div>

      <!-- Cuerpo del modal (Swiper) -->
      <div class="modal-body p-0 text-center d-flex align-items-center justify-content-center position-relative">
        <!-- Contenedor Swiper -->
        <div class="swiper-container w-100 h-100">
          <div class="swiper-wrapper">
            {% for story in historias %}
              <div class="swiper-slide d-flex align-items-center justify-content-center">
                <img
                  src="{{ story.ruta_imagen }}"
                  class="rounded shadow-lg"
                  alt="Historia"
                  style="max-height: 85vh; max-width: 90%; object-fit: cover;"
                />
              </div>
            {% endfor %}
          </div>

          <!-- Flechas de navegación (Swiper Navigation) -->
          <div class="swiper-button-prev" style="color:#fff;"></div>
          <div class="swiper-button-next" style="color:#fff;"></div>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Scripts de Swiper y la inicialización -->
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
<script>
document.addEventListener("DOMContentLoaded", function () {
  const progressBars = document.querySelectorAll(".progress-bar");
  const totalSlides = progressBars.length;
  const SWIPE_DURATION = 15000; // 15 segundos por historia
  let swiper;

  const modal = document.getElementById("customModal1");

  const initSwiper = () => {
    swiper = new Swiper(".swiper-container", {
      loop: false,
      allowTouchMove: false,
      autoplay: {
        delay: SWIPE_DURATION,
        disableOnInteraction: false, // si el usuario toca, se mantiene autoplay
      },
      // Flechas de navegación
      navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
      },
      on: {
        slideChange: function () {
          const idx = swiper.realIndex;

          // Llenar 100% las barras de historias anteriores, resetear las siguientes
          progressBars.forEach((bar, i) => {
            if (i < idx) {
              bar.style.width = "100%";
              bar.style.transition = "none";
            } else {
              bar.style.width = "0%";
              bar.style.transition = "none";
            }
          });
          // Barra actual: animación de 15s
          const currentBar = progressBars[idx];
          if (currentBar) {
            // Forzar repaint para reiniciar la transición
            void currentBar.offsetWidth;
            currentBar.style.transition = `width ${SWIPE_DURATION}ms linear`;
            currentBar.style.width = "100%";
          }
        },
        reachEnd: function () {
          // Llegamos al último slide
          setTimeout(() => {
            // Cierra el modal cuando termina el último
            const modalInstance = bootstrap.Modal.getInstance(modal);
            if (modalInstance) {
              modalInstance.hide();
            }
          }, SWIPE_DURATION);
        },
      },
    });
  };

  modal.addEventListener("shown.bs.modal", () => {
    initSwiper();
    // Iniciar la primera barra
    if (progressBars.length > 0) {
      progressBars[0].style.transition = `width ${SWIPE_DURATION}ms linear`;
      progressBars[0].style.width = "100%";
    }
  });

  modal.addEventListener("hidden.bs.modal", () => {
    if (swiper) {
      swiper.destroy();
      swiper = null;
    }
    // Resetear barras
    progressBars.forEach((bar) => {
      bar.style.width = "0%";
      bar.style.transition = "none";
    });
  });
});
</script>