{% extends "page.html" %}
{% block page_content %}
<style>
.tab-bar { display:flex; gap:0; margin-bottom:24px; border-bottom:2px solid var(--border); overflow-x:auto; }
.tab-bar .tab { padding:10px 20px; cursor:pointer; border-bottom:2px solid transparent;
                margin-bottom:-2px; color:var(--text-muted); font-weight:500; white-space:nowrap; }
.tab-bar .tab.active { color:var(--accent); border-bottom-color:var(--accent); }
.tab-content { display:none; }
.tab-content.active { display:block; }
.toggle-switch{position:relative;display:inline-block;width:44px;height:24px;}
.toggle-switch input{opacity:0;width:0;height:0;}
.slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background:#ccc;border-radius:24px;transition:.3s;}
.slider:before{position:absolute;content:"";height:18px;width:18px;left:3px;bottom:3px;background:#fff;border-radius:50%;transition:.3s;}
input:checked+.slider{background:#00ADEF;}
input:checked+.slider:before{transform:translateX(20px);}
</style>
<div class="card">
    <div class="card-header"><h2>Чат-бот Max — Настройки</h2></div>
    <div class="tab-bar">
        <div class="tab active" onclick="switchTab('general')">Общие</div>
        <div class="tab" onclick="switchTab('templates')">Шаблоны ответов</div>
        <div class="tab" onclick="switchTab('features')">Функции</div>
        <div class="tab" onclick="switchTab('categories')">Категории</div>
        <div class="tab" onclick="switchTab('kb')">База знаний</div>
        <div class="tab" onclick="switchTab('test')">Тестовый прогон</div>
    </div>

    <!-- Tab 1: Общие настройки -->
    <div class="tab-content active" id="tab-general">
        <form id="bot-settings-form" class="form-grid">
            <div class="form-group"><label>Имя ассистента</label><input type="text" name="assistant_name" id="assistant_name" value="София"></div>
            <div class="form-group"><label>Телефон 1</label><input type="text" name="phone_1" id="phone_1" value="8 (861) 203-33-30"></div>
            <div class="form-group"><label>Телефон 2</label><input type="text" name="phone_2" id="phone_2" value="8 (995) 203-33-30"></div>
            <div class="form-group"><label>Email поддержки</label><input type="email" name="support_email" id="support_email" value="zakaz@aegisone.ru"></div>
            <div class="form-group"><label>Тема письма</label><input type="text" name="email_subject" id="email_subject" value="Обращение через Виртуального помощника AegisOne Engineering"></div>
            <div class="form-row">
                <div class="form-group"><label>Начало рабочего времени (час)</label><input type="number" name="work_hours_start" id="work_hours_start" value="9" min="0" max="23"></div>
                <div class="form-group"><label>Конец рабочего времени (час)</label><input type="number" name="work_hours_end" id="work_hours_end" value="18" min="0" max="23"></div>
            </div>
            <div class="form-group"><label>URL webhook 1С:УНФ</label><input type="text" name="1c_webhook_url" id="1c_webhook_url" value="" placeholder="https://your-1c-server/hs/max_bot/webhook"></div>
            <div class="form-actions">
                <button type="submit" class="btn btn-primary">Сохранить</button>
            </div>
        </form>
    </div>

    <!-- Tab 2: Шаблоны ответов -->
    <div class="tab-content" id="tab-templates">
        <div style="margin-bottom:12px;color:var(--text-muted);font-size:12px;">
            Переменные: {name}, {first_name}, {conv_id}, {phone_1}, {phone_2}, {support_email}, {email_subject},
            {work_hours_start}, {work_hours_end}, {policy_url}, {object_name}, {service_level}, {status},
            {price}, {score}, {label}, {recommendation}, {date}, {engineer}, {offer_text}, {category}
        </div>
        <div id="templates-list"></div>
        <div class="form-actions">
            <button type="button" class="btn btn-primary" onclick="saveTemplates()">Сохранить все</button>
        </div>
    </div>

    <!-- Tab 3: Функции бота -->
    <div class="tab-content" id="tab-features">
        <div class="table-wrap"><table><thead><tr><th>Функция</th><th>Описание</th><th>Статус</th></tr></thead>
            <tbody id="features-list"></tbody></table>
        </div>
    </div>

    <!-- Tab 4: Категории обращений -->
    <div class="tab-content" id="tab-categories">
        <div style="margin-bottom:12px;">
            <button class="btn btn-primary btn-sm" onclick="showCreateCategory()">+ Добавить</button>
        </div>
        <div class="table-wrap"><table><thead><tr><th>Иконка</th><th>Название</th><th>Описание</th><th>Активна</th><th class="actions"></th></tr></thead>
            <tbody id="categories-list"></tbody></table>
        </div>
    </div>

    <!-- Tab 5: База знаний -->
    <div class="tab-content" id="tab-kb">
        <div style="margin-bottom:12px;">
            <button class="btn btn-primary btn-sm" onclick="showCreateKB()">+ Добавить</button>
        </div>
        <div class="table-wrap"><table><thead><tr><th>Вопрос</th><th>Категория</th><th>Активна</th><th class="actions"></th></tr></thead>
            <tbody id="kb-list"></tbody></table>
        </div>
    </div>

    <!-- Tab 6: Тестовый прогон -->
    <div class="tab-content" id="tab-test">
        <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>
</div>

<!-- Category modal -->
<div class="modal-overlay" id="modal-category"><div class="modal">
    <button type="button" class="modal-close" onclick="this.closest('.modal-overlay').classList.remove('open')">✕</button>
    <h2 id="modal-category-title">Новая категория</h2>
    <form id="modal-category-form">
        <input type="hidden" name="id" id="cat-id">
        <div class="form-group"><label>Название</label><input type="text" name="name" id="cat-name" required></div>
        <div class="form-group"><label>Описание</label><input type="text" name="description" id="cat-desc"></div>
        <div class="form-group"><label>Иконка (emoji)</label><input type="text" name="icon_emoji" id="cat-icon" value="📋" maxlength="10"></div>
        <div class="form-group"><label>Ключевые слова (через запятую)</label><input type="text" name="keywords" id="cat-keywords"></div>
        <div class="form-group"><label><input type="checkbox" name="active" id="cat-active" checked> Активна</label></div>
        <div class="form-actions"><button type="submit" class="btn btn-primary">Сохранить</button>
        <button type="button" class="btn btn-secondary" onclick="this.closest('.modal-overlay').classList.remove('open')">Отмена</button></div>
    </form>
</div></div>

<!-- KB modal -->
<div class="modal-overlay" id="modal-kb"><div class="modal">
    <button type="button" class="modal-close" onclick="this.closest('.modal-overlay').classList.remove('open')">✕</button>
    <h2 id="modal-kb-title">Новая запись</h2>
    <form id="modal-kb-form">
        <input type="hidden" name="id" id="kb-id">
        <div class="form-group"><label>Вопрос</label><input type="text" name="question" id="kb-question" required></div>
        <div class="form-group"><label>Ответ</label><textarea name="answer" id="kb-answer" rows="4" required></textarea></div>
        <div class="form-group"><label>Категория</label><input type="text" name="category" id="kb-category"></div>
        <div class="form-group"><label>Ключевые слова (через запятую)</label><input type="text" name="keywords" id="kb-keywords"></div>
        <div class="form-group"><label><input type="checkbox" name="active" id="kb-active" checked> Активна</label></div>
        <div class="form-actions"><button type="submit" class="btn btn-primary">Сохранить</button>
        <button type="button" class="btn btn-secondary" onclick="this.closest('.modal-overlay').classList.remove('open')">Отмена</button></div>
    </form>
</div></div>

<script>
function switchTab(name){
    document.querySelectorAll('.tab-content').forEach(function(t){ t.classList.remove('active'); });
    document.querySelectorAll('.tab').forEach(function(t){ t.classList.remove('active'); });
    document.getElementById('tab-' + name).classList.add('active');
    document.querySelector('.tab[onclick*="' + name + '"]').classList.add('active');
    // Load data on first tab switch
    if(name === 'templates' && !window._templatesLoaded){ loadTemplates(); }
    if(name === 'features' && !window._featuresLoaded){ loadFeatures(); }
    if(name === 'categories' && !window._categoriesLoaded){ loadCategories(); }
    if(name === 'kb' && !window._kbLoaded){ loadKB(); }
}

// General settings
document.getElementById('bot-settings-form').addEventListener('submit', function(e){
    e.preventDefault();
    var data = {};
    this.querySelectorAll('input, select, textarea').forEach(function(el){
        if(el.name) data[el.name] = el.value;
    });
    fetch('/service/api/bot/settings/save', {
        method: 'POST', headers: {'Content-Type': 'application/json'},
        body: JSON.stringify(data)
    }).then(function(r){ return r.json() }).then(function(d){
        if(d.ok) alert('Настройки сохранены');
    });
});
fetch('/service/api/bot/settings').then(function(r){ return r.json() }).then(function(d){
    Object.keys(d).forEach(function(k){
        var el = document.getElementById(k);
        if(el) el.value = d[k];
    });
});

// Templates
var templates = {};
function loadTemplates(){
    window._templatesLoaded = true;
    fetch('/service/api/bot/templates').then(function(r){ return r.json() }).then(function(d){
        templates = d;
        var list = document.getElementById('templates-list');
        list.innerHTML = '';
        Object.keys(d).forEach(function(k){
            var div = document.createElement('div');
            div.className = 'form-group';
            div.style.cssText = 'margin-bottom:16px;';
            div.innerHTML = '<label>' + k + '</label><textarea name="' + k + '" rows="3" style="width:100%;font-family:monospace;font-size:12px;">' + d[k].replace(/</g,'&lt;').replace(/>/g,'&gt;') + '</textarea>';
            list.appendChild(div);
        });
    });
}
function saveTemplates(){
    var data = {};
    document.querySelectorAll('#templates-list textarea').forEach(function(el){
        data[el.name] = el.value;
    });
    fetch('/service/api/bot/templates/save', {
        method: 'POST', headers: {'Content-Type': 'application/json'},
        body: JSON.stringify(data)
    }).then(function(r){ return r.json() }).then(function(d){
        if(d.ok) alert('Шаблоны сохранены');
    });
}

// Features
function loadFeatures(){
    window._featuresLoaded = true;
    fetch('/service/api/bot/features').then(function(r){ return r.json() }).then(function(features){
        var tbody = document.getElementById('features-list');
        tbody.innerHTML = '';
        features.forEach(function(f){
            var tr = document.createElement('tr');
            tr.innerHTML = '<td><strong>' + f.name + '</strong></td><td>' + f.description + '</td><td>' +
                '<label class="toggle-switch"><input type="checkbox" data-key="' + f.key + '" ' + (f.enabled?'checked':'') + ' onchange="toggleFeature(this)"><span class="slider"></span></label>' +
                '</td>';
            tbody.appendChild(tr);
        });
    });
}
function toggleFeature(el){
    fetch('/service/api/bot/features/toggle', {
        method: 'POST', headers: {'Content-Type': 'application/json'},
        body: JSON.stringify({feature_key: el.dataset.key, enabled: el.checked})
    });
}

// Categories
function loadCategories(){
    window._categoriesLoaded = true;
    fetch('/service/api/bot/categories').then(function(r){ return r.json() }).then(function(cats){
        var tbody = document.getElementById('categories-list');
        tbody.innerHTML = '';
        cats.forEach(function(c){
            var tr = document.createElement('tr');
            tr.innerHTML = '<td>' + c.icon_emoji + '</td><td>' + c.name + '</td><td>' + c.description + '</td><td>' + (c.active?'✅':'❌') + '</td><td class="actions">' +
                '<button class="btn btn-secondary btn-sm" onclick="editCategory(' + JSON.stringify(c).replace(/"/g,'&quot;') + ')">✎</button>' +
                '<form method="post" action="/service/api/bot/categories/delete" style="display:inline" onsubmit="return confirm(\'Удалить?\')">' +
                '<input type="hidden" name="id" value="' + c.id + '"><button class="btn btn-danger btn-sm">✕</button></form></td>';
            tbody.appendChild(tr);
        });
    });
}
function showCreateCategory(){
    document.getElementById('modal-category-title').textContent = 'Новая категория';
    document.getElementById('cat-id').value = '';
    document.getElementById('cat-name').value = '';
    document.getElementById('cat-desc').value = '';
    document.getElementById('cat-icon').value = '📋';
    document.getElementById('cat-keywords').value = '';
    document.getElementById('cat-active').checked = true;
    document.getElementById('modal-category').classList.add('open');
}
function editCategory(c){
    document.getElementById('modal-category-title').textContent = 'Редактировать категорию';
    document.getElementById('cat-id').value = c.id;
    document.getElementById('cat-name').value = c.name;
    document.getElementById('cat-desc').value = c.description;
    document.getElementById('cat-icon').value = c.icon_emoji;
    document.getElementById('cat-keywords').value = (c.keywords||[]).join(', ');
    document.getElementById('cat-active').checked = c.active;
    document.getElementById('modal-category').classList.add('open');
}
document.getElementById('modal-category-form').addEventListener('submit', function(e){
    e.preventDefault();
    var data = {
        id: document.getElementById('cat-id').value,
        name: document.getElementById('cat-name').value,
        description: document.getElementById('cat-desc').value,
        icon_emoji: document.getElementById('cat-icon').value,
        keywords: document.getElementById('cat-keywords').value.split(',').map(function(s){return s.trim()}).filter(Boolean),
        active: document.getElementById('cat-active').checked,
    };
    var url = data.id ? '/service/api/bot/categories/edit' : '/service/api/bot/categories/create';
    fetch(url, {method:'POST', headers:{'Content-Type':'application/json'}, body:JSON.stringify(data)})
    .then(function(r){ return r.json() }).then(function(d){
        if(d.ok){ document.getElementById('modal-category').classList.remove('open'); loadCategories(); }
    });
});

// KB
function loadKB(){
    window._kbLoaded = true;
    fetch('/service/api/bot/kb').then(function(r){ return r.json() }).then(function(entries){
        var tbody = document.getElementById('kb-list');
        tbody.innerHTML = '';
        entries.forEach(function(e){
            var tr = document.createElement('tr');
            tr.innerHTML = '<td>' + e.question + '</td><td>' + e.category + '</td><td>' + (e.active?'✅':'❌') + '</td><td class="actions">' +
                '<button class="btn btn-secondary btn-sm" onclick="editKB(' + JSON.stringify(e).replace(/"/g,'&quot;') + ')">✎</button>' +
                '<form method="post" action="/service/api/bot/kb/delete" style="display:inline" onsubmit="return confirm(\'Удалить?\')">' +
                '<input type="hidden" name="id" value="' + e.id + '"><button class="btn btn-danger btn-sm">✕</button></form></td>';
            tbody.appendChild(tr);
        });
    });
}
function showCreateKB(){
    document.getElementById('modal-kb-title').textContent = 'Новая запись';
    document.getElementById('kb-id').value = '';
    document.getElementById('kb-question').value = '';
    document.getElementById('kb-answer').value = '';
    document.getElementById('kb-category').value = '';
    document.getElementById('kb-keywords').value = '';
    document.getElementById('kb-active').checked = true;
    document.getElementById('modal-kb').classList.add('open');
}
function editKB(e){
    document.getElementById('modal-kb-title').textContent = 'Редактировать';
    document.getElementById('kb-id').value = e.id;
    document.getElementById('kb-question').value = e.question;
    document.getElementById('kb-answer').value = e.answer;
    document.getElementById('kb-category').value = e.category;
    document.getElementById('kb-keywords').value = (e.keywords||[]).join(', ');
    document.getElementById('kb-active').checked = e.active;
    document.getElementById('modal-kb').classList.add('open');
}
document.getElementById('modal-kb-form').addEventListener('submit', function(e){
    e.preventDefault();
    var data = {
        id: document.getElementById('kb-id').value,
        question: document.getElementById('kb-question').value,
        answer: document.getElementById('kb-answer').value,
        category: document.getElementById('kb-category').value,
        keywords: document.getElementById('kb-keywords').value.split(',').map(function(s){return s.trim()}).filter(Boolean),
        active: document.getElementById('kb-active').checked,
    };
    var url = data.id ? '/service/api/bot/kb/edit' : '/service/api/bot/kb/create';
    fetch(url, {method:'POST', headers:{'Content-Type':'application/json'}, body:JSON.stringify(data)})
    .then(function(r){ return r.json() }).then(function(d){
        if(d.ok){ document.getElementById('modal-kb').classList.remove('open'); loadKB(); }
    });
});

// Test runner
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 %}