@extends('admin._layout')

@section('title', 'صحة النظام')

@push('head')
<style>
    .health-card { border: 0; box-shadow: 0 1px 3px rgba(15,23,42,.06); border-radius: .75rem; }
    .health-row {
        display: flex; align-items: center; gap: 1rem;
        padding: 1rem; border-bottom: 1px solid #f1f5f9;
    }
    .health-row:last-child { border-bottom: 0; }
    .health-row .indicator {
        width: 14px; height: 14px; border-radius: 50%; flex-shrink: 0;
    }
    .health-row .indicator.ok {
        background: #16a34a;
        box-shadow: 0 0 0 4px #dcfce7;
        animation: pulse 2s infinite;
    }
    .health-row .indicator.bad {
        background: #dc2626;
        box-shadow: 0 0 0 4px #fee2e2;
    }
    @keyframes pulse {
        0%, 100% { box-shadow: 0 0 0 4px #dcfce7; }
        50% { box-shadow: 0 0 0 8px #dcfce7; }
    }
    .health-row .meta { flex: 1; min-width: 0; }
    .health-row .label { font-weight: 600; }
    .health-row .detail { color: #64748b; font-size: .85rem; margin-top: .15rem; }
    .health-row .value { font-weight: 700; color: #0f172a; }

    .progress-thin { height: 6px; border-radius: 999px; overflow: hidden; background: #e2e8f0; }
    .progress-thin > span { display: block; height: 100%; }
</style>
@endpush

@section('content')
<div class="page-header">
    <div class="row align-items-center">
        <div class="col">
            <h2 class="page-title mb-1">صحة النظام</h2>
            <div class="text-muted small">فحوصات تشغيلية مباشرة · آخر تحديث: {{ now()->translatedFormat('h:i:s A') }}</div>
        </div>
        <div class="col-auto">
            <button class="btn btn-outline-primary" onclick="window.location.reload()">
                <i class="ti ti-refresh me-1"></i> تحديث
            </button>
        </div>
    </div>
</div>

<div class="row row-cards g-3">
    {{-- Connectivity --}}
    <div class="col-lg-6">
        <div class="card health-card">
            <div class="card-header"><h3 class="card-title mb-0"><i class="ti ti-database me-1"></i> الاتصال</h3></div>
            <div class="card-body p-0">
                <div class="health-row">
                    <span class="indicator {{ $checks['landlord_db']['ok'] ? 'ok' : 'bad' }}"></span>
                    <div class="meta">
                        <div class="label">قاعدة بيانات Landlord</div>
                        <div class="detail">
                            @if($checks['landlord_db']['ok'])
                                المضيف: <code>{{ config('database.connections.landlord.host') }}</code>
                            @else
                                {{ $checks['landlord_db']['error'] ?? 'تعذّر الاتصال' }}
                            @endif
                        </div>
                    </div>
                    @if($checks['landlord_db']['ok'])
                        <span class="value text-success">{{ $checks['landlord_db']['elapsed_ms'] }}ms</span>
                    @endif
                </div>

                <div class="health-row">
                    <span class="indicator {{ $checks['tenant_dbs']['ok'] ? 'ok' : 'bad' }}"></span>
                    <div class="meta">
                        <div class="label">قواعد بيانات العيادات</div>
                        <div class="detail">
                            {{ $checks['tenant_dbs']['reachable'] }} / {{ $checks['tenant_dbs']['total'] }}
                            عيادة متاحة (نشطة + تجريبية)
                        </div>
                    </div>
                    @if($checks['tenant_dbs']['ok'])
                        <span class="value text-success">{{ $checks['tenant_dbs']['reachable'] }}/{{ $checks['tenant_dbs']['total'] }}</span>
                    @else
                        <span class="value text-danger">{{ count($checks['tenant_dbs']['unreachable']) }} غير متاحة</span>
                    @endif
                </div>

                @if(! empty($checks['tenant_dbs']['unreachable']))
                    <div class="p-3" style="background:#fee2e2;">
                        <strong class="text-danger small">عيادات تعذّر الاتصال بقواعدها:</strong>
                        <ul class="mb-0 mt-2 small">
                            @foreach($checks['tenant_dbs']['unreachable'] as $u)
                                <li>
                                    <a href="{{ route('admin.clinics.show', $u['clinic']) }}">{{ $u['clinic']->name }}</a>
                                    — <code>{{ Str::limit($u['error'], 80) }}</code>
                                </li>
                            @endforeach
                        </ul>
                    </div>
                @endif
            </div>
        </div>
    </div>

    {{-- Sessions + Queue --}}
    <div class="col-lg-6">
        <div class="card health-card">
            <div class="card-header"><h3 class="card-title mb-0"><i class="ti ti-activity me-1"></i> الجلسات والمهام</h3></div>
            <div class="card-body p-0">
                <div class="health-row">
                    <span class="indicator {{ $checks['sessions']['ok'] ? 'ok' : 'bad' }}"></span>
                    <div class="meta">
                        <div class="label">الجلسات النشطة</div>
                        <div class="detail">
                            {{ $checks['sessions']['stale_24h'] ?? 0 }} جلسة قديمة (>24 ساعة)
                        </div>
                    </div>
                    <span class="value">{{ $checks['sessions']['total'] ?? 0 }}</span>
                </div>

                <div class="health-row">
                    <span class="indicator {{ $checks['queue']['ok'] ? 'ok' : 'bad' }}"></span>
                    <div class="meta">
                        <div class="label">طابور المهام</div>
                        <div class="detail">Driver: <code>{{ $checks['queue']['driver'] ?? 'unknown' }}</code></div>
                    </div>
                    <span class="value">{{ $checks['queue']['pending'] ?? 0 }} في الانتظار</span>
                </div>

                <div class="health-row">
                    <span class="indicator {{ $checks['failed_jobs']['ok'] ? 'ok' : 'bad' }}"></span>
                    <div class="meta">
                        <div class="label">المهام الفاشلة</div>
                        @if(($checks['failed_jobs']['total'] ?? 0) > 0)
                            <div class="detail">آخر فشل: {{ \Carbon\Carbon::parse($checks['failed_jobs']['latest'])->diffForHumans() }}</div>
                        @else
                            <div class="detail text-success">لا توجد مهام فاشلة 🎉</div>
                        @endif
                    </div>
                    <span class="value {{ ($checks['failed_jobs']['total'] ?? 0) > 0 ? 'text-danger' : 'text-success' }}">
                        {{ $checks['failed_jobs']['total'] ?? 0 }}
                    </span>
                </div>

                <div class="health-row">
                    <span class="indicator ok"></span>
                    <div class="meta">
                        <div class="label">المجدول (Scheduler)</div>
                        <div class="detail">
                            آخر نشاط عيادة: {{ $checks['scheduler']['last_active_clinic'] ?? '—' }}
                            <br>
                            آخر إيقاف تلقائي: {{ $checks['scheduler']['last_auto_expired'] ?? '—' }}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Storage --}}
    <div class="col-lg-6">
        <div class="card health-card">
            <div class="card-header"><h3 class="card-title mb-0"><i class="ti ti-database me-1"></i> التخزين</h3></div>
            <div class="card-body">
                @php
                    $storage = $checks['storage'];
                    $usedPct = $storage['used_pct'] ?? 0;
                    $color = $usedPct >= 90 ? 'danger' : ($usedPct >= 70 ? 'warning' : 'success');
                @endphp
                @if(isset($storage['used_pct']))
                    <div class="d-flex justify-content-between mb-2">
                        <strong>مساحة القرص</strong>
                        <span class="text-muted small">{{ $storage['free_gb'] }} GB متاحة من {{ $storage['total_gb'] }} GB</span>
                    </div>
                    <div class="progress-thin">
                        <span class="bg-{{ $color }}" style="width:{{ $usedPct }}%"></span>
                    </div>
                    <div class="text-end mt-1 small text-muted">{{ $usedPct }}% مستخدم</div>
                @else
                    <div class="text-muted small">{{ $storage['note'] ?? 'تعذّر قراءة معلومات القرص' }}</div>
                @endif
            </div>
        </div>
    </div>

    {{-- Application info --}}
    <div class="col-lg-6">
        <div class="card health-card">
            <div class="card-header"><h3 class="card-title mb-0"><i class="ti ti-info-circle me-1"></i> معلومات التطبيق</h3></div>
            <div class="card-body">
                <dl class="row mb-0">
                    <dt class="col-5 text-muted">إصدار PHP</dt>
                    <dd class="col-7"><code>{{ $app['php_version'] }}</code></dd>
                    <dt class="col-5 text-muted">إصدار Laravel</dt>
                    <dd class="col-7"><code>{{ $app['laravel_version'] }}</code></dd>
                    <dt class="col-5 text-muted">البيئة</dt>
                    <dd class="col-7">
                        <span class="badge bg-{{ $app['env'] === 'production' ? 'danger' : 'info' }}-lt text-{{ $app['env'] === 'production' ? 'danger' : 'info' }}">
                            {{ $app['env'] }}
                        </span>
                        @if($app['debug'])
                            <span class="badge bg-warning-lt text-warning ms-1">Debug ON</span>
                        @endif
                    </dd>
                    <dt class="col-5 text-muted">المنطقة الزمنية</dt>
                    <dd class="col-7">{{ $app['timezone'] }}</dd>
                    <dt class="col-5 text-muted">الآن</dt>
                    <dd class="col-7"><code>{{ $app['now'] }}</code></dd>
                </dl>
            </div>
        </div>
    </div>
</div>
@endsection