{% extends 'allauth/layouts/base.html' %}

{% block title %}Chatbot Preview: {{ chatbot.name }}{% endblock %}

{% block content %}
<div class="container mt-4">
    <h1>Chatbot Preview: {{ chatbot.name }}</h1>
    <p>Test your chatbot by sending messages below.</p>

    <div class="card p-4 mb-4">
        <!-- Chat history -->
        <div id="chat-history" class="border p-3 mb-3" style="height: 400px; overflow-y: auto; background-color: #f8f9fa;">
            <!-- Messages will be appended here -->
        </div>

        <!-- Message input form -->
        <form id="chat-form" class="input-group">
            <input type="text" id="chat-message" class="form-control" placeholder="Type your message..." required>
            <button type="submit" class="btn btn-primary">Send</button>
        </form>
    </div>

    <a href="{% url 'chatbot_detail' chatbot.id %}" class="btn btn-secondary">Back to Chatbot Details</a>
</div>

<script src="https://cdn.jsdelivr.net/npm/marked@4.3.0/marked.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/dompurify@3.1.6/dist/purify.min.js"></script>

<script>
    // Chat form submission
    document.getElementById('chat-form').addEventListener('submit', function(e) {
        e.preventDefault();
        const messageInput = document.getElementById('chat-message');
        const message = messageInput.value.trim();
        if (!message) {
            return;
        }

        // Add user message to chat history
        appendMessage('You', message, 'user');
        messageInput.value = ''; // Clear input
        messageInput.disabled = true; // Disable input while processing
        document.querySelector('#chat-form button').disabled = true;

        // Send message via AJAX
        fetch('{% url 'chatbot_preview' chatbot.id %}', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded',
                'X-Requested-With': 'XMLHttpRequest',
                'X-CSRFToken': '{{ csrf_token }}'
            },
            body: new URLSearchParams({ 'message': message })
        })
        .then(response => response.json())
        .then(data => {
            messageInput.disabled = false;
            document.querySelector('#chat-form button').disabled = false;

            if (data.error) {
                appendMessage('Error', data.error, 'error');
                return;
            }

            // Add bot response (parsed as markdown)
            appendMessage('Bot', marked.parse(data.response), 'bot', true);

            // Add warnings if any
            if (data.warnings && data.warnings.length > 0) {
                appendMessage('Warning', data.warnings.join('<br>'), 'warning');
            }
        })
        .catch(error => {
            messageInput.disabled = false;
            document.querySelector('#chat-form button').disabled = false;
            appendMessage('Error', 'An error occurred while processing your message.', 'error');
        });
    });

    // Function to append messages to chat history
    function appendMessage(sender, text, type, isMarkdown = false) {
        const chatHistory = document.getElementById('chat-history');
        const messageDiv = document.createElement('div');
        messageDiv.className = `mb-2 ${type === 'user' ? 'text-end' : 'text-start'}`;
        
        // Style based on message type
        let bgClass, textClass;
        switch (type) {
            case 'user':
                bgClass = 'bg-primary text-white';
                textClass = 'text-primary';
                break;
            case 'bot':
                bgClass = 'bg-light border';
                textClass = 'text-dark';
                break;
            case 'error':
                bgClass = 'bg-danger text-white';
                textClass = 'text-danger';
                break;
            case 'warning':
                bgClass = 'bg-warning text-dark';
                textClass = 'text-warning';
                break;
        }

        // Sanitize HTML if markdown, otherwise escape HTML
        const sanitizedText = isMarkdown ? DOMPurify.sanitize(text) : text;

        messageDiv.innerHTML = `
            <div class="d-inline-block p-2 rounded ${bgClass}" style="max-width: 80%;">
                <strong class="${textClass}">${sender}:</strong> ${sanitizedText}
            </div>
        `;
        chatHistory.appendChild(messageDiv);
        chatHistory.scrollTop = chatHistory.scrollHeight; // Auto-scroll to bottom
    }
</script>

<style>
    #chat-history .user .bg-primary {
        border-radius: 10px 10px 0 10px;
    }
    #chat-history .bot .bg-light {
        border-radius: 10px 10px 10px 0;
    }
    #chat-history .error .bg-danger,
    #chat-history .warning .bg-warning {
        border-radius: 10px;
    }
    /* Markdown styling */
    #chat-history .bot ul {
        padding-left: 20px;
        margin: 0;
    }
    #chat-history .bot li {
        margin-bottom: 5px;
    }
    #chat-history .bot strong {
        font-weight: 700;
    }
</style>
{% endblock %}