<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-tachometer-alt mr-2"></i>Istoric modificări - {{ $record->name }}.{{ $dnsZone->domain }}
                </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('dns-zones.index') }}" class="text-blue-600 dark:text-blue-400 hover:underline">Zone DNS</a>
                    <span class="mx-2">/</span>
                    <a href="{{ route('dns-zones.show', $dnsZone) }}" class="text-blue-600 dark:text-blue-400 hover:underline">{{ $dnsZone->domain }}</a>
                    <span class="mx-2">/</span>
                    <span>Istoric {{ $record->name }}</span>
                </p>
            </div>
            <a href="{{ route('dns-zones.show', $dnsZone) }}" class="text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-200">
                <i class="fas fa-arrow-left mr-2"></i>Înapoi la zona DNS
            </a>
        </div>
    </x-slot>

    <div class="py-12">
        <div class="px-6 lg:px-8">
            <div class="bg-white dark:bg-gray-800 overflow-hidden shadow-sm sm:rounded-lg">
                <div class="p-6">
                    <div class="mb-6 p-4 bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800 rounded-lg">
                        <div class="flex items-center">
                            <i class="fas fa-server text-green-600 dark:text-green-400 mr-2"></i>
                            <span class="text-green-800 dark:text-green-200 font-medium">Istoric DNS</span>
                        </div>
                        <p class="text-green-700 dark:text-green-300 text-sm mt-1">
                            Modificările pentru înregistrarea <strong>{{ $record->name }}.{{ $dnsZone->domain }}</strong> ({{ $record->type }})
                        </p>
                    </div>
                    @if($changes->count() > 0)
                        <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-900">
                                    <tr>
                                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
                                            Data & Ora
                                        </th>
                                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
                                            Utilizator
                                        </th>
                                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
                                            Acțiune
                                        </th>
                                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
                                            Detalii
                                        </th>
                                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
                                            IP Address
                                        </th>
                                        <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
                                            Acțiuni
                                        </th>
                                    </tr>
                                </thead>
                                <tbody class="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
                                    @foreach($changes as $change)
                                        <tr class="hover:bg-gray-50 dark:hover:bg-gray-700/50 transition">
                                            <td class="px-6 py-4 whitespace-nowrap">
                                                <div class="text-sm text-gray-900 dark:text-gray-100">
                                                    {{ $change->created_at->format('d.m.Y') }}
                                                </div>
                                                <div class="text-xs text-gray-500 dark:text-gray-400">
                                                    {{ $change->created_at->format('H:i:s') }}
                                                </div>
                                            </td>
                                            <td class="px-6 py-4 whitespace-nowrap">
                                                <div class="text-sm font-medium text-gray-900 dark:text-gray-100">
                                                    {{ $change->user->name }}
                                                </div>
                                                <div class="text-sm text-gray-500 dark:text-gray-400">
                                                    {{ $change->user->email }}
                                                </div>
                                            </td>
                                            <td class="px-6 py-4 whitespace-nowrap">
                                                <span class="inline-flex items-center px-2.5 py-1 rounded-lg text-xs font-semibold border {{ $change->action_badge_class }}">
                                                    {{ $change->action_description }}
                                                </span>
                                            </td>
                                            <td class="px-6 py-4">
                                                <div class="text-sm text-gray-900 dark:text-gray-100">
                                                    <strong>Tip:</strong> {{ $record->type }}
                                                </div>

                                                @if($change->action === 'update' && $change->old_values && $change->new_values)
                                                    <div class="text-sm text-gray-600 dark:text-gray-400 mt-1">
                                                        @foreach($change->new_values as $key => $newValue)
                                                            @if(isset($change->old_values[$key]) && $change->old_values[$key] != $newValue)
                                                                <strong class="capitalize">{{ $key }}:</strong><br>
                                                                <span class="text-red-600 dark:text-red-400">- {{ is_bool($change->old_values[$key]) ? ($change->old_values[$key] ? 'Activ' : 'Inactiv') : $change->old_values[$key] }}</span><br>
                                                                <span class="text-green-600 dark:text-green-400">+ {{ is_bool($newValue) ? ($newValue ? 'Activ' : 'Inactiv') : $newValue }}</span><br>
                                                            @endif
                                                        @endforeach
                                                    </div>
                                                @elseif($change->action === 'restore' && $change->old_values && $change->new_values)
                                                    <div class="text-sm text-gray-600 dark:text-gray-400 mt-1">
                                                        <div class="bg-indigo-50 dark:bg-indigo-900/20 border-l-4 border-indigo-400 p-2 mb-2 rounded">
                                                            <p class="text-xs text-indigo-800 dark:text-indigo-200">
                                                                <i class="fas fa-undo-alt mr-1"></i>
                                                                {{ $change->description }}
                                                            </p>
                                                        </div>
                                                        @foreach($change->new_values as $key => $newValue)
                                                            @if(isset($change->old_values[$key]) && $change->old_values[$key] != $newValue)
                                                                <strong class="capitalize">{{ $key }}:</strong><br>
                                                                <span class="text-red-600 dark:text-red-400">- {{ is_bool($change->old_values[$key]) ? ($change->old_values[$key] ? 'Activ' : 'Inactiv') : $change->old_values[$key] }}</span><br>
                                                                <span class="text-green-600 dark:text-green-400">+ {{ is_bool($newValue) ? ($newValue ? 'Activ' : 'Inactiv') : $newValue }}</span><br>
                                                            @endif
                                                        @endforeach
                                                    </div>
                                                @elseif($change->action === 'create' && $change->new_values)
                                                    <div class="text-sm text-gray-600 dark:text-gray-400 mt-1">
                                                        @foreach($change->new_values as $key => $value)
                                                            <strong class="capitalize">{{ $key }}:</strong> {{ is_bool($value) ? ($value ? 'Activ' : 'Inactiv') : $value }}<br>
                                                        @endforeach
                                                    </div>
                                                @elseif($change->action === 'delete' && $change->old_values)
                                                    <div class="text-sm text-gray-600 dark:text-gray-400 mt-1">
                                                        <strong>Valori șterse:</strong><br>
                                                        @foreach($change->old_values as $key => $value)
                                                            <span class="text-red-600 dark:text-red-400">{{ $key }}: {{ is_bool($value) ? ($value ? 'Activ' : 'Inactiv') : $value }}</span><br>
                                                        @endforeach
                                                    </div>
                                                @elseif($change->action === 'toggle_status')
                                                    <div class="text-sm text-gray-600 dark:text-gray-400 mt-1">
                                                        <strong>Status:</strong>
                                                        <span class="{{ isset($change->new_values['is_active']) && $change->new_values['is_active'] ? 'text-green-600 dark:text-green-400' : 'text-red-600 dark:text-red-400' }}">
                                                            {{ isset($change->new_values['is_active']) && $change->new_values['is_active'] ? 'Activ' : 'Inactiv' }}
                                                        </span>
                                                    </div>
                                                @endif
                                            </td>
                                            <td class="px-6 py-4 whitespace-nowrap">
                                                <div class="text-sm text-gray-900 dark:text-gray-100">
                                                    @if($change->ip_address === '::1')
                                                        <span class="text-blue-600 dark:text-blue-400" title="IPv6 Localhost">localhost (::1)</span>
                                                    @elseif($change->ip_address === '127.0.0.1')
                                                        <span class="text-blue-600 dark:text-blue-400" title="IPv4 Localhost">localhost (127.0.0.1)</span>
                                                    @else
                                                        {{ $change->ip_address ?? '-' }}
                                                    @endif
                                                </div>
                                            </td>
                                            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                                                <div class="flex items-center justify-end">
                                                    @if($change->action !== 'delete' && $change->old_values && Auth::user()->canPerformDnsOperations())
                                                        <form id="restore-form-{{ $change->id }}" action="{{ route('dns-records.restore', [$dnsZone, $record, $change->id]) }}" method="POST" class="inline">
                                                            @csrf
                                                        </form>
                                                        <button type="button" onclick="openRestoreModal({{ $change->id }}, '{{ $change->created_at->format('d.m.Y H:i:s') }}')" class="inline-flex items-center justify-center px-3 py-1.5 rounded-lg bg-indigo-50 dark:bg-indigo-900/20 text-indigo-600 dark:text-indigo-400 hover:bg-indigo-100 dark:hover:bg-indigo-900/40 border border-indigo-200 dark:border-indigo-800 transition text-xs font-semibold" title="Restaurează această versiune">
                                                            <i class="fas fa-undo-alt mr-1.5"></i>
                                                            Restore
                                                        </button>
                                                    @else
                                                        <span class="inline-flex items-center px-2.5 py-1 rounded-lg text-xs font-semibold bg-gray-50 dark:bg-gray-900/50 text-gray-500 dark:text-gray-400 border border-gray-200 dark:border-gray-700">-</span>
                                                    @endif
                                                </div>
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>

                        <!-- Pagination -->
                        <div class="mt-6">
                            {{ $changes->links() }}
                        </div>
                    @else
                        <div class="text-center py-12">
                            <i class="fas fa-history text-gray-400 dark:text-gray-600 text-6xl mb-4"></i>
                            <h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100 mb-2">Fără istoric</h3>
                            <p class="text-gray-600 dark:text-gray-400 mb-6">Nu au fost găsite modificări pentru această înregistrare</p>
                            <a href="{{ route('dns-zones.show', $dnsZone) }}" class="inline-flex items-center px-6 py-3 bg-indigo-600 hover:bg-indigo-700 text-white font-semibold rounded-lg transition">
                                <i class="fas fa-arrow-left mr-2"></i>
                                Înapoi la zona DNS
                            </a>
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>

    <!-- Modal Restaurare -->
    <div id="restoreModal" class="hidden fixed inset-0 bg-black bg-opacity-50 dark:bg-opacity-70 z-50 flex items-center justify-center p-4" onclick="if(event.target === this) closeRestoreModal()">
        <div class="relative w-full max-w-lg max-h-[85vh] overflow-y-auto bg-white dark:bg-gray-800 rounded-lg shadow-xl" onclick="event.stopPropagation()" style="max-width: min(32rem, 98vw);">
            <div class="p-6">
                <!-- Header -->
                <div class="flex items-center justify-between pb-4 border-b border-gray-200 dark:border-gray-700">
                    <h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100">
                        <i class="fas fa-exclamation-triangle text-indigo-600 dark:text-indigo-400 mr-2"></i>
                        Confirmare Restaurare
                    </h3>
                    <button onclick="closeRestoreModal()" class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-200 transition">
                        <i class="fas fa-times text-2xl"></i>
                    </button>
                </div>

                <!-- Content -->
                <div class="py-6">
                    <div class="bg-indigo-50 dark:bg-indigo-900/20 border border-indigo-200 dark:border-indigo-800 rounded-lg p-4 mb-4">
                        <p class="text-sm text-indigo-800 dark:text-indigo-200">
                            <i class="fas fa-exclamation-circle mr-2"></i>
                            <strong>Atenție!</strong> Această acțiune este ireversibilă!
                        </p>
                    </div>

                    <p class="text-gray-700 dark:text-gray-300 mb-4">
                        Ești sigur că vrei să restaurezi această versiune din <strong id="restoreDate" class="text-indigo-600 dark:text-indigo-400"></strong>?
                    </p>

                    <div class="bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 rounded-lg p-4">
                        <p class="text-sm text-yellow-800 dark:text-yellow-200">
                            <i class="fas fa-info-circle mr-2"></i>
                            Toate modificările actuale vor fi suprascrise permanent!
                        </p>
                    </div>
                </div>

                <!-- Footer -->
                <div class="flex items-center justify-end space-x-3 pt-4 border-t border-gray-200 dark:border-gray-700">
                    <button onclick="closeRestoreModal()" class="px-4 py-2 bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded-lg hover:bg-gray-300 dark:hover:bg-gray-600 transition">
                        <i class="fas fa-times mr-2"></i>
                        Anulează
                    </button>
                    <button onclick="confirmRestore()" class="px-4 py-2 bg-indigo-600 hover:bg-indigo-700 text-white rounded-lg transition">
                        <i class="fas fa-undo-alt mr-2"></i>
                        Restaurează
                    </button>
                </div>
            </div>
        </div>
    </div>

    <script>
        let currentRestoreFormId = null;

        function openRestoreModal(changeId, date) {
            currentRestoreFormId = changeId;
            document.getElementById('restoreDate').textContent = date;
            document.getElementById('restoreModal').classList.remove('hidden');
        }

        function closeRestoreModal() {
            document.getElementById('restoreModal').classList.add('hidden');
            currentRestoreFormId = null;
        }

        function confirmRestore() {
            if (currentRestoreFormId) {
                document.getElementById('restore-form-' + currentRestoreFormId).submit();
            }
        }

        // Close modal on ESC key
        document.addEventListener('keydown', function(e) {
            if (e.key === 'Escape' && !document.getElementById('restoreModal').classList.contains('hidden')) {
                closeRestoreModal();
            }
        });
    </script>
</x-app-layout>
