feat: implement database backup and restore functionality with JSON support

Co-authored-by: Copilot <copilot@github.com>

Components/Pages/Settings.razor

@@ -1,8 +1,13 @@
 @page "/settings"
 @attribute [Authorize]
 
+@using Microsoft.AspNetCore.Components.Forms
+@using WorkTracker.Services.Storage
+
 @inject IAppSettingsService AppSettingsService
+@inject IDatabaseBackupService DatabaseBackupService
 @inject AppThemeState ThemeState
+@inject IJSRuntime JS
 
 <PageTitle>Settings</PageTitle>
 
@@ -65,11 +70,60 @@ else
             }
         </div>
     </EditForm>
+
+    <section class="mt-5">
+        <h2 class="h4">Database backup</h2>
+        <p class="text-muted mb-3">Export the full database as JSON or restore a previously exported JSON backup. Restore replaces the current database only when the backup format version and database schema version are supported.</p>
+
+        <div class="d-flex flex-wrap gap-2 align-items-center mb-4">
+            <a class="btn btn-outline-secondary" href="/api/database-backup/export">Export JSON backup</a>
+            <span class="small text-muted">Current database schema version: @DatabaseSchemaVersion</span>
+        </div>
+
+        <div class="card border-danger-subtle">
+            <div class="card-body">
+                <h3 class="h6 card-title">Restore from JSON</h3>
+                <p class="card-text text-muted">This overwrites the existing database with the selected backup file.</p>
+
+                <div class="d-flex flex-column gap-3 align-items-start">
+                    <InputFile OnChange="OnRestoreFileSelected" accept="application/json,.json" />
+
+                    @if (!string.IsNullOrWhiteSpace(selectedBackupFileName))
+                    {
+                        <div class="small text-muted">Selected file: @selectedBackupFileName</div>
+                    }
+
+                    <button class="btn btn-outline-danger" type="button" @onclick="RestoreAsync" disabled="@(selectedBackupFile is null || isRestoring)">
+                        @(isRestoring ? "Restoring..." : "Restore JSON backup")
+                    </button>
+                </div>
+
+                @if (!string.IsNullOrWhiteSpace(backupStatusMessage))
+                {
+                    <div class="alert alert-success py-2 mt-3 mb-0">@backupStatusMessage</div>
+                }
+
+                @if (!string.IsNullOrWhiteSpace(backupErrorMessage))
+                {
+                    <div class="alert alert-danger py-2 mt-3 mb-0">@backupErrorMessage</div>
+                }
+            </div>
+        </div>
+    </section>
 }
 
 @code {
+    private const long MaxBackupFileSize = 20 * 1024 * 1024;
+
     private AppSettingsDocument? settings;
     private string? statusMessage;
+    private string? backupStatusMessage;
+    private string? backupErrorMessage;
+    private IBrowserFile? selectedBackupFile;
+    private string? selectedBackupFileName;
+    private bool isRestoring;
+
+    private int DatabaseSchemaVersion => CouchbaseLiteDatabaseProvider.CurrentDatabaseSchemaVersion;
 
     protected override async Task OnInitializedAsync()
     {
@@ -87,4 +141,56 @@ else
         ThemeState.SetThemeMode(settings.ThemeMode);
         statusMessage = $"Saved at {DateTime.Now:t}";
     }
+
+    private void OnRestoreFileSelected(InputFileChangeEventArgs args)
+    {
+        selectedBackupFile = args.File;
+        selectedBackupFileName = args.File.Name;
+        backupStatusMessage = null;
+        backupErrorMessage = null;
+    }
+
+    private async Task RestoreAsync()
+    {
+        if (selectedBackupFile is null)
+        {
+            backupErrorMessage = "Select a JSON backup file first.";
+            backupStatusMessage = null;
+            return;
+        }
+
+        var confirmed = await JS.InvokeAsync<bool>("confirm", "Restore this backup and overwrite the current database?\nThis cannot be undone.");
+        if (!confirmed)
+        {
+            return;
+        }
+
+        isRestoring = true;
+        backupStatusMessage = null;
+        backupErrorMessage = null;
+
+        try
+        {
+            await using var stream = selectedBackupFile.OpenReadStream(MaxBackupFileSize);
+            await DatabaseBackupService.ImportAsync(stream);
+
+            settings = await AppSettingsService.GetAsync();
+            ThemeState.SetThemeMode(settings.ThemeMode);
+            selectedBackupFile = null;
+            selectedBackupFileName = null;
+            backupStatusMessage = $"Backup restored at {DateTime.Now:t}.";
+        }
+        catch (DatabaseBackupException exception)
+        {
+            backupErrorMessage = exception.Message;
+        }
+        catch (IOException)
+        {
+            backupErrorMessage = "The selected backup file is too large or could not be read.";
+        }
+        finally
+        {
+            isRestoring = false;
+        }
+    }
 }