@using MoonCore.Helpers
@using Moonlight.Shared.Http.Responses.Auth

@inject HttpApiClient ApiClient
@inject NavigationManager Navigation

<div class="flex h-screen justify-center items-center">
    <div class="sm:min-w-md">
        <div class="bg-base-100 shadow-base-300/20 z-1 w-full space-y-6 rounded-xl p-6 shadow-md lg:p-8">
        <LazyLoader EnableDefaultSpacing="false" Load="LoadAsync">
            @if (ShowSelection)
            {
                <div class="flex justify-center items-center gap-3">
                    <img src="/_content/Moonlight.Client/svg/logo.svg" class="size-12" alt="brand-logo"/>
                </div>
                <div class="text-center">
                    <h3 class="text-base-content mb-1.5 text-2xl font-semibold">Login into your account</h3>
                    <p class="text-base-content/80">Chose a login method to continue</p>
                </div>
                <div class="space-y-4">

                    @if (AuthSchemes.Length == 0)
                    {
                        <div class="alert alert-error text-center">
                            No auth schemes enabled/available
                        </div>
                    }

                    <div class="mb-4 space-y-4">
                        @foreach (var scheme in AuthSchemes)
                        {
                            var config = Configs.GetValueOrDefault(scheme.Identifier);

                            if (config == null) // Ignore all schemes which have no ui configured
                                continue;

                            <button @onclick="() => StartAsync(scheme)" class="btn btn-text w-full"
                                    style="background-color: @(config.Color)">
                                <img src="@config.IconUrl"
                                     alt="scheme icon"
                                     class="size-5 object-cover fill-base-content"/>
                                Sign in with @scheme.DisplayName
                            </button>
                        }
                    </div>
                </div>
            }
            else
            {
                <div class="flex justify-center">
                    <span class="loading loading-spinner loading-xl"></span>
                </div>
            }
        </LazyLoader>
    </div>
    </div>
</div>

@code
{
    private AuthSchemeResponse[] AuthSchemes;
    private Dictionary<string, AuthSchemeConfig> Configs = new();
    private bool ShowSelection = false;

    protected override void OnInitialized()
    {
        Configs["LocalAuth"] = new AuthSchemeConfig()
        {
            Color = "#7636e3",
            IconUrl = "/placeholder.jpg"
        };
    }

    private async Task LoadAsync(LazyLoader arg)
    {
        AuthSchemes = await ApiClient.GetJson<AuthSchemeResponse[]>(
            "api/auth"
        );

        // If we only have one auth scheme available
        // we want to auto redirect the user without
        // showing the selection screen

        if (AuthSchemes.Length == 1)
            await StartAsync(AuthSchemes[0]);
        else
            ShowSelection = true;
    }

    private Task StartAsync(AuthSchemeResponse scheme)
    {
        Navigation.NavigateTo($"/api/auth/{scheme.Identifier}", true);
        return Task.CompletedTask;
    }

    record AuthSchemeConfig
    {
        public string Color { get; set; }
        public string IconUrl { get; set; }
    }
}