<div class="p-4 bg-white border border-gray-200 rounded-lg shadow-sm dark:border-gray-700 sm:p-6 dark:bg-gray-800">
    <div class="flex items-center justify-between mb-4">
        <h3 class="text-lg font-semibold text-gray-900 dark:text-white">User registrations</h3>
    </div>
    @if (IsLoading)
    {
        <LoadingIndicator />
    }
    else
    {
        <div class="grid grid-cols-2 lg:grid-cols-4 gap-4">
            <div class="bg-blue-50 dark:bg-blue-900/30 p-4 rounded-lg cursor-pointer hover:bg-blue-100 dark:hover:bg-blue-900/40 transition-colors" @onclick="NavigateToUsers">
                <p class="text-sm font-medium text-gray-500 dark:text-gray-400">Last 24 hours</p>
                <h4 class="text-2xl font-bold text-gray-900 dark:text-white">@RegistrationStats.Hours24.ToString("N0")</h4>
            </div>
            <div class="bg-blue-50 dark:bg-blue-900/30 p-4 rounded-lg cursor-pointer hover:bg-blue-100 dark:hover:bg-blue-900/40 transition-colors" @onclick="NavigateToUsers">
                <p class="text-sm font-medium text-gray-500 dark:text-gray-400">Last 3 days</p>
                <h4 class="text-2xl font-bold text-gray-900 dark:text-white">@RegistrationStats.Days3.ToString("N0")</h4>
            </div>
            <div class="bg-blue-50 dark:bg-blue-900/30 p-4 rounded-lg cursor-pointer hover:bg-blue-100 dark:hover:bg-blue-900/40 transition-colors" @onclick="NavigateToUsers">
                <p class="text-sm font-medium text-gray-500 dark:text-gray-400">Last 7 days</p>
                <h4 class="text-2xl font-bold text-gray-900 dark:text-white">@RegistrationStats.Days7.ToString("N0")</h4>
            </div>
            <div class="bg-blue-50 dark:bg-blue-900/30 p-4 rounded-lg cursor-pointer hover:bg-blue-100 dark:hover:bg-blue-900/40 transition-colors" @onclick="NavigateToUsers">
                <p class="text-sm font-medium text-gray-500 dark:text-gray-400">Last 30 days</p>
                <h4 class="text-2xl font-bold text-gray-900 dark:text-white">@RegistrationStats.Days30.ToString("N0")</h4>
            </div>
        </div>
    }
</div>

@inject NavigationManager NavigationManager

@code {
    private bool IsLoading { get; set; } = true;
    private RegistrationStatistics RegistrationStats { get; set; } = new();

    /// <summary>
    /// Refreshes the data displayed on the card.
    /// </summary>
    public async Task RefreshData()
    {
        IsLoading = true;
        StateHasChanged();

        var now = DateTime.UtcNow;
        var hours24 = now.AddHours(-24);
        var days3 = now.AddDays(-3);
        var days7 = now.AddDays(-7);
        var days30 = now.AddDays(-30);

        // Get registration statistics
        await using var dbContext = await DbContextFactory.CreateDbContextAsync();
        var registrationQuery = dbContext.AliasVaultUsers.AsQueryable();
        RegistrationStats = new RegistrationStatistics
        {
            Hours24 = await registrationQuery.CountAsync(u => u.CreatedAt >= hours24),
            Days3 = await registrationQuery.CountAsync(u => u.CreatedAt >= days3),
            Days7 = await registrationQuery.CountAsync(u => u.CreatedAt >= days7),
            Days30 = await registrationQuery.CountAsync(u => u.CreatedAt >= days30)
        };

        IsLoading = false;
        StateHasChanged();
    }

    private sealed class RegistrationStatistics
    {
        public int Hours24 { get; set; }
        public int Days3 { get; set; }
        public int Days7 { get; set; }
        public int Days30 { get; set; }
    }

    private void NavigateToUsers()
    {
        NavigationManager.NavigateTo("users");
    }
}
