{% extends "page.html" %}
{% block page_content %}
<div class="card">
    <div class="card-header"><h2>Тестовый прогон бота «София»</h2></div>
    <div class="form-row">
        <div class="form-group"><label>Сценарий</label>
            <select id="test-scenario">
                <option value="new_dialog">Новый диалог</option>
                <option value="returning">Повторное обращение</option>
                <option value="out_of_hours">Вне рабочего времени</option>
            </select>
        </div>
    </div>
    <div id="test-conversation" style="border:1px solid var(--border);border-radius:8px;padding:16px;min-height:200px;margin-bottom:16px;max-height:500px;overflow-y:auto;"></div>
    <div class="form-row">
        <div class="form-group" style="flex:1"><label>Сообщение клиента</label><input type="text" id="test-input" placeholder="Введите сообщение..."></div>
        <div class="form-group" style="align-self:flex-end">
            <button class="btn btn-primary" onclick="sendTestMessage()">Отправить</button>
            <button class="btn btn-secondary" onclick="resetTest()">Сбросить</button>
        </div>
    </div>
    <div id="test-info" style="margin-top:16px;padding:12px;background:var(--bg-secondary);border-radius:8px;font-size:12px;display:none;"></div>
</div>
<script>
var testMessages = [];
function sendTestMessage(){
    var input = document.getElementById('test-input');
    var text = input.value.trim();
    if(!text) return;
    testMessages.push(text);
    input.value = '';
    var scenario = document.getElementById('test-scenario').value;
    var conv = document.getElementById('test-conversation');
    conv.innerHTML += '<div style="text-align:right;margin:8px 0;"><span style="background:var(--accent);color:#fff;padding:6px 12px;border-radius:12px;display:inline-block;">' + escapeHtml(text) + '</span></div>';

    fetch('/service/api/bot/test-run', {
        method: 'POST', headers: {'Content-Type': 'application/json'},
        body: JSON.stringify({scenario: scenario, messages: testMessages})
    }).then(function(r){ return r.json() }).then(function(d){
        d.conversation.forEach(function(msg){
            if(msg.role === 'bot'){
                conv.innerHTML += '<div style="margin:8px 0;"><span style="background:var(--bg-secondary);padding:6px 12px;border-radius:12px;display:inline-block;">' + escapeHtml(msg.text) + '</span></div>';
            }
        });
        var info = document.getElementById('test-info');
        info.style.display = 'block';
        info.innerHTML = '<strong>Шаблоны:</strong> ' + d.templates_used.join(', ') + '<br><strong>Фичи:</strong> ' + Object.keys(d.enabled_features).join(', ') + '<br><strong>Категории:</strong> ' + d.categories.map(function(c){return c.name}).join(', ');
        conv.scrollTop = conv.scrollHeight;
    });
}
function resetTest(){
    testMessages = [];
    document.getElementById('test-conversation').innerHTML = '';
    document.getElementById('test-info').style.display = 'none';
    document.getElementById('test-input').value = '';
}
function escapeHtml(s){ return s.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;'); }
document.getElementById('test-input').addEventListener('keydown', function(e){ if(e.key === 'Enter') sendTestMessage(); });
</script>
{% endblock %}