@extends('layouts.app')

@section('title', 'Gestión de Respaldos')

@section('content')
<div class="container-fluid">
    <div class="row">
        <!-- Panel de control -->
        <div class="col-12 mb-3">
            <div class="card">
                <div class="card-body">
                    <div class="row align-items-center">
                        <div class="col-md-3">
                            <h5 class="mb-0">
                                <i class="fas fa-database text-primary"></i>
                                Gestión de Respaldos
                            </h5>
                        </div>
                        <div class="col-md-9 text-right">
                            <div class="btn-group">
                                <button type="button" class="btn btn-success" onclick="createBackup()">
                                    <i class="fas fa-plus"></i> Crear Respaldo
                                </button>
                                <button type="button" class="btn btn-info" onclick="showSchedule()">
                                    <i class="fas fa-calendar-alt"></i> Programar
                                </button>
                                <button type="button" class="btn btn-warning" onclick="showConfiguration()">
                                    <i class="fas fa-cog"></i> Configuración
                                </button>
                                <button type="button" class="btn btn-secondary" onclick="loadStatistics()">
                                    <i class="fas fa-chart-pie"></i> Estadísticas
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Estado del sistema -->
        <div class="col-md-3 mb-3">
            <div class="card bg-gradient-primary text-white">
                <div class="card-body">
                    <div class="d-flex align-items-center">
                        <div class="flex-grow-1">
                            <h6 class="mb-0">Último Respaldo</h6>
                            <h4 class="mb-0" id="last-backup-time">{{ $lastBackup ? $lastBackup->created_at->diffForHumans() : 'Nunca' }}</h4>
                        </div>
                        <div class="text-white-50">
                            <i class="fas fa-clock fa-2x"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-md-3 mb-3">
            <div class="card bg-gradient-success text-white">
                <div class="card-body">
                    <div class="d-flex align-items-center">
                        <div class="flex-grow-1">
                            <h6 class="mb-0">Total Respaldos</h6>
                            <h4 class="mb-0">{{ $totalBackups }}</h4>
                        </div>
                        <div class="text-white-50">
                            <i class="fas fa-database fa-2x"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-md-3 mb-3">
            <div class="card bg-gradient-info text-white">
                <div class="card-body">
                    <div class="d-flex align-items-center">
                        <div class="flex-grow-1">
                            <h6 class="mb-0">Espacio Usado</h6>
                            <h4 class="mb-0">{{ formatBytes($totalSize) }}</h4>
                        </div>
                        <div class="text-white-50">
                            <i class="fas fa-hdd fa-2x"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-md-3 mb-3">
            <div class="card bg-gradient-warning text-white">
                <div class="card-body">
                    <div class="d-flex align-items-center">
                        <div class="flex-grow-1">
                            <h6 class="mb-0">Estado Sistema</h6>
                            <h4 class="mb-0" id="system-status">
                                <span class="badge badge-light">{{ $systemStatus ? 'Activo' : 'Inactivo' }}</span>
                            </h4>
                        </div>
                        <div class="text-white-50">
                            <i class="fas fa-heartbeat fa-2x"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Lista de respaldos -->
        <div class="col-12">
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h6 class="mb-0">Historial de Respaldos</h6>
                    <div class="btn-group btn-group-sm">
                        <button type="button" class="btn btn-outline-primary" onclick="refreshBackups()">
                            <i class="fas fa-sync-alt"></i> Actualizar
                        </button>
                        <button type="button" class="btn btn-outline-danger" onclick="cleanupOldBackups()">
                            <i class="fas fa-trash-alt"></i> Limpiar Antiguos
                        </button>
                    </div>
                </div>

                <div class="card-body">
                    <!-- Filtros -->
                    <div class="row mb-3">
                        <div class="col-md-2">
                            <select class="form-control form-control-sm" id="filter-type">
                                <option value="">Todos los tipos</option>
                                <option value="full">Completo</option>
                                <option value="incremental">Incremental</option>
                                <option value="differential">Diferencial</option>
                                <option value="manual">Manual</option>
                                <option value="scheduled">Programado</option>
                            </select>
                        </div>
                        <div class="col-md-2">
                            <select class="form-control form-control-sm" id="filter-status">
                                <option value="">Todos los estados</option>
                                <option value="completed">Completado</option>
                                <option value="failed">Fallido</option>
                                <option value="in_progress">En Progreso</option>
                                <option value="cancelled">Cancelado</option>
                            </select>
                        </div>
                        <div class="col-md-2">
                            <input type="date" class="form-control form-control-sm" id="filter-date-from" placeholder="Desde">
                        </div>
                        <div class="col-md-2">
                            <input type="date" class="form-control form-control-sm" id="filter-date-to" placeholder="Hasta">
                        </div>
                        <div class="col-md-3">
                            <input type="text" class="form-control form-control-sm" id="filter-filename" placeholder="Buscar archivo...">
                        </div>
                        <div class="col-md-1">
                            <button type="button" class="btn btn-sm btn-primary" onclick="applyFilters()">
                                <i class="fas fa-search"></i>
                            </button>
                        </div>
                    </div>

                    <!-- Tabla de respaldos -->
                    <div class="table-responsive">
                        <table class="table table-striped table-hover" id="backups-table">
                            <thead class="thead-dark">
                                <tr>
                                    <th width="10%">Tipo</th>
                                    <th width="25%">Archivo</th>
                                    <th width="10%">Tamaño</th>
                                    <th width="10%">Estado</th>
                                    <th width="10%">Duración</th>
                                    <th width="15%">Fecha</th>
                                    <th width="10%">Usuario</th>
                                    <th width="10%">Acciones</th>
                                </tr>
                            </thead>
                            <tbody id="backups-tbody">
                                @forelse($backups as $backup)
                                <tr class="backup-row" data-status="{{ $backup->status }}">
                                    <td>
                                        <span class="badge badge-{{ getTypeColor($backup->type) }}">
                                            {{ strtoupper($backup->type) }}
                                        </span>
                                    </td>
                                    <td>
                                        <div class="d-flex align-items-center">
                                            <i class="fas fa-file-archive text-muted mr-2"></i>
                                            <div>
                                                <div class="font-weight-bold text-truncate" style="max-width: 200px;" title="{{ $backup->filename }}">
                                                    {{ basename($backup->filename) }}
                                                </div>
                                                <small class="text-muted">{{ $backup->path }}</small>
                                            </div>
                                        </div>
                                    </td>
                                    <td>{{ formatBytes($backup->file_size) }}</td>
                                    <td>
                                        <span class="badge badge-{{ getStatusColor($backup->status) }}">
                                            {{ ucfirst($backup->status) }}
                                        </span>
                                    </td>
                                    <td>
                                        @if($backup->completed_at && $backup->started_at)
                                        {{ $backup->started_at->diffInSeconds($backup->completed_at) }}s
                                        @else
                                        -
                                        @endif
                                    </td>
                                    <td>{{ $backup->created_at->format('d/m/Y H:i') }}</td>
                                    <td>{{ $backup->createdBy->name ?? 'Sistema' }}</td>
                                    <td>
                                        <div class="btn-group btn-group-sm">
                                            <button type="button" class="btn btn-info" onclick="showBackupDetail({{ $backup->id }})" title="Ver detalles">
                                                <i class="fas fa-eye"></i>
                                            </button>
                                            @if($backup->status === 'completed')
                                            <button type="button" class="btn btn-success" onclick="downloadBackup({{ $backup->id }})" title="Descargar">
                                                <i class="fas fa-download"></i>
                                            </button>
                                            @can('backup-restore')
                                            <button type="button" class="btn btn-warning" onclick="restoreBackup({{ $backup->id }})" title="Restaurar">
                                                <i class="fas fa-undo"></i>
                                            </button>
                                            @endcan
                                            @endif
                                            @can('backup-delete')
                                            <button type="button" class="btn btn-danger" onclick="deleteBackup({{ $backup->id }})" title="Eliminar">
                                                <i class="fas fa-trash"></i>
                                            </button>
                                            @endcan
                                        </div>
                                    </td>
                                </tr>
                                @empty
                                <tr>
                                    <td colspan="8" class="text-center text-muted">
                                        <i class="fas fa-database"></i> No hay respaldos disponibles
                                    </td>
                                </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>

                    <!-- Paginación -->
                    @if($backups->hasPages())
                    <div class="d-flex justify-content-center">
                        {{ $backups->links() }}
                    </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Modal para crear respaldo -->
<div class="modal fade" id="createBackupModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">
                    <i class="fas fa-plus-circle"></i> Crear Nuevo Respaldo
                </h5>
                <button type="button" class="close" data-dismiss="modal">
                    <span>&times;</span>
                </button>
            </div>
            <form id="create-backup-form">
                @csrf
                <div class="modal-body">
                    <div class="form-group">
                        <label for="backup-type">Tipo de Respaldo</label>
                        <select class="form-control" id="backup-type" name="type" required>
                            <option value="full">Completo (Base de datos + Archivos)</option>
                            <option value="database">Solo Base de Datos</option>
                            <option value="files">Solo Archivos</option>
                            <option value="incremental">Incremental</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="backup-description">Descripción (opcional)</label>
                        <textarea class="form-control" id="backup-description" name="description" rows="3" placeholder="Describe el propósito de este respaldo..."></textarea>
                    </div>
                    <div class="form-group">
                        <div class="custom-control custom-switch">
                            <input type="checkbox" class="custom-control-input" id="compress" name="compress" checked>
                            <label class="custom-control-label" for="compress">Comprimir respaldo</label>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="custom-control custom-switch">
                            <input type="checkbox" class="custom-control-input" id="encrypt" name="encrypt">
                            <label class="custom-control-label" for="encrypt">Cifrar respaldo</label>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancelar</button>
                    <button type="submit" class="btn btn-success" id="create-backup-btn">
                        <i class="fas fa-database"></i> Crear Respaldo
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Modal para detalles del respaldo -->
<div class="modal fade" id="backupDetailModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">
                    <i class="fas fa-info-circle"></i> Detalle del Respaldo
                </h5>
                <button type="button" class="close" data-dismiss="modal">
                    <span>&times;</span>
                </button>
            </div>
            <div class="modal-body" id="backup-detail-content">
                <!-- Contenido del respaldo se carga aquí -->
            </div>
        </div>
    </div>
</div>

<!-- Modal para configuración -->
<div class="modal fade" id="configurationModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">
                    <i class="fas fa-cog"></i> Configuración de Respaldos
                </h5>
                <button type="button" class="close" data-dismiss="modal">
                    <span>&times;</span>
                </button>
            </div>
            <div class="modal-body" id="configuration-content">
                <!-- Configuración se carga aquí -->
            </div>
        </div>
    </div>
</div>

<!-- Modal para programación -->
<div class="modal fade" id="scheduleModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">
                    <i class="fas fa-calendar-alt"></i> Programar Respaldos
                </h5>
                <button type="button" class="close" data-dismiss="modal">
                    <span>&times;</span>
                </button>
            </div>
            <div class="modal-body" id="schedule-content">
                <!-- Programación se carga aquí -->
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
function createBackup() {
    $('#createBackupModal').modal('show');
}

document.getElementById('create-backup-form').addEventListener('submit', function(e) {
    e.preventDefault();
    
    const formData = new FormData(this);
    const createBtn = document.getElementById('create-backup-btn');
    
    createBtn.disabled = true;
    createBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Creando...';
    
    fetch('{{ route("backups.store") }}', {
        method: 'POST',
        headers: {
            'X-CSRF-TOKEN': '{{ csrf_token() }}'
        },
        body: formData
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            alert('Respaldo iniciado exitosamente');
            $('#createBackupModal').modal('hide');
            location.reload();
        } else {
            alert('Error: ' + (data.message || 'Error al crear el respaldo'));
        }
    })
    .catch(error => {
        console.error('Error:', error);
        alert('Error al crear el respaldo');
    })
    .finally(() => {
        createBtn.disabled = false;
        createBtn.innerHTML = '<i class="fas fa-database"></i> Crear Respaldo';
    });
});

function applyFilters() {
    const type = document.getElementById('filter-type').value;
    const status = document.getElementById('filter-status').value;
    const dateFrom = document.getElementById('filter-date-from').value;
    const dateTo = document.getElementById('filter-date-to').value;
    const filename = document.getElementById('filter-filename').value;
    
    const params = new URLSearchParams();
    if (type) params.append('type', type);
    if (status) params.append('status', status);
    if (dateFrom) params.append('date_from', dateFrom);
    if (dateTo) params.append('date_to', dateTo);
    if (filename) params.append('filename', filename);
    
    window.location.href = '{{ route("backups.index") }}?' + params.toString();
}

function showBackupDetail(backupId) {
    fetch(`/backups/${backupId}`, {
        headers: {
            'Accept': 'application/json',
            'X-CSRF-TOKEN': '{{ csrf_token() }}'
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            const backup = data.data;
            const content = `
                <div class="row">
                    <div class="col-md-6">
                        <strong>Tipo:</strong> 
                        <span class="badge badge-primary">${backup.type}</span>
                    </div>
                    <div class="col-md-6">
                        <strong>Estado:</strong> 
                        <span class="badge badge-${getStatusColorJs(backup.status)}">${backup.status}</span>
                    </div>
                    <div class="col-md-6">
                        <strong>Tamaño:</strong> ${formatBytesJs(backup.file_size)}
                    </div>
                    <div class="col-md-6">
                        <strong>Comprimido:</strong> ${backup.is_compressed ? 'Sí' : 'No'}
                    </div>
                    <div class="col-12 mt-3">
                        <strong>Archivo:</strong>
                        <p class="bg-light p-2 rounded font-monospace">${backup.filename}</p>
                    </div>
                    <div class="col-12">
                        <strong>Descripción:</strong>
                        <p class="bg-light p-2 rounded">${backup.description || 'Sin descripción'}</p>
                    </div>
                    <div class="col-md-6">
                        <strong>Iniciado:</strong> ${new Date(backup.started_at).toLocaleString()}
                    </div>
                    <div class="col-md-6">
                        <strong>Completado:</strong> ${backup.completed_at ? new Date(backup.completed_at).toLocaleString() : 'N/A'}
                    </div>
                    <div class="col-12 mt-3">
                        <strong>Log del proceso:</strong>
                        <pre class="bg-dark text-light p-3 rounded" style="max-height: 200px; overflow-y: auto;"><code>${backup.log || 'Sin información de log'}</code></pre>
                    </div>
                </div>
            `;
            document.getElementById('backup-detail-content').innerHTML = content;
            $('#backupDetailModal').modal('show');
        }
    })
    .catch(error => {
        console.error('Error:', error);
        alert('Error al cargar el detalle del respaldo');
    });
}

function downloadBackup(backupId) {
    window.open(`/backups/${backupId}/download`, '_blank');
}

function restoreBackup(backupId) {
    if (confirm('¿Está seguro de restaurar este respaldo? Esta acción sobrescribirá los datos actuales.')) {
        fetch(`/backups/${backupId}/restore`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': '{{ csrf_token() }}'
            }
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                alert('Restauración iniciada exitosamente');
                location.reload();
            } else {
                alert('Error: ' + (data.message || 'Error al restaurar el respaldo'));
            }
        })
        .catch(error => {
            console.error('Error:', error);
            alert('Error al restaurar el respaldo');
        });
    }
}

function deleteBackup(backupId) {
    if (confirm('¿Está seguro de eliminar este respaldo? Esta acción no se puede deshacer.')) {
        fetch(`/backups/${backupId}`, {
            method: 'DELETE',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': '{{ csrf_token() }}'
            }
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                alert('Respaldo eliminado exitosamente');
                location.reload();
            } else {
                alert('Error: ' + (data.message || 'Error al eliminar el respaldo'));
            }
        })
        .catch(error => {
            console.error('Error:', error);
            alert('Error al eliminar el respaldo');
        });
    }
}

function refreshBackups() {
    location.reload();
}

function cleanupOldBackups() {
    if (confirm('¿Eliminar respaldos antiguos según la configuración de retención?')) {
        fetch('/backups/cleanup', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': '{{ csrf_token() }}'
            }
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                alert(`Limpieza completada. ${data.data.deleted} respaldos eliminados.`);
                location.reload();
            }
        })
        .catch(error => {
            console.error('Error:', error);
            alert('Error en la limpieza');
        });
    }
}

function showConfiguration() {
    fetch('/backups/configuration', {
        headers: {
            'Accept': 'application/json',
            'X-CSRF-TOKEN': '{{ csrf_token() }}'
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            const config = data.data;
            const content = `
                <form id="config-form">
                    <div class="form-group">
                        <label>Retención (días)</label>
                        <input type="number" class="form-control" name="retention_days" value="${config.retention_days || 30}">
                    </div>
                    <div class="form-group">
                        <label>Máximo respaldos</label>
                        <input type="number" class="form-control" name="max_backups" value="${config.max_backups || 10}">
                    </div>
                    <div class="form-group">
                        <label>Ruta de almacenamiento</label>
                        <input type="text" class="form-control" name="storage_path" value="${config.storage_path || ''}">
                    </div>
                    <div class="custom-control custom-switch">
                        <input type="checkbox" class="custom-control-input" id="auto_cleanup" name="auto_cleanup" ${config.auto_cleanup ? 'checked' : ''}>
                        <label class="custom-control-label" for="auto_cleanup">Limpieza automática</label>
                    </div>
                    <div class="text-right mt-3">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Cerrar</button>
                        <button type="submit" class="btn btn-primary">Guardar Configuración</button>
                    </div>
                </form>
            `;
            document.getElementById('configuration-content').innerHTML = content;
            $('#configurationModal').modal('show');
        }
    })
    .catch(error => {
        console.error('Error:', error);
        alert('Error al cargar la configuración');
    });
}

function showSchedule() {
    fetch('/backups/schedule', {
        headers: {
            'Accept': 'application/json',
            'X-CSRF-TOKEN': '{{ csrf_token() }}'
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            const schedule = data.data;
            const content = `
                <form id="schedule-form">
                    <div class="form-group">
                        <label>Frecuencia</label>
                        <select class="form-control" name="frequency">
                            <option value="daily" ${schedule.frequency === 'daily' ? 'selected' : ''}>Diario</option>
                            <option value="weekly" ${schedule.frequency === 'weekly' ? 'selected' : ''}>Semanal</option>
                            <option value="monthly" ${schedule.frequency === 'monthly' ? 'selected' : ''}>Mensual</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label>Hora</label>
                        <input type="time" class="form-control" name="time" value="${schedule.time || '02:00'}">
                    </div>
                    <div class="custom-control custom-switch">
                        <input type="checkbox" class="custom-control-input" id="enabled" name="enabled" ${schedule.enabled ? 'checked' : ''}>
                        <label class="custom-control-label" for="enabled">Habilitar programación</label>
                    </div>
                    <div class="text-right mt-3">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Cerrar</button>
                        <button type="submit" class="btn btn-primary">Guardar Programación</button>
                    </div>
                </form>
            `;
            document.getElementById('schedule-content').innerHTML = content;
            $('#scheduleModal').modal('show');
        }
    })
    .catch(error => {
        console.error('Error:', error);
        alert('Error al cargar la programación');
    });
}

function loadStatistics() {
    fetch('/backups/statistics', {
        headers: {
            'Accept': 'application/json',
            'X-CSRF-TOKEN': '{{ csrf_token() }}'
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            console.log('Estadísticas de respaldos:', data.data);
            // Implementar vista de estadísticas si es necesario
        }
    })
    .catch(error => {
        console.error('Error:', error);
    });
}

function formatBytesJs(bytes, decimals = 2) {
    if (bytes === 0) return '0 Bytes';
    const k = 1024;
    const dm = decimals < 0 ? 0 : decimals;
    const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
    const i = Math.floor(Math.log(bytes) / Math.log(k));
    return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
}

function getStatusColorJs(status) {
    const colors = {
        'completed': 'success',
        'failed': 'danger',
        'in_progress': 'warning',
        'cancelled': 'secondary'
    };
    return colors[status] || 'secondary';
}

// Auto-refresh cada 30 segundos para respaldos en progreso
setInterval(function() {
    const inProgressRows = document.querySelectorAll('.backup-row[data-status="in_progress"]');
    if (inProgressRows.length > 0) {
        refreshBackups();
    }
}, 30000);
</script>
@endpush

@php
function formatBytes($bytes, $precision = 2) {
    $units = array('B', 'KB', 'MB', 'GB', 'TB');
    
    for ($i = 0; $bytes > 1024 && $i < count($units) - 1; $i++) {
        $bytes /= 1024;
    }
    
    return round($bytes, $precision) . ' ' . $units[$i];
}

function getTypeColor($type) {
    $colors = [
        'full' => 'primary',
        'incremental' => 'info',
        'differential' => 'warning',
        'manual' => 'success',
        'scheduled' => 'secondary'
    ];
    return $colors[$type] ?? 'dark';
}

function getStatusColor($status) {
    $colors = [
        'completed' => 'success',
        'failed' => 'danger',
        'in_progress' => 'warning',
        'cancelled' => 'secondary'
    ];
    return $colors[$status] ?? 'secondary';
}
@endphp