<x-app-layout>
    <x-slot name="header">
        <div class="flex items-center justify-between">
            <div>
                <h2 class="font-semibold text-lg text-gray-800 dark:text-gray-200 leading-tight">
                    <i class="fas fa-history mr-2 text-amber-500"></i>Jurnal Activitate
                </h2>
                <p class="mt-1 text-sm text-gray-600 dark:text-gray-400">
                    Istoricul tuturor acțiunilor efectuate în contul tău
                </p>
            </div>
            <a href="{{ route('activity.export', request()->query()) }}"
               class="inline-flex items-center px-4 py-2 bg-green-600 hover:bg-green-700 text-white font-medium rounded-lg transition">
                <i class="fas fa-download mr-2"></i>
                Exportă CSV
            </a>
        </div>
    </x-slot>

    <div class="py-6">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 space-y-6">

            {{-- Statistici --}}
            <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
                <div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 p-4">
                    <div class="flex items-center gap-3">
                        <div class="w-10 h-10 rounded-lg bg-gradient-to-br from-blue-400 to-blue-600 flex items-center justify-center">
                            <i class="fas fa-list text-white"></i>
                        </div>
                        <div>
                            <p class="text-2xl font-bold text-gray-900 dark:text-white">{{ number_format($stats['total']) }}</p>
                            <p class="text-xs text-gray-500 dark:text-gray-400">Total Activități</p>
                        </div>
                    </div>
                </div>

                <div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 p-4">
                    <div class="flex items-center gap-3">
                        <div class="w-10 h-10 rounded-lg bg-gradient-to-br from-green-400 to-green-600 flex items-center justify-center">
                            <i class="fas fa-calendar-day text-white"></i>
                        </div>
                        <div>
                            <p class="text-2xl font-bold text-gray-900 dark:text-white">{{ $stats['today'] }}</p>
                            <p class="text-xs text-gray-500 dark:text-gray-400">Astăzi</p>
                        </div>
                    </div>
                </div>

                <div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 p-4">
                    <div class="flex items-center gap-3">
                        <div class="w-10 h-10 rounded-lg bg-gradient-to-br from-purple-400 to-purple-600 flex items-center justify-center">
                            <i class="fas fa-calendar-week text-white"></i>
                        </div>
                        <div>
                            <p class="text-2xl font-bold text-gray-900 dark:text-white">{{ $stats['this_week'] }}</p>
                            <p class="text-xs text-gray-500 dark:text-gray-400">Săptămâna aceasta</p>
                        </div>
                    </div>
                </div>

                <div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 p-4">
                    <div class="flex items-center gap-3">
                        <div class="w-10 h-10 rounded-lg bg-gradient-to-br from-amber-400 to-amber-600 flex items-center justify-center">
                            <i class="fas fa-calendar-alt text-white"></i>
                        </div>
                        <div>
                            <p class="text-2xl font-bold text-gray-900 dark:text-white">{{ $stats['this_month'] }}</p>
                            <p class="text-xs text-gray-500 dark:text-gray-400">Luna aceasta</p>
                        </div>
                    </div>
                </div>
            </div>

            {{-- Filtre - pe un singur rând compact --}}
            <div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 p-4">
                <form method="GET" action="{{ route('activity.index') }}" class="grid grid-cols-5 gap-4 items-end">
                    <div>
                        <label class="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-1">Tip Acțiune</label>
                        <select name="action" class="w-full rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white text-sm py-2">
                            <option value="">Toate</option>
                            @foreach($actionTypes as $type)
                                <option value="{{ $type }}" {{ request('action') === $type ? 'selected' : '' }}>{{ ucfirst($type) }}</option>
                            @endforeach
                        </select>
                    </div>

                    <div>
                        <label class="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-1">Zonă DNS</label>
                        <select name="zone_id" class="w-full rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white text-sm py-2">
                            <option value="">Toate</option>
                            @foreach($zones as $zone)
                                <option value="{{ $zone->id }}" {{ request('zone_id') == $zone->id ? 'selected' : '' }}>{{ $zone->domain }}</option>
                            @endforeach
                        </select>
                    </div>

                    <div>
                        <label class="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-1">De la</label>
                        <input type="date" name="date_from" value="{{ request('date_from') }}"
                            class="w-full rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white text-sm py-2">
                    </div>

                    <div>
                        <label class="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-1">Până la</label>
                        <input type="date" name="date_to" value="{{ request('date_to') }}"
                            class="w-full rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white text-sm py-2">
                    </div>

                    <div class="flex items-center gap-2">
                        <button type="submit" class="px-4 py-2 bg-indigo-600 hover:bg-indigo-700 text-white text-sm font-medium rounded-lg transition">
                            <i class="fas fa-filter mr-1"></i> Filtrează
                        </button>
                        <a href="{{ route('activity.index') }}" class="px-3 py-2 bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 text-gray-700 dark:text-gray-300 text-sm font-medium rounded-lg transition">
                            <i class="fas fa-times"></i>
                        </a>
                    </div>
                </form>
            </div>

            {{-- Lista activități --}}
            <div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700">
                @if($activities->count() > 0)
                    <div class="divide-y divide-gray-200 dark:divide-gray-700">
                        @foreach($activities as $activity)
                            @php
                                $createdAt = \Carbon\Carbon::parse($activity->created_at);
                            @endphp
                            <div class="p-4 hover:bg-gray-50 dark:hover:bg-gray-700/50 transition">
                                <div class="flex items-start gap-4">
                                    {{-- Icon --}}
                                    <div class="flex-shrink-0">
                                        @php
                                            $iconClass = match($activity->action ?? 'default') {
                                                'create', 'created' => 'fas fa-plus bg-green-100 dark:bg-green-900/50 text-green-600 dark:text-green-400',
                                                'update', 'updated' => 'fas fa-edit bg-blue-100 dark:bg-blue-900/50 text-blue-600 dark:text-blue-400',
                                                'delete', 'deleted' => 'fas fa-trash bg-red-100 dark:bg-red-900/50 text-red-600 dark:text-red-400',
                                                'login' => 'fas fa-sign-in-alt bg-purple-100 dark:bg-purple-900/50 text-purple-600 dark:text-purple-400',
                                                'logout' => 'fas fa-sign-out-alt bg-gray-100 dark:bg-gray-900/50 text-gray-600 dark:text-gray-400',
                                                'sync' => 'fas fa-sync bg-cyan-100 dark:bg-cyan-900/50 text-cyan-600 dark:text-cyan-400',
                                                default => 'fas fa-circle bg-gray-100 dark:bg-gray-900/50 text-gray-600 dark:text-gray-400',
                                            };
                                        @endphp
                                        <div class="w-10 h-10 rounded-lg flex items-center justify-center {{ $iconClass }}">
                                        </div>
                                    </div>

                                    {{-- Conținut --}}
                                    <div class="flex-1 min-w-0">
                                        {{-- Titlu și descriere --}}
                                        <p class="text-sm font-medium text-gray-900 dark:text-white">
                                            {{ $activity->description ?? 'Acțiune necunoscută' }}
                                        </p>

                                        {{-- Detalii DNS dacă există --}}
                                        @if($activity->source === 'dns')
                                            <div class="mt-1 flex flex-wrap items-center gap-2 text-xs">
                                                {{-- Domeniu --}}
                                                @if($activity->domain)
                                                    <span class="inline-flex items-center px-2 py-0.5 bg-blue-500 text-white rounded">
                                                        <i class="fas fa-globe mr-1"></i>
                                                        {{ $activity->domain }}
                                                    </span>
                                                @endif
                                                {{-- Record name și type --}}
                                                @if($activity->record_name && $activity->record_type)
                                                    <span class="inline-flex items-center px-2 py-0.5 bg-indigo-500 text-white rounded">
                                                        <i class="fas fa-tag mr-1"></i>
                                                        {{ $activity->record_name }}.{{ $activity->domain }} ({{ $activity->record_type }})
                                                    </span>
                                                @endif
                                            </div>

                                            {{-- Detalii modificări (old/new values) --}}
                                            @php
                                                $oldValues = $activity->old_values;
                                                $newValues = $activity->new_values;
                                            @endphp

                                            @if($oldValues || $newValues)
                                                <div class="mt-2 p-2 bg-gray-50 dark:bg-gray-700/50 rounded-lg text-xs overflow-hidden">
                                                    @if($activity->action === 'create' && $newValues)
                                                        {{-- Creare - afișează noile valori --}}
                                                        <div class="flex items-start gap-2 flex-wrap">
                                                            <span class="text-green-600 dark:text-green-400 font-medium shrink-0">Valoare:</span>
                                                            <span class="text-gray-700 dark:text-gray-300 font-mono break-all">{{ $newValues['content'] ?? 'N/A' }}</span>
                                                            @if(isset($newValues['ttl']))
                                                                <span class="text-gray-500 shrink-0">(TTL: {{ $newValues['ttl'] }})</span>
                                                            @endif
                                                        </div>
                                                    @elseif($activity->action === 'update')
                                                        {{-- Update - afișează vechi → nou --}}
                                                        @if(isset($oldValues['content']) || isset($newValues['content']))
                                                            <div class="flex items-start gap-2 flex-wrap">
                                                                <span class="text-gray-600 dark:text-gray-400 font-medium shrink-0">Content:</span>
                                                                @if(isset($oldValues['content']))
                                                                    <span class="text-red-600 dark:text-red-400 font-mono line-through break-all">{{ $oldValues['content'] }}</span>
                                                                    <i class="fas fa-arrow-right text-gray-400 shrink-0"></i>
                                                                @endif
                                                                <span class="text-green-600 dark:text-green-400 font-mono break-all">{{ $newValues['content'] ?? 'N/A' }}</span>
                                                            </div>
                                                        @endif
                                                        @if((isset($oldValues['ttl']) || isset($newValues['ttl'])) && ($oldValues['ttl'] ?? null) !== ($newValues['ttl'] ?? null))
                                                            <div class="flex items-center gap-2 mt-1">
                                                                <span class="text-gray-600 dark:text-gray-400 font-medium">TTL:</span>
                                                                @if(isset($oldValues['ttl']))
                                                                    <span class="text-red-600 dark:text-red-400">{{ $oldValues['ttl'] }}</span>
                                                                    <i class="fas fa-arrow-right text-gray-400"></i>
                                                                @endif
                                                                <span class="text-green-600 dark:text-green-400">{{ $newValues['ttl'] ?? 'N/A' }}</span>
                                                            </div>
                                                        @endif
                                                    @elseif($activity->action === 'delete' && $oldValues)
                                                        {{-- Ștergere - afișează valorile șterse --}}
                                                        <div class="flex items-start gap-2 flex-wrap">
                                                            <span class="text-red-600 dark:text-red-400 font-medium shrink-0">Șters:</span>
                                                            <span class="text-gray-700 dark:text-gray-300 font-mono line-through break-all">{{ $oldValues['content'] ?? 'N/A' }}</span>
                                                        </div>
                                                    @elseif($activity->action === 'toggle_status')
                                                        {{-- Toggle status --}}
                                                        <div class="flex items-center gap-2">
                                                            <span class="text-gray-600 dark:text-gray-400 font-medium">Status:</span>
                                                            @if(isset($newValues['is_active']))
                                                                @if($newValues['is_active'])
                                                                    <span class="text-green-600 dark:text-green-400"><i class="fas fa-check-circle mr-1"></i>Activat</span>
                                                                @else
                                                                    <span class="text-red-600 dark:text-red-400"><i class="fas fa-times-circle mr-1"></i>Dezactivat</span>
                                                                @endif
                                                            @endif
                                                        </div>
                                                    @endif
                                                </div>
                                            @endif
                                        @endif

                                        {{-- Metadate --}}
                                        <div class="mt-2 flex flex-wrap items-center gap-3 text-xs text-gray-500 dark:text-gray-400">
                                            <span>
                                                <i class="fas fa-clock mr-1"></i>
                                                {{ $createdAt->format('d.m.Y H:i:s') }}
                                            </span>
                                            @if($activity->ip_address)
                                                <span>
                                                    <i class="fas fa-network-wired mr-1"></i>
                                                    {{ $activity->ip_address }}
                                                </span>
                                            @endif
                                            @if($activity->action)
                                                <span class="px-2 py-0.5 bg-gray-200 dark:bg-gray-600 text-gray-700 dark:text-gray-200 rounded">
                                                    {{ ucfirst(str_replace('_', ' ', $activity->action)) }}
                                                </span>
                                            @endif
                                            @if($activity->source === 'dns')
                                                <span class="px-2 py-0.5 bg-indigo-500 text-white rounded">
                                                    <i class="fas fa-server mr-1"></i> DNS
                                                </span>
                                            @endif
                                        </div>
                                    </div>

                                    {{-- Timp relativ --}}
                                    <div class="flex-shrink-0 text-xs text-gray-400 dark:text-gray-500">
                                        {{ $createdAt->diffForHumans() }}
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>

                    {{-- Paginare --}}
                    <div class="p-4 border-t border-gray-200 dark:border-gray-700">
                        {{ $activities->withQueryString()->links() }}
                    </div>
                @else
                    <div class="p-12 text-center">
                        <div class="w-16 h-16 rounded-full bg-gray-100 dark:bg-gray-700 flex items-center justify-center mx-auto mb-4">
                            <i class="fas fa-history text-gray-400 text-2xl"></i>
                        </div>
                        <h3 class="text-lg font-medium text-gray-900 dark:text-white mb-2">Nicio activitate găsită</h3>
                        <p class="text-gray-500 dark:text-gray-400">Nu există înregistrări care să corespundă filtrelor selectate.</p>
                    </div>
                @endif
            </div>

            {{-- Curățare activitate veche --}}
            <div class="bg-amber-50 dark:bg-amber-900/20 rounded-xl border border-amber-200 dark:border-amber-800 p-4">
                <div class="flex items-center justify-between">
                    <div class="flex items-center gap-3">
                        <i class="fas fa-broom text-amber-600 dark:text-amber-400"></i>
                        <div>
                            <p class="text-sm font-medium text-amber-900 dark:text-amber-100">Curăță activitatea veche</p>
                            <p class="text-xs text-amber-700 dark:text-amber-300">Șterge înregistrările mai vechi de un anumit număr de zile</p>
                        </div>
                    </div>
                    <form method="POST" action="{{ route('activity.cleanup') }}" class="flex items-center gap-2"
                          onsubmit="return confirm('Ești sigur? Această acțiune este ireversibilă.')">
                        @csrf
                        <select name="days" class="rounded-lg border-amber-300 dark:border-amber-600 bg-white dark:bg-gray-700 text-amber-900 dark:text-white text-sm focus:ring-amber-500 focus:border-amber-500 py-2 px-3">
                            <option value="30" class="bg-white dark:bg-gray-700 text-gray-900 dark:text-white">30 zile</option>
                            <option value="60" class="bg-white dark:bg-gray-700 text-gray-900 dark:text-white">60 zile</option>
                            <option value="90" class="bg-white dark:bg-gray-700 text-gray-900 dark:text-white">90 zile</option>
                            <option value="180" class="bg-white dark:bg-gray-700 text-gray-900 dark:text-white">180 zile</option>
                            <option value="365" class="bg-white dark:bg-gray-700 text-gray-900 dark:text-white">1 an</option>
                        </select>
                        <button type="submit" class="px-4 py-2 bg-amber-600 hover:bg-amber-700 text-white text-sm font-medium rounded-lg transition">
                            Curăță
                        </button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</x-app-layout>
