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

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

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

<ion-content>
  {% include 'ionic_refresher.html' %}

  <ion-grid class="ion-no-padding">
    <ion-row class="ion-justify-content-center">
      <!-- COLUMNA DE VISTAZOS -->
      <ion-col size="12" size-md="3" class="ion-padding">
        <ion-card class="ion-no-margin">
          <ion-card-header>
            <ion-card-title class="ion-text-center">Vistazos</ion-card-title>
          </ion-card-header>
          <ion-card-content>
            <!-- 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;" 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;" 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>
          </ion-card-content>
        </ion-card>
      </ion-col>

      <!-- Sección de Publicaciones (Columna central) -->
      <ion-col size="12" size-md="6" class="ion-padding">
        <ion-card class="ion-no-margin">
          <ion-card-header>
            <ion-card-title class="ion-text-center">Publicaciones</ion-card-title>
          </ion-card-header>
          <ion-card-content>
            {% if productos %}
            <ion-item lines="none" class="ion-margin-bottom">
              <ion-icon name="storefront" slot="start" style="font-size: 40px; color: var(--ion-color-primary);"></ion-icon>
              <ion-input type="text" class="openModalInput" placeholder="¿Qué producto deseas ofrecer?" style="font-size: 1rem;"></ion-input>
            </ion-item>
            <ion-item-divider></ion-item-divider>
            <ion-row class="ion-text-center ion-margin-bottom">
              <ion-col size="6" size-md="3">
                <ion-button fill="clear" class="openModalInput">
                  <ion-icon name="image" slot="start"></ion-icon>
                  <ion-label>Foto</ion-label>
                </ion-button>
              </ion-col>
            </ion-row>
            {% endif %}
            <div id="publicacionesContainer" class="ion-margin-top">
              <!-- Publicaciones inyectadas vía AJAX -->
            </div>
          </ion-card-content>
        </ion-card>
      </ion-col>

      <!-- Columna derecha: Comercios Verificados -->
      <ion-col size="12" size-md="3" class="ion-padding">
        <ion-card class="ion-no-margin">
          <ion-card-header>
            <ion-card-title class="ion-text-center">Comercios Verificados</ion-card-title>
          </ion-card-header>
          <ion-card-content>
            <ion-list id="listaComercios" lines="none"></ion-list>
          </ion-card-content>
        </ion-card>
      </ion-col>
    </ion-row>
  </ion-grid>

  <!-- Modal para crear publicación -->
  <ion-modal trigger="open-modal" [swipeToClose]="true">
    <ng-template>
      <ion-header>
        <ion-toolbar>
          <ion-title>Crear Publicación</ion-title>
          <ion-buttons slot="end">
            <ion-button (click)="dismissModal()">
              <ion-icon name="close" slot="icon-only"></ion-icon>
            </ion-button>
          </ion-buttons>
        </ion-toolbar>
      </ion-header>
      <ion-content>
        <ion-list>
          <ion-item>
            <ion-avatar slot="start">
              <img src="{{ usuario.foto_perfil }}" alt="Avatar">
            </ion-avatar>
            <ion-label>
              <h2>{{ usuario.nombre }}</h2>
              <ion-button fill="clear" id="promotion-button">
                <ion-icon name="megaphone" slot="start"></ion-icon>
                <ion-label>Promoción</ion-label>
              </ion-button>
            </ion-label>
          </ion-item>

          <ion-item>
            <ion-textarea id="texto-post" placeholder="aquí va el texto" rows="5"></ion-textarea>
          </ion-item>

          <ion-item class="ion-margin-vertical">
            <div class="dropzone" id="dropzone">
              <ion-button fill="clear" id="btnUpload">
                <ion-icon name="add" slot="start"></ion-icon>
                <ion-label>Agregar fotos</ion-label>
              </ion-button>
              <input type="file" id="fileInput" style="display: none;" accept="image/*">
            </div>
          </ion-item>

          <ion-button expand="block" id="publicarBtn" class="ion-margin">Publicar</ion-button>
        </ion-list>
      </ion-content>
    </ng-template>
  </ion-modal>

  <!-- Modal para elegir promoción -->
  <ion-modal trigger="promotion-button" [swipeToClose]="true">
    <ng-template>
      <ion-header>
        <ion-toolbar>
          <ion-title>Elige tu tipo de promoción</ion-title>
          <ion-buttons slot="end">
            <ion-button (click)="dismissPromotionModal()">
              <ion-icon name="close" slot="icon-only"></ion-icon>
            </ion-button>
          </ion-buttons>
        </ion-toolbar>
      </ion-header>
      <ion-content>
        <ion-grid>
          <ion-row id="promotionOptionsContainer">
            <!-- Opciones cargadas vía AJAX -->
          </ion-row>
        </ion-grid>
      </ion-content>
    </ng-template>
  </ion-modal>

  <!-- Modal para Historias/Vistazos -->
  <ion-modal [isOpen]="isStoryModalOpen" (didDismiss)="setStoryModalOpen(false)">
    <ng-template>
      <ion-header>
        <ion-toolbar>
          <ion-buttons slot="start">
            <ion-button (click)="setStoryModalOpen(false)">
              <ion-icon name="close" slot="icon-only"></ion-icon>
            </ion-button>
          </ion-buttons>

          <div class="d-flex flex-column align-items-center w-100">
            <div class="d-flex flex-row align-items-center user-header-info">
              <ion-avatar>
                <img src="{{ usuario.foto_perfil|default:'https://via.placeholder.com/50' }}" alt="Avatar">
              </ion-avatar>
              <div class="ion-padding-start">
                <h6 class="mb-0 fw-bold user-name">{{ usuario.nombre }}</h6>
                {% if historias_propias and historias_propias.0.fecha_hora_creado %}
                <p class="mb-0 text-muted user-time">
                  Hace {{ historias_propias.0.fecha_hora_creado|timesince }}
                </p>
                {% endif %}
              </div>
            </div>

            <!-- Barras de progreso -->
            <div class="d-flex w-100 mt-3 progress-container">
              {% 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>
        </ion-toolbar>
      </ion-header>

      <ion-content class="ion-padding">
        <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 -->
              <ion-fab vertical="top" horizontal="end" slot="fixed">
                <ion-fab-button size="small">
                  <ion-icon name="ellipsis-vertical"></ion-icon>
                </ion-fab-button>
                <ion-fab-list side="bottom">
                  <ion-fab-button class="borrar-vistazo" data-id_estado="{{ story.id_estado }}">
                    <ion-icon name="trash"></ion-icon>
                  </ion-fab-button>
                </ion-fab-list>
              </ion-fab>
            </div>
            {% endfor %}
          </div>
        </div>
      </ion-content>
    </ng-template>
  </ion-modal>
</ion-content>
{% 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 type="module">
  import { IonModal } from 'https://cdn.jsdelivr.net/npm/@ionic/core/dist/ionic/ionic.esm.js';

  document.addEventListener("DOMContentLoaded", function () {
    const csrfToken = "{{ csrf_token }}";
    let isStoryModalOpen = false;

    // Ionic modal functions
    function setStoryModalOpen(isOpen) {
      isStoryModalOpen = isOpen;
    }

    function dismissModal() {
      const modal = document.querySelector('ion-modal');
      modal.dismiss();
    }

    function dismissPromotionModal() {
      const modal = document.querySelector('ion-modal[trigger="promotion-button"]');
      modal.dismiss();
    }

    /**************************************************************
     * 1. CARGA DE VISTAZOS DE SEGUIDOS (Miniaturas - AJAX)
     **************************************************************/
    $.ajax({
      url: "{% url 'ajax_obtener_vistazos' %}",
      type: "GET",
      beforeSend: function (xhr, type) {
        showLoading();
      },
      complete: function (data) {
        hideLoading();
      },
      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");
            mostrarVistazosSeguidos(userData);
          });
          seguidosContainer.append(segDiv);
        });
      },
      error: function (xhr, status, error) {
        console.error("Error al obtener vistazos de seguidos:", error);
      }
    });

    /**************************************************************
     * 2. Mostrar Tus Historias (Modal)
     **************************************************************/
    $("#misVistazosTrigger").on("click", function () {
      setStoryModalOpen(true);
    });

    /**************************************************************
     * 3. Función para Cargar Historias de Seguidos en el Modal
     **************************************************************/
    let globalSwiper = null;
    function mostrarVistazosSeguidos(usuarioSeguido) {
      setStoryModalOpen(true);

      // Actualizar la cabecera con datos del seguidor
      const userHeaderInfo = document.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
      const swiperWrapper = document.querySelector(".swiper-wrapper");
      swiperWrapper.innerHTML = "";
      const progressContainer = document.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;">
        `;
        }

        // Opciones de denuncia
        const fab = document.createElement("ion-fab");
        fab.setAttribute("vertical", "top");
        fab.setAttribute("horizontal", "end");
        fab.setAttribute("slot", "fixed");
        fab.innerHTML = `
          <ion-fab-button size="small">
            <ion-icon name="ellipsis-vertical"></ion-icon>
          </ion-fab-button>
          <ion-fab-list side="bottom">
            <ion-fab-button class="btn-denunciar-vistazo" data-id_estado="${historia.id_estado}">
              <ion-icon name="flag"></ion-icon>
            </ion-fab-button>
          </ion-fab-list>
        `;
        slide.appendChild(fab);
        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);
      });

      // Configurar Swiper
      initModalSwiper();
    }

    /**************************************************************
     * 4. Configurar Swiper y Barras de Progreso (15 seg)
     **************************************************************/
    function initModalSwiper() {
      const progressBars = document.querySelectorAll(".progress-bar");
      const SWIPE_DURATION = 15000;
      const swiperEl = document.querySelector(".swiper-container");

      if (globalSwiper) {
        globalSwiper.destroy();
        globalSwiper = null;
      }

      globalSwiper = new Swiper(swiperEl, {
        loop: false,
        allowTouchMove: false,
        autoplay: {
          delay: SWIPE_DURATION,
          disableOnInteraction: false,
        },
        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(() => {
              setStoryModalOpen(false);
            }, SWIPE_DURATION);
          }
        }
      });

      if (progressBars.length > 0) {
        progressBars[0].style.transition = `width ${SWIPE_DURATION}ms linear`;
        progressBars[0].style.width = "100%";
      }
    }

    /**************************************************************
     * 5. Cargar Publicaciones (AJAX)
     **************************************************************/
    function cargarPublicaciones() {
      $.ajax({
        url: "{% url 'obtener_publicaciones' %}",
        type: "GET",
        beforeSend: function (xhr, type) {
          showLoading();
        },
        complete: function (data) {
          hideLoading();
        },
        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);
          showAlert("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 = `
      <ion-card class="ion-margin-vertical">
        <ion-card-header>
          <ion-item lines="none">
            <ion-avatar slot="start">
              <img src="${avatar}" alt="Avatar">
            </ion-avatar>
            <ion-label>
              <h2>${nombreUsuario}</h2>
              <p>${publicacion?.fecha_hora_creacion} ${estadoPromocion ? `• ${estadoPromocion}` : ""}</p>
            </ion-label>
            <ion-buttons slot="end">
              <ion-button id="menu-button-${idPublicacion}">
                <ion-icon name="ellipsis-vertical" slot="icon-only"></ion-icon>
              </ion-button>
              <ion-popover trigger="menu-button-${idPublicacion}" dismiss-on-select="true">
                <ion-content>
                  <ion-list>
                    <ion-item button detail="false" class="btn-denunciar" data-id="${idPublicacion}">
                      <ion-icon name="flag" slot="start"></ion-icon>
                      <ion-label>Denunciar</ion-label>
                    </ion-item>
                  </ion-list>
                </ion-content>
              </ion-popover>
            </ion-buttons>
          </ion-item>
        </ion-card-header>
        
        <ion-card-content>
          <p>${textoPublicacion}</p>
          ${rutaImagen ? `
            <img src="${rutaImagen}" alt="Imagen Publicación" class="ion-margin-top" style="width: 100%; border-radius: 10px;">
          ` : ""}
          
          <div class="d-flex align-items-center gap-3 ion-margin-top">
            <ion-button fill="clear" class="btn-like ${isLiked ? "liked" : "unliked"}" data-id="${idPublicacion}">
              <ion-icon name="${isLiked ? "heart" : "heart-outline"}" slot="start" style="color: ${isLiked ? "red" : "var(--ion-color-medium)"};"></ion-icon>
              <ion-label>Me gusta</ion-label>
              <ion-badge slot="end">${contador_like}</ion-badge>
            </ion-button>
            
            <ion-button fill="clear" class="share-button" data-url="https://pedidos.nexushn.com/control/publicacion/${idPublicacion}">
              <ion-icon name="share-social" slot="start"></ion-icon>
              <ion-label>Compartir</ion-label>
            </ion-button>
          </div>
        </ion-card-content>
      </ion-card>
    `;
      $("#publicacionesContainer").prepend(publicacionHTML);
    }

    cargarPublicaciones();

    /**************************************************************
     * 6. Cargar Comercios Verificados (AJAX)
     **************************************************************/
    $.ajax({
      url: "{% url 'obtener_comercios_verificados' %}",
      type: "GET",
      data: { tipo: 0 },
      dataType: "json",
      beforeSend: function (xhr, type) {
        showLoading();
      },
      complete: function (data) {
        hideLoading();
      },
      success: function (response) {
        const lista = $("#listaComercios");
        lista.empty();

        if (response.success && response.data?.length > 0) {
          response.data?.forEach(function (comercio) {
            const calif = parseFloat(comercio?.calificacion);
            const califDisplay = Number.isNaN(calif)
              ? "0"
              : (Number.isInteger(calif) ? calif : calif.toFixed(1));

            const comercioHTML = `
            <ion-item>
              <ion-label>${comercio?.nombre}</ion-label>
              <ion-badge slot="end">
                <ion-icon name="star" style="color: var(--ion-color-warning);"></ion-icon>
                ${califDisplay}
              </ion-badge>
            </ion-item>
          `;
            lista.append(comercioHTML);
          });
        } else {
          lista.html('<ion-item><ion-label class="ion-text-center">No se encontraron comercios verificados.</ion-label></ion-item>');
        }
      },
      error: function (xhr, status, error) {
        console.error("Error al obtener los comercios:", error);
        $("#listaComercios").html('<ion-item><ion-label class="ion-text-center">Error al cargar los comercios.</ion-label></ion-item>');
      }
    });

    /**************************************************************
     * 7. Like / Compartir
     **************************************************************/
    $(document).on("click", ".btn-like", function () {
      const idPublicacion = $(this).data("id");
      const likeButton = $(this);
      const likeIcon = likeButton.find("ion-icon");
      const likeBadge = likeButton.find("ion-badge");

      $.ajax({
        url: "{% url 'update_likes' %}",
        type: "POST",
        headers: { "X-CSRFToken": "{{ csrf_token }}" },
        data: { id_publicaciones: idPublicacion },
        beforeSend: function (xhr, type) {
          showLoading();
        },
        complete: function (data) {
          hideLoading();
        },
        success: function (data) {
          let currentLikes = parseInt(likeBadge.text()) || 0;
          if (data.message == "Like anadido") {
            likeButton.addClass("liked").removeClass("unliked");
            likeIcon.attr("name", "heart").css("color", "red");
            currentLikes += 1;
          } else if (data.message == "Like eliminado") {
            likeButton.addClass("unliked").removeClass("liked");
            likeIcon.attr("name", "heart-outline").css("color", "var(--ion-color-medium)");
            currentLikes = Math.max(0, currentLikes - 1);
          }
          likeBadge.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">
          <ion-item>
            <ion-label>Tipo de Denuncia</ion-label>
            <ion-select id="denuncia-tipo" interface="popover">
              <ion-select-option value="Violento">Violento</ion-select-option>
              <ion-select-option value="CSAM">CSAM</ion-select-option>
              <ion-select-option value="Spam">Spam</ion-select-option>
              <ion-select-option value="Contenido inapropiado">Contenido inapropiado</ion-select-option>
            </ion-select>
          </ion-item>
          <ion-item>
            <ion-textarea id="denuncia-razon" placeholder="Escribe la razón de la denuncia..." rows="3"></ion-textarea>
          </ion-item>
        </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 },
            beforeSend: function (xhr, type) {
              showLoading();
            },
            complete: function (data) {
              hideLoading();
            },
            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">
          <ion-item>
            <ion-label>Tipo de Denuncia</ion-label>
            <ion-select id="denuncia-tipo" interface="popover">
              <ion-select-option value="Violento">Violento</ion-select-option>
              <ion-select-option value="CSAM">CSAM</ion-select-option>
              <ion-select-option value="Spam">Spam</ion-select-option>
              <ion-select-option value="Contenido inapropiado">Contenido inapropiado</ion-select-option>
            </ion-select>
          </ion-item>
          <ion-item>
            <ion-textarea id="denuncia-razon" placeholder="Escribe la razón de la denuncia..." rows="3"></ion-textarea>
          </ion-item>
        </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 },
            beforeSend: function (xhr, type) {
              showLoading();
            },
            complete: function (data) {
              hideLoading();
            },
            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").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,
        beforeSend: function (xhr, type) {
          showLoading();
        },
        complete: function (data) {
          hideLoading();
        },
        success: function (res) {
          if (res.save == 1) {
            Swal.fire("", "Publicación Creada!", "success");
            cargarPublicaciones();
            $("#texto-post").val("");
            $("#fileInput").val("");
            dismissModal();
          } else {
            showAlert("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",
      beforeSend: function (xhr, type) {
        showLoading();
      },
      complete: function (data) {
        hideLoading();
      },
      success: function (resp) {
        if (resp.success) {
          resp.data?.forEach(function (item) {
            const optionHTML = `
            <ion-col size="6">
              <ion-card class="promotion-option" data-promotion="${item?.nombre_tipo}">
                <ion-card-content class="ion-text-center">
                  <ion-icon name="${item?.icono}" style="font-size: 2rem;"></ion-icon>
                  <p class="ion-margin-top">${item?.nombre_tipo}</p>
                </ion-card-content>
              </ion-card>
            </ion-col>
          `;
            container.append(optionHTML);
          });
        } else {
          container.append('<ion-col size="12"><p class="text-danger">Error al cargar las opciones.</p></ion-col>');
        }
      },
      error: function () {
        container.append('<ion-col size="12"><p class="text-danger">No se pudieron cargar las opciones. Inténtalo más tarde.</p></ion-col>');
      }
    });

    $(document).on("click", ".promotion-option", function () {
      let promotionName = $(this).data("promotion");
      $("#promotion-status")
        .html(`<ion-icon name="megaphone"></ion-icon> - ${promotionName}`)
        .removeClass()
        .addClass("ion-padding-start ion-padding-end ion-padding-top ion-padding-bottom ion-color-warning ion-color-contrast");
      dismissPromotionModal();
    });

    $(".openModalInput").on("click", function () {
      const modal = document.querySelector('ion-modal[trigger="open-modal"]');
      modal.present();
    });

    // Helper functions
    function showLoading() {
      const loading = document.createElement('ion-loading');
      loading.message = 'Cargando...';
      document.body.appendChild(loading);
      loading.present();
    }

    function hideLoading() {
      const loading = document.querySelector('ion-loading');
      if (loading) {
        loading.dismiss();
      }
    }

    function showAlert(message) {
      const alert = document.createElement('ion-alert');
      alert.header = 'Atención';
      alert.message = message;
      alert.buttons = ['OK'];
      document.body.appendChild(alert);
      alert.present();
    }
  });
</script>
{% endblock %}