{{--
    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') }}"
        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"
     style="position:fixed;bottom:95px;right:28px;z-index:9998;
            width:400px;max-width:calc(100vw - 40px);
            background:#fff;border-radius:16px;
            box-shadow:0 8px 40px rgba(0,0,0,.22);
            overflow:hidden;flex-direction:column;
            border:1px solid #e2e8f0;
            animation:slideUp .2s ease">

    {{-- Header --}}
    <div style="background:linear-gradient(135deg,#1a3a5c 0%,#2563a8 100%);
                padding:14px 18px;display:flex;align-items:center;justify-content:space-between">
        <div style="display:flex;align-items:center;gap:10px">
            <div style="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">
                <i class="bi bi-robot"></i>
            </div>
            <div>
                <div style="color:#fff;font-weight:700;font-size:.9rem;font-family:'Poppins',sans-serif">
                    {{ __('Asistente') }}
                </div>
                <div style="color:rgba(255,255,255,.65);font-size:.72rem" id="asistente-status">
                    {{ __('¿Qué consulta quieres hacer hoy?') }}
                </div>
            </div>
        </div>
        <button onclick="toggleAsistente()"
                style="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:.9rem">
            <i class="bi bi-x-lg"></i>
        </button>
    </div>

    {{-- Mensajes --}}
    <div id="asistente-messages"
         style="flex:1;overflow-y:auto;padding:16px;
                display:flex;flex-direction:column;gap:10px;
                min-height:260px;max-height:380px;background:#f8fafc">
        {{-- Mensaje bienvenida --}}
        <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 datos, generar listados y exportar a Excel. ¿En qué te ayudo?') }}
            </div>
        </div>
    </div>

    {{-- Input --}}
    <div style="padding:12px 14px;border-top:1px solid #e2e8f0;background:#fff">
        <div style="display:flex;gap:8px;align-items:flex-end">
            <textarea id="asistente-input"
                      placeholder="{{ __('Escribe tu consulta...') }}"
                      rows="1"
                      style="flex:1;border:1.5px solid #e2e8f0;border-radius:10px;
                             padding:9px 12px;font-size:.85rem;resize:none;
                             font-family:'Inter',sans-serif;line-height:1.4;
                             outline:none;transition:border-color .2s;
                             max-height:100px;overflow-y:auto"
                      onkeydown="handleKey(event)"
                      oninput="autoResize(this)"></textarea>
            <button id="asistente-send"
                    onclick="enviarConsulta()"
                    style="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">
                <i class="bi bi-send-fill"></i>
            </button>
        </div>
        <div style="font-size:.68rem;color:#94a3b8;margin-top:5px;text-align:center">
            Enter {{ __('para enviar') }} · Shift+Enter {{ __('nueva línea') }}
        </div>
    </div>
</div>

<style>
@keyframes slideUp {
    from { opacity:0; transform:translateY(12px); }
    to   { opacity:1; transform:translateY(0); }
}
#asistente-btn:hover {
    transform: scale(1.08);
    box-shadow: 0 6px 24px rgba(26,58,92,.55);
}
#asistente-panel { display:none; }
#asistente-panel.open { display:flex !important; }

.msg-bubble {
    max-width: 85%;
    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; }

.msg-bubble-excel {
    background: #f0fdf4;
    border: 1.5px solid #86efac;
    border-radius: 4px 12px 12px 12px;
    padding: 10px 14px;
}
.msg-bubble-excel a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #16a34a;
    font-weight: 600;
    text-decoration: none;
    font-size: .84rem;
}
.msg-bubble-excel a:hover { text-decoration: underline; }

.typing-dots span {
    display: inline-block;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: #94a3b8;
    animation: blink 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 blink {
    0%,80%,100% { opacity:.25; transform:scale(.8); }
    40%         { opacity:1;   transform:scale(1); }
}

#asistente-input:focus { border-color: #2563a8; }
</style>

<script>
var asistentePanelOpen = false;
var sessionId = 'user_{{ auth()->id() ?? "guest" }}_' + Date.now();

function toggleAsistente() {
    var panel = document.getElementById('asistente-panel');
    var icon  = document.getElementById('asistente-btn-icon');
    asistentePanelOpen = !asistentePanelOpen;
    panel.classList.toggle('open', asistentePanelOpen);
    icon.className = asistentePanelOpen ? 'bi bi-x-lg' : 'bi bi-robot';
    if (asistentePanelOpen) {
        setTimeout(function () {
            document.getElementById('asistente-input').focus();
        }, 200);
    }
}

function handleKey(e) {
    if (e.key === 'Enter' && !e.shiftKey) {
        e.preventDefault();
        enviarConsulta();
    }
}

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

function addMessage(tipo, contenido) {
    var container = document.getElementById('asistente-messages');
    var wrap = document.createElement('div');
    wrap.className = 'msg-' + tipo;

    if (tipo === 'excel') {
        // Fichero Excel → enlace de descarga
        wrap.className = 'msg-bot';
        wrap.innerHTML =
            '<div class="msg-bubble msg-bubble-excel">' +
            '<div style="font-size:.75rem;color:#16a34a;margin-bottom:4px;font-weight:700">' +
            '<i class="bi bi-file-earmark-excel me-1"></i>{{ __("Archivo generado") }}</div>' +
            '<a href="' + contenido.url + '" download="' + contenido.nombre + '">' +
            '<i class="bi bi-download"></i>' + contenido.nombre +
            '</a>' +
            '</div>';
    } else if (tipo === 'bot') {
        wrap.innerHTML = '<div class="msg-bubble msg-bubble-bot">' + contenido + '</div>';
    } else {
        wrap.innerHTML = '<div class="msg-bubble msg-bubble-user">' + contenido + '</div>';
    }

    container.appendChild(wrap);
    container.scrollTop = container.scrollHeight;
    return wrap;
}

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

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

function setStatus(txt) {
    document.getElementById('asistente-status').textContent = txt;
}

function enviarConsulta() {
    var input = document.getElementById('asistente-input');
    var texto = input.value.trim();
    if (!texto) return;

    // Mostrar mensaje del usuario
    addMessage('user', escapeHtml(texto));
    input.value = '';
    input.style.height = 'auto';

    // Indicador de escritura
    addTyping();
    setStatus('{{ __("Procesando...") }}');

    var btn = document.getElementById('asistente-send');
    btn.disabled = true;
    btn.style.opacity = '.5';

    fetch('/asistente/consulta', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
        },
        body: JSON.stringify({
            prompt:     texto,
            session_id: sessionId,
        })
    })
    .then(function (r) { return r.json(); })
    .then(function (data) {
        removeTyping();
        btn.disabled = false;
        btn.style.opacity = '1';
        setStatus('{{ __("¿Qué consulta quieres hacer hoy?") }}');

        if (data.tipo === 'excel') {
            addMessage('excel', { url: data.url, nombre: data.nombre });
        } else if (data.tipo === 'mensaje') {
            addMessage('bot', escapeHtml(data.mensaje).replace(/\n/g, '<br>'));
        } else if (data.error) {
            addMessage('bot',
                '<i class="bi bi-exclamation-circle text-danger me-1"></i>' +
                escapeHtml(data.error));
        }
    })
    .catch(function (err) {
        removeTyping();
        btn.disabled = false;
        btn.style.opacity = '1';
        setStatus('{{ __("¿Qué consulta quieres hacer hoy?") }}');
        addMessage('bot',
            '<i class="bi bi-wifi-off text-danger me-1"></i>' +
            '{{ __("Error de conexión. Inténtalo de nuevo.") }}');
    });
}

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