@extends('student.layouts.app')

@section('title', app()->getLocale() === 'ar' ? 'أمان الحساب' : 'Account Security')

@section('content')
@php
    $isArabic = app()->getLocale() === 'ar';
    $twoFactorLabel = match($student->two_factor_method) {
        'email' => $isArabic ? 'رمز عبر البريد الإلكتروني' : 'Email Code',
        'authenticator' => $isArabic ? 'تطبيق المصادقة' : 'Authenticator App',
        default => $isArabic ? 'غير مفعل' : 'Disabled',
    };
@endphp
<div class="space-y-6 pb-20">
    <section class="student-card p-6 text-start">
        <h1 class="text-2xl font-black text-zinc-900 dark:text-white">{{ $isArabic ? 'أمان الحساب' : 'Account Security' }}</h1>
        <p class="mt-2 text-sm font-semibold leading-7 text-zinc-500 dark:text-zinc-400">
            {{ $isArabic ? 'غيّر كلمة المرور، راجع حالة البريد، واختر طريقة التحقق الثنائي المناسبة. الصفحة مبسطة وتعرض كل ما تحتاجه بوضوح.' : 'Change your password, review your email status, and choose the right two-factor method. This page is simplified and keeps everything clear.' }}
        </p>
    </section>

    <section class="grid gap-4 md:grid-cols-2 xl:grid-cols-3 text-start">
        <article class="student-card p-5">
            <div class="text-xs font-black uppercase tracking-[0.24em] text-zinc-400">{{ $isArabic ? 'حالة البريد' : 'Email Status' }}</div>
            <div class="mt-3 text-lg font-black text-zinc-900 dark:text-white">{{ $student->hasVerifiedEmail() ? ($isArabic ? 'موثق' : 'Verified') : ($isArabic ? 'بانتظار التحقق' : 'Pending') }}</div>
        </article>
        <article class="student-card p-5">
            <div class="text-xs font-black uppercase tracking-[0.24em] text-zinc-400">{{ $isArabic ? 'التحقق الثنائي' : 'Two-Factor' }}</div>
            <div class="mt-3 text-lg font-black text-zinc-900 dark:text-white">{{ $twoFactorLabel }}</div>
        </article>
        <article class="student-card p-5">
            <div class="text-xs font-black uppercase tracking-[0.24em] text-zinc-400">{{ $isArabic ? 'البريد الحالي' : 'Current Email' }}</div>
            <div class="mt-3 text-lg font-black text-zinc-900 dark:text-white break-all">{{ $student->email }}</div>
        </article>
    </section>

    <section class="grid gap-6 xl:grid-cols-[minmax(0,1fr)_18rem] text-start">
        <div class="space-y-6">
            <section class="student-card p-6">
                <h2 class="text-xl font-black text-zinc-900 dark:text-white">{{ $isArabic ? 'تغيير كلمة المرور' : 'Change Password' }}</h2>
                <p class="mt-2 text-sm font-semibold text-zinc-500 dark:text-zinc-400">{{ $isArabic ? 'استخدم كلمة مرور قوية تحتوي على أحرف كبيرة وصغيرة وأرقام ورموز.' : 'Use a strong password with uppercase, lowercase, numbers, and symbols.' }}</p>

                <form action="{{ route('student.password.update') }}" method="POST" class="mt-6 space-y-5">
                    @csrf
                    <div>
                        <label class="mb-2 block text-sm font-black text-zinc-700 dark:text-zinc-300">{{ $isArabic ? 'كلمة المرور الحالية' : 'Current Password' }}</label>
                        <input type="password" name="current_password" class="w-full rounded-2xl border border-zinc-200 px-4 py-3 dark:border-zinc-800 dark:bg-zinc-950" required>
                        @error('current_password')<div class="mt-2 text-sm font-bold text-red-600">{{ $message }}</div>@enderror
                    </div>
                    <div class="grid gap-4 md:grid-cols-2">
                        <div>
                            <label class="mb-2 block text-sm font-black text-zinc-700 dark:text-zinc-300">{{ $isArabic ? 'كلمة المرور الجديدة' : 'New Password' }}</label>
                            <input type="password" name="new_password" class="w-full rounded-2xl border border-zinc-200 px-4 py-3 dark:border-zinc-800 dark:bg-zinc-950" required>
                            @error('new_password')<div class="mt-2 text-sm font-bold text-red-600">{{ $message }}</div>@enderror
                        </div>
                        <div>
                            <label class="mb-2 block text-sm font-black text-zinc-700 dark:text-zinc-300">{{ $isArabic ? 'تأكيد كلمة المرور' : 'Confirm Password' }}</label>
                            <input type="password" name="new_password_confirmation" class="w-full rounded-2xl border border-zinc-200 px-4 py-3 dark:border-zinc-800 dark:bg-zinc-950" required>
                        </div>
                    </div>
                    <div class="rounded-2xl border border-zinc-200 bg-zinc-50 px-4 py-4 text-[13px] font-semibold leading-7 text-zinc-500 dark:border-zinc-800 dark:bg-zinc-950 dark:text-zinc-400">
                        {{ $isArabic ? 'بعد تحديث كلمة المرور استخدمها مباشرة في المرات القادمة لتسجيل الدخول.' : 'Use the new password for your future sign-ins immediately after updating it.' }}
                    </div>
                    <button type="submit" class="rounded-2xl bg-slate-950 px-5 py-3 text-sm font-black text-white">{{ $isArabic ? 'تحديث كلمة المرور' : 'Update Password' }}</button>
                </form>
            </section>

            <section class="student-card p-6">
                <h2 class="text-xl font-black text-zinc-900 dark:text-white">{{ $isArabic ? 'التحقق الثنائي' : 'Two-Factor Authentication' }}</h2>
                <p class="mt-2 text-sm font-semibold text-zinc-500 dark:text-zinc-400">{{ $isArabic ? 'اختر طريقة الحماية الإضافية المناسبة لك عند تسجيل الدخول.' : 'Choose the additional protection method you want during sign in.' }}</p>

                <div class="mt-6 grid gap-4 xl:grid-cols-3">
                    <form method="POST" action="{{ route('student.security.two_factor.update') }}" class="rounded-2xl border border-zinc-200 p-5 dark:border-zinc-800">
                        @csrf
                        <input type="hidden" name="two_factor_method" value="none">
                        <div class="text-lg font-black text-zinc-900 dark:text-white">{{ $isArabic ? 'بدون تحقق ثنائي' : 'No Two-Factor' }}</div>
                        <p class="mt-2 text-sm font-semibold leading-7 text-zinc-500 dark:text-zinc-400">{{ $isArabic ? 'الدخول بكلمة المرور فقط.' : 'Sign in using password only.' }}</p>
                        <button type="submit" class="mt-5 rounded-2xl bg-zinc-100 px-4 py-3 text-sm font-black text-zinc-800 dark:bg-zinc-800 dark:text-white">{{ $isArabic ? 'استخدام هذا الخيار' : 'Use This Option' }}</button>
                    </form>

                    <form method="POST" action="{{ route('student.security.two_factor.update') }}" class="rounded-2xl border border-zinc-200 p-5 dark:border-zinc-800">
                        @csrf
                        <input type="hidden" name="two_factor_method" value="email">
                        <div class="text-lg font-black text-zinc-900 dark:text-white">{{ $isArabic ? 'رمز عبر البريد الإلكتروني' : 'Email Code' }}</div>
                        <p class="mt-2 text-sm font-semibold leading-7 text-zinc-500 dark:text-zinc-400">{{ $isArabic ? 'إرسال رمز 6 أرقام إلى بريدك عند تسجيل الدخول.' : 'Send a 6-digit code to your email on sign in.' }}</p>
                        <button type="submit" class="mt-5 rounded-2xl bg-primary px-4 py-3 text-sm font-black text-white">{{ $isArabic ? 'استخدام البريد' : 'Use Email' }}</button>
                    </form>

                    <form method="POST" action="{{ route('student.security.two_factor.update') }}" class="rounded-2xl border border-zinc-200 p-5 dark:border-zinc-800">
                        @csrf
                        <input type="hidden" name="two_factor_method" value="authenticator">
                        <div class="text-lg font-black text-zinc-900 dark:text-white">{{ $isArabic ? 'تطبيق المصادقة' : 'Authenticator App' }}</div>
                        <p class="mt-2 text-sm font-semibold leading-7 text-zinc-500 dark:text-zinc-400">{{ $isArabic ? 'استخدم تطبيق يولد رمزاً متغيراً كل 30 ثانية.' : 'Use an app that generates a rotating code every 30 seconds.' }}</p>
                        <button type="submit" class="mt-5 rounded-2xl bg-slate-950 px-4 py-3 text-sm font-black text-white">{{ $isArabic ? 'إنشاء المفتاح' : 'Generate Secret' }}</button>
                    </form>
                </div>

                @if ($student->two_factor_method === 'authenticator' && $student->two_factor_secret)
                    <div class="mt-6 grid gap-6 xl:grid-cols-[minmax(0,1fr)_minmax(20rem,0.9fr)]">
                        <div class="rounded-2xl bg-zinc-50 p-5 dark:bg-zinc-950">
                            <div class="text-sm font-black text-zinc-900 dark:text-white">{{ $isArabic ? 'المفتاح السري' : 'Secret Key' }}</div>
                            <div class="mt-3 break-all rounded-2xl bg-white p-4 font-mono text-sm font-black text-primary dark:bg-zinc-900">{{ $student->two_factor_secret }}</div>
                            @if ($otpAuthUrl)
                                <div class="mt-4 text-xs font-semibold text-zinc-500 dark:text-zinc-400">{{ $isArabic ? 'رابط الإعداد للتطبيق' : 'App Setup URI' }}</div>
                                <div class="mt-2 break-all text-xs font-bold text-zinc-600 dark:text-zinc-300">{{ $otpAuthUrl }}</div>
                            @endif
                        </div>

                        <form method="POST" action="{{ route('student.security.two_factor.confirm') }}" class="rounded-2xl bg-zinc-50 p-5 dark:bg-zinc-950">
                            @csrf
                            <div class="text-sm font-black text-zinc-900 dark:text-white">{{ $isArabic ? 'تأكيد التطبيق' : 'Confirm Authenticator' }}</div>
                            <p class="mt-2 text-sm font-semibold text-zinc-500 dark:text-zinc-400">{{ $isArabic ? 'أدخل أول رمز من التطبيق لتفعيل التحقق الثنائي.' : 'Enter the first code from the app to enable two-factor authentication.' }}</p>
                            <input type="text" name="authenticator_code" maxlength="6" class="mt-4 w-full rounded-2xl border border-zinc-200 px-4 py-3 text-center text-2xl font-black tracking-[0.4em] dark:border-zinc-800 dark:bg-zinc-900" required>
                            @error('authenticator_code')<div class="mt-2 text-sm font-bold text-red-600">{{ $message }}</div>@enderror
                            <button type="submit" class="mt-4 rounded-2xl bg-emerald-600 px-5 py-3 text-sm font-black text-white">{{ $isArabic ? 'تأكيد وتفعيل التطبيق' : 'Confirm and Enable' }}</button>
                        </form>
                    </div>
                @endif
            </section>
        </div>

        <aside class="space-y-4">
            <section class="student-card p-5">
                <div class="text-xs font-black uppercase tracking-[0.24em] text-zinc-400">{{ $isArabic ? 'البريد الإلكتروني' : 'Email' }}</div>
                <div class="mt-3 break-all text-sm font-black text-zinc-900 dark:text-white">{{ $student->email }}</div>
            </section>

            <section class="student-card p-5">
                <div class="text-xs font-black uppercase tracking-[0.24em] text-zinc-400">{{ $isArabic ? 'طريقة الحماية' : 'Security Method' }}</div>
                <div class="mt-3 text-sm font-black text-zinc-900 dark:text-white">{{ $twoFactorLabel }}</div>
            </section>

            @unless ($student->hasVerifiedEmail())
                <form method="POST" action="{{ route('verification.resend') }}">
                    @csrf
                    <button type="submit" class="w-full rounded-2xl bg-amber-500 px-4 py-3 text-sm font-black text-white">{{ $isArabic ? 'إرسال رابط التحقق' : 'Send Verification Link' }}</button>
                </form>
            @endunless
        </aside>
    </section>
</div>
@endsection