{% extends 'admin/admin_base.html' %}
{% block title %}Настройки{% endblock %}
{% block admin_content %}
<div class="container-fluid settings-page">
    <div class="admin-toolbar"><div class="admin-toolbar__main">
                <h1 class="admin-toolbar__title"><i class="bi bi-gear-fill" aria-hidden="true"></i> Настройки приложения</h1>
    
            </div></div>

    {% if settings_sections %}
    <ul class="nav nav-tabs mb-3" id="settingsSectionTabs" role="tablist">
        <li class="nav-item" role="presentation">
            <button type="button" class="nav-link active" data-section-id="general"
                    onclick="switchSettingsSection('general')">
                <i class="bi bi-sliders"></i> Общие
            </button>
        </li>
        {% for section in settings_sections %}
        <li class="nav-item" role="presentation">
            <button type="button" class="nav-link" data-section-id="{{ section.id }}"
                    onclick="switchSettingsSection('{{ section.id }}')">
                {% if section.icon %}<i class="bi {{ section.icon }}"></i>{% endif %}
                {{ section.title }}
            </button>
        </li>
        {% endfor %}
    </ul>
    {% endif %}

    <div id="settings-section-general" class="settings-section-panel">
        <div class="row g-3 align-items-start">
            <div class="col-lg-7">
                <form id="settings-main-form">
                    <div class="admin-card mb-3">
                        <div class="card-header">
                            <i class="bi bi-gear"></i> Общие
                        </div>
                        <div class="card-body">
                            <div class="mb-3">
                                <label class="form-label" for="app_name">Имя приложения</label>
                                <input type="text" class="form-control" name="app_name" id="app_name" placeholder="Имя приложения">
                            </div>
                            <div class="mb-0">
                                <label class="form-label" for="web_port">Порт для API и админки</label>
                                <input type="number" class="form-control" name="web_port" id="web_port" min="1" max="65535">
                                <div class="form-text">Порт, на котором доступны админ-панель и внутренний API.</div>
                            </div>
                        </div>
                    </div>

                    <div class="admin-card mb-3">
                        <div class="card-header">
                            <i class="bi bi-database"></i> База данных
                        </div>
                        <div class="card-body">
                            <div class="row g-3">
                                <div class="col-md-6">
                                    <label class="form-label" for="db_driver">Драйвер</label>
                                    <select class="form-select" name="db_driver" id="db_driver">
                                        <option value="mysql">MySQL</option>
                                        <option value="psql">PostgreSQL</option>
                                    </select>
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label" for="db_host">Хост</label>
                                    <input type="text" class="form-control" name="db_host" id="db_host">
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label" for="db_name">Имя БД</label>
                                    <input type="text" class="form-control" name="db_name" id="db_name">
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label" for="db_user">Пользователь</label>
                                    <input type="text" class="form-control" name="db_user" id="db_user">
                                </div>
                                <div class="col-12">
                                    <label class="form-label" for="db_pass">Пароль</label>
                                    <input type="password" class="form-control" name="db_pass" id="db_pass" autocomplete="new-password">
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="admin-card mb-3">
                        <div class="card-header">
                            <i class="bi bi-terminal"></i> Логирование
                        </div>
                        <div class="card-body">
                            <label class="form-label" for="log_level">Уровень логирования</label>
                            <select class="form-select" name="log_level" id="log_level">
                                <option value="DEBUG">DEBUG</option>
                                <option value="INFO">INFO</option>
                                <option value="WARNING">WARNING</option>
                                <option value="ERROR">ERROR</option>
                            </select>
                        </div>
                    </div>

                    <div class="admin-card settings-main-actions">
                        <div class="card-body d-flex flex-wrap justify-content-between align-items-center gap-3">
                            <div class="text-muted small">
                                Сохраняет блоки «Общие», «База данных» и «Логирование».
                            </div>
                            <button type="submit" class="btn primary" id="save-main-settings-btn">
                                <i class="bi bi-save"></i> Сохранить основные настройки
                            </button>
                        </div>
                    </div>
                </form>

                <div id="settings-save-result" class="alert alert-success d-none" role="alert">
                    <div class="d-flex flex-wrap align-items-center gap-2">
                        <span id="settings-save-result-text">Основные настройки сохранены. Для применения может потребоваться перезапуск.</span>
                        <button type="button" id="restart-app-btn" class="btn secondary btn-sm">
                            <i class="bi bi-arrow-repeat"></i> Перезапустить сервер
                        </button>
                    </div>
                </div>
            </div>

            <div class="col-lg-5">
                <div class="admin-card mb-3">
                    <div class="card-header">
                        <i class="bi bi-globe"></i> Public API / Шлюз
                    </div>
                    <div class="card-body" id="web-gateway-settings">
                        <div id="web-settings-warning" class="alert alert-warning d-none"></div>
                        <div class="mb-3">
                            <label class="form-label" for="public_port">Публичный порт</label>
                            <input type="number" class="form-control" id="public_port" min="1" max="65535">
                        </div>
                        <div class="form-check mb-2">
                            <input class="form-check-input" type="checkbox" id="public_api_separate">
                            <label class="form-check-label" for="public_api_separate">Два порта (отдельный публичный)</label>
                        </div>
                        <div class="form-check mb-3">
                            <input class="form-check-input" type="checkbox" id="public_api_enabled" checked>
                            <label class="form-check-label" for="public_api_enabled">Public API включён</label>
                        </div>
                        <div class="mb-3">
                            <label class="form-label" for="public_api_access_mode">Режим доступа</label>
                            <select class="form-select" id="public_api_access_mode">
                                <option value="open">open — без глобального API-ключа</option>
                                <option value="api_key_required">api_key_required — X-API-Key на все public paths</option>
                            </select>
                        </div>
                        <div class="mb-0">
                            <label class="form-label" for="public_api_key_id">Публичный site-ключ</label>
                            <select class="form-select" id="public_api_key_id">
                                <option value="">— не выбран —</option>
                            </select>
                        </div>
                    </div>
                    <div class="card-footer d-flex flex-wrap justify-content-between align-items-center gap-2">
                        <span class="text-muted small">Публичный порт, режим доступа и site-ключ.</span>
                        <button type="button" class="btn primary" id="save-web-settings-btn">
                            <i class="bi bi-save"></i> Сохранить настройки шлюза
                        </button>
                    </div>
                </div>

                <div id="web-settings-save-result" class="alert alert-success d-none" role="alert">
                    Настройки шлюза сохранены. После смены портов перезапустите приложение.
                </div>
            </div>
        </div>

        <div class="row g-3 mt-1">
            <div class="col-12" id="plugin-ports-ops">
                <div class="admin-card">
                    <div class="card-header">
                        <i class="bi bi-hdd-network"></i> HTTP-listener'ы плагинов
                    </div>
                    <div class="card-body">
                        <p class="text-muted small mb-3">Только просмотр: активные HTTP-listener'ы плагинов.</p>
                        <div id="plugin-ports-app"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {% for section in settings_sections %}
    <div id="settings-section-{{ section.id }}" class="settings-section-panel d-none"></div>
    {% endfor %}
</div>

{% if settings_sections %}
<script type="application/json" id="settings-sections-data">{{ settings_sections | tojson }}</script>
{% endif %}
{% endblock %}
{% block admin_vue_scripts %}
<script src="{{ url_for('static', filename='js/vue.runtime.global.prod.js') }}"></script>
{% endblock %}
{% block admin_scripts %}
<script type="application/json" id="admin-page-config">{{ {"canManageMailTemplates": can_manage_mail_templates | default(false)} | tojson }}</script>
<script src="{{ url_for('static', filename='js/admin-page-config.js') }}"></script>
<script src="{{ url_for('static', filename='js/settings.js') }}"></script>
<script src="{{ url_for('static', filename='js/settings_plugin_sections.js') }}"></script>
<script src="{{ url_for('static', filename='js/admin-plugin-ports-vue.js') }}"></script>
{% endblock %}