@page "/reset-password/{Token}"
@using FoodsharingSiegen.Shared.Helper
@layout LoginLayout

@inherits FoodsharingSiegen.Server.BaseClasses.FsBase

<PageTitle>@AppSettings.Terms.Title - Neues Passwort setzen</PageTitle>

<div class="d-flex justify-content-center align-items-center-sm" style="min-height: 100vh; align-items: start;">
    <div class="card shadow border-0" style="width: 100%; max-width: 420px; border-radius: 12px; margin: 1rem;">
        
        <div class="card-body p-4 p-md-5">
            <div class="text-center mb-4">
                <i class="fa-solid fa-leaf mb-3" style="font-size: 3rem; color: #64ae24;"></i>
                <h4 class="font-weight-bold" style="color: #533a20;"><small style="font-size: .6em;" class="d-block">Einarbeitungen</small> @AppSettings.Terms.Title</h4>
                <p class="text-muted">Neues Passwort festlegen</p>
            </div>

            @if (IsInitializing)
            {
                <div class="text-center mt-4">
                    <i class="fas fa-spinner fa-spin fa-2x mb-3" style="color: #64ae24;"></i>
                    <p>Token wird überprüft...</p>
                </div>
            }
            else if (!IsTokenValid)
            {
                <div class="alert alert-danger text-center">
                    <i class="fas fa-exclamation-triangle fa-2x mb-2 d-block"></i>
                    Der Link zum Zurücksetzen des Passworts ist ungültig oder abgelaufen. Bitte fordere einen neuen an.
                </div>
                <div class="text-center mt-4">
                    <a href="/forgot-password" class="btn btn-outline-primary w-100 mb-2"><i class="fas fa-redo mr-2"></i> Neuen Link anfordern</a>
                    <a href="/login" class="btn btn-link w-100" style="color: #64ae24;">Zurück zum Login</a>
                </div>
            }
            else if (IsSuccess)
            {
                <div class="alert alert-success text-center">
                    Passwort erfolgreich aktualisiert. Du kannst dich jetzt anmelden.
                </div>
                <div class="text-center mt-4">
                    <a href="/login" class="btn btn-outline-primary"><i class="fas fa-sign-in-alt mr-2"></i> Zum Login</a>
                </div>
            }
            else
            {
                <div class="alert alert-info" style="font-size: 0.85rem;">
                    <i class="fas fa-info-circle mr-1"></i> Dein Passwort muss mindestens 8 Zeichen lang sein und eine Zahl enthalten.
                </div>

                <Validation Validator="ValidationHelper.ValidatePassword" @bind-Status="@IsValidPassword">
                    <Field>
                        <FieldLabel>Neues Passwort</FieldLabel>
                        <TextEdit @bind-Text="NewPassword" Role="TextRole.Password" Placeholder="Passwort (min. 8 Zeichen, min. 1 Zahl)" KeyUp="TextEdit_KeyUp" Size="Size.Large"></TextEdit>
                    </Field>
                </Validation>

                <Validation Validator="ValidatePasswordConfirmation" @bind-Status="@IsValidPasswordConfirmation">
                    <Field Class="mt-3">
                        <FieldLabel>Passwort bestätigen</FieldLabel>
                        <TextEdit @bind-Text="ConfirmPassword" Role="TextRole.Password" Placeholder="Passwort bestätigen" KeyUp="TextEdit_KeyUp" Size="Size.Large"></TextEdit>
                    </Field>
                </Validation>

                @if (!string.IsNullOrEmpty(ErrorMessage))
                {
                    <div class="text-danger mt-3 text-center">
                        <i class="fas fa-exclamation-triangle mr-1"></i> @ErrorMessage
                    </div>
                }

                <Button Class="mt-4 w-100" Color="Color.Primary" Size="Size.Large" Clicked="SubmitReset" Disabled="@(IsValidPassword != ValidationStatus.Success || IsValidPasswordConfirmation != ValidationStatus.Success || IsLoading)">
                    @if (IsLoading)
                    {
                        <i class="fas fa-spinner fa-spin mr-2"></i> <span>Speichern...</span>
                    }
                    else
                    {
                        <i class="fas fa-save mr-2"></i> <span>Passwort speichern</span>
                    }
                </Button>
            }
        </div>
    </div>
</div>