{{-- Chatbot Widget --}}
<div id="chatbot-btn" title="Chat with us" onclick="toggleChat()">
    <i class="fas fa-comments" id="chat-icon-open"></i>
    <i class="fas fa-times hidden" id="chat-icon-close"></i>
    <span class="cb-pulse"></span>
</div>

<div id="chat-win">
    <div id="chat-head">
        <div class="w-10 h-10 bg-white/20 rounded-full flex items-center justify-center text-lg flex-shrink-0">🤖</div>
        <div>
            <div class="font-semibold text-[15px]">College Assistant</div>
            <div class="text-blue-200 text-xs flex items-center gap-1.5">
                <span class="w-1.5 h-1.5 bg-green-400 rounded-full"></span> Online
            </div>
        </div>
        <button onclick="toggleChat()" class="ml-auto text-white/70 hover:text-white text-lg leading-none">✕</button>
    </div>

    {{-- Category quick-nav --}}
    <div id="chat-cats" class="flex gap-2 overflow-x-auto px-3 py-2 border-b border-gray-100 bg-gray-50">
        <button class="qr-btn whitespace-nowrap text-[11px]" onclick="loadFeatured()">⭐ Quick Help</button>
    </div>

    <div id="chat-msgs">
        <div class="b-msg">
            Hello! 👋 Welcome to <strong>SSGMCE Shegaon</strong>. I'm your virtual assistant. How can I help you today?
        </div>
        <div id="quick-start">
            <div class="text-xs text-gray-400 mb-2">Popular questions:</div>
            <div class="qr-wrap" id="feat-faqs">
                <span class="text-gray-400 text-xs">Loading…</span>
            </div>
        </div>
    </div>

    <div id="feedback-bar" class="hidden px-3 py-2 bg-gray-50 border-t border-gray-100 text-xs text-gray-500">
        Was this helpful?
        <button onclick="sendFb(true)"  class="ml-2 text-green-600 font-semibold hover:text-green-700">👍 Yes</button>
        <button onclick="sendFb(false)" class="ml-1 text-red-500  font-semibold hover:text-red-600">👎 No</button>
    </div>

    <div id="chat-footer">
        <input id="chat-input" placeholder="Ask me anything…" onkeypress="if(event.key==='Enter')send()" autocomplete="off" maxlength="500">
        <button id="chat-send" onclick="send()">➤</button>
    </div>
    <p class="text-center text-[11px] text-gray-400 pb-2">
        Powered by <span class="text-primary-700 font-medium">SSGMCE</span>
    </p>
</div>

<script>
const API = '/api/chatbot';
let chatOpen = false, currentFaqId = null, chatInited = false;

function toggleChat() {
    chatOpen = !chatOpen;
    document.getElementById('chat-win').classList.toggle('open', chatOpen);
    document.getElementById('chat-icon-open').classList.toggle('hidden', chatOpen);
    document.getElementById('chat-icon-close').classList.toggle('hidden', !chatOpen);
    if (chatOpen && !chatInited) { initChat(); chatInited = true; }
    if (chatOpen) document.getElementById('chat-input').focus();
}

async function initChat() {
    try {
        const d = await fetch(`${API}/init`).then(r=>r.json());
        // populate categories
        const cBar = document.getElementById('chat-cats');
        (d.categories||[]).forEach(c => {
            const btn = document.createElement('button');
            btn.className = 'qr-btn whitespace-nowrap text-[11px]';
            btn.innerHTML = (c.icon ? `<i class="${c.icon} mr-1"></i>` : '') + c.name;
            btn.onclick = () => loadCat(c.id, c.name);
            cBar.appendChild(btn);
        });
        // populate featured FAQs
        const fc = document.getElementById('feat-faqs');
        fc.innerHTML = '';
        (d.featured_faqs||[]).forEach(f => {
            const btn = document.createElement('button');
            btn.className = 'qr-btn';
            btn.textContent = f.question;
            btn.onclick = () => clickFaq(f.id, f.question);
            fc.appendChild(btn);
        });
    } catch(e) {}
}

async function send() {
    const inp = document.getElementById('chat-input');
    const msg = inp.value.trim();
    if (!msg) return;
    inp.value = '';
    addUserMsg(msg);
    showTyping();
    hideFb();
    try {
        const d = await fetch(`${API}/message`,{
            method:'POST',
            headers:{'Content-Type':'application/json','X-CSRF-TOKEN':document.querySelector('meta[name=csrf-token]').content},
            body:JSON.stringify({message:msg})
        }).then(r=>r.json());
        removeTyping();
        addBotMsg(d.response, d.follow_ups||[]);
        if (d.faq_id) { currentFaqId = d.faq_id; showFb(); }
    } catch(e) {
        removeTyping();
        addBotMsg("Sorry, I'm having trouble. Call <strong>+91 8669638081</strong> or visit our <a href='/contact' class='chatbot-link'>contact page</a>.",[]);
    }
}

async function clickFaq(id, question) {
    addUserMsg(question);
    showTyping(); hideFb();
    const d = await fetch(`${API}/faq/${id}`).then(r=>r.json());
    removeTyping();
    addBotMsg(d.response, d.follow_ups||[]);
    currentFaqId = d.faq_id;
    showFb();
}

async function loadCat(id, name) {
    addBotMsg(`Questions about <strong>${name}</strong>:`, []);
    const d = await fetch(`${API}/categories/${id}/faqs`).then(r=>r.json());
    addBotMsg('', d.faqs||[]);
}

function loadFeatured() { document.getElementById('quick-start')?.scrollIntoView({behavior:'smooth'}); }

function addUserMsg(txt) {
    const d=document.createElement('div'); d.className='u-msg'; d.textContent=txt;
    msgs().appendChild(d); scroll();
}

function addBotMsg(html, followUps=[]) {
    const wrap = document.createElement('div');
    wrap.style.display='contents';
    if (html) {
        const d=document.createElement('div'); d.className='b-msg'; d.innerHTML=html;
        wrap.appendChild(d);
    }
    if (followUps.length) {
        const qw=document.createElement('div'); qw.className='qr-wrap';
        followUps.forEach(f=>{
            const btn=document.createElement('button'); btn.className='qr-btn';
            btn.textContent=f.question; btn.onclick=()=>clickFaq(f.id,f.question);
            qw.appendChild(btn);
        });
        wrap.appendChild(qw);
    }
    msgs().appendChild(wrap); scroll();
}

function showTyping() {
    const d=document.createElement('div'); d.id='typing'; d.className='b-msg typing';
    d.innerHTML='<span></span><span></span><span></span>';
    msgs().appendChild(d); scroll();
}
function removeTyping() { document.getElementById('typing')?.remove(); }
function msgs()  { return document.getElementById('chat-msgs'); }
function scroll(){ const m=msgs(); m.scrollTo({top:m.scrollHeight,behavior:'smooth'}); }
function showFb(){ document.getElementById('feedback-bar').classList.remove('hidden'); }
function hideFb(){ document.getElementById('feedback-bar').classList.add('hidden'); }

async function sendFb(helpful) {
    hideFb();
    if (!currentFaqId) return;
    await fetch(`${API}/feedback`,{
        method:'POST',
        headers:{'Content-Type':'application/json','X-CSRF-TOKEN':document.querySelector('meta[name=csrf-token]').content},
        body:JSON.stringify({faq_id:currentFaqId,helpful})
    });
    addBotMsg(helpful ? '🙏 Thank you for your feedback!' : "😔 Sorry! Try rephrasing or <a href='/contact' class='chatbot-link'>contact us</a>.",[]);
}
</script>