@extends('layouts.app')

@section('title', 'Log Viewer')

@section('content')
<div class="px-4 sm:px-6 lg:px-8">
    <div class="sm:flex sm:items-center">
        <div class="sm:flex-auto">
            <h1 class="text-3xl font-semibold text-gray-900 dark:text-gray-100">Log Viewer</h1>
            <p class="mt-2 text-sm text-gray-700 dark:text-gray-300">
                Laravel log dosyalarını görüntüleyin ve yönetin
            </p>
        </div>
    </div>

    @if(session('success'))
    <div class="mt-4 bg-green-50 dark:bg-green-900/30 border border-green-200 dark:border-green-800 text-green-800 dark:text-green-300 px-4 py-3 rounded">
        {{ session('success') }}
    </div>
    @endif

    @if(session('error'))
    <div class="mt-4 bg-red-50 dark:bg-red-900/30 border border-red-200 dark:border-red-800 text-red-800 dark:text-red-300 px-4 py-3 rounded">
        {{ session('error') }}
    </div>
    @endif

    <div class="mt-8 grid grid-cols-1 lg:grid-cols-4 gap-6">
        <!-- Log Files List -->
        <div class="lg:col-span-1">
            <div class="bg-white dark:bg-gray-800 shadow rounded-lg overflow-hidden">
                <div class="px-4 py-5 sm:p-6 border-b border-gray-200 dark:border-gray-700">
                    <h3 class="text-lg font-medium text-gray-900 dark:text-gray-100">Log Dosyaları</h3>
                </div>
                <div class="divide-y divide-gray-200 dark:divide-gray-700 max-h-[600px] overflow-y-auto">
                    @forelse($logFiles as $logFile)
                    <a href="{{ route('log-viewer.index', ['file' => $logFile['name']]) }}" 
                       class="block px-4 py-3 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors {{ $selectedFile === $logFile['name'] ? 'bg-blue-50 dark:bg-blue-900/30 border-l-4 border-blue-500 dark:border-blue-400' : '' }}">
                        <div class="flex items-center justify-between">
                            <div class="flex-1 min-w-0">
                                <p class="text-sm font-medium text-gray-900 dark:text-gray-100 truncate">{{ $logFile['name'] }}</p>
                                <p class="text-xs text-gray-500 dark:text-gray-400 dark:text-gray-500 mt-1">{{ $logFile['size_formatted'] }}</p>
                            </div>
                        </div>
                        <p class="text-xs text-gray-400 dark:text-gray-500 mt-1">{{ $logFile['modified_formatted'] }}</p>
                    </a>
                    @empty
                    <div class="px-4 py-8 text-center text-gray-500 dark:text-gray-400 dark:text-gray-500">
                        <i class="fas fa-file-alt text-4xl mb-2"></i>
                        <p>Log dosyası bulunamadı</p>
                    </div>
                    @endforelse
                </div>
            </div>
        </div>

        <!-- Log Content -->
        <div class="lg:col-span-3">
            @if($selectedFile)
            <div class="bg-white dark:bg-gray-800 shadow rounded-lg overflow-hidden">
                <!-- Header -->
                <div class="px-4 py-5 sm:p-6 border-b border-gray-200 dark:border-gray-700">
                    <div class="flex items-center justify-between">
                        <div>
                            <h3 class="text-lg font-medium text-gray-900 dark:text-gray-100">{{ $selectedFile }}</h3>
                            @if($logContent)
                            <p class="text-sm text-gray-500 dark:text-gray-400 dark:text-gray-500 mt-1">
                                {{ $logContent['file_size_formatted'] }} • {{ $logContent['total_lines'] }} giriş
                            </p>
                            @endif
                        </div>
                        <div class="flex items-center gap-2">
                            <form action="{{ route('log-viewer.clear', $selectedFile) }}" method="POST" class="inline" onsubmit="return confirm('Log dosyasını temizlemek istediğinizden emin misiniz?');">
                                @csrf
                                <button type="submit" class="inline-flex items-center gap-2 px-3 py-2 text-sm font-medium text-yellow-700 dark:text-yellow-300 bg-yellow-50 dark:bg-yellow-900/30 border border-yellow-200 dark:border-yellow-800 rounded-md hover:bg-yellow-100 dark:hover:bg-yellow-900/50">
                                    <i class="fas fa-broom"></i>
                                    Temizle
                                </button>
                            </form>
                            <form action="{{ route('log-viewer.destroy', $selectedFile) }}" method="POST" class="inline" onsubmit="return confirm('Log dosyasını silmek istediğinizden emin misiniz? Bu işlem geri alınamaz!');">
                                @csrf
                                @method('DELETE')
                                <button type="submit" class="inline-flex items-center gap-2 px-3 py-2 text-sm font-medium text-red-700 dark:text-red-300 bg-red-50 dark:bg-red-900/30 border border-red-200 dark:border-red-800 rounded-md hover:bg-red-100 dark:hover:bg-red-900/50">
                                    <i class="fas fa-trash"></i>
                                    Sil
                                </button>
                            </form>
                        </div>
                    </div>

                    <!-- Filters -->
                    <form method="GET" action="{{ route('log-viewer.index') }}" class="mt-4" id="log-filter-form">
                        <input type="hidden" name="file" value="{{ $selectedFile }}">
                        <div class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
                            <div>
                                <label for="lines" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5">Satır Sayısı</label>
                                <select name="lines" id="lines" class="block w-full px-4 py-2.5 text-sm border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 shadow-sm placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:focus:ring-indigo-400 focus:border-indigo-500 dark:focus:border-indigo-400 transition-all duration-200">
                                    <option value="100" {{ request('lines', 500) == 100 ? 'selected' : '' }}>100</option>
                                    <option value="500" {{ request('lines', 500) == 500 ? 'selected' : '' }}>500</option>
                                    <option value="1000" {{ request('lines', 500) == 1000 ? 'selected' : '' }}>1000</option>
                                    <option value="5000" {{ request('lines', 500) == 5000 ? 'selected' : '' }}>5000</option>
                                </select>
                            </div>
                            <div>
                                <label for="level" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5">Log Seviyesi</label>
                                <select name="level" id="level" class="block w-full px-4 py-2.5 text-sm border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 shadow-sm placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:focus:ring-indigo-400 focus:border-indigo-500 dark:focus:border-indigo-400 transition-all duration-200">
                                    <option value="">Tümü</option>
                                    @foreach($levels as $key => $label)
                                    <option value="{{ $key }}" {{ request('level') === $key ? 'selected' : '' }}>{{ $label }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div>
                                <label for="date_from" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5">Başlangıç Tarihi</label>
                                <input type="date" name="date_from" id="date_from" value="{{ request('date_from') }}" 
                                       class="block w-full px-4 py-2.5 text-sm border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 shadow-sm placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:focus:ring-indigo-400 focus:border-indigo-500 dark:focus:border-indigo-400 transition-all duration-200">
                            </div>
                            <div>
                                <label for="date_to" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5">Bitiş Tarihi</label>
                                <input type="date" name="date_to" id="date_to" value="{{ request('date_to') }}" 
                                       class="block w-full px-4 py-2.5 text-sm border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 shadow-sm placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:focus:ring-indigo-400 focus:border-indigo-500 dark:focus:border-indigo-400 transition-all duration-200">
                            </div>
                            <div class="sm:col-span-2 lg:col-span-4">
                                <label for="search" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5">Ara</label>
                                <input type="text" name="search" id="search" value="{{ request('search') }}" 
                                       placeholder="Mesaj veya stack trace içinde ara..."
                                       class="block w-full px-4 py-2.5 text-sm border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 shadow-sm placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:focus:ring-indigo-400 focus:border-indigo-500 dark:focus:border-indigo-400 transition-all duration-200">
                            </div>
                        </div>
                        <div class="mt-4 flex items-center gap-2 flex-wrap">
                            <button type="submit" class="inline-flex items-center gap-2 px-4 py-2.5 border border-transparent text-sm font-semibold rounded-lg shadow-sm text-white bg-indigo-600 dark:bg-indigo-500 hover:bg-indigo-700 dark:hover:bg-indigo-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-indigo-400 transition-all duration-200">
                                <i class="fas fa-filter"></i>
                                Filtrele
                            </button>
                            <a href="{{ route('log-viewer.index', ['file' => $selectedFile]) }}" class="inline-flex items-center gap-2 px-4 py-2.5 border border-gray-300 dark:border-gray-600 text-sm font-semibold rounded-lg shadow-sm text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 dark:focus:ring-gray-400 transition-all duration-200">
                                <i class="fas fa-times"></i>
                                Filtreleri Temizle
                            </a>
                            <a href="{{ route('log-viewer.export', ['filename' => $selectedFile]) }}?{{ http_build_query(request()->except(['file'])) }}" class="inline-flex items-center gap-2 px-4 py-2.5 border border-gray-300 dark:border-gray-600 text-sm font-semibold rounded-lg shadow-sm text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 dark:focus:ring-gray-400 transition-all duration-200">
                                <i class="fas fa-download"></i>
                                CSV Olarak İndir
                            </a>
                        </div>
                    </form>

                    <!-- Stats -->
                    @if($logStats && !isset($logStats['error']))
                    <div class="mt-4 grid grid-cols-2 gap-4 sm:grid-cols-4">
                        @foreach($logStats['levels'] as $level => $count)
                        <div class="bg-gray-50 dark:bg-gray-700 rounded-lg p-3">
                            <div class="text-sm text-gray-500 dark:text-gray-400">{{ $levels[$level] ?? ucfirst($level) }}</div>
                            <div class="text-2xl font-bold {{ $level === 'error' || $level === 'critical' ? 'text-red-600 dark:text-red-400' : ($level === 'warning' ? 'text-yellow-600 dark:text-yellow-400' : 'text-gray-600 dark:text-gray-400') }}">
                                {{ $count }}
                            </div>
                        </div>
                        @endforeach
                    </div>
                    @endif
                </div>

                <!-- Log Entries -->
                <div class="px-4 py-5 sm:p-6">
                    @if($logContent && !isset($logContent['error']))
                    <div class="space-y-4 max-h-[600px] overflow-y-auto">
                        @forelse($logContent['entries'] as $entry)
                        <div class="border-l-4 {{ $entry['level'] === 'error' || $entry['level'] === 'critical' ? 'border-red-500 dark:border-red-400 bg-red-50 dark:bg-red-900/30' : ($entry['level'] === 'warning' ? 'border-yellow-500 dark:border-yellow-400 bg-yellow-50 dark:bg-yellow-900/30' : ($entry['level'] === 'debug' ? 'border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-700' : 'border-blue-500 dark:border-blue-400 bg-blue-50 dark:bg-blue-900/30')) }} rounded-r-lg p-4">
                            <div class="flex items-start justify-between">
                                <div class="flex-1">
                                    <div class="flex items-center gap-2 mb-2">
                                        <span class="inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium {{ $entry['level'] === 'error' || $entry['level'] === 'critical' ? 'bg-red-100 dark:bg-red-900/50 text-red-800 dark:text-red-300' : ($entry['level'] === 'warning' ? 'bg-yellow-100 dark:bg-yellow-900/50 text-yellow-800 dark:text-yellow-300' : ($entry['level'] === 'debug' ? 'bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-300' : 'bg-blue-100 dark:bg-blue-900/50 text-blue-800 dark:text-blue-300')) }}">
                                            {{ strtoupper($entry['level']) }}
                                        </span>
                                        <span class="text-xs text-gray-500 dark:text-gray-400 dark:text-gray-500">{{ $entry['date'] }}</span>
                                        <span class="text-xs text-gray-400 dark:text-gray-500">{{ $entry['environment'] }}</span>
                                    </div>
                                    <div class="text-sm text-gray-900 dark:text-gray-100 font-mono whitespace-pre-wrap break-words">{{ $entry['message'] }}</div>
                                    @if(!empty(trim($entry['stack'])))
                                    <details class="mt-2">
                                        <summary class="text-xs text-gray-600 dark:text-gray-400 cursor-pointer hover:text-gray-900 dark:hover:text-gray-200">Stack Trace</summary>
                                        <pre class="mt-2 text-xs text-gray-700 dark:text-gray-300 bg-gray-100 dark:bg-gray-700 p-3 rounded overflow-x-auto">{{ trim($entry['stack']) }}</pre>
                                    </details>
                                    @endif
                                </div>
                            </div>
                        </div>
                        @empty
                        <div class="text-center py-8 text-gray-500 dark:text-gray-400 dark:text-gray-500">
                            <i class="fas fa-search text-4xl mb-2"></i>
                            <p>Filtre kriterlerine uygun log girişi bulunamadı.</p>
                        </div>
                        @endforelse
                    </div>
                    @elseif(isset($logContent['error']))
                    <div class="text-center py-8 text-red-500 dark:text-red-400">
                        <i class="fas fa-exclamation-triangle text-4xl mb-2"></i>
                        <p>{{ $logContent['error'] }}</p>
                    </div>
                    @else
                    <div class="text-center py-8 text-gray-500 dark:text-gray-400 dark:text-gray-500">
                        <i class="fas fa-file-alt text-4xl mb-2"></i>
                        <p>Log içeriği yükleniyor...</p>
                    </div>
                    @endif
                </div>
            </div>
            @else
            <div class="bg-white dark:bg-gray-800 shadow rounded-lg overflow-hidden">
                <div class="px-4 py-5 sm:p-6 text-center">
                    <i class="fas fa-file-alt text-4xl text-gray-400 dark:text-gray-500 mb-4"></i>
                    <p class="text-gray-500 dark:text-gray-400 dark:text-gray-500">Görüntülenecek log dosyası seçin</p>
                </div>
            </div>
            @endif
        </div>
    </div>
</div>

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Auto-refresh için (isteğe bağlı)
    // setInterval(() => {
    //     if (document.visibilityState === 'visible') {
    //         location.reload();
    //     }
    // }, 30000); // 30 saniyede bir
});
</script>
@endpush
@endsection