<script setup>
import { ref, computed } from 'vue'
import { Head, Link } from '@inertiajs/vue3'
import AdminLayout from '@/Layouts/AdminLayout.vue'
import {
    CpuChipIcon,
    ServerStackIcon,
    BoltIcon,
    ExclamationCircleIcon,
    FireIcon,
    ChartBarIcon,
    CircleStackIcon,
    EyeIcon,
    InformationCircleIcon,
    ArrowTrendingUpIcon,
    ClockIcon,
    ArrowUpIcon,
} from '@heroicons/vue/24/outline'

const props = defineProps({
    accounts: Array,
    totals: Object,
    top_consumers: Object,
    trend_24h: Array,
    server_specs: Object,
})

// Table state
const sortKey = ref('cpu_percent')
const sortDir = ref('desc')
const search = ref('')
const filterStatus = ref('all')

const sortedAccounts = computed(() => {
    let list = props.accounts.filter(a => {
        const q = search.value.toLowerCase()
        const matchSearch = !q || a.username.toLowerCase().includes(q) || (a.primary_domain || '').toLowerCase().includes(q)
        const matchStatus = filterStatus.value === 'all' || a.usage?.status === filterStatus.value
        return matchSearch && matchStatus
    })

    list = [...list].sort((a, b) => {
        const aVal = a.usage?.[sortKey.value] ?? 0
        const bVal = b.usage?.[sortKey.value] ?? 0
        return sortDir.value === 'desc' ? bVal - aVal : aVal - bVal
    })
    return list
})

const toggleSort = (key) => {
    if (sortKey.value === key) {
        sortDir.value = sortDir.value === 'desc' ? 'asc' : 'desc'
    } else {
        sortKey.value = key
        sortDir.value = 'desc'
    }
}

// Trend chart
const trendMax = computed(() => ({
    cpu: Math.max(...props.trend_24h.map(h => h.cpu_avg), 1),
    mem: Math.max(...props.trend_24h.map(h => h.memory_avg_mb), 1),
    io: Math.max(...props.trend_24h.map(h => h.io_total_mbs), 1),
    mysql: Math.max(...props.trend_24h.map(h => h.mysql_qps), 1),
}))

const hoveredHour = ref(null)
const trendMetric = ref('cpu_avg')
const trendMetrics = [
    { key: 'cpu_avg', label: 'CPU %', color: 'bg-rose-500' },
    { key: 'memory_avg_mb', label: 'Bellek MB', color: 'bg-blue-500' },
    { key: 'io_total_mbs', label: 'IO MB/s', color: 'bg-amber-500' },
    { key: 'mysql_qps', label: 'MySQL QPS', color: 'bg-emerald-500' },
]
const activeTrendMeta = computed(() => trendMetrics.find(m => m.key === trendMetric.value))
const trendBarMax = computed(() => Math.max(...props.trend_24h.map(h => h[trendMetric.value]), 1))

// Status badge
const statusBadge = (status) => ({
    normal:   'bg-emerald-100 text-emerald-700 ring-1 ring-emerald-200',
    warning:  'bg-amber-100 text-amber-700 ring-1 ring-amber-200',
    critical: 'bg-red-100 text-red-700 ring-1 ring-red-200',
}[status] || 'bg-slate-100 text-slate-600')

// Progress bar color
const barColor = (pct) => pct > 90 ? 'bg-red-500' : pct > 70 ? 'bg-amber-500' : 'bg-emerald-500'
</script>

<template>
    <Head title="Kaynak Kullanımı" />

    <AdminLayout>
        <template #header>Kaynak Kullanımı</template>

        <!-- Server Specs Card -->
        <div class="mb-6 rounded-xl border border-slate-200 bg-white p-4 shadow-sm">
            <div class="flex flex-wrap items-center gap-x-6 gap-y-2">
                <div class="flex items-center gap-2">
                    <ServerStackIcon class="h-4 w-4 text-slate-400" />
                    <span class="font-mono text-sm font-semibold text-slate-700">{{ server_specs.hostname }}</span>
                </div>
                <div class="flex flex-wrap gap-x-5 gap-y-1 text-xs font-mono text-slate-500">
                    <span><span class="text-slate-400">CPU:</span> {{ server_specs.cpu_cores }} çekirdek</span>
                    <span><span class="text-slate-400">RAM:</span> {{ server_specs.memory_gb }} GB</span>
                    <span><span class="text-slate-400">Depolama:</span> {{ server_specs.storage_gb }} GB</span>
                    <span><span class="text-slate-400">OS:</span> {{ server_specs.os }}</span>
                    <span><span class="text-slate-400">Uptime:</span> {{ server_specs.uptime }}</span>
                </div>
            </div>
        </div>

        <!-- Stats Row -->
        <div class="mb-6 grid grid-cols-2 gap-4 sm:grid-cols-3 lg:grid-cols-6">
            <!-- CPU Avg -->
            <div class="rounded-xl border border-slate-200 bg-white p-5 shadow-sm">
                <div class="flex items-center justify-between mb-2">
                    <span class="text-xs font-medium text-slate-500 uppercase tracking-wide">CPU Ort.</span>
                    <CpuChipIcon class="h-4 w-4 text-slate-400" />
                </div>
                <div class="text-2xl font-bold text-slate-900">{{ totals.cpu_total_percent }}<span class="text-base font-normal text-slate-500">%</span></div>
                <div class="mt-2 h-1.5 overflow-hidden rounded-full bg-slate-100">
                    <div :class="['h-full transition-all', barColor(totals.cpu_total_percent)]" :style="{ width: totals.cpu_total_percent + '%' }"></div>
                </div>
            </div>

            <!-- Memory -->
            <div class="rounded-xl border border-slate-200 bg-white p-5 shadow-sm">
                <div class="flex items-center justify-between mb-2">
                    <span class="text-xs font-medium text-slate-500 uppercase tracking-wide">Bellek</span>
                    <ServerStackIcon class="h-4 w-4 text-slate-400" />
                </div>
                <div class="text-2xl font-bold text-slate-900">{{ (totals.memory_total_mb / 1024).toFixed(1) }}<span class="text-base font-normal text-slate-500"> GB</span></div>
                <div class="text-xs text-slate-400 mt-1">/ {{ server_specs.memory_gb }} GB · %{{ totals.memory_total_pct }}</div>
                <div class="mt-2 h-1.5 overflow-hidden rounded-full bg-slate-100">
                    <div :class="['h-full transition-all', barColor(totals.memory_total_pct)]" :style="{ width: Math.min(totals.memory_total_pct, 100) + '%' }"></div>
                </div>
            </div>

            <!-- IO -->
            <div class="rounded-xl border border-slate-200 bg-white p-5 shadow-sm">
                <div class="flex items-center justify-between mb-2">
                    <span class="text-xs font-medium text-slate-500 uppercase tracking-wide">Disk G/Ç</span>
                    <BoltIcon class="h-4 w-4 text-slate-400" />
                </div>
                <div class="text-2xl font-bold text-slate-900">{{ (totals.io_total_read_mbs + totals.io_total_write_mbs).toFixed(0) }}<span class="text-base font-normal text-slate-500"> MB/s</span></div>
                <div class="text-xs text-slate-400 mt-1">↑ {{ totals.io_total_write_mbs }} · ↓ {{ totals.io_total_read_mbs }}</div>
            </div>

            <!-- MySQL QPS -->
            <div class="rounded-xl border border-slate-200 bg-white p-5 shadow-sm">
                <div class="flex items-center justify-between mb-2">
                    <span class="text-xs font-medium text-slate-500 uppercase tracking-wide">MySQL QPS</span>
                    <CircleStackIcon class="h-4 w-4 text-slate-400" />
                </div>
                <div class="text-2xl font-bold text-slate-900">{{ totals.mysql_qps_total }}<span class="text-base font-normal text-slate-500"> q/s</span></div>
            </div>

            <!-- Active Accounts -->
            <div class="rounded-xl border border-slate-200 bg-white p-5 shadow-sm">
                <div class="flex items-center justify-between mb-2">
                    <span class="text-xs font-medium text-slate-500 uppercase tracking-wide">Aktif Hesap</span>
                    <ArrowTrendingUpIcon class="h-4 w-4 text-slate-400" />
                </div>
                <div class="text-2xl font-bold text-emerald-600">{{ totals.active_accounts }}</div>
                <div class="text-xs text-slate-400 mt-1">toplam {{ accounts.length }} hesap</div>
            </div>

            <!-- Faulted 24h -->
            <div class="rounded-xl border border-slate-200 bg-white p-5 shadow-sm">
                <div class="flex items-center justify-between mb-2">
                    <span class="text-xs font-medium text-slate-500 uppercase tracking-wide">Hatalı (24s)</span>
                    <ExclamationCircleIcon class="h-4 w-4 text-amber-400" />
                </div>
                <div :class="['text-2xl font-bold', totals.faulted_24h > 0 ? 'text-red-600' : 'text-emerald-600']">{{ totals.faulted_24h }}</div>
                <div class="text-xs text-slate-400 mt-1">limit aşımı</div>
            </div>
        </div>

        <!-- 24h Trend Chart -->
        <div class="mb-6 rounded-xl border border-slate-200 bg-white p-5 shadow-sm">
            <div class="mb-4 flex flex-wrap items-center justify-between gap-3">
                <div class="flex items-center gap-2">
                    <ClockIcon class="h-4 w-4 text-slate-400" />
                    <span class="font-semibold text-slate-700">Son 24 Saat Trend</span>
                </div>
                <div class="flex gap-1">
                    <button
                        v-for="m in trendMetrics"
                        :key="m.key"
                        @click="trendMetric = m.key"
                        :class="['rounded-lg px-3 py-1 text-xs font-medium transition-colors',
                            trendMetric === m.key ? 'bg-slate-800 text-white' : 'bg-slate-100 text-slate-600 hover:bg-slate-200']"
                    >{{ m.label }}</button>
                </div>
            </div>

            <!-- Bar chart -->
            <div class="relative">
                <div class="flex items-end gap-px h-24">
                    <div
                        v-for="(bucket, i) in trend_24h"
                        :key="i"
                        class="relative flex-1 flex flex-col items-center group cursor-pointer"
                        @mouseenter="hoveredHour = i"
                        @mouseleave="hoveredHour = null"
                    >
                        <!-- Tooltip -->
                        <div
                            v-if="hoveredHour === i"
                            class="absolute bottom-full mb-2 z-10 whitespace-nowrap rounded-lg bg-slate-800 px-2 py-1.5 text-xs text-white shadow-lg"
                        >
                            <div class="font-semibold">{{ bucket.label }}</div>
                            <div>{{ activeTrendMeta?.label }}: {{ bucket[trendMetric] }}</div>
                        </div>
                        <div
                            :class="['w-full rounded-t transition-all', activeTrendMeta?.color, hoveredHour === i ? 'opacity-100' : 'opacity-75']"
                            :style="{ height: Math.max(2, Math.round(bucket[trendMetric] / trendBarMax * 88)) + 'px' }"
                        ></div>
                    </div>
                </div>
                <!-- X-axis labels (every 4h) -->
                <div class="flex mt-1">
                    <div
                        v-for="(bucket, i) in trend_24h"
                        :key="i"
                        class="flex-1 text-center"
                    >
                        <span v-if="i % 4 === 0" class="text-[9px] text-slate-400">{{ bucket.hour }}</span>
                    </div>
                </div>
            </div>
        </div>

        <!-- Top Consumers -->
        <div class="mb-6 rounded-xl border border-slate-200 bg-white p-5 shadow-sm">
            <div class="flex items-center gap-2 mb-4">
                <FireIcon class="h-4 w-4 text-rose-500" />
                <span class="font-semibold text-slate-700">En Çok Kullananlar (Top 10)</span>
            </div>
            <div class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-5">
                <!-- By CPU -->
                <div>
                    <div class="mb-2 flex items-center gap-1.5 text-xs font-semibold uppercase tracking-wide text-slate-500">
                        <CpuChipIcon class="h-3.5 w-3.5" /> CPU %
                    </div>
                    <table class="w-full">
                        <tbody class="divide-y divide-slate-50">
                            <tr v-for="(a, i) in top_consumers.by_cpu" :key="a.id" class="hover:bg-slate-50">
                                <td class="py-1 pr-2 text-xs text-slate-400 w-5">{{ i + 1 }}</td>
                                <td class="py-1 font-mono text-xs text-slate-800 truncate max-w-[80px]">{{ a.username }}</td>
                                <td class="py-1 text-right">
                                    <span :class="['text-xs font-medium', a.usage?.cpu_percent > 90 ? 'text-red-600' : a.usage?.cpu_percent > 70 ? 'text-amber-600' : 'text-slate-600']">
                                        {{ a.usage?.cpu_percent }}%
                                    </span>
                                </td>
                                <td class="py-1 pl-1">
                                    <Link :href="route('admin.resources.show', a.id)" class="text-indigo-500 hover:text-indigo-700">
                                        <EyeIcon class="h-3 w-3" />
                                    </Link>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>

                <!-- By Memory -->
                <div>
                    <div class="mb-2 flex items-center gap-1.5 text-xs font-semibold uppercase tracking-wide text-slate-500">
                        <ServerStackIcon class="h-3.5 w-3.5" /> Bellek MB
                    </div>
                    <table class="w-full">
                        <tbody class="divide-y divide-slate-50">
                            <tr v-for="(a, i) in top_consumers.by_memory" :key="a.id" class="hover:bg-slate-50">
                                <td class="py-1 pr-2 text-xs text-slate-400 w-5">{{ i + 1 }}</td>
                                <td class="py-1 font-mono text-xs text-slate-800 truncate max-w-[80px]">{{ a.username }}</td>
                                <td class="py-1 text-right text-xs font-medium text-slate-600">{{ a.usage?.memory_mb }}</td>
                                <td class="py-1 pl-1">
                                    <Link :href="route('admin.resources.show', a.id)" class="text-indigo-500 hover:text-indigo-700">
                                        <EyeIcon class="h-3 w-3" />
                                    </Link>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>

                <!-- By IO -->
                <div>
                    <div class="mb-2 flex items-center gap-1.5 text-xs font-semibold uppercase tracking-wide text-slate-500">
                        <BoltIcon class="h-3.5 w-3.5" /> IO MB/s
                    </div>
                    <table class="w-full">
                        <tbody class="divide-y divide-slate-50">
                            <tr v-for="(a, i) in top_consumers.by_io" :key="a.id" class="hover:bg-slate-50">
                                <td class="py-1 pr-2 text-xs text-slate-400 w-5">{{ i + 1 }}</td>
                                <td class="py-1 font-mono text-xs text-slate-800 truncate max-w-[80px]">{{ a.username }}</td>
                                <td class="py-1 text-right text-xs font-medium text-slate-600">{{ (a.usage?.io_read_mbs + a.usage?.io_write_mbs).toFixed(0) }}</td>
                                <td class="py-1 pl-1">
                                    <Link :href="route('admin.resources.show', a.id)" class="text-indigo-500 hover:text-indigo-700">
                                        <EyeIcon class="h-3 w-3" />
                                    </Link>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>

                <!-- By MySQL -->
                <div>
                    <div class="mb-2 flex items-center gap-1.5 text-xs font-semibold uppercase tracking-wide text-slate-500">
                        <CircleStackIcon class="h-3.5 w-3.5" /> MySQL q/dk
                    </div>
                    <table class="w-full">
                        <tbody class="divide-y divide-slate-50">
                            <tr v-for="(a, i) in top_consumers.by_mysql" :key="a.id" class="hover:bg-slate-50">
                                <td class="py-1 pr-2 text-xs text-slate-400 w-5">{{ i + 1 }}</td>
                                <td class="py-1 font-mono text-xs text-slate-800 truncate max-w-[80px]">{{ a.username }}</td>
                                <td class="py-1 text-right text-xs font-medium text-slate-600">{{ a.usage?.mysql_queries_per_min }}</td>
                                <td class="py-1 pl-1">
                                    <Link :href="route('admin.resources.show', a.id)" class="text-indigo-500 hover:text-indigo-700">
                                        <EyeIcon class="h-3 w-3" />
                                    </Link>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>

                <!-- By Faults -->
                <div>
                    <div class="mb-2 flex items-center gap-1.5 text-xs font-semibold uppercase tracking-wide text-slate-500">
                        <ExclamationCircleIcon class="h-3.5 w-3.5" /> Hata (24s)
                    </div>
                    <table class="w-full">
                        <tbody class="divide-y divide-slate-50">
                            <tr v-for="(a, i) in top_consumers.by_faults" :key="a.id" class="hover:bg-slate-50">
                                <td class="py-1 pr-2 text-xs text-slate-400 w-5">{{ i + 1 }}</td>
                                <td class="py-1 font-mono text-xs text-slate-800 truncate max-w-[80px]">{{ a.username }}</td>
                                <td class="py-1 text-right">
                                    <span :class="['text-xs font-medium', a.usage?.faults_24h > 0 ? 'text-red-600' : 'text-slate-400']">{{ a.usage?.faults_24h }}</span>
                                </td>
                                <td class="py-1 pl-1">
                                    <Link :href="route('admin.resources.show', a.id)" class="text-indigo-500 hover:text-indigo-700">
                                        <EyeIcon class="h-3 w-3" />
                                    </Link>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        <!-- Full Accounts Table -->
        <div class="rounded-xl border border-slate-200 bg-white shadow-sm overflow-hidden">
            <!-- Table toolbar -->
            <div class="flex flex-wrap items-center gap-3 border-b border-slate-100 bg-slate-50 px-4 py-3">
                <div class="flex items-center gap-2">
                    <ChartBarIcon class="h-4 w-4 text-slate-400" />
                    <span class="font-semibold text-slate-700 text-sm">Tüm Hesaplar</span>
                    <span class="rounded-full bg-slate-200 px-2 py-0.5 text-xs text-slate-600">{{ sortedAccounts.length }}</span>
                </div>
                <div class="ml-auto flex flex-wrap gap-2">
                    <input
                        v-model="search"
                        type="text"
                        placeholder="Kullanıcı veya domain ara..."
                        class="rounded-lg border border-slate-200 bg-white px-3 py-1.5 text-sm focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500"
                    />
                    <select v-model="filterStatus" class="rounded-lg border border-slate-200 bg-white px-3 py-1.5 text-sm focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500">
                        <option value="all">Tüm durumlar</option>
                        <option value="normal">Normal</option>
                        <option value="warning">Uyarı</option>
                        <option value="critical">Kritik</option>
                    </select>
                </div>
            </div>

            <div class="overflow-x-auto">
                <table class="min-w-full divide-y divide-slate-100">
                    <thead class="bg-slate-50 text-xs font-semibold uppercase tracking-wide text-slate-500">
                        <tr>
                            <th class="px-4 py-3 text-left">Kullanıcı</th>
                            <th class="px-4 py-3 text-left">Paket</th>
                            <th class="px-4 py-3 text-right cursor-pointer hover:text-slate-700" @click="toggleSort('cpu_percent')">
                                <span class="flex items-center justify-end gap-1">
                                    CPU% <ArrowUpIcon v-if="sortKey==='cpu_percent'" :class="['h-3 w-3', sortDir==='asc' ? 'rotate-180' : '']" />
                                </span>
                            </th>
                            <th class="px-4 py-3 text-right cursor-pointer hover:text-slate-700" @click="toggleSort('memory_mb')">
                                <span class="flex items-center justify-end gap-1">
                                    Bellek MB <ArrowUpIcon v-if="sortKey==='memory_mb'" :class="['h-3 w-3', sortDir==='asc' ? 'rotate-180' : '']" />
                                </span>
                            </th>
                            <th class="px-4 py-3 text-right">IO MB/s</th>
                            <th class="px-4 py-3 text-right cursor-pointer hover:text-slate-700" @click="toggleSort('entry_processes')">
                                <span class="flex items-center justify-end gap-1">
                                    Proses <ArrowUpIcon v-if="sortKey==='entry_processes'" :class="['h-3 w-3', sortDir==='asc' ? 'rotate-180' : '']" />
                                </span>
                            </th>
                            <th class="px-4 py-3 text-right cursor-pointer hover:text-slate-700" @click="toggleSort('mysql_queries_per_min')">
                                <span class="flex items-center justify-end gap-1">
                                    MySQL q/dk <ArrowUpIcon v-if="sortKey==='mysql_queries_per_min'" :class="['h-3 w-3', sortDir==='asc' ? 'rotate-180' : '']" />
                                </span>
                            </th>
                            <th class="px-4 py-3 text-right cursor-pointer hover:text-slate-700" @click="toggleSort('faults_24h')">
                                <span class="flex items-center justify-end gap-1">
                                    Hata (24s) <ArrowUpIcon v-if="sortKey==='faults_24h'" :class="['h-3 w-3', sortDir==='asc' ? 'rotate-180' : '']" />
                                </span>
                            </th>
                            <th class="px-4 py-3 text-center">Durum</th>
                            <th class="px-4 py-3"></th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-slate-50">
                        <tr v-if="sortedAccounts.length === 0">
                            <td colspan="10" class="px-4 py-8 text-center text-sm text-slate-400">Hesap bulunamadı.</td>
                        </tr>
                        <tr v-for="a in sortedAccounts" :key="a.id" class="hover:bg-slate-50 transition-colors">
                            <td class="px-4 py-2.5">
                                <div class="font-mono text-sm font-medium text-slate-900">{{ a.username }}</div>
                                <div class="text-xs text-slate-400">{{ a.primary_domain }}</div>
                            </td>
                            <td class="px-4 py-2.5 text-sm text-slate-600">{{ a.package?.name || '—' }}</td>
                            <td class="px-4 py-2.5 text-right">
                                <div class="flex items-center justify-end gap-2">
                                    <div class="h-1.5 w-14 overflow-hidden rounded-full bg-slate-100">
                                        <div :class="['h-full', barColor(a.usage?.cpu_percent)]" :style="{ width: a.usage?.cpu_percent + '%' }"></div>
                                    </div>
                                    <span class="text-xs font-medium text-slate-700 w-8 text-right">{{ a.usage?.cpu_percent }}%</span>
                                </div>
                            </td>
                            <td class="px-4 py-2.5 text-right">
                                <div class="flex items-center justify-end gap-2">
                                    <div class="h-1.5 w-14 overflow-hidden rounded-full bg-slate-100">
                                        <div :class="['h-full', barColor((a.usage?.memory_mb / a.usage?.memory_limit_mb) * 100)]"
                                             :style="{ width: Math.min((a.usage?.memory_mb / a.usage?.memory_limit_mb) * 100, 100) + '%' }"></div>
                                    </div>
                                    <span class="text-xs text-slate-700 w-12 text-right">{{ a.usage?.memory_mb }}</span>
                                </div>
                            </td>
                            <td class="px-4 py-2.5 text-right text-xs text-slate-700">
                                {{ (a.usage?.io_read_mbs + a.usage?.io_write_mbs).toFixed(0) }}
                            </td>
                            <td class="px-4 py-2.5 text-right text-xs text-slate-700">{{ a.usage?.entry_processes }}/{{ a.usage?.entry_processes_limit }}</td>
                            <td class="px-4 py-2.5 text-right text-xs text-slate-700">{{ a.usage?.mysql_queries_per_min }}</td>
                            <td class="px-4 py-2.5 text-right">
                                <span :class="['text-xs font-medium', a.usage?.faults_24h > 0 ? 'text-red-600' : 'text-slate-400']">
                                    {{ a.usage?.faults_24h }}
                                </span>
                            </td>
                            <td class="px-4 py-2.5 text-center">
                                <span :class="['inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium', statusBadge(a.usage?.status)]">
                                    {{ { normal: 'Normal', warning: 'Uyarı', critical: 'Kritik' }[a.usage?.status] }}
                                </span>
                            </td>
                            <td class="px-4 py-2.5 text-right">
                                <Link
                                    :href="route('admin.resources.show', a.id)"
                                    class="inline-flex items-center gap-1 rounded-lg border border-indigo-200 bg-indigo-50 px-2.5 py-1 text-xs font-medium text-indigo-700 hover:bg-indigo-100 transition-colors"
                                >
                                    <EyeIcon class="h-3.5 w-3.5" /> Detay
                                </Link>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>

        <!-- Phase note -->
        <div class="mt-4 flex items-start gap-2 rounded-lg bg-amber-50 border border-amber-200 px-4 py-3 text-xs text-amber-800">
            <InformationCircleIcon class="h-4 w-4 flex-shrink-0 mt-0.5" />
            <span><strong>Demo Verisi:</strong> Gösterilen değerler kullanıcı adından türetilen deterministik mock verilerdir. sysapi kurulduğunda cgroups v2 + LVE statistics entegre olur.</span>
        </div>
    </AdminLayout>
</template>
