@extends('layouts.app')

@section('title', $site->name . ' - AI Performans Agent')

@section('content')
<div class="px-4 sm:px-6 lg:px-8">
    <!-- Header -->
    <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 mb-6">
        <div>
            <h1 class="text-2xl sm:text-3xl font-bold text-gray-900 flex items-center gap-2">
                <span class="inline-flex items-center justify-center w-10 h-10 rounded-lg bg-gradient-to-br from-indigo-500 to-purple-600 text-white">
                    <i class="fas fa-robot"></i>
                </span>
                {{ $site->name }} - AI Performans Agent
            </h1>
            <p class="mt-2 text-sm text-gray-600">
                <i class="fas fa-link text-gray-400 mr-1"></i>
                <a href="{{ $site->url }}" target="_blank" class="text-indigo-600 hover:text-indigo-800 font-medium">{{ $site->url }}</a>
            </p>
        </div>
        <div class="flex flex-wrap items-center gap-2">
            <form action="{{ route('sites.run-performance-agent', $site) }}" method="POST" class="inline" id="start-agent-form">
                @csrf
                <button type="submit" id="start-agent-btn"
                    class="inline-flex items-center gap-2 rounded-lg bg-gradient-to-r from-indigo-600 to-purple-600 px-4 py-2.5 text-sm font-semibold text-white shadow-lg shadow-indigo-500/30 hover:from-indigo-700 hover:to-purple-700 transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed">
                    <i class="fas fa-play" id="start-agent-icon"></i>
                    <span id="start-agent-text">Agent'i Başlat</span>
                </button>
            </form>
            <a href="{{ route('sites.show', $site) }}"
                class="inline-flex items-center gap-2 rounded-lg border-2 border-gray-200 bg-white px-4 py-2.5 text-sm font-semibold text-gray-700 hover:border-gray-300 hover:bg-gray-50 transition">
                <i class="fas fa-arrow-left"></i>
                <span class="hidden sm:inline">Site Detayına Dön</span>
                <span class="sm:hidden">Geri</span>
            </a>
        </div>
    </div>

    @if(session('success') || session('warning') || session('error'))
        <div class="mt-4">
            @foreach (['success' => 'emerald', 'warning' => 'amber', 'error' => 'rose'] as $type => $color)
                @if (session($type))
                    <div class="rounded-xl border border-{{ $color }}-100 bg-{{ $color }}-50 px-4 py-3 text-sm text-{{ $color }}-700 flex items-center gap-2">
                        <i class="fas fa-info-circle"></i>
                        <span>{{ session($type) }}</span>
                    </div>
                @endif
            @endforeach
        </div>
    @endif

    <!-- Optimizasyon Bilgilendirme -->
    <div class="mt-6 space-y-4">
        <!-- Ana Bilgilendirme -->
        <div class="rounded-xl border-2 border-indigo-200 bg-gradient-to-br from-indigo-50 to-purple-50 px-5 py-4 shadow-md">
            <div class="flex items-start gap-3">
                <div class="flex-shrink-0 mt-0.5">
                    <div class="w-8 h-8 rounded-lg bg-indigo-500 flex items-center justify-center">
                        <i class="fas fa-info-circle text-white text-sm"></i>
                    </div>
                </div>
                <div class="flex-1">
                    <h3 class="font-bold text-indigo-900 mb-2 flex items-center gap-2">
                        <i class="fas fa-mobile-alt"></i>
                        Mobil Performans Odaklı Optimizasyon
                    </h3>
                    <p class="text-sm text-indigo-800 leading-relaxed">
                        Agent, <strong>mobil performans odaklı</strong> optimizasyon kararı verir ve uygular. AI, mobil FCP ve mobil skorları analiz ederek mobil için özel optimizasyonlar (görsel optimizasyonu, critical CSS, lazy loading, font optimizasyonu) önerebilir. Yeni performans analizi için lütfen manuel olarak "Performans Analizini Başlat" butonunu kullanın (cache'in yeniden oluşması için en az 10-15 dakika bekleyin).
                    </p>
                </div>
            </div>
        </div>

        <!-- Kritik Uyarı -->
        <div class="rounded-xl border-2 border-red-200 bg-gradient-to-br from-red-50 to-rose-50 px-5 py-4 shadow-md">
            <div class="flex items-start gap-3">
                <div class="flex-shrink-0 mt-0.5">
                    <div class="w-8 h-8 rounded-lg bg-red-500 flex items-center justify-center">
                        <i class="fas fa-exclamation-triangle text-white text-sm"></i>
                    </div>
                </div>
                <div class="flex-1">
                    <h3 class="font-bold text-red-900 mb-2 flex items-center gap-2">
                        <i class="fas fa-exclamation-circle"></i>
                        KRİTİK UYARI
                    </h3>
                    <p class="text-sm text-red-800 leading-relaxed">
                        Şu anda optimizasyonlar sadece cache purge olarak uygulanıyor. Cache purge performansı <strong>ARTIRMAZ</strong>, sadece cache'i temizler. Bu yüzden performans <strong>KÖTÜLEŞEBİLİR</strong> çünkü cache temizlenince ilk yükleme yavaş olur. Gerçek mobil optimizasyonlar (görsel optimizasyonu, critical CSS, lazy loading, font optimizasyonu) ve LiteSpeed Cache optimizasyonları için GSP Connector eklentisinde ilgili metodların eklenmesi gerekmektedir.
                    </p>
                </div>
            </div>
        </div>

        <!-- Öneri -->
        <div class="rounded-xl border-2 border-amber-200 bg-gradient-to-br from-amber-50 to-yellow-50 px-5 py-4 shadow-md">
            <div class="flex items-start gap-3">
                <div class="flex-shrink-0 mt-0.5">
                    <div class="w-8 h-8 rounded-lg bg-amber-500 flex items-center justify-center">
                        <i class="fas fa-lightbulb text-white text-sm"></i>
                    </div>
                </div>
                <div class="flex-1">
                    <h3 class="font-bold text-amber-900 mb-2 flex items-center gap-2">
                        <i class="fas fa-info-circle"></i>
                        Öneri
                    </h3>
                    <p class="text-sm text-amber-800 leading-relaxed">
                        Mobil performans sorunları ciddi değilse (<strong>Mobil FCP < 2.5s VE Mobil Score >= 65</strong>), agent'i çalıştırmayın. Sadece ciddi mobil performans sorunlarında (<strong>Mobil FCP > 3.0s veya Mobil Score < 50</strong>) kullanın.
                    </p>
                </div>
            </div>
        </div>
    </div>

    <!-- İstatistikler -->
    <div class="mt-6 grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
        <div class="bg-gradient-to-br from-indigo-50 to-indigo-100 rounded-xl shadow-md border border-indigo-200 p-5 hover:shadow-lg transition-shadow">
            <div class="flex items-center justify-between">
                <div class="flex-1">
                    <p class="text-xs font-medium text-indigo-700 uppercase tracking-wide">Toplam Çalıştırma</p>
                    <p class="mt-2 text-3xl font-bold text-indigo-900">{{ $stats['total'] }}</p>
                    <p class="mt-1 text-xs text-indigo-600">Tüm zamanlar</p>
                </div>
                <div class="rounded-xl bg-indigo-500 p-3 shadow-lg">
                    <i class="fas fa-list text-white text-xl"></i>
                </div>
            </div>
        </div>

        <div class="bg-gradient-to-br from-emerald-50 to-emerald-100 rounded-xl shadow-md border border-emerald-200 p-5 hover:shadow-lg transition-shadow">
            <div class="flex items-center justify-between">
                <div class="flex-1">
                    <p class="text-xs font-medium text-emerald-700 uppercase tracking-wide">Başarılı</p>
                    <p class="mt-2 text-3xl font-bold text-emerald-900">{{ $stats['completed'] }}</p>
                    <p class="mt-1 text-xs text-emerald-600">
                        @if($stats['total'] > 0)
                            {{ round(($stats['completed'] / $stats['total']) * 100, 1) }}% başarı oranı
                        @else
                            Henüz veri yok
                        @endif
                    </p>
                </div>
                <div class="rounded-xl bg-emerald-500 p-3 shadow-lg">
                    <i class="fas fa-check-circle text-white text-xl"></i>
                </div>
            </div>
        </div>

        <div class="bg-gradient-to-br from-rose-50 to-rose-100 rounded-xl shadow-md border border-rose-200 p-5 hover:shadow-lg transition-shadow">
            <div class="flex items-center justify-between">
                <div class="flex-1">
                    <p class="text-xs font-medium text-rose-700 uppercase tracking-wide">Başarısız</p>
                    <p class="mt-2 text-3xl font-bold text-rose-900">{{ $stats['failed'] }}</p>
                    <p class="mt-1 text-xs text-rose-600">
                        @if($stats['total'] > 0)
                            {{ round(($stats['failed'] / $stats['total']) * 100, 1) }}% hata oranı
                        @else
                            Henüz veri yok
                        @endif
                    </p>
                </div>
                <div class="rounded-xl bg-rose-500 p-3 shadow-lg">
                    <i class="fas fa-times-circle text-white text-xl"></i>
                </div>
            </div>
        </div>

        <div class="bg-gradient-to-br from-blue-50 to-blue-100 rounded-xl shadow-md border border-blue-200 p-5 hover:shadow-lg transition-shadow">
            <div class="flex items-center justify-between">
                <div class="flex-1">
                    <p class="text-xs font-medium text-blue-700 uppercase tracking-wide">Çalışıyor</p>
                    <p class="mt-2 text-3xl font-bold text-blue-900">{{ $stats['running'] }}</p>
                    <p class="mt-1 text-xs text-blue-600">
                        @if($stats['running'] > 0)
                            <i class="fas fa-spinner fa-spin mr-1"></i>
                            Aktif işlemler
                        @else
                            Beklemede
                        @endif
                    </p>
                </div>
                <div class="rounded-xl bg-blue-500 p-3 shadow-lg">
                    <i class="fas fa-spinner fa-spin text-white text-xl"></i>
                </div>
            </div>
        </div>
    </div>

    <!-- Filtreleme ve Arama -->
    @if(!$logs->isEmpty())
    <div class="mt-6 bg-white rounded-xl shadow-md border border-gray-200 p-4">
        <div class="flex flex-col sm:flex-row gap-3 items-start sm:items-center justify-between">
            <div class="flex-1 w-full sm:w-auto">
                <input type="text" id="search-logs" placeholder="Aksiyon, durum veya kullanıcı ara..." 
                    class="w-full sm:w-64 px-4 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500">
            </div>
            <div class="flex flex-wrap gap-2">
                <button type="button" data-filter="all" class="filter-btn active px-3 py-1.5 text-xs font-semibold rounded-lg bg-indigo-600 text-white">
                    Tümü
                </button>
                <button type="button" data-filter="completed" class="filter-btn px-3 py-1.5 text-xs font-semibold rounded-lg bg-gray-100 text-gray-700 hover:bg-gray-200">
                    <i class="fas fa-check-circle mr-1"></i>Başarılı
                </button>
                <button type="button" data-filter="failed" class="filter-btn px-3 py-1.5 text-xs font-semibold rounded-lg bg-gray-100 text-gray-700 hover:bg-gray-200">
                    <i class="fas fa-times-circle mr-1"></i>Başarısız
                </button>
                <button type="button" data-filter="running" class="filter-btn px-3 py-1.5 text-xs font-semibold rounded-lg bg-gray-100 text-gray-700 hover:bg-gray-200">
                    <i class="fas fa-spinner fa-spin mr-1"></i>Çalışıyor
                </button>
            </div>
        </div>
    </div>
    @endif

    <!-- Log Listesi -->
    <div class="mt-6 bg-white shadow-lg ring-1 ring-gray-900/5 rounded-xl overflow-hidden">
        <div class="px-4 py-6 sm:p-8">
            <div class="flex items-center justify-between mb-6">
                <h2 class="text-xl font-bold text-gray-900 flex items-center gap-2">
                    <i class="fas fa-history text-indigo-600"></i>
                    Çalıştırma Geçmişi
                </h2>
                <span class="text-sm text-gray-500" id="log-count">{{ $logs->total() }} kayıt</span>
            </div>

            @if($logs->isEmpty())
                <div class="text-center py-12">
                    <i class="fas fa-inbox text-gray-300 text-4xl mb-3"></i>
                    <p class="text-sm text-gray-500">Henüz performans agent çalıştırılmamış.</p>
                    <p class="text-xs text-gray-400 mt-1">İlk çalıştırmayı başlatmak için yukarıdaki "Agent'i Başlat" butonuna tıklayın.</p>
                </div>
            @else
                <!-- Mobil için kart görünümü (sadece küçük ekranlarda) -->
                <div class="block sm:hidden space-y-4" id="mobile-logs">
                    @foreach($logs as $log)
                        <div class="log-card bg-white rounded-xl border border-gray-200 shadow-md p-4" 
                            data-status="{{ $log->status }}" 
                            data-action="{{ $log->action_taken ?? '' }}"
                            data-user="{{ strtolower($log->initiatedBy ? $log->initiatedBy->name : 'sistem') }}">
                            <div class="flex items-start justify-between mb-3">
                                <div>
                                    <div class="font-bold text-gray-900">{{ $log->created_at->format('d.m.Y H:i') }}</div>
                                    <div class="text-xs text-gray-500 mt-1">{{ $log->initiatedBy ? $log->initiatedBy->name : 'Sistem' }}</div>
                                </div>
                                <span class="inline-flex items-center gap-1 rounded-full px-2.5 py-0.5 text-xs font-semibold {{ $log->status_badge_class }}">
                                    @if($log->status === 'running')
                                        <i class="fas fa-spinner fa-spin"></i>
                                    @elseif($log->status === 'completed')
                                        <i class="fas fa-check-circle"></i>
                                    @elseif($log->status === 'failed')
                                        <i class="fas fa-times-circle"></i>
                                    @else
                                        <i class="fas fa-pause-circle"></i>
                                    @endif
                                    {{ ucfirst($log->status) }}
                                </span>
                            </div>
                            
                            @if($log->action_taken)
                                <div class="mb-3">
                                    <span class="inline-flex items-center gap-1 rounded-full px-2.5 py-0.5 text-xs font-semibold {{ $log->action_badge_class }}">
                                        @if($log->action_taken === 'MOBILE_IMAGE_OPTIMIZE')
                                            <i class="fas fa-mobile-alt"></i>
                                        @elseif($log->action_taken === 'MOBILE_CSS_CRITICAL')
                                            <i class="fas fa-mobile-alt"></i>
                                        @elseif($log->action_taken === 'MOBILE_LAZY_LOAD')
                                            <i class="fas fa-mobile-alt"></i>
                                        @elseif($log->action_taken === 'MOBILE_FONT_OPTIMIZE')
                                            <i class="fas fa-mobile-alt"></i>
                                        @elseif($log->action_taken === 'LS_CSS_MINIFY')
                                            <i class="fas fa-compress"></i>
                                        @elseif($log->action_taken === 'LS_JS_DEFER')
                                            <i class="fas fa-code"></i>
                                        @elseif($log->action_taken === 'IMAGE_WEBP')
                                            <i class="fas fa-image"></i>
                                        @elseif($log->action_taken === 'UNUSED_CSS')
                                            <i class="fas fa-eraser"></i>
                                        @else
                                            <i class="fas fa-ban"></i>
                                        @endif
                                        {{ $log->action_label }}
                                    </span>
                                </div>
                            @endif
                            
                            @if($log->mobile_score || $log->desktop_score)
                                <div class="space-y-2 text-sm mb-3">
                                    @if($log->mobile_score)
                                        @php
                                            $mobileChange = $log->mobile_score_change;
                                        @endphp
                                        <div class="flex items-center justify-between">
                                            <span class="text-gray-600">📱 Mobile:</span>
                                            <div class="flex items-center gap-2">
                                                <span class="font-bold {{ $log->mobile_score >= 80 ? 'text-green-600' : ($log->mobile_score >= 50 ? 'text-amber-600' : 'text-red-600') }}">
                                                    {{ $log->mobile_score }}/100
                                                </span>
                                                @if($mobileChange)
                                                    @php
                                                        $isPositive = $mobileChange['points'] > 0;
                                                        $isNegative = $mobileChange['points'] < 0;
                                                    @endphp
                                                    <span class="text-xs font-semibold {{ $isPositive ? 'text-green-600' : ($isNegative ? 'text-red-600' : 'text-gray-500') }}">
                                                        @if($isPositive)
                                                            <i class="fas fa-arrow-up"></i> +{{ abs($mobileChange['points']) }}
                                                        @elseif($isNegative)
                                                            <i class="fas fa-arrow-down"></i> {{ $mobileChange['points'] }}
                                                        @else
                                                            <i class="fas fa-minus"></i>
                                                        @endif
                                                    </span>
                                                @endif
                                            </div>
                                        </div>
                                        @if($log->mobile_fcp)
                                            <div class="flex items-center justify-between text-xs">
                                                <span class="text-gray-500">FCP:</span>
                                                <span class="font-medium">{{ $log->mobile_fcp }}s</span>
                                            </div>
                                        @endif
                                    @endif
                                    @if($log->desktop_score)
                                        @php
                                            $desktopChange = $log->desktop_score_change;
                                        @endphp
                                        <div class="flex items-center justify-between">
                                            <span class="text-gray-600">🖥️ Desktop:</span>
                                            <div class="flex items-center gap-2">
                                                <span class="font-bold {{ $log->desktop_score >= 80 ? 'text-green-600' : ($log->desktop_score >= 50 ? 'text-amber-600' : 'text-red-600') }}">
                                                    {{ $log->desktop_score }}/100
                                                </span>
                                                @if($desktopChange)
                                                    @php
                                                        $isPositive = $desktopChange['points'] > 0;
                                                        $isNegative = $desktopChange['points'] < 0;
                                                    @endphp
                                                    <span class="text-xs font-semibold {{ $isPositive ? 'text-green-600' : ($isNegative ? 'text-red-600' : 'text-gray-500') }}">
                                                        @if($isPositive)
                                                            <i class="fas fa-arrow-up"></i> +{{ abs($desktopChange['points']) }}
                                                        @elseif($isNegative)
                                                            <i class="fas fa-arrow-down"></i> {{ $desktopChange['points'] }}
                                                        @else
                                                            <i class="fas fa-minus"></i>
                                                        @endif
                                                    </span>
                                                @endif
                                            </div>
                                        </div>
                                        @if($log->desktop_fcp)
                                            <div class="flex items-center justify-between text-xs">
                                                <span class="text-gray-500">FCP:</span>
                                                <span class="font-medium">{{ $log->desktop_fcp }}s</span>
                                            </div>
                                        @endif
                                    @endif
                                </div>
                            @endif
                            
                            <button type="button" onclick="toggleMobileDetails(this)" class="mt-3 w-full text-xs text-indigo-600 hover:text-indigo-800 font-medium flex items-center justify-center gap-1">
                                <i class="fas fa-chevron-down transition-transform"></i>
                                <span>Detayları Göster</span>
                            </button>
                            
                            <div class="mobile-details hidden mt-3 pt-3 border-t border-gray-200 space-y-2">
                                @if($log->error_message || ($log->optimization_result && (isset($log->optimization_result['message']) || isset($log->optimization_result['note']) || isset($log->optimization_result['warning']))))
                                    @if($log->error_message)
                                        <div class="text-xs text-red-700 bg-red-50 rounded-lg px-3 py-2 border border-red-200">
                                            <strong>Hata:</strong> {{ $log->error_message }}
                                        </div>
                                    @endif
                                    @if($log->optimization_result && isset($log->optimization_result['message']))
                                        <div class="text-xs {{ ($log->optimization_result['status'] ?? 'error') === 'success' ? 'text-emerald-700 bg-emerald-50 border-emerald-200' : 'text-red-700 bg-red-50 border-red-200' }} rounded-lg px-3 py-2 border">
                                            <strong>Sonuç:</strong> {{ $log->optimization_result['message'] }}
                                        </div>
                                    @endif
                                    @if($log->optimization_result && isset($log->optimization_result['note']))
                                        <div class="text-xs text-indigo-700 bg-indigo-50 rounded-lg px-3 py-2 border border-indigo-200">
                                            <strong>Not:</strong> {{ $log->optimization_result['note'] }}
                                        </div>
                                    @endif
                                    @if($log->optimization_result && isset($log->optimization_result['warning']))
                                        <div class="text-xs text-amber-700 bg-amber-50 rounded-lg px-3 py-2 border border-amber-200">
                                            <strong>Uyarı:</strong> {{ $log->optimization_result['warning'] }}
                                        </div>
                                    @endif
                                @endif
                            </div>
                        </div>
                    @endforeach
                </div>
                
                <!-- Desktop için tablo görünümü -->
                <div class="hidden sm:block overflow-x-auto -mx-4 sm:mx-0">
                    <table class="min-w-full divide-y divide-gray-200" id="logs-table">
                        <thead class="bg-gradient-to-r from-gray-50 to-gray-100">
                            <tr>
                                <th scope="col" class="px-4 py-3 text-left text-xs font-bold text-gray-700 uppercase tracking-wider">
                                    <i class="fas fa-calendar mr-1"></i>Tarih
                                </th>
                                <th scope="col" class="px-4 py-3 text-left text-xs font-bold text-gray-700 uppercase tracking-wider">
                                    <i class="fas fa-info-circle mr-1"></i>Durum
                                </th>
                                <th scope="col" class="px-4 py-3 text-left text-xs font-bold text-gray-700 uppercase tracking-wider">
                                    <i class="fas fa-tachometer-alt mr-1"></i>PageSpeed Skorları
                                </th>
                                <th scope="col" class="px-4 py-3 text-left text-xs font-bold text-gray-700 uppercase tracking-wider">
                                    <i class="fas fa-cog mr-1"></i>Aksiyon
                                </th>
                                <th scope="col" class="px-4 py-3 text-left text-xs font-bold text-gray-700 uppercase tracking-wider">
                                    <i class="fas fa-user mr-1"></i>Başlatan
                                </th>
                                <th scope="col" class="px-4 py-3 text-left text-xs font-bold text-gray-700 uppercase tracking-wider">
                                    <i class="fas fa-clock mr-1"></i>Süre
                                </th>
                            </tr>
                        </thead>
                        <tbody class="bg-white divide-y divide-gray-200" id="logs-tbody">
                            @foreach($logs as $log)
                                <tr class="log-row hover:bg-indigo-50/50 transition-colors" 
                                    data-status="{{ $log->status }}" 
                                    data-action="{{ $log->action_taken ?? '' }}"
                                    data-user="{{ strtolower($log->initiatedBy ? $log->initiatedBy->name : 'sistem') }}">
                                    <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-900">
                                        <div class="flex items-center gap-2">
                                            <button type="button" onclick="toggleDetails(this)" class="text-gray-400 hover:text-gray-600 transition-colors">
                                                <i class="fas fa-chevron-down text-xs transition-transform" style="transform: rotate(-90deg);"></i>
                                            </button>
                                            <div>
                                                <div class="font-semibold text-gray-900">{{ $log->created_at->format('d.m.Y') }}</div>
                                                <div class="text-xs text-gray-500 mt-0.5">{{ $log->created_at->format('H:i:s') }}</div>
                                            </div>
                                        </div>
                                    </td>
                                    <td class="px-4 py-3 whitespace-nowrap">
                                        <span class="inline-flex items-center gap-1 rounded-full px-2.5 py-0.5 text-xs font-semibold {{ $log->status_badge_class }}">
                                            @if($log->status === 'running')
                                                <i class="fas fa-spinner fa-spin"></i>
                                            @elseif($log->status === 'completed')
                                                <i class="fas fa-check-circle"></i>
                                            @elseif($log->status === 'failed')
                                                <i class="fas fa-times-circle"></i>
                                            @else
                                                <i class="fas fa-pause-circle"></i>
                                            @endif
                                            {{ ucfirst($log->status) }}
                                        </span>
                                    </td>
                                    <td class="px-4 py-3 text-sm text-gray-900">
                                        @if($log->mobile_score || $log->desktop_score)
                                            <div class="space-y-2">
                                                @if($log->mobile_score)
                                                    @php
                                                        $mobileChange = $log->mobile_score_change;
                                                    @endphp
                                                    <div class="space-y-1">
                                                        <div class="flex items-center gap-2 flex-wrap">
                                                            <span class="text-xs text-gray-500">Mobile:</span>
                                                            <span class="font-semibold {{ $log->mobile_score >= 80 ? 'text-green-600' : ($log->mobile_score >= 50 ? 'text-amber-600' : 'text-red-600') }}">
                                                                {{ $log->mobile_score }}/100
                                                            </span>
                                                            @if($mobileChange)
                                                                @php
                                                                    $isPositive = $mobileChange['points'] > 0;
                                                                    $isNegative = $mobileChange['points'] < 0;
                                                                @endphp
                                                                <span class="inline-flex items-center gap-1 text-xs font-semibold {{ $isPositive ? 'text-green-600' : ($isNegative ? 'text-red-600' : 'text-gray-500') }}">
                                                                    @if($isPositive)
                                                                        <i class="fas fa-arrow-up"></i>
                                                                        +{{ abs($mobileChange['points']) }} puan
                                                                        (+{{ abs($mobileChange['percent']) }}%)
                                                                    @elseif($isNegative)
                                                                        <i class="fas fa-arrow-down"></i>
                                                                        {{ $mobileChange['points'] }} puan
                                                                        ({{ $mobileChange['percent'] }}%)
                                                                    @else
                                                                        <i class="fas fa-minus"></i>
                                                                        Değişmedi
                                                                    @endif
                                                                </span>
                                                            @endif
                                                        </div>
                                                        @if($log->mobile_fcp)
                                                            <div class="flex items-center gap-2 flex-wrap">
                                                                <span class="text-xs text-gray-400">FCP: {{ $log->mobile_fcp }}s</span>
                                                                @php
                                                                    $mobileFcpChange = $log->mobile_fcp_change;
                                                                @endphp
                                                                @if($mobileFcpChange)
                                                                    @php
                                                                        $fcpIsPositive = $mobileFcpChange['seconds'] < 0; // FCP azalması iyidir
                                                                        $fcpIsNegative = $mobileFcpChange['seconds'] > 0; // FCP artması kötüdür
                                                                    @endphp
                                                                    <span class="inline-flex items-center gap-1 text-xs font-semibold {{ $fcpIsPositive ? 'text-green-600' : ($fcpIsNegative ? 'text-red-600' : 'text-gray-500') }}">
                                                                        @if($fcpIsPositive)
                                                                            <i class="fas fa-arrow-down"></i>
                                                                            {{ abs($mobileFcpChange['seconds']) }}s daha hızlı
                                                                            ({{ abs($mobileFcpChange['percent']) }}% iyileşme)
                                                                        @elseif($fcpIsNegative)
                                                                            <i class="fas fa-arrow-up"></i>
                                                                            +{{ $mobileFcpChange['seconds'] }}s daha yavaş
                                                                            ({{ abs($mobileFcpChange['percent']) }}% kötüleşme)
                                                                        @else
                                                                            <i class="fas fa-minus"></i>
                                                                            Değişmedi
                                                                        @endif
                                                                    </span>
                                                                @endif
                                                            </div>
                                                        @endif
                                                    </div>
                                                @endif
                                                @if($log->desktop_score)
                                                    @php
                                                        $desktopChange = $log->desktop_score_change;
                                                    @endphp
                                                    <div class="space-y-1">
                                                        <div class="flex items-center gap-2 flex-wrap">
                                                            <span class="text-xs text-gray-500">Desktop:</span>
                                                            <span class="font-semibold {{ $log->desktop_score >= 80 ? 'text-green-600' : ($log->desktop_score >= 50 ? 'text-amber-600' : 'text-red-600') }}">
                                                                {{ $log->desktop_score }}/100
                                                            </span>
                                                            @if($desktopChange)
                                                                @php
                                                                    $isPositive = $desktopChange['points'] > 0;
                                                                    $isNegative = $desktopChange['points'] < 0;
                                                                @endphp
                                                                <span class="inline-flex items-center gap-1 text-xs font-semibold {{ $isPositive ? 'text-green-600' : ($isNegative ? 'text-red-600' : 'text-gray-500') }}">
                                                                    @if($isPositive)
                                                                        <i class="fas fa-arrow-up"></i>
                                                                        +{{ abs($desktopChange['points']) }} puan
                                                                        (+{{ abs($desktopChange['percent']) }}%)
                                                                    @elseif($isNegative)
                                                                        <i class="fas fa-arrow-down"></i>
                                                                        {{ $desktopChange['points'] }} puan
                                                                        ({{ $desktopChange['percent'] }}%)
                                                                    @else
                                                                        <i class="fas fa-minus"></i>
                                                                        Değişmedi
                                                                    @endif
                                                                </span>
                                                            @endif
                                                        </div>
                                                        @if($log->desktop_fcp)
                                                            <div class="flex items-center gap-2 flex-wrap">
                                                                <span class="text-xs text-gray-400">FCP: {{ $log->desktop_fcp }}s</span>
                                                                @php
                                                                    $desktopFcpChange = $log->desktop_fcp_change;
                                                                @endphp
                                                                @if($desktopFcpChange)
                                                                    @php
                                                                        $fcpIsPositive = $desktopFcpChange['seconds'] < 0; // FCP azalması iyidir
                                                                        $fcpIsNegative = $desktopFcpChange['seconds'] > 0; // FCP artması kötüdür
                                                                    @endphp
                                                                    <span class="inline-flex items-center gap-1 text-xs font-semibold {{ $fcpIsPositive ? 'text-green-600' : ($fcpIsNegative ? 'text-red-600' : 'text-gray-500') }}">
                                                                        @if($fcpIsPositive)
                                                                            <i class="fas fa-arrow-down"></i>
                                                                            {{ abs($desktopFcpChange['seconds']) }}s daha hızlı
                                                                            ({{ abs($desktopFcpChange['percent']) }}% iyileşme)
                                                                        @elseif($fcpIsNegative)
                                                                            <i class="fas fa-arrow-up"></i>
                                                                            +{{ $desktopFcpChange['seconds'] }}s daha yavaş
                                                                            ({{ abs($desktopFcpChange['percent']) }}% kötüleşme)
                                                                        @else
                                                                            <i class="fas fa-minus"></i>
                                                                            Değişmedi
                                                                        @endif
                                                                    </span>
                                                                @endif
                                                            </div>
                                                        @endif
                                                    </div>
                                                @endif
                                            </div>
                                        @else
                                            <span class="text-xs text-gray-400">-</span>
                                        @endif
                                    </td>
                                    <td class="px-4 py-3 whitespace-nowrap">
                                        @if($log->action_taken)
                                            <span class="inline-flex items-center gap-1 rounded-full px-2.5 py-0.5 text-xs font-semibold {{ $log->action_badge_class }}">
                                                @if($log->action_taken === 'MOBILE_IMAGE_OPTIMIZE')
                                                    <i class="fas fa-mobile-alt"></i>
                                                @elseif($log->action_taken === 'MOBILE_CSS_CRITICAL')
                                                    <i class="fas fa-mobile-alt"></i>
                                                @elseif($log->action_taken === 'MOBILE_LAZY_LOAD')
                                                    <i class="fas fa-mobile-alt"></i>
                                                @elseif($log->action_taken === 'MOBILE_FONT_OPTIMIZE')
                                                    <i class="fas fa-mobile-alt"></i>
                                                @elseif($log->action_taken === 'LS_CSS_MINIFY')
                                                    <i class="fas fa-compress"></i>
                                                @elseif($log->action_taken === 'LS_JS_DEFER')
                                                    <i class="fas fa-code"></i>
                                                @elseif($log->action_taken === 'IMAGE_WEBP')
                                                    <i class="fas fa-image"></i>
                                                @elseif($log->action_taken === 'UNUSED_CSS')
                                                    <i class="fas fa-eraser"></i>
                                                @elseif($log->action_taken === 'CACHE_PURGE')
                                                    <i class="fas fa-broom"></i>
                                                @elseif($log->action_taken === 'DB_OPTIMIZE')
                                                    <i class="fas fa-database"></i>
                                                @else
                                                    <i class="fas fa-ban"></i>
                                                @endif
                                                {{ $log->action_label }}
                                            </span>
                                        @else
                                            <span class="text-xs text-gray-400">-</span>
                                        @endif
                                    </td>
                                    <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">
                                        {{ $log->initiatedBy ? $log->initiatedBy->name : 'Sistem' }}
                                    </td>
                                    <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">
                                        @if($log->started_at && $log->finished_at)
                                            {{ $log->started_at->diffForHumans($log->finished_at, true) }}
                                        @elseif($log->started_at)
                                            <span class="text-blue-600">Devam ediyor...</span>
                                        @else
                                            <span class="text-gray-400">-</span>
                                        @endif
                                    </td>
                                </tr>
                                @if($log->error_message || ($log->optimization_result && isset($log->optimization_result['message'])) || ($log->optimization_result && isset($log->optimization_result['note'])) || ($log->optimization_result && isset($log->optimization_result['warning'])))
                                    <tr class="log-details-row bg-gradient-to-r from-gray-50 to-gray-100/50 hidden">
                                        <td colspan="6" class="px-4 py-4">
                                            <div class="space-y-2">
                                                @if($log->error_message)
                                                    <div class="flex items-start gap-2 text-xs text-red-700 bg-red-50 rounded-lg px-3 py-2 border border-red-200">
                                                        <i class="fas fa-exclamation-circle mt-0.5 text-red-600"></i>
                                                        <div>
                                                            <strong class="font-semibold">Hata:</strong>
                                                            <p class="mt-0.5">{{ $log->error_message }}</p>
                                                        </div>
                                                    </div>
                                                @endif
                                                @if($log->optimization_result && isset($log->optimization_result['message']))
                                                    <div class="flex items-start gap-2 text-xs {{ ($log->optimization_result['status'] ?? 'error') === 'success' ? 'text-emerald-700 bg-emerald-50 border-emerald-200' : 'text-red-700 bg-red-50 border-red-200' }} rounded-lg px-3 py-2 border">
                                                        <i class="fas fa-info-circle mt-0.5 {{ ($log->optimization_result['status'] ?? 'error') === 'success' ? 'text-emerald-600' : 'text-red-600' }}"></i>
                                                        <div>
                                                            <strong class="font-semibold">Sonuç:</strong>
                                                            <p class="mt-0.5">{{ $log->optimization_result['message'] }}</p>
                                                        </div>
                                                    </div>
                                                @endif
                                                @if($log->optimization_result && isset($log->optimization_result['note']))
                                                    <div class="flex items-start gap-2 text-xs text-indigo-700 bg-indigo-50 rounded-lg px-3 py-2 border border-indigo-200">
                                                        <i class="fas fa-info-circle mt-0.5 text-indigo-600"></i>
                                                        <div>
                                                            <strong class="font-semibold">Not:</strong>
                                                            <p class="mt-0.5">{{ $log->optimization_result['note'] }}</p>
                                                        </div>
                                                    </div>
                                                @endif
                                                @if($log->optimization_result && isset($log->optimization_result['warning']))
                                                    <div class="flex items-start gap-2 text-xs text-amber-700 bg-amber-50 rounded-lg px-3 py-2 border border-amber-200">
                                                        <i class="fas fa-exclamation-triangle mt-0.5 text-amber-600"></i>
                                                        <div>
                                                            <strong class="font-semibold">Uyarı:</strong>
                                                            <p class="mt-0.5">{{ $log->optimization_result['warning'] }}</p>
                                                        </div>
                                                    </div>
                                                @endif
                                            </div>
                                        </td>
                                    </tr>
                                @endif
                            @endforeach
                        </tbody>
                    </table>
                </div>

                <!-- Pagination -->
                <div class="mt-6 border-t border-gray-200 pt-4">
                    {{ $logs->links() }}
                </div>
            @endif
        </div>
    </div>
</div>

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Filtreleme
    const filterButtons = document.querySelectorAll('.filter-btn');
    const searchInput = document.getElementById('search-logs');
    const logRows = document.querySelectorAll('.log-row');
    const logCount = document.getElementById('log-count');
    
    let currentFilter = 'all';
    
    filterButtons.forEach(btn => {
        btn.addEventListener('click', function() {
            currentFilter = this.dataset.filter;
            
            // Active state
            filterButtons.forEach(b => {
                b.classList.remove('active', 'bg-indigo-600', 'text-white');
                b.classList.add('bg-gray-100', 'text-gray-700');
            });
            this.classList.add('active', 'bg-indigo-600', 'text-white');
            this.classList.remove('bg-gray-100', 'text-gray-700');
            
            filterLogs();
        });
    });
    
    // Arama
    if (searchInput) {
        searchInput.addEventListener('input', function() {
            filterLogs();
        });
    }
    
    function filterLogs() {
        const searchTerm = searchInput ? searchInput.value.toLowerCase() : '';
        let visibleCount = 0;
        
        // Desktop tablo satırları
        logRows.forEach(row => {
            const status = row.dataset.status;
            const action = (row.dataset.action || '').toLowerCase();
            const user = row.dataset.user || '';
            const text = row.textContent.toLowerCase();
            
            const matchesFilter = currentFilter === 'all' || status === currentFilter;
            const matchesSearch = !searchTerm || 
                action.includes(searchTerm) || 
                user.includes(searchTerm) || 
                text.includes(searchTerm);
            
            if (matchesFilter && matchesSearch) {
                row.style.display = '';
                // Detay satırını da göster/gizle
                const detailsRow = row.nextElementSibling;
                if (detailsRow && detailsRow.classList.contains('log-details-row')) {
                    detailsRow.style.display = row.classList.contains('expanded') ? '' : 'none';
                }
                visibleCount++;
            } else {
                row.style.display = 'none';
                const detailsRow = row.nextElementSibling;
                if (detailsRow && detailsRow.classList.contains('log-details-row')) {
                    detailsRow.style.display = 'none';
                }
            }
        });
        
        // Mobil kartlar
        const logCards = document.querySelectorAll('.log-card');
        logCards.forEach(card => {
            const status = card.dataset.status;
            const action = (card.dataset.action || '').toLowerCase();
            const user = card.dataset.user || '';
            const text = card.textContent.toLowerCase();
            
            const matchesFilter = currentFilter === 'all' || status === currentFilter;
            const matchesSearch = !searchTerm || 
                action.includes(searchTerm) || 
                user.includes(searchTerm) || 
                text.includes(searchTerm);
            
            if (matchesFilter && matchesSearch) {
                card.style.display = '';
                visibleCount++;
            } else {
                card.style.display = 'none';
            }
        });
        
        if (logCount) {
            logCount.textContent = `${visibleCount} kayıt gösteriliyor`;
        }
    }
    
    // Form submit loading state
    const startAgentForm = document.getElementById('start-agent-form');
    if (startAgentForm) {
        startAgentForm.addEventListener('submit', function(e) {
            if (!confirm('Yapay Zeka destekli performans agent\'i çalıştırılacak. AI, PageSpeed sonuçlarını analiz edip en uygun optimizasyonu otomatik olarak uygulayacak. Devam edilsin mi?')) {
                e.preventDefault();
                return;
            }
            
            const btn = document.getElementById('start-agent-btn');
            const icon = document.getElementById('start-agent-icon');
            const text = document.getElementById('start-agent-text');
            
            if (btn && icon && text) {
                btn.disabled = true;
                icon.className = 'fas fa-spinner fa-spin';
                text.textContent = 'Başlatılıyor...';
            }
        });
    }
    
    // Real-time güncelleme (çalışan işlemler için)
    const runningLogs = document.querySelectorAll('[data-status="running"]');
    if (runningLogs.length > 0) {
        // Her 10 saniyede bir sayfayı yenile (sadece çalışan işlemler varsa)
        setTimeout(() => {
            if (document.querySelector('[data-status="running"]')) {
                window.location.reload();
            }
        }, 10000);
    }
});

// Detayları göster/gizle (Desktop)
function toggleDetails(button) {
    const cell = button.closest('td');
    const row = cell.closest('tr');
    const detailsRow = row.nextElementSibling;
    
    if (detailsRow && detailsRow.classList.contains('log-details-row')) {
        const isHidden = detailsRow.style.display === 'none' || !detailsRow.style.display;
        detailsRow.style.display = isHidden ? '' : 'none';
        row.classList.toggle('expanded', isHidden);
        
        const icon = button.querySelector('.fa-chevron-down');
        if (icon) {
            icon.style.transform = isHidden ? 'rotate(0deg)' : 'rotate(-90deg)';
        }
    }
}

// Mobil detayları göster/gizle
function toggleMobileDetails(button) {
    const card = button.closest('.log-card');
    const details = card.querySelector('.mobile-details');
    const icon = button.querySelector('.fa-chevron-down');
    
    if (details) {
        const isHidden = details.classList.contains('hidden');
        details.classList.toggle('hidden', !isHidden);
        if (icon) {
            icon.style.transform = isHidden ? 'rotate(180deg)' : 'rotate(0deg)';
        }
        button.querySelector('span').textContent = isHidden ? 'Detayları Gizle' : 'Detayları Göster';
    }
}
</script>
@endpush
@endsection