{{--
    Partial: layouts/_asistente.blade.php
    Incluir en layouts/app.blade.php justo antes de </body>:
    @include('layouts._asistente')
--}}

{{-- ── Botón flotante ── --}}
<button id="asistente-btn" onclick="toggleAsistente()"
        title="{{ __('Asistente IA') }}"
        style="position:fixed;bottom:28px;right:28px;z-index:9999;
               width:56px;height:56px;border-radius:50%;border:none;
               background:linear-gradient(135deg,#1a3a5c 0%,#2563a8 100%);
               color:#fff;font-size:1.3rem;cursor:pointer;
               box-shadow:0 4px 18px rgba(26,58,92,.45);
               display:flex;align-items:center;justify-content:center;
               transition:transform .2s,box-shadow .2s">
    <i class="bi bi-robot" id="asistente-btn-icon"></i>
</button>

{{-- ── Ventana de chat ── --}}
<div id="asistente-panel"
     class="asistente-panel"
     style="display:none">

    {{-- Header --}}
    <div class="asistente-header">
        <div style="display:flex;align-items:center;gap:10px">
            <div class="asistente-avatar">
                <i class="bi bi-robot"></i>
            </div>
            <div>
                <div class="asistente-title">{{ __('Asistente IA') }}</div>
                <div class="asistente-status" id="asistente-status">
                    {{ __('¿Qué consulta quieres hacer hoy?') }}
                </div>
            </div>
        </div>
        <div style="display:flex;gap:6px">
            <button onclick="limpiarHistorial()"
                    title="{{ __('Nueva conversación') }}"
                    class="asistente-header-btn">
                <i class="bi bi-arrow-counterclockwise"></i>
            </button>
            <button onclick="toggleAsistente()"
                    title="{{ __('Cerrar') }}"
                    class="asistente-header-btn">
                <i class="bi bi-x-lg"></i>
            </button>
        </div>
    </div>

    {{-- Mensajes --}}
    <div id="asistente-messages" class="asistente-messages">
        <div class="msg-bot">
            <div class="msg-bubble msg-bubble-bot">
                <i class="bi bi-stars me-1" style="color:#f5b731"></i>
                {{ __('Hola, soy tu asistente. Puedo consultar los datos de la aplicación y exportarlos a Excel. ¿En qué te ayudo?') }}
            </div>
        </div>
    </div>

    {{-- Input --}}
    <div class="asistente-footer">
        <div style="display:flex;gap:8px;align-items:flex-end">
            <textarea id="asistente-input"
                      class="asistente-input"
                      placeholder="{{ __('Escribe tu consulta...') }}"
                      rows="1"
                      onkeydown="handleAsiKey(event)"
                      oninput="autoAsiResize(this)"></textarea>
            <button id="asistente-send"
                    onclick="enviarConsulta()"
                    class="asistente-send-btn">
                <i class="bi bi-send-fill"></i>
            </button>
        </div>
        <div class="asistente-hint">
            Enter {{ __('para enviar') }} · Shift+Enter {{ __('nueva línea') }}
        </div>
    </div>
</div>

<style>
/* ── Botón flotante ─────────────────────────────── */
#asistente-btn:hover {
    transform: scale(1.08);
    box-shadow: 0 6px 24px rgba(26,58,92,.55);
}

/* ── Panel ──────────────────────────────────────── */
@keyframes asiSlideUp {
    from { opacity:0; transform:translateY(14px); }
    to   { opacity:1; transform:translateY(0); }
}
.asistente-panel {
    position: fixed;
    bottom: 95px;
    right: 28px;
    z-index: 9998;
    width: 420px;
    max-width: calc(100vw - 40px);
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 8px 40px rgba(0,0,0,.22);
    border: 1px solid #e2e8f0;
    display: flex;
    flex-direction: column;
    animation: asiSlideUp .2s ease;
}

/* ── Header ─────────────────────────────────────── */
.asistente-header {
    background: linear-gradient(135deg,#1a3a5c 0%,#2563a8 100%);
    padding: 14px 16px;
    border-radius: 16px 16px 0 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.asistente-avatar {
    width: 36px; height: 36px; border-radius: 50%;
    background: rgba(255,255,255,.15);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.1rem; color: #fff;
}
.asistente-title {
    color: #fff; font-weight: 700; font-size: .88rem;
    font-family: 'Poppins', sans-serif;
}
.asistente-status {
    color: rgba(255,255,255,.65); font-size: .72rem;
    transition: color .2s;
}
.asistente-status.processing { color: #f5b731; }
.asistente-header-btn {
    background: rgba(255,255,255,.15); border: none; border-radius: 8px;
    color: #fff; width: 30px; height: 30px; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    font-size: .85rem; transition: background .15s;
}
.asistente-header-btn:hover { background: rgba(255,255,255,.28); }

/* ── Mensajes ───────────────────────────────────── */
.asistente-messages {
    flex: 1; overflow-y: auto; padding: 16px;
    display: flex; flex-direction: column; gap: 10px;
    min-height: 260px; max-height: 380px; background: #f8fafc;
}
.asistente-messages::-webkit-scrollbar { width: 4px; }
.asistente-messages::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }

.msg-bubble {
    max-width: 88%; padding: 9px 13px; border-radius: 12px;
    font-size: .84rem; line-height: 1.5; word-break: break-word;
}
.msg-bubble-bot {
    background: #fff; border: 1px solid #e2e8f0; color: #1e293b;
    border-radius: 4px 12px 12px 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,.07);
}
.msg-bubble-user {
    background: linear-gradient(135deg,#1a3a5c,#2563a8);
    color: #fff; border-radius: 12px 4px 12px 12px; margin-left: auto;
}
.msg-bot  { display: flex; }
.msg-user { display: flex; justify-content: flex-end; }

/* Excel */
.msg-bubble-excel {
    background: #f0fdf4; border: 1.5px solid #86efac;
    border-radius: 4px 12px 12px 12px;
    padding: 11px 14px; max-width: 88%;
}
.msg-bubble-excel .excel-title {
    font-size: .72rem; color: #16a34a; font-weight: 700; margin-bottom: 6px;
}
.msg-bubble-excel a {
    display: inline-flex; align-items: center; gap: 7px;
    color: #16a34a; font-weight: 600; text-decoration: none; font-size: .84rem;
    background: #dcfce7; padding: 6px 12px; border-radius: 8px;
    border: 1px solid #86efac; transition: background .15s;
}
.msg-bubble-excel a:hover { background: #bbf7d0; }

/* Error */
.msg-bubble-error {
    background: #fff1f2; border: 1px solid #fecdd3; color: #be123c;
    border-radius: 4px 12px 12px 12px; max-width: 88%;
}

/* Typing dots */
.typing-dots span {
    display: inline-block; width: 6px; height: 6px;
    border-radius: 50%; background: #94a3b8;
    animation: asiDot 1.2s infinite; margin: 0 1px;
}
.typing-dots span:nth-child(2) { animation-delay: .2s; }
.typing-dots span:nth-child(3) { animation-delay: .4s; }
@keyframes asiDot {
    0%,80%,100% { opacity:.25; transform:scale(.8); }
    40%         { opacity:1;   transform:scale(1); }
}

/* ── Footer ─────────────────────────────────────── */
.asistente-footer {
    padding: 11px 13px; border-top: 1px solid #e2e8f0; background: #fff;
    border-radius: 0 0 16px 16px;
}
.asistente-input {
    flex: 1; border: 1.5px solid #e2e8f0; border-radius: 10px;
    padding: 9px 12px; font-size: .84rem; resize: none;
    font-family: 'Inter', sans-serif; line-height: 1.4;
    outline: none; transition: border-color .2s;
    max-height: 100px; overflow-y: auto; width: 100%;
}
.asistente-input:focus { border-color: #2563a8; }
.asistente-send-btn {
    background: #1a3a5c; border: none; border-radius: 10px;
    color: #fff; width: 40px; height: 40px; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    font-size: .95rem; flex-shrink: 0; transition: opacity .2s, background .2s;
}
.asistente-send-btn:hover { background: #2563a8; }
.asistente-send-btn:disabled { opacity: .45; cursor: not-allowed; }
.asistente-hint {
    font-size: .68rem; color: #94a3b8; margin-top: 5px; text-align: center;
}
</style>

<script>
(function () {
    var panelOpen   = false;
    var cargando    = false;
    var sessionId   = 'user_{{ auth()->id() ?? "guest" }}_{{ Str::random(8) }}';
    var csrfToken   = document.querySelector('meta[name="csrf-token"]').getAttribute('content');

    /* ── Toggle panel ── */
    window.toggleAsistente = function () {
        var panel = document.getElementById('asistente-panel');
        var icon  = document.getElementById('asistente-btn-icon');
        panelOpen = !panelOpen;
        panel.style.display = panelOpen ? 'flex' : 'none';
        icon.className = panelOpen ? 'bi bi-x-lg' : 'bi bi-robot';
        if (panelOpen) {
            setTimeout(function () {
                document.getElementById('asistente-input').focus();
            }, 180);
        }
    };

    /* ── Limpiar historial (nueva conversación) ── */
    window.limpiarHistorial = function () {
        fetch('/asistente/historial', {
            method: 'DELETE',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': csrfToken,
            },
            body: JSON.stringify({ session_id: sessionId })
        }).catch(function () {});

        // Generar nueva sesión
        sessionId = 'user_{{ auth()->id() ?? "guest" }}_' + Date.now();

        // Limpiar mensajes y dejar solo el de bienvenida
        var msgs = document.getElementById('asistente-messages');
        msgs.innerHTML =
            '<div class="msg-bot">' +
            '<div class="msg-bubble msg-bubble-bot">' +
            '<i class="bi bi-stars me-1" style="color:#f5b731"></i>' +
            '{{ __("Conversación reiniciada. ¿En qué te ayudo?") }}' +
            '</div></div>';
    };

    /* ── Enviar consulta ── */
    window.enviarConsulta = function () {
        if (cargando) return;
        var input = document.getElementById('asistente-input');
        var texto = input.value.trim();
        if (!texto) return;

        addMessage('user', escHtml(texto));
        input.value = '';
        input.style.height = 'auto';

        addTyping();
        setStatus('{{ __("Procesando...") }}', true);
        setBtnLoading(true);
        cargando = true;

        fetch('/asistente/consulta', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': csrfToken,
            },
            body: JSON.stringify({ prompt: texto, session_id: sessionId })
        })
        .then(function (r) {
            if (!r.ok) throw new Error('HTTP ' + r.status);
            return r.json();
        })
        .then(function (data) {
            removeTyping();
            setBtnLoading(false);
            cargando = false;
            setStatus('{{ __("¿Qué consulta quieres hacer hoy?") }}', false);

            if (data.tipo === 'excel') {
                addExcelMsg(data.nombre, data.url);
            } else if (data.tipo === 'mensaje') {
                addMessage('bot', escHtml(data.mensaje).replace(/\n/g, '<br>'));
            } else {
                addErrorMsg(data.error || '{{ __("Respuesta desconocida.") }}');
            }
        })
        .catch(function (err) {
            removeTyping();
            setBtnLoading(false);
            cargando = false;
            setStatus('{{ __("¿Qué consulta quieres hacer hoy?") }}', false);
            addErrorMsg('{{ __("Error de conexión. Verifica que la API Python está activa.") }}');
        });
    };

    /* ── Teclas ── */
    window.handleAsiKey = function (e) {
        if (e.key === 'Enter' && !e.shiftKey) {
            e.preventDefault();
            enviarConsulta();
        }
    };

    window.autoAsiResize = function (el) {
        el.style.height = 'auto';
        el.style.height = Math.min(el.scrollHeight, 100) + 'px';
    };

    /* ── Helpers DOM ── */
    function addMessage(tipo, html) {
        var c = document.getElementById('asistente-messages');
        var d = document.createElement('div');
        d.className = 'msg-' + tipo;
        var cls = tipo === 'user' ? 'msg-bubble-user' : 'msg-bubble-bot';
        d.innerHTML = '<div class="msg-bubble ' + cls + '">' + html + '</div>';
        c.appendChild(d);
        c.scrollTop = c.scrollHeight;
    }

    function addExcelMsg(nombre, url) {
        var c = document.getElementById('asistente-messages');
        var d = document.createElement('div');
        d.className = 'msg-bot';
        d.innerHTML =
            '<div class="msg-bubble-excel">' +
            '<div class="excel-title"><i class="bi bi-file-earmark-excel me-1"></i>{{ __("Archivo generado correctamente") }}</div>' +
            '<a href="' + url + '" download="' + nombre + '" target="_blank">' +
            '<i class="bi bi-download"></i>' + nombre +
            '</a>' +
            '</div>';
        c.appendChild(d);
        c.scrollTop = c.scrollHeight;
    }

    function addErrorMsg(msg) {
        var c = document.getElementById('asistente-messages');
        var d = document.createElement('div');
        d.className = 'msg-bot';
        d.innerHTML =
            '<div class="msg-bubble msg-bubble-error">' +
            '<i class="bi bi-exclamation-circle me-1"></i>' + escHtml(msg) +
            '</div>';
        c.appendChild(d);
        c.scrollTop = c.scrollHeight;
    }

    function addTyping() {
        var c = document.getElementById('asistente-messages');
        var d = document.createElement('div');
        d.className = 'msg-bot';
        d.id = 'asi-typing';
        d.innerHTML =
            '<div class="msg-bubble msg-bubble-bot" style="padding:10px 14px">' +
            '<div class="typing-dots"><span></span><span></span><span></span></div>' +
            '</div>';
        c.appendChild(d);
        c.scrollTop = c.scrollHeight;
    }

    function removeTyping() {
        var t = document.getElementById('asi-typing');
        if (t) t.remove();
    }

    function setStatus(txt, processing) {
        var s = document.getElementById('asistente-status');
        s.textContent = txt;
        s.classList.toggle('processing', !!processing);
    }

    function setBtnLoading(loading) {
        var btn = document.getElementById('asistente-send');
        btn.disabled = loading;
        btn.querySelector('i').className = loading ? 'bi bi-hourglass-split' : 'bi bi-send-fill';
    }

    function escHtml(s) {
        return s.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;');
    }
})();
</script>