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

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

{% block content %}
<div class="p-6" x-data="infraView()" 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">Infrastructure</h1>
            <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">Runtime environment, system metrics and connected services</p>
        </div>
        <button @click="loadData()" 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>

    <!-- Loading -->
    <template x-if="loading">
        <div class="flex items-center justify-center py-20">
            <div class="animate-spin rounded-full h-8 w-8 border-b-2 border-primary-500"></div>
        </div>
    </template>

    <template x-if="!loading && data">
        <div>
            <!-- Runtime Environment Card -->
            <div class="bg-gradient-to-r from-primary-500 to-primary-700 rounded-2xl p-6 mb-6 text-white shadow-lg">
                <div class="flex items-center justify-between">
                    <div>
                        <p class="text-sm font-medium text-primary-100 uppercase tracking-wider">Runtime Environment</p>
                        <h2 class="text-3xl font-bold mt-1" x-text="data.runtime.label"></h2>
                        <p class="text-sm text-primary-200 mt-2">
                            <span x-text="data.system.hostname"></span> &middot;
                            <span x-text="data.system.platform"></span>
                        </p>
                    </div>
                    <div class="w-16 h-16 rounded-2xl bg-white/10 flex items-center justify-center">
                        <svg class="w-8 h-8 text-white" 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>
                    </div>
                </div>
            </div>

            <!-- System Metrics Grid -->
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
                <!-- CPU -->
                <div class="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-5">
                    <div class="flex items-center justify-between mb-3">
                        <span class="text-xs font-semibold text-gray-400 uppercase tracking-wider">CPU</span>
                        <svg class="w-4 h-4 text-gray-400" 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"/><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"/><line x1="20" y1="9" x2="23" y2="9"/><line x1="20" y1="14" x2="23" y2="14"/><line x1="1" y1="9" x2="4" y2="9"/><line x1="1" y1="14" x2="4" y2="14"/></svg>
                    </div>
                    <div class="text-3xl font-bold text-gray-900 dark:text-white" x-text="(data.system.cpu_percent || 0) + '%'"></div>
                    <p class="text-xs text-gray-500 mt-1" x-text="(data.system.cpu_count || '?') + ' cores'"></p>
                    <div class="mt-3 w-full bg-gray-200 dark:bg-gray-700 rounded-full h-1.5">
                        <div class="h-1.5 rounded-full transition-all" :class="(data.system.cpu_percent || 0) > 80 ? 'bg-red-500' : (data.system.cpu_percent || 0) > 50 ? 'bg-amber-500' : 'bg-green-500'" :style="'width: ' + (data.system.cpu_percent || 0) + '%'"></div>
                    </div>
                </div>

                <!-- Memory -->
                <div class="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-5">
                    <div class="flex items-center justify-between mb-3">
                        <span class="text-xs font-semibold text-gray-400 uppercase tracking-wider">Memory</span>
                        <svg class="w-4 h-4 text-gray-400" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="6" width="20" height="12" rx="2"/><line x1="6" y1="12" x2="6.01" y2="12"/><line x1="10" y1="12" x2="10.01" y2="12"/><line x1="14" y1="12" x2="14.01" y2="12"/></svg>
                    </div>
                    <div class="text-3xl font-bold text-gray-900 dark:text-white" x-text="(data.system.memory_percent || 0) + '%'"></div>
                    <p class="text-xs text-gray-500 mt-1" x-text="(data.system.memory_used_mb || 0) + ' / ' + (data.system.memory_total_mb || 0) + ' MB'"></p>
                    <div class="mt-3 w-full bg-gray-200 dark:bg-gray-700 rounded-full h-1.5">
                        <div class="h-1.5 rounded-full transition-all" :class="(data.system.memory_percent || 0) > 85 ? 'bg-red-500' : (data.system.memory_percent || 0) > 60 ? 'bg-amber-500' : 'bg-green-500'" :style="'width: ' + (data.system.memory_percent || 0) + '%'"></div>
                    </div>
                </div>

                <!-- Disk -->
                <div class="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-5">
                    <div class="flex items-center justify-between mb-3">
                        <span class="text-xs font-semibold text-gray-400 uppercase tracking-wider">Disk</span>
                        <svg class="w-4 h-4 text-gray-400" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><ellipse cx="12" cy="5" rx="9" ry="3"/><path d="M21 12c0 1.66-4 3-9 3s-9-1.34-9-3"/><path d="M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5"/></svg>
                    </div>
                    <div class="text-3xl font-bold text-gray-900 dark:text-white" x-text="(data.system.disk_percent || 0) + '%'"></div>
                    <p class="text-xs text-gray-500 mt-1" x-text="(data.system.disk_used_gb || 0) + ' / ' + (data.system.disk_total_gb || 0) + ' GB'"></p>
                    <div class="mt-3 w-full bg-gray-200 dark:bg-gray-700 rounded-full h-1.5">
                        <div class="h-1.5 rounded-full transition-all" :class="(data.system.disk_percent || 0) > 90 ? 'bg-red-500' : (data.system.disk_percent || 0) > 70 ? 'bg-amber-500' : 'bg-green-500'" :style="'width: ' + (data.system.disk_percent || 0) + '%'"></div>
                    </div>
                </div>

                <!-- Uptime -->
                <div class="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-5">
                    <div class="flex items-center justify-between mb-3">
                        <span class="text-xs font-semibold text-gray-400 uppercase tracking-wider">Uptime</span>
                        <svg class="w-4 h-4 text-gray-400" 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"/><polyline points="12 6 12 12 16 14"/></svg>
                    </div>
                    <div class="text-3xl font-bold text-gray-900 dark:text-white" x-text="data.process.uptime_human"></div>
                    <p class="text-xs text-gray-500 mt-1">PID: <span x-text="data.process.pid"></span></p>
                    <p class="text-xs text-gray-500">Python <span x-text="data.system.python_version"></span></p>
                </div>
            </div>

            <!-- Connected Services -->
            <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">Connected Services</h3>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
                <template x-for="svc in data.services" :key="svc.name">
                    <div class="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-5 flex items-start gap-4">
                        <div class="w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0"
                             :class="svc.status === 'healthy' ? 'bg-green-100 dark:bg-green-900/30 text-green-600' : svc.status === 'unhealthy' ? 'bg-red-100 dark:bg-red-900/30 text-red-600' : 'bg-gray-100 dark:bg-gray-700 text-gray-400'">
                            <!-- Healthy: checkmark -->
                            <svg x-show="svc.status === 'healthy'" class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
                            <!-- Unhealthy: X circle -->
                            <svg x-show="svc.status === 'unhealthy'" class="w-5 h-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="15" y1="9" x2="9" y2="15"/><line x1="9" y1="9" x2="15" y2="15"/></svg>
                            <!-- Not configured: minus circle -->
                            <svg x-show="svc.status === 'not_configured'" class="w-5 h-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="8" y1="12" x2="16" y2="12"/></svg>
                        </div>
                        <div class="flex-1 min-w-0">
                            <div class="flex items-center gap-2">
                                <h4 class="text-sm font-semibold text-gray-900 dark:text-white" x-text="svc.name"></h4>
                                <span class="text-[10px] uppercase tracking-wider font-medium px-1.5 py-0.5 rounded-full"
                                      :class="svc.status === 'healthy' ? 'bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-400' : svc.status === 'unhealthy' ? 'bg-red-100 dark:bg-red-900/30 text-red-700 dark:text-red-400' : 'bg-gray-100 dark:bg-gray-700 text-gray-500'"
                                      x-text="svc.status"></span>
                            </div>
                            <template x-if="svc.driver">
                                <p class="text-xs text-gray-500 mt-0.5">Driver: <span x-text="svc.driver"></span></p>
                            </template>
                            <template x-if="svc.latency_ms > 0">
                                <p class="text-xs text-gray-500 mt-0.5">Latency: <span x-text="svc.latency_ms + 'ms'"></span></p>
                            </template>
                            <template x-if="svc.error">
                                <p class="text-xs text-red-500 mt-1 truncate" x-text="svc.error"></p>
                            </template>
                        </div>
                    </div>
                </template>
            </div>

            <!-- Process Info -->
            <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">Process Info</h3>
            <div class="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-5">
                <div class="grid grid-cols-2 md:grid-cols-4 gap-4 text-sm">
                    <div>
                        <span class="text-gray-500 dark:text-gray-400">PID</span>
                        <p class="font-mono text-gray-900 dark:text-white" x-text="data.process.pid"></p>
                    </div>
                    <div>
                        <span class="text-gray-500 dark:text-gray-400">Threads</span>
                        <p class="font-mono text-gray-900 dark:text-white" x-text="data.process.thread_count"></p>
                    </div>
                    <div>
                        <span class="text-gray-500 dark:text-gray-400">Framework</span>
                        <p class="font-mono text-gray-900 dark:text-white" x-text="'v' + (data.process.framework_version || '?')"></p>
                    </div>
                    <div>
                        <span class="text-gray-500 dark:text-gray-400">Started</span>
                        <p class="font-mono text-gray-900 dark:text-white text-xs" x-text="data.process.started_at"></p>
                    </div>
                    <template x-if="data.process.memory_rss_mb">
                        <div>
                            <span class="text-gray-500 dark:text-gray-400">RSS Memory</span>
                            <p class="font-mono text-gray-900 dark:text-white" x-text="data.process.memory_rss_mb + ' MB'"></p>
                        </div>
                    </template>
                    <template x-if="data.process.open_files !== undefined">
                        <div>
                            <span class="text-gray-500 dark:text-gray-400">Open Files</span>
                            <p class="font-mono text-gray-900 dark:text-white" x-text="data.process.open_files"></p>
                        </div>
                    </template>
                    <template x-if="data.process.connections !== undefined">
                        <div>
                            <span class="text-gray-500 dark:text-gray-400">Connections</span>
                            <p class="font-mono text-gray-900 dark:text-white" x-text="data.process.connections"></p>
                        </div>
                    </template>
                </div>
            </div>
        </div>
    </template>
</div>

<script>
function infraView() {
    return {
        loading: true,
        data: null,
        error: null,
        refreshIntervalId: null,
        infraEventSource: null,

        init() {
            this.loadData();
            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 d = JSON.parse(e.data);
                        if (d.type !== 'error' && d.runtime) {
                            this.data = d;
                            this.loading = false;
                        }
                    } 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.loadData();
            }, 15000);
        },

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

        async loadData() {
            this.loading = true;
            try {
                const resp = await fetch('{{ admin_prefix }}/api/ops/infrastructure');
                if (!resp.ok) throw new Error('Failed to load');
                this.data = await resp.json();
            } catch (e) {
                this.error = e.message;
            } finally {
                this.loading = false;
            }
        }
    };
}
</script>
{% endblock %}