{% extends "base.html" %}

{% block title %}Telemetry - Codomyrmex{% endblock %}

{% block content %}
<h1>Telemetry</h1>

<div id="telemetry-overview" class="health-grid" style="margin-bottom: 1.5rem;">
    <div class="card health-card">
        <h2 class="card-title">Overview</h2>
        <div class="metric-grid">
            <div class="metric">
                <span class="metric-value" id="total-metrics">—</span>
                <span class="metric-label">Data Points</span>
            </div>
            <div class="metric">
                <span class="metric-value" id="metric-series-count">—</span>
                <span class="metric-label">Metric Series</span>
            </div>
            <div class="metric">
                <span class="metric-value" id="dashboard-count">—</span>
                <span class="metric-label">Dashboards</span>
            </div>
            <div class="metric">
                <span class="metric-value status-ok" id="telemetry-status">—</span>
                <span class="metric-label">Status</span>
            </div>
        </div>
        <div style="margin-top: 1rem; display: flex; gap: 0.5rem;">
            <button id="seed-btn" class="btn" onclick="seedMetrics()"
                style="font-size: 0.8rem; padding: 0.4rem 0.8rem;">
                🌱 Seed Sample Metrics
            </button>
            <button class="btn" onclick="loadTelemetry()"
                style="font-size: 0.8rem; padding: 0.4rem 0.8rem; background: var(--surface-color);">
                🔄 Refresh
            </button>
        </div>
    </div>

    <div class="card health-card">
        <h2 class="card-title">Metric Series</h2>
        <div id="metric-names-list">
            <p style="color: var(--text-secondary);">Loading…</p>
        </div>
    </div>
</div>

<!-- Live Metric Values -->
<div id="metric-values-card" class="card" style="margin-bottom: 1.5rem; display: none;">
    <h2 class="card-title">Latest Metric Values</h2>
    <div id="metric-values-grid" class="metric-grid"
        style="grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));"></div>
</div>

<!-- Dashboards Registry -->
<div class="card" style="margin-bottom: 1.5rem;">
    <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem;">
        <h2 class="card-title" style="margin-bottom: 0;">Registered Dashboards</h2>
        <span style="font-size: 0.8rem; color: var(--text-secondary);" id="last-refresh-time">—</span>
    </div>
    <div id="dashboards-list">
        <p style="color: var(--text-secondary);">Loading…</p>
    </div>
</div>

<!-- Error display -->
<div id="telemetry-error" class="card"
    style="margin-bottom: 1.5rem; display: none; border: 1px solid var(--error-color);">
    <h2 class="card-title" style="color: var(--error-color);">Telemetry Unavailable</h2>
    <p id="telemetry-error-msg" style="color: var(--text-secondary);"></p>
</div>

<script>
    async function loadTelemetry() {
        try {
            const resp = await fetch('/api/telemetry');
            const data = await resp.json();

            // Hide error
            document.getElementById('telemetry-error').style.display = 'none';

            if (data.status === 'error') {
                showError(data.error);
                return;
            }

            // Overview metrics
            document.getElementById('total-metrics').textContent = data.total_metrics ?? 0;
            document.getElementById('metric-series-count').textContent = (data.metric_names ?? []).length;
            document.getElementById('dashboard-count').textContent = (data.dashboards ?? []).length;
            document.getElementById('telemetry-status').textContent = 'OK';

            // Last refresh time
            document.getElementById('last-refresh-time').textContent =
                'Refreshed ' + new Date().toLocaleTimeString();

            // Metric names
            const namesList = document.getElementById('metric-names-list');
            const names = data.metric_names ?? [];
            if (names.length === 0) {
                namesList.innerHTML =
                    '<p style="color: var(--text-secondary); font-size: 0.85rem;">No metric series recorded yet. ' +
                    'Click <strong>Seed Sample Metrics</strong> to generate baseline system data.</p>';
            } else {
                namesList.innerHTML =
                    '<div style="display: flex; flex-wrap: wrap; gap: 0.5rem;">' +
                    names.map(function (n) {
                        return '<span class="metric-chip">' + escapeHtml(n) + '</span>';
                    }).join('') +
                    '</div>';
            }

            // Latest metric values
            var valuesCard = document.getElementById('metric-values-card');
            var valuesGrid = document.getElementById('metric-values-grid');
            var latestValues = data.latest_values || {};
            var valueKeys = Object.keys(latestValues);
            if (valueKeys.length > 0) {
                valuesCard.style.display = 'block';
                valuesGrid.innerHTML = valueKeys.map(function (k) {
                    var val = latestValues[k];
                    var displayVal = (typeof val === 'number') ? val.toLocaleString() : val;
                    var label = k.replace(/_/g, ' ').replace(/\b\w/g, function (l) { return l.toUpperCase(); });
                    return '<div class="metric">' +
                        '<span class="metric-value" style="color: var(--accent-color);">' + escapeHtml(displayVal) + '</span>' +
                        '<span class="metric-label">' + escapeHtml(label) + '</span>' +
                        '</div>';
                }).join('');
            } else {
                valuesCard.style.display = 'none';
            }

            // Dashboards
            const dashList = document.getElementById('dashboards-list');
            const dashes = data.dashboards ?? [];
            if (dashes.length === 0) {
                dashList.innerHTML =
                    '<p style="color: var(--text-secondary); font-size: 0.85rem;">No dashboards registered. ' +
                    'Click <strong>Seed Sample Metrics</strong> to create a System Overview dashboard.</p>';
            } else {
                dashList.innerHTML =
                    '<div class="dashboard-grid" style="grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1rem;">' +
                    dashes.map(function (d) {
                        var tagsHtml = (d.tags || []).map(function (t) {
                            return '<span class="tag-chip">' + escapeHtml(t) + '</span>';
                        }).join(' ');
                        return '<div class="dash-card">' +
                            '<div class="dash-card-name">' + escapeHtml(d.name || d.id) + '</div>' +
                            (d.description ? '<div class="dash-card-desc">' + escapeHtml(d.description) + '</div>' : '') +
                            '<div class="dash-card-meta">' +
                            '<span>' + escapeHtml(d.panels ? d.panels.length : 0) + ' panels</span>' +
                            (d.created_at ? '<span>' + escapeHtml(new Date(d.created_at).toLocaleDateString()) + '</span>' : '') +
                            '</div>' +
                            (tagsHtml ? '<div style="margin-top: 0.5rem;">' + tagsHtml + '</div>' : '') +
                            '</div>';
                    }).join('') +
                    '</div>';
            }

        } catch (err) {
            showError(err.message);
        }
    }

    async function seedMetrics() {
        var btn = document.getElementById('seed-btn');
        btn.disabled = true;
        btn.textContent = '⏳ Seeding...';
        try {
            var resp = await fetch('/api/telemetry/seed', { method: 'POST' });
            var data = await resp.json();
            if (data.status === 'ok') {
                btn.textContent = '✅ Seeded!';
                setTimeout(function () {
                    btn.textContent = '🌱 Seed Sample Metrics';
                    btn.disabled = false;
                }, 2000);
                loadTelemetry();
            } else {
                btn.textContent = '❌ Error';
                btn.disabled = false;
            }
        } catch (e) {
            btn.textContent = '❌ Error';
            btn.disabled = false;
        }
    }

    function showError(msg) {
        var errDiv = document.getElementById('telemetry-error');
        errDiv.style.display = 'block';
        document.getElementById('telemetry-error-msg').textContent = msg;
        document.getElementById('telemetry-status').textContent = 'Error';
        document.getElementById('telemetry-status').className = 'metric-value status-err';
    }

    // Initial load
    loadTelemetry();

    // Auto-refresh every 30s
    setInterval(loadTelemetry, 30000);
</script>
{% endblock %}