@php
    $chatbotEnabled = \App\Models\Setting::get('chatbot_enabled', 'off') === 'on';
@endphp

@if($chatbotEnabled && module_enabled('chatbot'))
<!-- Chatbot Widget -->
<style>
    #chatbot-toggle {
        position: fixed;
        bottom: 20px;
        right: 30px;
        width: 56px;
        height: 56px;
        border-radius: 50%;
        background: linear-gradient(135deg, #4e73df, #2e59d9);
        color: white;
        border: none;
        cursor: pointer;
        box-shadow: 0 4px 15px rgba(78, 115, 223, 0.4);
        z-index: 999;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.3s ease;
        font-size: 1.4rem;
    }
    #chatbot-toggle:hover {
        transform: scale(1.1);
        box-shadow: 0 6px 20px rgba(78, 115, 223, 0.6);
    }
    #chatbot-window {
        position: fixed;
        bottom: 90px;
        right: 30px;
        width: 370px;
        max-height: 480px;
        border-radius: 16px;
        box-shadow: 0 10px 40px rgba(0,0,0,0.2);
        z-index: 998;
        display: none;
        flex-direction: column;
        overflow: hidden;
        background: #fff;
        animation: chatSlideUp 0.3s ease;
    }
    @keyframes chatSlideUp {
        from { opacity: 0; transform: translateY(20px); }
        to { opacity: 1; transform: translateY(0); }
    }
    #chatbot-window.open {
        display: flex;
    }
    .chatbot-header {
        background: linear-gradient(135deg, #4e73df, #2e59d9);
        color: white;
        padding: 16px 20px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-shrink: 0;
    }
    .chatbot-header h6 {
        margin: 0;
        font-weight: 700;
        font-size: 1rem;
    }
    .chatbot-header small {
        opacity: 0.8;
        font-size: 0.75rem;
    }
    .chatbot-header-actions {
        display: flex;
        align-items: center;
        gap: 8px;
    }
    .chatbot-close {
        background: none;
        border: none;
        color: white;
        font-size: 1.2rem;
        cursor: pointer;
        padding: 0;
        opacity: 0.8;
        transition: opacity 0.2s;
    }
    .chatbot-close:hover {
        opacity: 1;
    }
    .chatbot-end-btn {
        background: rgba(255,255,255,0.2);
        border: 1px solid rgba(255,255,255,0.4);
        color: white;
        font-size: 0.75rem;
        cursor: pointer;
        padding: 3px 10px;
        border-radius: 12px;
        display: flex;
        align-items: center;
        gap: 4px;
        transition: background 0.2s;
        white-space: nowrap;
    }
    .chatbot-end-btn:hover {
        background: rgba(255,255,255,0.35);
    }
    /* Pre-chat form */
    .chatbot-prechat {
        padding: 20px;
        flex: 1;
        overflow-y: auto;
    }
    .chatbot-prechat p {
        color: #666;
        font-size: 0.875rem;
        margin-bottom: 16px;
    }
    .chatbot-prechat .form-group {
        margin-bottom: 12px;
    }
    .chatbot-prechat label {
        font-size: 0.8rem;
        font-weight: 600;
        color: #444;
        margin-bottom: 4px;
        display: block;
    }
    .chatbot-prechat input {
        width: 100%;
        border: 1px solid #ddd;
        border-radius: 8px;
        padding: 10px 12px;
        font-size: 0.875rem;
        outline: none;
        transition: border-color 0.2s;
        box-sizing: border-box;
    }
    .chatbot-prechat input:focus {
        border-color: #4e73df;
    }
    .chatbot-prechat .btn-start {
        width: 100%;
        background: linear-gradient(135deg, #4e73df, #2e59d9);
        color: white;
        border: none;
        border-radius: 8px;
        padding: 12px;
        font-size: 0.9rem;
        font-weight: 600;
        cursor: pointer;
        transition: opacity 0.2s;
    }
    .chatbot-prechat .btn-start:hover {
        opacity: 0.9;
    }
    .chatbot-prechat .btn-start:disabled {
        opacity: 0.6;
        cursor: not-allowed;
    }
    .chatbot-prechat .error-msg {
        color: #e74c3c;
        font-size: 0.8rem;
        margin-top: 8px;
        display: none;
    }
    /* Chat area */
    .chatbot-messages {
        flex: 1;
        overflow-y: auto;
        padding: 16px;
        max-height: 360px;
        min-height: 200px;
    }
    .chatbot-message {
        margin-bottom: 12px;
        display: flex;
    }
    .chatbot-message.user {
        justify-content: flex-end;
    }
    .chatbot-message .bubble {
        max-width: 80%;
        padding: 10px 14px;
        border-radius: 16px;
        font-size: 0.875rem;
        line-height: 1.5;
        word-wrap: break-word;
    }
    .chatbot-message.assistant .bubble {
        background: #f0f2f5;
        color: #333;
        border-bottom-left-radius: 4px;
    }
    .chatbot-message.user .bubble {
        background: #4e73df;
        color: white;
        border-bottom-right-radius: 4px;
    }
    .chatbot-typing {
        display: none;
        margin-bottom: 12px;
        padding: 0 16px;
    }
    .chatbot-typing .bubble {
        background: #f0f2f5;
        padding: 12px 18px;
        border-radius: 16px;
        border-bottom-left-radius: 4px;
        display: flex;
        gap: 4px;
    }
    .chatbot-typing .dot {
        width: 8px;
        height: 8px;
        background: #999;
        border-radius: 50%;
        animation: typingDot 1.4s infinite;
    }
    .chatbot-typing .dot:nth-child(2) { animation-delay: 0.2s; }
    .chatbot-typing .dot:nth-child(3) { animation-delay: 0.4s; }
    @keyframes typingDot {
        0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
        30% { transform: translateY(-6px); opacity: 1; }
    }
    .chatbot-input {
        display: flex;
        padding: 12px 16px;
        border-top: 1px solid #e0e0e0;
        background: #fafafa;
        flex-shrink: 0;
    }
    .chatbot-input input {
        flex: 1;
        border: 1px solid #ddd;
        border-radius: 24px;
        padding: 8px 16px;
        font-size: 0.875rem;
        outline: none;
        transition: border-color 0.2s;
    }
    .chatbot-input input:focus {
        border-color: #4e73df;
    }
    .chatbot-input button {
        background: #4e73df;
        color: white;
        border: none;
        border-radius: 50%;
        width: 36px;
        height: 36px;
        margin-left: 8px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: background 0.2s;
    }
    .chatbot-input button:hover {
        background: #2e59d9;
    }
    .chatbot-input button:disabled {
        background: #ccc;
        cursor: not-allowed;
    }
    /* Rating form */
    .chatbot-rating {
        padding: 20px;
        text-align: center;
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    .chatbot-rating h6 {
        color: #333;
        font-weight: 700;
        margin-bottom: 8px;
        font-size: 1rem;
    }
    .chatbot-rating p {
        color: #666;
        font-size: 0.85rem;
        margin-bottom: 16px;
    }
    .chatbot-rating .stars {
        display: flex;
        gap: 8px;
        margin-bottom: 16px;
    }
    .chatbot-rating .stars .star {
        font-size: 2rem;
        cursor: pointer;
        color: #ddd;
        transition: color 0.2s, transform 0.2s;
        background: none;
        border: none;
        padding: 0;
        line-height: 1;
    }
    .chatbot-rating .stars .star:hover,
    .chatbot-rating .stars .star.active {
        color: #f5a623;
        transform: scale(1.15);
    }
    .chatbot-rating textarea {
        width: 100%;
        border: 1px solid #ddd;
        border-radius: 8px;
        padding: 10px 12px;
        font-size: 0.85rem;
        outline: none;
        resize: none;
        height: 60px;
        margin-bottom: 12px;
        box-sizing: border-box;
        font-family: inherit;
    }
    .chatbot-rating textarea:focus {
        border-color: #4e73df;
    }
    .chatbot-rating .btn-submit-rating {
        width: 100%;
        background: linear-gradient(135deg, #4e73df, #2e59d9);
        color: white;
        border: none;
        border-radius: 8px;
        padding: 12px;
        font-size: 0.9rem;
        font-weight: 600;
        cursor: pointer;
        transition: opacity 0.2s;
    }
    .chatbot-rating .btn-submit-rating:hover {
        opacity: 0.9;
    }
    .chatbot-rating .btn-submit-rating:disabled {
        opacity: 0.6;
        cursor: not-allowed;
    }
    .chatbot-rating .btn-skip {
        background: none;
        border: none;
        color: #999;
        font-size: 0.8rem;
        cursor: pointer;
        margin-top: 8px;
        text-decoration: underline;
    }
    .chatbot-rating .btn-skip:hover {
        color: #666;
    }
    .chatbot-rating .error-msg {
        color: #e74c3c;
        font-size: 0.8rem;
        margin-bottom: 8px;
        display: none;
    }
    /* Thank you */
    .chatbot-thankyou {
        padding: 30px 20px;
        text-align: center;
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    .chatbot-thankyou .icon {
        font-size: 3rem;
        color: #1cc88a;
        margin-bottom: 12px;
    }
    .chatbot-thankyou h6 {
        color: #333;
        font-weight: 700;
        margin-bottom: 8px;
    }
    .chatbot-thankyou p {
        color: #666;
        font-size: 0.85rem;
    }
    .chatbot-thankyou .btn-new-chat {
        margin-top: 16px;
        background: linear-gradient(135deg, #4e73df, #2e59d9);
        color: white;
        border: none;
        border-radius: 8px;
        padding: 10px 20px;
        font-size: 0.85rem;
        font-weight: 600;
        cursor: pointer;
    }
    .chatbot-disclaimer {
        padding: 6px 16px;
        background: #fff8e1;
        border-top: 1px solid #ffe082;
        font-size: 0.7rem;
        color: #8d6e00;
        text-align: center;
        flex-shrink: 0;
    }
    @media (max-width: 480px) {
        #chatbot-toggle {
            bottom: 15px;
            right: 20px;
            width: 50px;
            height: 50px;
            font-size: 1.2rem;
        }
        #chatbot-window {
            width: calc(100vw - 20px);
            right: 10px;
            bottom: 160px;
        }
    }
</style>

<button id="chatbot-toggle" title="Chat com assistente virtual">
    <i class="bi bi-chat-dots-fill"></i>
</button>

<div id="chatbot-window">
    <div class="chatbot-header">
        <div>
            <h6><i class="bi bi-robot me-1"></i>Assistente Virtual</h6>
            <small>Online • Respostas instantâneas</small>
        </div>
        <div class="chatbot-header-actions">
            <button class="chatbot-end-btn" id="chatbot-end-btn" title="Finalizar conversa" style="display:none;">
                <i class="bi bi-x-circle"></i> Finalizar
            </button>
            <button class="chatbot-close" id="chatbot-close-btn">
                <i class="bi bi-chevron-down"></i>
            </button>
        </div>
    </div>

    <!-- Pre-chat Registration Form -->
    <div class="chatbot-prechat" id="chatbot-prechat">
        <p>Para um atendimento personalizado, por favor preencha seus dados:</p>
        <div class="form-group">
            <label for="chatbot-visitor-name">Nome <span style="color:#e74c3c">*</span></label>
            <input type="text" id="chatbot-visitor-name" placeholder="Seu nome completo" required>
        </div>
        <div class="form-group">
            <label for="chatbot-visitor-phone">Telefone <span style="color:#e74c3c">*</span></label>
            <input type="tel" id="chatbot-visitor-phone" placeholder="(00) 00000-0000">
        </div>
        <div class="form-group">
            <label for="chatbot-visitor-city">Cidade <span style="color:#e74c3c">*</span></label>
            <input type="text" id="chatbot-visitor-city" placeholder="Sua cidade">
        </div>
        <div class="error-msg" id="chatbot-register-error"></div>
        <button class="btn-start" id="chatbot-start-btn">
            <i class="bi bi-chat-dots me-1"></i>Iniciar Conversa
        </button>
    </div>

    <!-- Chat Area (hidden until registration) -->
    <div id="chatbot-chat-area" style="display:none; flex-direction:column; flex:1; overflow:hidden;">
        <div class="chatbot-messages" id="chatbot-messages">
            <div class="chatbot-message assistant">
                <div class="bubble" id="chatbot-welcome">Olá! Como posso ajudar você hoje?</div>
            </div>
        </div>
        <div class="chatbot-typing" id="chatbot-typing">
            <div class="bubble">
                <div class="dot"></div>
                <div class="dot"></div>
                <div class="dot"></div>
            </div>
        </div>
        <div class="chatbot-input" id="chatbot-input-area">
            <input type="text" id="chatbot-input" placeholder="Digite sua mensagem..." maxlength="1000" autocomplete="off">
            <button id="chatbot-send-btn" title="Enviar">
                <i class="bi bi-send-fill"></i>
            </button>
        </div>
        <div class="chatbot-disclaimer">
            <i class="bi bi-shield-check me-1"></i>Não compartilhe dados sensíveis (senha, cartão, CPF, outros) neste chat.
        </div>
    </div>

    <!-- Rating Form (hidden until conversation ends) -->
    <div class="chatbot-rating" id="chatbot-rating" style="display:none;">
        <h6><i class="bi bi-star me-1"></i>Avalie o Atendimento</h6>
        <p>Como foi sua experiência com nosso assistente?</p>
        <div class="stars" id="chatbot-stars">
            <button class="star" data-value="1">★</button>
            <button class="star" data-value="2">★</button>
            <button class="star" data-value="3">★</button>
            <button class="star" data-value="4">★</button>
            <button class="star" data-value="5">★</button>
        </div>
        <textarea id="chatbot-rating-comment" placeholder="Deixe um comentário (opcional)..."></textarea>
        <div class="error-msg" id="chatbot-rating-error"></div>
        <button class="btn-submit-rating" id="chatbot-submit-rating">
            <i class="bi bi-check-circle me-1"></i>Enviar Avaliação
        </button>
        <button class="btn-skip" id="chatbot-skip-rating">Pular avaliação</button>
    </div>

    <!-- Thank You (hidden until rating submitted) -->
    <div class="chatbot-thankyou" id="chatbot-thankyou" style="display:none;">
        <div class="icon"><i class="bi bi-check-circle-fill"></i></div>
        <h6>Obrigado pelo feedback!</h6>
        <p>Sua opinião é muito importante para melhorarmos nosso atendimento.</p>
        <button class="btn-new-chat" id="chatbot-new-chat-btn">
            <i class="bi bi-chat-dots me-1"></i>Nova Conversa
        </button>
    </div>
</div>

<script>
(function() {
    const toggle = document.getElementById('chatbot-toggle');
    const window_ = document.getElementById('chatbot-window');
    const closeBtn = document.getElementById('chatbot-close-btn');
    const endBtn = document.getElementById('chatbot-end-btn');
    const prechat = document.getElementById('chatbot-prechat');
    const chatArea = document.getElementById('chatbot-chat-area');
    const messagesDiv = document.getElementById('chatbot-messages');
    const typingIndicator = document.getElementById('chatbot-typing');
    const inputEl = document.getElementById('chatbot-input');
    const inputArea = document.getElementById('chatbot-input-area');
    const sendBtn = document.getElementById('chatbot-send-btn');
    const welcomeEl = document.getElementById('chatbot-welcome');
    const startBtn = document.getElementById('chatbot-start-btn');
    const errorMsg = document.getElementById('chatbot-register-error');
    const nameInput = document.getElementById('chatbot-visitor-name');
    const phoneInput = document.getElementById('chatbot-visitor-phone');
    const cityInput = document.getElementById('chatbot-visitor-city');
    const ratingDiv = document.getElementById('chatbot-rating');
    const thankyouDiv = document.getElementById('chatbot-thankyou');
    const starsContainer = document.getElementById('chatbot-stars');
    const ratingComment = document.getElementById('chatbot-rating-comment');
    const submitRatingBtn = document.getElementById('chatbot-submit-rating');
    const skipRatingBtn = document.getElementById('chatbot-skip-rating');
    const ratingError = document.getElementById('chatbot-rating-error');
    const newChatBtn = document.getElementById('chatbot-new-chat-btn');

    // Generate or retrieve session ID
    let sessionId = localStorage.getItem('chatbot_session_id');
    if (!sessionId) {
        sessionId = 'chat_' + Date.now() + '_' + Math.random().toString(36).substr(2, 9);
        localStorage.setItem('chatbot_session_id', sessionId);
    }

    // Check if visitor already registered
    let visitorRegistered = localStorage.getItem('chatbot_visitor_registered') === 'true';
    let conversationEnded = localStorage.getItem('chatbot_conversation_ended') === 'true';
    let selectedRating = 0;

    const csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || '';

    // Phone mask
    phoneInput.addEventListener('input', function(e) {
        let v = e.target.value.replace(/\D/g, '');
        if (v.length > 11) v = v.slice(0, 11);
        if (v.length > 6) {
            v = '(' + v.slice(0,2) + ') ' + v.slice(2,7) + '-' + v.slice(7);
        } else if (v.length > 2) {
            v = '(' + v.slice(0,2) + ') ' + v.slice(2);
        } else if (v.length > 0) {
            v = '(' + v;
        }
        e.target.value = v;
    });

    // Load welcome message
    fetch('/chatbot/status')
        .then(r => r.json())
        .then(data => {
            if (data.welcome_message && welcomeEl) {
                welcomeEl.textContent = data.welcome_message;
            }
        })
        .catch(() => {});

    function toggleChat() {
        window_.classList.toggle('open');
        if (window_.classList.contains('open')) {
            if (visitorRegistered && !conversationEnded) {
                inputEl.focus();
            } else if (!visitorRegistered) {
                nameInput.focus();
            }
        }
    }

    toggle.addEventListener('click', toggleChat);
    closeBtn.addEventListener('click', function() {
        window_.classList.remove('open');
    });

    // Show appropriate view based on state
    function showChatView() {
        prechat.style.display = 'none';
        chatArea.style.display = 'flex';
        ratingDiv.style.display = 'none';
        thankyouDiv.style.display = 'none';
        endBtn.style.display = 'flex';
    }

    function showRatingView() {
        prechat.style.display = 'none';
        chatArea.style.display = 'none';
        ratingDiv.style.display = 'flex';
        thankyouDiv.style.display = 'none';
        endBtn.style.display = 'none';
    }

    function showThankyouView() {
        prechat.style.display = 'none';
        chatArea.style.display = 'none';
        ratingDiv.style.display = 'none';
        thankyouDiv.style.display = 'flex';
        endBtn.style.display = 'none';
    }

    // If already registered, show chat area directly
    if (visitorRegistered && !conversationEnded) {
        showChatView();
    } else if (conversationEnded) {
        // If conversation was ended, start fresh
        resetChat();
    }

    function resetChat() {
        // Generate new session
        sessionId = 'chat_' + Date.now() + '_' + Math.random().toString(36).substr(2, 9);
        localStorage.setItem('chatbot_session_id', sessionId);
        localStorage.removeItem('chatbot_visitor_registered');
        localStorage.removeItem('chatbot_conversation_ended');
        visitorRegistered = false;
        conversationEnded = false;
        selectedRating = 0;

        // Clear messages
        messagesDiv.innerHTML = '<div class="chatbot-message assistant"><div class="bubble" id="chatbot-welcome">Olá! Como posso ajudar você hoje?</div></div>';

        // Show pre-chat form
        prechat.style.display = 'block';
        chatArea.style.display = 'none';
        ratingDiv.style.display = 'none';
        thankyouDiv.style.display = 'none';
        endBtn.style.display = 'none';

        // Clear form fields
        nameInput.value = '';
        phoneInput.value = '';
        cityInput.value = '';
        ratingComment.value = '';

        // Reset stars
        document.querySelectorAll('#chatbot-stars .star').forEach(function(s) {
            s.classList.remove('active');
        });

        // Reload welcome message
        fetch('/chatbot/status')
            .then(r => r.json())
            .then(data => {
                const welEl = document.getElementById('chatbot-welcome');
                if (data.welcome_message && welEl) {
                    welEl.textContent = data.welcome_message;
                }
            })
            .catch(() => {});
    }

    // Register visitor
    startBtn.addEventListener('click', function() {
        const name = nameInput.value.trim();
        const phone = phoneInput.value.trim();
        const city = cityInput.value.trim();

        errorMsg.style.display = 'none';

        if (!name || !phone || !city) {
            errorMsg.textContent = 'Por favor, preencha todos os campos obrigatórios.';
            errorMsg.style.display = 'block';
            return;
        }

        startBtn.disabled = true;
        startBtn.textContent = 'Iniciando...';

        fetch('/chatbot/register', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': csrfToken
            },
            body: JSON.stringify({
                session_id: sessionId,
                name: name,
                phone: phone,
                city: city
            })
        })
        .then(r => r.json())
        .then(data => {
            if (data.success) {
                localStorage.setItem('chatbot_visitor_registered', 'true');
                visitorRegistered = true;

                // Personalize welcome message
                const firstName = name.split(' ')[0];
                const welEl = document.getElementById('chatbot-welcome');
                if (welEl) {
                    welEl.textContent = welEl.textContent.replace(
                        'Olá!',
                        'Olá, ' + firstName + '!'
                    );
                }

                // Switch to chat area
                showChatView();
                inputEl.focus();
            } else {
                errorMsg.textContent = data.message || 'Erro ao registrar. Tente novamente.';
                errorMsg.style.display = 'block';
            }
        })
        .catch(() => {
            errorMsg.textContent = 'Erro de conexão. Tente novamente.';
            errorMsg.style.display = 'block';
        })
        .finally(() => {
            startBtn.disabled = false;
            startBtn.innerHTML = '<i class="bi bi-chat-dots me-1"></i>Iniciar Conversa';
        });
    });

    // Allow Enter key on pre-chat form
    [nameInput, phoneInput, cityInput].forEach(function(el) {
        el.addEventListener('keypress', function(e) {
            if (e.key === 'Enter') {
                e.preventDefault();
                startBtn.click();
            }
        });
    });

    function addMessage(role, content) {
        const div = document.createElement('div');
        div.className = 'chatbot-message ' + role;
        div.innerHTML = '<div class="bubble">' + escapeHtml(content) + '</div>';
        messagesDiv.appendChild(div);
        messagesDiv.scrollTop = messagesDiv.scrollHeight;
    }

    function escapeHtml(text) {
        const div = document.createElement('div');
        div.textContent = text;
        return div.innerHTML;
    }

    function showTyping() {
        typingIndicator.style.display = 'block';
        messagesDiv.scrollTop = messagesDiv.scrollHeight;
    }

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

    function sendMessage() {
        const message = inputEl.value.trim();
        if (!message) return;

        addMessage('user', message);
        inputEl.value = '';
        sendBtn.disabled = true;
        showTyping();

        fetch('/chatbot/send', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': csrfToken
            },
            body: JSON.stringify({
                message: message,
                session_id: sessionId
            })
        })
        .then(r => r.json())
        .then(data => {
            hideTyping();
            if (data.success) {
                addMessage('assistant', data.message);
            } else {
                if (data.conversation_ended) {
                    addMessage('assistant', 'Esta conversa foi finalizada.');
                    endChatLocally();
                } else {
                    addMessage('assistant', data.message || 'Desculpe, ocorreu um erro. Tente novamente.');
                }
            }
        })
        .catch(() => {
            hideTyping();
            addMessage('assistant', 'Desculpe, ocorreu um erro de conexão. Tente novamente.');
        })
        .finally(() => {
            sendBtn.disabled = false;
            inputEl.focus();
        });
    }

    sendBtn.addEventListener('click', sendMessage);
    inputEl.addEventListener('keypress', function(e) {
        if (e.key === 'Enter') {
            e.preventDefault();
            sendMessage();
        }
    });

    // End conversation
    endBtn.addEventListener('click', function() {
        if (!confirm('Deseja finalizar esta conversa?')) return;

        fetch('/chatbot/end', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': csrfToken
            },
            body: JSON.stringify({
                session_id: sessionId
            })
        })
        .then(r => r.json())
        .then(data => {
            if (data.success) {
                endChatLocally();
            }
        })
        .catch(() => {
            // End locally even if API fails
            endChatLocally();
        });
    });

    function endChatLocally() {
        conversationEnded = true;
        localStorage.setItem('chatbot_conversation_ended', 'true');
        showRatingView();
    }

    // Star rating interaction
    const starBtns = document.querySelectorAll('#chatbot-stars .star');
    starBtns.forEach(function(star) {
        star.addEventListener('click', function() {
            selectedRating = parseInt(this.getAttribute('data-value'));
            starBtns.forEach(function(s) {
                const val = parseInt(s.getAttribute('data-value'));
                if (val <= selectedRating) {
                    s.classList.add('active');
                } else {
                    s.classList.remove('active');
                }
            });
        });

        star.addEventListener('mouseenter', function() {
            const hoverVal = parseInt(this.getAttribute('data-value'));
            starBtns.forEach(function(s) {
                const val = parseInt(s.getAttribute('data-value'));
                if (val <= hoverVal) {
                    s.style.color = '#f5a623';
                } else {
                    s.style.color = '#ddd';
                }
            });
        });

        star.addEventListener('mouseleave', function() {
            starBtns.forEach(function(s) {
                const val = parseInt(s.getAttribute('data-value'));
                if (val <= selectedRating) {
                    s.style.color = '#f5a623';
                } else {
                    s.style.color = '#ddd';
                }
            });
        });
    });

    // Submit rating
    submitRatingBtn.addEventListener('click', function() {
        ratingError.style.display = 'none';

        if (selectedRating === 0) {
            ratingError.textContent = 'Por favor, selecione pelo menos 1 estrela.';
            ratingError.style.display = 'block';
            return;
        }

        submitRatingBtn.disabled = true;
        submitRatingBtn.innerHTML = '<i class="bi bi-hourglass me-1"></i>Enviando...';

        fetch('/chatbot/rate', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': csrfToken
            },
            body: JSON.stringify({
                session_id: sessionId,
                rating: selectedRating,
                comment: ratingComment.value.trim()
            })
        })
        .then(r => r.json())
        .then(data => {
            if (data.success) {
                showThankyouView();
            } else {
                ratingError.textContent = data.message || 'Erro ao enviar avaliação.';
                ratingError.style.display = 'block';
            }
        })
        .catch(() => {
            ratingError.textContent = 'Erro de conexão. Tente novamente.';
            ratingError.style.display = 'block';
        })
        .finally(() => {
            submitRatingBtn.disabled = false;
            submitRatingBtn.innerHTML = '<i class="bi bi-check-circle me-1"></i>Enviar Avaliação';
        });
    });

    // Skip rating
    skipRatingBtn.addEventListener('click', function() {
        showThankyouView();
    });

    // New chat button
    newChatBtn.addEventListener('click', function() {
        resetChat();
        nameInput.focus();
    });
})();
</script>
@endif