@extends('layouts.app')

@section('title', 'Developer Detayları')
@section('page-title', 'Developer Detayları')

@section('content')
<div class="px-4 sm:px-6 lg:px-8">
    <!-- Back Button -->
    <div class="mb-6">
        <a href="{{ route('developers.index') }}" class="inline-flex items-center gap-2 text-sm text-gray-600 hover:text-gray-900 dark:text-gray-100">
            <i class="fas fa-arrow-left"></i>
            Developer listesine dön
        </a>
    </div>

    <div class="grid grid-cols-1 gap-6 lg:grid-cols-3">
        <!-- Main Info -->
        <div class="lg:col-span-2">
            <div class="bg-white dark:bg-gray-800 shadow rounded-lg overflow-hidden">
                <div class="px-6 py-5 border-b border-gray-200 dark:border-gray-700">
                    <div class="flex items-center justify-between">
                        <h3 class="text-lg font-medium text-gray-900 dark:text-gray-100">Developer Bilgileri</h3>
                        <div class="flex items-center gap-2">
                            <a href="{{ route('developers.edit', $developer) }}" class="inline-flex items-center gap-2 px-3 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50">
                                <i class="fas fa-edit"></i>
                                Düzenle
                            </a>
                        </div>
                    </div>
                </div>
                <div class="px-6 py-5">
                    <dl class="grid grid-cols-1 gap-6 sm:grid-cols-2">
                        <div>
                            <dt class="text-sm font-medium text-gray-500 dark:text-gray-400">Ad Soyad</dt>
                            <dd class="mt-1 text-sm text-gray-900 dark:text-gray-100">{{ $developer->name }}</dd>
                        </div>
                        <div>
                            <dt class="text-sm font-medium text-gray-500 dark:text-gray-400">Email</dt>
                            <dd class="mt-1 text-sm text-gray-900 dark:text-gray-100">{{ $developer->email }}</dd>
                        </div>
                        <div>
                            <dt class="text-sm font-medium text-gray-500 dark:text-gray-400">Rol</dt>
                            <dd class="mt-1">
                                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-indigo-100 text-indigo-800">
                                    <i class="fas fa-code mr-1"></i>
                                    Developer
                                </span>
                            </dd>
                        </div>
                        <div>
                            <dt class="text-sm font-medium text-gray-500 dark:text-gray-400">Kayıt Tarihi</dt>
                            <dd class="mt-1 text-sm text-gray-900 dark:text-gray-100">{{ $developer->created_at->format('d.m.Y H:i') }}</dd>
                        </div>
                        <div>
                            <dt class="text-sm font-medium text-gray-500 dark:text-gray-400">Son Güncelleme</dt>
                            <dd class="mt-1 text-sm text-gray-900 dark:text-gray-100">{{ $developer->updated_at->format('d.m.Y H:i') }}</dd>
                        </div>
                    </dl>
                </div>
            </div>

            <!-- Performance Overview -->
            @if($currentPerformance)
            <div class="mt-6 bg-white dark:bg-gray-800 shadow rounded-lg overflow-hidden">
                <div class="px-6 py-5 border-b border-gray-200 dark:border-gray-700">
                    <div class="flex items-center justify-between">
                        <h3 class="text-lg font-medium text-gray-900 dark:text-gray-100">Performans Özeti</h3>
                        <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium {{ $currentPerformance->performance_level_badge_class }}">
                            {{ $currentPerformance->performance_level_label }}
                        </span>
                    </div>
                </div>
                <div class="px-6 py-5">
                    <!-- Overall Score -->
                    <div class="mb-6">
                        <div class="flex items-center justify-between mb-2">
                            <span class="text-sm font-medium text-gray-700 dark:text-gray-300">Genel Performans Puanı</span>
                            <span class="text-2xl font-bold {{ $currentPerformance->performance_score >= 75 ? 'text-green-600' : ($currentPerformance->performance_score >= 50 ? 'text-yellow-600' : 'text-red-600') }}">
                                {{ number_format($currentPerformance->performance_score, 1) }}/100
                            </span>
                        </div>
                        <div class="w-full bg-gray-200 rounded-full h-3">
                            <div class="h-3 rounded-full {{ $currentPerformance->performance_score >= 75 ? 'bg-green-600' : ($currentPerformance->performance_score >= 50 ? 'bg-yellow-600' : 'bg-red-600') }}" 
                                 style="width: {{ $currentPerformance->performance_score }}%"></div>
                        </div>
                    </div>

                    <!-- Metrics Grid -->
                    <div class="grid grid-cols-2 gap-4">
                        <div class="p-4 bg-gray-50 rounded-lg">
                            <div class="text-xs text-gray-500 dark:text-gray-400 mb-1">Toplam Site</div>
                            <div class="text-2xl font-semibold text-gray-900 dark:text-gray-100">{{ $currentPerformance->total_sites }}</div>
                            <div class="text-xs text-gray-500 dark:text-gray-400 mt-1">{{ $currentPerformance->active_sites }} aktif</div>
                        </div>
                        <div class="p-4 bg-gray-50 rounded-lg">
                            <div class="text-xs text-gray-500 dark:text-gray-400 mb-1">Ortalama Mobil Skor</div>
                            <div class="text-2xl font-semibold {{ $currentPerformance->avg_mobile_score >= 80 ? 'text-green-600' : ($currentPerformance->avg_mobile_score >= 50 ? 'text-yellow-600' : 'text-red-600') }}">
                                {{ $currentPerformance->avg_mobile_score ? number_format($currentPerformance->avg_mobile_score, 0) : 'N/A' }}
                            </div>
                        </div>
                        <div class="p-4 bg-gray-50 rounded-lg">
                            <div class="text-xs text-gray-500 dark:text-gray-400 mb-1">Ortalama Desktop Skor</div>
                            <div class="text-2xl font-semibold {{ $currentPerformance->avg_desktop_score >= 80 ? 'text-green-600' : ($currentPerformance->avg_desktop_score >= 50 ? 'text-yellow-600' : 'text-red-600') }}">
                                {{ $currentPerformance->avg_desktop_score ? number_format($currentPerformance->avg_desktop_score, 0) : 'N/A' }}
                            </div>
                        </div>
                        <div class="p-4 bg-gray-50 rounded-lg">
                            <div class="text-xs text-gray-500 dark:text-gray-400 mb-1">Optimizasyon Başarı Oranı</div>
                            <div class="text-2xl font-semibold {{ $currentPerformance->optimization_success_rate >= 80 ? 'text-green-600' : ($currentPerformance->optimization_success_rate >= 50 ? 'text-yellow-600' : 'text-red-600') }}">
                                {{ $currentPerformance->optimization_success_rate ? number_format($currentPerformance->optimization_success_rate, 1) : 'N/A' }}%
                            </div>
                            <div class="text-xs text-gray-500 dark:text-gray-400 mt-1">
                                {{ $currentPerformance->completed_optimizations }}/{{ $currentPerformance->total_optimizations }} tamamlandı
                            </div>
                        </div>
                        <div class="p-4 bg-gray-50 rounded-lg">
                            <div class="text-xs text-gray-500 dark:text-gray-400 mb-1">Toplam Aktivite</div>
                            <div class="text-2xl font-semibold text-gray-900 dark:text-gray-100">{{ $currentPerformance->total_activities }}</div>
                            @if($currentPerformance->last_activity_at)
                            <div class="text-xs text-gray-500 dark:text-gray-400 mt-1">
                                Son: {{ $currentPerformance->last_activity_at->diffForHumans() }}
                            </div>
                            @endif
                        </div>
                        <div class="p-4 bg-gray-50 rounded-lg">
                            <div class="text-xs text-gray-500 dark:text-gray-400 mb-1">Dönem</div>
                            <div class="text-lg font-semibold text-gray-900 dark:text-gray-100">
                                {{ $currentPerformance->period_date->format('F Y') }}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            @endif

            <!-- Performance History with Charts -->
            @if(!empty($performanceHistory))
            <div class="mt-6 bg-white dark:bg-gray-800 shadow rounded-lg overflow-hidden">
                <div class="px-6 py-5 border-b border-gray-200 dark:border-gray-700">
                    <h3 class="text-lg font-medium text-gray-900 dark:text-gray-100">Performans Geçmişi</h3>
                </div>
                <div class="px-6 py-5">
                    <!-- Performance Trend Chart -->
                    <div class="mb-6">
                        <canvas id="performanceTrendChart" height="80"></canvas>
                    </div>
                    
                    <!-- Performance History List -->
                    <div class="space-y-4">
                        @foreach($performanceHistory as $history)
                        <div class="flex items-center justify-between p-4 bg-gray-50 rounded-lg">
                            <div class="flex-1">
                                <div class="text-sm font-medium text-gray-900 dark:text-gray-100">{{ $history['period_label'] }}</div>
                                <div class="text-xs text-gray-500 dark:text-gray-400 mt-1">
                                    {{ $history['total_sites'] }} site • 
                                    {{ $history['total_activities'] }} aktivite
                                </div>
                            </div>
                            <div class="text-right">
                                <div class="text-lg font-semibold {{ $history['performance_score'] >= 75 ? 'text-green-600' : ($history['performance_score'] >= 50 ? 'text-yellow-600' : 'text-red-600') }}">
                                    {{ number_format($history['performance_score'], 1) }}
                                </div>
                                <div class="text-xs text-gray-500 dark:text-gray-400">puan</div>
                            </div>
                        </div>
                        @endforeach
                    </div>
                </div>
            </div>
            @endif

            <!-- Assigned Sites -->
            <div class="mt-6 bg-white dark:bg-gray-800 shadow rounded-lg overflow-hidden">
                <div class="px-6 py-5 border-b border-gray-200 dark:border-gray-700">
                    <h3 class="text-lg font-medium text-gray-900 dark:text-gray-100">Atanan Siteler</h3>
                </div>
                <div class="px-6 py-5">
                    @if($developer->assignedSites->count() > 0)
                    <div class="space-y-3">
                        @foreach($developer->assignedSites as $site)
                        <div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg hover:bg-gray-100 transition-colors">
                            <div class="flex items-center gap-3">
                                <div class="flex-shrink-0">
                                    <div class="h-10 w-10 rounded-full bg-blue-100 flex items-center justify-center">
                                        <i class="fas fa-globe text-blue-600"></i>
                                    </div>
                                </div>
                                <div>
                                    <div class="text-sm font-medium text-gray-900 dark:text-gray-100">{{ $site->name }}</div>
                                    <div class="text-xs text-gray-500 dark:text-gray-400">{{ $site->url }}</div>
                                </div>
                            </div>
                            <a href="{{ route('sites.show', $site) }}" class="text-indigo-600 hover:text-indigo-900 text-sm">
                                <i class="fas fa-external-link-alt"></i>
                            </a>
                        </div>
                        @endforeach
                    </div>
                    @else
                    <div class="text-center py-8 text-gray-500 dark:text-gray-400">
                        <i class="fas fa-globe text-4xl text-gray-300 mb-4"></i>
                        <p class="text-sm">Bu developer'a atanmış site bulunmamaktadır.</p>
                    </div>
                    @endif
                </div>
            </div>
        </div>

        <!-- Sidebar Actions -->
        <div class="space-y-6">
            <!-- Actions -->
            <div class="bg-white dark:bg-gray-800 shadow rounded-lg overflow-hidden">
                <div class="px-6 py-5 border-b border-gray-200 dark:border-gray-700">
                    <h3 class="text-lg font-medium text-gray-900 dark:text-gray-100">İşlemler</h3>
                </div>
                <div class="px-6 py-5 space-y-3">
                    <a href="{{ route('developers.edit', $developer) }}" class="w-full inline-flex items-center justify-center gap-2 px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50">
                        <i class="fas fa-edit"></i>
                        Düzenle
                    </a>
                    <a href="{{ route('developers.export-pdf', $developer) }}" class="w-full inline-flex items-center justify-center gap-2 px-4 py-2 text-sm font-medium text-white bg-red-600 rounded-lg hover:bg-red-700">
                        <i class="fas fa-file-pdf"></i>
                        PDF İndir
                    </a>
                    <a href="{{ route('developers.export-excel', $developer) }}" class="w-full inline-flex items-center justify-center gap-2 px-4 py-2 text-sm font-medium text-white bg-green-600 rounded-lg hover:bg-green-700">
                        <i class="fas fa-file-excel"></i>
                        Excel İndir
                    </a>
                    @if($developer->id !== auth()->id())
                    <form action="{{ route('developers.destroy', $developer) }}" method="POST" onsubmit="return confirm('Bu developer hesabını silmek istediğinizden emin misiniz? Bu işlem geri alınamaz.');">
                        @csrf
                        @method('DELETE')
                        <button type="submit" class="w-full inline-flex items-center justify-center gap-2 px-4 py-2 text-sm font-medium text-white bg-red-600 rounded-lg hover:bg-red-700">
                            <i class="fas fa-trash"></i>
                            Sil
                        </button>
                    </form>
                    @endif
                </div>
            </div>

            <!-- Quick Stats -->
            <div class="bg-white dark:bg-gray-800 shadow rounded-lg overflow-hidden">
                <div class="px-6 py-5 border-b border-gray-200 dark:border-gray-700">
                    <h3 class="text-lg font-medium text-gray-900 dark:text-gray-100">Hızlı İstatistikler</h3>
                </div>
                <div class="px-6 py-5">
                    <dl class="space-y-4">
                        <div>
                            <dt class="text-sm font-medium text-gray-500 dark:text-gray-400">Atanan Site Sayısı</dt>
                            <dd class="mt-1 text-2xl font-semibold text-gray-900 dark:text-gray-100">{{ $developer->assignedSites->count() }}</dd>
                        </div>
                        @if($currentPerformance)
                        <div>
                            <dt class="text-sm font-medium text-gray-500 dark:text-gray-400">Aktif Site Sayısı</dt>
                            <dd class="mt-1 text-xl font-semibold text-gray-900 dark:text-gray-100">{{ $currentPerformance->active_sites }}</dd>
                        </div>
                        <div>
                            <dt class="text-sm font-medium text-gray-500 dark:text-gray-400">Toplam Optimizasyon</dt>
                            <dd class="mt-1 text-xl font-semibold text-gray-900 dark:text-gray-100">{{ $currentPerformance->total_optimizations }}</dd>
                        </div>
                        @endif
                    </dl>
                </div>
            </div>
        </div>
    </div>
</div>

@push('scripts')
@if(!empty($performanceHistory))
<script>
document.addEventListener('DOMContentLoaded', function() {
    const ctx = document.getElementById('performanceTrendChart');
    if (!ctx) return;

    const historyData = @json($performanceHistory);
    
    // Verileri ters çevir (en eski en solda)
    const labels = historyData.map(h => h.period).reverse();
    const scores = historyData.map(h => h.performance_score).reverse();
    const mobileScores = historyData.map(h => h.avg_mobile_score || null).reverse();
    const desktopScores = historyData.map(h => h.avg_desktop_score || null).reverse();

    new Chart(ctx, {
        type: 'line',
        data: {
            labels: labels,
            datasets: [
                {
                    label: 'Performans Puanı',
                    data: scores,
                    borderColor: 'rgb(99, 102, 241)',
                    backgroundColor: 'rgba(99, 102, 241, 0.1)',
                    tension: 0.4,
                    fill: true,
                    pointRadius: 4,
                    pointHoverRadius: 6,
                    pointBackgroundColor: 'rgb(99, 102, 241)',
                    pointBorderColor: '#fff',
                    pointBorderWidth: 2,
                },
                {
                    label: 'Ortalama Mobil Skor',
                    data: mobileScores,
                    borderColor: 'rgb(34, 197, 94)',
                    backgroundColor: 'rgba(34, 197, 94, 0.1)',
                    tension: 0.4,
                    fill: false,
                    pointRadius: 3,
                    pointHoverRadius: 5,
                    pointBackgroundColor: 'rgb(34, 197, 94)',
                    pointBorderColor: '#fff',
                    pointBorderWidth: 2,
                    hidden: true,
                },
                {
                    label: 'Ortalama Desktop Skor',
                    data: desktopScores,
                    borderColor: 'rgb(251, 146, 60)',
                    backgroundColor: 'rgba(251, 146, 60, 0.1)',
                    tension: 0.4,
                    fill: false,
                    pointRadius: 3,
                    pointHoverRadius: 5,
                    pointBackgroundColor: 'rgb(251, 146, 60)',
                    pointBorderColor: '#fff',
                    pointBorderWidth: 2,
                    hidden: true,
                }
            ]
        },
        options: {
            responsive: true,
            maintainAspectRatio: true,
            interaction: {
                mode: 'index',
                intersect: false,
            },
            plugins: {
                legend: {
                    display: true,
                    position: 'top',
                    labels: {
                        usePointStyle: true,
                        padding: 15,
                        font: {
                            size: 12,
                            weight: '500',
                        },
                    },
                },
                tooltip: {
                    backgroundColor: 'rgba(0, 0, 0, 0.8)',
                    padding: 12,
                    titleFont: {
                        size: 14,
                        weight: 'bold',
                    },
                    bodyFont: {
                        size: 12,
                    },
                },
            },
            scales: {
                y: {
                    beginAtZero: false,
                    min: 0,
                    max: 100,
                    ticks: {
                        stepSize: 10,
                        font: {
                            size: 11,
                        },
                        callback: function(value) {
                            return value;
                        },
                    },
                    grid: {
                        color: 'rgba(0, 0, 0, 0.05)',
                    },
                    title: {
                        display: true,
                        text: 'Skor',
                        font: {
                            size: 12,
                            weight: '600',
                        },
                    },
                },
                x: {
                    ticks: {
                        maxRotation: 45,
                        minRotation: 45,
                        font: {
                            size: 10,
                        },
                    },
                    grid: {
                        display: false,
                    },
                },
            },
        },
    });
});
</script>
@endif
@endpush
@endsection