{% extends "page.html" %}
{% block page_content %}
<style>
.tab-bar { display:flex; gap:0; margin-bottom:20px; border-bottom:2px solid var(--border); }
.tab-bar .tab { padding:10px 20px; cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-2px; color:var(--text-muted); font-weight:500; }
.tab-bar .tab.active { color:var(--accent); border-bottom-color:var(--accent); }
.tab-content { display:none; }
.tab-content.active { display:block; }
.bot-settings-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.bot-settings-grid .full-width { grid-column:1/-1; }
.form-group { margin-bottom:16px; }
.form-group label { display:block; font-weight:600; margin-bottom:6px; font-size:13px; color:var(--text-muted); }
.form-group input, .form-group textarea, .form-group select {
    width:100%; padding:10px 14px; border:1px solid var(--border);
    border-radius:8px; font-size:14px; background:var(--bg-input); color:var(--text-primary);
    transition:border-color 0.2s;
}
.form-group input:focus, .form-group textarea:focus {
    outline:none; border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent);
}
.form-group textarea { min-height:100px; resize:vertical; }
.form-actions { grid-column:1/-1; display:flex; gap:12px; margin-top:8px; }
.form-actions .btn { min-width:160px; }
.hint { font-size:12px; color:var(--text-muted); margin-top:4px; }
.test-iframe { width:100%; height:650px; border:none; border-radius:8px; }
</style>

<div class="card">
    <div class="card-header"><h2>Настройки чат-бота MAX — «София»</h2></div>
    <div class="tab-bar">
        <div class="tab active" onclick="switchTab('main')">Основные</div>
        <div class="tab" onclick="switchTab('test')">Тестовый прогон</div>
    </div>

    <div class="tab-content active" id="tab-main">
        <form id="bot-settings-form">
            <div class="bot-settings-grid">
                <div class="form-group full-width">
                    <label>Имя ассистента</label>
                    <input type="text" name="assistant_name" id="assistant_name" placeholder="Например: София">
                </div>
                <div class="form-group full-width">
                    <label>Роль ассистента</label>
                    <textarea name="assistant_role" id="assistant_role" placeholder="Описание роли бота..."></textarea>
                    <div class="hint">Будет использована для формирования системного промпта YandexGPT</div>
                </div>
                <div class="form-group">
                    <label>MAX-бот ID</label>
                    <input type="text" name="max_bot_id" id="max_bot_id" placeholder="Токен бота">
                    <div class="hint">Токен чат-бота из платформы MAX</div>
                </div>
                <div class="form-group">
                    <label>Email поддержки</label>
                    <input type="email" name="support_email" id="support_email" placeholder="zakaz@aegisone.ru">
                    <div class="hint">На этот email приходят уведомления о новых заявках</div>
                </div>
                <div class="form-group full-width">
                    <label>Тема письма</label>
                    <input type="text" name="email_subject" id="email_subject" placeholder="Обращение через Виртуального помощника">
                    <div class="hint">Тема email-уведомления об эскалации</div>
                </div>
                <div class="form-actions">
                    <button type="submit" class="btn btn-primary">Сохранить настройки</button>
                </div>
            </div>
        </form>
    </div>

    <div class="tab-content" id="tab-test">
        <p style="margin-bottom:12px;color:var(--text-muted);font-size:13px;">Симуляция диалога с ботом. Отправляет запросы напрямую на вебхук бота.</p>
        <iframe src="/service/bot-test-content" class="test-iframe" id="test-iframe"></iframe>
    </div>
</div>

<div class="card" style="margin-top:20px;">
    <div class="card-header"><h2>Общие настройки портала</h2></div>
    <div class="hint" style="margin-bottom:16px;">
        Yandex GPT и Yandex Disk настраиваются в разделе
        <a href="/service/portal-settings">Настройка портала</a>.
        Бот использует эти данные автоматически.
    </div>
</div>

<script>
function switchTab(name){
    document.querySelectorAll('.tab-content').forEach(function(t){ t.classList.remove('active'); });
    document.querySelectorAll('.tab-bar .tab').forEach(function(t){ t.classList.remove('active'); });
    document.getElementById('tab-' + name).classList.add('active');
    document.querySelector('.tab-bar .tab[onclick*="' + name + '"]').classList.add('active');
    if(name === 'test'){
        document.getElementById('test-iframe').src = '/service/bot-test-content';
    }
}

document.getElementById('bot-settings-form').addEventListener('submit', function(e){
    e.preventDefault();
    var data = {};
    this.querySelectorAll('input, 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) showNotification('Настройки сохранены', 'success');
        else showNotification('Ошибка: ' + (d.error || 'сохранения'), 'error');
    }).catch(function(){
        showNotification('Ошибка соединения', 'error');
    });
});

fetch('/service/api/bot/settings').then(function(r){ return r.json() }).then(function(d){
    ['assistant_name','assistant_role','support_email','email_subject','max_bot_id'].forEach(function(k){
        var el = document.getElementById(k);
        if(el) el.value = d[k] || '';
    });
    if(document.getElementById('max_bot_id') && !document.getElementById('max_bot_id').value){
        document.getElementById('max_bot_id').value = 'f9LHodD0cOKkk03DYXj906MdIeRs...';
    }
});
</script>
{% endblock %}