@extends('layouts.admin')

@section('title', 'Backups')
@section('header', 'Gestion des Backups')

@section('content')
<!-- Header with back button -->
<div class="mb-6 flex justify-between items-center">
    <div>
        <p class="text-sm text-gray-600">Historique et restauration des sauvegardes</p>
    </div>
    <a href="{{ route('admin.metadata-setup.index') }}" class="px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50">
        <i class="fas fa-arrow-left mr-2"></i>Retour au dashboard
    </a>
</div>

<!-- Backups List -->
<div class="bg-white shadow rounded-lg">
    <div class="border-b border-gray-200 px-6 py-4 flex justify-between items-center">
        <h3 class="text-lg font-medium text-gray-900">📋 Liste des Backups</h3>
        <span class="text-sm text-gray-500">{{ count($backups) }} backup(s) disponible(s)</span>
    </div>
    <div class="p-0">
        @if(count($backups) > 0)
            <div class="overflow-x-auto">
                <table class="min-w-full divide-y divide-gray-200">
                    <thead class="bg-gray-50">
                        <tr>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Version</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Date de création</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Métadonnées</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Menus</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">CTAs</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Picklists</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Total</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
                        </tr>
                    </thead>
                    <tbody class="bg-white divide-y divide-gray-200">
                        @foreach($backups as $backup)
                        <tr class="hover:bg-gray-50">
                            <td class="px-6 py-4 whitespace-nowrap">
                                <div class="flex items-center">
                                    <span class="flex h-2 w-2 mr-2">
                                        <span class="animate-ping absolute inline-flex h-2 w-2 rounded-full bg-green-400 opacity-75"></span>
                                        <span class="relative inline-flex rounded-full h-2 w-2 bg-green-500"></span>
                                    </span>
                                    <span class="text-sm font-medium text-gray-900">{{ $backup->backup_version }}</span>
                                </div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <div class="text-sm text-gray-900">{{ \Carbon\Carbon::parse($backup->backup_created_at)->format('d/m/Y H:i:s') }}</div>
                                <div class="text-xs text-gray-500">{{ \Carbon\Carbon::parse($backup->backup_created_at)->diffForHumans() }}</div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
                                    {{ $backup->counts['metadatas'] ?? 0 }}
                                </span>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">
                                    {{ $backup->counts['menus'] ?? 0 }}
                                </span>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800">
                                    {{ $backup->counts['ctas'] ?? 0 }}
                                </span>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-purple-100 text-purple-800">
                                    {{ $backup->counts['picklists'] ?? 0 }}
                                </span>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm font-semibold text-gray-900">
                                {{ $backup->total }}
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                                <div class="flex space-x-2">
                                    <button onclick="previewBackup('{{ $backup->backup_version }}')"
                                            class="text-indigo-600 hover:text-indigo-900" title="Aperçu">
                                        <i class="fas fa-eye"></i>
                                    </button>
                                    <button onclick="restoreBackup('{{ $backup->backup_version }}')"
                                            class="text-green-600 hover:text-green-900" title="Restaurer">
                                        <i class="fas fa-undo"></i>
                                    </button>
                                    <button onclick="deleteBackup('{{ $backup->backup_version }}')"
                                            class="text-red-600 hover:text-red-900" title="Supprimer">
                                        <i class="fas fa-trash"></i>
                                    </button>
                                </div>
                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        @else
            <div class="flex flex-col items-center justify-center py-12">
                <div class="mb-4">
                    <i class="fas fa-folder-open text-6xl text-gray-300"></i>
                </div>
                <p class="text-lg font-semibold text-gray-900 mb-2">Aucun backup disponible</p>
                <p class="text-sm text-gray-500 mb-6">Les backups seront créés automatiquement lors des régénérations.</p>
                <a href="{{ route('admin.metadata-setup.index') }}" class="px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700">
                    <i class="fas fa-plus mr-2"></i>Créer un backup
                </a>
            </div>
        @endif
    </div>
</div>

<!-- Modal de prévisualisation -->
<div id="previewModal" class="hidden fixed inset-0 bg-gray-900 bg-opacity-50 overflow-y-auto h-full w-full z-50" x-data="{ open: false }" x-show="open" x-cloak>
    <div class="relative top-20 mx-auto p-5 border w-11/12 md:w-3/4 lg:w-1/2 shadow-lg rounded-md bg-white">
        <div class="flex justify-between items-center pb-3 border-b">
            <h3 class="text-lg font-medium text-gray-900">📊 Aperçu du Backup</h3>
            <button @click="open = false" class="text-gray-400 hover:text-gray-600">
                <i class="fas fa-times"></i>
            </button>
        </div>
        <div class="mt-4" id="previewContent">
            <div class="flex justify-center py-4">
                <div class="animate-spin rounded-full h-12 w-12 border-b-2 border-indigo-600"></div>
            </div>
        </div>
        <div class="flex justify-end pt-4 border-t mt-4">
            <button @click="open = false" class="px-4 py-2 bg-gray-200 text-gray-800 rounded-md hover:bg-gray-300">
                Fermer
            </button>
        </div>
    </div>
</div>

@push('scripts')
<script>
function previewBackup(version) {
    const modal = document.getElementById('previewModal');
    const content = document.getElementById('previewContent');

    content.innerHTML = `
        <div class="flex justify-center py-4">
            <div class="animate-spin rounded-full h-12 w-12 border-b-2 border-indigo-600"></div>
        </div>
    `;

    modal.classList.remove('hidden');

    setTimeout(() => {
        content.innerHTML = `
            <div class="bg-blue-50 border-l-4 border-blue-400 p-4 mb-4">
                <div class="flex">
                    <div class="flex-shrink-0">
                        <i class="fas fa-info-circle text-blue-400"></i>
                    </div>
                    <div class="ml-3">
                        <h6 class="text-sm font-medium text-blue-800">Backup Version: ${version}</h6>
                        <p class="text-sm text-blue-700 mt-1">Ce backup contient une sauvegarde complète des métadonnées, menus, CTAs et picklists.</p>
                    </div>
                </div>
            </div>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                    <h6 class="font-medium text-gray-900 mb-2">📋 Contenu du backup :</h6>
                    <ul class="space-y-1 text-sm text-gray-600">
                        <li><i class="fas fa-database text-blue-500 mr-2"></i>Métadonnées</li>
                        <li><i class="fas fa-bars text-green-500 mr-2"></i>Menus</li>
                        <li><i class="fas fa-bolt text-yellow-500 mr-2"></i>CTAs</li>
                        <li><i class="fas fa-list text-purple-500 mr-2"></i>Picklists</li>
                    </ul>
                </div>
                <div>
                    <h6 class="font-medium text-gray-900 mb-2">⚠️ Restauration :</h6>
                    <p class="text-sm text-gray-600">
                        La restauration de ce backup remplacera toutes les données actuelles
                        par celles sauvegardées dans cette version.
                    </p>
                </div>
            </div>
        `;
    }, 1000);
}

function restoreBackup(version) {
    if (!confirm(`⚠️ Restaurer le backup ${version} ?\n\nCette action remplacera toutes les données actuelles par celles du backup sélectionné.\n\nContinuer ?`)) {
        return;
    }

    showLoading('Restauration en cours...');

    fetch('{{ route("admin.metadata-setup.restore-backup") }}', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': '{{ csrf_token() }}'
        },
        body: JSON.stringify({ version: version })
    })
    .then(response => response.json())
    .then(data => {
        hideLoading();
        if (data.success) {
            showAlert('success', data.message);
            setTimeout(() => {
                window.location.href = '{{ route("admin.metadata-setup.index") }}';
            }, 2000);
        } else {
            showAlert('danger', 'Erreur: ' + data.message);
        }
    })
    .catch(error => {
        hideLoading();
        showAlert('danger', 'Erreur: ' + error.message);
    });
}

function deleteBackup(version) {
    if (!confirm(`🗑️ Supprimer le backup ${version} ?\n\nCette action est irréversible.\n\nContinuer ?`)) {
        return;
    }

    showAlert('warning', 'Fonctionnalité de suppression à implémenter');
}

function showAlert(type, message) {
    const alertColors = {
        'success': 'bg-green-50 border-green-400 text-green-800',
        'danger': 'bg-red-50 border-red-400 text-red-800',
        'warning': 'bg-yellow-50 border-yellow-400 text-yellow-800'
    };

    const alert = document.createElement('div');
    alert.className = `${alertColors[type]} border-l-4 p-4 mb-4 rounded`;
    alert.innerHTML = `
        <div class="flex items-center justify-between">
            <p class="text-sm font-medium">${message}</p>
            <button onclick="this.parentElement.parentElement.remove()" class="text-gray-400 hover:text-gray-600">
                <i class="fas fa-times"></i>
            </button>
        </div>
    `;

    document.querySelector('main > div').prepend(alert);

    setTimeout(() => {
        alert.remove();
    }, 5000);
}

function showLoading(message) {
    const overlay = document.createElement('div');
    overlay.id = 'loading-overlay';
    overlay.className = 'fixed inset-0 bg-gray-900 bg-opacity-50 flex items-center justify-center z-50';
    overlay.innerHTML = `
        <div class="bg-white rounded-lg p-6 flex flex-col items-center">
            <div class="animate-spin rounded-full h-12 w-12 border-b-2 border-indigo-600 mb-4"></div>
            <div class="text-gray-700">${message}</div>
        </div>
    `;
    document.body.appendChild(overlay);
}

function hideLoading() {
    const overlay = document.getElementById('loading-overlay');
    if (overlay) {
        overlay.remove();
    }
}
</script>
@endpush
@endsection