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

@php
    $apiUsageService = app(\App\Domain\ApiUsage\Services\ApiUsageService::class);
    $overallStats = $apiUsageService->getOverallStats(7);
    $endpointStats = $apiUsageService->getEndpointStats(7, 5);
@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-chart-bar text-cyan-500 dark:text-cyan-400 mr-2"></i>
            API Kullanım İstatistikleri
        </h3>
        <a href="{{ route('api-usage.index') }}" class="text-sm text-indigo-600 dark:text-indigo-400 hover:text-indigo-800 dark:hover:text-indigo-300">
            Detay →
        </a>
    </div>
    
    <div class="grid grid-cols-2 gap-4 mb-4">
        <div>
            <p class="text-sm text-gray-500 dark:text-gray-400">Toplam İstek</p>
            <p class="text-2xl font-bold text-gray-900 dark:text-gray-100">{{ number_format($overallStats['total_requests'] ?? 0) }}</p>
        </div>
        <div>
            <p class="text-sm text-gray-500 dark:text-gray-400">Başarı Oranı</p>
            <p class="text-2xl font-bold text-green-600 dark:text-green-400">{{ number_format($overallStats['success_rate'] ?? 0, 1) }}%</p>
        </div>
    </div>
    
    <div class="space-y-2 flex-1 overflow-y-auto">
        <p class="text-xs font-semibold text-gray-700 dark:text-gray-300 mb-2">En Çok Kullanılan Endpoint'ler</p>
        @forelse($endpointStats as $endpoint)
        <div class="flex items-center justify-between py-2 border-b border-gray-200 dark:border-gray-700 last:border-0">
            <div class="flex-1 min-w-0">
                <p class="text-xs font-medium text-gray-900 dark:text-gray-100 truncate">{{ $endpoint['endpoint'] }}</p>
                <p class="text-xs text-gray-500 dark:text-gray-400">{{ $endpoint['method'] }}</p>
            </div>
            <div class="text-right">
                <p class="text-xs font-semibold text-gray-900 dark:text-gray-100">{{ number_format($endpoint['total_requests']) }}</p>
                <p class="text-xs text-gray-500 dark:text-gray-400">{{ number_format($endpoint['success_rate'], 1) }}%</p>
            </div>
        </div>
        @empty
        <div class="text-center py-4 text-gray-500 dark:text-gray-400">
            <i class="fas fa-chart-bar text-2xl mb-2"></i>
            <p class="text-xs">Henüz API kullanım verisi yok</p>
        </div>
        @endforelse
    </div>
</div>