@if (IsVisible)
{
    <div class="loading fixed inset-0 w-full h-full z-50 bg-gray-200 !m-0 !p-0 dark:bg-gray-500" style="z-index: 2147483641 !important;">
        <div class="aliasvault-fullscreen-spinner mx-auto">
            <div class="cloud-shape-inverted">
                <div class="dot-inverted delay-1"></div>
                <div class="dot-inverted delay-2"></div>
                <div class="dot-inverted delay-3"></div>
                <div class="dot-inverted delay-4"></div>
            </div>
            @if (!string.IsNullOrEmpty(LoadingMessage))
            {
                <div class="loading-message mt-4 text-center text-gray-700 dark:text-gray-300">
                    @LoadingMessage
                </div>
            }
        </div>
    </div>
}

@code {
    private bool IsVisible { get; set; }
    private string LoadingMessage { get; set; } = string.Empty;

    /// <summary>
    /// Shows the loading indicator.
    /// </summary>
    /// <param name="message">Optional message to display below the loading spinner.</param>
    public void Show(string? message = null)
    {
        IsVisible = true;
        LoadingMessage = message ?? string.Empty;
        StateHasChanged();
    }

    /// <summary>
    /// Hides the loading indicator.
    /// </summary>
    public void Hide()
    {
        IsVisible = false;
        LoadingMessage = string.Empty;
        StateHasChanged();
    }
}

<style>
.loading {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.9);
}

.dark .loading {
    background-color: rgba(107, 114, 128, 0.9);
}

.aliasvault-fullscreen-spinner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 160px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.aliasvault-spinner {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 51px;
  width: auto;
}

.cloud-shape-inverted {
  border: 6px solid #eabf69;
  border-radius: 9999px;
  padding: 13px 26px;
  display: flex;
  gap: 10px;
  align-items: center;
  box-shadow: 0 0 4px 2px rgba(0, 0, 0, 0.1);
}

.dot-inverted {
  width: 10px;
  height: 10px;
  border-radius: 9999px;
  background-color: #eabf69;
  animation: pulse-inverted 1.4s infinite ease-in-out;
}

.delay-1 { animation-delay: 0s; }
.delay-2 { animation-delay: 0.2s; }
.delay-3 { animation-delay: 0.4s; }
.delay-4 { animation-delay: 0.6s; }

@@keyframes pulse-inverted {
  0%, 100% { opacity: 0.3; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.3); }
}

.loading-message {
    font-size: 0.875rem;
    line-height: 1.25rem;
    max-width: 300px;
    word-wrap: break-word;
}
</style>
