@php
    $mensajeria = app(\App\Services\MensajeriaService::class);
    $chatConfig = [
        'userId' => auth()->id(),
        'noLeidosInicial' => $mensajeria->contarNoLeidos(auth()->user()),
        'urls' => [
            'conversaciones' => route('mensajes.widget.conversaciones'),
            'conversacion' => route('mensajes.widget.conversacion', ['conversacion' => '__ID__']),
            'contactos' => route('mensajes.contactos'),
            'store' => route('mensajes.store'),
            'reply' => route('mensajes.reply', ['conversacion' => '__ID__']),
        ],
        'initial' => session('eva_chat'),
    ];
@endphp

<div
    class="eva-chat-widget"
    x-data="evaChatWidget(@js($chatConfig))"
    x-cloak
    @eva-chat-open.window="abrir()"
    @eva-chat-compose.window="abrirNuevo($event.detail)"
    @eva-chat-hilo.window="abrirHilo($event.detail?.conversacionId)"
>
    {{-- Botón flotante --}}
    <button
        type="button"
        class="eva-chat-fab"
        x-show="!abierto"
        x-transition.opacity
        @click="abrir()"
        aria-label="Abrir mensajes"
    >
        <x-menu-icon name="chat" class="eva-chat-fab-icon" />
        <span class="eva-chat-fab-badge" x-show="noLeidos > 0" x-text="noLeidos > 9 ? '9+' : noLeidos"></span>
    </button>

    {{-- Panel --}}
    <div
        class="eva-chat-panel"
        x-show="abierto"
        x-transition:enter="eva-chat-panel-enter"
        x-transition:enter-start="eva-chat-panel-enter-start"
        x-transition:enter-end="eva-chat-panel-enter-end"
        x-transition:leave="eva-chat-panel-leave"
        x-transition:leave-start="eva-chat-panel-leave-start"
        x-transition:leave-end="eva-chat-panel-leave-end"
        @click.outside="cerrar()"
    >
        <header class="eva-chat-head">
            <div class="eva-chat-head-main">
                <button
                    type="button"
                    class="eva-chat-back"
                    x-show="vista !== 'lista'"
                    @click="volver()"
                    aria-label="Volver"
                >&larr;</button>
                <div class="eva-chat-head-titles">
                    <h2 class="eva-chat-title" x-text="titulo"></h2>
                    <p class="eva-chat-subtitle" x-show="subtitulo" x-text="subtitulo"></p>
                </div>
            </div>
            <div class="eva-chat-head-actions">
                <button type="button" class="eva-chat-icon-btn" @click="irNuevo()" x-show="vista === 'lista'" title="Nuevo mensaje" aria-label="Nuevo mensaje">+</button>
                <button type="button" class="eva-chat-icon-btn" @click="cerrar()" title="Minimizar" aria-label="Minimizar">&minus;</button>
            </div>
        </header>

        {{-- Lista --}}
        <div class="eva-chat-body" x-show="vista === 'lista'">
            <div class="eva-chat-loading" x-show="cargandoLista">Cargando…</div>
            <template x-if="!cargandoLista && conversaciones.length === 0">
                <p class="eva-chat-empty">No tienes conversaciones aún.</p>
            </template>
            <ul class="eva-chat-list" x-show="!cargandoLista && conversaciones.length > 0">
                <template x-for="item in conversaciones" :key="item.id">
                    <li>
                        <button type="button" class="eva-chat-list-item" :class="{ 'is-unread': item.no_leidos > 0 }" @click="abrirHilo(item.id)">
                            <span class="eva-chat-avatar" x-show="!item.contacto?.foto_url">
                                <span x-text="item.contacto?.iniciales || '?'"></span>
                            </span>
                            <img class="eva-chat-avatar eva-chat-avatar-img" x-show="item.contacto?.foto_url" :src="item.contacto?.foto_url" alt="">
                            <span class="eva-chat-list-body">
                                <span class="eva-chat-list-top">
                                    <span class="eva-chat-list-name" x-text="item.contacto?.nombre || 'Usuario'"></span>
                                    <span class="eva-chat-list-date" x-text="item.fecha || ''"></span>
                                </span>
                                <span class="eva-chat-list-preview" x-text="item.preview || 'Sin mensajes'"></span>
                                <span class="eva-chat-list-curso" x-show="item.curso" x-text="item.curso"></span>
                            </span>
                            <span class="eva-chat-list-badge" x-show="item.no_leidos > 0" x-text="item.no_leidos > 9 ? '9+' : item.no_leidos"></span>
                        </button>
                    </li>
                </template>
            </ul>
        </div>

        {{-- Hilo --}}
        <div class="eva-chat-body eva-chat-thread-wrap" x-show="vista === 'hilo'">
            <div class="eva-chat-loading" x-show="cargandoHilo">Cargando…</div>
            <div class="eva-chat-thread" x-ref="thread" x-show="!cargandoHilo">
                <template x-for="msg in mensajes" :key="msg.id">
                    <article class="eva-mensaje-bubble" :class="msg.propio ? 'eva-mensaje-bubble-own' : 'eva-mensaje-bubble-other'">
                        <div class="eva-mensaje-bubble-body">
                            <p class="eva-mensaje-autor" x-show="!msg.propio" x-text="msg.autor?.nombre"></p>
                            <div class="eva-mensaje-texto" x-show="msg.cuerpo_texto" x-html="msg.cuerpo"></div>
                            <p class="eva-mensaje-envio-destinatarios" x-show="msg.otros_destinatarios?.length">
                                También enviado a: <span x-text="msg.otros_destinatarios.join(', ')"></span>
                            </p>
                            <ul class="eva-mensaje-adjuntos" x-show="msg.adjuntos?.length">
                                <template x-for="adj in msg.adjuntos" :key="adj.id">
                                    <li>
                                        <a :href="adj.url" class="eva-mensaje-adjunto-link" target="_blank" rel="noopener" x-text="adj.nombre"></a>
                                    </li>
                                </template>
                            </ul>
                            <time class="eva-mensaje-fecha" x-text="msg.fecha"></time>
                        </div>
                    </article>
                </template>
            </div>
            <form class="eva-chat-reply" x-show="!cargandoHilo" @submit.prevent="enviarRespuesta()">
                <textarea
                    x-model="respuestaTexto"
                    rows="2"
                    class="eva-chat-textarea"
                    placeholder="Escribe un mensaje…"
                    @keydown.enter.exact.prevent="enviarRespuesta()"
                ></textarea>
                <div class="eva-chat-reply-actions">
                    <label class="eva-chat-adj-btn">
                        📎
                        <input type="file" class="sr-only" multiple @change="seleccionarAdjuntos($event, 'respuesta')" accept="*/*">
                    </label>
                    <span class="eva-chat-adj-names" x-show="respuestaAdjuntos.length" x-text="respuestaAdjuntos.map(f => f.name).join(', ')"></span>
                    <button type="submit" class="eva-chat-send-btn" :disabled="enviando">Enviar</button>
                </div>
                <p class="eva-chat-error" x-show="errorRespuesta" x-text="errorRespuesta"></p>
            </form>
        </div>

        {{-- Nuevo --}}
        <div class="eva-chat-body eva-chat-compose" x-show="vista === 'nuevo'">
            <div class="eva-chat-compose-field">
                <label class="eva-chat-label">Para</label>
                <div class="relative" x-show="!destinatario">
                    <input
                        type="search"
                        class="eva-chat-input"
                        placeholder="Buscar contacto…"
                        x-model="busquedaContacto"
                        @input.debounce.300ms="buscarContactos()"
                        @focus="mostrarResultados = true"
                    >
                    <div class="eva-mensaje-dest-resultados" x-show="mostrarResultados && resultadosContacto.length">
                        <template x-for="c in resultadosContacto" :key="c.id">
                            <button type="button" class="eva-mensaje-dest-opcion" @click="elegirDestinatario(c)">
                                <span class="eva-chat-avatar eva-chat-avatar-sm" x-show="!c.foto_url"><span x-text="c.iniciales"></span></span>
                                <img class="eva-chat-avatar eva-chat-avatar-sm eva-chat-avatar-img" x-show="c.foto_url" :src="c.foto_url" alt="">
                                <span>
                                    <span class="block font-medium text-slate-900" x-text="c.nombre"></span>
                                    <span class="block text-xs text-slate-500" x-text="c.role"></span>
                                </span>
                            </button>
                        </template>
                    </div>
                </div>
                <div class="eva-mensaje-dest-seleccionado" x-show="destinatario">
                    <span class="eva-chat-avatar eva-chat-avatar-sm" x-show="!destinatario?.foto_url"><span x-text="destinatario?.iniciales"></span></span>
                    <img class="eva-chat-avatar eva-chat-avatar-sm eva-chat-avatar-img" x-show="destinatario?.foto_url" :src="destinatario?.foto_url" alt="">
                    <span class="flex-1 min-w-0">
                        <span class="block font-medium truncate" x-text="destinatario?.nombre"></span>
                        <span class="block text-xs text-slate-500" x-text="destinatario?.role"></span>
                    </span>
                    <button type="button" class="eva-mensaje-dest-quitar" @click="quitarDestinatario()">&times;</button>
                </div>
            </div>
            <div class="eva-chat-compose-field">
                <label class="eva-chat-label">Mensaje</label>
                <textarea x-model="nuevoTexto" rows="4" class="eva-chat-textarea" placeholder="Escribe tu mensaje…"></textarea>
            </div>
            <div class="eva-chat-reply-actions">
                <label class="eva-chat-adj-btn">
                    📎 Adjuntar
                    <input type="file" class="sr-only" multiple @change="seleccionarAdjuntos($event, 'nuevo')" accept="*/*">
                </label>
                <span class="eva-chat-adj-names" x-show="nuevoAdjuntos.length" x-text="nuevoAdjuntos.map(f => f.name).join(', ')"></span>
            </div>
            <button type="button" class="eva-chat-send-btn eva-chat-send-full" :disabled="enviando || !destinatario" @click="enviarNuevo()">Enviar mensaje</button>
            <p class="eva-chat-error" x-show="errorNuevo" x-text="errorNuevo"></p>
        </div>
    </div>
</div>