@extends('layouts.admin')

@section('title', 'Detalii Backup')

@section('content')
<div class="space-y-6">
    <!-- Header cu Acțiuni -->
    <div class="flex items-center justify-between">
        <div>
            <a href="{{ route('admin.backups.index') }}" class="text-blue-600 hover:text-blue-700 dark:text-blue-400 mb-2 inline-flex items-center">
                <i class="fas fa-arrow-left mr-2"></i>Înapoi la Backup-uri
            </a>
            <h1 class="text-3xl font-bold text-gray-900 dark:text-white">
                Backup: {{ $backup->name }}
            </h1>
            <p class="mt-2 text-sm text-gray-600 dark:text-gray-400">
                {{ $backup->created_at->format('d M Y, H:i') }}
            </p>
        </div>

        <div class="flex gap-3">
            <button onclick="showRestoreModal()" class="px-4 py-2 bg-green-600 hover:bg-green-700 text-white rounded-lg transition">
                <i class="fas fa-undo mr-2"></i>Restaurează
            </button>
            <a href="{{ route('admin.backups.download', $backup) }}"
               class="px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg transition">
                <i class="fas fa-download mr-2"></i>Descarcă
            </a>
            <button onclick="deleteBackup()" class="px-4 py-2 bg-red-600 hover:bg-red-700 text-white rounded-lg transition">
                <i class="fas fa-trash mr-2"></i>Șterge
            </button>
        </div>
    </div>

    <!-- Informații Backup -->
    <div class="grid grid-cols-1 md:grid-cols-4 gap-6">
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-sm text-gray-600 dark:text-gray-400">Tip</p>
                    <p class="mt-2 text-2xl font-bold text-gray-900 dark:text-white">
                        {{ ucfirst($backup->type) }}
                    </p>
                </div>
                <div class="p-3 bg-blue-100 dark:bg-blue-900/30 rounded-lg">
                    <i class="fas fa-{{ $backup->type === 'full' ? 'database' : ($backup->type === 'zones' ? 'globe' : 'server') }} text-2xl text-blue-600 dark:text-blue-400"></i>
                </div>
            </div>
        </div>

        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-sm text-gray-600 dark:text-gray-400">Dimensiune</p>
                    <p class="mt-2 text-2xl font-bold text-gray-900 dark:text-white">
                        {{ number_format($backup->size / 1024 / 1024, 2) }} MB
                    </p>
                </div>
                <div class="p-3 bg-purple-100 dark:bg-purple-900/30 rounded-lg">
                    <i class="fas fa-hdd text-2xl text-purple-600 dark:text-purple-400"></i>
                </div>
            </div>
        </div>

        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-sm text-gray-600 dark:text-gray-400">Status</p>
                    <p class="mt-2 text-lg font-bold
                        @if($backup->status === 'completed') text-green-600 dark:text-green-400
                        @elseif($backup->status === 'failed') text-red-600 dark:text-red-400
                        @else text-yellow-600 dark:text-yellow-400
                        @endif">
                        @if($backup->status === 'completed')
                            <i class="fas fa-check-circle"></i> Complet
                        @elseif($backup->status === 'failed')
                            <i class="fas fa-times-circle"></i> Eșuat
                        @else
                            <i class="fas fa-spinner fa-spin"></i> În progres
                        @endif
                    </p>
                </div>
            </div>
        </div>

        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-sm text-gray-600 dark:text-gray-400">Restaurări</p>
                    <p class="mt-2 text-2xl font-bold text-gray-900 dark:text-white">
                        {{ $backup->restorations->count() }}
                    </p>
                </div>
                <div class="p-3 bg-green-100 dark:bg-green-900/30 rounded-lg">
                    <i class="fas fa-history text-2xl text-green-600 dark:text-green-400"></i>
                </div>
            </div>
        </div>
    </div>

    <!-- Detalii Backup -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
        <h2 class="text-xl font-bold text-gray-900 dark:text-white mb-4">
            <i class="fas fa-info-circle mr-2"></i>Detalii Backup
        </h2>

        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div>
                <h3 class="font-semibold text-gray-900 dark:text-white mb-2">Informații Generale</h3>
                <dl class="space-y-2">
                    <div class="flex justify-between">
                        <dt class="text-gray-600 dark:text-gray-400">Creat la:</dt>
                        <dd class="text-gray-900 dark:text-white font-medium">{{ $backup->created_at->format('d M Y, H:i:s') }}</dd>
                    </div>
                    <div class="flex justify-between">
                        <dt class="text-gray-600 dark:text-gray-400">Creat de:</dt>
                        <dd class="text-gray-900 dark:text-white font-medium">{{ $backup->user->name ?? 'Sistem' }}</dd>
                    </div>
                    <div class="flex justify-between">
                        <dt class="text-gray-600 dark:text-gray-400">Cale Fișier:</dt>
                        <dd class="text-gray-900 dark:text-white font-medium text-sm break-all">{{ $backup->path }}</dd>
                    </div>
                    @if($backup->metadata)
                        <div class="flex justify-between">
                            <dt class="text-gray-600 dark:text-gray-400">Zone Incluse:</dt>
                            <dd class="text-gray-900 dark:text-white font-medium">{{ $backup->metadata['zones_count'] ?? 'N/A' }}</dd>
                        </div>
                    @endif
                </dl>
            </div>

            @if($backup->error_message)
                <div>
                    <h3 class="font-semibold text-red-600 dark:text-red-400 mb-2">Mesaj Eroare</h3>
                    <div class="bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg p-4">
                        <p class="text-sm text-red-800 dark:text-red-300">{{ $backup->error_message }}</p>
                    </div>
                </div>
            @endif
        </div>
    </div>

    <!-- Istoric Restaurări -->
    @if($backup->restorations->count() > 0)
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
            <h2 class="text-xl font-bold text-gray-900 dark:text-white mb-4">
                <i class="fas fa-history mr-2"></i>Istoric Restaurări
            </h2>

            <div class="space-y-4">
                @foreach($backup->restorations as $restoration)
                    <div class="border border-gray-200 dark:border-gray-700 rounded-lg p-4">
                        <div class="flex items-start justify-between">
                            <div class="flex-1">
                                <div class="flex items-center gap-3 mb-2">
                                    <span class="px-2 py-1 text-xs font-semibold rounded-full
                                        @if($restoration->status === 'completed') bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-300
                                        @elseif($restoration->status === 'failed') bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-300
                                        @else bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-300
                                        @endif">
                                        {{ ucfirst($restoration->status) }}
                                    </span>
                                    <span class="text-sm text-gray-600 dark:text-gray-400">
                                        {{ $restoration->created_at->format('d M Y, H:i') }}
                                    </span>
                                </div>

                                <p class="text-sm text-gray-900 dark:text-white">
                                    Restaurat de: <strong>{{ $restoration->user->name }}</strong>
                                </p>

                                @if($restoration->selected_zones)
                                    <p class="text-xs text-gray-600 dark:text-gray-400 mt-1">
                                        Zone selectate: {{ count($restoration->selected_zones) }}
                                    </p>
                                @endif

                                @if($restoration->error_message)
                                    <div class="mt-2 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded p-2">
                                        <p class="text-xs text-red-800 dark:text-red-300">{{ $restoration->error_message }}</p>
                                    </div>
                                @endif
                            </div>

                            <div class="ml-4">
                                @if($restoration->completed_at)
                                    <p class="text-xs text-gray-600 dark:text-gray-400">
                                        Durată: {{ $restoration->started_at->diffInSeconds($restoration->completed_at) }}s
                                    </p>
                                @endif
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    @endif
</div>

<!-- Modal: Restaurare -->
<div id="restoreModal" class="hidden fixed inset-0 bg-gray-900 bg-opacity-50 overflow-y-auto h-full w-full z-50">
    <div class="relative top-20 mx-auto p-8 border w-full max-w-3xl shadow-lg rounded-lg bg-white dark:bg-gray-800">
        <div class="flex items-center justify-between mb-6">
            <h3 class="text-2xl font-bold text-gray-900 dark:text-white">Restaurează Backup</h3>
            <button onclick="closeRestoreModal()" class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300">
                <i class="fas fa-times text-2xl"></i>
            </button>
        </div>

        <form id="restoreForm" class="space-y-6">
            @csrf

            <div class="bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 rounded-lg p-4">
                <div class="flex">
                    <i class="fas fa-exclamation-triangle text-yellow-600 dark:text-yellow-400 mt-1 mr-3"></i>
                    <div class="text-sm text-yellow-800 dark:text-yellow-300">
                        <p class="font-semibold mb-1">Atenție!</p>
                        <p>Restaurarea va suprascrie datele existente. Această acțiune nu poate fi anulată.</p>
                    </div>
                </div>
            </div>

            @if($backup->type === 'zones' || $backup->type === 'full')
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                        Opțiuni Restaurare Zone
                    </label>
                    <div class="space-y-2">
                        <div class="flex items-center">
                            <input type="checkbox" name="overwrite_existing" id="overwrite" checked
                                   class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500">
                            <label for="overwrite" class="ml-2 text-sm text-gray-700 dark:text-gray-300">
                                Suprascrie zonele existente cu aceleași nume
                            </label>
                        </div>
                    </div>
                </div>
            @endif

            <div class="border-t border-gray-200 dark:border-gray-700 pt-6">
                <p class="text-sm text-gray-600 dark:text-gray-400 mb-4">
                    Confirmă restaurarea urmând pașii:
                </p>
                <ol class="list-decimal list-inside space-y-2 text-sm text-gray-700 dark:text-gray-300">
                    <li>Backup-ul va fi extras</li>
                    @if($backup->type === 'database' || $backup->type === 'full')
                        <li>Baza de date va fi restaurată</li>
                    @endif
                    @if($backup->type === 'zones' || $backup->type === 'full')
                        <li>Zonele DNS vor fi restaurate</li>
                    @endif
                    <li>Serverele nameserver vor fi resincronizate</li>
                </ol>
            </div>

            <div class="flex gap-3">
                <button type="button" onclick="closeRestoreModal()"
                        class="flex-1 px-4 py-3 bg-gray-600 hover:bg-gray-700 text-white rounded-lg transition">
                    Anulează
                </button>
                <button type="submit"
                        class="flex-1 px-4 py-3 bg-green-600 hover:bg-green-700 text-white rounded-lg transition font-semibold">
                    <i class="fas fa-undo mr-2"></i>Confirmă Restaurarea
                </button>
            </div>
        </form>
    </div>
</div>

@push('scripts')
<script>
function showRestoreModal() {
    document.getElementById('restoreModal').classList.remove('hidden');
}

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

document.getElementById('restoreForm').addEventListener('submit', async function(e) {
    e.preventDefault();

    if (!confirm('Sigur doriți să restaurați acest backup? Această acțiune va suprascrie datele existente!')) {
        return;
    }

    const formData = new FormData(this);
    const data = {
        overwrite_existing: document.getElementById('overwrite')?.checked || false
    };

    try {
        const response = await fetch('{{ route("admin.backups.restore", $backup) }}', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': '{{ csrf_token() }}'
            },
            body: JSON.stringify(data)
        });

        const result = await response.json();

        if (result.success) {
            alert('Restaurare inițiată cu succes! Procesul va rula în fundal.');
            location.reload();
        } else {
            alert('Eroare: ' + result.message);
        }
    } catch (error) {
        alert('A apărut o eroare la restaurare');
        console.error(error);
    }
});

async function deleteBackup() {
    if (!confirm('Sigur doriți să ștergeți acest backup? Această acțiune nu poate fi anulată!')) {
        return;
    }

    try {
        const response = await fetch('{{ route("admin.backups.destroy", $backup) }}', {
            method: 'DELETE',
            headers: {
                'X-CSRF-TOKEN': '{{ csrf_token() }}'
            }
        });

        const result = await response.json();

        if (result.success) {
            alert('Backup șters cu succes!');
            window.location.href = '{{ route("admin.backups.index") }}';
        } else {
            alert('Eroare: ' + result.message);
        }
    } catch (error) {
        alert('A apărut o eroare la ștergere');
        console.error(error);
    }
}
</script>
@endpush
@endsection