@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();
    $isHealthy = $queueSize < 100 && $failedJobs < 10;
@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-tasks text-pink-500 dark:text-pink-400 mr-2"></i>
            Queue Durumu
        </h3>
        @if($isHealthy)
        <span class="px-2 py-1 text-xs rounded-full bg-green-100 dark:bg-green-900/30 text-green-800 dark:text-green-300">
            <i class="fas fa-check-circle"></i> Sağlıklı
        </span>
        @else
        <span class="px-2 py-1 text-xs rounded-full bg-red-100 dark:bg-red-900/30 text-red-800 dark:text-red-300">
            <i class="fas fa-exclamation-circle"></i> Dikkat
        </span>
        @endif
    </div>
    
    <div class="space-y-3">
        <div>
            <div class="flex items-center justify-between mb-1">
                <p class="text-sm text-gray-500 dark:text-gray-400">Bekleyen İşler</p>
                <p class="text-lg font-bold text-gray-900 dark:text-gray-100">{{ number_format($queueSize) }}</p>
            </div>
            <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2">
                <div class="bg-indigo-600 dark:bg-indigo-500 h-2 rounded-full" style="width: {{ min(($queueSize / 100) * 100, 100) }}%"></div>
            </div>
        </div>
        
        <div>
            <div class="flex items-center justify-between mb-1">
                <p class="text-sm text-gray-500 dark:text-gray-400">Başarısız İşler</p>
                <p class="text-lg font-bold {{ $failedJobs > 0 ? 'text-red-600 dark:text-red-400' : 'text-gray-900 dark:text-gray-100' }}">{{ number_format($failedJobs) }}</p>
            </div>
        </div>
    </div>
</div>