{% extends 'superuser/base_superuser.html' %}

{% block title %}Sandbox Chat | {{ company.name }} | ChatPro{% endblock %}

{% block workspace %}
<div class="page-header" style="margin-bottom: 1.5rem;">
    <div>
        <h2 class="page-title">Chatbot Sandbox Sandbox</h2>
        <p class="page-subtitle">Test and verify prompt behavior for <strong>{{ company.name }}</strong>.</p>
    </div>
    <a href="{% url 'superuser_dashboard' %}" class="btn btn-secondary">
        &larr; Back to Dashboard
    </a>
</div>

<div class="glass-card sandbox-layout">
    <!-- Chat Area -->
    <div class="chat-panel">
        <div class="chat-history" id="chat-history">
            <!-- Initial Greeting -->
            <div class="chat-message bot">
                Hi! I am <strong>{{ company.chatbot_name }}</strong>. I am running on 
                {% if company.ai_provider == 'gemini' %}Gemini{% else %}OpenAI{% endif %} ({{ company.model_name }}). 
                How can I assist you today?
            </div>
        </div>
        
        <form class="chat-input-bar" id="chat-form">
            <input type="text" id="chat-message-input" class="chat-input" placeholder="Type a message to test your chatbot..." autocomplete="off" required>
            <button type="submit" class="btn btn-primary" id="chat-send-btn">
                Send
                <svg width="18" height="18" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8"/></svg>
            </button>
        </form>
    </div>
    
    <!-- Info Panel -->
    <div class="bot-info-sidebar" style="border-left: 1px solid var(--border-color);">
        <div class="bot-info-header">
            <h3 style="font-family: var(--font-heading); font-size: 1.15rem; margin-bottom: 0.25rem;">Chatbot Configuration</h3>
            <span style="font-size: 0.75rem; color: var(--text-muted);">Loaded parameters for execution</span>
        </div>
        
        <div class="bot-info-item">
            <h4>Identity Name</h4>
            <p style="font-weight: 600; color: var(--text-primary);">{{ company.chatbot_name }}</p>
        </div>
        
        <div class="bot-info-item">
            <h4>AI Engine Provider</h4>
            {% if company.ai_provider == 'gemini' %}
                <span class="badge badge-gemini">Google Gemini</span>
            {% else %}
                <span class="badge badge-openai">OpenAI Suite</span>
            {% endif %}
        </div>
        
        <div class="bot-info-item">
            <h4>Authorized Domain</h4>
            {% if company.allowed_domain %}
                <code style="background: rgba(255,255,255,0.03); padding: 0.2rem 0.5rem; border: 1px solid var(--border-color); font-size: 0.82rem; border-radius: 0; color: var(--success);">{{ company.allowed_domain }}</code>
            {% else %}
                <p style="font-style: italic; color: var(--warning); font-size: 0.82rem;">No domain restriction set.</p>
            {% endif %}
        </div>
        
        <div class="bot-info-item">
            <h4>Active LLM Model</h4>
            <p style="font-family: monospace; font-size: 0.85rem; background: rgba(255,255,255,0.03); padding: 0.25rem 0.5rem; border-radius: 0; display: inline-block; border: 1px solid var(--border-color);">{{ company.model_name }}</p>
        </div>
        
        <div class="bot-info-item">
            <h4>Enforced Topics</h4>
            {% if company.topics.all %}
                <div style="display: flex; flex-wrap: wrap; gap: 0.35rem;">
                    {% for topic in company.topics.all %}
                        <span class="badge" style="background: rgba(255,255,255,0.05); color: var(--text-secondary); border: 1px solid var(--border-color); font-size: 0.75rem;">
                            {{ topic.name }}
                        </span>
                    {% endfor %}
                </div>
            {% else %}
                <p style="font-style: italic; color: var(--text-muted); font-size: 0.85rem;">No topics enforced. General behavior active.</p>
            {% endif %}
        </div>
        
        <div class="bot-info-item">
            <h4>System Instructions / Prompt</h4>
            {% if company.system_prompt %}
                <div class="bot-prompt-box">{{ company.system_prompt }}</div>
            {% else %}
                <p style="font-style: italic; color: var(--text-muted); font-size: 0.85rem;">No system prompt defined. Default model behavior active.</p>
            {% endif %}
        </div>
        
        <div class="bot-info-item" style="margin-top: auto; border-top: 1px solid var(--border-color); padding-top: 1rem;">
            <a href="{% url 'superuser_company_edit' company.pk %}" class="btn btn-secondary" style="width: 100%; justify-content: center; font-size: 0.85rem;">
                Edit Settings
            </a>
        </div>
    </div>
</div>

<script>
    const chatForm = document.getElementById('chat-form');
    const messageInput = document.getElementById('chat-message-input');
    const chatHistory = document.getElementById('chat-history');
    const sendBtn = document.getElementById('chat-send-btn');
    
    // Auto-scroll chat window to the bottom
    function scrollToBottom() {
        chatHistory.scrollTop = chatHistory.scrollHeight;
    }
    
    // Escape HTML to prevent XSS in sandbox testing
    function escapeHtml(str) {
        return str.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#039;");
    }

    // Appends a new message bubble to the chat
    function appendMessage(role, content, isHtml = false) {
        const bubble = document.createElement('div');
        bubble.className = `chat-message ${role}`;
        if (isHtml) {
            bubble.innerHTML = content;
        } else {
            bubble.textContent = content;
        }
        chatHistory.appendChild(bubble);
        scrollToBottom();
        return bubble;
    }

    // Appends typing indicator dots
    function appendTypingIndicator() {
        const bubble = document.createElement('div');
        bubble.className = 'chat-message bot';
        bubble.id = 'typing-indicator-bubble';
        bubble.innerHTML = `
            <div class="typing-indicator">
                <div class="typing-dot"></div>
                <div class="typing-dot"></div>
                <div class="typing-dot"></div>
            </div>
        `;
        chatHistory.appendChild(bubble);
        scrollToBottom();
        return bubble;
    }

    chatForm.addEventListener('submit', async function(e) {
        e.preventDefault();
        const messageText = messageInput.value.trim();
        if (!messageText) return;

        // Append user bubble and clear input
        appendMessage('user', messageText);
        messageInput.value = '';
        messageInput.focus();

        // Append typing indicator
        const typingIndicator = appendTypingIndicator();
        sendBtn.disabled = true;

        try {
            // Send request to API endpoint
            const response = await fetch("{% url 'superuser_company_chat_api' company.pk %}", {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRFToken': '{{ csrf_token }}'
                },
                body: JSON.stringify({ message: messageText })
            });

            const contentType = response.headers.get('content-type') || '';
            if (!contentType.includes('application/json')) {
                throw new Error(`Server returned an invalid response (${response.status}). Please refresh and try again.`);
            }
            const data = await response.json();

            typingIndicator.remove();

            if (response.ok && data.status === 'success') {
                appendMessage('bot', data.response);
            } else {
                appendMessage('system-error', `❌ Engine Error: ${escapeHtml(data.error || 'Unknown server error')}`, true);
            }
        } catch (error) {
            typingIndicator.remove();
            appendMessage('system-error', `❌ Network Connection Failure: ${escapeHtml(error.message)}`, true);
        } finally {
            sendBtn.disabled = false;
        }
    });

    // Initial scroll setup
    scrollToBottom();
</script>
{% endblock %}