{% extends "base.html" %}

{% block title %}Backups{% endblock %}

{% block content %}
<div x-data="backupsData()" x-init="loadBackups()">
    <div class="px-4 sm:px-0 flex justify-between items-center">
        <div>
            <h1 class="text-3xl font-bold text-gray-900">Database Backups</h1>
            <p class="mt-2 text-sm text-gray-700">Create and manage database backups for disaster recovery</p>
        </div>
        <div class="flex space-x-3">
            <button @click="createBackup()"
                class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700">
                <i class="fas fa-plus mr-2"></i>Create Backup
            </button>
            <a href="/admin/api#backups"
               class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-green-600 hover:bg-green-700">
                <i class="fas fa-code mr-2"></i>View API
            </a>
        </div>
    </div>

    <!-- Backups Table -->
    <div class="mt-6 bg-white shadow overflow-hidden sm:rounded-lg">
        <div class="px-4 py-5 sm:px-6 border-b border-gray-200">
            <div class="flex justify-between items-center">
                <div class="text-sm text-gray-500">
                    Total: <span class="font-medium text-gray-900" x-text="pagination.total"></span> backups
                </div>
                <div class="flex items-center space-x-2">
                    <button @click="prevPage" :disabled="pagination.page === 1"
                        class="px-3 py-1 text-sm bg-gray-200 rounded hover:bg-gray-300 disabled:opacity-50">
                        Previous
                    </button>
                    <span class="text-sm text-gray-600">
                        Page <span x-text="pagination.page"></span> of <span x-text="pagination.total_pages"></span>
                    </span>
                    <button @click="nextPage" :disabled="pagination.page >= pagination.total_pages"
                        class="px-3 py-1 text-sm bg-gray-200 rounded hover:bg-gray-300 disabled:opacity-50">
                        Next
                    </button>
                </div>
            </div>
        </div>

        <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">Filename</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">Path</th>
                    <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
                </tr>
            </thead>
            <tbody class="bg-white divide-y divide-gray-200">
                <template x-for="backup in backups" :key="backup.id">
                    <tr>
                        <td class="px-6 py-4 whitespace-nowrap">
                            <div class="flex items-center">
                                <i class="fas fa-database text-indigo-600 mr-2"></i>
                                <div class="text-sm font-medium text-gray-900" x-text="backup.filename"></div>
                            </div>
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap">
                            <div class="text-sm text-gray-900" x-text="formatFileSize(backup.size)"></div>
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                            <div x-text="formatDateTime(backup.created)"></div>
                        </td>
                        <td class="px-6 py-4">
                            <div class="text-sm text-gray-500 max-w-xs truncate" :title="backup.path" x-text="backup.path"></div>
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                            <button @click="restoreBackup(backup)" class="text-green-600 hover:text-green-900 mr-3">
                                <i class="fas fa-undo mr-1"></i>Restore
                            </button>
                            <button @click="downloadBackup(backup)" class="text-blue-600 hover:text-blue-900 mr-3">
                                <i class="fas fa-download mr-1"></i>Download
                            </button>
                            <button @click="showDeleteModal(backup)" class="text-red-600 hover:text-red-900">
                                <i class="fas fa-trash mr-1"></i>Delete
                            </button>
                        </td>
                    </tr>
                </template>
                <tr x-show="backups.length === 0">
                    <td colspan="5" class="px-6 py-4 text-center text-gray-500">
                        No backups found. Create your first backup to get started!
                    </td>
                </tr>
            </tbody>
        </table>
    </div>

    <!-- Warning Box -->
    <div class="mt-6 bg-yellow-50 border-l-4 border-yellow-400 p-4">
        <div class="flex">
            <div class="flex-shrink-0">
                <i class="fas fa-exclamation-triangle text-yellow-400"></i>
            </div>
            <div class="ml-3">
                <h3 class="text-sm font-medium text-yellow-800">Important Backup Information</h3>
                <div class="mt-2 text-sm text-yellow-700">
                    <ul class="list-disc list-inside space-y-1">
                        <li>Restoring a backup will OVERWRITE your current database</li>
                        <li>Always create a backup before performing major operations</li>
                        <li>Store backups in a secure location separate from your server</li>
                        <li>Test your backups regularly to ensure they can be restored</li>
                        <li>For automated backups, use the API with cron jobs (see API docs)</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <!-- Restore Confirmation Modal -->
    <div x-show="showRestoreModal"
         x-cloak
         class="fixed z-10 inset-0 overflow-y-auto"
         @keydown.escape.window="showRestoreModal = false">
        <div class="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
            <div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" @click="showRestoreModal = false"></div>

            <div class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">
                <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
                    <div class="sm:flex sm:items-start">
                        <div class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10">
                            <i class="fas fa-exclamation-triangle text-red-600"></i>
                        </div>
                        <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
                            <h3 class="text-lg leading-6 font-medium text-gray-900">
                                Restore Database Backup
                            </h3>
                            <div class="mt-2">
                                <p class="text-sm text-gray-500">
                                    Are you sure you want to restore this backup? This will <strong>OVERWRITE</strong> your current database with the backup data.
                                </p>
                                <p class="mt-2 text-sm text-red-600 font-medium">
                                    This action cannot be undone. Make sure you have a current backup before proceeding.
                                </p>
                                <div class="mt-3 bg-gray-50 p-3 rounded">
                                    <p class="text-sm text-gray-700">
                                        <strong>Backup:</strong> <span x-text="restoreTarget?.filename"></span><br>
                                        <strong>Created:</strong> <span x-text="formatDateTime(restoreTarget?.created)"></span><br>
                                        <strong>Size:</strong> <span x-text="formatFileSize(restoreTarget?.size)"></span>
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
                    <button type="button" @click="confirmRestore()"
                            class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:text-sm">
                        <i class="fas fa-undo mr-2"></i>Restore Backup
                    </button>
                    <button type="button" @click="showRestoreModal = false"
                            class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm">
                        Cancel
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- Delete Confirmation Modal -->
    <div x-show="showDeleteConfirmModal"
         x-cloak
         class="fixed z-10 inset-0 overflow-y-auto"
         @keydown.escape.window="showDeleteConfirmModal = false">
        <div class="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
            <div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" @click="showDeleteConfirmModal = false"></div>

            <div class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">
                <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
                    <div class="sm:flex sm:items-start">
                        <div class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10">
                            <i class="fas fa-trash text-red-600"></i>
                        </div>
                        <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
                            <h3 class="text-lg leading-6 font-medium text-gray-900">
                                Delete Backup
                            </h3>
                            <div class="mt-2">
                                <p class="text-sm text-gray-500">
                                    Are you sure you want to delete this backup? This action cannot be undone.
                                </p>
                                <div class="mt-3 bg-gray-50 p-3 rounded">
                                    <p class="text-sm text-gray-700">
                                        <strong>Backup:</strong> <span x-text="deleteTarget?.filename"></span><br>
                                        <strong>Created:</strong> <span x-text="formatDateTime(deleteTarget?.created)"></span>
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
                    <button type="button" @click="confirmDelete()"
                            class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:text-sm">
                        <i class="fas fa-trash mr-2"></i>Delete Backup
                    </button>
                    <button type="button" @click="showDeleteConfirmModal = false"
                            class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm">
                        Cancel
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
    function backupsData() {
        return {
            backups: [],
            pagination: {
                page: 1,
                per_page: 20,
                total: 0,
                total_pages: 0
            },
            showRestoreModal: false,
            showDeleteConfirmModal: false,
            restoreTarget: null,
            deleteTarget: null,

            async loadBackups() {
                try {
                    const data = await apiRequest(`/backups?page=${this.pagination.page}&per_page=${this.pagination.per_page}`);
                    this.backups = data.items;
                    this.pagination = {
                        page: data.page,
                        per_page: data.per_page,
                        total: data.total,
                        total_pages: data.total_pages
                    };
                } catch (error) {
                    console.error('Failed to load backups:', error);
                    showToast('Failed to load backups', 'error');
                }
            },

            async createBackup() {
                try {
                    showToast('Creating backup...', 'info');
                    await apiRequest('/backups', {
                        method: 'POST',
                        body: JSON.stringify({})
                    });
                    showToast('Backup created successfully', 'success');
                    await this.loadBackups();
                } catch (error) {
                    console.error('Failed to create backup:', error);
                    showToast(error.message || 'Failed to create backup', 'error');
                }
            },

            restoreBackup(backup) {
                this.restoreTarget = backup;
                this.showRestoreModal = true;
            },

            async confirmRestore() {
                if (!this.restoreTarget) return;

                try {
                    showToast('Restoring backup...', 'info');
                    await apiRequest(`/backups/${this.restoreTarget.id}/restore`, {
                        method: 'POST'
                    });
                    showToast('Backup restored successfully. Please refresh the page.', 'success');
                    this.showRestoreModal = false;
                    this.restoreTarget = null;

                    // Reload page after 2 seconds
                    setTimeout(() => {
                        window.location.reload();
                    }, 2000);
                } catch (error) {
                    console.error('Failed to restore backup:', error);
                    showToast(error.message || 'Failed to restore backup', 'error');
                }
            },

            async downloadBackup(backup) {
                try {
                    // Create a temporary download link
                    const token = localStorage.getItem('access_token');
                    const url = `/api/v1/backups/${backup.id}/download?token=${token}`;

                    const a = document.createElement('a');
                    a.href = url;
                    a.download = backup.filename;
                    document.body.appendChild(a);
                    a.click();
                    document.body.removeChild(a);

                    showToast('Download started', 'success');
                } catch (error) {
                    console.error('Failed to download backup:', error);
                    showToast('Failed to download backup', 'error');
                }
            },

            showDeleteModal(backup) {
                this.deleteTarget = backup;
                this.showDeleteConfirmModal = true;
            },

            async confirmDelete() {
                if (!this.deleteTarget) return;

                try {
                    await apiRequest(`/backups/${this.deleteTarget.id}`, {
                        method: 'DELETE'
                    });
                    showToast('Backup deleted successfully', 'success');
                    this.showDeleteConfirmModal = false;
                    this.deleteTarget = null;
                    await this.loadBackups();
                } catch (error) {
                    console.error('Failed to delete backup:', error);
                    showToast('Failed to delete backup', 'error');
                }
            },

            formatFileSize(bytes) {
                if (!bytes) return '0 B';
                const k = 1024;
                const sizes = ['B', 'KB', 'MB', 'GB'];
                const i = Math.floor(Math.log(bytes) / Math.log(k));
                return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
            },

            formatDateTime(dateString) {
                if (!dateString) return 'N/A';
                const date = new Date(dateString);
                return date.toLocaleString();
            },

            async nextPage() {
                if (this.pagination.page < this.pagination.total_pages) {
                    this.pagination.page++;
                    await this.loadBackups();
                }
            },

            async prevPage() {
                if (this.pagination.page > 1) {
                    this.pagination.page--;
                    await this.loadBackups();
                }
            }
        };
    }
</script>
{% endblock %}