{% 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>

            <!-- Фильтры поиска -->
            <div class="card mb-4">
                <div class="card-header">
                    <h5 class="mb-0"><i class="bi bi-search"></i> Поиск трейсов</h5>
                </div>
                <div class="card-body">
                    <div class="row g-3">
                        <div class="col-md-3">
                            <label class="form-label">Trace ID</label>
                            <input type="text" class="form-control form-control-sm" id="searchTraceId" placeholder="Trace ID или часть...">
                        </div>
                        <div class="col-md-2">
                            <label class="form-label">Сервис</label>
                            <input type="text" class="form-control form-control-sm" id="searchService" placeholder="Имя сервиса">
                        </div>
                        <div class="col-md-2">
                            <label class="form-label">Статус</label>
                            <select class="form-select form-select-sm" id="searchStatus">
                                <option value="">Все</option>
                                <option value="ok">OK</option>
                                <option value="error">Error</option>
                                <option value="unset">Unset</option>
                            </select>
                        </div>
                        <div class="col-md-2">
                            <label class="form-label">Мин. длительность (мс)</label>
                            <input type="number" class="form-control form-control-sm" id="minDuration" placeholder="0">
                        </div>
                        <div class="col-md-2">
                            <label class="form-label">Макс. длительность (мс)</label>
                            <input type="number" class="form-control form-control-sm" id="maxDuration" placeholder="10000">
                        </div>
                        <div class="col-md-1 d-flex align-items-end">
                            <button class="btn primary btn-sm w-100" onclick="searchTraces()">
                                <i class="bi bi-search"></i> Поиск
                            </button>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Список трейсов -->
            <div class="card mb-4">
                <div class="card-header">
                    <h5 class="mb-0">Список трейсов</h5>
                </div>
                <div class="card-body">
                    <div id="tracesList" style="max-height: 300px; overflow-y: auto;">
                        <div class="text-center">
                            <div class="spinner-border text-primary" role="status">
                                <span class="visually-hidden">Загрузка...</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- Детали трейса -->
            <div class="card" id="traceDetailsCard" style="display: none;">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h5 class="mb-0">Детали трейса: <code id="currentTraceId"></code></h5>
                    <div>
                        <button class="btn primary btn-sm" onclick="exportTrace('json')">
                            <i class="bi bi-download"></i> Экспорт JSON
                        </button>
                        <button class="btn ghost btn-sm" onclick="exportTrace('txt')">
                            <i class="bi bi-download"></i> Экспорт TXT
                        </button>
                    </div>
                </div>
                <div class="card-body">
                    <!-- Вкладки -->
                    <ul class="nav nav-tabs mb-3" id="traceTabs" role="tablist">
                        <li class="nav-item" role="presentation">
                            <button class="nav-link active" data-bs-toggle="tab" data-bs-target="#traceSummary" type="button">
                                Сводка
                            </button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="nav-link" data-bs-toggle="tab" data-bs-target="#traceWaterfall" type="button">
                                Waterfall
                            </button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="nav-link" data-bs-toggle="tab" data-bs-target="#traceFlame" type="button">
                                Flame Graph
                            </button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="nav-link" data-bs-toggle="tab" data-bs-target="#traceSpans" type="button">
                                Spans
                            </button>
                        </li>
                    </ul>
                    
                    <!-- Содержимое вкладок -->
                    <div class="tab-content">
                        <!-- Сводка -->
                        <div class="tab-pane fade show active" id="traceSummary" role="tabpanel">
                            <div id="traceSummaryContent"></div>
                        </div>
                        
                        <!-- Waterfall -->
                        <div class="tab-pane fade" id="traceWaterfall" role="tabpanel">
                            <div id="traceWaterfallContent">
                                <div id="waterfallChart" style="min-height: 400px;"></div>
                            </div>
                        </div>
                        
                        <!-- Flame Graph -->
                        <div class="tab-pane fade" id="traceFlame" role="tabpanel">
                            <div id="traceFlameContent">
                                <div id="flameGraph" style="min-height: 400px;"></div>
                            </div>
                        </div>
                        
                        <!-- Spans -->
                        <div class="tab-pane fade" id="traceSpans" role="tabpanel">
                            <div id="traceSpansContent"></div>
                        </div>
                    </div>
                </div>
            </div>
{% endblock %}

{% block extra_css %}
<style>
    .waterfall-bar {
        height: 30px;
        margin: 2px 0;
        position: relative;
        border-radius: 3px;
        cursor: pointer;
        transition: opacity 0.2s;
    }
    .waterfall-bar:hover {
        opacity: 0.8;
    }
    .waterfall-bar.ok {
        background-color: #28a745;
    }
    .waterfall-bar.error {
        background-color: #dc3545;
    }
    .waterfall-bar.unset {
        background-color: #6c757d;
    }
    .flame-block {
        position: absolute;
        border: 1px solid #333;
        cursor: pointer;
        transition: opacity 0.2s;
    }
    .flame-block:hover {
        opacity: 0.8;
    }
</style>
{% endblock %}

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