<x-app-layout>
    <x-slot name="header">
        <div class="flex justify-between items-center">
            <div>
                <h2 class="font-semibold text-lg text-gray-800 dark:text-gray-200 leading-tight">
                    <i class="fas fa-history mr-2 text-purple-500"></i>Loguri Sincronizare Cloudflare
                </h2>
                <p class="mt-1 text-sm text-gray-600 dark:text-gray-400">
                    <a href="{{ route('dashboard') }}" class="text-blue-600 dark:text-blue-400 hover:underline">Dashboard</a>
                    <span class="mx-2">/</span>
                    <a href="{{ route('cloudflare.index') }}" class="text-blue-600 dark:text-blue-400 hover:underline">Cloudflare</a>
                    <span class="mx-2">/</span>
                    <span>Loguri</span>
                </p>
            </div>
            <a href="{{ route('cloudflare.index') }}" class="inline-flex items-center justify-center w-10 h-10 text-gray-600 dark:text-gray-400 hover:text-indigo-600 dark:hover:text-indigo-400 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition" title="Înapoi">
                <i class="fas fa-arrow-left"></i>
            </a>
        </div>
    </x-slot>

    <div class="py-12">
        <div class="px-6 lg:px-8 space-y-6">

            <!-- Filters -->
            <div class="bg-white dark:bg-gray-800 overflow-hidden shadow-sm sm:rounded-lg">
                <div class="p-4">
                    <form action="{{ route('cloudflare.logs') }}" method="GET" class="flex flex-wrap gap-4 items-end">
                        <div>
                            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Status</label>
                            <select name="status" class="rounded-md border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white text-sm">
                                <option value="">Toate</option>
                                <option value="success" {{ request('status') == 'success' ? 'selected' : '' }}>Succes</option>
                                <option value="partial" {{ request('status') == 'partial' ? 'selected' : '' }}>Parțial</option>
                                <option value="failed" {{ request('status') == 'failed' ? 'selected' : '' }}>Eșuat</option>
                            </select>
                        </div>
                        <button type="submit" class="px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white text-sm rounded-lg transition">
                            <i class="fas fa-filter mr-1"></i>Filtrează
                        </button>
                        @if(request()->hasAny(['status', 'zone_id']))
                            <a href="{{ route('cloudflare.logs') }}" class="px-4 py-2 text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 text-sm rounded-lg transition">
                                <i class="fas fa-times mr-1"></i>Resetează
                            </a>
                        @endif
                    </form>
                </div>
            </div>

            <!-- Logs Table -->
            <div class="bg-white dark:bg-gray-800 overflow-hidden shadow-sm sm:rounded-lg">
                <div class="p-6">
                    @if($logs->isEmpty())
                        <div class="text-center py-8">
                            <i class="fas fa-clipboard-list text-gray-400 text-4xl mb-4"></i>
                            <p class="text-gray-500 dark:text-gray-400">Nu există loguri de sincronizare.</p>
                        </div>
                    @else
                        <div class="overflow-x-auto">
                            <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
                                <thead class="bg-gray-50 dark:bg-gray-700">
                                    <tr>
                                        <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase">Data</th>
                                        <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase">Zonă</th>
                                        <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase">Acțiune</th>
                                        <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase">Direcție</th>
                                        <th class="px-4 py-3 text-center text-xs font-medium text-gray-500 dark:text-gray-300 uppercase">Status</th>
                                        <th class="px-4 py-3 text-center text-xs font-medium text-gray-500 dark:text-gray-300 uppercase">Records</th>
                                        <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase">Durată</th>
                                        <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase">Eroare</th>
                                    </tr>
                                </thead>
                                <tbody class="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
                                    @foreach($logs as $log)
                                        <tr class="hover:bg-gray-50 dark:hover:bg-gray-700">
                                            <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">
                                                {{ $log->created_at->format('d.m.Y H:i:s') }}
                                            </td>
                                            <td class="px-4 py-3 whitespace-nowrap">
                                                @if($log->cloudflareZone && $log->cloudflareZone->dnsZone)
                                                    <a href="{{ route('cloudflare.zones.show', $log->cloudflareZone) }}" class="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300 text-sm">
                                                        {{ $log->cloudflareZone->domain }}
                                                    </a>
                                                @else
                                                    <span class="text-sm text-gray-400">-</span>
                                                @endif
                                            </td>
                                            <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-900 dark:text-white">
                                                {{ $log->action_label }}
                                            </td>
                                            <td class="px-4 py-3 whitespace-nowrap text-sm">
                                                <i class="fas {{ $log->direction_icon }} mr-1 text-gray-500"></i>
                                                <span class="text-gray-600 dark:text-gray-400">{{ $log->direction_label }}</span>
                                            </td>
                                            <td class="px-4 py-3 text-center">
                                                <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-{{ $log->status_color }}-100 text-{{ $log->status_color }}-800 dark:bg-{{ $log->status_color }}-900/30 dark:text-{{ $log->status_color }}-300">
                                                    {{ $log->status_label }}
                                                </span>
                                            </td>
                                            <td class="px-4 py-3 text-center text-sm">
                                                <span class="text-green-600 dark:text-green-400">{{ $log->records_synced }}</span>
                                                @if($log->records_failed > 0)
                                                    <span class="text-gray-400">/</span>
                                                    <span class="text-red-600 dark:text-red-400">{{ $log->records_failed }}</span>
                                                @endif
                                            </td>
                                            <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">
                                                {{ $log->formatted_duration }}
                                            </td>
                                            <td class="px-4 py-3 text-sm">
                                                @if($log->error_message)
                                                    <span class="text-red-600 dark:text-red-400 cursor-help" title="{{ $log->error_message }}">
                                                        {{ Str::limit($log->error_message, 30) }}
                                                    </span>
                                                @else
                                                    <span class="text-gray-400">-</span>
                                                @endif
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>

                        <!-- Pagination -->
                        <div class="mt-4">
                            {{ $logs->withQueryString()->links() }}
                        </div>
                    @endif
                </div>
            </div>

        </div>
    </div>
</x-app-layout>
