@extends('layouts.admin.app')

@section('title', __('pages/twofactor-settings.title'))

@section('content')

<x-layouts.admin.page-container
    :breadcrumbs="[['label' => __('pages/dashboard.page_title'), 'url' => route('admin.dashboard')],['label' => __('pages/twofactor-settings.title')]]"
>


    <div class="space-y-4 mt-10">
        <div
            class="animate-fade-in"
            x-data="twofactorSettings({
                regenerateUrl: @js(route($guard . '.twofactor.settings.recovery.regenerate')),
                removeMethodUrl: @js(route($guard . '.twofactor.settings.methods.remove')),
                hasRecoveryCodes: @js(! empty($recoveryCodes)),
                canRemoveTotp: @js($canRemoveTotp),
                canRemoveEmail: @js($canRemoveEmail),
                i18n: {
                    confirm_title: @js(__('pages/twofactor-settings.recovery.confirm_title')),
                    confirm_message: @js(__('pages/twofactor-settings.recovery.confirm_message')),
                    confirm_confirm: @js(__('pages/twofactor-settings.recovery.confirm_confirm')),
                    confirm_cancel: @js(__('buttons.cancel')),
                    regenerate_failed: @js(__('pages/twofactor-settings.recovery.regenerate_failed')),
                    remove_description: @js(__('pages/twofactor-settings.methods.remove_description')),
                    method_totp_title: @js(__('pages/twofactor-settings.methods.totp.title')),
                    method_email_title: @js(__('pages/twofactor-settings.methods.email.title')),
                    remove_failed: @js(__('pages/twofactor-settings.methods.remove_failed')),
                    cannot_remove_last: @js(__('pages/twofactor-settings.methods.cannot_remove_last')),
                },
            })">
            <header class="mb-5 sm:mb-6 lg:mb-8">
                <div class="flex items-start gap-3 sm:gap-4">
                    <span
                        class="flex h-11 w-11 shrink-0 items-center justify-center rounded-xl bg-brand/10 text-brand dark:bg-primary-500/15 dark:text-primary-300 sm:h-12 sm:w-12 sm:rounded-2xl"
                        aria-hidden="true">
                        <x-heroicon-s-shield-check class="h-6 w-6 sm:h-7 sm:w-7" />
                    </span>
                    <div class="min-w-0">
                        <p class="text-2xs font-medium uppercase tracking-wider text-muted-foreground">
                            {{ __('pages/common.user_nav.security') }}
                        </p>
                        <h1 class="mt-1 text-xl font-bold tracking-tight text-foreground sm:text-2xl lg:text-3xl">
                            {{ __('pages/twofactor-settings.title') }}
                        </h1>
                        <p class="mt-2 max-w-2xl text-sm leading-relaxed text-muted-foreground">
                            {{ __('pages/twofactor-settings.description') }}
                        </p>
                    </div>
                </div>
            </header>

            <div class="grid grid-cols-1 gap-5 sm:gap-6 lg:grid-cols-12 lg:items-stretch">
                <section class="space-y-4 sm:space-y-5 lg:col-span-7 xl:col-span-8" aria-labelledby="mfa-methods-heading">
                    <article class="overflow-hidden rounded-2xl border border-border/80 bg-card shadow-card dark:border-border/60 dark:shadow-soft">
                        <div class="flex flex-col gap-4 p-4 sm:flex-row sm:items-center sm:justify-between sm:gap-5 sm:p-5">
                            <div class="flex min-w-0 items-start gap-3 sm:items-center sm:gap-4">
                                <span
                                    class="flex h-11 w-11 shrink-0 items-center justify-center rounded-xl bg-sky-50 text-sky-600 dark:bg-sky-950/40 dark:text-sky-400"
                                    aria-hidden="true">
                                    <x-heroicon-o-device-phone-mobile class="h-5 w-5" />
                                </span>
                                <div class="min-w-0">
                                    <h3 class="text-sm font-semibold text-foreground sm:text-base">
                                        {{ __('pages/twofactor-settings.methods.totp.title') }}
                                    </h3>
                                    <p class="mt-0.5 text-sm leading-relaxed text-muted-foreground">
                                        {{ __('pages/twofactor-settings.methods.totp.description') }}
                                    </p>
                                </div>
                            </div>

                            @if ($activeMethods->contains('totp') && $canRemoveTotp)
                            <button
                                type="button"
                                data-action="remove-method"
                                data-method="totp"
                                class="inline-flex w-full shrink-0 cursor-pointer items-center justify-center gap-1.5 rounded-lg bg-red-50 px-3.5 py-2 text-sm font-medium text-red-700 transition hover:bg-red-100 focus:outline-none focus:ring-2 focus:ring-red-500/30 focus:ring-offset-2 focus:ring-offset-background dark:bg-red-950/40 dark:text-red-300 dark:hover:bg-red-950/60 sm:w-auto">
                                <x-heroicon-o-trash class="h-4 w-4 shrink-0" aria-hidden="true" />
                                {{ __('pages/twofactor-settings.methods.totp.remove') }}
                            </button>
                            @elseif ($activeMethods->contains('totp'))
                            <span class="inline-flex w-full shrink-0 items-center justify-center rounded-lg bg-muted/50 px-3.5 py-2 text-sm font-medium text-muted-foreground sm:w-auto">
                                {{ __('pages/twofactor-settings.methods.enabled') }}
                            </span>
                            @else
                            <button
                                type="button"
                                @click="$dispatch('open-totp-setup-modal')"
                                class="inline-flex w-full shrink-0 cursor-pointer items-center justify-center gap-1.5 rounded-lg bg-sky-50 px-3.5 py-2 text-sm font-medium text-sky-700 transition hover:bg-sky-100 focus:outline-none focus:ring-2 focus:ring-sky-500/30 focus:ring-offset-2 focus:ring-offset-background dark:bg-sky-950/40 dark:text-sky-300 dark:hover:bg-sky-950/60 sm:w-auto">
                                <x-heroicon-o-plus class="h-4 w-4 shrink-0" aria-hidden="true" />
                                {{ __('pages/twofactor-settings.methods.totp.setup') }}
                            </button>
                            @endif
                        </div>
                    </article>

                    <article class="overflow-hidden rounded-2xl border border-border/80 bg-card shadow-card dark:border-border/60 dark:shadow-soft">
                        <div class="flex flex-col gap-4 p-4 sm:flex-row sm:items-center sm:justify-between sm:gap-5 sm:p-5">
                            <div class="flex min-w-0 items-start gap-3 sm:items-center sm:gap-4">
                                <span
                                    class="flex h-11 w-11 shrink-0 items-center justify-center rounded-xl bg-emerald-50 text-emerald-600 dark:bg-emerald-950/40 dark:text-emerald-400"
                                    aria-hidden="true">
                                    <x-heroicon-o-envelope class="h-5 w-5" />
                                </span>
                                <div class="min-w-0">
                                    <h3 class="text-sm font-semibold text-foreground sm:text-base">
                                        {{ __('pages/twofactor-settings.methods.email.title') }}
                                    </h3>
                                    <p class="mt-0.5 text-sm leading-relaxed text-muted-foreground">
                                        @if ($activeMethods->contains('email'))
                                        {{ __('pages/twofactor-settings.methods.email.description', ['email' => $user->email]) }}
                                        @else
                                        {{ __('pages/twofactor-settings.methods.email.description_setup', ['email' => $user->email]) }}
                                        @endif
                                    </p>
                                </div>
                            </div>

                            @if ($activeMethods->contains('email') && $canRemoveEmail)
                            <button
                                type="button"
                                data-action="remove-method"
                                data-method="email"
                                class="inline-flex w-full shrink-0 cursor-pointer items-center justify-center gap-1.5 rounded-lg bg-red-50 px-3.5 py-2 text-sm font-medium text-red-700 transition hover:bg-red-100 focus:outline-none focus:ring-2 focus:ring-red-500/30 focus:ring-offset-2 focus:ring-offset-background dark:bg-red-950/40 dark:text-red-300 dark:hover:bg-red-950/60 sm:w-auto">
                                <x-heroicon-o-trash class="h-4 w-4 shrink-0" aria-hidden="true" />
                                {{ __('pages/twofactor-settings.methods.email.remove') }}
                            </button>
                            @elseif ($activeMethods->contains('email'))
                            <span class="inline-flex w-full shrink-0 items-center justify-center rounded-lg bg-muted/50 px-3.5 py-2 text-sm font-medium text-muted-foreground sm:w-auto">
                                {{ __('pages/twofactor-settings.methods.enabled') }}
                            </span>
                            @else
                            <button
                                type="button"
                                data-action="setup-email"
                                x-bind:disabled="emailSetupLoading"
                                x-bind:aria-busy="emailSetupLoading ? 'true' : 'false'"
                                class="inline-flex w-full shrink-0 cursor-pointer items-center justify-center gap-1.5 rounded-lg bg-sky-50 px-3.5 py-2 text-sm font-medium text-sky-700 transition hover:bg-sky-100 focus:outline-none focus:ring-2 focus:ring-sky-500/30 focus:ring-offset-2 focus:ring-offset-background disabled:pointer-events-none disabled:opacity-60 dark:bg-sky-950/40 dark:text-sky-300 dark:hover:bg-sky-950/60 sm:w-auto">
                                <x-heroicon-o-plus
                                    class="h-4 w-4 shrink-0"
                                    x-bind:class="emailSetupLoading ? 'hidden' : ''"
                                    aria-hidden="true" />
                                <x-heroicon-o-arrow-path
                                    class="h-4 w-4 shrink-0 animate-spin"
                                    x-show="emailSetupLoading"
                                    x-cloak
                                    aria-hidden="true" />
                                {{ __('pages/twofactor-settings.methods.email.setup') }}
                            </button>
                            @endif
                        </div>
                    </article>
                </section>

                <aside class="flex lg:col-span-5 xl:col-span-4" aria-labelledby="recovery-codes-heading">
                    <article class="flex w-full flex-col overflow-hidden rounded-2xl border border-border/80 bg-card shadow-card dark:border-border/60 dark:shadow-soft">
                        <div class="flex flex-1 flex-col gap-4 p-4 sm:gap-5 sm:p-5">
                            <div class="flex min-w-0 items-start gap-3 sm:items-center sm:gap-4">
                                <span
                                    class="flex h-11 w-11 shrink-0 items-center justify-center rounded-xl bg-amber-50 text-amber-700 dark:bg-amber-950/40 dark:text-amber-400"
                                    aria-hidden="true">
                                    <x-heroicon-o-code-bracket-square class="h-5 w-5" />
                                </span>
                                <div class="min-w-0">
                                    <h2 id="recovery-codes-heading" class="text-sm font-semibold text-foreground sm:text-base">
                                        {{ __('pages/twofactor-settings.recovery.title') }}
                                    </h2>
                                    <p class="mt-0.5 text-sm leading-relaxed text-muted-foreground">
                                        {{ __('pages/twofactor-settings.recovery.description') }}
                                    </p>
                                </div>
                            </div>

                            <div id="recovery-codes-panel" class="flex flex-1 flex-col justify-end gap-4">
                                @include('pages.twofactor.settings.partials.recovery-panel', [
                                'recoveryCodes' => $recoveryCodes,
                                'canRegenerate' => $canRegenerate,
                                ])
                            </div>
                        </div>
                    </article>
                </aside>
            </div>

            @include('pages.twofactor.settings.partials.remove-method-modal')
        </div>

        <div id="recovery-codes-modal-root">
            @include('pages.twofactor.settings.partials.recovery-modal', ['recoveryCodes' => $recoveryCodes])
        </div>

        @include('pages.twofactor.settings.partials.totp-setup-modal', [
        'verifyMaxAttempts' => $verifyMaxAttempts,
        ])

        @include('pages.twofactor.settings.partials.email-setup-modal', [
        'verifyMaxAttempts' => $verifyMaxAttempts,
        'emailResendCooldown' => $emailResendCooldown,
        ])

        <x-alert-dialog />
    </div>
</x-layouts.admin.page-container>

@endsection

@push('before-app-js')
@vite([
'resources/js/components/otp-input.js',
'resources/js/twofactor/settings.js',
'resources/js/twofactor/totp-setup-modal.js',
'resources/js/twofactor/email-setup-modal.js',
])
@endpush