@php
    $isArabic = app()->getLocale() === 'ar';
    $isEmailMethod = $method === 'email';
    $authPageTitle = $isArabic ? 'التحقق الثنائي | SmartLMS' : 'Two-Factor Verification | SmartLMS';
    $authBadge = $isArabic ? 'التحقق الثنائي' : 'Two-Factor Verification';
    $authBadgeIcon = $isEmailMethod ? 'fa-envelope-circle-check' : 'fa-mobile-screen-button';
    $authHeading = $isArabic ? 'خطوة أمان إضافية قبل الدخول' : 'One more security step before access';
    $authDescription = $isArabic
        ? 'تم التعرف على أن الحساب يحتاج طبقة حماية إضافية. أدخل الرمز المطلوب لإكمال تسجيل الدخول بشكل آمن.'
        : 'This account requires an extra protection layer. Enter the requested code to complete sign in securely.';
    $authPanelLabel = $isArabic ? 'تأكيد الهوية' : 'Identity Confirmation';
    $authFormHeading = $isArabic ? 'أدخل رمز التحقق' : 'Enter the verification code';
    $authFormDescription = $isEmailMethod
        ? ($isArabic ? 'تحقق من بريدك الإلكتروني ثم أدخل الرمز المكوّن من 6 أرقام قبل انتهاء صلاحيته.' : 'Check your email and enter the 6-digit code before it expires.')
        : ($isArabic ? 'افتح تطبيق المصادقة وأدخل الرمز الحالي المكوّن من 6 أرقام لإكمال الدخول.' : 'Open your authenticator app and enter the current 6-digit code to continue.');
    $authHighlights = [
        [
            'icon' => $isEmailMethod ? 'fa-envelope' : 'fa-qrcode',
            'title' => $isEmailMethod ? ($isArabic ? 'رمز عبر البريد' : 'Code via email') : ($isArabic ? 'رمز من التطبيق' : 'Code from app'),
            'description' => $isEmailMethod
                ? ($isArabic ? 'يتم إرسال رمز مؤقت إلى بريد المستخدم المسجّل لتأكيد الملكية قبل فتح الجلسة.' : 'A temporary code is sent to the registered email to confirm ownership before opening the session.')
                : ($isArabic ? 'يعتمد التحقق على تطبيق المصادقة المرتبط مسبقًا بالحساب.' : 'Verification relies on the authenticator app already linked to the account.'),
        ],
        [
            'icon' => 'fa-stopwatch',
            'title' => $isArabic ? 'مهلة قصيرة وآمنة' : 'Short secure window',
            'description' => $isArabic ? 'الرمز صالح لفترة محدودة، ما يقلّل فرص الاستخدام غير المصرّح به.' : 'The code is only valid for a limited period, reducing the chance of unauthorized use.',
        ],
        [
            'icon' => 'fa-door-open',
            'title' => $isArabic ? 'دخول بعد التحقق' : 'Access after verification',
            'description' => $isArabic ? 'بعد قبول الرمز ينتقل المستخدم مباشرة إلى اللوحة المناسبة لنوع حسابه.' : 'After the code is accepted, the user is taken directly to the correct dashboard for their account type.',
        ],
    ];
    $authSideStats = [
        [
            'value' => '6',
            'label' => $isArabic ? 'أرقام الرمز' : 'Code Digits',
            'description' => $isArabic ? 'أدخل الرمز كاملًا بدون مسافات.' : 'Enter the full code without spaces.',
        ],
        [
            'value' => '10',
            'label' => $isArabic ? 'دقائق الصلاحية' : 'Minutes Valid',
            'description' => $isArabic ? 'في حالة البريد الإلكتروني يتم تجديد الرمز عند إعادة الإرسال.' : 'For email verification, a fresh code is generated when resending.',
        ],
        [
            'value' => '24/7',
            'label' => $isArabic ? 'حماية الجلسة' : 'Session Protection',
            'description' => $isArabic ? 'التحقق الإضافي يحمي الحساب حتى لو تسرّبت كلمة المرور.' : 'Extra verification protects the account even if the password is exposed.',
        ],
    ];
@endphp

@extends('auth.layouts.app')

@section('form')
    <form method="POST" action="{{ route('two-factor.challenge.store') }}" class="space-y-5">
        @csrf

        <div class="rounded-[1.6rem] border border-zinc-200 bg-zinc-50/80 p-5">
            <div class="flex items-start gap-4">
                <div class="flex h-12 w-12 items-center justify-center rounded-2xl bg-zinc-950 text-white">
                    <i class="fa-solid {{ $isEmailMethod ? 'fa-envelope' : 'fa-shield' }}"></i>
                </div>
                <div>
                    <p class="text-sm font-black text-zinc-900">
                        {{ $isEmailMethod ? ($isArabic ? 'التحقق عبر البريد الإلكتروني' : 'Email verification') : ($isArabic ? 'التحقق عبر تطبيق المصادقة' : 'Authenticator verification') }}
                    </p>
                    <p class="mt-2 text-sm leading-7 text-zinc-500">
                        {{ $isEmailMethod
                            ? ($isArabic ? 'أرسلنا رمزًا مؤقتًا إلى بريدك الإلكتروني. أدخله هنا لإكمال تسجيل الدخول.' : 'We sent a temporary code to your email. Enter it here to complete sign in.')
                            : ($isArabic ? 'أدخل الرمز الحالي من تطبيق المصادقة المرتبط بحسابك.' : 'Enter the current code from the authenticator app linked to your account.') }}
                    </p>
                </div>
            </div>
        </div>

        <div>
            <label for="code" class="mb-2 block text-sm font-black text-zinc-700">
                {{ $isArabic ? 'رمز التحقق' : 'Verification Code' }}
            </label>
            <input
                id="code"
                type="text"
                name="code"
                inputmode="numeric"
                autocomplete="one-time-code"
                maxlength="6"
                required
                autofocus
                placeholder="000000"
                class="w-full rounded-2xl border border-zinc-200 px-4 py-4 text-center text-2xl font-black tracking-[0.5em] text-zinc-900 outline-none transition placeholder:tracking-[0.2em] placeholder:text-zinc-300 focus:border-brand-300 focus:ring-4 focus:ring-brand-100"
            >
        </div>

        @if (! $isEmailMethod && $otpAuthUrl)
            <div class="rounded-[1.6rem] border border-amber-200 bg-amber-50 p-5 text-sm text-amber-900">
                <p class="font-black">{{ $isArabic ? 'رابط الإعداد الاحتياطي' : 'Fallback setup URI' }}</p>
                <p class="mt-2 leading-7">
                    {{ $isArabic ? 'إذا كنت تضبط التطبيق يدويًا، يمكنك استخدام الرابط التالي.' : 'If you are setting up the app manually, you can use the following URI.' }}
                </p>
                <div class="mt-3 break-all rounded-2xl bg-white/80 px-4 py-3 font-semibold text-amber-800">{{ $otpAuthUrl }}</div>
            </div>
        @endif

        <button type="submit" class="inline-flex w-full items-center justify-center gap-2 rounded-2xl bg-zinc-950 px-5 py-4 text-sm font-black text-white transition hover:bg-zinc-800">
            <i class="fa-solid fa-check text-xs"></i>
            <span>{{ $isArabic ? 'تأكيد الدخول' : 'Verify Sign In' }}</span>
        </button>
    </form>
@endsection

@section('footer')
    <div class="space-y-4">
        @if ($isEmailMethod)
            <form method="POST" action="{{ route('two-factor.challenge.resend') }}">
                @csrf
                <button type="submit" class="inline-flex w-full items-center justify-center gap-2 rounded-2xl border border-zinc-200 px-5 py-4 text-sm font-black text-zinc-700 transition hover:border-brand-200 hover:text-brand-700">
                    <i class="fa-solid fa-rotate text-xs"></i>
                    <span>{{ $isArabic ? 'إعادة إرسال الرمز' : 'Resend Code' }}</span>
                </button>
            </form>
        @endif

        <p class="text-sm leading-7 text-zinc-500">
            {{ $isArabic ? 'دخلت بحساب مختلف أو تريد البدء من جديد؟' : 'Using another account or want to restart?' }}
            <a href="{{ route('login') }}" class="font-black text-brand-700 transition hover:text-brand-800">
                {{ $isArabic ? 'العودة إلى تسجيل الدخول' : 'Back to sign in' }}
            </a>
        </p>
    </div>
@endsection