@using LucideBlazor
@using ShadcnBlazor.Cards
@using ShadcnBlazor.Spinners
@using ShadcnBlazor.Buttons
@using ShadcnBlazor.Inputs
@using ShadcnBlazor.Labels

<div class="h-screen w-full flex items-center justify-center">
    <Card ClassName="w-full max-w-[calc(100%-2rem)] lg:max-w-xl grid gap-4 p-6">
        @if (!IsLoaded)
        {
            <div class="space-y-6">
                @if (CurrentStep == 0)
                {
                    <div
                        class="flex h-56 items-center justify-center rounded-lg bg-linear-to-br from-gray-100 to-gray-300 dark:from-gray-800 dark:to-gray-900">
                        <img alt="Moonlight Logo" class="size-34" src="/_content/Moonlight.Frontend/logo.svg" />
                    </div>

                    <div class="space-y-2 text-center">
                        <h2 class="text-2xl font-bold">Welcome to Moonlight Panel</h2>
                        <p class="text-muted-foreground">
                            You successfully installed moonlight. Now you are ready to perform some initial steps to complete your installation
                        </p>
                    </div>
                }
                else if (CurrentStep == 1)
                {
                    <div
                        class="flex h-56 items-center justify-center rounded-lg bg-linear-to-br from-gray-100 to-gray-300 dark:from-gray-800 dark:to-gray-900">
                        <UserIcon ClassName="size-34 text-blue-500" />
                    </div>
                    
                    <div class="space-y-2 text-center">
                        <h2 class="text-2xl font-bold">Admin Account Creation</h2>
                        <p class="text-muted-foreground">
                            To continue please fill in the account details of the user you want to use as the initial administrator account.
                            If you use an external OIDC provider, these details need to match with your desired OIDC account
                        </p>
                    </div>
                    
                    <div class="grid grid-cols-1 gap-5">
                        <div class="grid gap-2">
                            <Label for="username">Username</Label>
                            <InputField
                                @bind-Value="Username"
                                id="username"
                                placeholder="someoneelse"/>
                        </div>
                        <div class="grid gap-2">
                            <Label for="email">Email</Label>
                            <InputField
                                @bind-Value="Email"
                                id="email"
                                Type="email"
                                placeholder="a@cool.email"/>
                        </div>
                        <div class="grid gap-2">
                            <Label for="password">Password</Label>
                            <InputField
                                @bind-Value="Password"
                                id="password"
                                Type="password"
                                placeholder="......."/>
                        </div>
                    </div>
                }
                else if (CurrentStep == 2)
                {
                    <div
                        class="flex h-56 items-center justify-center rounded-lg bg-linear-to-br from-gray-100 to-gray-300 dark:from-gray-800 dark:to-gray-900">
                        <RocketIcon ClassName="size-34 text-blue-500" />
                    </div>

                    <div class="space-y-2 text-center">
                        <h2 class="text-2xl font-bold">You are all set!</h2>
                        <p class="text-muted-foreground">
                            You are now ready to finish the initial setup.
                            The configured options will be applied to the instance.
                            You will be redirected to the login after changes have been applied successfully
                        </p>
                    </div>
                }
                <div class="flex items-center justify-between">
                    <div class="flex gap-2">
                        @for (var step = 0; step < StepCount; step++)
                        {
                            if (step == CurrentStep)
                            {
                                <div class="h-2 w-2 rounded-full transition-colors bg-foreground">
                                </div>
                            }
                            else
                            {
                                <div class="h-2 w-2 rounded-full transition-colors bg-muted">
                                </div>
                            }
                        }
                    </div>
                    <div class="flex gap-1.5">
                        @if (CurrentStep > 0)
                        {
                            <Button @onclick="() => Navigate(-1)" Variant="ButtonVariant.Outline">
                                <ChevronLeftIcon />
                                Back
                            </Button>
                        }
                        @if (CurrentStep != StepCount - 1)
                        {
                            <Button @onclick="() => Navigate(1)">
                                Continue
                                <ArrowRightIcon/>
                            </Button>
                        }
                        else
                        {
                            <Button>
                                Finish
                                <RocketIcon />
                            </Button>
                        }
                    </div>
                </div>
            </div>
        }
        else
        {
            <div class="w-full flex justify-center items-center">
                <Spinner ClassName="size-10"/>
            </div>
        }
    </Card>
</div>

@code
{
    private bool IsLoaded = false;

    private int CurrentStep = 0;
    private int StepCount = 3;

    private string Email;
    private string Username;
    private string Password;

    private void Navigate(int diff) => CurrentStep += diff;
}