{% extends "base.html" %}

{% block title %}{{ page_title or "Run" }} - MLOps Monitor{% endblock %}

{% block content %}
<div class="space-y-6" x-data="runView({{ run.id }})" x-init="init()" x-cloak>
    <div class="border-b border-border py-6">
        <div class="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
            <div>
                <div class="flex items-center gap-3">
                    <a href="/project/{{ project.id }}" class="inline-flex items-center text-muted-foreground hover:text-foreground transition" aria-label="Back to project">
                        <svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <path d="M19 12H5"></path>
                            <path d="M12 19l-7-7 7-7"></path>
                        </svg>
                    </a>
                    <div>
                        <h1 class="text-3xl font-semibold">{{ run.name }}</h1>
                        <p class="text-sm text-muted-foreground">{{ project.name }}</p>
                    </div>
                </div>
                <div class="inline-flex flex-wrap rounded-full border border-border bg-muted p-1 mt-4 text-xs font-semibold text-muted-foreground">
                    <button type="button" @click="setTab('summary')"
                            :class="activeTab === 'summary' ? 'bg-background text-foreground shadow' : ''"
                            class="rounded-full px-4 py-1.5 transition">Summary</button>
                    <button type="button" @click="setTab('metrics')"
                            :class="activeTab === 'metrics' ? 'bg-background text-foreground shadow' : ''"
                            class="rounded-full px-4 py-1.5 transition">Graphs</button>
                    <button type="button" @click="setTab('logs')"
                            :class="activeTab === 'logs' ? 'bg-background text-foreground shadow' : ''"
                            class="rounded-full px-4 py-1.5 transition">Logs</button>
                    <button type="button" @click="setTab('drift')"
                            :class="activeTab === 'drift' ? 'bg-background text-foreground shadow' : ''"
                            class="rounded-full px-4 py-1.5 transition">Drift</button>
                    <button type="button" @click="setTab('alerts')"
                            :class="activeTab === 'alerts' ? 'bg-background text-foreground shadow' : ''"
                            class="rounded-full px-4 py-1.5 transition">Alerts</button>
                </div>
            </div>
            <div class="flex items-center gap-2">
                <span class="inline-flex items-center rounded-full px-3 py-1 text-xs font-semibold"
                      {% if run.status == 'running' %}
                      class="bg-amber-100 text-amber-700 dark:bg-amber-500/20 dark:text-amber-200"
                      {% else %}
                      class="bg-emerald-100 text-emerald-700 dark:bg-emerald-500/20 dark:text-emerald-200"
                      {% endif %}>
                    {{ run.status }}
                </span>
            </div>
        </div>
    </div>

    <div class="pb-6">
        <div x-show="activeTab === 'summary'" x-transition>
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-x-10 gap-y-6 text-sm">
                <div>
                    <div class="text-muted-foreground">Created</div>
                    <div class="text-foreground">{{ run.created_at[:19] }}</div>
                </div>
                <div>
                    <div class="text-muted-foreground">Completed</div>
                    <div class="text-foreground">{{ run.ended_at[:19] if run.ended_at else '-' }}</div>
                </div>
                <div>
                    <div class="text-muted-foreground">Host</div>
                    <div class="text-foreground">{{ run.host or '-' }}</div>
                </div>
                <div>
                    <div class="text-muted-foreground">Python</div>
                    <div class="text-foreground">{{ run.python_version or '-' }}</div>
                </div>
                <div>
                    <div class="text-muted-foreground">Executable</div>
                    <div class="text-foreground break-all">{{ run.python_executable or '-' }}</div>
                </div>
                <div>
                    <div class="text-muted-foreground">Command</div>
                    <div class="text-foreground break-all">{{ run.command or '-' }}</div>
                </div>
            </div>

            <div class="mt-6 border-t border-border/60 pt-6">
                <div class="flex items-center justify-between mb-4">
                    <h3 class="text-lg font-semibold">Summary</h3>
                    <span class="text-xs text-muted-foreground">Latest values per metric</span>
                </div>
                {% if summary %}
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-x-10 gap-y-6">
                    {% for item in summary %}
                    <div>
                        <div class="text-xs text-muted-foreground">{{ item.name }}</div>
                        <div class="text-lg font-semibold text-foreground">{{ "%.4f"|format(item.value) }}</div>
                        <div class="text-xs text-muted-foreground">Step {{ item.step or '-' }}</div>
                    </div>
                    {% endfor %}
                </div>
                {% else %}
                <p class="text-muted-foreground italic">No metrics logged yet.</p>
                {% endif %}
            </div>
        </div>

        <div x-show="activeTab === 'metrics'" x-transition>
            <div id="run-charts" class="grid grid-cols-1 lg:grid-cols-2 gap-6"></div>
        </div>

        <div x-show="activeTab === 'logs'" x-transition>
            {% if logs %}
            <div class="rounded-2xl border border-border bg-slate-950/90 text-emerald-200 font-mono text-xs p-4 max-h-96 overflow-y-auto scrollbar-soft">
                {% for entry in logs %}
                <div>
                    <span class="text-slate-500">[{{ entry.timestamp[:19] }}]</span>
                    <span>{{ entry.message }}</span>
                </div>
                {% endfor %}
            </div>
            {% else %}
            <p class="text-muted-foreground italic">No logs captured for this run.</p>
            {% endif %}
        </div>

        <div x-show="activeTab === 'drift'" x-transition>
            <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
                <div class="rounded-2xl border border-border bg-card p-4">
                    <div class="flex items-center justify-between mb-3">
                        <div>
                            <h3 class="text-base font-semibold">Data Drift</h3>
                            <p class="text-xs text-muted-foreground">Per-feature drift results</p>
                        </div>
                        <span class="text-xs text-muted-foreground" x-text="dataDriftStatus"></span>
                    </div>
                    <div class="overflow-x-auto rounded-lg border border-border">
                        <table class="min-w-full divide-y divide-border text-sm">
                            <thead class="bg-muted/60">
                                <tr>
                                    <th class="px-4 py-2 text-left text-[11px] font-semibold uppercase tracking-[0.2em] text-muted-foreground">Feature</th>
                                    <th class="px-4 py-2 text-left text-[11px] font-semibold uppercase tracking-[0.2em] text-muted-foreground">Score</th>
                                    <th class="px-4 py-2 text-left text-[11px] font-semibold uppercase tracking-[0.2em] text-muted-foreground">Level</th>
                                    <th class="px-4 py-2 text-left text-[11px] font-semibold uppercase tracking-[0.2em] text-muted-foreground">Status</th>
                                    <th class="px-4 py-2 text-left text-[11px] font-semibold uppercase tracking-[0.2em] text-muted-foreground">Time</th>
                                </tr>
                            </thead>
                            <tbody class="divide-y divide-border bg-background" id="data-drift-body">
                                <tr><td class="px-4 py-3 text-muted-foreground italic" colspan="5">Loading data drift...</td></tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="rounded-2xl border border-border bg-card p-4">
                    <div class="flex items-center justify-between mb-3">
                        <div>
                            <h3 class="text-base font-semibold">Concept Drift</h3>
                            <p class="text-xs text-muted-foreground">Metric drift signals</p>
                        </div>
                        <span class="text-xs text-muted-foreground" x-text="conceptDriftStatus"></span>
                    </div>
                    <div class="overflow-x-auto rounded-lg border border-border">
                        <table class="min-w-full divide-y divide-border text-sm">
                            <thead class="bg-muted/60">
                                <tr>
                                    <th class="px-4 py-2 text-left text-[11px] font-semibold uppercase tracking-[0.2em] text-muted-foreground">Metric</th>
                                    <th class="px-4 py-2 text-left text-[11px] font-semibold uppercase tracking-[0.2em] text-muted-foreground">Score</th>
                                    <th class="px-4 py-2 text-left text-[11px] font-semibold uppercase tracking-[0.2em] text-muted-foreground">Level</th>
                                    <th class="px-4 py-2 text-left text-[11px] font-semibold uppercase tracking-[0.2em] text-muted-foreground">Status</th>
                                    <th class="px-4 py-2 text-left text-[11px] font-semibold uppercase tracking-[0.2em] text-muted-foreground">Time</th>
                                </tr>
                            </thead>
                            <tbody class="divide-y divide-border bg-background" id="concept-drift-body">
                                <tr><td class="px-4 py-3 text-muted-foreground italic" colspan="5">Loading concept drift...</td></tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        <div x-show="activeTab === 'alerts'" x-transition>
            <div class="rounded-2xl border border-border bg-card p-4">
                <div class="flex items-center justify-between mb-3">
                    <div>
                        <h3 class="text-base font-semibold">Alerts</h3>
                        <p class="text-xs text-muted-foreground">Triggered notifications for this run</p>
                    </div>
                    <span class="text-xs text-muted-foreground" x-text="alertsStatus"></span>
                </div>
                <div class="overflow-x-auto rounded-lg border border-border">
                    <table class="min-w-full divide-y divide-border text-sm">
                        <thead class="bg-muted/60">
                            <tr>
                                <th class="px-4 py-2 text-left text-[11px] font-semibold uppercase tracking-[0.2em] text-muted-foreground">Type</th>
                                <th class="px-4 py-2 text-left text-[11px] font-semibold uppercase tracking-[0.2em] text-muted-foreground">Level</th>
                                <th class="px-4 py-2 text-left text-[11px] font-semibold uppercase tracking-[0.2em] text-muted-foreground">Subject</th>
                                <th class="px-4 py-2 text-left text-[11px] font-semibold uppercase tracking-[0.2em] text-muted-foreground">Message</th>
                                <th class="px-4 py-2 text-left text-[11px] font-semibold uppercase tracking-[0.2em] text-muted-foreground">Time</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-border bg-background" id="alerts-body">
                            <tr><td class="px-4 py-3 text-muted-foreground italic" colspan="5">Loading alerts...</td></tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
function runView(runId) {
    return {
        runId,
        activeTab: 'summary',
        metricsData: null,
        chartsReady: false,
        chartMap: {},
        driftData: { data: [], concept: [] },
        alertsData: [],
        dataDriftStatus: 'Loading...',
        conceptDriftStatus: 'Loading...',
        alertsStatus: 'Loading...',
        init() {
            this.fetchRunMetrics();
            this.fetchDriftResults();
            this.fetchAlerts();
        },
        setTab(tab) {
            this.activeTab = tab;
            if (tab === 'metrics') {
                this.ensureCharts();
            }
            if (tab === 'drift') {
                this.fetchDriftResults();
            }
            if (tab === 'alerts') {
                this.fetchAlerts();
            }
        },
        ensureCharts() {
            if (this.chartsReady || !this.metricsData) return;
            this.renderCharts(this.metricsData);
        },
        async fetchRunMetrics() {
            try {
                const response = await fetch(`/api/runs/${this.runId}/metrics`);
                if (!response.ok) throw new Error(`HTTP ${response.status}`);
                const data = await response.json();
                this.metricsData = data;
                this.chartsReady = false;
                if (this.activeTab === 'metrics') {
                    this.renderCharts(data);
                }
            } catch (error) {
                console.error('Failed to load run metrics:', error);
            }
        },
        async fetchDriftResults() {
            try {
                const response = await fetch(`/api/runs/${this.runId}/drift`);
                if (!response.ok) throw new Error(`HTTP ${response.status}`);
                const data = await response.json();
                const dataDrift = data.filter((item) => item.drift_type === 'data');
                const conceptDrift = data.filter((item) => item.drift_type === 'concept');
                this.driftData = { data: dataDrift, concept: conceptDrift };
                this.renderDriftTable('data-drift-body', dataDrift, 'feature_name');
                this.renderDriftTable('concept-drift-body', conceptDrift, 'feature_name');
                this.dataDriftStatus = dataDrift.length ? `${dataDrift.length} results` : 'No data drift results';
                this.conceptDriftStatus = conceptDrift.length ? `${conceptDrift.length} results` : 'No concept drift results';
            } catch (error) {
                console.error('Failed to load drift results:', error);
                this.renderDriftError();
            }
        },
        async fetchAlerts() {
            try {
                const response = await fetch(`/api/runs/${this.runId}/alerts`);
                if (!response.ok) throw new Error(`HTTP ${response.status}`);
                const data = await response.json();
                this.alertsData = data;
                this.renderAlertsTable(data);
                this.alertsStatus = data.length ? `${data.length} alerts` : 'No alerts triggered';
            } catch (error) {
                console.error('Failed to load alerts:', error);
                this.renderAlertsError();
            }
        },
        renderDriftTable(containerId, rows, nameKey) {
            const body = document.getElementById(containerId);
            if (!body) return;
            if (!Array.isArray(rows) || rows.length === 0) {
                body.innerHTML = '<tr><td class="px-4 py-3 text-muted-foreground italic" colspan="5">No drift results logged.</td></tr>';
                return;
            }
            body.innerHTML = rows.map((row) => {
                const level = row.level || 'NONE';
                const detected = row.detected ? 'Detected' : 'Normal';
                const levelClass = this.levelClass(level);
                const statusClass = row.detected ? 'bg-red-100 text-red-800 dark:bg-red-500/20 dark:text-red-200' : 'bg-emerald-100 text-emerald-700 dark:bg-emerald-500/20 dark:text-emerald-200';
                return `
                    <tr class="hover:bg-muted/50">
                        <td class="px-4 py-2 whitespace-nowrap text-foreground">${row[nameKey] || '-'}</td>
                        <td class="px-4 py-2 whitespace-nowrap text-foreground">${Number(row.drift_score || 0).toFixed(4)}</td>
                        <td class="px-4 py-2 whitespace-nowrap"><span class="inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-semibold ${levelClass}">${level}</span></td>
                        <td class="px-4 py-2 whitespace-nowrap"><span class="inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-semibold ${statusClass}">${detected}</span></td>
                        <td class="px-4 py-2 whitespace-nowrap text-muted-foreground">${(row.timestamp || '').slice(0, 19)}</td>
                    </tr>
                `;
            }).join('');
        },
        renderAlertsTable(rows) {
            const body = document.getElementById('alerts-body');
            if (!body) return;
            if (!Array.isArray(rows) || rows.length === 0) {
                body.innerHTML = '<tr><td class="px-4 py-3 text-muted-foreground italic" colspan="5">No alerts for this run.</td></tr>';
                return;
            }
            body.innerHTML = rows.map((row) => {
                const level = row.level || 'INFO';
                const levelClass = this.levelClass(level);
                return `
                    <tr class="hover:bg-muted/50">
                        <td class="px-4 py-2 whitespace-nowrap text-foreground">${row.alert_type || '-'}</td>
                        <td class="px-4 py-2 whitespace-nowrap"><span class="inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-semibold ${levelClass}">${level}</span></td>
                        <td class="px-4 py-2 text-foreground">${row.subject || '-'}</td>
                        <td class="px-4 py-2 text-muted-foreground">${row.message || '-'}</td>
                        <td class="px-4 py-2 whitespace-nowrap text-muted-foreground">${(row.created_at || '').slice(0, 19)}</td>
                    </tr>
                `;
            }).join('');
        },
        renderDriftError() {
            const dataBody = document.getElementById('data-drift-body');
            const conceptBody = document.getElementById('concept-drift-body');
            if (dataBody) {
                dataBody.innerHTML = '<tr><td class="px-4 py-3 text-muted-foreground italic" colspan="5">Failed to load data drift.</td></tr>';
            }
            if (conceptBody) {
                conceptBody.innerHTML = '<tr><td class="px-4 py-3 text-muted-foreground italic" colspan="5">Failed to load concept drift.</td></tr>';
            }
            this.dataDriftStatus = 'Failed to load';
            this.conceptDriftStatus = 'Failed to load';
        },
        renderAlertsError() {
            const body = document.getElementById('alerts-body');
            if (body) {
                body.innerHTML = '<tr><td class="px-4 py-3 text-muted-foreground italic" colspan="5">Failed to load alerts.</td></tr>';
            }
            this.alertsStatus = 'Failed to load';
        },
        levelClass(level) {
            if (level === 'SEVERE') return 'bg-red-100 text-red-800 dark:bg-red-500/20 dark:text-red-200';
            if (level === 'MODERATE') return 'bg-orange-100 text-orange-800 dark:bg-orange-500/20 dark:text-orange-200';
            if (level === 'SLIGHT') return 'bg-yellow-100 text-yellow-800 dark:bg-yellow-500/20 dark:text-yellow-200';
            if (level === 'DETECTED') return 'bg-red-100 text-red-800 dark:bg-red-500/20 dark:text-red-200';
            return 'bg-emerald-100 text-emerald-700 dark:bg-emerald-500/20 dark:text-emerald-200';
        },
        renderCharts(metrics) {
            const container = document.getElementById('run-charts');
            if (!container) return;
            container.innerHTML = '';
            if (!Array.isArray(metrics) || metrics.length === 0) {
                container.innerHTML = '<p class="text-muted-foreground italic">No metrics logged yet.</p>';
                this.chartsReady = true;
                return;
            }
            const getCssVar = (name) => getComputedStyle(document.documentElement).getPropertyValue(name).trim();
            const getGridColor = () => `hsl(${getCssVar('--border')} / 0.5)`;
            const getTickColor = () => `hsl(${getCssVar('--muted-foreground')})`;
            const grouped = {};
            metrics.forEach((m) => {
                if (!grouped[m.name]) grouped[m.name] = [];
                grouped[m.name].push({ x: m.step || 0, y: m.value });
            });
            Object.entries(grouped).forEach(([name, points]) => {
                const card = document.createElement('div');
                card.className = 'rounded-md border border-border/60 bg-transparent p-4';
                card.innerHTML = `<div class="flex items-center justify-between mb-2"><h3 class="text-sm font-semibold text-foreground">${name}</h3></div><div class="relative h-64"><canvas></canvas></div>`;
                container.appendChild(card);
                const ctx = card.querySelector('canvas').getContext('2d');
                const chart = new Chart(ctx, {
                    type: 'line',
                    data: {
                        datasets: [{
                            label: name,
                            data: points.sort((a, b) => a.x - b.x),
                            borderColor: '#38bdf8',
                            backgroundColor: '#38bdf824',
                            tension: 0.2,
                            pointRadius: 1.5,
                            borderWidth: 2
                        }]
                    },
                    options: {
                        responsive: true,
                        maintainAspectRatio: false,
                        scales: {
                            x: {
                                type: 'linear',
                                title: { display: true, text: 'Step' },
                                grid: { color: getGridColor() },
                                ticks: { color: getTickColor() }
                            },
                            y: {
                                title: { display: true, text: 'Value' },
                                grid: { color: getGridColor() },
                                ticks: { color: getTickColor() }
                            }
                        },
                        plugins: {
                            legend: { display: false },
                            tooltip: { mode: 'index', intersect: false }
                        }
                    }
                });
                this.chartMap[name] = chart;
            });
            window.removeEventListener('themechange', this.handleThemeChange);
            this.handleThemeChange = () => this.updateChartTheme();
            window.addEventListener('themechange', this.handleThemeChange);
            this.chartsReady = true;
        },
        updateChartTheme() {
            const getCssVar = (name) => getComputedStyle(document.documentElement).getPropertyValue(name).trim();
            const gridColor = `hsl(${getCssVar('--border')} / 0.5)`;
            const tickColor = `hsl(${getCssVar('--muted-foreground')})`;
            Object.values(this.chartMap).forEach((chart) => {
                if (!chart) return;
                chart.options.scales.x.grid.color = gridColor;
                chart.options.scales.y.grid.color = gridColor;
                chart.options.scales.x.ticks.color = tickColor;
                chart.options.scales.y.ticks.color = tickColor;
                chart.update();
            });
        }
    }
}
</script>
{% endblock %}