{% extends "admin/admin_base.html" %}

{% block admin_content %}
<div class="admin-toolbar"><div class="admin-toolbar__main">
                <h1 class="admin-toolbar__title"><i class="bi bi-diagram-3" aria-hidden="true"></i> Управление маршрутизацией</h1>
        
            </div><div class="admin-toolbar__actions">
            <button class="btn primary btn-sm" data-bs-toggle="modal" data-bs-target="#addRuleModal">
                <i class="bi bi-plus-circle" aria-hidden="true"></i> Добавить правило
            </button>
            <button class="btn secondary btn-sm" onclick="showPreviewModal()">
                <i class="bi bi-eye" aria-hidden="true"></i> Предпросмотр
            </button>
            <button class="btn primary btn-sm" onclick="showTestModal()">
                <i class="bi bi-play-circle" aria-hidden="true"></i> Тестировать маршрут
            </button>
            <button class="btn ghost btn-sm" onclick="showHistoryModal()">
                <i class="bi bi-clock-history" aria-hidden="true"></i> История изменений
            </button>
        </div>
    </div>
    <div class="admin-card">
        <div class="card-header d-flex justify-content-between align-items-center">
            <h5 class="mb-0">Правила маршрутизации</h5>
            <small class="text-muted">Перетащите правила для изменения приоритета</small>
        </div>
        <div class="table-wrap">
            <div id="rulesTableContainer">
                <div class="text-center p-3">
                    <div class="spinner-border text-primary spinner-border-sm" role="status">
                        <span class="visually-hidden">Загрузка...</span>
                    </div>
                </div>
            </div>
        </div>
    </div>

<!-- Modal для добавления правила -->
<div class="modal fade" id="addRuleModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="addRuleModalTitle">Добавить правило маршрутизации</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <form id="addRuleForm">
                    <input type="hidden" id="ruleEditId" value="">
                    <div class="mb-3">
                        <label for="ruleModule" class="form-label">Модуль <span class="text-danger">*</span></label>
                        <input type="text" class="form-control" id="ruleModule" required>
                        <small class="form-text text-muted">Имя модуля (например, 'back')</small>
                    </div>
                    <div class="mb-3">
                        <label for="ruleService" class="form-label">Сервис <span class="text-danger">*</span></label>
                        <select class="form-select" id="ruleService" required>
                            <option value="">— выберите из catalog —</option>
                        </select>
                        <small class="form-text text-muted">Сервис из catalog / static_services</small>
                    </div>
                    <div class="mb-3">
                        <label for="rulePathPrefix" class="form-label">Path prefix</label>
                        <input type="text" class="form-control" id="rulePathPrefix" placeholder="api/v1">
                        <small class="form-text text-muted">Префикс пути при проксировании запросов к сервису</small>
                    </div>
                    <div class="mb-3">
                        <label for="rulePriority" class="form-label">Приоритет</label>
                        <input type="number" class="form-control" id="rulePriority" value="0">
                        <small class="form-text text-muted">Чем выше значение, тем выше приоритет</small>
                    </div>
                    <div class="mb-3">
                        <label for="ruleMethods" class="form-label">HTTP методы (через запятую)</label>
                        <input type="text" class="form-control" id="ruleMethods" placeholder="GET, POST">
                        <small class="form-text text-muted">Оставьте пустым для всех методов</small>
                    </div>
                    <div class="mb-3">
                        <label for="ruleHosts" class="form-label">Хосты (через запятую)</label>
                        <input type="text" class="form-control" id="ruleHosts" placeholder="example.com, api.example.com">
                        <small class="form-text text-muted">Оставьте пустым для всех хостов</small>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn ghost" data-bs-dismiss="modal">Отмена</button>
                <button type="button" class="btn primary" id="addRuleSaveBtn" onclick="saveRule()">Добавить</button>
            </div>
        </div>
    </div>
</div>

<!-- Modal для предпросмотра правил -->
<div class="modal fade" id="previewModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Предпросмотр правил маршрутизации</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <form id="previewForm">
                    <div class="mb-3">
                        <label for="previewModule" class="form-label">Модуль <span class="text-danger">*</span></label>
                        <input type="text" class="form-control" id="previewModule" required>
                    </div>
                    <div class="mb-3">
                        <label for="previewMethod" class="form-label">HTTP метод</label>
                        <select class="form-select" id="previewMethod">
                            <option value="GET">GET</option>
                            <option value="POST">POST</option>
                            <option value="PUT">PUT</option>
                            <option value="DELETE">DELETE</option>
                            <option value="PATCH">PATCH</option>
                        </select>
                    </div>
                    <div class="mb-3">
                        <label for="previewHost" class="form-label">Хост</label>
                        <input type="text" class="form-control" id="previewHost" placeholder="example.com">
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Заголовки (JSON)</label>
                        <textarea class="form-control" id="previewHeaders" rows="3" placeholder='{"X-Custom-Header": "value"}'></textarea>
                    </div>
                    <button type="button" class="btn primary" onclick="previewRules()">Предпросмотр</button>
                </form>
                <div id="previewResult" class="mt-3" style="display: none;">
                    <hr>
                    <h6>Результат:</h6>
                    <pre id="previewResultContent" class="admin-json-preview"></pre>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn ghost" data-bs-dismiss="modal">Закрыть</button>
            </div>
        </div>
    </div>
</div>

<!-- Modal для тестирования маршрута -->
<div class="modal fade" id="testModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Тестирование маршрута</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <form id="testForm">
                    <div class="mb-3">
                        <label for="testModule" class="form-label">Модуль <span class="text-danger">*</span></label>
                        <input type="text" class="form-control" id="testModule" required>
                    </div>
                    <div class="mb-3">
                        <label for="testMethod" class="form-label">HTTP метод</label>
                        <select class="form-select" id="testMethod">
                            <option value="GET">GET</option>
                            <option value="POST">POST</option>
                            <option value="PUT">PUT</option>
                            <option value="DELETE">DELETE</option>
                            <option value="PATCH">PATCH</option>
                        </select>
                    </div>
                    <div class="mb-3">
                        <label for="testHost" class="form-label">Хост</label>
                        <input type="text" class="form-control" id="testHost" placeholder="example.com">
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Заголовки (JSON)</label>
                        <textarea class="form-control" id="testHeaders" rows="3" placeholder='{"X-Custom-Header": "value"}'></textarea>
                    </div>
                    <button type="button" class="btn primary" onclick="testRoute()">Тестировать</button>
                </form>
                <div id="testResult" class="mt-3" style="display: none;">
                    <hr>
                    <h6>Результат тестирования:</h6>
                    <div id="testResultContent"></div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn ghost" data-bs-dismiss="modal">Закрыть</button>
            </div>
        </div>
    </div>
</div>

<!-- Modal для истории изменений -->
<div class="modal fade" id="historyModal" tabindex="-1">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">История изменений правил маршрутизации</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div id="historyContainer">
                    <div class="text-center">
                        <div class="spinner-border text-primary" role="status">
                            <span class="visually-hidden">Загрузка...</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn ghost" data-bs-dismiss="modal">Закрыть</button>
            </div>
        </div>
    </div>
</div>
{% endblock %}

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