@extends('layouts.app')
@section('title', 'Admin — Statut système')
@section('page-title', 'Admin — Statut système')

@php
function fmtBytes($bytes, $dec = 1) {
    if ($bytes <= 0) return '0 o';
    $units = ['o','Ko','Mo','Go','To'];
    $i = floor(log($bytes, 1024));
    return round($bytes / pow(1024, $i), $dec) . ' ' . $units[$i];
}
@endphp

@push('styles')
<style>
.st-grid    { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:20px; }
.st-grid-2  { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:16px; }
.st-grid-3  { display:grid; grid-template-columns:1fr 1fr 1fr; gap:16px; margin-bottom:16px; }

/* Carte KPI */
.kpi-card { background:#fff; border-radius:12px; border:1px solid var(--border); padding:18px 20px; display:flex; align-items:center; gap:14px; }
.kpi-icon { width:44px; height:44px; border-radius:10px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.kpi-val  { font-size:24px; font-weight:800; color:var(--navy); line-height:1; }
.kpi-label{ font-size:12px; font-weight:700; color:var(--text-muted); margin-top:3px; }
.kpi-sub  { font-size:11px; font-weight:600; color:var(--text-muted); margin-top:2px; }

/* Carte section */
.st-card { background:#fff; border-radius:12px; border:1px solid var(--border); overflow:hidden; }
.st-card-header { background:#F4F6FB; padding:12px 18px; border-bottom:1.5px solid var(--border); display:flex; align-items:center; gap:9px; }
.st-card-header span { font-size:11px; font-weight:800; color:var(--navy); text-transform:uppercase; letter-spacing:.07em; }
.st-card-body { padding:16px 18px; }

/* Lignes info */
.st-row { display:flex; align-items:center; justify-content:space-between; padding:7px 0; border-bottom:1px solid var(--border); font-size:13px; }
.st-row:last-child { border-bottom:none; }
.st-key { font-weight:700; color:var(--text-muted); }
.st-val { font-weight:700; color:var(--text); font-family:monospace; font-size:12px; }
.st-val.ok  { color:#38A169; }
.st-val.err { color:#E53E3E; }
.st-val.warn{ color:#D69E2E; }

/* Jauge */
.gauge-wrap { margin-top:12px; }
.gauge-label { display:flex; justify-content:space-between; font-size:12px; font-weight:700; color:var(--text-muted); margin-bottom:6px; }
.gauge-bar { height:10px; background:#F4F6FB; border-radius:99px; overflow:hidden; border:1px solid var(--border); }
.gauge-fill { height:100%; border-radius:99px; transition:width .6s ease; }

/* Badge ext */
.ext-badge { display:inline-flex; align-items:center; gap:4px; padding:3px 10px; border-radius:20px; font-size:11px; font-weight:700; margin:2px; }
.ext-ok  { background:#F0FFF4; color:#276749; border:1px solid #9AE6B4; }
.ext-err { background:#FFF5F5; color:#C53030; border:1px solid #FEB2B2; }

/* Badge env */
.env-pill { display:inline-block; padding:2px 10px; border-radius:20px; font-size:11px; font-weight:800; }
.env-local      { background:#EBF8FF; color:#2B6CB0; }
.env-production { background:#FFF5F5; color:#C53030; }
.env-staging    { background:#FFFFF0; color:#D69E2E; }

/* Statut global */
.status-ok   { color:#38A169; }
.status-warn { color:#D69E2E; }
.status-err  { color:#E53E3E; }

/* Refresh */
.refresh-btn { background:var(--navy); color:#fff; border:none; border-radius:20px; padding:7px 18px; font-family:'Nunito',sans-serif; font-size:12px; font-weight:700; cursor:pointer; display:inline-flex; align-items:center; gap:6px; text-decoration:none; }
.refresh-btn:hover { background:var(--navy-light); }
.last-update { font-size:12px; font-weight:600; color:var(--text-muted); }
@keyframes pulse {
    0%,100% { opacity:1; transform:scale(1); }
    50%      { opacity:.5; transform:scale(1.4); }
}
</style>
@endpush

@section('content')

{{-- Toolbar --}}
<div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;">
    <span class="last-update">Dernière actualisation : {{ now()->format('d/m/Y à H:i:s') }}</span>
    <a href="{{ route('admin.status.index') }}" class="refresh-btn">
        <svg viewBox="0 0 24 24" style="width:13px;height:13px;stroke:#fff;fill:none;stroke-width:2.5;stroke-linecap:round;"><polyline points="23 4 23 10 17 10"/><path d="M20.49 15a9 9 0 11-2.12-9.36L23 10"/></svg>
        Actualiser
    </a>
</div>

{{-- ══ KPI Utilisateurs ══ --}}
<div class="st-grid">
    <div class="kpi-card">
        <div class="kpi-icon" style="background:#EEF2FF;">
            <svg viewBox="0 0 24 24" style="width:22px;height:22px;stroke:var(--navy);fill:none;stroke-width:2;stroke-linecap:round;"><path d="M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 00-3-3.87"/><path d="M16 3.13a4 4 0 010 7.75"/></svg>
        </div>
        <div>
            <div class="kpi-val">{{ $users['total'] }}</div>
            <div class="kpi-label">Utilisateurs total</div>
        </div>
    </div>
    <div class="kpi-card" style="border-color:{{ $users['online'] > 0 ? '#9AE6B4' : 'var(--border)' }};">
        <div class="kpi-icon" style="background:#F0FFF4;position:relative;">
            <svg viewBox="0 0 24 24" style="width:22px;height:22px;stroke:#38A169;fill:none;stroke-width:2;stroke-linecap:round;"><path d="M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2"/><circle cx="9" cy="7" r="4"/></svg>
            {{-- Point vert clignotant --}}
            @if($users['online'] > 0)
            <span style="position:absolute;top:6px;right:6px;width:8px;height:8px;background:#38A169;border-radius:50%;animation:pulse 2s infinite;"></span>
            @endif
        </div>
        <div>
            <div class="kpi-val" style="color:#38A169;">{{ $users['online'] }}</div>
            <div class="kpi-label">En ligne maintenant</div>
            <div class="kpi-sub">{{ $users['actifs'] }} actifs / {{ $users['total'] }} total</div>
        </div>
    </div>
    <div class="kpi-card">
        <div class="kpi-icon" style="background:#FFF5F5;">
            <svg viewBox="0 0 24 24" style="width:22px;height:22px;stroke:#E53E3E;fill:none;stroke-width:2;stroke-linecap:round;"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
        </div>
        <div>
            <div class="kpi-val" style="color:#E53E3E;">{{ $users['admins'] }}</div>
            <div class="kpi-label">Administrateurs</div>
        </div>
    </div>
    <div class="kpi-card" style="border-color:{{ $db['ok'] ? '#9AE6B4' : '#FEB2B2' }};">
        <div class="kpi-icon" style="background:{{ $db['ok'] ? '#F0FFF4' : '#FFF5F5' }};">
            <svg viewBox="0 0 24 24" style="width:22px;height:22px;stroke:{{ $db['ok'] ? '#38A169' : '#E53E3E' }};fill:none;stroke-width:2;stroke-linecap: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>
            <div class="kpi-val" style="color:{{ $db['ok'] ? '#38A169' : '#E53E3E' }};">{{ $db['ok'] ? 'OK' : 'ERR' }}</div>
            <div class="kpi-label">Base de données</div>
            <div class="kpi-sub">{{ $db['tables'] }} table(s)</div>
        </div>
    </div>
</div>

{{-- ══ Mémoire + Disque ══ --}}
<div class="st-grid-2">
    {{-- Mémoire --}}
    <div class="st-card">
        <div class="st-card-header">
            <svg viewBox="0 0 24 24" style="width:15px;height:15px;stroke:var(--navy);fill:none;stroke-width:2;stroke-linecap:round;"><rect x="2" y="7" width="20" height="10" rx="2"/><path d="M6 7V5m4 2V5m4 2V5m4 2V5"/></svg>
            <span>Mémoire PHP</span>
        </div>
        <div class="st-card-body">
            <div class="st-row">
                <span class="st-key">Limite configurée</span>
                <span class="st-val">{{ $memory['limit_str'] }}</span>
            </div>
            <div class="st-row">
                <span class="st-key">Utilisée (script)</span>
                <span class="st-val {{ $memory['percent'] > 80 ? 'err' : ($memory['percent'] > 60 ? 'warn' : 'ok') }}">{{ fmtBytes($memory['used']) }}</span>
            </div>
            <div class="st-row">
                <span class="st-key">Pic d'utilisation</span>
                <span class="st-val">{{ fmtBytes($memory['peak']) }}</span>
            </div>
            <div class="gauge-wrap">
                <div class="gauge-label">
                    <span>Utilisation mémoire</span>
                    <span style="color:{{ $memory['percent'] > 80 ? '#E53E3E' : ($memory['percent'] > 60 ? '#D69E2E' : '#38A169') }};">{{ $memory['percent'] }}%</span>
                </div>
                <div class="gauge-bar">
                    <div class="gauge-fill" style="width:{{ $memory['percent'] }}%;background:{{ $memory['percent'] > 80 ? '#E53E3E' : ($memory['percent'] > 60 ? '#D69E2E' : '#48BB78') }};"></div>
                </div>
            </div>
        </div>
    </div>

    {{-- Disque --}}
    <div class="st-card">
        <div class="st-card-header">
            <svg viewBox="0 0 24 24" style="width:15px;height:15px;stroke:var(--navy);fill:none;stroke-width:2;stroke-linecap:round;"><ellipse cx="12" cy="12" rx="10" ry="6"/><path d="M2 12v6c0 3.31 4.48 6 10 6s10-2.69 10-6v-6"/></svg>
            <span>Espace disque</span>
        </div>
        <div class="st-card-body">
            <div class="st-row">
                <span class="st-key">Espace total</span>
                <span class="st-val">{{ fmtBytes($disk['total']) }}</span>
            </div>
            <div class="st-row">
                <span class="st-key">Utilisé</span>
                <span class="st-val {{ $disk['percent'] > 90 ? 'err' : ($disk['percent'] > 75 ? 'warn' : '') }}">{{ fmtBytes($disk['used']) }}</span>
            </div>
            <div class="st-row">
                <span class="st-key">Disponible</span>
                <span class="st-val ok">{{ fmtBytes($disk['free']) }}</span>
            </div>
            <div class="gauge-wrap">
                <div class="gauge-label">
                    <span>Occupation disque</span>
                    <span style="color:{{ $disk['percent'] > 90 ? '#E53E3E' : ($disk['percent'] > 75 ? '#D69E2E' : '#38A169') }};">{{ $disk['percent'] }}%</span>
                </div>
                <div class="gauge-bar">
                    <div class="gauge-fill" style="width:{{ $disk['percent'] }}%;background:{{ $disk['percent'] > 90 ? '#E53E3E' : ($disk['percent'] > 75 ? '#D69E2E' : '#48BB78') }};"></div>
                </div>
            </div>
        </div>
    </div>
</div>

{{-- ══ PHP + BDD + Laravel ══ --}}
<div class="st-grid-3">
    {{-- PHP --}}
    <div class="st-card">
        <div class="st-card-header">
            <svg viewBox="0 0 24 24" style="width:15px;height:15px;stroke:var(--navy);fill:none;stroke-width:2;stroke-linecap:round;"><polyline points="16 18 22 12 16 6"/><polyline points="8 6 2 12 8 18"/></svg>
            <span>PHP</span>
        </div>
        <div class="st-card-body">
            <div class="st-row">
                <span class="st-key">Version</span>
                <span class="st-val ok">{{ $php['version'] }}</span>
            </div>
            <div class="st-row">
                <span class="st-key">Système</span>
                <span class="st-val">{{ $php['os'] }}</span>
            </div>
            <div class="st-row">
                <span class="st-key">Interface</span>
                <span class="st-val">{{ $php['sapi'] }}</span>
            </div>
            <div style="margin-top:10px;">
                <div style="font-size:11px;font-weight:700;color:var(--text-muted);margin-bottom:6px;">Extensions</div>
                @foreach($php['extensions'] as $ext)
                <span class="ext-badge {{ $ext['ok'] ? 'ext-ok' : 'ext-err' }}">
                    {{ $ext['ok'] ? '✓' : '✗' }} {{ $ext['name'] }}
                </span>
                @endforeach
            </div>
        </div>
    </div>

    {{-- Base de données --}}
    <div class="st-card">
        <div class="st-card-header">
            <svg viewBox="0 0 24 24" style="width:15px;height:15px;stroke:var(--navy);fill:none;stroke-width:2;stroke-linecap: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>
            <span>Base de données</span>
        </div>
        <div class="st-card-body">
            <div class="st-row">
                <span class="st-key">Connexion</span>
                <span class="st-val {{ $db['ok'] ? 'ok' : 'err' }}">{{ $db['ok'] ? '✓ Connecté' : '✗ Erreur' }}</span>
            </div>
            <div class="st-row">
                <span class="st-key">Driver</span>
                <span class="st-val">{{ strtoupper($db['driver']) }}</span>
            </div>
            <div class="st-row">
                <span class="st-key">Base</span>
                <span class="st-val">{{ basename($db['name']) }}</span>
            </div>
            <div class="st-row">
                <span class="st-key">Version</span>
                <span class="st-val">{{ $db['version'] }}</span>
            </div>
            <div class="st-row">
                <span class="st-key">Tables</span>
                <span class="st-val">{{ $db['tables'] }}</span>
            </div>
            @if(!empty($db['error']))
            <div style="margin-top:8px;padding:8px;background:#FFF5F5;border-radius:6px;font-size:11px;color:#C53030;font-weight:600;">
                {{ $db['error'] }}
            </div>
            @endif
        </div>
    </div>

    {{-- Laravel --}}
    <div class="st-card">
        <div class="st-card-header">
            <svg viewBox="0 0 24 24" style="width:15px;height:15px;stroke:var(--navy);fill:none;stroke-width:2;stroke-linecap: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>Laravel</span>
        </div>
        <div class="st-card-body">
            <div class="st-row">
                <span class="st-key">Version</span>
                <span class="st-val ok">{{ $laravel['version'] }}</span>
            </div>
            <div class="st-row">
                <span class="st-key">Environnement</span>
                <span class="env-pill env-{{ $laravel['env'] }}">{{ $laravel['env'] }}</span>
            </div>
            <div class="st-row">
                <span class="st-key">Debug</span>
                <span class="st-val {{ $laravel['debug'] ? 'warn' : 'ok' }}">{{ $laravel['debug'] ? '⚠ Activé' : '✓ Désactivé' }}</span>
            </div>
            <div class="st-row">
                <span class="st-key">Timezone</span>
                <span class="st-val">{{ $laravel['timezone'] }}</span>
            </div>
            <div class="st-row">
                <span class="st-key">Cache</span>
                <span class="st-val">{{ $laravel['cache'] }}</span>
            </div>
            <div class="st-row">
                <span class="st-key">Queue</span>
                <span class="st-val">{{ $laravel['queue'] }}</span>
            </div>
        </div>
    </div>
</div>

@endsection