{% extends 'menu/menu.html' %}
{% load static %}
{% load humanize %}

{% block title %}
Publicaciones
{% endblock %}

{% block body %}
<link rel="stylesheet" type="text/css" href="{% static 'app/css/publicaciones.css' %}">

<div class="row justify-content-center">
  <!-- COLUMNA DE VISTAZOS -->
  <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 (Botón +) -->
        {% if productos %}
          <div class="me-2 text-center story-item">
            <a href="{% url 'crear_vistazo' %}" style="text-decoration: none;">
              <div class="story-image add-story" style="cursor: pointer;">
                <span class="plus-icon">+</span>
              </div>
              <p class="mt-1 text-primary story-title">Nuevo</p>
            </a>
          </div>
        {% endif %}

        <!-- Burbuja "Mis Vistazos" -->
        {% if historias_propias and historias_propias|length > 0 %}
          {% if not historias_propias.0.ruta_imagen %}
            <div class="me-2 text-center story-item">
              <div class="story-image border border-secondary rounded-circle"
                   style="
                     background-image: url('{% static 'images/default-bubble.jpg' %}');
                     background-size: cover;
                     background-position: center;
                     cursor: pointer;
                     width: 60px; height: 60px;"
                   data-bs-toggle="modal"
                   data-bs-target="#customModal1"
                   data-tipo="propio"
                   id="misVistazosTrigger">
              </div>
              <p class="mt-1 text-muted story-title">Mis vistazos</p>
            </div>
          {% else %}
            <div class="me-2 text-center story-item">
              <div class="story-image border border-secondary rounded-circle"
                   style="
                     background-image: url('{{ historias_propias.0.ruta_imagen }}');
                     background-size: cover;
                     background-position: center;
                     cursor: pointer;
                     width: 60px; height: 60px;"
                   data-bs-toggle="modal"
                   data-bs-target="#customModal1"
                   data-tipo="propio"
                   id="misVistazosTrigger">
              </div>
              <p class="mt-1 text-muted story-title">Mis vistazos</p>
            </div>
          {% endif %}
        {% endif %}

        <!-- Historias de seguidos (se llenan vía AJAX) -->
        <div id="followedStories" class="d-flex flex-row align-items-center"></div>
      </div>
    </div>
  </div>

  <!-- MODAL con Historias (propias o de seguidos) -->
  <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 text-white d-flex flex-column align-items-center" style="position: relative;">
          <div class="d-flex flex-row align-items-center justify-content-center w-100" style="position: relative;">
            <!-- Cabecera: se usa la info del usuario; para seguidos se actualizará dinámicamente -->
            <div class="d-flex flex-row align-items-center user-header-info">
              <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 user-name" style="font-size: 14px;">{{ usuario.nombre }}</h6>
                {% if historias_propias and historias_propias.0.fecha_hora_creado %}
                  <p class="mb-0 text-muted user-time" style="font-size: 12px;">
                    Hace {{ historias_propias.0.fecha_hora_creado|timesince }}
                  </p>
                {% endif %}
              </div>
            </div>
            <button type="button" class="btn-close btn-close-white"
                    data-bs-dismiss="modal" aria-label="Cerrar"
                    style="position: absolute; right: 1rem;"></button>
          </div>
          <!-- Barras de progreso: inicialmente se muestran las de tus historias pre-renderizadas -->
          <div class="d-flex w-100 mt-3 progress-container px-3">
            {% for story in historias_propias %}
              <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>

        <!-- Swiper: muestra cada historia (inicialmente tus propias) -->
        <div class="modal-body p-0 text-center d-flex align-items-center justify-content-center position-relative">
          <div class="swiper-container w-100 h-100">
            <div class="swiper-wrapper" id="swiperWrapperPropio">
              {% for story in historias_propias %}
                <div class="swiper-slide d-flex align-items-center justify-content-center position-relative">
                  {% if story.tipo_estado == "texto" %}
                    <div class="text-story rounded shadow-lg {{ story.color_class }}">
                      {{ story.texto }}
                    </div>
                  {% else %}
                    <img src="{{ story.ruta_imagen }}"
                         class="rounded shadow-lg"
                         alt="Historia"
                         style="max-height: 85vh; max-width: 90%; object-fit: cover;" />
                  {% endif %}
                  <!-- Opciones (por ejemplo, borrar) -->
                  <div class="dropdown position-absolute" style="top: 1rem; right: 1rem;">
                    <button class="btn btn-secondary dropdown-toggle" type="button"
                            id="dropdownMenuButton{{ story.id_estado }}"
                            data-bs-toggle="dropdown" aria-expanded="false">
                      &#x22EE;
                    </button>
                    <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton{{ story.id_estado }}">
                      <li>
                        <a class="dropdown-item borrar-vistazo" href="#"
                           data-id_estado="{{ story.id_estado }}">Borrar</a>
                      </li>
                    </ul>
                  </div>
                </div>
              {% endfor %}
            </div>
            <!-- Navegación del Swiper -->
            <div class="swiper-button-prev" style="color: #fff;"></div>
            <div class="swiper-button-next" style="color: #fff;"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- FIN MODAL HISTORIAS -->

  <!-- Sección de Publicaciones (Columna central) -->
  <div class="col-md-6 d-flex justify-content-center">
    <div class="card shadow-sm p-3"
         style="border-radius: 10px; background-color: #f8f9fa; width: 900px; max-width: 100%;">
      <h5 class="text-center mb-3 fw-bold">Publicaciones</h5>
      {% if productos %}
        <div class="d-flex align-items-center mb-2">
          <span class="material-icons me-2" style="font-size: 40px; color: #007bff;">store</span>
          <input type="text" class="form-control border-0 shadow-none openModalInput"
                 placeholder="¿Qué producto deseas ofrecer?"
                 style="background-color: #f8f9fa; font-size: 1rem;" />
        </div>
        <hr class="my-1" />
        <div class="row text-center">
          <div class="col-6 col-md-3 mb-2">
            <div class="d-flex justify-content-start openModalInput align-items-center text-success"
                 style="cursor: pointer;">
              <span class="material-icons me-1" style="font-size: 1.5rem;">photo</span>
              <span style="font-size: 1rem;">Foto</span>
            </div>
          </div>
        </div>
      {% endif %}
      <div id="publicacionesContainer" class="mt-1"
           style="width: 100%; max-width: 900px; margin: auto;">
        <!-- Publicaciones inyectadas vía AJAX -->
      </div>
      <div class="reaction-container">
        <!-- Reacciones, etc. -->
      </div>
    </div>
  </div>

  <!-- Columna derecha: Comercios Verificados -->
  <div class="col-md-3">
    <div class="p-3">
      <h5 class="text-center mb-4 fw-bold">Comercios Verificados</h5>
      <ul id="listaComercios" class="list-unstyled mb-0"></ul>
    </div>
  </div>
</div>

<!-- Modal para crear publicación -->
<div class="modal fade" id="customModal" tabindex="-1" aria-labelledby="customModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered modal-sm">
    <div class="modal-content" style="border-radius: 10px;">
      <input type="hidden" name="csrfmiddlewaretoken" value="{{ csrf_token }}">
      <div class="modal-header">
        <h5 class="modal-title fw-bold" id="customModalLabel">Crear Publicación</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"
                aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <div class="d-flex flex-column">
          <div class="d-flex align-items-center mb-3">
            <img src="{{ usuario.foto_perfil }}" alt="Avatar"
                 class="rounded-circle me-2" style="width: 40px; height: 40px;">
            <div class="d-flex flex-column">
              <div class="d-flex align-items-center">
                <h6 class="mb-0 fw-bold">{{ usuario.nombre }}</h6>
                <span id="promotion-status" class="ms-2"></span>
              </div>
              <div class="d-flex justify-content-start align-items-start text-danger"
                   style="cursor: pointer;" data-bs-toggle="modal" data-bs-target="#promotionModal">
                <span class="material-icons me-1" style="font-size: 1.5rem;">campaign</span>
                <span style="font-size: 1rem;">Promoción</span>
              </div>
            </div>
          </div>
          <div class="d-flex align-items-center p-2 rounded-3">
            <input type="text" id="texto-post" name="texto-post" class="form-control border-0"
                   placeholder="aquí va el texto" style="box-shadow: none;">
          </div>
          <div class="dropzone border border-dashed rounded p-4 position-relative text-center bg-light">
            <div class="d-flex justify-content-center align-items-center mb-3" id="btnUpload">
              <span class="material-icons bg-secondary text-white rounded-circle p-2" style="font-size: 2rem;">add_photo_alternate</span>
            </div>
            <h6 class="fw-bold">Agregar fotos</h6>
          </div>
          <input type="file" id="fileInput" name="ruta_imagen"
                 style="display: none;" accept="image/*">
          <div class="d-flex align-items-center justify-content-between mt-3 p-3 border rounded bg-light">
            <div class="d-flex align-items-center">
              <span class="material-icons bg-secondary text-white rounded-circle p-2 me-2" style="font-size: 1.5rem;">smartphone</span>
              <p class="mb-0">Agrega fotos.</p>
            </div>
            <button class="btn btn-success btn-sm" id="btnAgregarImagen">Agregar</button>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="submit" class="btn btn-primary w-100 d-block" id="publicarBtn">Publicar</button>
      </div>
    </div>
  </div>
</div>

<!-- Modal para elegir promoción -->
<div class="modal fade" id="promotionModal" tabindex="-1" aria-labelledby="promotionModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered modal-sm">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="promotionModalLabel">Elige tu tipo de promoción</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <div class="row g-3" id="promotionOptionsContainer">
          <!-- Opciones cargadas vía AJAX -->
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Modal para subir foto (opcional) -->
<div class="modal fade" id="uploadPhotoModal" tabindex="-1" aria-labelledby="uploadPhotoModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered modal-sm">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="uploadPhotoModalLabel">Subir Foto</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"
                aria-label="Close"></button>
      </div>
      <div class="modal-body text-center">
        <button class="btn p-0 d-flex align-items-center text-primary mx-auto"
                style="background: none; border: none">
          <span class="material-icons me-1" style="font-size: 1.5rem; color: green;">image</span>
          <span class="fw-bold" style="font-size: 1rem;">Seleccionar foto</span>
        </button>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary btn-sm"
                data-bs-dismiss="modal">Cerrar</button>
        <button type="button" class="btn btn-primary btn-sm">Guardar</button>
      </div>
    </div>
  </div>
</div>
{% endblock %}

{% block scripts %}
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

<script>
document.addEventListener("DOMContentLoaded", function () {
  var csrfToken = "{{ csrf_token }}";

  /**************************************************************
   * 1. CARGA DE VISTAZOS DE SEGUIDOS (Miniaturas - AJAX)
   **************************************************************/
  $.ajax({
    url: "{% url 'ajax_obtener_vistazos' %}",
    type: "GET",
    success: function (data) {
      if (!data || !data.vistazos_seguidos) {
        console.log("No hay vistazos_seguidos en la respuesta.");
        return;
      }
      const seguidosContainer = $("#followedStories");
      seguidosContainer.html("");
      data.vistazos_seguidos.forEach(function (usuarioSeguido) {
        const segDiv = $(`
          <div class="me-2 text-center story-item">
            <div class="story-image border border-secondary rounded-circle"
                 style="
                   background-image: url('${usuarioSeguido.foto_perfil}');
                   background-size: cover;
                   background-position: center;
                   cursor: pointer;
                   width: 60px; height: 60px;"
                 data-user='${JSON.stringify(usuarioSeguido)}'>
            </div>
            <p class="mt-1 text-muted story-title">${usuarioSeguido.nombre_usuario}</p>
          </div>
        `);
        segDiv.find(".story-image").on("click", function () {
          let userData = $(this).data("user");
          // Usamos la misma función para cargar vistazos, indicando que se trata de un seguido.
          mostrarVistazosSeguidos(userData);
        });
        seguidosContainer.append(segDiv);
      });
    },
    error: function (xhr, status, error) {
      console.error("Error al obtener vistazos de seguidos:", error);
    }
  });

  /**************************************************************
   * 2. Mostrar Tus Historias (Modal, data-tipo='propio')
   **************************************************************/
  $("[data-bs-target='#customModal1'][data-tipo='propio']").on("click", function () {
    console.log("Mostrando mis propias historias...");
    // Tus historias ya se muestran en el HTML (del for de historias_propias)
  });

  /**************************************************************
   * 3. Función para Cargar Historias de Seguidos en el Modal
   **************************************************************/
  let globalSwiper = null;
  function mostrarVistazosSeguidos(usuarioSeguido) {
    const modalEl = document.getElementById("customModal1");
    // Actualizar la cabecera con datos del seguidor
    const userHeaderInfo = modalEl.querySelector(".user-header-info");
    const userImg = userHeaderInfo.querySelector("img");
    const userNameEl = userHeaderInfo.querySelector(".user-name");
    const userTimeEl = userHeaderInfo.querySelector(".user-time");

    userImg.src = usuarioSeguido.foto_perfil || "https://via.placeholder.com/50";
    userNameEl.textContent = usuarioSeguido.nombre_usuario || "Sin nombre";
    userTimeEl.textContent = "";

    // Vaciar slides y las barras de progreso actuales (que corresponden a las historias propias)
    const swiperWrapper = modalEl.querySelector(".swiper-wrapper");
    swiperWrapper.innerHTML = "";
    const progressContainer = modalEl.querySelector(".progress-container");
    progressContainer.innerHTML = "";

    const historiasSeguido = usuarioSeguido.historias || [];
    historiasSeguido.forEach((historia) => {
      const slide = document.createElement("div");
      slide.classList.add("swiper-slide", "d-flex", "align-items-center", "justify-content-center", "position-relative");
      if (historia.tipo_estado === "texto") {
        slide.innerHTML = `
          <div class="text-story rounded shadow-lg ${historia.color_class || ""}">
            ${historia.texto || ""}
          </div>
        `;
      } else {
        const imgSrc = historia.ruta_imagen_estado || historia.ruta_imagen || "";
        slide.innerHTML = `
          <img src="${imgSrc}"
               class="rounded shadow-lg"
               alt="Historia"
               style="max-height: 85vh; max-width: 90%; object-fit: cover;">
        `;
      }
      // Dropdown de opciones
      const dropdown = document.createElement("div");
      dropdown.classList.add("dropdown", "position-absolute");
      dropdown.style.top = "1rem";
      dropdown.style.right = "1rem";
      dropdown.innerHTML = `
        <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
          &#x22EE;
        </button>
        <ul class="dropdown-menu">
          <li>
            <a class="dropdown-item btn-denunciar-vistazo" href="#" data-id_estado="${historia.id_estado}">
              Denunciar
            </a>
          </li>
        </ul>
      `;
      slide.appendChild(dropdown);
      swiperWrapper.appendChild(slide);

      // Crear barra de progreso para el slide
      const progDiv = document.createElement("div");
      progDiv.classList.add("progress", "me-1");
      progDiv.style.height = "5px";
      progDiv.style.flex = "1";
      progDiv.style.backgroundColor = "rgba(255,255,255,0.3)";
      const bar = document.createElement("div");
      bar.classList.add("progress-bar");
      bar.style.width = "0%";
      bar.style.backgroundColor = "#ff0055";
      bar.style.transition = "none";
      progDiv.appendChild(bar);
      progressContainer.appendChild(progDiv);
    });

    // Abrir el modal
    const bsModal = new bootstrap.Modal(modalEl);
    bsModal.show();
  }

  /**************************************************************
   * 4. Configurar Swiper y Barras de Progreso (15 seg)
   **************************************************************/
  (function initModalSwiper() {
    const modal = document.getElementById("customModal1");
    modal.addEventListener("shown.bs.modal", () => {
      const progressBars = modal.querySelectorAll(".progress-bar");
      const SWIPE_DURATION = 15000;
      const swiperEl = modal.querySelector(".swiper-container");
      if (globalSwiper) {
        globalSwiper.destroy();
        globalSwiper = null;
      }
      globalSwiper = new Swiper(swiperEl, {
        loop: false,
        allowTouchMove: false,
        autoplay: {
          delay: SWIPE_DURATION,
          disableOnInteraction: false,
        },
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
        on: {
          slideChange: function () {
            const idx = globalSwiper.realIndex;
            progressBars.forEach((bar, i) => {
              bar.style.width = i < idx ? "100%" : "0%";
              bar.style.transition = "none";
            });
            const currentBar = progressBars[idx];
            if (currentBar) {
              void currentBar.offsetWidth;
              currentBar.style.transition = `width ${SWIPE_DURATION}ms linear`;
              currentBar.style.width = "100%";
            }
          },
          reachEnd: function () {
            setTimeout(() => {
              const modalInstance = bootstrap.Modal.getInstance(modal);
              if (modalInstance) modalInstance.hide();
            }, SWIPE_DURATION);
          }
        }
      });
      if (progressBars.length > 0) {
        progressBars[0].style.transition = `width ${SWIPE_DURATION}ms linear`;
        progressBars[0].style.width = "100%";
      }
    });
    modal.addEventListener("hidden.bs.modal", () => {
      if (globalSwiper) {
        globalSwiper.destroy();
        globalSwiper = null;
      }
    });
  })();

  /**************************************************************
   * 5. Cargar Publicaciones (AJAX)
   **************************************************************/
  function cargarPublicaciones() {
    $.ajax({
      url: "{% url 'obtener_publicaciones' %}",
      type: "GET",
      success: function (response) {
        $("#publicacionesContainer").empty();
        response.publicaciones.reverse().forEach(function (publicacion) {
          agregarPublicacionAlDOM(publicacion);
        });
      },
      error: function (xhr, status, error) {
        console.error("Error al cargar las publicaciones:", error);
        alert("Hubo un error al cargar las publicaciones.");
      }
    });
  }

  function agregarPublicacionAlDOM(publicacion) {
    const textoPublicacion = publicacion.texto_publicaciones || "Sin descripción";
    let rutaImagen = publicacion.ruta_imagen || null;
    const estadoPromocion = publicacion.tipo_estado == "Promoción" ? "Promoción" : "";
    const nombreUsuario = publicacion.nombre_usuario || "Anónimo";
    const avatar = publicacion.ruta_imagen_usuario || "{% static 'app/assets/images/default_avatar.png' %}";
    const idPublicacion = publicacion.id_publicaciones || "ID no disponible";
    const contador_like = publicacion.cantidad_likes || 0;
    const isLiked = (publicacion.is_liked == 1);
    if (rutaImagen) { rutaImagen = rutaImagen.replace(/\\/g, "/"); }
    const publicacionHTML = `
      <div class="card my-3 p-3 shadow-sm"
           style="border-radius: 10px; background-color: #ffffff; width: 100%; max-width: 900px;">
        <div class="d-flex align-items-center justify-content-between mb-2">
          <div class="d-flex align-items-center">
            <img src="${avatar}" alt="Avatar" class="rounded-circle me-2" style="width: 40px; height: 40px;">
            <div>
              <h6 class="mb-0 fw-bold">${nombreUsuario}</h6>
              <div class="d-flex align-items-center">
                <small class="text-muted me-2">${publicacion.fecha_hora_creacion}</small>
                ${estadoPromocion ? `<span>${estadoPromocion}</span>` : ""}
              </div>
            </div>
          </div>
          <div class="dropdown">
            <button class="btn btn-link text-decoration-none" type="button" data-bs-toggle="dropdown" aria-expanded="false">
              &#x22EE;
            </button>
            <ul class="dropdown-menu">
              <li>
                <a class="dropdown-item btn-denunciar" href="#" data-id="${idPublicacion}">
                  Denunciar
                </a>
              </li>
            </ul>
          </div>
        </div>
        <div class="mb-2">
          <p>${textoPublicacion}</p>
        </div>
        ${rutaImagen ? `
          <div class="mb-2">
            <img src="${rutaImagen}" alt="Imagen Publicación" class="img-fluid rounded" style="width: 100%; border-radius: 10px;">
          </div>
        ` : ""}
        <div class="d-flex align-items-center gap-3 mt-2">
          <button class="btn-like d-flex align-items-center gap-1 ${isLiked ? "liked" : "unliked"}"
                  data-id="${idPublicacion}" style="border: none; background: none; cursor: pointer;">
            <i class="material-icons like-icon" style="font-size: 20px; color: ${isLiked ? "red" : "#6c757d"};">
              ${isLiked ? "favorite" : "favorite_border"}
            </i>
            <span class="like-text fw-bold">Me gusta</span>
            <span class="like-count fw-bold">${contador_like}</span>
          </button>
          <button class="btn d-flex align-items-center share-button gap-1"
                  data-url="https://pedidos.nexushn.com/control/publicacion/${idPublicacion}"
                  style="border: none; background: none; padding: 0;">
            <i class="material-icons" style="font-size: 20px; color: #6c757d;">share</i>
            <span style="font-weight: bold; font-size: 14px; color: #6c757d;">Compartir</span>
          </button>
        </div>
      </div>
    `;
    $("#publicacionesContainer").prepend(publicacionHTML);
  }

  cargarPublicaciones();

  /**************************************************************
   * 6. Cargar Comercios Verificados (AJAX)
   **************************************************************/
  $.ajax({
    url: "{% url 'obtener_comercios_verificados' %}",
    type: "GET",
    data: { tipo: 0 },
    dataType: "json",
    success: function (response) {
      const lista = $("#listaComercios");
      lista.empty();
      if (response.success && response.data.length > 0) {
        $.each(response.data, function (index, comercio) {
          const comercioHTML = `
            <li class="d-flex justify-content-between align-items-center py-2 border-bottom">
              <div class="d-flex align-items-center">
                <span class="fw-bold text-secondary me-2">${comercio.nombre}</span>
              </div>
              <div class="d-flex align-items-center">
                <i class="material-icons text-warning" style="font-size: 20px;">star</i>
                <span class="badge bg-success rounded-pill ms-1">${comercio.calificacion}</span>
              </div>
            </li>
          `;
          lista.append(comercioHTML);
        });
      } else {
        lista.html('<li class="text-center text-danger">No se encontraron comercios verificados.</li>');
      }
    },
    error: function (xhr, status, error) {
      console.error("Error al obtener los comercios:", error);
      $("#listaComercios").html('<li class="text-center text-danger">Error al cargar los comercios.</li>');
    }
  });

  /**************************************************************
   * 7. Like / Compartir
   **************************************************************/
  $(document).on("click", ".btn-like", function () {
    const idPublicacion = $(this).data("id");
    const likeButton = $(this);
    const likeIcon = likeButton.find(".like-icon");
    const likeCountElement = likeButton.find(".like-count");
    $.ajax({
      url: "{% url 'update_likes' %}",
      type: "POST",
      headers: { "X-CSRFToken": "{{ csrf_token }}" },
      data: { id_publicaciones: idPublicacion },
      success: function (data) {
        let currentLikes = parseInt(likeCountElement.text()) || 0;
        if (data.message == "Like anadido") {
          likeButton.addClass("liked").removeClass("unliked");
          likeIcon.text("favorite").css("color", "red");
          currentLikes += 1;
        } else if (data.message == "Like eliminado") {
          likeButton.addClass("unliked").removeClass("liked");
          likeIcon.text("favorite_border").css("color", "#6c757d");
          currentLikes = Math.max(0, currentLikes - 1);
        }
        likeCountElement.text(currentLikes);
      }
    });
  });

  $(document).on("click", ".share-button", function () {
    const publicacionURL = $(this).data("url");
    const mensaje = `Mira esta publicación: ${publicacionURL}`;
    const whatsappURL = `https://wa.me/?text=${encodeURIComponent(mensaje)}`;
    window.location.href = whatsappURL;
  });

  /**************************************************************
   * 8. Denunciar (Publicación, Comentario, Vistazo)
   **************************************************************/
  $(document).on("click", ".btn-denunciar", function(e) {
    e.preventDefault();
    const idPublicacion = $(this).data("id");
    Swal.fire({
      title: 'Denunciar Publicación',
      html: `
        <div class="text-start">
          <label class="fw-bold mb-1">Tipo de Denuncia</label>
          <select id="denuncia-tipo" class="form-select mb-3">
            <option value="Violento">Violento</option>
            <option value="CSAM">CSAM</option>
            <option value="Spam">Spam</option>
            <option value="Contenido inapropiado">Contenido inapropiado</option>
          </select>
          <label class="fw-bold mb-1">Razón de la Denuncia</label>
          <textarea id="denuncia-razon" class="form-control" rows="3" placeholder="Escribe la razón de la denuncia..."></textarea>
        </div>
      `,
      showCancelButton: true,
      confirmButtonText: 'Enviar',
      cancelButtonText: 'Cancelar',
      preConfirm: () => {
        const tipo = document.getElementById('denuncia-tipo').value;
        const razon = document.getElementById('denuncia-razon').value;
        if (!razon.trim()) {
          Swal.showValidationMessage('¡Debes escribir una razón para denunciar!');
        }
        return { tipo, razon };
      }
    }).then((result) => {
      if (result.isConfirmed) {
        const tipoDen = result.value.tipo;
        const motivo = result.value.razon;
        if (tipoDen.toLowerCase() === 'csam') {
          Swal.fire('Alerta', 'Este contenido será bloqueado de inmediato.', 'warning');
        }
        $.ajax({
          url: "{% url 'denunciar_publicacion' %}",
          method: "POST",
          headers: { "X-CSRFToken": "{{ csrf_token }}" },
          data: { id_publicacion: idPublicacion, motivo, tipo_denuncia: tipoDen },
          success: function (response) {
            Swal.fire("¡Enviado!", response.message, "success");
          },
          error: function (xhr, status, error) {
            console.error("Error al denunciar:", error);
            Swal.fire("Error", "Ocurrió un error al enviar tu denuncia.", "error");
          }
        });
      }
    });
  });

  $(document).on("click", ".btn-denunciar-vistazo", function(e) {
    e.preventDefault();
    const idVistazo = $(this).data("id_estado");
    Swal.fire({
      title: 'Denunciar Vistazo',
      html: `
        <div class="text-start">
          <label class="fw-bold mb-1">Tipo de Denuncia</label>
          <select id="denuncia-tipo" class="form-select mb-3">
            <option value="Violento">Violento</option>
            <option value="CSAM">CSAM</option>
            <option value="Spam">Spam</option>
            <option value="Contenido inapropiado">Contenido inapropiado</option>
          </select>
          <label class="fw-bold mb-1">Razón de la Denuncia</label>
          <textarea id="denuncia-razon" class="form-control" rows="3" placeholder="Escribe la razón de la denuncia..."></textarea>
        </div>
      `,
      showCancelButton: true,
      confirmButtonText: 'Enviar',
      cancelButtonText: 'Cancelar',
      preConfirm: () => {
        const tipo = document.getElementById('denuncia-tipo').value;
        const razon = document.getElementById('denuncia-razon').value;
        if (!razon.trim()) {
          Swal.showValidationMessage('¡Debes escribir una razón para denunciar!');
        }
        return { tipo, razon };
      }
    }).then((result) => {
      if (result.isConfirmed) {
        const tipoDen = result.value.tipo;
        const motivo = result.value.razon;
        if (tipoDen.toLowerCase() === 'csam') {
          Swal.fire('Alerta', 'Este contenido será bloqueado de inmediato.', 'warning');
        }
        $.ajax({
          url: "/app/denunciar_vistazo/",
          method: "POST",
          headers: { "X-CSRFToken": "{{ csrf_token }}" },
          data: { id_estado: idVistazo, motivo, tipo_denuncia: tipoDen },
          success: function (response) {
            Swal.fire("¡Enviado!", response.message, "success");
          },
          error: function (xhr, status, error) {
            console.error("Error al denunciar vista:", error);
            Swal.fire("Error", "Ocurrió un error al enviar tu denuncia.", "error");
          }
        });
      }
    });
  });

  /**************************************************************
   * 10. Crear Nueva Publicación
   **************************************************************/
  $("#btnUpload, #btnAgregarImagen").on("click", function () {
    $("#fileInput").click();
  });

  $("#publicarBtn").on("click", function (e) {
    e.preventDefault();
    const textoPublicacion = $("#texto-post").val().trim();
    const fileInput = $("#fileInput")[0];
    if (!textoPublicacion && fileInput.files.length == 0) {
      Swal.fire("", "Debes ingresar un texto o seleccionar una foto.", "warning");
      return;
    }
    let datos = {
      tipo_estado: 2,
      texto_publicacion: textoPublicacion,
      csrfmiddlewaretoken: "{{ csrf_token }}"
    };
    if (fileInput.files.length > 0) {
      const archivo = fileInput.files[0];
      const reader = new FileReader();
      reader.onload = function (event) {
        datos["ruta_imagen"] = event.target.result;
        enviarNuevaPublicacion(datos);
      };
      reader.readAsDataURL(archivo);
    } else {
      enviarNuevaPublicacion(datos);
    }
  });

  function enviarNuevaPublicacion(datos) {
    $.ajax({
      url: "{% url 'crear_publicacion' %}",
      type: "POST",
      data: datos,
      success: function (res) {
        if (res.save == 1) {
          Swal.fire("", "Publicación Creada!", "success");
          cargarPublicaciones();
          $("#texto-post").val("");
          $("#fileInput").val("");
          $("#promotion-status").html("").removeClass();
          $("#customModal").modal("hide");
        } else {
          alert("Error al crear la publicación: " + res.error);
        }
      }
    });
  }

  /**************************************************************
   * 11. Cargar Opciones de Promoción (AJAX)
   **************************************************************/
  const container = $("#promotionOptionsContainer");
  $.ajax({
    url: "{% url 'catalogo_tipo_estado' %}",
    method: "GET",
    success: function (resp) {
      if (resp.success) {
        resp.data.forEach(function (item) {
          const optionHTML = `
            <div class="col-6">
              <div class="p-3 border rounded text-center promotion-option" data-promotion="${item.nombre_tipo}">
                <span class="material-icons" style="font-size: 2rem;">${item.icono}</span>
                <p class="mt-2">${item.nombre_tipo}</p>
              </div>
            </div>
          `;
          container.append(optionHTML);
        });
      } else {
        container.append('<p class="text-danger">Error al cargar las opciones.</p>');
      }
    },
    error: function () {
      container.append('<p class="text-danger">No se pudieron cargar las opciones. Inténtalo más tarde.</p>');
    }
  });

  $(document).on("click", ".promotion-option", function () {
    let promotionName = $(this).data("promotion");
    $("#promotion-status")
      .html(`<i class="fas fa-tag me-1"></i> - ${promotionName}`)
      .removeClass()
      .addClass("bg-warning text-dark p-1 rounded");
    $("#promotionModal").modal("hide");
  });

  $(".openModalInput").on("click", function () {
    $("#customModal").modal("show");
  });
});
</script>
{% endblock %}