@page "/auth/otp-verify"
@layout AuthLayout
@inherits AuthBase

@*
    EN: OTP Verification page — 6-digit code input with countdown timer.
    VI: Trang xác thực OTP — input 6 chữ số với đếm ngược.
    Design: pencil-design/src/pages/tPOS/auth/workflow/otp-verify.pen
*@

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

<div class="auth-page">
    <AuthCard Title="@L["Auth_OTP_Title"]"
              Subtitle="@L["Auth_OTP_Subtitle"]"
              Icon="smartphone"
              IconClass="auth-icon--green"
              Compact="true">
        <ChildContent>
            <OtpInput OnComplete="HandleOtpComplete" />
            
            <AuthButton Variant="orange">
                @L["Auth_OTP_Submit"]
            </AuthButton>
        </ChildContent>
        <FooterContent>
            <div class="auth-timer">
                <i data-lucide="clock"></i>
                @L["Auth_OTP_ExpiresIn"] <span class="auth-timer-value">04:30</span>
            </div>
            <span class="auth-footer-text">
                @L["Auth_OTP_NotReceived"] <a href="#">@L["Auth_OTP_Resend"]</a>
            </span>
        </FooterContent>
    </AuthCard>
</div>

@code {
    private async Task HandleOtpComplete(string code)
    {
        Console.WriteLine($"OTP entered: {code}");
    }
}
