@using static FrontOffice.Main.Shared.AuthDialog

@if (CurrentStep == AuthStep.Phone)
{
    <MudText Typo="Typo.body2" Class="mb-4 mud-text-secondary" Align="Align.Center">
        لطفاً شماره موبایل خود را وارد کنید تا رمز پویا ارسال شود.
    </MudText>

    <MudForm @ref="_phoneForm" Model="PhoneRequest">
        <MudTextField @bind-Value="PhoneRequest.Mobile"
                      Label="شماره موبایل"
            
                      Variant="Variant.Outlined"
                      Immediate="true"
                      Required="true"
                      Placeholder="شماره موبایل خود را وارد کنید" 
                      RequiredError="وارد کردن شماره موبایل الزامی است."
                      Class="mb-3" />

        <div class="captcha-row mb-3">
            <MudTextField Label="کد کپچا" Placeholder="کد نمایش داده شده" Immediate="true"
                          Variant="Variant.Outlined" Value="CaptchaInput"
                          ValueChanged="@((string v) => CaptchaInputChanged.InvokeAsync(v))"
                          Required="true"
                          RequiredError="لطفاً کد کپچا را وارد کنید." />
            <MudPaper Elevation="0" Class="captcha-box d-flex align-center justify-center">
                <MudText Typo="Typo.h5">@CaptchaCode</MudText>
            </MudPaper>
            <MudIconButton Icon="@Icons.Material.Outlined.Refresh" Color="Color.Primary"
                           Disabled="IsBusy" OnClick="OnRefreshCaptcha" Size="Size.Medium" />
        </div>

        <MudCheckBox T="bool" Required="true"
                     Label="شرایط و قوانین را می‌پذیرم"
                     RequiredError="برای ادامه باید شرایط و قوانین را بپذیرید."
                     Color="Color.Primary"
                     Class="mb-2" />

        @if (!string.IsNullOrWhiteSpace(ErrorMessage))
        {
            <MudAlert Severity="Severity.Error" Dense="true" Elevation="0"
                      Class="mb-2 rounded-lg">@ErrorMessage</MudAlert>
        }
    </MudForm>
}
else if (CurrentStep == AuthStep.Verify)
{
    <MudText Typo="Typo.body2" Class="mb-4 mud-text-secondary" Align="Align.Center">
        رمز پویا شش رقمی ارسال شده به <strong>@PhoneNumber</strong> را وارد کنید.
    </MudText>

    <MudForm @ref="_verifyForm" Model="VerifyRequest">
        <MudTextField @bind-Value="VerifyRequest.Code"
                      Label="رمز پویا"
        
                      Variant="Variant.Outlined"
                      Immediate="true"
                      Required="true"
                      RequiredError="وارد کردن رمز پویا الزامی است."
            
                      Class="mb-3"
                      MaxLength="6" />

        @if (!string.IsNullOrWhiteSpace(ErrorMessage))
        {
            <MudAlert Severity="Severity.Error" Dense="true" Elevation="0"
                      Class="mb-2 rounded-lg">@ErrorMessage</MudAlert>
        }
        @if (!string.IsNullOrWhiteSpace(InfoMessage))
        {
            <MudAlert Severity="Severity.Success" Dense="true" Elevation="0"
                      Class="mb-2 rounded-lg">@InfoMessage</MudAlert>
        }

        <MudDivider Class="my-3" />
        <MudStack Row="true" Justify="Justify.SpaceBetween" AlignItems="AlignItems.Center">
            <MudButton Variant="Variant.Text" Color="Color.Secondary" Disabled="IsBusy"
                       OnClick="OnChangePhone" Size="Size.Small">
                <MudIcon Icon="@Icons.Material.Outlined.Edit" Size="Size.Small" Class="me-1" /> تغییر شماره
            </MudButton>
            @if (ResendRemaining > 0)
            {
                <MudText Typo="Typo.caption" Class="mud-text-secondary">
                    ارسال مجدد تا @ResendRemaining ثانیه
                </MudText>
            }
            else
            {
                <MudButton Variant="Variant.Text" Color="Color.Primary" Disabled="IsBusy"
                           OnClick="OnResendOtp" Size="Size.Small">
                    ارسال مجدد
                </MudButton>
            }
        </MudStack>
    </MudForm>
}