@extends('comunidad.layout.master')

@section('title', 'Educa Auge - Accede a los mejores cursos online para docentes')
{{-- @section('meta')
    <meta property="og:title" content="Bienvenido a EDUCA AUGE" />
    <meta property="og:description" content="Bienvenido a EDUCA AUGE" />
    <meta property="og:image" content="https://educaauge.com/assets/XMEB40.jpg" />
    <meta property="og:image:width" content="1200" />
    <meta property="og:image:height" content="630" />
    <meta property="og:url" content="{{ url()->current() }}" />
    <meta property="og:type" content="article" />
    <meta property="og:site_name" content="Educa Auge" />
    <meta name="twitter:card" content="summary_large_image" />
    <meta name="twitter:title" content="Bienvenido a EDUCA AUGE" />
    <meta name="twitter:description" content="Bienvenido a EDUCA AUGE" />
    <meta name="twitter:image" content="https://educaauge.com/assets/XMEB40.jpg" />
@endsection --}}
@section('styles')
    <link href="https://unpkg.com/filepond/dist/filepond.css" rel="stylesheet">
    <link href="https://unpkg.com/filepond-plugin-image-preview/dist/filepond-plugin-image-preview.css" rel="stylesheet">
    <link rel="stylesheet" href="{{ asset('assets/css/comunidad/index.css') }}">
    <style>

          /* Estilos para preview de archivos y botón de eliminación en overlay
              Comentario: añadidos para mostrar previews dentro del modal de publicación
              y proporcionar un botón de eliminar como overlay en la esquina superior derecha.
              (Cambio realizado por el equipo; fecha 2026-01-10) */
          .upload-preview {
            position: relative;
            background: #f5f5f5;
            /* Permitir que la imagen se muestre a su tamaño real y, si es muy alta,
               limitar la altura del contenedor y mostrar scroll vertical. */
            max-height: 600px;
            overflow: auto;
        }

        .upload-preview img,
        .upload-preview video {
            display: block;
            width: 100%;
            height: auto; /* usar tamaño natural (sin forzar altura fija) */
            border-radius: 8px;
        }

                /* Botón de eliminación que aparece como overlay sobre el preview
                     Comentario: se muestra en la esquina superior derecha del contenedor.
                     Al hacer clic se elimina el archivo de la lista de archivos seleccionados.
                 */
                .upload-remove-btn {
            position: absolute;
            top: 8px;
            right: 8px;
            background: rgba(0,0,0,0.6);
            color: #fff;
            border: none;
            width: 30px;
            height: 30px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            box-shadow: 0 2px 6px rgba(0,0,0,0.2);
            font-weight: 600;
        }

        .upload-remove-btn:hover {
            background: rgba(0,0,0,0.8);
        }

        /* Video wrapper + overlay play button to avoid native controls menu */
        .video-wrapper {
            position: relative;
            display: block;
            overflow: hidden;
            border-radius: 8px;
            background: #000;
        }
        .video-wrapper .custom-video {
            display: block;
            width: 100%;
            height: auto;
            background: #000;
        }
        .play-overlay {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: rgba(0,0,0,0.5);
            color: #fff;
            border: none;
            width: 56px;
            height: 56px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            font-size: 20px;
        }
        .play-overlay:hover { background: rgba(0,0,0,0.6); }
        .play-overlay-medium { width: 64px; height: 64px; font-size: 22px; }

        /* Modal custom play button */
        .modal-play-btn {
            position: absolute;
            bottom: 18px;
            left: 18px;
            z-index: 40;
            background: rgba(0,0,0,0.6);
            color: #fff;
            border: none;
            width: 44px;
            height: 44px;
            border-radius: 6px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
        }

        /* Custom video controls (play/pause + progress) */
        .video-controls {
            position: relative;
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 8px;
            background: rgba(0,0,0,0.6);
            color: #fff;
            border-radius: 6px;
            margin-top: 6px;
        }
        .video-controls .vc-play {
            background: transparent;
            border: none;
            color: #fff;
            font-size: 16px;
            width: 34px;
            height: 34px;
            border-radius: 4px;
            cursor: pointer;
        }
        .video-controls .vc-progress {
            -webkit-appearance: none;
            appearance: none;
            width: 100%;
            height: 6px;
            background: rgba(255,255,255,0.2);
            border-radius: 3px;
            cursor: pointer;
        }
        /* Accent color for controls (change this variable to customize) */
        .video-controls { --vc-accent: #d31c1c; }

        /* WebKit (Chrome, Edge, Safari) */
        .video-controls .vc-progress::-webkit-slider-runnable-track {
            height: 6px;
            background: rgba(255,255,255,0.12);
            border-radius: 3px;
        }
        .video-controls .vc-progress::-webkit-slider-thumb {
            -webkit-appearance: none;
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background: var(--vc-accent);
            margin-top: -3px;
            box-shadow: 0 0 0 4px rgba(0,0,0,0.15);
            cursor: pointer;
        }

        /* Firefox */
        .video-controls .vc-progress::-moz-range-track {
            height: 6px;
            background: rgba(255,255,255,0.12);
            border-radius: 3px;
        }
        .video-controls .vc-progress::-moz-range-thumb {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background: var(--vc-accent);
            border: none;
            cursor: pointer;
        }

        /* IE/Edge Legacy */
        .video-controls .vc-progress::-ms-track { background: transparent; border-color: transparent; color: transparent; }
        .video-controls .vc-progress::-ms-fill-lower { background: rgba(255,255,255,0.12); border-radius: 3px; }
        .video-controls .vc-progress::-ms-fill-upper { background: rgba(255,255,255,0.12); border-radius: 3px; }
        .video-controls .vc-progress::-ms-thumb { width: 12px; height: 12px; border-radius: 50%; background: var(--vc-accent); cursor: pointer; }
        .video-controls .vc-progress:focus { outline: none; }
        .video-controls .vc-time {
            font-size: 12px;
            white-space: nowrap;
        }
        .video-controls .vc-fullscreen {
            background: transparent;
            border: none;
            color: #fff;
            font-size: 16px;
            width: 34px;
            height: 34px;
            border-radius: 4px;
            cursor: pointer;
        }
        .video-controls .vc-volume {
            background: transparent;
            border: none;
            color: #fff;
            font-size: 16px;
            width: 34px;
            height: 34px;
            border-radius: 4px;
            cursor: pointer;
        }

    </style>
@endsection

@section('content')
    <main class="page-main">

        <div class="uk-container principal">
            <div class="uk-grid uk-child-width-expand@m uk-margin" uk-grid>
                <!-- COLUMNA IZQUIERDA -->
                <div>

                    <!-- Caja de publicación -->
                    @if (session()->has('suscrito') && session('suscrito')['user'])
                        <div class="publicacion-header">
                            <img class="avatar-publicacion"
                                src="{{ session('suscrito')['user']->imagen ? asset('imagenes_usuarios/' . session('suscrito')['user']->imagen) : 'https://www.gravatar.com/avatar/' . md5(strtolower(trim(session('suscrito')['user']->email))) . '?s=256&d=mp' }}"
                                alt="Foto de Perfil">
                            <a href="#modal-publicar" uk-toggle class="link-publicar">¿Qué estás pensando,
                                {{ session('suscrito')['nombre'] }}?</a>
                        </div>

                        <div id="modal-publicar" uk-modal>
                            <div class="uk-modal-dialog uk-modal-body">
                                <button class="uk-modal-close-default" type="button" uk-close></button>
                                <h4 class="uk-modal-title uk-margin-remove-bottom">Crear publicación</h4>

                                <div class="uk-overflow-auto"
                                    style="max-height: 70vh; padding-right: 5px; margin-top: 15px;">
                                    <form id="form-publicacion" enctype="multipart/form-data">
                                        @csrf
                                        <!-- Usuario info -->
                                        <div class="uk-flex uk-flex-middle uk-margin-small-bottom">
                                            <img class="avatar-publicacion"
                                                src="{{ session('suscrito')['user']->imagen ? asset('imagenes_usuarios/' . session('suscrito')['user']->imagen) : 'https://www.gravatar.com/avatar/' . md5(strtolower(trim(session('suscrito')['user']->email))) . '?s=256&d=mp' }}"
                                                alt="Foto de Perfil">
                                            <div class="uk-margin-small-left nombre-perfil">
                                                {{ session('suscrito')['user']->nombre }}
                                                {{ session('suscrito')['user']->ap_pa }}
                                            </div>
                                        </div>

                                        <!-- Campo título (opcional) -->
                                        {{-- <input type="text" name="titulo" id="titulo-publicacion" class="uk-input uk-margin-small-bottom" placeholder="Título (opcional)" style="border: none; font-size: 18px; font-weight: 600; padding: 0;"> --}}

                                        <!-- Campo descripción -->
                                        <textarea name="contenido" id="contenido-publicacion" class="uk-textarea uk-margin-small-bottom contenido-tarea"
                                            rows="4" placeholder="¿Qué estás pensando, {{ session('suscrito')['user']->nombre }}?" required></textarea>

                                        <!-- Contenedor dinámico -->
                                        <div id="upload-container"></div>
                                        <input type="file" name="archivos[]" id="archivos-publicacion" multiple
                                            style="display: none;" accept="image/*,video/*,.pdf,.doc,.docx,.zip,.txt">

                                        <!-- Barra de botones -->
                                        <div class="uk-padding-small"
                                            style="border: 1px solid #e4e6eb; border-radius: 8px; margin-top: 10px;">
                                            <div class="uk-flex uk-flex-between uk-flex-middle">
                                                <span class="nombre-perfil uk-text-small">Agregar a tu publicación</span>
                                                <div class="uk-flex uk-flex-middle" style="gap: 5px;">
                                                    <button type="button" class="uk-icon-button"
                                                        style="background: transparent;" uk-icon="icon: image; ratio: 1.2"
                                                        title="Agregar imagen" onclick="mostrarUpload('imagen')"></button>
                                                    <button type="button" class="uk-icon-button"
                                                        style="background: transparent;"
                                                        uk-icon="icon: video-camera; ratio: 1.2" title="Agregar video"
                                                        onclick="mostrarUpload('video')"></button>
                                                    <button type="button" class="uk-icon-button"
                                                        style="background: transparent;"
                                                        uk-icon="icon: file-text; ratio: 1.2" title="Agregar archivo"
                                                        onclick="mostrarUpload('archivo')"></button>
                                                </div>
                                            </div>
                                        </div>

                                        <button type="submit"
                                            class="uk-button uk-button-primary uk-width-1-1 uk-margin-small-top"
                                            id="btn-publicar"
                                            style="border-radius: 8px; font-weight: 600;">Publicar</button>
                                    </form>
                                </div>
                            </div>
                        </div>

                        <!-- Modal para editar publicación -->
                        <div id="modal-editar" uk-modal>
                            <div class="uk-modal-dialog uk-modal-body" style="max-width: 600px;">
                                <button class="uk-modal-close-default" type="button" uk-close></button>
                                <h4 class="uk-modal-title uk-margin-remove-bottom">Editar publicación</h4>

                                <div class="uk-overflow-auto"
                                    style="max-height: 70vh; padding-right: 5px; margin-top: 15px;">
                                    <form id="form-editar-publicacion">
                                        @csrf
                                        <input type="hidden" id="editar-id-publicacion">

                                        <!-- Usuario info -->
                                        <div class="uk-flex uk-flex-middle uk-margin-small-bottom">
                                            <img class="avatar-publicacion"
                                                src="{{ session('suscrito')['user']->imagen ? asset('imagenes_usuarios/' . session('suscrito')['user']->imagen) : 'https://www.gravatar.com/avatar/' . md5(strtolower(trim(session('suscrito')['user']->email))) . '?s=256&d=mp' }}"
                                                alt="Foto de Perfil">
                                            <div class="uk-margin-small-left">
                                                <strong>{{ session('suscrito')['user']->nombre }}
                                                    {{ session('suscrito')['user']->ap_pa }}</strong>
                                            </div>
                                        </div>

                                        <!-- Campo título (opcional) -->
                                        {{-- <input type="text" name="titulo" id="editar-titulo-publicacion" class="uk-input uk-margin-small-bottom" placeholder="Título (opcional)" style="border: none; font-size: 18px; font-weight: 600; padding: 0;"> --}}

                                        <!-- Campo descripción -->
                                        <textarea name="contenido" id="editar-contenido-publicacion" class="uk-textarea uk-margin-small-bottom contenido-tarea"
                                            rows="4" placeholder="¿Qué estás pensando?" required></textarea>

                                        <!-- Contenedor de archivos existentes (preview) -->
                                        <div id="upload-container-editar" class="uk-margin-small-top"></div>
                                        <!-- Input para seleccionar archivos nuevos al editar (oculto) -->
                                        <input type="file" name="archivos_editar[]" id="archivos-editar" multiple
                                            style="display: none;" accept="image/*,video/*,.pdf,.doc,.docx,.zip,.txt">

                                        <!-- Botones para agregar archivos en el modal de editar (igual que crear) -->
                                        <div class="uk-padding-small" style="border: 1px solid #e4e6eb; border-radius: 8px; margin-top: 10px;">
                                            <div class="uk-flex uk-flex-between uk-flex-middle">
                                                <span class="nombre-perfil uk-text-small">Agregar/Modificar archivos</span>
                                                <div class="uk-flex uk-flex-middle" style="gap: 5px;">
                                                    <button type="button" class="uk-icon-button" style="background: transparent;" uk-icon="icon: image; ratio: 1.2" title="Agregar imagen" onclick="mostrarUploadEditar('imagen')"></button>
                                                    <button type="button" class="uk-icon-button" style="background: transparent;" uk-icon="icon: video-camera; ratio: 1.2" title="Agregar video" onclick="mostrarUploadEditar('video')"></button>
                                                    <button type="button" class="uk-icon-button" style="background: transparent;" uk-icon="icon: file-text; ratio: 1.2" title="Agregar archivo" onclick="mostrarUploadEditar('archivo')"></button>
                                                </div>
                                            </div>
                                        </div>

                                        <button type="submit"
                                            class="uk-button uk-button-primary uk-width-1-1 uk-margin-small-top"
                                            id="btn-actualizar"
                                            style="border-radius: 8px; font-weight: 600;">Actualizar</button>
                                    </form>
                                </div>
                            </div>
                        </div>

                        <!-- Modal Compartir -->
                        <div id="modal-compartir" uk-modal>
                            <div class="uk-modal-dialog uk-modal-body uk-border-rounded">
                                <button class="uk-modal-close-default" type="button" uk-close></button>
                                <h2 class="uk-modal-title uk-text-center uk-margin-remove-bottom">Comparte esta publicación
                                    con tus amigos</h2>

                                <div class="uk-grid-small uk-child-width-1-4 uk-text-center uk-margin-medium-top" uk-grid>
                                    <div>
                                        <a href="#" id="share-whatsapp" target="_blank" class="uk-link-reset"
                                            onclick="registrarCompartido('whatsapp')">
                                            <div class="uk-border-circle uk-flex uk-flex-center uk-flex-middle uk-margin-auto"
                                                style="width: 50px; height: 50px; background: #25D366; color: white;">
                                                <i class="fab fa-whatsapp fa-lg"></i>
                                            </div>
                                            <span
                                                class="uk-text-small uk-display-block uk-margin-small-top">WhatsApp</span>
                                        </a>
                                    </div>
                                    <div>
                                        <a href="#" id="share-facebook" target="_blank" class="uk-link-reset"
                                            onclick="registrarCompartido('facebook')">
                                            <div class="uk-border-circle uk-flex uk-flex-center uk-flex-middle uk-margin-auto"
                                                style="width: 50px; height: 50px; background: #1877F2; color: white;">
                                                <i class="fab fa-facebook-f fa-lg"></i>
                                            </div>
                                            <span
                                                class="uk-text-small uk-display-block uk-margin-small-top">Facebook</span>
                                        </a>
                                    </div>
                                    <div>
                                        <a href="#" id="share-twitter" target="_blank" class="uk-link-reset"
                                            onclick="registrarCompartido('twitter')">
                                            <div class="uk-border-circle uk-flex uk-flex-center uk-flex-middle uk-margin-auto"
                                                style="width: 50px; height: 50px; background: #1DA1F2; color: white;">
                                                <i class="fab fa-twitter fa-lg"></i>
                                            </div>
                                            <span class="uk-text-small uk-display-block uk-margin-small-top">Twitter</span>
                                        </a>
                                    </div>
                                    <div>
                                        <a href="#" id="share-linkedin" target="_blank" class="uk-link-reset"
                                            onclick="registrarCompartido('linkedin')">
                                            <div class="uk-border-circle uk-flex uk-flex-center uk-flex-middle uk-margin-auto"
                                                style="width: 50px; height: 50px; background: #0A66C2; color: white;">
                                                <i class="fab fa-linkedin-in fa-lg"></i>
                                            </div>
                                            <span
                                                class="uk-text-small uk-display-block uk-margin-small-top">LinkedIn</span>
                                        </a>
                                    </div>
                                </div>

                                <div class="uk-margin-medium-top">
                                    <p class="uk-text-small uk-text-bold uk-margin-small-bottom">Copiar enlace</p>
                                    <div class="en-linea-compartir">
                                        <a href="#" onclick="copiarEnlaceModal()" uk-icon="icon: copy"
                                            title="Copiar" class="icono-copiar">
                                        </a>

                                        <input class="uk-input uk-border-rounded" type="text" id="input-share-link"
                                            readonly>
                                    </div>

                                </div>
                            </div>
                        </div>
                    @endif
                    <!-- Sección Destacado -->
                    <div class="fondo-modelo" id="seccion-destacados" style="display: none;">
                        <h4 class="titulo_destacado">Destacado</h4>
                        <div class="uk-position-relative uk-visible-toggle uk-light destacado-carousel" tabindex="-1"
                            uk-slider>
                            <ul class="uk-slider-items uk-child-width-1-2@s uk-grid-small"
                                id="lista-destacados">
                                <!-- Items dinámicos -->
                            </ul>

                            <a class="uk-position-center-left uk-position-small flecha" href="#"
                                uk-slidenav-previous uk-slider-item="previous"></a>
                            <a class="uk-position-center-right uk-position-small flecha" href="#" uk-slidenav-next
                                uk-slider-item="next"></a>
                        </div>
                    </div>

                    <!-- Contenedor de publicaciones -->
                    <div id="contenedor-publicaciones">
                        <div class="uk-text-center uk-margin">
                            <div uk-spinner></div>
                            <p>Cargando publicaciones...</p>
                        </div>
                    </div>
                    <!-- Sentinel para infinite scroll -->
                    <div id="scroll-sentinel" class="uk-text-center uk-margin-small-top"></div>
                </div>

                <!-- COLUMNA DERECHA -->
                <div class="uk-width-1-3@m">

                    <div class="destacado-card ranking-card card-position">
                        <h4 class="titulo_ranking">Tabla de clasificación (30 días)</h4>
                        <div class="ranking-list" id="ranking-list">
                            <div class="uk-text-center uk-margin-small">
                                <div uk-spinner></div>
                            </div>
                        </div>

                        <div class="link-derecho uk-text-center">
                            <a href="{{ url('/comunidad/clasificacion') }}" class="titulo-calificacion">Ver
                                todas las clasificaciones</a>
                            <a href="https://whatsapp.com/channel/0029VaFViED8V0toD7jgT30z"
                                class="uk-button btn-whatsapp uk-margin-small-top" target="_blank">Únete a nuestro canal
                                de Whatsapp</a>
                            <a href="https://t.me/grupoauge" class="uk-button btn-telegram uk-margin-small-top"
                                target="_blank">Únete a nuestro canal de Telegram</a>
                        </div>
                    </div>
                </div>
            </div>



        </div>
    </main>

    <!-- (Modal eliminado: restaurando comportamiento anterior con overlay que reproduce inline) -->

    <script>
        const idSuscrito = @json($idSuscrito ?? null);
        let archivosSeleccionados = [];
        // Para el modal de editar: archivos nuevos seleccionados y archivos marcados para eliminar
        let archivosNuevosEditar = [];
        let archivosAEliminar = []; // contendrá ids de archivos en el servidor a eliminar
        let archivosAutoMarcados = []; // ids marcados automáticamente al subir nuevos (para poder revertir)
        
        // Variables para paginado / infinite scroll
        let currentPage = 1;
        let perPage = 5;
        let isLoadingPublicaciones = false;
        let noMorePages = false;
        let observerPublicaciones = null;

        // Simple MD5 function for Gravatar
        function md5(string) {
            function rotateLeft(lValue, iShiftBits) {
                return (lValue << iShiftBits) | (lValue >>> (32 - iShiftBits));
            }

            function addUnsigned(lX, lY) {
                const lX8 = (lX & 0x80000000);
                const lY8 = (lY & 0x80000000);
                const lX4 = (lX & 0x40000000);
                const lY4 = (lY & 0x40000000);
                const lResult = (lX & 0x3FFFFFFF) + (lY & 0x3FFFFFFF);
                if (lX4 & lY4) return (lResult ^ 0x80000000 ^ lX8 ^ lY8);
                if (lX4 | lY4) {
                    if (lResult & 0x40000000) return (lResult ^ 0xC0000000 ^ lX8 ^ lY8);
                    else return (lResult ^ 0x40000000 ^ lX8 ^ lY8);
                } else return (lResult ^ lX8 ^ lY8);
            }

            function F(x, y, z) {
                return (x & y) | ((~x) & z);
            }

            function G(x, y, z) {
                return (x & z) | (y & (~z));
            }

            function H(x, y, z) {
                return (x ^ y ^ z);
            }

            function I(x, y, z) {
                return (y ^ (x | (~z)));
            }

            function FF(a, b, c, d, x, s, ac) {
                a = addUnsigned(a, addUnsigned(addUnsigned(F(b, c, d), x), ac));
                return addUnsigned(rotateLeft(a, s), b);
            }

            function GG(a, b, c, d, x, s, ac) {
                a = addUnsigned(a, addUnsigned(addUnsigned(G(b, c, d), x), ac));
                return addUnsigned(rotateLeft(a, s), b);
            }

            function HH(a, b, c, d, x, s, ac) {
                a = addUnsigned(a, addUnsigned(addUnsigned(H(b, c, d), x), ac));
                return addUnsigned(rotateLeft(a, s), b);
            }

            function II(a, b, c, d, x, s, ac) {
                a = addUnsigned(a, addUnsigned(addUnsigned(I(b, c, d), x), ac));
                return addUnsigned(rotateLeft(a, s), b);
            }

            function convertToWordArray(string) {
                let lWordCount;
                const lMessageLength = string.length;
                const lNumberOfWords_temp1 = lMessageLength + 8;
                const lNumberOfWords_temp2 = (lNumberOfWords_temp1 - (lNumberOfWords_temp1 % 64)) / 64;
                const lNumberOfWords = (lNumberOfWords_temp2 + 1) * 16;
                const lWordArray = Array(lNumberOfWords - 1);
                let lBytePosition = 0;
                let lByteCount = 0;
                while (lByteCount < lMessageLength) {
                    lWordCount = (lByteCount - (lByteCount % 4)) / 4;
                    lBytePosition = (lByteCount % 4) * 8;
                    lWordArray[lWordCount] = (lWordArray[lWordCount] | (string.charCodeAt(lByteCount) << lBytePosition));
                    lByteCount++;
                }
                lWordCount = (lByteCount - (lByteCount % 4)) / 4;
                lBytePosition = (lByteCount % 4) * 8;
                lWordArray[lWordCount] = lWordArray[lWordCount] | (0x80 << lBytePosition);
                lWordArray[lNumberOfWords - 2] = lMessageLength << 3;
                lWordArray[lNumberOfWords - 1] = lMessageLength >>> 29;
                return lWordArray;
            }

            function wordToHex(lValue) {
                let wordToHexValue = "",
                    wordToHexValue_temp = "",
                    lByte, lCount;
                for (lCount = 0; lCount <= 3; lCount++) {
                    lByte = (lValue >>> (lCount * 8)) & 255;
                    wordToHexValue_temp = "0" + lByte.toString(16);
                    wordToHexValue = wordToHexValue + wordToHexValue_temp.substr(wordToHexValue_temp.length - 2, 2);
                }
                return wordToHexValue;
            }
            let x = Array();
            let k, AA, BB, CC, DD, a, b, c, d;
            const S11 = 7,
                S12 = 12,
                S13 = 17,
                S14 = 22;
            const S21 = 5,
                S22 = 9,
                S23 = 14,
                S24 = 20;
            const S31 = 4,
                S32 = 11,
                S33 = 16,
                S34 = 23;
            const S41 = 6,
                S42 = 10,
                S43 = 15,
                S44 = 21;
            x = convertToWordArray(string);
            a = 0x67452301;
            b = 0xEFCDAB89;
            c = 0x98BADCFE;
            d = 0x10325476;
            for (k = 0; k < x.length; k += 16) {
                AA = a;
                BB = b;
                CC = c;
                DD = d;
                a = FF(a, b, c, d, x[k + 0], S11, 0xD76AA478);
                d = FF(d, a, b, c, x[k + 1], S12, 0xE8C7B756);
                c = FF(c, d, a, b, x[k + 2], S13, 0x242070DB);
                b = FF(b, c, d, a, x[k + 3], S14, 0xC1BDCEEE);
                a = FF(a, b, c, d, x[k + 4], S11, 0xF57C0FAF);
                d = FF(d, a, b, c, x[k + 5], S12, 0x4787C62A);
                c = FF(c, d, a, b, x[k + 6], S13, 0xA8304613);
                b = FF(b, c, d, a, x[k + 7], S14, 0xFD469501);
                a = FF(a, b, c, d, x[k + 8], S11, 0x698098D8);
                d = FF(d, a, b, c, x[k + 9], S12, 0x8B44F7AF);
                c = FF(c, d, a, b, x[k + 10], S13, 0xFFFF5BB1);
                b = FF(b, c, d, a, x[k + 11], S14, 0x895CD7BE);
                a = FF(a, b, c, d, x[k + 12], S11, 0x6B901122);
                d = FF(d, a, b, c, x[k + 13], S12, 0xFD987193);
                c = FF(c, d, a, b, x[k + 14], S13, 0xA679438E);
                b = FF(b, c, d, a, x[k + 15], S14, 0x49B40821);
                a = GG(a, b, c, d, x[k + 1], S21, 0xF61E2562);
                d = GG(d, a, b, c, x[k + 6], S22, 0xC040B340);
                c = GG(c, d, a, b, x[k + 11], S23, 0x265E5A51);
                b = GG(b, c, d, a, x[k + 0], S24, 0xE9B6C7AA);
                a = GG(a, b, c, d, x[k + 5], S21, 0xD62F105D);
                d = GG(d, a, b, c, x[k + 10], S22, 0x2441453);
                c = GG(c, d, a, b, x[k + 15], S23, 0xD8A1E681);
                b = GG(b, c, d, a, x[k + 4], S24, 0xE7D3FBC8);
                a = GG(a, b, c, d, x[k + 9], S21, 0x21E1CDE6);
                d = GG(d, a, b, c, x[k + 14], S22, 0xC33707D6);
                c = GG(c, d, a, b, x[k + 3], S23, 0xF4D50D87);
                b = GG(b, c, d, a, x[k + 8], S24, 0x455A14ED);
                a = GG(a, b, c, d, x[k + 13], S21, 0xA9E3E905);
                d = GG(d, a, b, c, x[k + 2], S22, 0xFCEFA3F8);
                c = GG(c, d, a, b, x[k + 7], S23, 0x676F02D9);
                b = GG(b, c, d, a, x[k + 12], S24, 0x8D2A4C8A);
                a = HH(a, b, c, d, x[k + 5], S31, 0xFFFA3942);
                d = HH(d, a, b, c, x[k + 8], S32, 0x8771F681);
                c = HH(c, d, a, b, x[k + 11], S33, 0x6D9D6122);
                b = HH(b, c, d, a, x[k + 14], S34, 0xFDE5380C);
                a = HH(a, b, c, d, x[k + 1], S31, 0xA4BEEA44);
                d = HH(d, a, b, c, x[k + 4], S32, 0x4BDECFA9);
                c = HH(c, d, a, b, x[k + 7], S33, 0xF6BB4B60);
                b = HH(b, c, d, a, x[k + 10], S34, 0xBEBFBC70);
                a = HH(a, b, c, d, x[k + 13], S31, 0x289B7EC6);
                d = HH(d, a, b, c, x[k + 0], S32, 0xEAA127FA);
                c = HH(c, d, a, b, x[k + 3], S33, 0xD4EF3085);
                b = HH(b, c, d, a, x[k + 6], S34, 0x4881D05);
                a = HH(a, b, c, d, x[k + 9], S31, 0xD9D4D039);
                d = HH(d, a, b, c, x[k + 12], S32, 0xE6DB99E5);
                c = HH(c, d, a, b, x[k + 15], S33, 0x1FA27CF8);
                b = HH(b, c, d, a, x[k + 2], S34, 0xC4AC5665);
                a = II(a, b, c, d, x[k + 0], S41, 0xF4292244);
                d = II(d, a, b, c, x[k + 7], S42, 0x432AFF97);
                c = II(c, d, a, b, x[k + 14], S43, 0xAB9423A7);
                b = II(b, c, d, a, x[k + 5], S44, 0xFC93A039);
                a = II(a, b, c, d, x[k + 12], S41, 0x655B59C3);
                d = II(d, a, b, c, x[k + 3], S42, 0x8F0CCC92);
                c = II(c, d, a, b, x[k + 10], S43, 0xFFEFF47D);
                b = II(b, c, d, a, x[k + 1], S44, 0x85845DD1);
                a = II(a, b, c, d, x[k + 8], S41, 0x6FA87E4F);
                d = II(d, a, b, c, x[k + 15], S42, 0xFE2CE6E0);
                c = II(c, d, a, b, x[k + 6], S43, 0xA3014314);
                b = II(b, c, d, a, x[k + 13], S44, 0x4E0811A1);
                a = II(a, b, c, d, x[k + 4], S41, 0xF7537E82);
                d = II(d, a, b, c, x[k + 11], S42, 0xBD3AF235);
                c = II(c, d, a, b, x[k + 2], S43, 0x2AD7D2BB);
                b = II(b, c, d, a, x[k + 9], S44, 0xEB86D391);
                a = addUnsigned(a, AA);
                b = addUnsigned(b, BB);
                c = addUnsigned(c, CC);
                d = addUnsigned(d, DD);
            }
            return (wordToHex(a) + wordToHex(b) + wordToHex(c) + wordToHex(d)).toLowerCase();
        }

        // Cargar publicaciones al iniciar y activar infinite scroll
        document.addEventListener('DOMContentLoaded', function() {
            cargarPagina(1, false);
            initInfiniteScroll();
            cargarRanking();
            cargarDestacados();
        });

        // Función para eliminar publicación
        async function eliminarPublicacion(idPublicacion) {
            const result = await Swal.fire({
                title: '¿Estás seguro?',
                text: "Esta acción no se puede deshacer",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#d33',
                cancelButtonColor: '#3085d6',
                confirmButtonText: 'Sí, eliminar',
                cancelButtonText: 'Cancelar'
            });

            if (result.isConfirmed) {
                try {
                    const response = await fetch(`{{ url('api/comunidad/publicaciones') }}/${idPublicacion}`, {
                        method: 'DELETE',
                        headers: {
                            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
                        }
                    });

                    const data = await response.json();

                    if (data.success) {
                        Swal.fire('Eliminado', 'La publicación ha sido eliminada', 'success');
                        cargarPagina(1, false);
                        cargarRanking();
                    } else {
                        Swal.fire('Error', data.message || 'Error al eliminar publicación', 'error');
                    }
                } catch (error) {
                    Swal.fire('Error', 'Error al conectar con el servidor', 'error');
                }
            }
        }




        // Función para abrir modal de editar
        // Función: abrirModalEditar
        // Comentario: Modificada para además aceptar un parámetro opcional `archivosEncoded`
        // (JSON codificado) que contiene los archivos asociados a la publicación. Si se
        // proporciona, se usan esos datos para mostrar previews inmediatamente y evitar
        // una llamada extra al servidor. Si no, se intenta hacer fetch como fallback.
        async function abrirModalEditar(idPublicacion, contenido, titulo = '', archivosEncoded = null) {
            document.getElementById('editar-id-publicacion').value = idPublicacion;
            // Título es opcional - verificar si el campo existe
            const editarTituloField = document.getElementById('editar-titulo-publicacion');
            if (editarTituloField) {
                editarTituloField.value = titulo || '';
            }
            document.getElementById('editar-contenido-publicacion').value = contenido;

            // Limpiar contenedor de archivos del modal de editar
            const contEditar = document.getElementById('upload-container-editar');
            if (contEditar) contEditar.innerHTML = '';

            // Si recibimos archivos codificados desde el HTML, usarlos directamente
            if (archivosEncoded) {
                try {
                    const archivos = JSON.parse(decodeURIComponent(archivosEncoded));
                    if (archivos && archivos.length > 0) {
                        mostrarPreviewArchivosEditar(archivos);
                    }
                } catch (err) {
                    console.error('Error parseando archivosEncoded:', err);
                }
            } else {
                // Fallback: intentar solicitar archivos al servidor si no se pasaron
                try {
                    const resp = await fetch(`{{ url('api/comunidad/publicaciones') }}/${idPublicacion}`);
                    if (resp.ok) {
                        const data = await resp.json();
                        if (data && data.archivos && data.archivos.length > 0) {
                            mostrarPreviewArchivosEditar(data.archivos);
                        }
                    }
                } catch (err) {
                    // No consideramos esto bloqueante, solo registramos
                    console.error('No se pudieron cargar archivos para editar:', err);
                }
            }

            // Cerrar dropdowns abiertos (por ejemplo el menú de opciones) para
            // evitar que queden sobre el modal de edición.
            document.querySelectorAll('[uk-dropdown]').forEach(el => {
                if (el.classList.contains('uk-open')) {
                    try {
                        UIkit.dropdown(el).hide();
                    } catch (e) {
                        // Fallback: quitar clase para cerrar visualmente
                        el.classList.remove('uk-open');
                    }
                }
            });

            UIkit.modal('#modal-editar').show();
        }

        // Formulario de editar publicación
        // Envío del formulario de edición: ahora soporta subir archivos nuevos
        // y enviar la lista de archivos a eliminar (`archivosAEliminar`).
        document.getElementById('form-editar-publicacion')?.addEventListener('submit', async function(e) {
            e.preventDefault();

            const idPublicacion = document.getElementById('editar-id-publicacion').value;

            // Título es opcional - verificar si el campo existe
            const editarTituloField = document.getElementById('editar-titulo-publicacion');
            const titulo = editarTituloField ? editarTituloField.value.trim() : '';

            const contenido = document.getElementById('editar-contenido-publicacion').value;

            const btn = document.getElementById('btn-actualizar');
            btn.disabled = true;
            btn.textContent = 'Actualizando...';

            try {
                const formData = new FormData();
                formData.append('_method', 'PUT'); // method spoofing
                formData.append('_token', document.querySelector('meta[name="csrf-token"]').content);
                formData.append('titulo', titulo);
                formData.append('contenido', contenido);

                // Añadir nuevos archivos seleccionados en el modal de editar
                archivosNuevosEditar.forEach((file) => {
                    formData.append('archivos[]', file);
                });

                // Añadir lista de IDs a eliminar (si hay)
                if (archivosAEliminar.length > 0) {
                    archivosAEliminar.forEach(idArchivo => formData.append('archivos_eliminar[]', idArchivo));
                }

                const response = await fetch(`{{ url('api/comunidad/publicaciones') }}/${idPublicacion}`, {
                    method: 'POST',
                    body: formData,
                    // No establecer Content-Type: fetch lo hace automáticamente para FormData
                });

                const data = await response.json();

                if (data.success) {
                    UIkit.modal('#modal-editar').hide();
                    // limpiar arrays locales
                    archivosNuevosEditar = [];
                    archivosAEliminar = [];

                    // Reemplazar la publicación en el DOM si existe, sino prepender
                    try {
                        const cont = document.getElementById('contenedor-publicaciones');
                        const existing = document.getElementById('publicacion-' + idPublicacion);
                        if (existing && data.publicacion) {
                            existing.replaceWith(crearElementoPublicacion(data.publicacion));
                        } else if (data.publicacion) {
                            cont.prepend(crearElementoPublicacion(data.publicacion));
                        } else {
                            // fallback: recargar la primera página
                            cargarPagina(1, false);
                        }
                    } catch (e) {
                        cargarPagina(1, false);
                    }

                    Swal.fire('¡Éxito!', 'Publicación actualizada correctamente', 'success');
                } else {
                    Swal.fire('Error', data.message || 'Error al actualizar publicación', 'error');
                }
            } catch (error) {
                Swal.fire('Error', 'Error al conectar con el servidor', 'error');
            } finally {
                btn.disabled = false;
                btn.textContent = 'Actualizar';
            }
        });

        // Funciones para manejar publicación
        function mostrarUpload(tipo) {
            const tipos = {
                imagen: {
                    accept: 'image/*'
                },
                video: {
                    accept: 'video/*'
                },
                archivo: {
                    accept: '.pdf,.doc,.docx,.zip,.txt'
                }
            };

            const input = document.getElementById('archivos-publicacion');
            input.accept = tipos[tipo].accept;
            input.click();

            input.onchange = function(e) {
                archivosSeleccionados = Array.from(e.target.files);
                mostrarPreviewArchivos(archivosSeleccionados);
            };
        }

        // Función para el modal de editar: seleccionar archivos nuevos
        function mostrarUploadEditar(tipo) {
            const tipos = {
                imagen: { accept: 'image/*' },
                video: { accept: 'video/*' },
                archivo: { accept: '.pdf,.doc,.docx,.zip,.txt' }
            };

            const input = document.getElementById('archivos-editar');
            if (!input) return;
            input.accept = tipos[tipo].accept;
            input.click();

            input.onchange = function(e) {
                archivosNuevosEditar = Array.from(e.target.files);
                // Si hay archivos existentes mostrados, ocultarlos y marcarlos para eliminar automáticamente
                const contEditar = document.getElementById('upload-container-editar');
                if (contEditar && archivosNuevosEditar.length > 0) {
                    const existingDivs = contEditar.querySelectorAll('[data-existing-id]');
                    existingDivs.forEach(d => {
                        const id = d.dataset.existingId;
                        if (id) {
                            if (archivosAEliminar.indexOf(id) === -1) {
                                archivosAEliminar.push(id);
                                archivosAutoMarcados.push(id);
                            }
                            d.style.display = 'none';
                        }
                    });
                }

                // Renderizar previews nuevos
                mostrarPreviewNuevosEditar(archivosNuevosEditar);
            };
        }

        function mostrarPreviewArchivos(archivos) {
            const contenedor = document.getElementById('upload-container');
            contenedor.innerHTML = '';

            archivos.forEach((file, index) => {
                const div = document.createElement('div');
                // Clase personalizada para el preview (overlay para el botón)
                div.className = 'upload-preview uk-margin-small-bottom uk-border-rounded uk-padding-small';
                div.style.background = '#f5f5f5';
                div.style.position = 'relative';

                if (file.type.startsWith('image/')) {
                    const img = document.createElement('img');
                    img.src = URL.createObjectURL(file);
                    img.style.maxWidth = '100%';
                    img.style.borderRadius = '8px';
                    div.appendChild(img);
                } else if (file.type.startsWith('video/')) {
                    const vid = document.createElement('video');
                    vid.src = URL.createObjectURL(file);
                    vid.controls = true;
                    vid.style.maxWidth = '100%';
                    div.appendChild(vid);
                } else {
                    div.innerHTML = `<p class="uk-text-small">📄 ${file.name}</p>`;
                }

                // Crear botón de eliminar como overlay
                // Comentario: al hacer click elimina el archivo de la lista local `archivosSeleccionados`
                // y vuelve a renderizar los previews.
                const btnEliminar = document.createElement('button');
                btnEliminar.type = 'button';
                btnEliminar.className = 'upload-remove-btn';
                btnEliminar.innerHTML = '✕';
                btnEliminar.title = 'Eliminar archivo';
                btnEliminar.setAttribute('aria-label', 'Eliminar archivo');
                btnEliminar.onclick = function() {
                    archivosSeleccionados.splice(index, 1);
                    mostrarPreviewArchivos(archivosSeleccionados);
                };
                div.appendChild(btnEliminar);
                contenedor.appendChild(div);
            });
        }

        // Mostrar previews en el modal de editar usando rutas del servidor
        // Comentario: esta función recibe un array `archivos` desde la API que contiene
        // objetos con propiedades como `tipo_archivo`, `ruta_archivo` y `nombre_archivo`.
        // - Muestra imágenes inline.
        // - Para otros tipos (pdf/doc/zip) crea un enlace para descargar/abrir.
        // - Los videos se ignoran intencionalmente aquí (se mostrarán en otra parte si se decide).
        function mostrarPreviewArchivosEditar(archivos) {
            const contenedor = document.getElementById('upload-container-editar');
            if (!contenedor) return;
            contenedor.innerHTML = '';

            // Primero renderizar archivos existentes (del servidor)
            archivos.forEach((a) => {
                const div = document.createElement('div');
                div.className = 'upload-preview uk-margin-small-bottom uk-border-rounded uk-padding-small';
                div.style.background = '#f5f5f5';
                div.style.position = 'relative';

                // Guardar id del archivo en el DOM para poder referenciarlo después
                const idArchivo = a.id_archivo ?? a.id ?? null;
                if (idArchivo) div.dataset.existingId = idArchivo;

                if (a.tipo_archivo === 'imagen') {
                    const img = document.createElement('img');
                    img.src = obtenerRutaArchivo(a.ruta_archivo);
                    img.style.maxWidth = '100%';
                    img.style.height = 'auto';
                    img.style.borderRadius = '8px';
                    div.appendChild(img);
                } else if (a.tipo_archivo === 'video') {
                    const vid = document.createElement('video');
                    vid.src = obtenerRutaVideo(a.ruta_archivo);
                    vid.style.maxWidth = '100%';
                    vid.style.height = 'auto';
                    vid.style.borderRadius = '8px';
                    vid.className = 'custom-video';
                    vid.setAttribute('playsinline', '');
                    vid.preload = 'metadata';
                    div.appendChild(vid);
                } else {
                    // Otros archivos (pdf, doc, zip) — mostrar enlace para abrir en nueva pestaña
                    const p = document.createElement('p');
                    p.className = 'uk-text-small';
                    p.innerHTML = `<a href="${obtenerRutaArchivo(a.ruta_archivo)}" target="_blank" class="uk-button uk-button-small uk-button-default"><i class="fas fa-file"></i> ${a.nombre_archivo}</a>`;
                    div.appendChild(p);
                }

                // Botón '✕' para marcar archivo existente para eliminación
                const removeBtn = document.createElement('button');
                removeBtn.type = 'button';
                removeBtn.className = 'upload-remove-btn';
                removeBtn.innerHTML = '✕';
                removeBtn.title = 'Marcar para eliminar';
                removeBtn.setAttribute('aria-label', 'Marcar para eliminar');
                removeBtn.onclick = function() {
                    // Al hacer clic en la 'x' para un archivo existente, lo eliminamos
                    // del DOM y registramos su id en `archivosAEliminar` para que el
                    // servidor lo borre al enviar el formulario. Esto iguala el
                    // comportamiento al del flujo de creación (el preview desaparece).
                    const idArchivo = a.id_archivo ?? a.id ?? null;
                    if (!idArchivo) return;

                    if (archivosAEliminar.indexOf(idArchivo) === -1) {
                        archivosAEliminar.push(idArchivo);
                    }

                    // Si estaba en la lista de auto-marcados, quitarlo de allí
                    const autoIdx = archivosAutoMarcados.indexOf(idArchivo);
                    if (autoIdx !== -1) archivosAutoMarcados.splice(autoIdx, 1);

                    // Remover el preview del DOM para que desaparezca inmediatamente
                    div.remove();
                };

                div.appendChild(removeBtn);
                // Si ya está marcado para eliminar, reflect visual
                if (idArchivo && archivosAEliminar.indexOf(idArchivo) !== -1) {
                    div.style.opacity = '0.5';
                }

                contenedor.appendChild(div);
            });

            // Inicializar controles personalizados para videos dentro del modal de editar
            try { initVideoControls(contenedor); } catch (e) { /* ignore */ }

            // Luego renderizar previews de archivos nuevos que ya haya seleccionado
            if (archivosNuevosEditar && archivosNuevosEditar.length > 0) {
                // Al seleccionar archivos nuevos, ocultar/marcar automáticamente los existentes
                const existingDivs = contenedor.querySelectorAll('[data-existing-id]');
                existingDivs.forEach(d => {
                    const id = d.dataset.existingId;
                    if (id) {
                        if (archivosAEliminar.indexOf(id) === -1) {
                            archivosAEliminar.push(id);
                            archivosAutoMarcados.push(id);
                        }
                        // ocultar visualmente los existentes para que no se muestren junto a los nuevos
                        d.style.display = 'none';
                    }
                });

                mostrarPreviewNuevosEditar(archivosNuevosEditar);
            }
        }

        // Mostrar previews de archivos nuevos seleccionados en el modal de editar
        function mostrarPreviewNuevosEditar(archivos) {
            const contenedor = document.getElementById('upload-container-editar');
            if (!contenedor) return;
            // Eliminar previews nuevos previos antes de renderizar los actuales
            const prevNuevos = contenedor.querySelectorAll('.nuevo-preview');
            prevNuevos.forEach(n => n.remove());

            archivos.forEach((file, index) => {
                const div = document.createElement('div');
                div.className = 'upload-preview nuevo-preview uk-margin-small-bottom uk-border-rounded uk-padding-small';
                div.style.background = '#f5f5f5';
                div.style.position = 'relative';

                if (file.type.startsWith('image/')) {
                    const img = document.createElement('img');
                    img.src = URL.createObjectURL(file);
                    img.style.maxWidth = '100%';
                    img.style.height = 'auto';
                    img.style.borderRadius = '8px';
                    div.appendChild(img);
                } else if (file.type.startsWith('video/')) {
                    const vid = document.createElement('video');
                    vid.src = URL.createObjectURL(file);
                    vid.controls = true;
                    vid.style.maxWidth = '100%';
                    div.appendChild(vid);
                } else {
                    div.innerHTML = `<p class="uk-text-small">📄 ${file.name}</p>`;
                }

                const btnEliminar = document.createElement('button');
                btnEliminar.type = 'button';
                btnEliminar.className = 'upload-remove-btn';
                btnEliminar.innerHTML = '✕';
                btnEliminar.title = 'Eliminar archivo (nuevo)';
                btnEliminar.onclick = function() {
                    archivosNuevosEditar.splice(index, 1);
                    // Si ya no quedan archivos nuevos, restaurar visibilidad de los existentes auto-marcados
                    if (archivosNuevosEditar.length === 0) {
                        const cont = document.getElementById('upload-container-editar');
                        if (cont) {
                            archivosAutoMarcados.forEach(id => {
                                const d = cont.querySelector(`[data-existing-id="${id}"]`);
                                if (d) d.style.display = '';
                                // quitar de archivosAEliminar
                                const pos = archivosAEliminar.indexOf(id);
                                if (pos !== -1) archivosAEliminar.splice(pos, 1);
                            });
                        }
                        archivosAutoMarcados = [];
                    }
                    // volver a renderizar previews nuevos actuales
                    mostrarPreviewNuevosEditar(archivosNuevosEditar);
                };
                div.appendChild(btnEliminar);
                contenedor.appendChild(div);
            });
            // Inicializar controles para videos recién añadidos
            try { initVideoControls(contenedor); } catch (e) { /* ignore */ }
        }

        // Formulario de publicación
        document.getElementById('form-publicacion')?.addEventListener('submit', async function(e) {
            e.preventDefault();

            const btn = document.getElementById('btn-publicar');
            const contenido = document.getElementById('contenido-publicacion').value.trim();

            // Validar contenido
            if (!contenido) {
                Swal.fire('Error', 'El contenido de la publicación es requerido', 'error');
                return;
            }

            const formData = new FormData();

            // Título es opcional - verificar si el campo existe
            const tituloField = document.getElementById('titulo-publicacion');
            if (tituloField) {
                formData.append('titulo', tituloField.value.trim() || '');
            } else {
                // Si el campo no existe, enviar vacío
                formData.append('titulo', '');
            }

            formData.append('contenido', contenido);
            formData.append('_token', document.querySelector('meta[name="csrf-token"]').content);

            archivosSeleccionados.forEach((file) => {
                formData.append('archivos[]', file);
            });

            btn.disabled = true;
            btn.textContent = 'Publicando...';

            try {
                const response = await fetch('{{ route('api.comunidad.publicaciones.crear') }}', {
                    method: 'POST',
                    body: formData,
                    headers: {
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
                    }
                });

                const data = await response.json();

                if (data.success) {
                    UIkit.modal('#modal-publicar').hide();
                    document.getElementById('form-publicacion').reset();
                    document.getElementById('upload-container').innerHTML = '';
                    archivosSeleccionados = [];

                    // Prepend la nueva publicación al contenedor para feedback inmediato
                    try {
                        const cont = document.getElementById('contenedor-publicaciones');
                        if (data.publicacion) {
                            cont.prepend(crearElementoPublicacion(data.publicacion));
                        } else {
                            // Fallback: recargar la primera página
                            cargarPagina(1, false);
                        }
                    } catch (e) {
                        // si falla, recargar página 1
                        cargarPagina(1, false);
                    }

                    cargarRanking();
                    Swal.fire('¡Éxito!', 'Publicación creada correctamente', 'success');
                } else {
                    Swal.fire('Error', data.message || 'Error al crear publicación', 'error');
                }
            } catch (error) {
                Swal.fire('Error', 'Error al conectar con el servidor', 'error');
            } finally {
                btn.disabled = false;
                btn.textContent = 'Publicar';
            }
        });

        // Cargar publicaciones
        // Función helper para obtener datos del suscrito (maneja cuando es null)
        function obtenerDatosSuscrito(suscrito) {
            if (!suscrito) {
                return {
                    nombreCompleto: 'GRUPO AUGE',
                    imagenUrl: 'https://www.educaauge.com/assets/img/favicon.png'
                };
            }

            const nombreCompleto = `${suscrito.nombre || ''} ${suscrito.ap_pa || ''} ${suscrito.ap_ma || ''}`.trim() ||
                'GRUPO AUGE';

            let imagenUrl;
            if (suscrito.imagen_url) {
                imagenUrl = suscrito.imagen_url;
            } else if (suscrito.imagen) {
                imagenUrl = `{{ asset('imagenes_usuarios/') }}/${suscrito.imagen}`;
            } else if (suscrito.email) {
                imagenUrl = `https://www.gravatar.com/avatar/${md5(suscrito.email.toLowerCase().trim())}?s=256&d=mp`;
            } else {
                imagenUrl = 'https://www.educaauge.com/assets/img/favicon.png';
            }

            return {
                nombreCompleto,
                imagenUrl
            };
        }

        // Helper para resolver rutas de archivos: acepta URL absoluta o ruta relativa
        function obtenerRutaArchivo(ruta) {
            if (!ruta) return '';
            try {
                if (ruta.startsWith('http://') || ruta.startsWith('https://')) return ruta;
            } catch (e) {
                // ignore
            }
            return `{{ asset('') }}${ruta}`;
        }

        // Helper específico para videos: si el origen es gstorage/bucket lo pasa
        // por el proxy /stream-video (que valida referer permitido).
        function obtenerRutaVideo(ruta) {
            if (!ruta) return '';
            if (typeof ruta === 'string' &&
                (ruta.includes('storage.googleapis.com/bucket-auge-oficial') ||
                 ruta.includes('bucket.educaauge.com'))) {
                return `{{ route('streamVideo') }}?video=${encodeURIComponent(ruta)}`;
            }
            return obtenerRutaArchivo(ruta);
        }

        // Inicializa controles personalizados para cualquier <video> dentro de root
        function initVideoControls(root) {
            if (!root) return;
            const videos = root.querySelectorAll('video');
            videos.forEach(video => {
                // evitar inicializar dos veces
                if (video.dataset.vcInit === '1') return;
                video.dataset.vcInit = '1';

                // Crear o localizar barra de controles dentro del contenedor
                const wrapper = video.parentElement && video.parentElement.classList.contains('video-wrapper') ? video.parentElement : video;
                let controls = wrapper.querySelector('.video-controls');
                if (!controls) {
                    controls = document.createElement('div');
                    controls.className = 'video-controls';
                    controls.innerHTML = `<button type="button" class="vc-play" aria-label="Play/Pause"><i class="fas fa-play"></i></button>
                                          <input type="range" min="0" max="100" value="0" class="vc-progress">
                                          <span class="vc-time">0:00 / 0:00</span>
                                          <button type="button" class="vc-volume" aria-label="Volumen"><i class="fas fa-volume-up"></i></button>
                                          <button type="button" class="vc-fullscreen" aria-label="Pantalla completa"><i class="fas fa-expand"></i></button>`;
                    // Insert after video
                    if (video.nextSibling) video.parentElement.insertBefore(controls, video.nextSibling.nextSibling || video.nextSibling);
                    else video.parentElement.appendChild(controls);
                }

                const btn = controls.querySelector('.vc-play');
                const progress = controls.querySelector('.vc-progress');
                const timeTxt = controls.querySelector('.vc-time');
                const fsBtn = controls.querySelector('.vc-fullscreen');
                const volBtn = controls.querySelector('.vc-volume');

                function formatTime(sec) {
                    if (!isFinite(sec)) return '0:00';
                    const s = Math.floor(sec % 60).toString().padStart(2, '0');
                    const m = Math.floor(sec / 60);
                    return `${m}:${s}`;
                }

                video.addEventListener('loadedmetadata', () => {
                    const dur = isFinite(video.duration) ? video.duration : 0;
                    progress.value = 0;
                    timeTxt.textContent = `${formatTime(0)} / ${formatTime(dur)}`;
                });

                video.addEventListener('timeupdate', () => {
                    const dur = isFinite(video.duration) ? video.duration : 0;
                    const percent = dur ? (video.currentTime / dur) * 100 : 0;
                    progress.value = percent;
                    // pintar la parte rellenada usando linear-gradient
                    progress.style.background = `linear-gradient(90deg, var(--vc-accent) ${percent}%, rgba(255,255,255,0.2) ${percent}%)`;
                    timeTxt.textContent = `${formatTime(video.currentTime)} / ${formatTime(dur)}`;
                });

                btn.addEventListener('click', () => {
                    if (video.paused) video.play().catch(()=>{});
                    else video.pause();
                    btn.innerHTML = video.paused ? '<i class="fas fa-play"></i>' : '<i class="fas fa-pause"></i>';
                });

                progress.addEventListener('input', (e) => {
                    const dur = isFinite(video.duration) ? video.duration : 0;
                    const pct = parseFloat(e.target.value) / 100;
                    if (dur) video.currentTime = pct * dur;
                    // actualizar color de pista acorde al valor
                    const percent = parseFloat(e.target.value);
                    progress.style.background = `linear-gradient(90deg, var(--vc-accent) ${percent}%, rgba(255,255,255,0.2) ${percent}%)`;
                });

                // update play/pause icon on play/pause events
                video.addEventListener('play', () => { if (btn) btn.innerHTML = '<i class="fas fa-pause"></i>'; });
                video.addEventListener('pause', () => { if (btn) btn.innerHTML = '<i class="fas fa-play"></i>'; });
                
                // Volume (mute/unmute) handling
                if (volBtn) {
                    // set initial icon according to current state
                    function updateVolIcon() {
                        const ic = volBtn.querySelector('i');
                        if (video.muted || video.volume === 0) ic.className = 'fas fa-volume-mute';
                        else if (video.volume <= 0.5) ic.className = 'fas fa-volume-down';
                        else ic.className = 'fas fa-volume-up';
                    }

                    volBtn.addEventListener('click', () => {
                        if (video.muted || video.volume === 0) {
                            video.muted = false;
                            if (video.volume === 0) video.volume = 1;
                        } else {
                            video.muted = true;
                        }
                        updateVolIcon();
                    });

                    video.addEventListener('volumechange', updateVolIcon);
                    updateVolIcon();
                }

                // Fullscreen toggle
                if (fsBtn) {
                    fsBtn.addEventListener('click', () => {
                        // Request fullscreen on the wrapper to avoid native video UI with download option
                        const wrapper = video.parentElement && video.parentElement.classList.contains('video-wrapper') ? video.parentElement : video;
                        const docFs = document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement || document.msFullscreenElement;
                        if (!docFs) {
                            if (wrapper.requestFullscreen) wrapper.requestFullscreen();
                            else if (wrapper.webkitRequestFullscreen) wrapper.webkitRequestFullscreen();
                            else if (wrapper.mozRequestFullScreen) wrapper.mozRequestFullScreen();
                            else if (wrapper.msRequestFullscreen) wrapper.msRequestFullscreen();
                        } else {
                            if (document.exitFullscreen) document.exitFullscreen();
                            else if (document.webkitExitFullscreen) document.webkitExitFullscreen();
                            else if (document.mozCancelFullScreen) document.mozCancelFullScreen();
                            else if (document.msExitFullscreen) document.msExitFullscreen();
                        }
                    });

                    // Update icon when fullscreen changes (for this specific wrapper/video)
                    document.addEventListener('fullscreenchange', () => {
                        const wrapper = video.parentElement && video.parentElement.classList.contains('video-wrapper') ? video.parentElement : video;
                        const isFs = document.fullscreenElement === wrapper || (document.fullscreenElement && document.fullscreenElement.contains && document.fullscreenElement.contains(wrapper));
                        fsBtn.innerHTML = isFs ? '<i class="fas fa-compress"></i>' : '<i class="fas fa-expand"></i>';
                    });
                }
            });
        }

        // Cargar una página de publicaciones. Si `append` es true, se añaden al final,
        // si es false se reemplazan las publicaciones actuales.
        async function cargarPagina(page = 1, append = false) {
            if (isLoadingPublicaciones || noMorePages) return;
            isLoadingPublicaciones = true;

            const sentinel = document.getElementById('scroll-sentinel');
            if (sentinel) sentinel.innerHTML = '<div uk-spinner></div>';

            try {
                const response = await fetch(`{{ route('api.comunidad.publicaciones') }}?per_page=${perPage}&page=${page}`);
                const data = await response.json();

                const contenedor = document.getElementById('contenedor-publicaciones');
                if (!append) contenedor.innerHTML = '';

                if (data.data && data.data.length > 0) {
                    data.data.forEach(publicacion => {
                        // Evitar duplicados si ya existe en el DOM
                        if (!document.getElementById('publicacion-' + publicacion.id_publicacion)) {
                            const el = crearElementoPublicacion(publicacion);
                            if (append) contenedor.appendChild(el);
                            else contenedor.appendChild(el);
                        }
                    });

                    currentPage = page;

                    // Determinar si quedan páginas (Laravel paginator usa last_page)
                    if (data.last_page && page >= data.last_page) {
                        noMorePages = true;
                        if (sentinel) sentinel.innerHTML = '<p class="uk-text-small">No hay más publicaciones</p>';
                    } else {
                        if (sentinel) sentinel.innerHTML = '';
                    }
                } else {
                    if (!append) {
                        contenedor.innerHTML = '<div class="uk-text-center uk-margin"><p>No hay publicaciones todavía. ¡Sé el primero en publicar!</p></div>';
                    }
                    noMorePages = true;
                    if (sentinel) sentinel.innerHTML = '<p class="uk-text-small">No hay más publicaciones</p>';
                }
            } catch (error) {
                const cont = document.getElementById('contenedor-publicaciones');
                if (!append && cont) cont.innerHTML = '<div class="uk-text-center uk-margin"><p class="uk-text-danger">Error al cargar publicaciones</p></div>';
                if (sentinel) sentinel.innerHTML = '<p class="uk-text-danger">Error al cargar</p>';
            } finally {
                isLoadingPublicaciones = false;
            }
        }

        function crearElementoPublicacion(pub) {
            const div = document.createElement('div');
            div.className = 'fondo-modelo uk-margin-small-bottom';
            div.id = 'publicacion-' + pub.id_publicacion;

            let archivosHtml = '';
            if (pub.archivos && pub.archivos.length > 0) {
                archivosHtml = '<div class="uk-margin-small-top">';
                pub.archivos.forEach(archivo => {
                    if (archivo.tipo_archivo === 'imagen') {
                        archivosHtml +=
                            `<img src="${obtenerRutaArchivo(archivo.ruta_archivo)}" class="uk-border-rounded uk-width-1-1" style="max-height: 400px; object-fit: cover;">`;
                    } else if (archivo.tipo_archivo === 'video') {
                        archivosHtml += `<div class="video-wrapper">
                                <video src="${obtenerRutaVideo(archivo.ruta_archivo)}" class="uk-width-1-1 custom-video" playsinline preload="metadata"></video>
                                <button type="button" class="play-overlay" onclick="abrirPreviewVideo('${obtenerRutaVideo(archivo.ruta_archivo)}')"><i class="fas fa-play"></i></button>
                            </div>`;
                    } else {
                        archivosHtml +=
                            `<a href="${obtenerRutaArchivo(archivo.ruta_archivo)}" target="_blank" class="uk-button uk-button-small uk-button-default"><i class="fas fa-file"></i> ${archivo.nombre_archivo}</a>`;
                    }
                });
                archivosHtml += '</div>';
            }

            // Obtener datos del suscrito (maneja cuando es null)
            const datosSuscrito = obtenerDatosSuscrito(pub.suscrito);
            const nombreCompleto = datosSuscrito.nombreCompleto;
            const imagenUsuario = datosSuscrito.imagenUrl;

            const iconoReaccion = pub.ya_reacciono ? 'fas' : 'far';

            const esPropio = idSuscrito && pub.id_suscrito == idSuscrito;

            div.innerHTML = `
                <div class="uk-flex uk-flex-between encabezado-card">
                    <div class="uk-flex">
                        <img src="${imagenUsuario}" alt="${nombreCompleto}" class="logo-mini">
                        <div>
                            <h5>${nombreCompleto}</h5>
                            <small>${pub.tiempo_transcurrido || 'Ahora'}</small>
                        </div>
                    </div>
                    ${esPropio ? `
                                        <div>
                                            <button class="post-options-btn" type="button">
                                                <i class="fas fa-ellipsis-h"></i>
                                            </button>
                                            <div uk-dropdown="mode: click; pos: bottom-right ">
                                                <ul class="uk-nav uk-dropdown-nav text-botones">
                                                    <li><a href="#" onclick="abrirModalEditar(${pub.id_publicacion}, '${pub.contenido.replace(/'/g, "\\'").replace(/\n/g, ' ')}', '${(pub.titulo || '').replace(/'/g, "\\'")}', '${encodeURIComponent(JSON.stringify(pub.archivos || []))}'); return false;"><i class="fas fa-edit"></i> Editar</a></li>
                                                    <li><a href="#" onclick="eliminarPublicacion(${pub.id_publicacion}); return false;"><i class="fas fa-trash"></i> Eliminar</a></li>
                                                </ul>
                                            </div>
                                        </div>
                                        ` : ''}
                </div>
                ${generarContenidoConMedia(pub)}
                <div class="uk-flex post-actions segundopost">
                    <span onclick="toggleReaccion(${pub.id_publicacion}, 'publicacion')" style="cursor: pointer;" class="like-btn">
                        <i class="${iconoReaccion} fa-heart"></i> <span id="likes-${pub.id_publicacion}">${pub.contador_likes || 0}</span>
                    </span>
                    <span onclick="mostrarComentarios(${pub.id_publicacion})" style="cursor: pointer;">
                        <i class="far fa-comment"></i> <span id="comentarios-${pub.id_publicacion}">${pub.contador_comentarios || 0}</span>
                    </span>
                    <span onclick="compartirPublicacion(${pub.id_publicacion})" style="cursor: pointer;">
                        <i class="fas fa-share"></i> <span id="shares-${pub.id_publicacion}">${pub.contador_compartidos || 0}</span>
                    </span>
                </div>
                <div id="comentarios-container-${pub.id_publicacion}" class="uk-margin-top" style="display: none;">
                    <div class="uk-margin-small">
                        <textarea id="nuevo-comentario-${pub.id_publicacion}" class="uk-textarea uk-form-small comentario-tarea" rows="2" placeholder="Escribe un comentario..."></textarea>
                        <button onclick="crearComentario(${pub.id_publicacion})" class="uk-button uk-button-small uk-button-primary uk-margin-small-top">Comentar</button>
                    </div>
                    <div id="lista-comentarios-${pub.id_publicacion}"></div>
                </div>
            `;

            // Inicializar controles de video dentro del elemento creado
            try { initVideoControls(div); } catch (e) { /* ignore */ }
            return div;
        }

        // Inicializar IntersectionObserver para infinite scroll
        function initInfiniteScroll() {
            const sentinel = document.getElementById('scroll-sentinel');
            if (!sentinel) return;
            if (observerPublicaciones) observerPublicaciones.disconnect();

            observerPublicaciones = new IntersectionObserver((entries) => {
                entries.forEach(entry => {
                    if (entry.isIntersecting && !isLoadingPublicaciones && !noMorePages) {
                        cargarPagina(currentPage + 1, true);
                    }
                });
            }, {
                root: null,
                rootMargin: '200px',
                threshold: 0
            });

            observerPublicaciones.observe(sentinel);
        }

        function generarContenidoConMedia(pub) {
            if (!pub.archivos || pub.archivos.length === 0) {
                return `<p>${pub.contenido}</p>`;
            }

            const media = pub.archivos.find(a =>
                a.tipo_archivo === 'imagen' || a.tipo_archivo === 'video'
            );

            // 📄 SOLO ARCHIVOS (PDF, DOC, ZIP, etc.)
            if (!media) {
                let archivos = '<div class="uk-margin-small-top">';
                pub.archivos.forEach(a => {
                    archivos += `
                <a href="${obtenerRutaArchivo(a.ruta_archivo)}" target="_blank"
                   class="uk-button uk-button-small uk-button-default uk-margin-small-right">
                   <i class="fas fa-file"></i> ${a.nombre_archivo}
                </a>
            `;
                });
                archivos += '</div>';

                return `<p>${pub.contenido}</p>${archivos}`;
            }

            // 🖼️ IMAGEN o 🎥 VIDEO → TEXTO IZQ / MEDIA DER
            let mediaHtml = '';

            if (media.tipo_archivo === 'imagen') {
                mediaHtml = `
            <img src="${obtenerRutaArchivo(media.ruta_archivo)}"
                 class="media-lateral">
        `;
            } else {
                mediaHtml = `
            <div class="video-wrapper media-lateral">
                <video src="${obtenerRutaVideo(media.ruta_archivo)}" class="custom-video" playsinline preload="metadata"></video>
                <button type="button" class="play-overlay play-overlay-medium" onclick="abrirPreviewVideo('${obtenerRutaVideo(media.ruta_archivo)}')"><i class="fas fa-play"></i></button>
            </div>
        `;
            }

            return `
        <div class="contenido-con-media">
            <div class="texto-publicacion">
                <p>${pub.contenido}</p>
            </div>
            <div class="media-publicacion">
                ${mediaHtml}
            </div>
        </div>
    `;
        }

        // Abrir modal de previsualización de video y reproducir
        function abrirPreviewVideo(url) {
            if (!url) return;
            // Buscar el elemento <video> con esa fuente y alternar play/pause
            const videos = document.querySelectorAll('video');
            let target = null;
            videos.forEach(v => {
                try {
                    if (v.currentSrc === url || v.getAttribute('src') === url) target = v;
                } catch (e) { /* ignore */ }
            });

            if (!target) return;

            const btn = target.parentElement ? target.parentElement.querySelector('.play-overlay') : null;

            if (target.paused) {
                target.play().catch(() => {});
                if (btn) btn.innerHTML = '<i class="fas fa-pause"></i>';
            } else {
                target.pause();
                if (btn) btn.innerHTML = '<i class="fas fa-play"></i>';
            }
        }

        // Evitar menú contextual sobre elementos <video> (bloqueo básico de "guardar como")
        document.addEventListener('contextmenu', function(e) {
            const target = e.target;
            if (target && target.tagName && target.tagName.toLowerCase() === 'video') {
                e.preventDefault();
            }
        }, true);


        async function toggleReaccion(id, tipo) {
            if (!idSuscrito) {
                Swal.fire('Info', 'Debes iniciar sesión para reaccionar', 'info');
                return;
            }

            try {
                const response = await fetch('{{ route('api.comunidad.reacciones') }}', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
                    },
                    body: JSON.stringify({
                        reaccionable_id: id,
                        reaccionable_type: tipo === 'publicacion' ?
                            'App\\Models\\ComunidadPublicacion' : 'App\\Models\\ComunidadComentario',
                        tipo: 'like'
                    })
                });

                const data = await response.json();

                if (data.success) {
                    const elementoLikes = document.getElementById('likes-' + id);
                    if (elementoLikes) {
                        elementoLikes.textContent = data.contador_likes;
                    }
                    // no recargamos todas las publicaciones aquí (mejor performance)
                }
            } catch (error) {
                console.error('Error al reaccionar:', error);
            }
        }

        async function mostrarComentarios(idPublicacion) {
            const container = document.getElementById('comentarios-container-' + idPublicacion);
            const lista = document.getElementById('lista-comentarios-' + idPublicacion);

            if (container.style.display === 'none') {
                container.style.display = 'block';

                try {
                    const response = await fetch(
                        `{{ url('api/comunidad/publicaciones') }}/${idPublicacion}/comentarios`);
                    const comentarios = await response.json();

                    lista.innerHTML = '';
                    if (comentarios.length > 0) {
                        comentarios.forEach(comentario => {
                            lista.appendChild(crearElementoComentario(comentario));
                        });
                    } else {
                        lista.innerHTML = '<p class="uk-text-muted uk-text-small">No hay comentarios todavía</p>';
                    }
                } catch (error) {
                    lista.innerHTML = '<p class="uk-text-danger uk-text-small">Error al cargar comentarios</p>';
                }
            } else {
                container.style.display = 'none';
            }
        }

        function crearElementoComentario(comentario, esRespuesta = false) {
            const div = document.createElement('div');
            div.className = esRespuesta ? 'comentario-respuesta' : 'comentario-principal';
            div.id = 'comentario-' + comentario.id_comentario;

            const datosSuscrito = obtenerDatosSuscrito(comentario.suscrito);
            const nombreCompleto = datosSuscrito.nombreCompleto;
            const imagenUsuario = datosSuscrito.imagenUrl;

            const avatarSize = esRespuesta ? '28px' : '32px';

            // Contar respuestas
            const numRespuestas = comentario.respuestas ? comentario.respuestas.length : 0;

            div.innerHTML = `
                <div class="uk-flex" style="gap: 8px;">
                    <img src="${imagenUsuario}" class="comentario-avatar" style="width: ${avatarSize}; height: ${avatarSize}; border-radius: 50%; object-fit: cover;">
                    <div style="flex: 1;">
                        <div class="comentario-contenido">
                            <strong class="comentario-autor">${nombreCompleto}</strong>
                            <p class="comentario-texto">${comentario.contenido}</p>
                        </div>
                        <div class="comentario-acciones">
                            <span class="comentario-tiempo">${comentario.tiempo_transcurrido || 'Ahora'}</span>
                            <button class="comentario-btn" onclick="mostrarFormularioRespuesta(${comentario.id_comentario}, '${nombreCompleto}')">Responder</button>
                            ${numRespuestas > 0 ? `<span class="comentario-contador-respuestas">${numRespuestas} ${numRespuestas === 1 ? 'respuesta' : 'respuestas'}</span>` : ''}
                        </div>
                        <div id="respuesta-form-${comentario.id_comentario}" class="formulario-respuesta" style="display: none; margin-top: 8px;">
                            <div class="uk-flex" style="gap: 8px;">
                                <img src="{{ session('suscrito')['user']->imagen ? asset('imagenes_usuarios/' . session('suscrito')['user']->imagen) : 'https://www.gravatar.com/avatar/' . md5(strtolower(trim(session('suscrito')['user']->email))) . '?s=256&d=mp' }}" style="width: 28px; height: 28px; border-radius: 50%; object-fit: cover;">
                                <input type="text" id="input-respuesta-${comentario.id_comentario}" class="uk-input uk-form-small" placeholder="Escribe una respuesta..." style="border-radius: 5px; background: #f0f2f5; border: none;">
                            </div>
                        </div>
                        <div id="respuestas-${comentario.id_comentario}" class="respuestas-container">
            `;

            // Agregar respuestas si existen
            if (comentario.respuestas && comentario.respuestas.length > 0) {
                comentario.respuestas.forEach(respuesta => {
                    const respuestaElement = crearElementoComentario(respuesta, true);
                    div.querySelector(`#respuestas-${comentario.id_comentario}`).appendChild(respuestaElement);
                });
            }

            div.innerHTML += `
                        </div>
                    </div>
                </div>
            `;

            return div;
        }

        function mostrarFormularioRespuesta(idComentario, nombreUsuario) {
            const form = document.getElementById(`respuesta-form-${idComentario}`);
            const input = document.getElementById(`input-respuesta-${idComentario}`);

            if (form.style.display === 'none') {
                form.style.display = 'block';
                input.focus();
                input.placeholder = `Responder a ${nombreUsuario}...`;

                // Agregar evento para enviar con Enter
                input.onkeypress = function(e) {
                    if (e.key === 'Enter' && input.value.trim()) {
                        crearRespuesta(idComentario, input.value);
                        input.value = '';
                        form.style.display = 'none';
                    }
                };
            } else {
                form.style.display = 'none';
            }
        }

        async function crearRespuesta(idComentarioPadre, contenido) {
            if (!idSuscrito) {
                Swal.fire('Info', 'Debes iniciar sesión para responder', 'info');
                return;
            }

            // Obtener el id de la publicación del comentario padre
            const comentarioPadreElement = document.getElementById(`comentario-${idComentarioPadre}`);
            const publicacionElement = comentarioPadreElement.closest('[id^="comentarios-container-"]');
            const idPublicacion = publicacionElement.id.replace('comentarios-container-', '');

            try {
                const response = await fetch('{{ route('api.comunidad.comentarios.crear') }}', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
                    },
                    body: JSON.stringify({
                        id_publicacion: idPublicacion,
                        id_comentario_padre: idComentarioPadre,
                        contenido: contenido
                    })
                });

                const data = await response.json();

                if (data.success) {
                    // Recargar comentarios de esta publicación y refrescar primera página
                    mostrarComentarios(idPublicacion);
                    cargarPagina(1, false);
                    cargarRanking();
                } else {
                    Swal.fire('Error', data.message || 'Error al crear respuesta', 'error');
                }
            } catch (error) {
                Swal.fire('Error', 'Error al conectar con el servidor', 'error');
            }
        }

        async function crearComentario(idPublicacion) {
            if (!idSuscrito) {
                Swal.fire('Info', 'Debes iniciar sesión para comentar', 'info');
                return;
            }

            const contenido = document.getElementById('nuevo-comentario-' + idPublicacion).value;

            if (!contenido.trim()) {
                Swal.fire('Info', 'Escribe un comentario', 'info');
                return;
            }

            try {
                const response = await fetch('{{ route('api.comunidad.comentarios.crear') }}', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
                    },
                    body: JSON.stringify({
                        id_publicacion: idPublicacion,
                        contenido: contenido
                    })
                });

                const data = await response.json();

                if (data.success) {
                    document.getElementById('nuevo-comentario-' + idPublicacion).value = '';
                    mostrarComentarios(idPublicacion);
                    cargarPagina(1, false);
                    cargarRanking();
                } else {
                    Swal.fire('Error', data.message || 'Error al crear comentario', 'error');
                }
            } catch (error) {
                Swal.fire('Error', 'Error al conectar con el servidor', 'error');
            }
        }

        // Cargar ranking
        async function cargarRanking() {
            try {
                const response = await fetch('{{ route('api.comunidad.ranking') }}?dias=30');
                const ranking = await response.json();

                const container = document.getElementById('ranking-list');

                if (ranking.length > 0) {
                    let html = '';
                    ranking.forEach((item, index) => {
                        const nombreCompleto = item.suscrito.nombre_completo ||
                            `${item.suscrito.nombre} ${item.suscrito.ap_pa || ''}`.trim();
                        const imagenUsuario = item.suscrito.imagen ?
                            `{{ asset('imagenes_usuarios/') }}/${item.suscrito.imagen}` :
                            `https://www.gravatar.com/avatar/${md5(item.suscrito.email.toLowerCase().trim())}?s=256&d=mp`;

                        html += `
                            <div class="posicion">
                                <div class="item-left">
                                    <span class="rank">${item.posicion}</span>
                                    <img src="${imagenUsuario}" class="avatar">
                                    <span class="name">${nombreCompleto}</span>
                                </div>
                                <div class="score">+${item.total_puntos}</div>
                            </div>
                        `;
                    });
                    container.innerHTML = html;
                } else {
                    container.innerHTML = '<p class="uk-text-center uk-text-muted">No hay datos de ranking aún</p>';
                }
            } catch (error) {
                document.getElementById('ranking-list').innerHTML =
                    '<p class="uk-text-center uk-text-danger">Error al cargar ranking</p>';
            }
        }

        // Cargar destacados
        async function cargarDestacados() {
            try {
                const response = await fetch('{{ route('api.comunidad.publicaciones.destacadas') }}');
                const destacados = await response.json();

                const container = document.getElementById('lista-destacados');
                const seccion = document.getElementById('seccion-destacados');

                if (destacados.length > 0) {
                    seccion.style.display = 'block';
                    container.innerHTML = '';

                    destacados.forEach(pub => {
                        // Obtener datos del suscrito (maneja cuando es null)
                        const datosSuscrito = obtenerDatosSuscrito(pub.suscrito);
                        const nombreCompleto = datosSuscrito.nombreCompleto;
                        const imagenUsuario = datosSuscrito.imagenUrl;

                        // Imagen principal (primera imagen o video)
                        let mediaHtml = '';
                        if (pub.archivos && pub.archivos.length > 0) {
                            const archivo = pub.archivos.find(a => a.tipo_archivo === 'imagen') || pub.archivos[
                                0];
                            if (archivo.tipo_archivo === 'imagen') {
                                mediaHtml =
                                                    `<img src="${obtenerRutaArchivo(archivo.ruta_archivo)}" alt="" class="uk-border-rounded imagen-destacado" style="height: 200px; width: 100%; object-fit: cover;">`;
                            } else if (archivo.tipo_archivo === 'video') {
                                mediaHtml =
                                    `<div class="video-wrapper imagen-destacado" style="height:200px;">
                                        <video src="${obtenerRutaVideo(archivo.ruta_archivo)}" class="custom-video" style="height:100%; width:100%; object-fit:cover;" playsinline preload="metadata"></video>
                                        <button type="button" class="play-overlay" onclick="abrirPreviewVideo('${obtenerRutaVideo(archivo.ruta_archivo)}')"><i class="fas fa-play"></i></button>
                                    </div>`;
                            }
                        }

                        const iconoReaccion = pub.ya_reacciono ? 'fas' : 'far';
                        const li = document.createElement('li');
                        li.innerHTML = `
                            <div class="destacado-card">
                                <div class="uk-flex encabezado-card">
                                    <img src="${imagenUsuario}" alt="${nombreCompleto}" class="logo-mini">
                                    <div>
                                        <h5>${nombreCompleto}</h5>
                                        <small>${pub.tiempo_transcurrido || 'Hace un momento'}</small>
                                    </div>
                                </div>
                                <p class="dos-lineas">${pub.contenido}</p>
                                ${mediaHtml}
                                <div class="uk-flex uk-flex-between post-actions">
                                    <span onclick="toggleReaccion(${pub.id_publicacion}, 'publicacion')" style="cursor: pointer;" class="like-btn">
                                        <i class="${iconoReaccion} fa-heart"></i> ${pub.contador_likes}
                                    </span>
                                    <span onclick="window.location.href='#publicacion-${pub.id_publicacion}'" style="cursor: pointer;">
                                        <i class="far fa-comment"></i> ${pub.contador_comentarios}
                                    </span>
                                    <span onclick="compartirPublicacion(${pub.id_publicacion})" style="cursor: pointer;">
                                        <i class="fas fa-share"></i> ${pub.contador_compartidos || 0}
                                    </span>
                                </div>
                            </div>
                        `;
                        try { initVideoControls(li); } catch (e) { }
                        container.appendChild(li);
                    });
                }
            } catch (error) {
                console.error('Error al cargar destacados:', error);
            }
        }

        let publicacionIdCompartir = null;

        function compartirPublicacion(id) {
            publicacionIdCompartir = id;
            const url = `${window.location.origin}/comunidad#publicacion-${id}`;
            const texto = "¡Mira esta publicación en Educa Auge!";

            // Configurar enlaces
            document.getElementById('share-whatsapp').href =
                `https://api.whatsapp.com/send?text=${encodeURIComponent(texto + ' ' + url)}`;
            document.getElementById('share-facebook').href =
                `https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(url)}`;
            document.getElementById('share-twitter').href =
                `https://twitter.com/intent/tweet?text=${encodeURIComponent(texto)}&url=${encodeURIComponent(url)}`;
            document.getElementById('share-linkedin').href =
                `https://www.linkedin.com/sharing/share-offsite/?url=${encodeURIComponent(url)}`;

            document.getElementById('input-share-link').value = url;

            UIkit.modal('#modal-compartir').show();
        }

        function copiarEnlaceModal() {
            const input = document.getElementById('input-share-link');
            input.select();
            document.execCommand('copy');

            UIkit.notification({
                message: 'Enlace copiado al portapapeles',
                status: 'success'
            });
            registrarCompartido('copiar');
        }

        async function registrarCompartido(medio) {
            if (!publicacionIdCompartir) return;

            try {
                const response = await fetch(
                    `{{ url('api/comunidad/publicaciones') }}/${publicacionIdCompartir}/compartir`, {
                        method: 'POST',
                        headers: {
                            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
                        }
                    });

                const data = await response.json();

                if (data.success) {
                    // Actualizar contador visualmente
                    const contadorElement = document.getElementById(`shares-${publicacionIdCompartir}`);
                    if (contadorElement) {
                        contadorElement.textContent = data.contador_compartidos;
                    }

                    // Recargar primera página para asegurar consistencia
                    cargarPagina(1, false);
                    cargarDestacados();
                }
            } catch (error) {
                console.error('Error al registrar compartido:', error);
            }
        }

        // Nota: la inicialización principal ya se hace arriba (cargarPagina + initInfiniteScroll)
    </script>
@endsection