@page "/auth/password-reset"
@using WebClientTpos.Client.Components.Auth
@inherits AuthBase

@*
    EN: Password Reset page — new password form with strength indicator.
    VI: Trang đặt lại mật khẩu — form mật khẩu mới với chỉ báo độ mạnh.
    Design: pencil-design/src/pages/tPOS/auth/workflow/password-reset.pen
*@

<PageTitle>@L["Auth_PwdReset_PageTitle"]</PageTitle>

<div class="auth-page">
    @if (!_resetSuccess)
    {
        <AuthCard Title="@L["Auth_PwdReset_Title"]"
                  Subtitle="@L["Auth_PwdReset_Subtitle"]"
                  Icon="lock"
                  IconClass="auth-icon--blue"
                  BackLink="/auth/forgot-password-new"
                  BackLinkText="@L["Auth_PwdReset_BackLink"]"
                  Compact="true">
            <ChildContent>
                <div class="auth-form">
                    <AuthInput Label="@L["Auth_PwdReset_NewPwdLabel"]"
                               InputType="password"
                               Placeholder="@L["Auth_PwdReset_NewPwdPlaceholder"]"
                               PrefixIcon="lock"
                               InputId="new-password" />
                    
                    <AuthInput Label="@L["Auth_PwdReset_ConfirmLabel"]"
                               InputType="password"
                               Placeholder="@L["Auth_PwdReset_ConfirmPlaceholder"]"
                               PrefixIcon="lock"
                               InputId="confirm-password" />
                    
                    <div class="auth-strength">
                        <span class="auth-strength-title">@L["Auth_PwdReset_Requirements"]</span>
                        <div class="auth-strength-item auth-strength-item--pass">
                            <i data-lucide="check-circle"></i> @L["Auth_PwdReset_Req8Chars"]
                        </div>
                        <div class="auth-strength-item auth-strength-item--pass">
                            <i data-lucide="check-circle"></i> @L["Auth_PwdReset_ReqCase"]
                        </div>
                        <div class="auth-strength-item">
                            <i data-lucide="circle"></i> @L["Auth_PwdReset_ReqSpecial"]
                        </div>
                    </div>
                </div>
                
                <AuthButton Variant="orange" OnClick="HandleReset">
                    @L["Auth_PwdReset_Submit"]
                </AuthButton>
            </ChildContent>
        </AuthCard>
    }
    else
    {
        <AuthCard Title="@L["Auth_PwdReset_SuccessTitle"]"
                  Subtitle="@L["Auth_PwdReset_SuccessSubtitle"]"
                  Icon="check-circle"
                  IconClass="auth-icon--success">
            <ChildContent>
                <AuthButton Variant="orange" OnClick="GoToLogin">
                    @L["Auth_PwdReset_GoLogin"]
                </AuthButton>
            </ChildContent>
        </AuthCard>
    }
</div>

@code {
    private bool _resetSuccess = false;

    private void HandleReset()
    {
        _resetSuccess = true;
    }

    private void GoToLogin()
    {
        Navigation.NavigateTo("/auth/login/branch");
    }
}
