{% extends "base.html" %}

{% block content %}
<div class="telemetry-page" id="telemetryPage">
    <div class="studio-panel telemetry-header-panel">
        <div class="studio-panel-header">
            <div class="telemetry-heading">
                <span class="telemetry-heading-icon" aria-hidden="true">∿</span>
                <div>
                    <h5>Telemetry Command Center</h5>
                    <div class="telemetry-heading-meta" id="telemetryMeta">Loading…</div>
                </div>
            </div>
            <div class="studio-panel-actions telemetry-controls">
                <div class="telemetry-window-group" role="group" aria-label="Time window">
                    <button type="button" class="telemetry-window-btn" data-window="15m">15m</button>
                    <button type="button" class="telemetry-window-btn is-active" data-window="1h">1h</button>
                    <button type="button" class="telemetry-window-btn" data-window="6h">6h</button>
                    <button type="button" class="telemetry-window-btn" data-window="24h">24h</button>
                </div>
                <button type="button" class="btn btn-sm telemetry-toggle-btn" id="telemetryAutoRefresh" aria-pressed="true" title="Pause auto-refresh">Auto ⏸</button>
                <button type="button" class="btn btn-sm telemetry-refresh-btn" id="telemetryProbe" title="Run dependency health probes">Probe systems</button>
                <button type="button" class="btn btn-sm telemetry-refresh-btn" id="telemetryRefresh">Refresh</button>
            </div>
        </div>
        <div class="studio-panel-body">
            <div class="telemetry-tiles">
                <div class="telemetry-tile">
                    <div class="telemetry-tile-label">System State</div>
                    <div class="telemetry-tile-value"><span class="qd-status-pill is-unknown" id="tileStatus">unknown</span></div>
                    <div class="telemetry-tile-detail" id="tileStatusDetail">No spans recorded yet</div>
                </div>
                <div class="telemetry-tile">
                    <div class="telemetry-tile-label">Delay Origin</div>
                    <div class="telemetry-tile-value" id="tileDelayOrigin">—</div>
                    <div class="telemetry-tile-detail" id="tileDelayDetail">—</div>
                </div>
                <div class="telemetry-tile">
                    <div class="telemetry-tile-label">External Share</div>
                    <div class="telemetry-tile-value" id="tileExternal">—</div>
                    <div class="telemetry-tile-detail" id="tileExternalDetail">—</div>
                </div>
                <div class="telemetry-tile">
                    <div class="telemetry-tile-label">Cost (window)</div>
                    <div class="telemetry-tile-value" id="tileCost">—</div>
                    <div class="telemetry-tile-detail" id="tileCostDetail">—</div>
                </div>
            </div>
        </div>
    </div>

    <div class="telemetry-lanes" id="telemetryLanes">
        <!-- Lane cards injected by telemetry.js -->
    </div>

    <div class="telemetry-split">
        <div class="studio-panel telemetry-radar-panel">
            <div class="studio-panel-header">
                <div>
                    <h5>Delay-Origin Radar</h5>
                    <div class="telemetry-panel-sub">Edge weight shows elapsed contribution; node color shows status.</div>
                </div>
                <div class="telemetry-legend">
                    <span class="telemetry-legend-chip"><span class="dot dot-healthy"></span>Healthy</span>
                    <span class="telemetry-legend-chip"><span class="dot dot-degraded"></span>Degraded</span>
                    <span class="telemetry-legend-chip"><span class="dot dot-unhealthy"></span>Unhealthy</span>
                </div>
            </div>
            <div class="studio-panel-body">
                <div class="telemetry-radar-wrap">
                    <svg id="telemetryRadar" viewBox="0 0 760 360" role="img" aria-label="Telemetry dependency topology"></svg>
                </div>
            </div>
        </div>
        <div class="studio-panel telemetry-boundary-panel">
            <div class="studio-panel-header">
                <div>
                    <h5>Boundary Attribution</h5>
                    <div class="telemetry-panel-sub">Where request time is spent.</div>
                </div>
            </div>
            <div class="studio-panel-body">
                <div class="telemetry-boundary-chart">
                    <canvas id="telemetryBoundaryChart" height="150" aria-label="Internal versus external elapsed time" role="img"></canvas>
                </div>
                <div class="telemetry-boundary-caption" id="telemetryBoundaryCaption">—</div>
            </div>
        </div>
    </div>

    <div class="studio-panel">
        <div class="studio-panel-header">
            <div>
                <h5>Slow Transactions</h5>
                <div class="telemetry-panel-sub">Slowest traces in the selected window.</div>
            </div>
        </div>
        <div class="studio-panel-body telemetry-table-wrap">
            <table class="table">
                <thead>
                    <tr>
                        <th>Operation</th>
                        <th class="text-right">Total</th>
                        <th class="text-right">External</th>
                        <th>Origin</th>
                        <th>Outcome</th>
                        <th>Started</th>
                    </tr>
                </thead>
                <tbody id="telemetrySlowRows">
                    <tr><td colspan="6" class="telemetry-empty">No traces in this window yet.</td></tr>
                </tbody>
            </table>
        </div>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.9/dist/chart.umd.min.js"></script>
<script src="{{ url_for('static', filename='js/telemetry.js') }}"></script>
{% endblock %}