@extends($layout)

@section('title', 'مراقبة السيرفر')

@section('content')
<div class="min-h-screen bg-gradient-to-b from-slate-950 via-slate-900 to-slate-950 py-6">
    <div class="max-w-6xl mx-auto px-4 rtl text-white">

        {{-- هيدر --}}
        <div class="mb-6">
            <div class="flex items-center gap-3 mb-3">
                <div class="h-11 w-11 rounded-2xl bg-slate-800 flex items-center justify-center
                            ring-2 ring-emerald-500/60 shadow-lg shadow-emerald-500/30">
                    <i class="fa-solid fa-server text-emerald-400 text-xl"></i>
                </div>
                <div>
                    <h1 class="text-xl sm:text-2xl font-bold">مراقبة السيرفر (Realtime)</h1>
                    <p class="text-sm text-slate-300/80">
                        حالة المعالج، الذاكرة، التخزين، والترافيك مع مؤشر صحّة عام للسيرفر.
                    </p>
                </div>
            </div>

            <div class="grid gap-3 text-xs sm:text-sm text-slate-300 sm:grid-cols-3 grid-cols-1">
                <div class="flex flex-col">
                    <span class="text-slate-400">النظام</span>
                    <span class="font-medium">{{ $metrics['os'] ?? 'N/A' }}</span>
                </div>
                <div class="flex flex-col">
                    <span class="text-slate-400">Hostname</span>
                    <span class="font-medium">{{ $metrics['hostname'] ?? 'N/A' }}</span>
                </div>
                <div class="flex flex-col">
                    <span class="text-slate-400">IP السيرفر</span>
                    <span class="font-medium">{{ $metrics['server_ip'] ?? 'N/A' }}</span>
                </div>
            </div>
        </div>

        {{-- 🟢 استبيان / مؤشر صحّة السيرفر --}}
        @php $health = $metrics['health'] ?? ['score'=>null,'status'=>'unknown','label'=>'غير معروف','color'=>'gray']; @endphp

        <div class="mb-6 rounded-2xl border border-slate-700/80 bg-gradient-to-r
                    from-slate-900 via-slate-950 to-slate-900 p-4 sm:p-5 shadow-xl">
            <div class="flex flex-col sm:flex-row sm:items-center gap-4">
                <div class="flex items-center gap-3 flex-1">
                    <div class="h-12 w-12 rounded-2xl bg-slate-900 flex items-center justify-center
                                ring-2 ring-emerald-500/50 shadow-lg shadow-emerald-500/30">
                        <i class="fa-solid fa-gauge-high text-emerald-400 text-xl"></i>
                    </div>
                    <div class="flex flex-col gap-1">
                        <span class="text-xs text-slate-400">حالة السيرفر الآن</span>
                        <span id="metric-health-label"
                              class="text-sm sm:text-base font-semibold">
                            {{ $health['label'] }}
                        </span>
                        <span class="text-[11px] text-slate-400" id="metric-health-subtitle">
                            تقييم تقريبي مبني على CPU / RAM / Disk.
                        </span>
                    </div>
                </div>

                <div class="w-full sm:w-1/2">
                    <div class="flex items-center justify-between mb-1">
                        <span class="text-[11px] text-slate-400">Health Score</span>
                        <span id="metric-health-score"
                              class="text-sm font-semibold text-slate-100">
                            {{ $health['score'] !== null ? $health['score'].' / 100' : 'N/A' }}
                        </span>
                    </div>
                    <div class="h-2.5 w-full rounded-full bg-slate-800 overflow-hidden">
                        <div id="metric-health-bar"
                             class="h-full rounded-full transition-all duration-500"
                             style="width: {{ $health['score'] ?? 0 }}%;
                                    background: linear-gradient(to right,
                                        rgb(16 185 129),
                                        rgb(45 212 191));">
                        </div>
                    </div>
                    <div class="mt-1 text-[10px] text-slate-500" id="metric-last-update">
                        آخر تحديث عند تحميل الصفحة.
                    </div>
                </div>
            </div>
        </div>

        {{-- الكروت الرئيسية (CPU / RAM / Disk) --}}
        <div class="grid gap-4 md:grid-cols-3">

            {{-- CPU --}}
            <div class="rounded-2xl border border-slate-700/70 bg-gradient-to-br
                        from-slate-900 via-slate-950 to-slate-900 p-4 shadow-lg">
                <div class="flex items-center justify-between mb-3">
                    <div>
                        <p class="text-xs text-slate-400">CPU usage</p>
                        <p id="metric-cpu"
                           class="text-lg font-semibold text-purple-300">
                            {{ $metrics['cpu'] !== null ? $metrics['cpu'].' %' : 'N/A' }}
                        </p>
                    </div>
                    <i class="fa-solid fa-microchip text-2xl text-purple-300/90"></i>
                </div>
                <p class="text-[11px] text-slate-400">
                    القيمة تقريبية اعتمادًا على
                    <code class="text-xs text-slate-300">load average / عدد الأنوية</code>.
                </p>
            </div>

            {{-- Memory --}}
            <div class="rounded-2xl border border-slate-700/70 bg-gradient-to-br
                        from-slate-900 via-slate-950 to-slate-900 p-4 shadow-lg">
                <div class="flex items-center justify-between mb-3">
                    <div>
                        <p class="text-xs text-slate-400">Memory usage</p>
                        <p id="metric-mem-percent"
                           class="text-lg font-semibold text-sky-300">
                            @if(($metrics['memory']['percent'] ?? null) !== null)
                                {{ $metrics['memory']['percent'] }} %
                            @else
                                N/A
                            @endif
                        </p>
                    </div>
                    <i class="fa-solid fa-memory text-2xl text-sky-300/90"></i>
                </div>

                <div class="text-[11px] text-slate-300 space-y-0.5">
                    <p>إجمالي:
                        <span id="metric-mem-total">
                            {{ $metrics['memory']['total_gb'] ?? '—' }}
                        </span> GB
                    </p>
                    <p>مستخدم:
                        <span id="metric-mem-used">
                            {{ $metrics['memory']['used_gb'] ?? '—' }}
                        </span> GB
                    </p>
                    <p>متاح:
                        <span id="metric-mem-free">
                            {{ $metrics['memory']['free_gb'] ?? '—' }}
                        </span> GB
                    </p>
                </div>
            </div>

            {{-- Disk --}}
            <div class="rounded-2xl border border-slate-700/70 bg-gradient-to-br
                        from-slate-900 via-slate-950 to-slate-900 p-4 shadow-lg">
                <div class="flex items-center justify-between mb-3">
                    <div>
                        <p class="text-xs text-slate-400">Disk usage ( / )</p>
                        <p id="metric-disk-percent"
                           class="text-lg font-semibold text-amber-300">
                            @if(($metrics['disk']['percent'] ?? null) !== null)
                                {{ $metrics['disk']['percent'] }} %
                            @else
                                N/A
                            @endif
                        </p>
                    </div>
                    <i class="fa-solid fa-hard-drive text-2xl text-amber-300/90"></i>
                </div>

                <div class="text-[11px] text-slate-300 space-y-0.5">
                    <p>إجمالي:
                        <span id="metric-disk-total">
                            {{ $metrics['disk']['total_gb'] ?? '—' }}
                        </span> GB
                    </p>
                    <p>مستخدم:
                        <span id="metric-disk-used">
                            {{ $metrics['disk']['used_gb'] ?? '—' }}
                        </span> GB
                    </p>
                    <p>متاح:
                        <span id="metric-disk-free">
                            {{ $metrics['disk']['free_gb'] ?? '—' }}
                        </span> GB
                    </p>
                </div>
            </div>
        </div>

        {{-- Network + Uptime --}}
        <div class="mt-5 grid gap-4 md:grid-cols-2">
            <div class="rounded-2xl border border-slate-700/70 bg-slate-900/90 p-4 shadow-lg">
                <div class="flex items-center justify-between mb-3">
                    <div>
                        <p class="text-xs text-slate-400">Network traffic</p>
                        <p class="text-sm font-semibold text-emerald-300">
                            Interface:
                            <span id="metric-net-iface">
                                {{ $metrics['network']['iface'] ?? 'N/A' }}
                            </span>
                        </p>
                    </div>
                    <i class="fa-solid fa-wave-square text-2xl text-emerald-300/90"></i>
                </div>

                @if($metrics['network'])
                    <div class="grid grid-cols-3 gap-2 text-[11px] text-slate-300">
                        <div>
                            <p class="text-slate-400">Incoming</p>
                            <p id="metric-net-in" class="font-semibold">
                                {{ $metrics['network']['incoming_mb'] }} MB
                            </p>
                        </div>
                        <div>
                            <p class="text-slate-400">Outgoing</p>
                            <p id="metric-net-out" class="font-semibold">
                                {{ $metrics['network']['outgoing_mb'] }} MB
                            </p>
                        </div>
                        <div>
                            <p class="text-slate-400">Total</p>
                            <p id="metric-net-total" class="font-semibold">
                                {{ $metrics['network']['total_gb'] }} GB
                            </p>
                        </div>
                    </div>
                @else
                    <p class="text-[11px] text-slate-400">
                        تعذر قراءة بيانات الشبكة من ‎/sys/class/net‎.
                    </p>
                @endif
            </div>

            <div class="rounded-2xl border border-slate-700/70 bg-slate-900/90 p-4 shadow-lg">
                <div class="flex items-center justify-between mb-3">
                    <div>
                        <p class="text-xs text-slate-400">Uptime</p>
                        <p id="metric-uptime"
                           class="text-lg font-semibold text-emerald-300">
                            {{ $metrics['uptime'] ?? 'N/A' }}
                        </p>
                    </div>
                    <i class="fa-solid fa-clock-rotate-left text-2xl text-emerald-300/90"></i>
                </div>
                <p class="text-[11px] text-slate-400">
                    مدة عمل السيرفر منذ آخر إعادة تشغيل (من ‎/proc/uptime‎).
                </p>
            </div>
        </div>

    </div>
</div>

{{-- تحديث حي كل 10 ثواني --}}
<script>
document.addEventListener('DOMContentLoaded', () => {
    const url = "{{ route('server.monitor.status') }}";

    function setText(id, text) {
        const el = document.getElementById(id);
        if (el) el.textContent = text;
    }

    function setHealthBar(score, status) {
        const bar   = document.getElementById('metric-health-bar');
        const label = document.getElementById('metric-health-label');

        if (!bar) return;

        if (score === null || score === undefined) {
            bar.style.width = '0%';
            bar.style.background = 'linear-gradient(to right, rgb(148 163 184), rgb(148 163 184))';
            if (label && label.textContent.trim() === '') {
                label.textContent = 'غير معروف';
            }
            return;
        }

        const width = Math.max(0, Math.min(100, score));
        bar.style.width = width + '%';

        let gradient;
        if (status === 'danger') {
            gradient = 'linear-gradient(to right, rgb(248 113 113), rgb(239 68 68))'; // red
        } else if (status === 'warning') {
            gradient = 'linear-gradient(to right, rgb(251 191 36), rgb(245 158 11))'; // amber
        } else {
            gradient = 'linear-gradient(to right, rgb(16 185 129), rgb(45 212 191))'; // emerald
        }
        bar.style.background = gradient;
    }

    async function refreshMetrics() {
        try {
            const res = await fetch(url, { headers: { 'Accept': 'application/json' } });
            if (!res.ok) return;
            const data = await res.json();

            // CPU
            setText('metric-cpu', data.cpu !== null ? data.cpu + ' %' : 'N/A');

            // Memory
            if (data.memory) {
                setText('metric-mem-percent',
                    data.memory.percent !== null ? data.memory.percent + ' %' : 'N/A');
                setText('metric-mem-total',
                    data.memory.total_gb !== null ? data.memory.total_gb + ' GB' : '—');
                setText('metric-mem-used',
                    data.memory.used_gb !== null ? data.memory.used_gb + ' GB' : '—');
                setText('metric-mem-free',
                    data.memory.free_gb !== null ? data.memory.free_gb + ' GB' : '—');
            }

            // Disk
            if (data.disk) {
                setText('metric-disk-percent',
                    data.disk.percent !== null ? data.disk.percent + ' %' : 'N/A');
                setText('metric-disk-total',
                    data.disk.total_gb !== null ? data.disk.total_gb + ' GB' : '—');
                setText('metric-disk-used',
                    data.disk.used_gb !== null ? data.disk.used_gb + ' GB' : '—');
                setText('metric-disk-free',
                    data.disk.free_gb !== null ? data.disk.free_gb + ' GB' : '—');
            }

            // Network
            if (data.network) {
                setText('metric-net-iface', data.network.iface ?? 'N/A');
                setText('metric-net-in', data.network.incoming_mb + ' MB');
                setText('metric-net-out', data.network.outgoing_mb + ' MB');
                setText('metric-net-total', data.network.total_gb + ' GB');
            }

            // Uptime
            setText('metric-uptime', data.uptime ?? 'N/A');

            // Health
            if (data.health) {
                const score  = data.health.score ?? null;
                const status = data.health.status ?? 'unknown';
                const label  = data.health.label  ?? 'غير معروف';

                setText('metric-health-score',
                    score !== null ? (score + ' / 100') : 'N/A');
                setText('metric-health-label', label);
                setHealthBar(score, status);
            }

            // آخر تحديث
            const last = document.getElementById('metric-last-update');
            if (last) {
                const now = new Date();
                last.textContent = 'آخر تحديث: ' + now.toLocaleTimeString('ar-EG', {
                    hour: '2-digit', minute: '2-digit', second: '2-digit'
                });
            }
        } catch (e) {
            console.error('Server monitor error', e);
        }
    }

    // أول مرة
    refreshMetrics();
    // كل 10 ثواني
    setInterval(refreshMetrics, 10000);
});
</script>
@endsection