{% extends "base.html" %}
{% block title %}Настройки — TG Agent{% endblock %}
{% block content %}
<h1 class="mb-4">Настройки</h1>

<ul class="nav nav-pills mb-4" id="settings-tabs" role="tablist">
    <li class="nav-item" role="presentation">
        <button class="nav-link active" id="tab-accounts" data-bs-toggle="pill"
                data-bs-target="#pane-accounts" type="button" role="tab"
                aria-controls="pane-accounts" aria-selected="true">
            <i class="bi bi-phone me-1"></i>Аккаунты
        </button>
    </li>
    <li class="nav-item" role="presentation">
        <button class="nav-link" id="tab-credentials" data-bs-toggle="pill"
                data-bs-target="#pane-credentials" type="button" role="tab"
                aria-controls="pane-credentials" aria-selected="false">
            <i class="bi bi-key me-1"></i>API
        </button>
    </li>
    <li class="nav-item" role="presentation">
        <button class="nav-link" id="tab-scheduler" data-bs-toggle="pill"
                data-bs-target="#pane-scheduler" type="button" role="tab"
                aria-controls="pane-scheduler" aria-selected="false">
            <i class="bi bi-clock me-1"></i>Планировщик
        </button>
    </li>
    <li class="nav-item" role="presentation">
        <button class="nav-link" id="tab-semantic" data-bs-toggle="pill"
                data-bs-target="#pane-semantic" type="button" role="tab"
                aria-controls="pane-semantic" aria-selected="false">
            <i class="bi bi-search-heart me-1"></i>Semantic Search
        </button>
    </li>
    <li class="nav-item" role="presentation">
        <button class="nav-link" id="tab-image" data-bs-toggle="pill"
                data-bs-target="#pane-image" type="button" role="tab"
                aria-controls="pane-image" aria-selected="false">
            <i class="bi bi-image me-1"></i>Изображения
        </button>
    </li>
    <li class="nav-item" role="presentation">
        <button class="nav-link" id="tab-devmode" data-bs-toggle="pill"
                data-bs-target="#pane-devmode" type="button" role="tab"
                aria-controls="pane-devmode" aria-selected="false">
            <i class="bi bi-code-slash me-1"></i>Разработчик
        </button>
    </li>
    <li class="nav-item" role="presentation">
        <button class="nav-link" id="tab-filters" data-bs-toggle="pill"
                data-bs-target="#pane-filters" type="button" role="tab"
                aria-controls="pane-filters" aria-selected="false">
            <i class="bi bi-funnel me-1"></i>Фильтры
        </button>
    </li>
    <li class="nav-item" role="presentation">
        <button class="nav-link" id="tab-notifications" data-bs-toggle="pill"
                data-bs-target="#pane-notifications" type="button" role="tab"
                aria-controls="pane-notifications" aria-selected="false">
            <i class="bi bi-bell me-1"></i>Уведомления
        </button>
    </li>
    <li class="nav-item" role="presentation">
        <button class="nav-link" id="tab-translation" data-bs-toggle="pill"
                data-bs-target="#pane-translation" type="button" role="tab"
                aria-controls="pane-translation" aria-selected="false">
            <i class="bi bi-translate me-1"></i>Перевод
        </button>
    </li>
    <li class="nav-item" role="presentation">
        <button class="nav-link" id="tab-tool-permissions" data-bs-toggle="pill"
                data-bs-target="#pane-tool-permissions" type="button" role="tab"
                aria-controls="pane-tool-permissions" aria-selected="false">
            <i class="bi bi-shield-lock me-1"></i>Разрешения агента
        </button>
    </li>
</ul>

<div class="tab-content" id="settings-tab-content">
    <div class="tab-pane fade show active" id="pane-accounts" role="tabpanel" aria-labelledby="tab-accounts">
        <div class="card shadow-sm">
            <div class="card-header bg-body-secondary fw-semibold">Telegram-аккаунты</div>
            <div class="card-body">
                {% include "settings/_accounts.html" %}
            </div>
        </div>
    </div>

    <div class="tab-pane fade" id="pane-credentials" role="tabpanel" aria-labelledby="tab-credentials">
        <div class="card shadow-sm">
            <div class="card-header bg-body-secondary fw-semibold">Telegram API credentials</div>
            <div class="card-body">
                {% include "settings/_credentials.html" %}
            </div>
        </div>
    </div>

    <div class="tab-pane fade" id="pane-scheduler" role="tabpanel" aria-labelledby="tab-scheduler">
        <div class="card shadow-sm">
            <div class="card-header bg-body-secondary fw-semibold">Планировщик</div>
            <div class="card-body">
                {% include "settings/_scheduler.html" %}
            </div>
        </div>
    </div>

    <div class="tab-pane fade" id="pane-semantic" role="tabpanel" aria-labelledby="tab-semantic">
        <div class="card shadow-sm">
            <div class="card-header bg-body-secondary fw-semibold">Semantic Search & Embeddings</div>
            <div class="card-body">
                {% include "settings/_semantic.html" %}
            </div>
        </div>
    </div>

    <div class="tab-pane fade" id="pane-image" role="tabpanel" aria-labelledby="tab-image">
        <div class="card shadow-sm">
            <div class="card-header bg-body-secondary fw-semibold">Image Generation Providers</div>
            <div class="card-body">
                {% include "settings/_image_providers.html" %}
            </div>
        </div>
    </div>

    <div class="tab-pane fade" id="pane-devmode" role="tabpanel" aria-labelledby="tab-devmode">
        <div class="card shadow-sm">
            <div class="card-header bg-body-secondary fw-semibold">
                Режим разработчика{% if agent_dev_mode_enabled %} & AI Agent{% endif %}
            </div>
            <div class="card-body">
                {% include "settings/_devmode.html" %}
            </div>
        </div>
    </div>

    <div class="tab-pane fade" id="pane-filters" role="tabpanel" aria-labelledby="tab-filters">
        <div class="card shadow-sm">
            <div class="card-header bg-body-secondary fw-semibold">Фильтры каналов</div>
            <div class="card-body">
                {% include "settings/_filters.html" %}
            </div>
        </div>
    </div>

    <div class="tab-pane fade" id="pane-notifications" role="tabpanel" aria-labelledby="tab-notifications">
        <div class="card shadow-sm">
            <div class="card-header bg-body-secondary fw-semibold">Уведомления</div>
            <div class="card-body">
                {% include "settings/_notifications.html" %}
            </div>
        </div>
    </div>

    <div class="tab-pane fade" id="pane-translation" role="tabpanel" aria-labelledby="tab-translation">
        <div class="card shadow-sm">
            <div class="card-header bg-body-secondary fw-semibold">Перевод и определение языка</div>
            <div class="card-body">
                {% include "settings/_translation.html" %}
            </div>
        </div>
    </div>

    <div class="tab-pane fade" id="pane-tool-permissions" role="tabpanel" aria-labelledby="tab-tool-permissions">
        <div class="card shadow-sm">
            <div class="card-header bg-body-secondary fw-semibold">Разрешения инструментов агента</div>
            <div class="card-body">
                {% include "settings/_tool_permissions.html" %}
            </div>
        </div>
    </div>
</div>

{% endblock %}
{% block head_scripts %}
<script src="/static/settings.js?v={{ app_version }}" defer></script>
<script>
(function() {
    // Handle hash-based tab activation for /settings/#pane-name URLs
    function activateTabFromHash() {
        var hash = window.location.hash;
        if (hash) {
            var paneId = hash.replace('#', '');
            // Find the corresponding tab button
            var tab = document.querySelector('[data-bs-target="#' + paneId + '"]');
            if (tab) {
                // Remove active from all tabs and panes
                document.querySelectorAll('#settings-tabs .nav-link').forEach(function(el) {
                    el.classList.remove('active');
                });
                document.querySelectorAll('#settings-tab-content .tab-pane').forEach(function(el) {
                    el.classList.remove('show', 'active');
                });
                // Activate selected tab and pane
                tab.classList.add('active');
                var pane = document.getElementById(paneId);
                if (pane) {
                    pane.classList.add('show', 'active');
                }
            }
        }
    }
    // Activate on page load and hash change
    window.addEventListener('hashchange', activateTabFromHash);
    activateTabFromHash();
})();
</script>
{% endblock %}