@props(['settings' => [], 'sites' => collect(), 'totalSites' => 0, 'user' => null, 'stats' => []])

@php
    $queueSize = \Illuminate\Support\Facades\DB::table('jobs')->count();
    $failedJobs = \Illuminate\Support\Facades\DB::table('failed_jobs')->count();
    $securityAlerts = \App\Models\SecurityAlert::whereNull('resolved_at')->count();
    $pluginUpdates = \App\Models\PluginUpdate::where('update_available', true)->count();
    
    $healthScore = 100;
    if ($queueSize > 100) $healthScore -= 20;
    if ($failedJobs > 10) $healthScore -= 20;
    if ($securityAlerts > 5) $healthScore -= 20;
    if ($pluginUpdates > 20) $healthScore -= 20;
    
    $healthStatus = $healthScore >= 80 ? 'excellent' : ($healthScore >= 60 ? 'good' : ($healthScore >= 40 ? 'warning' : 'critical'));
    $healthColors = [
        'excellent' => ['bg' => 'bg-green-500', 'text' => 'text-green-600 dark:text-green-400'],
        'good' => ['bg' => 'bg-blue-500', 'text' => 'text-blue-600 dark:text-blue-400'],
        'warning' => ['bg' => 'bg-yellow-500', 'text' => 'text-yellow-600 dark:text-yellow-400'],
        'critical' => ['bg' => 'bg-red-500', 'text' => 'text-red-600 dark:text-red-400'],
    ];
    $healthLabels = [
        'excellent' => 'Mükemmel',
        'good' => 'İyi',
        'warning' => 'Uyarı',
        'critical' => 'Kritik',
    ];
@endphp

<div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6 h-full flex flex-col">
    <div class="flex items-center justify-between mb-4">
        <h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100">
            <i class="fas fa-heartbeat text-green-500 dark:text-green-400 mr-2"></i>
            Sistem Sağlığı
        </h3>
        <span class="px-2 py-1 text-xs rounded-full {{ $healthColors[$healthStatus]['text'] }} bg-opacity-10">
            {{ $healthLabels[$healthStatus] }}
        </span>
    </div>
    
    <div class="text-center mb-4">
        <div class="relative inline-flex items-center justify-center w-24 h-24">
            <svg class="transform -rotate-90 w-24 h-24">
                <circle cx="48" cy="48" r="40" stroke="currentColor" stroke-width="8" fill="none" class="text-gray-200 dark:text-gray-700"></circle>
                <circle cx="48" cy="48" r="40" stroke="currentColor" stroke-width="8" fill="none" 
                        stroke-dasharray="{{ 2 * pi() * 40 }}"
                        stroke-dashoffset="{{ 2 * pi() * 40 * (1 - $healthScore / 100) }}"
                        class="{{ $healthColors[$healthStatus]['text'] }} transition-all duration-500"></circle>
            </svg>
            <div class="absolute inset-0 flex items-center justify-center">
                <span class="text-2xl font-bold {{ $healthColors[$healthStatus]['text'] }}">{{ $healthScore }}</span>
            </div>
        </div>
    </div>
    
    <div class="space-y-2 text-xs">
        <div class="flex items-center justify-between">
            <span class="text-gray-600 dark:text-gray-400">Queue</span>
            <span class="font-semibold text-gray-900 dark:text-gray-100">{{ number_format($queueSize) }}</span>
        </div>
        <div class="flex items-center justify-between">
            <span class="text-gray-600 dark:text-gray-400">Başarısız İşler</span>
            <span class="font-semibold {{ $failedJobs > 0 ? 'text-red-600 dark:text-red-400' : 'text-gray-900 dark:text-gray-100' }}">{{ number_format($failedJobs) }}</span>
        </div>
        <div class="flex items-center justify-between">
            <span class="text-gray-600 dark:text-gray-400">Güvenlik Uyarıları</span>
            <span class="font-semibold {{ $securityAlerts > 0 ? 'text-yellow-600 dark:text-yellow-400' : 'text-gray-900 dark:text-gray-100' }}">{{ number_format($securityAlerts) }}</span>
        </div>
        <div class="flex items-center justify-between">
            <span class="text-gray-600 dark:text-gray-400">Plugin Güncellemeleri</span>
            <span class="font-semibold text-gray-900 dark:text-gray-100">{{ number_format($pluginUpdates) }}</span>
        </div>
    </div>
</div>