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

@php
    $performanceSnapshots = $performanceSnapshots ?? collect();
@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-tachometer-alt text-yellow-500 dark:text-yellow-400 mr-2"></i>
            Performans Özeti
        </h3>
    </div>
    
    @if($performanceSnapshots->count() > 0)
    <div class="space-y-3 flex-1">
        @foreach($performanceSnapshots->take(5) as $snapshot)
        <div class="border border-gray-200 dark:border-gray-700 rounded-lg p-3 hover:bg-gray-50 dark:hover:bg-gray-700 transition">
            <div class="flex items-center justify-between mb-2">
                <span class="text-sm font-medium text-gray-900 dark:text-gray-100">{{ $snapshot['site_name'] ?? 'Site' }}</span>
                <span class="text-xs text-gray-500 dark:text-gray-400">
                    {{ isset($snapshot['updated_at']) && $snapshot['updated_at'] ? (is_string($snapshot['updated_at']) ? \Carbon\Carbon::parse($snapshot['updated_at'])->format('d.m.Y') : $snapshot['updated_at']->format('d.m.Y')) : '-' }}
                </span>
            </div>
            <div class="grid grid-cols-2 gap-3 text-xs">
                @if(isset($snapshot['mobile_score']))
                <div>
                    <span class="text-gray-500 dark:text-gray-400">Mobil:</span>
                    <span class="font-semibold ml-1 {{ $snapshot['mobile_score'] < 50 ? 'text-red-600 dark:text-red-400' : ($snapshot['mobile_score'] < 65 ? 'text-orange-600 dark:text-orange-400' : ($snapshot['mobile_score'] < 80 ? 'text-yellow-600 dark:text-yellow-400' : 'text-green-600 dark:text-green-400')) }}">
                        {{ $snapshot['mobile_score'] }}/100
                    </span>
                </div>
                @endif
                @if(isset($snapshot['desktop_score']))
                <div>
                    <span class="text-gray-500 dark:text-gray-400">Desktop:</span>
                    <span class="font-semibold ml-1 {{ $snapshot['desktop_score'] < 50 ? 'text-red-600 dark:text-red-400' : ($snapshot['desktop_score'] < 65 ? 'text-orange-600 dark:text-orange-400' : ($snapshot['desktop_score'] < 80 ? 'text-yellow-600 dark:text-yellow-400' : 'text-green-600 dark:text-green-400')) }}">
                        {{ $snapshot['desktop_score'] }}/100
                    </span>
                </div>
                @endif
            </div>
        </div>
        @endforeach
    </div>
    @else
    <div class="text-center py-8 text-gray-500 dark:text-gray-400 flex-1 flex flex-col items-center justify-center">
        <i class="fas fa-chart-line text-3xl mb-2"></i>
        <p class="text-sm">Henüz performans verisi yok</p>
    </div>
    @endif
</div>