{% extends "admin/base.html" %}

{% block title %}Operations Center — {{ site_header }}{% endblock %}

{% block extra_head %}
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js" defer></script>
<style>
  .ops-dash-runner { font-family: "Inter", ui-sans-serif, system-ui, sans-serif; }
</style>
{% endblock %}

{% block content %}
<div class="p-6" x-data="opsDashboard()" x-init="init()" @destroy="clearRefreshInterval()">
    <!-- Header -->
    <div class="flex items-center justify-between mb-6">
        <div>
            <h1 class="text-2xl font-bold text-gray-900 dark:text-white">Operations Center</h1>
            <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">Infrastructure, tasks, workers and logs overview</p>
        </div>
        <button @click="loadAll()" class="inline-flex items-center gap-2 px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-700 border border-gray-200 dark:border-gray-600 rounded-xl hover:bg-gray-50 dark:hover:bg-gray-600 transition-colors">
            <svg class="w-4 h-4" :class="{'animate-spin': loading}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21.5 2v6h-6M2.5 22v-6h6M2 11.5a10 10 0 0 1 18.8-4.3M22 12.5a10 10 0 0 1-18.8 4.2"/></svg>
            Refresh
        </button>
    </div>

    <!-- Top Row: Environment + System + Services -->
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-4 mb-6">
        <!-- Environment Card -->
        <a href="{{ admin_prefix }}/ops/infrastructure/" class="bg-gradient-to-br from-primary-500 to-primary-700 rounded-xl p-5 text-white shadow-lg hover:shadow-xl transition-shadow group">
            <div class="flex items-center justify-between mb-3">
                <span class="text-xs font-semibold text-primary-200 uppercase tracking-wider">Environment</span>
                <svg class="w-4 h-4 text-primary-200 group-hover:translate-x-0.5 transition-transform" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"/></svg>
            </div>
            <h2 class="text-2xl font-bold" x-text="infra.runtime ? infra.runtime.label : 'Loading...'"></h2>
            <p class="text-sm text-primary-200 mt-1" x-text="infra.system ? infra.system.hostname : ''"></p>
        </a>

        <!-- System Metrics -->
        <div class="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-5">
            <span class="text-xs font-semibold text-gray-400 uppercase tracking-wider">System</span>
            <div class="grid grid-cols-3 gap-4 mt-3">
                <div class="text-center">
                    <p class="text-2xl font-bold text-gray-900 dark:text-white" x-text="((infra.system || {}).cpu_percent || 0) + '%'"></p>
                    <p class="text-[10px] text-gray-400 uppercase">CPU</p>
                </div>
                <div class="text-center">
                    <p class="text-2xl font-bold text-gray-900 dark:text-white" x-text="((infra.system || {}).memory_percent || 0) + '%'"></p>
                    <p class="text-[10px] text-gray-400 uppercase">RAM</p>
                </div>
                <div class="text-center">
                    <p class="text-2xl font-bold text-gray-900 dark:text-white" x-text="((infra.system || {}).disk_percent || 0) + '%'"></p>
                    <p class="text-[10px] text-gray-400 uppercase">Disk</p>
                </div>
            </div>
        </div>

        <!-- Services -->
        <div class="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-5">
            <span class="text-xs font-semibold text-gray-400 uppercase tracking-wider">Services</span>
            <div class="mt-3 space-y-2">
                <template x-for="svc in (infra.services || [])" :key="svc.name">
                    <div class="flex items-center justify-between">
                        <span class="text-sm text-gray-700 dark:text-gray-300" x-text="svc.name"></span>
                        <span class="inline-flex items-center gap-1 text-[10px] font-semibold uppercase"
                              :class="svc.status === 'healthy' ? 'text-green-600' : svc.status === 'unhealthy' ? 'text-red-600' : 'text-gray-400'">
                            <span class="w-1.5 h-1.5 rounded-full" :class="svc.status === 'healthy' ? 'bg-green-500' : svc.status === 'unhealthy' ? 'bg-red-500' : 'bg-gray-400'"></span>
                            <span x-text="svc.status"></span>
                            <template x-if="svc.latency_ms > 0">
                                <span class="text-gray-400 font-normal" x-text="svc.latency_ms + 'ms'"></span>
                            </template>
                        </span>
                    </div>
                </template>
            </div>
        </div>
    </div>

    <!-- Middle Row: Tasks + Workers -->
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-4 mb-6">
        <!-- Tasks Summary -->
        <a href="{{ admin_prefix }}/ops/tasks/" class="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-5 hover:border-primary-400 transition-colors group">
            <div class="flex items-center justify-between mb-4">
                <span class="text-xs font-semibold text-gray-400 uppercase tracking-wider">Tasks</span>
                <svg class="w-4 h-4 text-gray-300 group-hover:text-primary-400 group-hover:translate-x-0.5 transition-all" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"/></svg>
            </div>
            <div class="grid grid-cols-3 gap-4">
                <div>
                    <p class="text-2xl font-bold text-green-600" x-text="taskStats.success || 0"></p>
                    <p class="text-[10px] text-gray-400 uppercase">Success</p>
                </div>
                <div>
                    <p class="text-2xl font-bold text-red-600" x-text="taskStats.failure || 0"></p>
                    <p class="text-[10px] text-gray-400 uppercase">Failed</p>
                </div>
                <div>
                    <p class="text-2xl font-bold text-blue-600" x-text="taskStats.running || 0"></p>
                    <p class="text-[10px] text-gray-400 uppercase">Running</p>
                </div>
            </div>
            <p class="text-xs text-gray-400 mt-3 pt-3 border-t border-gray-100 dark:border-gray-700">
                Total: <span class="font-semibold text-gray-600 dark:text-gray-300" x-text="taskStats.total || 0"></span> executions
            </p>
        </a>

        <!-- Workers Summary -->
        <a href="{{ admin_prefix }}/ops/workers/" class="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-5 hover:border-primary-400 transition-colors group">
            <div class="flex items-center justify-between mb-4">
                <span class="text-xs font-semibold text-gray-400 uppercase tracking-wider">Workers</span>
                <svg class="w-4 h-4 text-gray-300 group-hover:text-primary-400 group-hover:translate-x-0.5 transition-all" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"/></svg>
            </div>
            <div class="grid grid-cols-3 gap-4">
                <div>
                    <p class="text-2xl font-bold text-green-600" x-text="workerCounts.online"></p>
                    <p class="text-[10px] text-gray-400 uppercase">Online</p>
                </div>
                <div>
                    <p class="text-2xl font-bold text-amber-600" x-text="workerCounts.draining"></p>
                    <p class="text-[10px] text-gray-400 uppercase">Draining</p>
                </div>
                <div>
                    <p class="text-2xl font-bold text-gray-400" x-text="workerCounts.offline"></p>
                    <p class="text-[10px] text-gray-400 uppercase">Offline</p>
                </div>
            </div>
            <p class="text-xs text-gray-400 mt-3 pt-3 border-t border-gray-100 dark:border-gray-700">
                Registered workers: <span class="font-semibold text-gray-600 dark:text-gray-300" x-text="registeredWorkerCount"></span>
            </p>
        </a>
    </div>

    <!-- Runner Sessions: summary + host chart -->
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-4 mb-6 ops-dash-runner">
        <a href="{{ admin_prefix }}/ops/runners/" class="lg:col-span-1 bg-gradient-to-br from-zinc-800 to-zinc-900 rounded-xl p-5 border border-white/10 text-white shadow-lg hover:border-sky-500/40 transition-colors group">
            <div class="flex items-center justify-between mb-3">
                <span class="text-xs font-semibold text-zinc-400 uppercase tracking-wider">Runner sessions</span>
                <svg class="w-4 h-4 text-zinc-500 group-hover:text-sky-400 group-hover:translate-x-0.5 transition-all" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="9 18 15 12 9 6"/></svg>
            </div>
            <div class="grid grid-cols-3 gap-3 mt-2">
                <div>
                    <p class="text-2xl font-bold text-emerald-400 tabular-nums" x-text="runnerDash?.counts?.running ?? '—'"></p>
                    <p class="text-[10px] text-zinc-500 uppercase">Active</p>
                </div>
                <div>
                    <p class="text-2xl font-bold text-amber-400 tabular-nums" x-text="runnerDash?.counts?.paused ?? '—'"></p>
                    <p class="text-[10px] text-zinc-500 uppercase">Paused</p>
                </div>
                <div>
                    <p class="text-2xl font-bold text-zinc-300 tabular-nums" x-text="runnerDash?.counts?.total ?? '—'"></p>
                    <p class="text-[10px] text-zinc-500 uppercase">Total</p>
                </div>
            </div>
            <p class="text-xs text-zinc-500 mt-4 pt-3 border-t border-white/10">
                Host CPU <span class="text-sky-400 font-semibold" x-text="runnerDash?.host?.cpu_percent != null ? runnerDash.host.cpu_percent + '%' : '—'"></span>
                · RAM <span class="text-violet-300 font-semibold" x-text="runnerDash?.host?.memory_used_mb != null ? runnerDash.host.memory_used_mb + ' MB' : '—'"></span>
            </p>
        </a>
        <div class="lg:col-span-2 bg-white dark:bg-zinc-900 rounded-xl border border-gray-200 dark:border-white/10 p-4 flex flex-col min-h-[200px]">
            <div class="flex items-center justify-between mb-2">
                <span class="text-xs font-semibold text-gray-400 uppercase tracking-wider">Host load (API process)</span>
            </div>
            <div class="flex-1 min-h-[160px] relative">
                <canvas id="opsDashRunnerChart"></canvas>
                <template x-if="!runnerDash || !(runnerDash.metric_history && runnerDash.metric_history.length)">
                    <p class="absolute inset-0 flex items-center justify-center text-xs text-gray-500" x-show="!loading">Open Runners page or refresh to accumulate samples.</p>
                </template>
            </div>
        </div>
    </div>

    <!-- Bottom Row: Recent Logs Preview -->
    <div class="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 overflow-hidden">
        <div class="flex items-center justify-between px-5 py-3 border-b border-gray-100 dark:border-gray-700">
            <span class="text-xs font-semibold text-gray-400 uppercase tracking-wider">Recent Logs</span>
            <a href="{{ admin_prefix }}/ops/logs/" class="text-xs text-primary-500 hover:text-primary-700 font-medium transition-colors">View all &rarr;</a>
        </div>
        <div class="bg-gray-900 p-4 font-mono text-xs leading-relaxed max-h-64 overflow-y-auto">
            <template x-for="(entry, idx) in recentLogs" :key="idx">
                <div class="py-0.5 flex items-start gap-2">
                    <span class="text-gray-500 flex-shrink-0 w-[80px]" x-text="entry.timestamp.substring(11, 19)"></span>
                    <span class="flex-shrink-0 w-[55px] text-center font-semibold"
                          :class="{
                              'text-gray-500': entry.level === 'DEBUG',
                              'text-green-400': entry.level === 'INFO',
                              'text-amber-400': entry.level === 'WARNING',
                              'text-red-400': entry.level === 'ERROR',
                              'text-red-300 font-bold': entry.level === 'CRITICAL'
                          }" x-text="entry.level"></span>
                    <span class="text-cyan-400 flex-shrink-0 w-[120px] truncate" x-text="entry.logger"></span>
                    <span class="text-gray-300 truncate" x-text="entry.message"></span>
                </div>
            </template>
            <template x-if="recentLogs.length === 0">
                <div class="text-gray-600 text-center py-6">No recent logs</div>
            </template>
        </div>
    </div>

    <!-- Quick Links -->
    <div class="mt-6 grid grid-cols-2 md:grid-cols-5 gap-3">
        <a href="{{ admin_prefix }}/ops/infrastructure/" class="flex items-center gap-3 px-4 py-3 bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 hover:border-primary-400 transition-colors group">
            <svg class="w-5 h-5 text-gray-400 group-hover:text-primary-500 transition-colors" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="2" width="20" height="8" rx="2" ry="2"/><rect x="2" y="14" width="20" height="8" rx="2" ry="2"/><line x1="6" y1="6" x2="6.01" y2="6"/><line x1="6" y1="18" x2="6.01" y2="18"/></svg>
            <span class="text-sm font-medium text-gray-700 dark:text-gray-200">Infrastructure</span>
        </a>
        <a href="{{ admin_prefix }}/ops/tasks/" class="flex items-center gap-3 px-4 py-3 bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 hover:border-primary-400 transition-colors group">
            <svg class="w-5 h-5 text-gray-400 group-hover:text-primary-500 transition-colors" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>
            <span class="text-sm font-medium text-gray-700 dark:text-gray-200">Tasks</span>
        </a>
        <a href="{{ admin_prefix }}/ops/workers/" class="flex items-center gap-3 px-4 py-3 bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 hover:border-primary-400 transition-colors group">
            <svg class="w-5 h-5 text-gray-400 group-hover:text-primary-500 transition-colors" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="4" y="4" width="16" height="16" rx="2" ry="2"/><rect x="9" y="9" width="6" height="6"/></svg>
            <span class="text-sm font-medium text-gray-700 dark:text-gray-200">Workers</span>
        </a>
        <a href="{{ admin_prefix }}/ops/runners/" class="flex items-center gap-3 px-4 py-3 bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 hover:border-primary-400 transition-colors group">
            <svg class="w-5 h-5 text-gray-400 group-hover:text-primary-500 transition-colors" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/></svg>
            <span class="text-sm font-medium text-gray-700 dark:text-gray-200">Sessions</span>
        </a>
        <a href="{{ admin_prefix }}/ops/logs/" class="flex items-center gap-3 px-4 py-3 bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 hover:border-primary-400 transition-colors group">
            <svg class="w-5 h-5 text-gray-400 group-hover:text-primary-500 transition-colors" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/></svg>
            <span class="text-sm font-medium text-gray-700 dark:text-gray-200">Logs</span>
        </a>
        <a href="{{ admin_prefix }}/ops/kafka/" class="flex items-center gap-3 px-4 py-3 bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 hover:border-primary-400 transition-colors group">
            <svg class="w-5 h-5 text-gray-400 group-hover:text-primary-500 transition-colors" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2L2 7l10 5 10-5-10-5z"/><path d="M2 17l10 5 10-5"/><path d="M2 12l10 5 10-5"/></svg>
            <span class="text-sm font-medium text-gray-700 dark:text-gray-200">Kafka</span>
        </a>
        <a href="{{ admin_prefix }}/ops/events/" class="flex items-center gap-3 px-4 py-3 bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 hover:border-primary-400 transition-colors group">
            <svg class="w-5 h-5 text-gray-400 group-hover:text-primary-500 transition-colors" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/></svg>
            <span class="text-sm font-medium text-gray-700 dark:text-gray-200">Events</span>
        </a>
    </div>
</div>

<script>
function opsDashboard() {
    return {
        loading: true,
        infra: {},
        taskStats: {},
        workerCounts: { online: 0, draining: 0, offline: 0 },
        registeredWorkerCount: 0,
        recentLogs: [],
        runnerDash: null,
        runnerChart: null,
        refreshIntervalId: null,
        infraEventSource: null,

        init() {
            this.loadAll();
            this.startAutoRefresh();
            this.connectInfraStream();
        },

        connectInfraStream() {
            try {
                const url = '{{ admin_prefix }}/api/ops/infrastructure/stream';
                const sseUrl = (window.location.protocol === 'https:' ? 'https:' : 'http:') + '//' + window.location.host + url;
                this.infraEventSource = new EventSource(sseUrl);
                this.infraEventSource.onmessage = (e) => {
                    try {
                        const data = JSON.parse(e.data);
                        if (data.type !== 'error' && data.runtime) this.infra = data;
                    } catch (err) {}
                };
                this.infraEventSource.onerror = () => {
                    if (this.infraEventSource) { this.infraEventSource.close(); this.infraEventSource = null; }
                };
            } catch (e) {}
        },

        startAutoRefresh() {
            this.clearRefreshInterval();
            this.refreshIntervalId = setInterval(() => {
                if (!document.hidden) this.loadAll();
            }, 30000);
        },

        clearRefreshInterval() {
            if (this.refreshIntervalId) {
                clearInterval(this.refreshIntervalId);
                this.refreshIntervalId = null;
            }
            if (this.infraEventSource) {
                this.infraEventSource.close();
                this.infraEventSource = null;
            }
        },

        async loadAll() {
            this.loading = true;
            await Promise.all([
                this.loadInfra(),
                this.loadTasks(),
                this.loadWorkers(),
                this.loadLogs(),
                this.loadRunnerDash(),
            ]);
            this.loading = false;
        },

        async loadRunnerDash() {
            try {
                const resp = await fetch('{{ admin_prefix }}/api/ops/runners/dashboard', { credentials: 'same-origin' });
                if (!resp.ok) return;
                this.runnerDash = await resp.json();
                this.$nextTick(() => this.renderOpsRunnerChart());
            } catch (e) {}
        },

        renderOpsRunnerChart() {
            if (typeof Chart === 'undefined') {
                setTimeout(() => this.renderOpsRunnerChart(), 200);
                return;
            }
            const canvas = document.getElementById('opsDashRunnerChart');
            if (!canvas) return;
            const hist = (this.runnerDash && this.runnerDash.metric_history) || [];
            if (hist.length === 0) {
                if (this.runnerChart) {
                    this.runnerChart.destroy();
                    this.runnerChart = null;
                }
                return;
            }
            const labels = hist.map((h) => (h.t ? String(h.t).slice(11, 19) : ''));
            const cpu = hist.map((h) => Number(h.cpu_percent) || 0);
            const mem = hist.map((h) => Number(h.memory_percent) || 0);
            const isDark = document.documentElement.classList.contains('dark');
            const grid = isDark ? 'rgba(255,255,255,0.06)' : 'rgba(0,0,0,0.06)';
            const tick = isDark ? '#71717a' : '#6b7280';
            if (this.runnerChart) {
                this.runnerChart.destroy();
                this.runnerChart = null;
            }
            this.runnerChart = new Chart(canvas, {
                type: 'line',
                data: {
                    labels,
                    datasets: [
                        { label: 'CPU %', data: cpu, borderColor: 'rgb(56, 189, 248)', backgroundColor: 'rgba(56,189,248,0.1)', fill: true, tension: 0.25, pointRadius: 0 },
                        { label: 'Mem %', data: mem, borderColor: 'rgb(167, 139, 250)', backgroundColor: 'rgba(167,139,250,0.08)', fill: true, tension: 0.25, pointRadius: 0 },
                    ],
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: { legend: { labels: { color: tick, font: { size: 11 } } } },
                    scales: {
                        x: { grid: { color: grid }, ticks: { color: tick, maxTicksLimit: 8 } },
                        y: { min: 0, max: 100, grid: { color: grid }, ticks: { color: tick } },
                    },
                },
            });
        },

        async loadInfra() {
            try {
                const resp = await fetch('{{ admin_prefix }}/api/ops/infrastructure');
                this.infra = await resp.json();
            } catch (e) {}
        },

        async loadTasks() {
            try {
                const resp = await fetch('{{ admin_prefix }}/api/ops/tasks/stats');
                this.taskStats = await resp.json();
            } catch (e) {}
        },

        async loadWorkers() {
            try {
                const [active, registered] = await Promise.all([
                    fetch('{{ admin_prefix }}/api/ops/workers').then(r => r.json()),
                    fetch('{{ admin_prefix }}/api/ops/workers/registered').then(r => r.json()),
                ]);
                const workers = active.items || [];
                this.workerCounts = {
                    online: workers.filter(w => w.status === 'ONLINE').length,
                    draining: workers.filter(w => w.status === 'DRAINING').length,
                    offline: workers.filter(w => w.status === 'OFFLINE').length,
                };
                this.registeredWorkerCount = registered.total || 0;
            } catch (e) {}
        },

        async loadLogs() {
            try {
                const resp = await fetch('{{ admin_prefix }}/api/ops/logs/recent?limit=20&level=INFO');
                const data = await resp.json();
                this.recentLogs = (data.entries || []).map(e => typeof e === 'string' ? JSON.parse(e) : e);
            } catch (e) {}
        }
    };
}
</script>
{% endblock %}