@extends('layouts.app')

@section('title', __('two-factor.security.2fa.setup.title'))

@section('content')

<div class="row py-3">
    <div class="col-md-8 col-lg-6 mx-auto">

        @if ($currentStep === 0)
            <div class="card">
                <div class="card-body">
                    @include('auth.2fa._intro_enforced', ['partner' => $partner])
                </div>
            </div>

        @elseif ($resumable)
            <div class="card border-warning">
                <div class="card-body" role="region" aria-label="{{ __('two-factor.security.2fa.setup.resume.aria') }}">
                    <p>{{ __('two-factor.security.2fa.setup.resume.intro') }}</p>
                    <div class="d-flex flex-wrap gap-2">
                        <form method="POST" action="{{ route('2fa.resume', ['partnerSlug' => $partner->slug]) }}" class="m-0">
                            @csrf
                            <button type="submit" class="btn btn-primary">{{ __('two-factor.security.2fa.setup.resume.continue') }}</button>
                        </form>
                        <form method="POST" action="{{ route('2fa.regenerate', ['partnerSlug' => $partner->slug]) }}" class="m-0">
                            @csrf
                            <button type="submit" class="btn btn-outline-secondary">{{ __('two-factor.security.2fa.setup.resume.restart') }}</button>
                        </form>
                    </div>
                </div>
            </div>

        @else
            <div class="card wd-2fa-card">
                <div class="card-header">
                    <x-two-factor.stepper :step="$currentStep" :total="3" />
                </div>
                <div class="card-body">

                    @if ($currentStep > 1 && $passwordConfirmedAt)
                        <div class="wd-2fa-skipped-notice" role="status">
                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                                 stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false">
                                <circle cx="12" cy="12" r="10" fill="rgba(245, 167, 40, .15)" stroke="none"/>
                                <path d="M8 12l3 3 5-6"/>
                            </svg>
                            <span>{{ __('two-factor.security.2fa.setup.skipped.password_confirmed', ['time' => $passwordConfirmedAt->diffForHumans()]) }}</span>
                        </div>
                    @endif

                    @if ($currentStep === 1)
                        <div class="wd-2fa-step__icon" aria-hidden="true">
                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                                 stroke-width="2" stroke-linecap="round" stroke-linejoin="round" focusable="false">
                                <rect x="5" y="11" width="14" height="9" rx="2"/>
                                <path d="M8 11V7a4 4 0 1 1 8 0v4"/>
                            </svg>
                        </div>
                        <h1 class="wd-2fa-step__title">{{ __('two-factor.security.2fa.setup.step1.title') }}</h1>
                        <p class="wd-2fa-step__subtitle">{{ __('two-factor.security.2fa.setup.step1.intro') }}</p>
                        <form action="{{ route('password.confirm', ['partnerSlug' => $partner->slug]) }}" method="POST">
                            @csrf
                            <div class="mb-3">
                                <label for="password" class="form-label">{{ __('two-factor.security.2fa.setup.step1.label') }}</label>
                                <input type="password" id="password" name="password" autocomplete="current-password" autofocus required
                                       class="form-control @error('password') is-invalid @enderror"
                                       aria-invalid="{{ $errors->has('password') ? 'true' : 'false' }}"
                                       aria-describedby="password-error">
                                <div id="password-error" class="invalid-feedback" role="alert">@error('password'){{ $message }}@enderror</div>
                            </div>
                            <button type="submit" class="btn btn-primary">{{ __('two-factor.security.2fa.setup.step1.cta') }}</button>
                        </form>

                    @elseif ($currentStep === 2)
                        <div class="wd-2fa-step__icon" aria-hidden="true">
                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                                 stroke-width="2" stroke-linecap="round" stroke-linejoin="round" focusable="false">
                                <rect x="3" y="5" width="18" height="14" rx="2"/>
                                <path d="M3 7l9 6 9-6"/>
                            </svg>
                        </div>
                        <h1 class="wd-2fa-step__title">{{ __('two-factor.security.2fa.setup.step2.title') }}</h1>
                        <p class="wd-2fa-step__subtitle">{{ __('two-factor.security.2fa.setup.step2.intro', ['email' => $maskedEmail]) }}</p>
                        <form action="{{ route('2fa.verify-email-otp', ['partnerSlug' => $partner->slug]) }}" method="POST">
                            @csrf
                            <div class="mb-3">
                                <label for="email_otp" class="form-label">{{ __('two-factor.security.2fa.setup.step2.label') }}</label>
                                <input type="text" id="email_otp" name="email_otp" maxlength="6" inputmode="numeric"
                                       autocomplete="one-time-code" pattern="[0-9]{6}" autofocus required
                                       class="form-control wd-otp-input @error('email_otp') is-invalid @enderror"
                                       aria-invalid="{{ $errors->has('email_otp') ? 'true' : 'false' }}"
                                       aria-describedby="email_otp-error">
                                <div id="email_otp-error" class="invalid-feedback" role="alert">@error('email_otp'){{ $message }}@enderror</div>
                            </div>
                            <button type="submit" class="btn btn-primary">{{ __('two-factor.security.2fa.setup.step2.cta') }}</button>
                        </form>
                        <form action="{{ route('2fa.send-email-otp', ['partnerSlug' => $partner->slug]) }}" method="POST" class="mt-2 m-0">
                            @csrf
                            <button type="submit" class="btn btn-link p-0 wd-link-accent">{{ __('two-factor.security.2fa.setup.step2.resend') }}</button>
                        </form>

                    @elseif ($currentStep === 3)
                        <div class="wd-2fa-step__icon" aria-hidden="true">
                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                                 stroke-width="2" stroke-linecap="round" stroke-linejoin="round" focusable="false">
                                <rect x="6" y="2" width="12" height="20" rx="2"/>
                                <line x1="12" y1="18" x2="12" y2="18"/>
                            </svg>
                        </div>
                        <h1 class="wd-2fa-step__title">{{ __('two-factor.security.2fa.setup.step3.title') }}</h1>

                        @if ($isMobile)
                            <p class="wd-2fa-step__subtitle">{{ __('two-factor.security.2fa.setup.step3.mobile.intro') }}</p>
                            <div class="bg-light rounded p-3 mb-3">
                                <label class="form-label small text-muted">{{ __('two-factor.security.2fa.setup.step3.secret_label') }}</label>
                                <div>
                                    <code id="totp-secret" data-secret="{{ $formattedSecret }}">••••-••••-••••-••••</code>
                                </div>
                                <div class="d-flex flex-wrap gap-2 mt-2">
                                    <button type="button" class="btn btn-sm btn-outline-secondary" id="reveal-secret" data-action="reveal">{{ __('two-factor.security.2fa.setup.step3.reveal') }}</button>
                                    <button type="button" class="btn btn-sm btn-outline-secondary" data-copy-target="totp-secret">{{ __('two-factor.security.2fa.setup.step3.copy') }}</button>
                                </div>
                                <span id="copy-feedback" role="status" aria-live="polite" class="visually-hidden"></span>
                            </div>
                            <a href="{{ $otpAuthUrl }}" class="btn btn-primary d-block text-center my-3" rel="noreferrer">{{ __('two-factor.security.2fa.setup.step3.mobile.deep_link') }}</a>
                            <details class="mb-3">
                                <summary>{{ __('two-factor.security.2fa.setup.step3.mobile.qr_fallback') }}</summary>
                                <div role="img" aria-label="{{ __('two-factor.security.2fa.setup.step3.qr_aria') }}" class="wd-qr mt-2">
                                    {{-- SAFE: Fortify's twoFactorQrCodeSvg() returns a server-generated SVG
                                         derived only from the secret + issuer — no user input in the DOM. --}}
                                    {!! $user->twoFactorQrCodeSvg() !!}
                                </div>
                            </details>
                        @else
                            <p class="wd-2fa-step__subtitle">{{ __('two-factor.security.2fa.setup.step3.desktop.intro') }}</p>
                            <div role="img" aria-label="{{ __('two-factor.security.2fa.setup.step3.qr_aria') }}" class="wd-qr">
                                {{-- SAFE: Fortify's twoFactorQrCodeSvg() returns a server-generated SVG
                                     derived only from the secret + issuer — no user input in the DOM. --}}
                                {!! $user->twoFactorQrCodeSvg() !!}
                            </div>
                            <details class="mb-3">
                                <summary class="wd-link-accent">{{ __('two-factor.security.2fa.setup.step3.desktop.manual_fallback') }}</summary>
                                <div class="bg-light rounded p-2 mt-2">
                                    <code>{{ $formattedSecret }}</code>
                                </div>
                            </details>
                        @endif

                        <form action="{{ route('2fa.confirm', ['partnerSlug' => $partner->slug]) }}" method="POST">
                            @csrf
                            <div class="mb-3">
                                <label for="totp-code" class="form-label">{{ __('two-factor.security.2fa.setup.step3.totp_label') }}</label>
                                <input type="text" id="totp-code" name="code" maxlength="6" inputmode="numeric"
                                       autocomplete="one-time-code" pattern="[0-9]{6}" autofocus required
                                       class="form-control wd-otp-input @error('code') is-invalid @enderror"
                                       aria-invalid="{{ $errors->has('code') ? 'true' : 'false' }}"
                                       aria-describedby="code-error">
                                <div id="code-error" class="invalid-feedback" role="alert">@error('code'){{ $message }}@enderror</div>
                            </div>
                            <button type="submit" class="btn btn-primary">{{ __('two-factor.security.2fa.setup.step3.cta') }}</button>
                        </form>
                    @endif

                </div>
            </div>
        @endif

    </div>
</div>

@if ($currentStep === 3 && $isMobile)
    @push('scripts_after')
    <script>
        document.getElementById('reveal-secret')?.addEventListener('click', function() {
            var el = document.getElementById('totp-secret');
            if (el.dataset.revealed === 'true') {
                el.textContent = '••••-••••-••••-••••';
                el.dataset.revealed = 'false';
                this.textContent = @json(__('two-factor.security.2fa.setup.step3.reveal'));
            } else {
                el.textContent = el.dataset.secret;
                el.dataset.revealed = 'true';
                this.textContent = @json(__('two-factor.security.2fa.setup.step3.hide'));
            }
        });

        document.querySelectorAll('[data-copy-target]').forEach(function(btn) {
            btn.addEventListener('click', function() {
                var target = document.getElementById(btn.dataset.copyTarget);
                if (!target) return;
                var text = (target.dataset.secret || target.innerText).replace(/-/g, '');
                navigator.clipboard.writeText(text).then(function() {
                    var fb = document.getElementById('copy-feedback');
                    if (fb) fb.textContent = @json(__('two-factor.security.2fa.setup.step3.copied'));
                });
            });
        });
    </script>
    @endpush
@endif

@endsection