{% extends 'admin/admin_base.html' %}
{% block title %}Управление конфигурацией{% endblock %}
{% block admin_content %}
<div class="admin-toolbar">
    <div class="admin-toolbar__main">
        <h1 class="admin-toolbar__title"><i class="bi bi-gear" aria-hidden="true"></i> Управление конфигурацией</h1>
    </div>
</div>

    <!-- Вкладки -->
    <ul class="nav nav-tabs mb-4" id="configTabs" role="tablist">
        <li class="nav-item" role="presentation">
            <button class="nav-link active" id="editor-tab" data-bs-toggle="tab" data-bs-target="#editor" type="button" role="tab">
                <i class="bi bi-pencil"></i> Редактор
            </button>
        </li>
        <li class="nav-item" role="presentation">
            <button class="nav-link" id="history-tab" data-bs-toggle="tab" data-bs-target="#history" type="button" role="tab">
                <i class="bi bi-clock-history"></i> История
            </button>
        </li>
        <li class="nav-item" role="presentation">
            <button class="nav-link" id="export-import-tab" data-bs-toggle="tab" data-bs-target="#export-import" type="button" role="tab">
                <i class="bi bi-download"></i> Экспорт/Импорт
            </button>
        </li>
        <li class="nav-item" role="presentation">
            <button class="nav-link" id="templates-tab" data-bs-toggle="tab" data-bs-target="#templates" type="button" role="tab">
                <i class="bi bi-file-earmark-text"></i> Шаблоны
            </button>
        </li>
    </ul>

    <!-- Содержимое вкладок -->
    <div class="tab-content" id="configTabContent">
        <!-- Вкладка редактора -->
        <div class="tab-pane fade show active" id="editor" role="tabpanel">
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0"><i class="bi bi-pencil"></i> Редактирование конфигурации</h5>
                </div>
                <div class="card-body">
                    <div class="alert alert-info mb-3">
                        <strong>Ключи Gateway Ops (1.0.10)</strong>
                        <ul class="mb-0 small">
                            <li><code>web.public_api_access_mode</code> — <code>open</code> | <code>api_key_required</code></li>
                            <li><code>web.public_api_key_id</code> — id публичного site-ключа из раздела «Автоматизация»</li>
                            <li><code>routing.static_services</code> — proxy endpoints: <code>host</code>, <code>port</code>, <code>protocol</code>, <code>environment</code>, <code>health_path</code>, optional <code>version</code>, <code>database_config_path</code></li>
                            <li><code>routing.rules[].id</code>, <code>path_prefix</code> — UUID правил и префикс пути</li>
                        </ul>
                        <p class="mb-0 mt-2 small">Полный справочник: <code>docs/technical/config-yml-reference.md</code> в поставке продукта.</p>
                    </div>
                    <form id="config-form">
                        <div class="mb-3">
                            <label class="form-label">Описание изменений (необязательно)</label>
                            <input type="text" class="form-control" id="config-description" placeholder="Описание изменений">
                        </div>
                        <div class="mb-3">
                            <label class="form-label">YAML конфигурация</label>
                            <textarea class="form-control font-monospace" id="config-yaml" rows="20" style="font-size: 0.9em;"></textarea>
                            <div class="form-text">Редактируйте YAML конфигурацию напрямую. Изменения будут сохранены с версионированием.</div>
                        </div>
                        <div class="d-flex gap-2">
                            <button type="submit" class="btn primary"><i class="bi bi-save"></i> Сохранить</button>
                            <button type="button" class="btn ghost" id="validate-btn"><i class="bi bi-check-circle"></i> Валидация</button>
                            <button type="button" class="btn secondary" id="reload-btn"><i class="bi bi-arrow-clockwise"></i> Перезагрузить</button>
                        </div>
                    </form>
                    <div id="config-validation-result" class="mt-3"></div>
                </div>
            </div>
        </div>

        <!-- Вкладка истории -->
        <div class="tab-pane fade" id="history" role="tabpanel">
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h5 class="mb-0"><i class="bi bi-clock-history"></i> История изменений</h5>
                    <button class="btn primary btn-sm" id="refresh-history-btn"><i class="bi bi-arrow-clockwise"></i> Обновить</button>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-hover" id="history-table">
                            <thead>
                                <tr>
                                    <th>Версия</th>
                                    <th>Тип изменения</th>
                                    <th>Описание</th>
                                    <th>Изменено</th>
                                    <th>Дата</th>
                                    <th>Действия</th>
                                </tr>
                            </thead>
                            <tbody id="history-tbody">
                                <tr>
                                    <td colspan="6" class="text-center">Загрузка...</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        <!-- Вкладка экспорт/импорт -->
        <div class="tab-pane fade" id="export-import" role="tabpanel">
            <div class="row">
                <div class="col-md-6">
                    <div class="card">
                        <div class="card-header">
                            <h5 class="mb-0"><i class="bi bi-download"></i> Экспорт конфигурации</h5>
                        </div>
                        <div class="card-body">
                            <div class="mb-3">
                                <label class="form-label">Формат</label>
                                <select class="form-select" id="export-format">
                                    <option value="yaml">YAML</option>
                                    <option value="json">JSON</option>
                                </select>
                            </div>
                            <div class="mb-3">
                                <label class="form-label">Версия (оставьте пустым для текущей)</label>
                                <input type="number" class="form-control" id="export-version" placeholder="Номер версии">
                            </div>
                            <button class="btn primary" id="export-btn"><i class="bi bi-download"></i> Экспортировать</button>
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="card">
                        <div class="card-header">
                            <h5 class="mb-0"><i class="bi bi-upload"></i> Импорт конфигурации</h5>
                        </div>
                        <div class="card-body">
                            <div class="mb-3">
                                <label class="form-label">Файл конфигурации (YAML или JSON)</label>
                                <input type="file" class="form-control" id="import-file" accept=".yml,.yaml,.json">
                            </div>
                            <button class="btn primary" id="import-btn"><i class="bi bi-upload"></i> Импортировать</button>
                            <div id="import-result" class="mt-3"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Вкладка шаблонов -->
        <div class="tab-pane fade" id="templates" role="tabpanel">
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0"><i class="bi bi-file-earmark-text"></i> Шаблоны конфигурации</h5>
                </div>
                <div class="card-body">
                    <div id="templates-list" class="row">
                        <!-- Шаблоны будут загружены динамически -->
                    </div>
                </div>
            </div>
        </div>
    </div>

<!-- Модальное окно для просмотра версии -->
<div class="modal fade" id="versionModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Версия конфигурации <span id="version-number"></span></h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <pre id="version-content" class="bg-light p-3" style="max-height: 500px; overflow-y: auto;"></pre>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn ghost" data-bs-dismiss="modal">Закрыть</button>
                <button type="button" class="btn primary" id="restore-version-btn">Восстановить эту версию</button>
            </div>
        </div>
    </div>
</div>

{% endblock %}
{% block admin_scripts %}
<script src="{{ url_for('static', filename='js/config.js') }}"></script>
{% endblock %}