@extends('layouts.front.app')

@section('title', __('auth.two_factor.heading'))

@section('noPageIndex', true)
@section('disablePromoBar', true)
@section('disableHeader', true)
@section('disableFooter', true)

@section('content')
<section
    class="border-b border-border bg-gradient-to-b from-muted/50 to-background"
    aria-labelledby="twofactor-auth-heading">
    <div
        class="container py-10 sm:py-14 lg:py-16 xl:py-20"
        x-data="twoFactorVerify({
        currentMethod: @js($currentMethod),
        emailResendCooldown: @js($emailResendCooldown ?? 0),
        verifyMaxAttempts: @js((int) config('twofactorconfig.security.max_attempts', 5)),
        verifyThrottleByMethod: @js($verifyThrottleByMethod ?? []),
        urls: @js([
            'sendEmail' => $activeMethods->contains('email') ? route($guard . '.twofactor.verify.email.send') : null,
            'verifySubmit' => route($guard . '.twofactor.verify.submit'),
        ]),
        i18n: @js([
            'resend' => __('twofactor.setup.email.resend'),
            'resend_in' => __('twofactor.setup.email.resend_in'),
            'sending' => __('twofactor.setup.email.sending'),
            'toast_code_sent' => __('twofactor.toast.code_sent'),
            'toast_code_already_sent' => __('twofactor.toast.code_already_sent'),
            'toast_code_resent' => __('twofactor.toast.code_resent'),
            'toast_resend_failed' => __('twofactor.toast.resend_failed'),
            'toast_verify_failed' => __('twofactor.toast.verify_failed'),
            'verify_locked_in' => __('twofactor.verify.locked_in'),
            'verify_attempts_remaining' => __('twofactor.verify.attempts_remaining'),
        ]),
    })">
        <div class="mx-auto w-full max-w-5xl">
            <article class="overflow-hidden rounded-2xl border border-border bg-card shadow-hover dark:shadow-soft lg:rounded-3xl">
                <div class="grid lg:grid-cols-2">
                    {{-- Left panel: heading, method context, alternatives --}}
                    <div class="flex flex-col bg-brand/5 px-6 py-8 dark:bg-brand/10 sm:px-8 sm:py-10 lg:px-10 lg:py-12">
                        <div class="max-w-md">
                            <h2 id="twofactor-auth-heading" class="text-2xl font-bold tracking-tight text-foreground sm:text-3xl">
                                {{ __('auth.two_factor.heading') }}
                            </h2>
                        </div>

                        <div class="mt-2 grid min-h-[5.5rem] w-full grid-cols-1 grid-rows-1 [&>*]:col-start-1 [&>*]:row-start-1">
                            @if($activeMethods->contains('totp'))
                            <div
                                for="totp"
                                class="col-start-1 row-start-1 transition-opacity duration-200 ease-out"
                                x-bind:class="currentMethod === 'totp' ? 'z-10 opacity-100' : 'pointer-events-none z-0 opacity-0'"
                                x-bind:aria-hidden="currentMethod !== 'totp'">
                                <div class="mt-2">
                                    <span
                                        class="inline-flex w-fit items-center gap-1.5 rounded-full border border-brand/15 bg-card px-3 py-1 text-xs font-medium text-brand shadow-card dark:border-primary-400/40 dark:bg-primary-950/50 dark:text-primary-300">
                                        <x-heroicon-o-qr-code class="h-3.5 w-3.5 shrink-0" aria-hidden="true" />
                                        {{ __('auth.two_factor.method.totp.heading') }}
                                    </span>
                                </div>

                                <p class="mt-3 text-sm leading-relaxed text-muted-foreground sm:text-base">
                                    {{ __('auth.two_factor.method.totp.subheading') }}
                                </p>
                            </div>
                            @endif

                            @if($activeMethods->contains('email'))
                            <div
                                for="email"
                                class="col-start-1 row-start-1 transition-opacity duration-200 ease-out"
                                x-bind:class="currentMethod === 'email' ? 'z-10 opacity-100' : 'pointer-events-none z-0 opacity-0'"
                                x-bind:aria-hidden="currentMethod !== 'email'">
                                <div class="mt-2">
                                    <span
                                        class="inline-flex w-fit items-center gap-1.5 rounded-full border border-brand/15 bg-card px-3 py-1 text-xs font-medium text-brand shadow-card dark:border-primary-400/40 dark:bg-primary-950/50 dark:text-primary-300">
                                        <x-heroicon-o-envelope class="h-3.5 w-3.5 shrink-0" aria-hidden="true" />
                                        {{ __('auth.two_factor.method.email.heading') }}
                                    </span>
                                </div>

                                <p class="mt-3 text-sm leading-relaxed text-muted-foreground sm:text-base">
                                    {{ __('auth.two_factor.method.email.subheading') }}
                                </p>
                            </div>
                            @endif

                            <div
                                for="recovery-codes"
                                class="col-start-1 row-start-1 transition-opacity duration-200 ease-out"
                                x-bind:class="currentMethod === 'recovery-codes' ? 'z-10 opacity-100' : 'pointer-events-none z-0 opacity-0'"
                                x-bind:aria-hidden="currentMethod !== 'recovery-codes'">
                                <div class="mt-2">
                                    <span
                                        class="inline-flex w-fit items-center gap-1.5 rounded-full border border-brand/15 bg-card px-3 py-1 text-xs font-medium text-brand shadow-card dark:border-primary-400/40 dark:bg-primary-950/50 dark:text-primary-300">
                                        <x-heroicon-o-key class="h-3.5 w-3.5 shrink-0" aria-hidden="true" />
                                        {{ __('auth.two_factor.method.recovery-codes.heading') }}
                                    </span>
                                </div>

                                <p class="mt-3 text-sm leading-relaxed text-muted-foreground sm:text-base">
                                    {{ __('auth.two_factor.method.recovery-codes.subheading') }}
                                </p>
                            </div>
                        </div>

                        <div class="mt-8 flex flex-col gap-2">
                            <p class="text-xs mb-2 font-medium tracking-wide text-muted-foreground">
                                {{ __('auth.two_factor.method.switch.description') }}
                            </p>

                            @if($activeMethods->contains('totp'))
                            @include('pages.twofactor.verification.partials.method-switch-totp')
                            @endif

                            @if($activeMethods->contains('email'))
                            @include('pages.twofactor.verification.partials.method-switch-email')
                            @endif

                            @include('pages.twofactor.verification.partials.method-switch-recovery')
                        </div>
                    </div>

                    <div class="flex flex-col bg-card px-6 py-8 sm:px-8 sm:py-10 lg:px-10 lg:py-12">
                        <div class="grid w-full min-h-[26rem] flex-1 grid-cols-1 grid-rows-1 px-2 py-4 sm:min-h-[28rem] sm:px-4 sm:py-6 [&>*]:col-start-1 [&>*]:row-start-1">
                            @include('pages.twofactor.verification.partials.email-sending-skeleton')

                            <div
                                x-show="emailLoadState !== 'loading'"
                                x-cloak
                                x-transition:enter="twofactor-panel-enter"
                                x-transition:enter-start="twofactor-panel-enter-start"
                                x-transition:enter-end="twofactor-panel-enter-end"
                                x-transition:leave="twofactor-panel-leave"
                                x-transition:leave-start="twofactor-panel-leave-start"
                                x-transition:leave-end="twofactor-panel-leave-end"
                                class="flex w-full flex-col items-center justify-center text-center">
                                <span class="inline-flex h-20 w-20 shrink-0 items-center justify-center rounded-3xl bg-brand text-brand-foreground shadow-soft ring-4 ring-brand/10 sm:h-24 sm:w-24">
                                    <x-heroicon-o-shield-check class="h-10 w-10 sm:h-12 sm:w-12" aria-hidden="true" />
                                </span>

                                <h1
                                    id="twofactor-auth-verify-heading"
                                    class="mt-6 text-2xl font-bold tracking-tight text-foreground sm:mt-8">
                                    {{ __('twofactor.verify.heading') }}
                                </h1>
                                <div class="mx-auto mt-2 grid min-h-[2.75rem] w-full max-w-md grid-cols-1 grid-rows-1 [&>*]:col-start-1 [&>*]:row-start-1">
                                    <p
                                        class="col-start-1 row-start-1 text-sm leading-relaxed text-muted-foreground transition-opacity duration-200 ease-out"
                                        x-bind:class="currentMethod === 'email' ? 'z-10 opacity-100' : 'pointer-events-none z-0 opacity-0'"
                                        x-bind:aria-hidden="currentMethod !== 'email'">
                                        {{ __('twofactor.verify.subtitle_email_masked', ['email' => $maskedEmail]) }}
                                    </p>
                                    <p
                                        class="col-start-1 row-start-1 text-sm leading-relaxed text-muted-foreground transition-opacity duration-200 ease-out"
                                        x-bind:class="currentMethod === 'totp' ? 'z-10 opacity-100' : 'pointer-events-none z-0 opacity-0'"
                                        x-bind:aria-hidden="currentMethod !== 'totp'">
                                        {{ __('twofactor.verify.subtitle_totp') }}
                                    </p>
                                    <p
                                        class="col-start-1 row-start-1 text-sm leading-relaxed text-muted-foreground transition-opacity duration-200 ease-out"
                                        x-bind:class="currentMethod === 'recovery-codes' ? 'z-10 opacity-100' : 'pointer-events-none z-0 opacity-0'"
                                        x-bind:aria-hidden="currentMethod !== 'recovery-codes'">
                                        {{ __('twofactor.verify.subtitle_recovery') }}
                                    </p>
                                </div>

                                <div
                                    x-ref="verifyOtpRoot"
                                    class="mt-8 w-full min-w-0 sm:mt-10"
                                    @otp-updated="otpComplete = $event.detail.complete">
                                    <x-forms.otp-input name="otp" size="lg" :centered="true" x-show="currentMethod != 'recovery-codes'" />
                                    <x-forms.otp-input name="recovery-code" mode="alphanumeric" length="8" size="sm" :centered="true" x-show="currentMethod == 'recovery-codes'" />

                                    @if($activeMethods->contains('email'))
                                    @include('pages.twofactor.force-setup.partials.verify-email-resend', [
                                    'methodKey' => 'currentMethod',
                                    'initialHidden' => $currentMethod !== 'email',
                                    ])
                                    @endif

                                    @include('pages.twofactor.force-setup.partials.verify-throttle-notice')

                                    <div class="mt-6 flex w-full flex-col gap-2.5 border-t border-border/60 pt-6 sm:gap-3">
                                        @include('pages.twofactor.partials.verify-submit-button', [
                                        'label' => __('auth.two_factor.button.verify'),
                                        'cooldownCheck' => "(currentMethod !== 'recovery-codes' && verifyOtpCooldown > 0)",
                                        ])
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </article>
        </div>
    </div>
</section>
@endsection

@push('before-app-js')
@vite(['resources/js/components/otp-input.js', 'resources/js/twofactor/verification.js'])
@endpush