{% extends 'admin/base_admin.html' %}

{% block title %}Sandbox Test | {{ company.name }} | ChatLab{% endblock %}

{% block workspace %}
<div class="page-header" style="margin-bottom: 1.5rem;">
    <div>
        <h2 class="page-title">Chatbot Sandbox</h2>
        <p class="page-subtitle">Interact with your chatbot to test system prompts and topic scopes.</p>
    </div>
</div>

<div class="glass-card sandbox-layout" style="border-radius: 0;">
    <!-- Chat Area -->
    <div class="chat-panel">
        <div class="chat-history" id="chat-history">
            <!-- Initial Greeting -->
            <div class="chat-message bot" style="border-radius: 0;">
                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..." autocomplete="off" required style="border-radius: 0;">
            <button type="submit" class="btn btn-primary" id="chat-send-btn" style="border-radius: 0;">
                Send
            </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</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</h4>
            {% if company.ai_provider == 'gemini' %}
                <span class="badge badge-gemini" style="border-radius: 0;">Google Gemini</span>
            {% else %}
                <span class="badge badge-openai" style="border-radius: 0;">OpenAI Suite</span>
            {% endif %}
        </div>
        
        <div class="bot-info-item">
            <h4>LLM Model</h4>
            <p style="font-family: monospace; font-size: 0.85rem; background: rgba(255,255,255,0.03); padding: 0.25rem 0.5rem; display: inline-block; border: 1px solid var(--border-color); border-radius: 0;">{{ company.model_name }}</p>
        </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>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; border-radius: 0;">
                            {{ 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" style="border-radius: 0;">{{ company.system_prompt }}</div>
            {% else %}
                <p style="font-style: italic; color: var(--text-muted); font-size: 0.85rem;">No system prompt defined.</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 'admin_company_edit' %}" class="btn btn-secondary" style="width: 100%; justify-content: center; font-size: 0.85rem; border-radius: 0;">
                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');
    
    function scrollToBottom() {
        chatHistory.scrollTop = chatHistory.scrollHeight;
    }
    
    function escapeHtml(str) {
        return str.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#039;");
    }

    function appendMessage(role, content, isHtml = false) {
        const bubble = document.createElement('div');
        bubble.className = `chat-message ${role}`;
        bubble.style.borderRadius = "0"; // Enforce square corners
        if (isHtml) {
            bubble.innerHTML = content;
        } else {
            bubble.textContent = content;
        }
        chatHistory.appendChild(bubble);
        scrollToBottom();
        return bubble;
    }

    function appendTypingIndicator() {
        const bubble = document.createElement('div');
        bubble.className = 'chat-message bot';
        bubble.id = 'typing-indicator-bubble';
        bubble.style.borderRadius = "0";
        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;

        appendMessage('user', messageText);
        messageInput.value = '';
        messageInput.focus();

        const typingIndicator = appendTypingIndicator();
        sendBtn.disabled = true;

        try {
            const response = await fetch("{% url 'admin_company_chat_api' %}", {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRFToken': '{{ csrf_token }}'
                },
                body: JSON.stringify({ message: messageText })
            });

            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 || 'Server error occurred')}`, true);
            }
        } catch (error) {
            typingIndicator.remove();
            appendMessage('system-error', `❌ Connection Error: ${escapeHtml(error.message)}`, true);
        } finally {
            sendBtn.disabled = false;
        }
    });

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