@extends('template.principal')

@section('titulo', 'Inicio')
@section('subtitulo', 'Dashboard')

@section('contenido')
@php
    // Membresía destinataria de las pruebas. El usuario del panel (guard `fsg`) NO es socio:
    // solo abre la pantalla; las notificaciones siguen yendo a una membresía.
    $membresiaPrueba = \App\Models\Modulos\Socios\Membresia::query()->orderBy('idMembresia')->first();
    $usuarioPanel    = auth('fsg')->user();
@endphp

<div class="container-fluid dashboard-inicio py-5">
    {{-- Sesión del panel: usuario, acceso a Horizon (solo si está instalado) y cierre de sesión --}}
    <div class="row justify-content-center mb-3">
        <div class="col-xl-8 col-lg-10">
            <div class="d-flex flex-wrap justify-content-between align-items-center gap-2">
                <span class="text-muted small">
                    <i class="fas fa-user-shield me-1"></i>
                    Sesión: <strong>{{ $usuarioPanel?->usuarioNombre ?: $usuarioPanel?->usuarioAlias }}</strong>
                </span>
                <div class="d-flex gap-2">
                    @if (\Illuminate\Support\Facades\Route::has('horizon.index'))
                        <a href="{{ route('horizon.index') }}" class="btn btn-outline-primary btn-sm">
                            <i class="fas fa-layer-group me-1"></i>Horizon
                        </a>
                    @endif
                    <form method="POST" action="{{ route('default.login.logout') }}" class="m-0">
                        @csrf
                        <button type="submit" class="btn btn-outline-secondary btn-sm">
                            <i class="fas fa-right-from-bracket me-1"></i>Cerrar sesión
                        </button>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <div class="row justify-content-center">
        <div class="col-xl-6 col-lg-8 col-md-10">
            <div class="card shadow-sm border-0">
                <div class="card-body p-4 p-md-5 text-center">

                    <div class="mb-2">
                        <i class="fas fa-bell fa-3x text-primary mb-3"></i>
                        <h1 class="h3 mb-2">Prueba de Notificaciones</h1>
                        <p class="text-muted mb-0">
                            Vista local para probar el módulo + librería de notificaciones
                            (Web/Reverb, Email y WhatsApp). Sin login: el destinatario es una
                            <strong>membresía</strong>.
                        </p>
                    </div>

                    @if ($membresiaPrueba)
                        <div class="alert alert-light border mt-4 mb-0 text-start small">
                            <div><strong>Membresía de prueba:</strong> {{ $membresiaPrueba->membresiaTitular ?? $membresiaPrueba->idMembresia }}</div>
                            <div><strong>idMembresia:</strong> {{ $membresiaPrueba->idMembresia }} &nbsp;·&nbsp; <strong>idIdentificador:</strong> {{ $membresiaPrueba->idIdentificador ?? '—' }}</div>
                        </div>
                    @else
                        <div class="alert alert-warning mt-4 mb-0 small">
                            No hay ninguna membresía en <code>wd_membresia</code>. Agrega una para poder probar.
                        </div>
                    @endif

                </div>
            </div>
        </div>
    </div>

    {{-- ==================================================================
        Pruebas de Reverb / Notificaciones
        ==================================================================
        Sección añadida — NO interfiere con el flujo /me. Permite disparar
        ejemplos de los 3 canales (Web, Email, WhatsApp) integrados con la
        librería App\Library\Notificaciones para validar configuración.
    --}}
    <div class="row justify-content-center mt-4">
        <div class="col-xl-8 col-lg-10">
            <div class="card shadow-sm border-0">
                <div class="card-header bg-light d-flex justify-content-between align-items-center">
                    <strong><i class="fas fa-broadcast-tower text-primary me-2"></i>Pruebas de Reverb / Notificaciones</strong>
                    <small class="text-muted">Canal: <code>notifications.membresia.{{ session('idMembresia') ?? optional(\App\Models\Modulos\Socios\Membresia::query()->orderBy('idMembresia')->first())->idMembresia ?? '?' }}</code></small>
                </div>
                <div class="card-body">
                    <p class="text-muted small mb-3">
                        Dispara un ejemplo en cada canal para verificar la configuración. La notificación
                        Web debe aparecer como toast en la esquina superior derecha y reflejarse en la
                        campana del navbar.
                    </p>

                    <div class="alert alert-warning small py-2 mb-3">
                        <strong><i class="fas fa-exclamation-triangle me-1"></i>Requisitos previos:</strong>
                        Para que las notificaciones funcionen correctamente, asegúrate de tener corriendo
                        los siguientes servicios en terminales separadas:
                        <div class="mt-2 p-2 rounded" style="background:#1e1e1e;color:#d4d4d4;font-family:monospace;font-size:.8rem;">
                            <div><span class="text-success"># Procesador de colas</span></div>
                            <div>php artisan queue:work database --queue=notifications-high,notifications,notifications-low</div>
                            <div class="mt-1"><span class="text-success"># Servidor Reverb (WebSockets) — por defecto puerto 6003, personalizable con --port</span></div>
                            <div>php artisan reverb:start --host=0.0.0.0 --port=6003</div>
                        </div>
                    </div>

                    <div class="d-grid gap-2 d-md-flex flex-md-wrap">
                        <button type="button" class="btn btn-primary" id="fsgBroadcastBtnWeb">
                            <i class="fas fa-bell me-1"></i>Notificación Web
                            <span class="spinner-border spinner-border-sm ms-2 d-none"></span>
                        </button>
                        <button type="button" class="btn btn-info text-white" id="fsgBroadcastBtnEmail">
                            <i class="fas fa-envelope me-1"></i>Email
                        </button>
                        <button type="button" class="btn" id="fsgBroadcastBtnWhatsApp"
                                style="background-color:#25D366;color:#fff;">
                            <i class="fab fa-whatsapp me-1"></i>WhatsApp
                        </button>
                    </div>

                    <hr>

                    <h6 class="text-muted small mb-2"><i class="fas fa-stream me-1"></i>Log de pruebas</h6>
                    <div id="fsgBroadcastLog"
                         style="max-height:200px;overflow-y:auto;font-family:monospace;
                                font-size:.8rem;background:#1e1e1e;color:#d4d4d4;
                                padding:10px;border-radius:4px;">
                        <div class="text-muted">— Sin actividad —</div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Modal: Email --}}
    <div class="modal fade" id="fsgBroadcastEmailModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header bg-info text-white">
                    <h5 class="modal-title"><i class="fas fa-envelope me-2"></i>Enviar Email de Prueba</h5>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <label class="form-label small">Correo destinatario (opcional)</label>
                    <input type="email" class="form-control" id="fsgBroadcastEmailDest"
                           placeholder="Si lo dejas vacío, se enviará al correo del usuario actual">
                    <small class="form-text text-muted">El envío es síncrono — verás el resultado al instante.</small>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">Cancelar</button>
                    <button type="button" class="btn btn-info btn-sm text-white" id="fsgBroadcastEmailEnviar">
                        <i class="fas fa-paper-plane me-1"></i>Enviar
                        <span class="spinner-border spinner-border-sm ms-2 d-none"></span>
                    </button>
                </div>
            </div>
        </div>
    </div>

    {{-- Modal: WhatsApp --}}
    <div class="modal fade" id="fsgBroadcastWhatsAppModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header text-white" style="background:#25D366;">
                    <h5 class="modal-title"><i class="fab fa-whatsapp me-2"></i>Enviar WhatsApp de Prueba</h5>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <label class="form-label small">Número de teléfono</label>
                    <input type="text" class="form-control" id="fsgBroadcastWhatsAppTel"
                           placeholder="Ej: 529513128198" maxlength="15">
                    <small class="form-text text-muted">Incluir código de país (52 para México). Mínimo 10 dígitos.</small>
                    <div class="alert alert-info small mt-3 mb-0">
                        Se enviará usando el template <code>not_notificacion_prueba</code> de Meta.
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">Cancelar</button>
                    <button type="button" class="btn btn-sm text-white" id="fsgBroadcastWhatsAppEnviar"
                            style="background:#25D366;">
                        <i class="fas fa-paper-plane me-1"></i>Enviar
                        <span class="spinner-border spinner-border-sm ms-2 d-none"></span>
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('javascript')
@include('modulos.default.inicio._endpoints')
@include('modulos.default.inicio._endpoints-broadcast-test')
<script src="{{ asset('/assets/js/modulos/default/inicio/broadcast-test.js') }}"></script>
@endpush