{{-- ============================================================
     TB Assistant — Floating Robot Chat Widget
     resources/views/components/tb-assistant.blade.php
     ============================================================ --}}

<style>
/* ── Base wrapper ──────────────────────────────────────────── */
#tba-wrap {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
}

/* ── Floating button ──────────────────────────────────────── */
#tba-btn {
    position: relative;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: #0A2540;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 24px rgba(0,0,0,0.28);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    outline: none;
    flex-shrink: 0;
}
#tba-btn:hover {
    transform: scale(1.08);
    box-shadow: 0 10px 32px rgba(0,0,0,0.36);
}
#tba-btn:focus-visible {
    outline: 3px solid #00C9A7;
    outline-offset: 3px;
}

/* Pulse ring */
#tba-pulse {
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    border: 2px solid #00C9A7;
    animation: tbaPulse 2s ease-out infinite;
    pointer-events: none;
}
@keyframes tbaPulse {
    0%   { transform: scale(1);   opacity: 0.9; }
    70%  { transform: scale(1.7); opacity: 0;   }
    100% { transform: scale(1.7); opacity: 0;   }
}

/* Notification badge */
#tba-badge {
    position: absolute;
    top: -2px;
    right: -2px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #E53E3E;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #fff;
    transform: scale(0);
    animation: tbaBadgePop 0.4s cubic-bezier(0.34,1.56,0.64,1) 0.6s forwards;
}
@keyframes tbaBadgePop {
    0%   { transform: scale(0); }
    100% { transform: scale(1); }
}

/* ── Popup ────────────────────────────────────────────────── */
#tba-popup {
    width: 300px;
    border-radius: 16px 16px 4px 16px;
    background: #fff;
    border: 1px solid rgba(0,0,0,0.10);
    box-shadow: 0 12px 48px rgba(0,0,0,0.18);
    overflow: hidden;
    transform-origin: bottom right;
    display: none;
    flex-direction: column;
}
/* masuk */
#tba-popup.tba-entering {
    display: flex;
    animation: tbaPopIn 0.25s ease both;
}
/* keluar */
#tba-popup.tba-leaving {
    display: flex;
    animation: tbaPopOut 0.22s ease both;
    pointer-events: none;
}
@keyframes tbaPopIn {
    from { opacity: 0; transform: scale(0.8) translateY(20px); }
    to   { opacity: 1; transform: scale(1)   translateY(0);    }
}
@keyframes tbaPopOut {
    from { opacity: 1; transform: scale(1)   translateY(0);    }
    to   { opacity: 0; transform: scale(0.8) translateY(20px); }
}

/* ── Header ───────────────────────────────────────────────── */
#tba-header {
    background: #0A2540;
    padding: 12px 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}
#tba-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #00C9A7;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
#tba-header-info { flex: 1; min-width: 0; }
#tba-header-name {
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.2;
}
#tba-header-sub {
    color: rgba(255,255,255,0.60);
    font-size: 11px;
    line-height: 1.2;
}
#tba-close {
    background: none;
    border: none;
    color: rgba(255,255,255,0.70);
    font-size: 18px;
    cursor: pointer;
    padding: 0 2px;
    line-height: 1;
    transition: color 0.15s;
    outline: none;
}
#tba-close:hover { color: #fff; }

/* ── Messages area ────────────────────────────────────────── */
#tba-messages {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px;
    max-height: 220px;
    overflow-y: auto;
    scroll-behavior: smooth;
    flex: 1;
}
#tba-messages::-webkit-scrollbar {
    width: 4px;
}
#tba-messages::-webkit-scrollbar-track {
    background: transparent;
}
#tba-messages::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,0.12);
    border-radius: 4px;
}

/* Bot bubble */
.msg-bot {
    font-size: 12px;
    line-height: 1.7;
    color: #1a1a2e;
    background: #f0faf8;
    border-left: 3px solid #00C9A7;
    border-radius: 0 8px 8px 8px;
    padding: 10px 12px;
    white-space: pre-line;
    animation: tbaSlideUp 0.35s ease both;
}

/* User bubble */
.msg-user {
    background: #0A2540;
    color: #ffffff;
    border-radius: 12px 12px 4px 12px;
    padding: 10px 12px;
    font-size: 12px;
    line-height: 1.6;
    max-width: 85%;
    align-self: flex-end;
    margin-left: auto;
    animation: tbaSlideUp 0.2s ease both;
}

@keyframes tbaSlideUp {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0);    }
}

/* ── Typing dots ──────────────────────────────────────────── */
#tba-typing {
    display: none;
    align-items: center;
    gap: 5px;
    padding: 4px 2px;
    flex-shrink: 0;
}
.tba-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #00C9A7;
    animation: tbaDotBounce 1.2s ease-in-out infinite;
}
.tba-dot:nth-child(2) { animation-delay: 0.18s; }
.tba-dot:nth-child(3) { animation-delay: 0.36s; }
@keyframes tbaDotBounce {
    0%, 80%, 100% { transform: translateY(0);   opacity: 0.5; }
    40%           { transform: translateY(-6px); opacity: 1;   }
}

/* ── Quick reply pills ────────────────────────────────────── */
#tba-quick-replies {
    display: flex;
    gap: 6px;
    padding: 6px 14px 4px;
    overflow-x: auto;
    scrollbar-width: none;
    flex-shrink: 0;
}
#tba-quick-replies::-webkit-scrollbar { display: none; }
.tba-quick-btn {
    white-space: nowrap;
    background: #f0faf8;
    border: 1px solid #00C9A7;
    border-radius: 20px;
    padding: 5px 12px;
    font-size: 11px;
    color: #0A2540;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    font-weight: 500;
}
.tba-quick-btn:hover {
    background: #00C9A7;
    color: #fff;
}

/* ── Input area ───────────────────────────────────────────── */
.chat-input-area {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-top: 0.5px solid rgba(0,0,0,0.1);
    flex-shrink: 0;
}
.chat-input-area input {
    flex: 1;
    border: 0.5px solid rgba(0,0,0,0.15);
    border-radius: 20px;
    padding: 8px 14px;
    font-size: 12px;
    outline: none;
    font-family: inherit;
    background: #fff;
    color: #1a1a2e;
}
.chat-input-area input:focus {
    border-color: #00C9A7;
}
.chat-input-area input:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}
.chat-send-btn {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #0A2540;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 14px;
    transition: background 0.2s;
    flex-shrink: 0;
}
.chat-send-btn:hover { background: #00C9A7; }
.chat-send-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.chat-send-btn svg {
    pointer-events: none;
}
</style>

{{-- ── Markup ──────────────────────────────────────────────── --}}
<div id="tba-wrap" role="complementary" aria-label="TB Assistant">

    {{-- Popup --}}
    <div id="tba-popup" role="dialog" aria-labelledby="tba-header-name" aria-modal="false">

        {{-- Header --}}
        <div id="tba-header">
            <div id="tba-avatar" aria-hidden="true">
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <rect x="6"    y="6"    width="12" height="9"   rx="2"    fill="#0A2540"/>
                    <circle cx="9.5"  cy="9.5"  r="1.2" fill="#00C9A7"/>
                    <circle cx="14.5" cy="9.5"  r="1.2" fill="#00C9A7"/>
                    <rect x="9"    y="12"   width="6"  height="1.5" rx="0.75" fill="#00C9A7"/>
                    <rect x="11"   y="4"    width="2"  height="2.5" rx="1"    fill="#0A2540"/>
                    <circle cx="12"   cy="3.5"  r="1"   fill="#00C9A7"/>
                    <rect x="4"    y="15"   width="16" height="6"   rx="2"    fill="#0A2540"/>
                    <rect x="2"    y="16"   width="2.5" height="4"  rx="1.2"  fill="#0A2540"/>
                    <rect x="19.5" y="16"   width="2.5" height="4"  rx="1.2"  fill="#0A2540"/>
                    <rect x="10.5" y="16.5" width="3"  height="1"   rx="0.5"  fill="#00C9A7"/>
                    <rect x="11.5" y="15.5" width="1"  height="3"   rx="0.5"  fill="#00C9A7"/>
                </svg>
            </div>
            <div id="tba-header-info">
                <div id="tba-header-name">TB Assistant</div>
                <div id="tba-header-sub">Asisten Deteksi Dini TB</div>
            </div>
            <button id="tba-close" aria-label="Tutup asisten">&times;</button>
        </div>

        {{-- Messages area --}}
        <div id="tba-messages" aria-live="polite" aria-label="Percakapan">
            {{-- Bubble-bubble akan di-append oleh JS --}}
            <div id="tba-typing" aria-label="Sedang mengetik…">
                <div class="tba-dot"></div>
                <div class="tba-dot"></div>
                <div class="tba-dot"></div>
            </div>
        </div>

        {{-- Quick reply pills --}}
        <div id="tba-quick-replies" aria-label="Pertanyaan cepat">
            <button class="tba-quick-btn" type="button">Apa itu TB?</button>
            <button class="tba-quick-btn" type="button">Cara konsultasi</button>
            <button class="tba-quick-btn" type="button">Arti nilai CF</button>
            <button class="tba-quick-btn" type="button">Langkah selanjutnya</button>
        </div>

        {{-- Input area --}}
        <div class="chat-input-area">
            <input
                type="text"
                id="tba-input"
                placeholder="Ketik pertanyaan tentang TB..."
                maxlength="500"
                autocomplete="off"
                aria-label="Ketik pesan"
            >
            <button class="chat-send-btn" id="tba-send" type="button" aria-label="Kirim pesan">
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M5 12h14M13 6l6 6-6 6" stroke="#fff" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
            </button>
        </div>
    </div>

    {{-- Floating button --}}
    <button id="tba-btn" aria-label="Buka TB Assistant" aria-expanded="false" aria-controls="tba-popup">
        <div id="tba-pulse" aria-hidden="true"></div>
        <span id="tba-badge" aria-label="1 pesan baru">1</span>
        <svg width="30" height="30" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
            <rect   x="22"  y="4"   width="4"  height="7"  rx="2"   fill="#00C9A7"/>
            <circle cx="24" cy="3.5" r="2.5" fill="#00C9A7"/>
            <rect   x="10"  y="10"  width="28" height="18" rx="4"   fill="#00C9A7"/>
            <circle cx="18" cy="19" r="3"   fill="#0A2540"/>
            <circle cx="17.2" cy="18.2" r="1" fill="#fff"/>
            <circle cx="30" cy="19" r="3"   fill="#0A2540"/>
            <circle cx="29.2" cy="18.2" r="1" fill="#fff"/>
            <rect   x="17"  y="24"  width="14" height="2"  rx="1"   fill="#0A2540"/>
            <rect   x="12"  y="30"  width="24" height="14" rx="3"   fill="#00C9A7"/>
            <rect   x="22"  y="33"  width="4"  height="8"  rx="1.5" fill="#0A2540"/>
            <rect   x="19"  y="36"  width="10" height="4"  rx="1.5" fill="#0A2540"/>
            <rect   x="5"   y="31"  width="7"  height="4"  rx="2"   fill="#00C9A7"/>
            <rect   x="36"  y="31"  width="7"  height="4"  rx="2"   fill="#00C9A7"/>
        </svg>
    </button>
</div>

<script>
(function () {
    'use strict';

    /* ── Elemen ──────────────────────────────────────────────── */
    var wrap      = document.getElementById('tba-wrap');
    var btn       = document.getElementById('tba-btn');
    var popup     = document.getElementById('tba-popup');
    var closeBtn  = document.getElementById('tba-close');
    var pulse     = document.getElementById('tba-pulse');
    var badge     = document.getElementById('tba-badge');
    var messages  = document.getElementById('tba-messages');
    var typing    = document.getElementById('tba-typing');
    var inputEl   = document.getElementById('tba-input');
    var sendBtn   = document.getElementById('tba-send');
    var quickBtns = document.querySelectorAll('.tba-quick-btn');

    var isOpen     = false;
    var greetShown = false;
    var isSending  = false;

    /* ── Helper: scroll ke bawah ─────────────────────────────── */
    function scrollDown() {
        messages.scrollTop = messages.scrollHeight;
    }

    /* ── Helper: tampilkan / sembunyikan typing ──────────────── */
    function showTyping() {
        /* Pastikan typing selalu berada di paling bawah */
        messages.appendChild(typing);
        typing.style.display = 'flex';
        scrollDown();
    }

    function hideTyping() {
        typing.style.display = 'none';
    }

    /* ── Helper: tambah bubble ───────────────────────────────── */
    function appendBubble(text, isUser) {
        var div = document.createElement('div');
        div.className = isUser ? 'msg-user' : 'msg-bot';
        div.textContent = text;
        /* Sisipkan sebelum typing indicator agar typing tetap terakhir */
        messages.insertBefore(div, typing);
        trimBubbles();
        scrollDown();
        return div;
    }

    /* ── Helper: batasi 10 bubble terakhir ───────────────────── */
    function trimBubbles() {
        var bubbles = messages.querySelectorAll('.msg-bot, .msg-user');
        while (bubbles.length > 10) {
            bubbles[0].remove();
            bubbles = messages.querySelectorAll('.msg-bot, .msg-user');
        }
    }

    /* ── sendMessage ─────────────────────────────────────────── */
    function sendMessage() {
        if (isSending) return;
        var text = inputEl.value.trim();
        if (!text) return;

        /* Nonaktifkan input & tombol kirim */
        isSending         = true;
        inputEl.disabled  = true;
        sendBtn.disabled  = true;

        /* Tampilkan bubble user */
        appendBubble(text, true);
        inputEl.value = '';

        /* Typing indicator */
        showTyping();

        /* Ambil CSRF token */
        var csrfMeta  = document.querySelector('meta[name="csrf-token"]');
        var csrfToken = csrfMeta ? csrfMeta.getAttribute('content') : '';

        /* Kirim ke endpoint */
        fetch('/assistant/chat', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': csrfToken
            },
            body: JSON.stringify({ message: text })
        })
        .then(function (res) {
            return res.json();
        })
        .then(function (data) {
            hideTyping();
            appendBubble(
                data.reply || 'Maaf, asisten sedang tidak tersedia. Coba lagi nanti.',
                false
            );
        })
        .catch(function () {
            hideTyping();
            appendBubble('Maaf, koneksi bermasalah. Coba lagi.', false);
        })
        .then(function () {
            /* Aktifkan kembali setelah selesai (pengganti .finally) */
            isSending         = false;
            inputEl.disabled  = false;
            sendBtn.disabled  = false;
            inputEl.focus();
        });
    }

    /* ── Buka popup ──────────────────────────────────────────── */
    function openPopup() {
        if (isOpen) return;
        isOpen = true;
        btn.setAttribute('aria-expanded', 'true');

        /* Sembunyikan pulse & badge */
        pulse.style.animation = 'none';
        pulse.style.opacity   = '0';
        badge.style.display   = 'none';

        /* Animasi masuk — gunakan flex agar kolom vertikal bekerja */
        popup.classList.remove('tba-leaving');
        popup.style.display = 'flex';
        popup.offsetWidth;                    /* reflow → restart animasi */
        popup.classList.add('tba-entering');

        /* Salam pembuka hanya sekali */
        if (!greetShown) {
            greetShown = true;
            showTyping();
            setTimeout(function () {
                hideTyping();
                appendBubble(
                    'Halo! Saya TB Assistant 🤖\nTanyakan apa saja seputar TB dan cara penggunaan website ini.',
                    false
                );
                inputEl.focus();
            }, 900);
        } else {
            inputEl.focus();
        }
    }

    /* ── Tutup popup ─────────────────────────────────────────── */
    function closePopup() {
        if (!isOpen) return;
        isOpen = false;
        btn.setAttribute('aria-expanded', 'false');

        popup.classList.remove('tba-entering');
        popup.classList.add('tba-leaving');

        popup.addEventListener('animationend', function onEnd() {
            popup.removeEventListener('animationend', onEnd);
            popup.classList.remove('tba-leaving');
            popup.style.display = 'none';
        });
    }

    /* ── Toggle FAB ──────────────────────────────────────────── */
    btn.addEventListener('click', function (e) {
        e.stopPropagation();
        if (isOpen) { closePopup(); } else { openPopup(); }
    });

    closeBtn.addEventListener('click', function (e) {
        e.stopPropagation();
        closePopup();
    });

    /* Klik di luar popup menutupnya */
    document.addEventListener('click', function (e) {
        if (isOpen && !wrap.contains(e.target)) {
            closePopup();
        }
    });

    /* Tombol Escape menutup popup */
    document.addEventListener('keydown', function (e) {
        if (isOpen && (e.key === 'Escape' || e.key === 'Esc')) {
            closePopup();
        }
    });

    /* ── Quick reply pills ───────────────────────────────────── */
    quickBtns.forEach(function (qBtn) {
        qBtn.addEventListener('click', function () {
            inputEl.value = qBtn.textContent.trim();
            sendMessage();
        });
    });

    /* ── Input: Enter & tombol kirim ────────────────────────── */
    sendBtn.addEventListener('click', sendMessage);

    inputEl.addEventListener('keydown', function (e) {
        if (e.key === 'Enter' && !e.shiftKey) {
            e.preventDefault();
            sendMessage();
        }
    });

}());
</script>