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

{% block title %}Workers — {{ site_header }}{% endblock %}

{% block content %}
<div class="p-6" x-data="workersView()" x-init="loadData(); loadRegistered(); connectWebSocket()">
    <!-- Header -->
    <div class="flex items-center justify-between mb-6">
        <div>
            <h1 class="text-2xl font-bold text-gray-900 dark:text-white">Worker Manager</h1>
            <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">Active workers and registered message processors</p>
        </div>
        <div class="flex items-center gap-2">
            <span x-show="wsConnected" class="inline-flex items-center gap-1.5 px-2.5 py-1 text-[10px] font-semibold text-green-600 bg-green-100 dark:bg-green-900/30 dark:text-green-400 rounded-full">
                <span class="w-1.5 h-1.5 rounded-full bg-green-500 animate-pulse"></span>
                Live
            </span>
            <button @click="loadData(); loadRegistered()" 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>
    </div>

    <!-- Capacity Summary -->
    <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
        <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">Avg CPU (by worker)</span>
            <p class="text-2xl font-bold text-gray-900 dark:text-white mt-1" x-text="(aggregateCpu || 0).toFixed(1) + '%'"></p>
            <p class="text-xs text-gray-500 mt-0.5" x-text="workersWithCpu + ' worker(s) reporting'"></p>
        </div>
        <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">Total RAM (by worker)</span>
            <p class="text-2xl font-bold text-gray-900 dark:text-white mt-1" x-text="(aggregateMemory || 0).toFixed(1) + ' MB'"></p>
            <p class="text-xs text-gray-500 mt-0.5" x-text="workersWithMemory + ' worker(s) reporting'"></p>
        </div>
    </div>

    <!-- Active Workers -->
    <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">Active Workers</h3>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 mb-8">
        <template x-for="w in activeWorkers" :key="w.worker_id">
            <div class="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-5">
                <div class="flex items-start justify-between mb-3">
                    <div>
                        <h4 class="text-sm font-semibold text-gray-900 dark:text-white" x-text="w.worker_name"></h4>
                        <p class="text-[10px] font-mono text-gray-400 mt-0.5" x-text="w.worker_id.substring(0, 12) + '...'"></p>
                    </div>
                    <div class="flex items-center gap-2">
                        <span class="inline-flex items-center gap-1 px-2 py-0.5 text-[10px] font-semibold uppercase rounded-full"
                              :class="w.status === 'ONLINE' ? 'bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-400' : w.status === 'DRAINING' ? 'bg-amber-100 dark:bg-amber-900/30 text-amber-700 dark:text-amber-400' : 'bg-gray-100 dark:bg-gray-700 text-gray-500'">
                            <span class="w-1.5 h-1.5 rounded-full" :class="w.status === 'ONLINE' ? 'bg-green-500' : w.status === 'DRAINING' ? 'bg-amber-500' : 'bg-gray-400'"></span>
                            <span x-text="w.status"></span>
                        </span>
                        <div class="flex items-center gap-1">
                            <template x-if="w.status === 'ONLINE'">
                                <button @click="drainWorker(w.worker_id)" class="p-1 text-gray-400 hover:text-amber-500 dark:hover:text-amber-400 transition-colors" title="Drain (stop accepting new tasks)">
                                    <svg class="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>
                                </button>
                            </template>
                            <a :href="'{{ admin_prefix }}/ops/logs/?search=' + encodeURIComponent(w.worker_id)" class="p-1 text-gray-400 hover:text-primary-500 transition-colors" title="View logs" target="_blank">
                                <svg class="w-3.5 h-3.5" 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>
                            </a>
                            <template x-if="w.status === 'OFFLINE'">
                                <button @click="removeWorker(w.worker_id)" class="p-1 text-gray-400 hover:text-red-500 dark:hover:text-red-400 transition-colors" title="Remove offline worker">
                                    <svg class="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 6 5 6 21 6"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/><line x1="10" y1="11" x2="10" y2="17"/><line x1="14" y1="11" x2="14" y2="17"/></svg>
                                </button>
                            </template>
                        </div>
                    </div>
                </div>
                <div class="grid grid-cols-2 gap-3 text-xs">
                    <div>
                        <span class="text-gray-400">Type</span>
                        <p class="text-gray-700 dark:text-gray-300" x-text="w.worker_type"></p>
                    </div>
                    <div>
                        <span class="text-gray-400">Host</span>
                        <p class="text-gray-700 dark:text-gray-300 truncate" x-text="w.hostname"></p>
                    </div>
                    <div>
                        <span class="text-gray-400">PID</span>
                        <p class="font-mono text-gray-700 dark:text-gray-300" x-text="w.pid"></p>
                    </div>
                    <div>
                        <span class="text-gray-400">Concurrency</span>
                        <p class="text-gray-700 dark:text-gray-300" x-text="w.concurrency"></p>
                    </div>
                    <div>
                        <span class="text-gray-400">Processed</span>
                        <p class="font-semibold text-gray-900 dark:text-white" x-text="w.total_processed"></p>
                    </div>
                    <div>
                        <span class="text-gray-400">Errors</span>
                        <p class="font-semibold" :class="w.total_errors > 0 ? 'text-red-600' : 'text-gray-900 dark:text-white'" x-text="w.total_errors"></p>
                    </div>
                </div>
                <template x-if="w.cpu_percent !== undefined || w.memory_mb !== undefined">
                    <div class="mt-3 pt-3 border-t border-gray-100 dark:border-gray-700 space-y-2">
                        <template x-if="w.cpu_percent !== undefined">
                            <div>
                                <div class="flex justify-between text-[10px] text-gray-400 mb-0.5">
                                    <span>CPU</span>
                                    <span x-text="w.cpu_percent + '%'"></span>
                                </div>
                                <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-1.5">
                                    <div class="h-1.5 rounded-full transition-all" :class="(w.cpu_percent || 0) > 80 ? 'bg-red-500' : (w.cpu_percent || 0) > 50 ? 'bg-amber-500' : 'bg-green-500'" :style="'width: ' + Math.min(w.cpu_percent || 0, 100) + '%'"></div>
                                </div>
                            </div>
                        </template>
                        <template x-if="w.memory_mb !== undefined">
                            <div>
                                <div class="flex justify-between text-[10px] text-gray-400 mb-0.5">
                                    <span>RAM</span>
                                    <span x-text="w.memory_mb + ' MB'"></span>
                                </div>
                                <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-1.5">
                                    <div class="h-1.5 rounded-full bg-blue-500 transition-all" :style="'width: ' + Math.min((w.memory_mb || 0) / 1024 * 100, 100) + '%'" title="Relative to 1GB"></div>
                                </div>
                            </div>
                        </template>
                    </div>
                </template>
                <template x-if="w.last_heartbeat">
                    <p class="text-[10px] text-gray-400 mt-3 border-t border-gray-100 dark:border-gray-700 pt-2">
                        Last heartbeat: <span x-text="new Date(w.last_heartbeat).toLocaleTimeString()"></span>
                    </p>
                </template>
            </div>
        </template>
        <template x-if="!loading && activeWorkers.length === 0">
            <div class="col-span-full bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-8 text-center text-gray-400">
                <svg class="w-10 h-10 mx-auto mb-3 opacity-50" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" 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"/><line x1="9" y1="1" x2="9" y2="4"/><line x1="15" y1="1" x2="15" y2="4"/><line x1="9" y1="20" x2="9" y2="23"/><line x1="15" y1="20" x2="15" y2="23"/></svg>
                <p class="font-medium">No active workers</p>
                <p class="text-xs mt-1">Start a worker: <code class="font-mono text-primary-500">core worker</code> or <code class="font-mono text-primary-500">core runworker &lt;Name&gt;</code></p>
                <p class="text-xs mt-0.5 text-gray-300">Workers report heartbeats every 30s and appear here when running.</p>
            </div>
        </template>
    </div>

    <!-- Registered Workers -->
    <div class="flex items-center justify-between mb-4">
        <h3 class="text-lg font-semibold text-gray-900 dark:text-white">Registered Message Workers</h3>
        <span class="text-xs text-gray-400 bg-gray-100 dark:bg-gray-700 px-2.5 py-1 rounded-full" x-text="registeredWorkers.length + ' worker(s)'"></span>
    </div>
    <div class="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 overflow-hidden">
        <table class="w-full text-sm">
            <thead class="bg-gray-50 dark:bg-gray-700/50">
                <tr>
                    <th class="px-4 py-3 text-left text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase">Name</th>
                    <th class="px-4 py-3 text-left text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase">Status</th>
                    <th class="px-4 py-3 text-left text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase">Input Topic</th>
                    <th class="px-4 py-3 text-left text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase">Output Topic</th>
                    <th class="px-4 py-3 text-left text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase">Group</th>
                    <th class="px-4 py-3 text-center text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase">Concurrency</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-gray-100 dark:divide-gray-700">
                <template x-for="w in registeredWorkers" :key="w.name">
                    <tr class="hover:bg-gray-50 dark:hover:bg-gray-700/30">
                        <td class="px-4 py-3">
                            <span class="font-medium text-gray-900 dark:text-white" x-text="w.name"></span>
                        </td>
                        <td class="px-4 py-3">
                            <span class="inline-flex items-center gap-1.5 px-2 py-0.5 text-[10px] font-semibold uppercase rounded-full bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-400">
                                <span class="w-1.5 h-1.5 rounded-full bg-blue-500"></span>
                                Registered
                            </span>
                        </td>
                        <td class="px-4 py-3 font-mono text-xs text-gray-600 dark:text-gray-300" x-text="w.input_topic || '—'"></td>
                        <td class="px-4 py-3 font-mono text-xs text-gray-600 dark:text-gray-300" x-text="w.output_topic || '—'"></td>
                        <td class="px-4 py-3 font-mono text-xs text-gray-500" x-text="w.group_id || '—'"></td>
                        <td class="px-4 py-3 text-center text-gray-600 dark:text-gray-300" x-text="w.concurrency"></td>
                    </tr>
                </template>
                <template x-if="registeredWorkers.length === 0">
                    <tr><td colspan="6" class="px-4 py-8 text-center text-gray-400">No message workers registered</td></tr>
                </template>
            </tbody>
        </table>
        <div class="px-4 py-2.5 bg-gray-50 dark:bg-gray-700/30 border-t border-gray-100 dark:border-gray-700">
            <p class="text-[10px] text-gray-400">
                <span class="font-semibold">Registered</span> = worker decorator loaded in this process. Use <code class="font-mono text-primary-500">core runworker &lt;WorkerName&gt;</code> to start consuming.
            </p>
        </div>
    </div>
</div>

<script>
function workersView() {
    return {
        loading: true,
        activeWorkers: [],
        registeredWorkers: [],
        ws: null,
        wsConnected: false,

        get aggregateCpu() {
            const withCpu = this.activeWorkers.filter(w => w.cpu_percent != null);
            if (withCpu.length === 0) return null;
            return withCpu.reduce((a, w) => a + (w.cpu_percent || 0), 0) / withCpu.length;
        },

        get workersWithCpu() {
            return this.activeWorkers.filter(w => w.cpu_percent != null).length;
        },

        get aggregateMemory() {
            return this.activeWorkers.reduce((a, w) => a + (w.memory_mb || 0), 0) || null;
        },

        get workersWithMemory() {
            return this.activeWorkers.filter(w => w.memory_mb != null).length;
        },

        async loadData() {
            this.loading = true;
            try {
                const resp = await fetch('{{ admin_prefix }}/api/ops/workers');
                const data = await resp.json();
                this.activeWorkers = data.items || [];
            } catch (e) { console.error(e); } finally { this.loading = false; }
        },

        async loadRegistered() {
            try {
                const resp = await fetch('{{ admin_prefix }}/api/ops/workers/registered');
                const data = await resp.json();
                this.registeredWorkers = data.items || [];
            } catch (e) {}
        },

        connectWebSocket() {
            const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
            this.ws = new WebSocket(`${protocol}//${window.location.host}{{ admin_prefix }}/ws/ops/events`);

            this.ws.onopen = () => {
                this.wsConnected = true;
            };

            this.ws.onmessage = (event) => {
                const data = JSON.parse(event.data);
                if (data.type === 'worker_heartbeat') {
                    this.handleWorkerHeartbeat(data.data);
                } else if (data.type === 'worker_offline') {
                    this.handleWorkerOffline(data.data);
                }
            };

            this.ws.onclose = () => {
                this.wsConnected = false;
                // Reconnect after delay
                setTimeout(() => this.connectWebSocket(), 3000);
            };

            this.ws.onerror = () => {
                this.wsConnected = false;
            };
        },

        handleWorkerHeartbeat(worker) {
            const idx = this.activeWorkers.findIndex(w => w.worker_id === worker.worker_id);
            if (idx >= 0) {
                this.activeWorkers = this.activeWorkers.map((w, i) =>
                    i === idx ? { ...w, ...worker } : w
                );
            } else {
                this.activeWorkers = [...this.activeWorkers, worker];
            }
        },

        handleWorkerOffline(data) {
            this.activeWorkers = this.activeWorkers.map(w =>
                w.worker_id === data.worker_id ? { ...w, status: 'OFFLINE' } : w
            );
        },

        async drainWorker(workerId) {
            if (!confirm('Drain this worker? It will stop accepting new tasks.')) return;
            try {
                const resp = await fetch(`{{ admin_prefix }}/api/ops/workers/${workerId}/drain`, { method: 'POST' });
                if (resp.ok) {
                    this.activeWorkers = this.activeWorkers.map(w =>
                        w.worker_id === workerId ? { ...w, status: 'DRAINING' } : w
                    );
                    if (typeof window.showToast === 'function') window.showToast('success', 'Worker Draining', workerId);
                } else {
                    const data = await resp.json();
                    alert(data.detail || 'Failed to drain worker');
                }
            } catch (e) { console.error(e); }
        },

        async removeWorker(workerId) {
            if (!confirm('Remove this offline worker from the list?')) return;
            try {
                const resp = await fetch(`{{ admin_prefix }}/api/ops/workers/${workerId}`, { method: 'DELETE' });
                if (resp.ok) {
                    this.activeWorkers = this.activeWorkers.filter(w => w.worker_id !== workerId);
                } else {
                    const data = await resp.json();
                    alert(data.detail || 'Failed to remove worker');
                }
            } catch (e) { console.error(e); }
        }
    };
}
</script>
{% endblock %}