@extends('crm.layouts.app')

@section('title', 'Data Backup & Recovery')

@section('content')
<div class="container mx-auto px-4 py-8">
    <div class="mb-8">
        <h1 class="text-3xl font-bold text-gray-900 mb-2">Data Backup & Recovery</h1>
        <p class="text-gray-600">Protect your business data with automated backups and recovery tools</p>
    </div>

    <!-- Storage Overview -->
    <div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
        <div class="bg-white rounded-lg shadow-sm p-6">
            <div class="flex items-center">
                <div class="p-3 bg-blue-100 rounded-full">
                    <i class="fas fa-database text-blue-600 text-xl"></i>
                </div>
                <div class="ml-4">
                    <p class="text-sm text-gray-600">Database Size</p>
                    <p class="text-2xl font-bold text-gray-900" id="database-size">Loading...</p>
                </div>
            </div>
        </div>

        <div class="bg-white rounded-lg shadow-sm p-6">
            <div class="flex items-center">
                <div class="p-3 bg-green-100 rounded-full">
                    <i class="fas fa-save text-green-600 text-xl"></i>
                </div>
                <div class="ml-4">
                    <p class="text-sm text-gray-600">Total Backups</p>
                    <p class="text-2xl font-bold text-gray-900">{{ count($backups) }}</p>
                </div>
            </div>
        </div>

        <div class="bg-white rounded-lg shadow-sm p-6">
            <div class="flex items-center">
                <div class="p-3 bg-yellow-100 rounded-full">
                    <i class="fas fa-history text-yellow-600 text-xl"></i>
                </div>
                <div class="ml-4">
                    <p class="text-sm text-gray-600">Last Backup</p>
                    <p class="text-lg font-bold text-gray-900" id="last-backup">Loading...</p>
                </div>
            </div>
        </div>

        <div class="bg-white rounded-lg shadow-sm p-6">
            <div class="flex items-center">
                <div class="p-3 bg-purple-100 rounded-full">
                    <i class="fas fa-hdd text-purple-600 text-xl"></i>
                </div>
                <div class="ml-4">
                    <p class="text-sm text-gray-600">Storage Used</p>
                    <p class="text-lg font-bold text-gray-900">{{ round($storage['usage_percentage'], 1) }}%</p>
                </div>
            </div>
        </div>
    </div>

    <!-- Quick Actions -->
    <div class="bg-white rounded-lg shadow-sm p-6 mb-8">
        <h2 class="text-xl font-bold text-gray-900 mb-4">Quick Actions</h2>
        <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
            <button onclick="showCreateBackupModal()" class="bg-blue-600 text-white px-6 py-3 rounded-lg hover:bg-blue-700 transition-colors">
                <i class="fas fa-plus mr-2"></i>Create Backup
            </button>
            <button onclick="showScheduleBackupModal()" class="bg-green-600 text-white px-6 py-3 rounded-lg hover:bg-green-700 transition-colors">
                <i class="fas fa-calendar-alt mr-2"></i>Schedule Backup
            </button>
            <button onclick="showExportDataModal()" class="bg-purple-600 text-white px-6 py-3 rounded-lg hover:bg-purple-700 transition-colors">
                <i class="fas fa-file-export mr-2"></i>Export Data
            </button>
        </div>
    </div>

    <!-- Backup History -->
    <div class="bg-white rounded-lg shadow-sm">
        <div class="p-6 border-b border-gray-200">
            <h2 class="text-xl font-bold text-gray-900">Backup History</h2>
        </div>

        <div class="overflow-x-auto">
            <table class="w-full">
                <thead class="bg-gray-50">
                    <tr>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Backup Name</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Type</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Size</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Created</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">
                    @forelse($backups as $backup)
                        <tr>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <div class="flex items-center">
                                    <i class="fas fa-file-archive text-gray-400 mr-3"></i>
                                    <span class="text-sm font-medium text-gray-900">{{ $backup['name'] }}</span>
                                </div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <span class="px-2 py-1 text-xs font-medium rounded-full
                                    @if($backup['type'] === 'full') bg-blue-100 text-blue-800
                                    @elseif($backup['type'] === 'data_only') bg-green-100 text-green-800
                                    @elseif($backup['type'] === 'files_only') bg-purple-100 text-purple-800
                                    @else bg-gray-100 text-gray-800 @endif">
                                    {{ ucfirst(str_replace('_', ' ', $backup['type'])) }}
                                </span>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                                {{ $this->formatBytes($backup['size']) }}
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                                {{ \Carbon\Carbon::createFromTimestamp($backup['created_at'])->format('M j, Y g:i A') }}
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                                <div class="flex space-x-3">
                                    <a href="{{ route('data-backup.download', $backup['name']) }}" class="text-blue-600 hover:text-blue-900">
                                        <i class="fas fa-download"></i>
                                    </a>
                                    <button onclick="showRestoreModal('{{ $backup['name'] }}')" class="text-green-600 hover:text-green-900">
                                        <i class="fas fa-undo"></i>
                                    </button>
                                    <button onclick="deleteBackup('{{ $backup['name'] }}')" class="text-red-600 hover:text-red-900">
                                        <i class="fas fa-trash"></i>
                                    </button>
                                </div>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="5" class="px-6 py-12 text-center text-gray-500">
                                <i class="fas fa-database text-4xl mb-4"></i>
                                <p class="text-lg">No backups found</p>
                                <p class="text-sm">Create your first backup to get started</p>
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
</div>

<!-- Create Backup Modal -->
<div id="createBackupModal" class="fixed inset-0 bg-black bg-opacity-50 hidden items-center justify-center z-50">
    <div class="bg-white rounded-lg max-w-md w-full mx-4">
        <div class="p-6">
            <h3 class="text-lg font-bold text-gray-900 mb-4">Create New Backup</h3>
            <form id="createBackupForm">
                <div class="space-y-4">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Backup Type</label>
                        <select name="backup_type" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
                            <option value="full">Full Backup (Database + Files)</option>
                            <option value="data_only">Database Only</option>
                            <option value="files_only">Files Only</option>
                        </select>
                    </div>

                    <div class="flex items-center">
                        <input type="checkbox" name="compression" id="compression" class="mr-2">
                        <label for="compression" class="text-sm text-gray-700">Enable compression</label>
                    </div>

                    <div class="flex items-center">
                        <input type="checkbox" name="encryption" id="encryption" class="mr-2">
                        <label for="encryption" class="text-sm text-gray-700">Enable encryption</label>
                    </div>
                </div>

                <div class="flex justify-end space-x-3 mt-6">
                    <button type="button" onclick="hideCreateBackupModal()" class="px-4 py-2 text-gray-700 bg-gray-100 rounded-md hover:bg-gray-200">
                        Cancel
                    </button>
                    <button type="submit" class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700">
                        Create Backup
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Schedule Backup Modal -->
<div id="scheduleBackupModal" class="fixed inset-0 bg-black bg-opacity-50 hidden items-center justify-center z-50">
    <div class="bg-white rounded-lg max-w-md w-full mx-4">
        <div class="p-6">
            <h3 class="text-lg font-bold text-gray-900 mb-4">Schedule Automated Backup</h3>
            <form id="scheduleBackupForm">
                <div class="space-y-4">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Frequency</label>
                        <select name="frequency" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
                            <option value="daily">Daily</option>
                            <option value="weekly">Weekly</option>
                            <option value="monthly">Monthly</option>
                        </select>
                    </div>

                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Time</label>
                        <input type="time" name="time" value="02:00" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
                    </div>

                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Backup Type</label>
                        <select name="backup_type" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
                            <option value="full">Full Backup</option>
                            <option value="data_only">Database Only</option>
                            <option value="files_only">Files Only</option>
                        </select>
                    </div>

                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Retention (days)</label>
                        <input type="number" name="retention_days" value="30" min="1" max="365" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
                    </div>

                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Notification Email (optional)</label>
                        <input type="email" name="notify_email" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
                    </div>
                </div>

                <div class="flex justify-end space-x-3 mt-6">
                    <button type="button" onclick="hideScheduleBackupModal()" class="px-4 py-2 text-gray-700 bg-gray-100 rounded-md hover:bg-gray-200">
                        Cancel
                    </button>
                    <button type="submit" class="px-4 py-2 bg-green-600 text-white rounded-md hover:bg-green-700">
                        Schedule Backup
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Export Data Modal -->
<div id="exportDataModal" class="fixed inset-0 bg-black bg-opacity-50 hidden items-center justify-center z-50">
    <div class="bg-white rounded-lg max-w-lg w-full mx-4">
        <div class="p-6">
            <h3 class="text-lg font-bold text-gray-900 mb-4">Export Data</h3>
            <form id="exportDataForm">
                <div class="space-y-4">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Export Format</label>
                        <select name="format" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
                            <option value="json">JSON</option>
                            <option value="csv">CSV</option>
                            <option value="xlsx">Excel</option>
                        </select>
                    </div>

                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Select Tables</label>
                        <div class="grid grid-cols-2 gap-2 max-h-48 overflow-y-auto">
                            <label class="flex items-center">
                                <input type="checkbox" name="tables[]" value="appointments" class="mr-2">
                                <span class="text-sm">Appointments</span>
                            </label>
                            <label class="flex items-center">
                                <input type="checkbox" name="tables[]" value="clients" class="mr-2">
                                <span class="text-sm">Clients</span>
                            </label>
                            <label class="flex items-center">
                                <input type="checkbox" name="tables[]" value="tattoo_projects" class="mr-2">
                                <span class="text-sm">Tattoo Projects</span>
                            </label>
                            <label class="flex items-center">
                                <input type="checkbox" name="tables[]" value="artist_portfolios" class="mr-2">
                                <span class="text-sm">Artist Portfolios</span>
                            </label>
                            <label class="flex items-center">
                                <input type="checkbox" name="tables[]" value="customer_reviews" class="mr-2">
                                <span class="text-sm">Customer Reviews</span>
                            </label>
                            <label class="flex items-center">
                                <input type="checkbox" name="tables[]" value="deposits" class="mr-2">
                                <span class="text-sm">Deposits</span>
                            </label>
                        </div>
                    </div>

                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Date Range (optional)</label>
                        <div class="grid grid-cols-2 gap-2">
                            <input type="date" name="date_range[start]" class="px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
                            <input type="date" name="date_range[end]" class="px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
                        </div>
                    </div>
                </div>

                <div class="flex justify-end space-x-3 mt-6">
                    <button type="button" onclick="hideExportDataModal()" class="px-4 py-2 text-gray-700 bg-gray-100 rounded-md hover:bg-gray-200">
                        Cancel
                    </button>
                    <button type="submit" class="px-4 py-2 bg-purple-600 text-white rounded-md hover:bg-purple-700">
                        Export Data
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

@push('scripts')
<script>
// Modal Functions
function showCreateBackupModal() {
    document.getElementById('createBackupModal').classList.remove('hidden');
    document.getElementById('createBackupModal').classList.add('flex');
}

function hideCreateBackupModal() {
    document.getElementById('createBackupModal').classList.add('hidden');
    document.getElementById('createBackupModal').classList.remove('flex');
}

function showScheduleBackupModal() {
    document.getElementById('scheduleBackupModal').classList.remove('hidden');
    document.getElementById('scheduleBackupModal').classList.add('flex');
}

function hideScheduleBackupModal() {
    document.getElementById('scheduleBackupModal').classList.add('hidden');
    document.getElementById('scheduleBackupModal').classList.remove('flex');
}

function showExportDataModal() {
    document.getElementById('exportDataModal').classList.remove('hidden');
    document.getElementById('exportDataModal').classList.add('flex');
}

function hideExportDataModal() {
    document.getElementById('exportDataModal').classList.add('hidden');
    document.getElementById('exportDataModal').classList.remove('flex');
}

// Form Handlers
document.getElementById('createBackupForm').addEventListener('submit', function(e) {
    e.preventDefault();

    const formData = new FormData(this);
    const data = Object.fromEntries(formData);

    fetch('{{ route("data-backup.create") }}', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
        },
        body: JSON.stringify(data)
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            hideCreateBackupModal();
            location.reload();
        } else {
            alert('Error: ' + data.message);
        }
    })
    .catch(error => {
        console.error('Error:', error);
        alert('An error occurred while creating the backup.');
    });
});

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

    const formData = new FormData(this);
    const data = Object.fromEntries(formData);

    fetch('{{ route("data-backup.schedule") }}', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
        },
        body: JSON.stringify(data)
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            hideScheduleBackupModal();
            alert('Backup scheduled successfully!');
        } else {
            alert('Error: ' + data.message);
        }
    })
    .catch(error => {
        console.error('Error:', error);
        alert('An error occurred while scheduling the backup.');
    });
});

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

    const formData = new FormData(this);
    const data = Object.fromEntries(formData);

    fetch('{{ route("data-backup.export") }}', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
        },
        body: JSON.stringify(data)
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            hideExportDataModal();
            window.open(data.export_url, '_blank');
        } else {
            alert('Error: ' + data.message);
        }
    })
    .catch(error => {
        console.error('Error:', error);
        alert('An error occurred while exporting the data.');
    });
});

// Utility Functions
function deleteBackup(backupName) {
    if (confirm('Are you sure you want to delete this backup? This action cannot be undone.')) {
        fetch(`{{ route("data-backup.delete", ["backup" => "__BACKUP__"]) }}`.replace('__BACKUP__', encodeURIComponent(backupName)), {
            method: 'DELETE',
            headers: {
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
            }
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                location.reload();
            } else {
                alert('Error: ' + data.message);
            }
        })
        .catch(error => {
            console.error('Error:', error);
            alert('An error occurred while deleting the backup.');
        });
    }
}

function showRestoreModal(backupName) {
    if (confirm('Are you sure you want to restore from this backup? This will overwrite your current data.')) {
        const restoreType = prompt('Enter restore type (full, data_only, files_only):', 'full');

        if (restoreType && ['full', 'data_only', 'files_only'].includes(restoreType)) {
            if (confirm('This action will overwrite your current data. Are you absolutely sure?')) {
                fetch('{{ route("data-backup.restore") }}', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                    },
                    body: JSON.stringify({
                        backup_file: backupName,
                        restore_type: restoreType,
                        confirm_restore: true
                    })
                })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        alert('Backup restored successfully!');
                        location.reload();
                    } else {
                        alert('Error: ' + data.message);
                    }
                })
                .catch(error => {
                    console.error('Error:', error);
                    alert('An error occurred while restoring the backup.');
                });
            }
        }
    }
}

// Load backup stats
fetch('{{ route("data-backup.stats") }}')
    .then(response => response.json())
    .then(data => {
        document.getElementById('database-size').textContent = data.database_size + ' MB';
        document.getElementById('last-backup').textContent = data.last_backup ?
            new Date(data.last_backup).toLocaleDateString() : 'Never';
    })
    .catch(error => {
        console.error('Error loading backup stats:', error);
    });
</script>
@endpush
@endsection

@php
// Guarded so re-rendering this view in the same process (tests, or any
// double render) doesn't fatal with "Cannot redeclare formatBytes()".
if (! function_exists('formatBytes')) {
    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];
    }
}
@endphp