<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/static/css/service-theme.css">
<style>
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:'Inter','Segoe UI',sans-serif; background:var(--bg-body, #1B2838); color:var(--text-primary, #E8EDF2); font-size:13px; height:100vh; display:flex; flex-direction:column; }
.test-container { display:flex; flex:1; gap:12px; padding:12px; overflow:hidden; }
.test-chat { flex:1; border:1px solid var(--border, #253248); border-radius:10px; display:flex; flex-direction:column; overflow:hidden; }
.test-chat-header { background:var(--bg-card, #0A1628); padding:10px 14px; font-weight:600; border-bottom:1px solid var(--border, #253248); font-size:12px; }
.test-chat-messages { flex:1; overflow-y:auto; padding:10px 14px; }
.test-chat-input { display:flex; border-top:1px solid var(--border, #253248); }
.test-chat-input input { flex:1; border:none; padding:10px 14px; font-size:13px; outline:none; background:var(--bg-body, #1B2838); color:var(--text-primary, #E8EDF2); }
.test-chat-input button { padding:10px 16px; border:none; background:var(--accent, #00ADEF); color:#fff; cursor:pointer; font-weight:600; }
.test-log { width:300px; border:1px solid var(--border, #253248); border-radius:10px; padding:10px; overflow-y:auto; font-family:monospace; font-size:11px; line-height:1.5; background:var(--bg-card, #0A1628); }
.test-log .log-entry { margin-bottom:4px; padding:3px 0; border-bottom:1px solid var(--border, #1e3044); }
.test-log .log-entry .time { color:var(--text-muted, #6B8299); }
.test-log .log-entry .event { color:var(--accent, #00ADEF); font-weight:600; }
.msg-bot { background:var(--bg-input, #1e3044); padding:7px 12px; border-radius:8px 8px 8px 0; margin-bottom:6px; max-width:85%; }
.msg-user { background:var(--accent, #00ADEF); color:#fff; padding:7px 12px; border-radius:8px 8px 0 8px; margin-bottom:6px; max-width:85%; margin-left:auto; }
.test-scenarios { display:flex; gap:6px; padding:8px 12px; flex-wrap:wrap; border-bottom:1px solid var(--border, #253248); }
.test-scenarios button { font-size:11px; padding:4px 10px; background:var(--bg-input, #253248); color:var(--text-primary, #E8EDF2); border:1px solid var(--border, #3a4a60); border-radius:4px; cursor:pointer; }
.test-scenarios button:hover { background:var(--accent, #00ADEF); color:#fff; }
.test-log::-webkit-scrollbar { width:6px; }
.test-log::-webkit-scrollbar-track { background:var(--bg-body, #0D1B2A); border-radius:3px; }
.test-log::-webkit-scrollbar-thumb { background:var(--border, #253248); border-radius:3px; }
.test-log::-webkit-scrollbar-thumb:hover { background:var(--text-muted, #6B8299); }
.test-chat-messages::-webkit-scrollbar { width:6px; }
.test-chat-messages::-webkit-scrollbar-track { background:var(--bg-body, #0D1B2A); border-radius:3px; }
.test-chat-messages::-webkit-scrollbar-thumb { background:var(--border, #253248); border-radius:3px; }
.test-chat-messages::-webkit-scrollbar-thumb:hover { background:var(--text-muted, #6B8299); }
</style>
<script>
(function(){function g(){return window.matchMedia('(prefers-color-scheme:light)').matches?'light':'dark'}var s=localStorage.getItem('aegisone_service_theme')||'system',r=s==='system'?g():s;document.documentElement.setAttribute('data-theme',r);})();
</script>
</head>
<body>
<div class="test-scenarios">
    <button onclick="runScenario('greeting')">Приветствие</button>
    <button onclick="runScenario('consent_yes')">Согласие → заявка</button>
    <button onclick="runScenario('consent_no')">Отказ согласия</button>
    <button onclick="runScenario('question')">Общий вопрос</button>
    <button onclick="clearTest()">Очистить</button>
    <button onclick="clearTestData()" style="background:var(--danger,#dc3545) !important;border-color:var(--danger,#dc3545) !important;">Сбросить все тестовые данные</button>
</div>
<div class="test-container">
    <div class="test-chat">
        <div class="test-chat-header">Чат с ботом (симуляция)</div>
        <div class="test-chat-messages" id="test-messages"></div>
        <div class="test-chat-input">
            <input type="text" id="test-input" placeholder="Введите сообщение..." onkeypress="if(event.key==='Enter') sendTestMessage()">
            <button onclick="sendTestMessage()">Отправить</button>
        </div>
    </div>
    <div class="test-log" id="test-log"></div>
</div>
<script>
var testUserId = 999999001;
function log(event, detail){
    var logDiv = document.getElementById('test-log');
    var time = new Date().toLocaleTimeString();
    var entry = document.createElement('div');
    entry.className = 'log-entry';
    entry.innerHTML = '<span class="time">[' + time + ']</span> <span class="event">' + event + '</span> ' + (detail || '');
    logDiv.appendChild(entry);
    logDiv.scrollTop = logDiv.scrollHeight;
}
function addMessage(text, from){
    var msgs = document.getElementById('test-messages');
    var div = document.createElement('div');
    div.className = from === 'bot' ? 'msg-bot' : 'msg-user';
    div.textContent = text;
    msgs.appendChild(div);
    msgs.scrollTop = msgs.scrollHeight;
}
function sendTestMessage(){
    var input = document.getElementById('test-input');
    var text = input.value.trim();
    if(!text) return;
    input.value = '';
    addMessage(text, 'user');
    log('message_created', 'Пользователь: ' + text);
    simulateWebhook('message_created', text);
}
function runScenario(scenario){
    clearTest();
    switch(scenario){
        case 'greeting':
            log('bot_started', 'Пользователь начал диалог');
            simulateWebhook('bot_started', null);
            break;
        case 'consent_yes':
            log('bot_started', 'Пользователь начал диалог');
            simulateWebhook('bot_started', null);
            setTimeout(function(){
                addMessage('Здравствуйте! Я хочу оставить заявку.', 'user');
                log('message_created', 'Пользователь: хочу оставить заявку');
                simulateWebhook('message_created', 'Здравствуйте! Я хочу оставить заявку.');
            }, 1000);
            break;
        case 'consent_no':
            log('bot_started', 'Пользователь начал диалог');
            simulateWebhook('bot_started', null);
            break;
        case 'question':
            log('bot_started', 'Пользователь начал диалог');
            simulateWebhook('bot_started', null);
            setTimeout(function(){
                addMessage('Какие услуги вы предоставляете?', 'user');
                log('message_created', 'Пользователь: какие услуги?');
                simulateWebhook('message_created', 'Какие услуги вы предоставляете?');
            }, 1000);
            break;
    }
}
function simulateWebhook(type, text){
    var payload = {update_type: type};
    if(type === 'bot_started'){
        payload.user = {user_id: testUserId, first_name: 'Тест', last_name: 'Пользователь'};
        payload.chat_id = testUserId;
    } else if(type === 'message_created'){
        payload.sender = {user_id: testUserId};
        payload.chat_id = testUserId;
        payload.body = {text: text, attachments: []};
    }
    log('webhook', 'Отправка на /webhook (' + type + ')');
    fetch('/api/bot/webhook', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-Max-Bot-Api-Secret': 'aegisone_bot_secret_2026',
        },
        body: JSON.stringify(payload)
    }).then(function(r){ return r.json() }).then(function(d){
        log('response', JSON.stringify(d));
        if(d && d.ok){
            log('success', 'Событие обработано');
            if(d.bot_replies && Array.isArray(d.bot_replies)){
                d.bot_replies.forEach(function(reply){
                    addMessage(reply, 'bot');
                    log('bot_reply', reply.substring(0, 100));
                });
            }
        } else {
            log('error', 'Ошибка: ' + JSON.stringify(d));
        }
    }).catch(function(err){
        log('error', 'Сетевая ошибка: ' + err);
    });
}
function clearTest(){
    document.getElementById('test-messages').innerHTML = '';
    document.getElementById('test-log').innerHTML = '';
    document.getElementById('test-input').value = '';
    log('info', 'Тест очищен');
}
function clearTestData(){
    if(!confirm('Удалить все тестовые диалоги, сообщения и логи обработки? Это действие нельзя отменить.')) return;
    log('info', 'Очистка тестовых данных...');
    fetch('/api/bot/test/clear', {method: 'POST'}).then(function(r){ return r.json() }).then(function(d){
        if(d && d.ok){
            log('success', 'Тестовые данные удалены (диалогов: ' + (d.deleted || '?') + ')');
            clearTest();
        } else {
            log('error', 'Ошибка: ' + JSON.stringify(d));
        }
    }).catch(function(err){
        log('error', 'Ошибка запроса: ' + err);
    });
}
</script>
</body>
</html>