{# UNUSED TEMPLATE — kept for potential future use.
   The /monitoring page route was removed in R12-M2 (PR #256, commit 697b1ed)
   which moved test/freshness display into the catalog page. The M2 cloud fix
   (commit 4b95971) then removed the page route from ui.py. The /api/monitoring
   API endpoints in routes/monitoring.py still function (row count metrics,
   dbt test results, history) but this template is no longer served.
   Nav link was also removed from base.html in R12-M2. #}
{% extends "base.html" %}
{% block title %}Monitoring - Dango{% endblock %}
{% block content %}
<main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6 sm:py-8">
    <div x-data="monitoringPage()" x-init="init()" x-cloak>
        <div x-show="error" x-cloak class="mb-4 p-3 bg-red-50 border border-red-200 rounded-md">
            <p class="text-sm text-red-700" x-text="error"></p>
        </div>
        <!-- Success banner (BUG-202) -->
        <div x-show="success" x-cloak class="mb-4 p-3 bg-green-50 border border-green-200 rounded-md">
            <p class="text-sm text-green-700" x-text="success"></p>
        </div>
        <!-- Header -->
        <div class="flex items-center justify-between mb-6">
            <div>
                <h2 class="text-xl font-bold text-gray-900">Monitoring</h2>
                <p class="text-sm text-gray-500 mt-1">
                    <span x-text="metrics.length"></span> monitors<template x-if="flaggedCount > 0">, <span class="text-red-600 font-medium" x-text="flaggedCount + ' flagged'"></span></template>
                </p>
            </div>
            <div class="flex items-center space-x-3">
                <select x-model="sortBy" @change="sortMetrics()" class="text-xs border border-gray-300 rounded-md px-2 py-1.5 text-gray-600 bg-white">
                    <option value="status">Sort: Status</option>
                    <option value="change">Sort: Change %</option>
                    <option value="name">Sort: Name</option>
                    <option value="source">Sort: Source</option>
                </select>
                <button @click="runAnalysis()" :disabled="running"
                        class="px-4 py-2 bg-dango-600 text-white rounded-md hover:bg-dango-700 text-sm font-medium transition-colors disabled:opacity-50">
                    <span x-show="!running">Run Analysis</span>
                    <span x-show="running" class="inline-flex items-center space-x-1">
                        <svg class="animate-spin h-4 w-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path>
                        </svg>
                        <span>Running...</span>
                    </span>
                </button>
            </div>
        </div>
        <div x-show="loading" x-cloak class="flex items-center justify-center py-12">
            <div class="text-gray-400 text-sm">Loading monitors...</div>
        </div>
        <!-- No data -->
        <template x-if="!loading && metrics.length === 0">
            <div class="bg-white shadow rounded-lg p-8 text-center text-gray-500">
                No monitors configured or no data available. Configure monitors in <code>.dango/monitors.yml</code>.
            </div>
        </template>
        <!-- Metric cards -->
        <div x-show="!loading && metrics.length > 0" class="space-y-3">
            <template x-for="m in metrics" :key="m.name">
                <div class="bg-white shadow rounded-lg px-5 py-4">
                    <div class="flex items-center justify-between">
                        <div class="flex items-center space-x-3 min-w-0">
                            <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-semibold"
                                  :class="statusClass(m.status)" x-text="m.status"></span>
                            <div class="flex flex-col min-w-0">
                                <span class="text-sm font-medium text-gray-900 truncate" x-text="friendlyName(m)"></span>
                                <span class="text-xs text-gray-500" x-text="m.source ? (m.source + (m.table_name ? '.' + m.table_name : '')) : ''"></span>
                            </div>
                        </div>
                        <div class="flex items-center space-x-4 text-sm text-right flex-shrink-0">
                            <span class="text-gray-900 font-mono" x-text="formatValue(m)"></span>
                            <span :class="m.change_pct != null && m.change_pct > 0 ? 'text-red-600' : m.change_pct != null && m.change_pct < 0 ? 'text-green-600' : 'text-gray-400'"
                                  x-text="formatChange(m.change_pct)"></span>
                            <span class="text-gray-400 hidden sm:inline" x-text="m.trend_direction || '-'"></span>
                            <button @click="toggleHistory(m.name)" class="text-blue-600 hover:text-blue-800 text-xs hidden sm:inline"
                                    x-text="historyMetric === m.name ? 'Hide history' : 'History'"></button>
                            <template x-if="m.drill_down && m.drill_down.length > 0">
                                <button @click="m._expanded = !m._expanded" class="text-blue-600 hover:text-blue-800 text-xs">
                                    <span x-text="m._expanded ? 'Hide' : 'Drill-down'"></span>
                                </button>
                            </template>
                        </div>
                    </div>
                    <div class="flex items-center space-x-3 mt-1 text-xs text-gray-400">
                        <template x-if="m.comparison_type && m.comparison_type !== 'none'"><span x-text="m.comparison_type.replace(/_/g, ' ')"></span></template>
                        <template x-if="m.error"><span class="text-red-500" x-text="m.error"></span></template>
                    </div>
                    <!-- Drill-down -->
                    <div x-show="m._expanded" x-cloak class="mt-3 pl-4 border-l-2 border-gray-200 space-y-2">
                        <template x-for="dim in m.drill_down" :key="dim.dimension">
                            <div>
                                <div class="text-xs font-semibold text-gray-600 mb-1" x-text="dim.dimension"></div>
                                <template x-for="c in dim.contributors.slice(0, 5)" :key="c.group_value">
                                    <div class="flex items-center justify-between text-xs text-gray-500">
                                        <span x-text="c.group_value || '(null)'"></span>
                                        <span :class="c.change_pct != null && c.change_pct > 0 ? 'text-red-600' : 'text-green-600'"
                                              x-text="formatChange(c.change_pct)"></span>
                                    </div>
                                </template>
                            </div>
                        </template>
                    </div>
                    <!-- Inline history (BUG-215) -->
                    <div x-show="historyMetric === m.name" x-cloak class="mt-3 pt-3 border-t border-gray-100">
                        <div class="flex items-center justify-between mb-2">
                            <span class="text-xs font-semibold text-gray-700">History (30 days)</span>
                            <div class="flex items-center space-x-3 text-xs text-gray-500">
                                <template x-if="m.comparison_type && m.comparison_type !== 'none'">
                                    <span>Comparison: <span class="font-medium text-gray-700" x-text="m.comparison_type.replace(/_/g, ' ')"></span></span>
                                </template>
                                <template x-if="m.baseline_value != null">
                                    <span>Baseline: <span class="font-medium text-gray-700 font-mono" x-text="formatBaseline(m)"></span></span>
                                </template>
                            </div>
                        </div>
                        <div x-show="historyLoading" class="text-xs text-gray-400 py-3 text-center">Loading...</div>
                        <div x-show="historyError" x-cloak class="p-2 bg-red-50 border border-red-200 rounded-md">
                            <p class="text-xs text-red-700" x-text="historyError"></p>
                        </div>
                        <template x-if="!historyLoading && !historyError && historyData.length > 0">
                            <div class="space-y-0.5 max-h-64 overflow-y-auto">
                                <template x-for="(pt, idx) in historyData" :key="pt.recorded_at">
                                    <div class="flex items-center justify-between text-xs px-2 py-0.5 hover:bg-gray-50 rounded">
                                        <div class="flex items-center space-x-2 flex-shrink-0">
                                            <span class="text-gray-500 tabular-nums" x-text="formatFullTimestamp(pt.recorded_at)"></span>
                                            <template x-if="idx < historyData.length - 1">
                                                <span class="w-3 text-center"
                                                      :class="pt.value > historyData[idx+1].value ? 'text-green-500' : pt.value < historyData[idx+1].value ? 'text-red-500' : 'text-gray-300'"
                                                      x-text="pt.value > historyData[idx+1].value ? '▲' : pt.value < historyData[idx+1].value ? '▼' : '–'"></span>
                                            </template>
                                        </div>
                                        <span class="text-gray-900 font-mono text-right flex-shrink-0 ml-4" x-text="formatHistoryValue(pt)"></span>
                                    </div>
                                </template>
                            </div>
                        </template>
                        <template x-if="!historyLoading && !historyError && historyData.length === 0">
                            <div class="text-xs text-gray-400 py-3 text-center">No history available.</div>
                        </template>
                    </div>
                </div>
            </template>
        </div>
        <!-- Data Quality Checks (BUG-201 + BUG-216) -->
        <div x-show="!loading && dbtTests.length > 0" class="mt-6">
            <div class="bg-white shadow rounded-lg p-5">
                <div class="flex items-center justify-between mb-3">
                    <h3 class="text-sm font-semibold text-gray-900">Data Quality Checks</h3>
                    <span class="text-xs text-gray-500">
                        <span x-text="dbtTestsPassing"></span> passing<template x-if="dbtTestsFailing > 0">, <span class="text-red-600 font-medium" x-text="dbtTestsFailing + ' failing'"></span></template><template x-if="dbtTestsNotRun > 0">, <span class="text-gray-400" x-text="dbtTestsNotRun + ' not run'"></span></template>
                    </span>
                </div>
                <template x-if="dbtTestsNotRun === dbtTests.length && dbtTests.length > 0">
                    <p class="text-xs text-gray-400 mb-3">Tests have not been executed yet. Run <code class="bg-gray-100 px-1 rounded">dango transform run --test</code> or wait for the next scheduled sync to populate results.</p>
                </template>
                <!-- Grouped by model (BUG-216) -->
                <div class="space-y-2">
                    <template x-for="group in groupedTests" :key="group.model">
                        <div class="border border-gray-100 rounded-md">
                            <button @click="toggleGroup(group.model)"
                                    class="w-full flex items-center justify-between px-3 py-2 text-left hover:bg-gray-50 transition-colors">
                                <div class="flex items-center space-x-2">
                                    <svg class="h-3 w-3 text-gray-400 transition-transform" :class="expandedGroups[group.model] ? 'rotate-90' : ''"
                                         xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                                        <path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7" />
                                    </svg>
                                    <span class="text-xs font-medium text-gray-700" x-text="group.model"></span>
                                </div>
                                <div class="flex items-center space-x-2 text-xs">
                                    <template x-if="group.pass > 0">
                                        <span class="text-green-600" x-text="group.pass + ' pass'"></span>
                                    </template>
                                    <template x-if="group.fail > 0">
                                        <span class="text-red-600 font-medium" x-text="group.fail + ' fail'"></span>
                                    </template>
                                    <template x-if="group.notRun > 0">
                                        <span class="text-gray-400" x-text="group.notRun + ' not run'"></span>
                                    </template>
                                </div>
                            </button>
                            <div x-show="expandedGroups[group.model]" x-cloak class="border-t border-gray-100">
                                <template x-for="t in group.tests" :key="t.test_name">
                                    <div class="flex items-center justify-between px-3 py-1.5 text-xs">
                                        <span class="text-gray-700 font-mono truncate tooltip" :data-tooltip="t.test_name" x-text="t.test_name"></span>
                                        <span class="inline-flex items-center px-1.5 py-0.5 rounded text-xs font-semibold flex-shrink-0 ml-2"
                                              :class="t.status === 'pass' ? 'bg-green-100 text-green-800' : t.status === 'fail' || t.status === 'error' ? 'bg-red-100 text-red-800' : 'bg-gray-100 text-gray-600'"
                                              x-text="t.status || 'not run'"></span>
                                    </div>
                                </template>
                            </div>
                        </div>
                    </template>
                </div>
            </div>
        </div>
    </div>
</main>
{% endblock %}
{% block scripts %}
<script>
function monitoringPage() {
    return {
        metrics: [], flaggedCount: 0, loading: true, running: false, error: null,
        success: '', sortBy: 'status',
        historyMetric: null, historyData: [], historyLoading: false, historyError: '',
        dbtTests: [], dbtTestsPassing: 0, dbtTestsFailing: 0, dbtTestsNotRun: 0,
        groupedTests: [],
        expandedGroups: {},
        async init() {
            try {
                const res = await fetch('/api/monitoring', {headers: {'X-Requested-With': 'XMLHttpRequest'}});
                if (res.ok) {
                    const data = await res.json();
                    this.metrics = data.metrics.map(m => ({...m, _expanded: false}));
                    this.flaggedCount = data.flagged;
                    this.dbtTests = data.dbt_tests || [];
                    this._updateTestCounts();
                    this._autoExpandFailingGroups();
                    this.sortMetrics();
                } else { this.error = 'Failed to load monitors.'; }
            } catch (e) { this.error = 'Failed to load monitors.'; }
            finally { this.loading = false; }
        },
        async runAnalysis() {
            this.running = true; this.error = null; this.success = '';
            const startTime = Date.now();
            try {
                const res = await fetch('/api/monitoring/run', {method: 'POST', headers: {'X-Requested-With': 'XMLHttpRequest'}});
                // Ensure spinner visible for at least 1s
                const elapsed = Date.now() - startTime;
                if (elapsed < 1000) await new Promise(r => setTimeout(r, 1000 - elapsed));
                if (res.ok) {
                    const data = await res.json();
                    this.metrics = data.metrics.map(m => ({...m, _expanded: false}));
                    this.flaggedCount = data.flagged;
                    this.dbtTests = data.dbt_tests || [];
                    this._updateTestCounts();
                    this._autoExpandFailingGroups();
                    this.sortMetrics();
                    this.success = 'Analysis complete \u2014 ' + data.metrics.length + ' metrics updated';
                    setTimeout(() => { this.success = ''; }, 5000);
                } else { this.error = 'Analysis failed.'; }
            } catch (e) { this.error = 'Analysis failed.'; }
            finally { this.running = false; }
        },
        sortMetrics() {
            const m = [...this.metrics];
            const statusOrder = {flagged: 0, trending: 1, normal: 2, error: 3};
            if (this.sortBy === 'status') {
                m.sort((a, b) => {
                    const s = (statusOrder[a.status] ?? 9) - (statusOrder[b.status] ?? 9);
                    if (s !== 0) return s;
                    return Math.abs(b.change_pct ?? 0) - Math.abs(a.change_pct ?? 0);
                });
            } else if (this.sortBy === 'change') {
                m.sort((a, b) => Math.abs(b.change_pct ?? 0) - Math.abs(a.change_pct ?? 0));
            } else if (this.sortBy === 'name') {
                m.sort((a, b) => a.name.localeCompare(b.name));
            } else if (this.sortBy === 'source') {
                m.sort((a, b) => (a.source || '').localeCompare(b.source || '') || a.name.localeCompare(b.name));
            }
            this.metrics = m;
        },
        _updateTestCounts() {
            this.dbtTestsPassing = this.dbtTests.filter(t => t.status === 'pass').length;
            this.dbtTestsFailing = this.dbtTests.filter(t => t.status === 'fail' || t.status === 'error').length;
            this.dbtTestsNotRun = this.dbtTests.filter(t => !t.status).length;
            this._rebuildGroupedTests();
        },
        _rebuildGroupedTests() {
            const groups = {};
            for (const t of this.dbtTests) {
                const model = t.model_name || '(no model)';
                if (!groups[model]) groups[model] = {model, tests: [], pass: 0, fail: 0, notRun: 0};
                groups[model].tests.push(t);
                if (t.status === 'pass') groups[model].pass++;
                else if (t.status === 'fail' || t.status === 'error') groups[model].fail++;
                else groups[model].notRun++;
            }
            this.groupedTests = Object.values(groups).sort((a, b) => {
                if (a.fail !== b.fail) return b.fail - a.fail;
                return a.model.localeCompare(b.model);
            });
        },
        _autoExpandFailingGroups() {
            const updated = {...this.expandedGroups};
            for (const g of this.groupedTests) {
                if (g.fail > 0) updated[g.model] = true;
            }
            this.expandedGroups = updated;
        },
        async toggleHistory(metricName) {
            if (this.historyMetric === metricName) { this.historyMetric = null; this.historyData = []; this.historyError = ''; return; }
            this.historyMetric = metricName; this.historyLoading = true; this.historyData = []; this.historyError = '';
            try {
                const res = await fetch('/api/monitoring/history?metric=' + encodeURIComponent(metricName) + '&days=30', {headers: {'X-Requested-With': 'XMLHttpRequest'}});
                if (this.historyMetric !== metricName) return;
                if (res.ok) {
                    const data = await res.json();
                    this.historyData = data.data_points;
                } else {
                    this.historyError = 'Failed to load history (HTTP ' + res.status + ').';
                }
            } catch (e) {
                if (this.historyMetric !== metricName) return;
                this.historyError = 'Failed to load history.';
            }
            finally { this.historyLoading = false; }
        },
        toggleGroup(model) {
            this.expandedGroups = {...this.expandedGroups, [model]: !this.expandedGroups[model]};
        },
        statusClass(status) {
            return {flagged: 'bg-red-100 text-red-800', trending: 'bg-yellow-100 text-yellow-800', normal: 'bg-green-100 text-green-800', error: 'bg-gray-100 text-gray-600'}[status] || 'bg-gray-100 text-gray-600';
        },
        friendlyName(m) {
            // Turn chess_players_games_row_count → Row Count (players_games)
            let name = m.name;
            const table = m.table_name;
            const source = m.source;
            // Strip source prefix
            if (source && name.startsWith(source + '_')) name = name.slice(source.length + 1);
            // Strip table prefix
            if (table && name.startsWith(table + '_')) name = name.slice(table.length + 1);
            // Humanize remainder
            const label = name.replace(/_/g, ' ').replace(/\b\w/g, c => c.toUpperCase());
            return table ? label + ' (' + table + ')' : label;
        },
        formatChange(pct) {
            if (pct == null) return '-';
            const sign = pct > 0 ? '+' : '';
            return sign + pct.toFixed(1) + '%';
        },
        formatValue(m) {
            if (m.value == null) return '-';
            return m.value.toLocaleString(undefined, {maximumFractionDigits: 2});
        },
        formatFullTimestamp(iso) {
            if (!iso) return '-';
            try {
                const d = new Date(iso);
                const now = new Date();
                const diff = (now - d) / 1000;
                let relative;
                if (diff < 60) relative = 'just now';
                else if (diff < 3600) relative = Math.floor(diff / 60) + 'm ago';
                else if (diff < 86400) relative = Math.floor(diff / 3600) + 'h ago';
                else relative = Math.floor(diff / 86400) + 'd ago';
                return d.toLocaleString(undefined, {month: 'short', day: 'numeric', hour: 'numeric', minute: '2-digit'}) + ' (' + relative + ')';
            } catch (e) { return iso; }
        },
        formatBaseline(m) {
            if (m.baseline_value == null) return '-';
            return m.baseline_value.toLocaleString(undefined, {maximumFractionDigits: 2});
        },
        formatHistoryValue(pt) {
            if (pt.value == null) return '-';
            return pt.value.toLocaleString(undefined, {maximumFractionDigits: 2});
        },
    };
}
</script>
{% endblock %}