@inject DbService DbService
@inject GlobalNotificationService GlobalNotificationService

<div class="relative p-6 sm:p-8 bg-white dark:bg-gray-700 rounded-lg sm:shadow-xl max-w-md w-full mx-auto">
    <div class="text-center">
        <div class="space-y-4">
            <h2 class="text-xl font-semibold text-gray-900 dark:text-white">Vault needs to be upgraded.</h2>
            <p class="text-sm text-gray-500 dark:text-gray-400">
                AliasVault has been updated. Your personal vault needs to be upgraded in order to be compatible with the new data model.
                This upgrade should only take a few seconds.
            </p>
            <div class="bg-gray-100 dark:bg-gray-800 p-4 rounded-lg shadow-sm">
                <h3 class="text-lg font-medium text-gray-700 dark:text-gray-300 mb-3">Version Information</h3>
                <div class="space-y-2">
                    <p class="flex justify-between items-center">
                        <span class="text-sm font-medium text-gray-600 dark:text-gray-400">Your vault:</span>
                        <span class="text-base font-bold text-blue-600 dark:text-blue-400">@CurrentVersion</span>
                    </p>
                    <p class="flex justify-between items-center">
                        <span class="text-sm font-medium text-gray-600 dark:text-gray-400">AliasVault latest version:</span>
                        <span class="text-base font-bold text-green-600 dark:text-green-400">@LatestVersion</span>
                    </p>
                </div>
            </div>

            <div>
                @if (ErrorMessage.Length > 0)
                {
                    <AlertMessageError Message="@ErrorMessage" />
                }

                @if (IsPendingMigrations)
                {
                    <BoldLoadingIndicator />
                }
                else
                {
                    <button @onclick="MigrateDatabase" type="button" class="px-4 py-2 text-white bg-primary-600 rounded-lg hover:bg-primary-700 focus:ring-4 focus:ring-primary-300 dark:bg-primary-500 dark:hover:bg-primary-600 dark:focus:ring-primary-800">
                        Start upgrade process
                    </button>
                }
            </div>
        </div>
    </div>
</div>

@code {
    private bool IsPendingMigrations { get; set; } = false;
    private string ErrorMessage { get; set; } = string.Empty;
    private string CurrentVersion { get; set; } = string.Empty;
    private string LatestVersion { get; set; } = string.Empty;

    /// <inheritdoc />
    protected override async Task OnInitializedAsync()
    {
        await base.OnInitializedAsync();

        // Get current and latest available database version
        CurrentVersion = await DbService.GetCurrentDatabaseVersionAsync();
        LatestVersion = await DbService.GetLatestDatabaseVersionAsync();
    }

    private async Task MigrateDatabase()
    {
        // Show loading indicator
        IsPendingMigrations = true;
        ErrorMessage = String.Empty;
        StateHasChanged();

        // Simulate a delay.
        await Task.Delay(1000);

        // Migrate the database
        if (await DbService.MigrateDatabaseAsync())
        {
            // Save the database to the server.
            await DbService.SaveDatabaseAsync();

            // Migration successful.
            GlobalNotificationService.AddSuccessMessage("Vault upgrade successful.", true);
        }
        else
        {
            // Migration failed
            ErrorMessage = "Database upgrade failed. Please try again or contact support.";
        }

        // Reset local state
        IsPendingMigrations = false;
        StateHasChanged();
    }
}
