@page "/web/auth/challenge/{id:guid}/verify/{factorId:guid}"
@using DysonNetwork.Sphere.Account
@model DysonNetwork.Sphere.Pages.Auth.VerifyFactorModel
@{
    ViewData["Title"] = "Verify Your Identity";
}

<div class="h-full flex items-center justify-center bg-gray-100 dark:bg-gray-900">
    <div class="bg-white dark:bg-gray-800 px-8 pt-8 pb-4 rounded-lg shadow-md w-full max-w-md">
        <h1 class="text-2xl font-bold text-center text-gray-900 dark:text-white mb-2">Verify Your Identity</h1>
        <p class="text-center text-gray-600 dark:text-gray-300 mb-6">
            @switch (Model.FactorType)
            {
                case AccountAuthFactorType.EmailCode:
                    <span>We've sent a verification code to your email.</span>
                    break;
                case AccountAuthFactorType.InAppCode:
                    <span>Enter the code from your authenticator app.</span>
                    break;
                case AccountAuthFactorType.TimedCode:
                    <span>Enter your time-based verification code.</span>
                    break;
                case AccountAuthFactorType.PinCode:
                    <span>Enter your PIN code.</span>
                    break;
                case AccountAuthFactorType.Password:
                    <span>Enter your password.</span>
                    break;
                default:
                    <span>Please verify your identity.</span>
                    break;
            }
        </p>

        @if (Model.AuthChallenge == null)
        {
            <p class="text-red-500 text-center">Challenge not found or expired.</p>
        }
        else if (Model.AuthChallenge.StepRemain == 0)
        {
            <p class="text-green-600 dark:text-green-400 text-center">Verification successful. Redirecting...</p>
        }
        else
        {
            <form method="post" class="space-y-4">
                <div asp-validation-summary="ModelOnly" class="text-red-500 text-sm"></div>
                
                <div class="mb-4">
                    <label asp-for="Code" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                        @(Model.FactorType == AccountAuthFactorType.Password ? "Use your password" : "Verification Code")
                    </label>
                    <input asp-for="Code"
                           class="form-input mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring focus:ring-blue-500 focus:ring-opacity-50 dark:bg-gray-700 dark:border-gray-600 dark:text-white px-4 py-2"
                           autocomplete="one-time-code"
                           type="password"
                           autofocus />
                    <span asp-validation-for="Code" class="text-red-500 text-sm mt-1"></span>
                </div>

                <button type="submit"
                        class="w-full bg-blue-600 text-white py-2 px-4 rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">
                    Verify
                </button>

                <div class="text-center mt-4">
                    <a asp-page="SelectFactor" asp-route-id="@Model.Id" class="text-sm text-blue-600 hover:text-blue-500 dark:text-blue-400 dark:hover:text-blue-300">
                        ← Back to authentication methods
                    </a>
                </div>
            </form>
        }
    </div>
</div>

@section Scripts {
    @{ await Html.RenderPartialAsync("_ValidationScriptsPartial"); }
}