@extends('layouts.main_dashboard.app')

@php
    $isArabic = app()->getLocale() === 'ar';
    $emailTwoFactorEnabled = $user->two_factor_method === 'email';
    $authenticatorEnabled = $user->two_factor_method === 'authenticator' && $user->two_factor_confirmed_at;
    $twoFactorLabel = match ($user->two_factor_method) {
        'email' => $isArabic ? 'رمز عبر البريد الإلكتروني' : 'Email Code',
        'authenticator' => $user->two_factor_confirmed_at
            ? 'Google Authenticator'
            : ($isArabic ? 'Google Authenticator بانتظار التفعيل' : 'Google Authenticator Pending'),
        default => $isArabic ? 'غير مفعل' : 'Disabled',
    };
    $securityStats = [
        [
            'label' => $isArabic ? 'حالة البريد' : 'Email Status',
            'value' => $user->hasVerifiedEmail() ? ($isArabic ? 'موثق' : 'Verified') : ($isArabic ? 'بانتظار التحقق' : 'Pending'),
        ],
        [
            'label' => $isArabic ? 'التحقق الثنائي' : 'Two-Factor',
            'value' => $twoFactorLabel,
        ],
        [
            'label' => $isArabic ? 'الجلسات النشطة' : 'Active Sessions',
            'value' => $sessions->count(),
        ],
    ];
@endphp

@section('title', $isArabic ? 'إعدادات الأمان' : 'Security Settings')
@section('page_heading', $isArabic ? 'إعدادات الأمان' : 'Security Settings')
@section('skip_page_hero', true)

@section('content')
    <div class="space-y-6 pb-20">
        <section class="rounded-[1.75rem] border border-zinc-200 bg-white p-6 shadow-sm dark:border-zinc-800 dark:bg-zinc-900">
            <h1 class="text-2xl font-black text-zinc-900 dark:text-white">{{ $isArabic ? 'إعدادات الأمان' : 'Security Settings' }}</h1>
            <p class="mt-2 text-sm leading-7 text-zinc-500 dark:text-zinc-400">
                {{ $isArabic ? 'غيّر كلمة المرور، راجع الجلسات النشطة، واختر طريقة التحقق الثنائي المناسبة. الصفحة مبسطة ومباشرة بدون خطوات إضافية غير ضرورية.' : 'Change your password, review active sessions, and choose the two-factor method that fits you. This page is intentionally direct and simplified.' }}
            </p>
        </section>

        <section class="grid gap-4 md:grid-cols-2 xl:grid-cols-3">
            @foreach($securityStats as $stat)
                <article class="rounded-[1.5rem] border border-zinc-200 bg-white p-5 shadow-sm dark:border-zinc-800 dark:bg-zinc-900">
                    <p class="text-xs font-bold uppercase tracking-[0.24em] text-zinc-400 dark:text-zinc-500">{{ $stat['label'] }}</p>
                    <p class="mt-3 text-lg font-black text-zinc-900 dark:text-white">{{ $stat['value'] }}</p>
                </article>
            @endforeach
        </section>

        <div class="grid gap-6 xl:grid-cols-[minmax(0,1fr)_18rem]">
            <div class="space-y-6">
                <section class="rounded-[1.75rem] border border-zinc-200 bg-white shadow-sm dark:border-zinc-800 dark:bg-zinc-900">
                    <div class="border-b border-zinc-200 px-6 py-5 dark:border-zinc-800">
                        <h2 class="text-lg font-black text-zinc-900 dark:text-white">{{ $isArabic ? 'تغيير كلمة المرور' : 'Change Password' }}</h2>
                        <p class="mt-2 text-sm text-zinc-500 dark:text-zinc-400">
                            {{ $isArabic ? 'يفضل استخدام كلمة مرور قوية مع تسجيل الخروج من الأجهزة الأخرى عند الحاجة.' : 'Use a strong password and sign out of other devices when needed.' }}
                        </p>
                    </div>

                    <form action="{{ route('profile.updateCredentials') }}" method="POST" class="space-y-6 p-6">
                        @csrf
                        @method('PUT')

                        <div>
                            <label class="mb-2 block text-sm font-bold text-zinc-700 dark:text-zinc-200">{{ $isArabic ? 'كلمة المرور الحالية' : 'Current Password' }}</label>
                            <input type="password" name="current_password" class="w-full rounded-xl border border-zinc-200 bg-white px-4 py-3 text-sm font-bold outline-none transition focus:border-brand-400 dark:border-zinc-700 dark:bg-zinc-950 dark:text-zinc-100" placeholder="••••••••" required>
                            @error('current_password')<div class="mt-2 text-sm font-bold text-rose-600">{{ $message }}</div>@enderror
                        </div>

                        <div class="grid gap-5 md:grid-cols-2">
                            <div>
                                <label class="mb-2 block text-sm font-bold text-zinc-700 dark:text-zinc-200">{{ $isArabic ? 'كلمة المرور الجديدة' : 'New Password' }}</label>
                                <input type="password" name="new_password" class="w-full rounded-xl border border-zinc-200 bg-white px-4 py-3 text-sm font-bold outline-none transition focus:border-brand-400 dark:border-zinc-700 dark:bg-zinc-950 dark:text-zinc-100" placeholder="••••••••" required>
                                @error('new_password')<div class="mt-2 text-sm font-bold text-rose-600">{{ $message }}</div>@enderror
                            </div>
                            <div>
                                <label class="mb-2 block text-sm font-bold text-zinc-700 dark:text-zinc-200">{{ $isArabic ? 'تأكيد كلمة المرور' : 'Confirm Password' }}</label>
                                <input type="password" name="new_password_confirmation" class="w-full rounded-xl border border-zinc-200 bg-white px-4 py-3 text-sm font-bold outline-none transition focus:border-brand-400 dark:border-zinc-700 dark:bg-zinc-950 dark:text-zinc-100" placeholder="••••••••" required>
                            </div>
                        </div>

                        <label class="flex items-center gap-3 rounded-xl border border-zinc-200 bg-zinc-50 px-4 py-3 text-sm font-semibold text-zinc-600 dark:border-zinc-800 dark:bg-zinc-950 dark:text-zinc-400">
                            <input type="checkbox" name="logout_others" class="h-4 w-4 rounded border-zinc-300 text-brand-600 focus:ring-brand-500">
                            <span>{{ $isArabic ? 'تسجيل الخروج من بقية الأجهزة بعد تغيير كلمة المرور' : 'Sign out of other devices after changing the password' }}</span>
                        </label>

                        <div class="rounded-[1.5rem] border border-zinc-200 bg-zinc-50 px-5 py-4 text-sm leading-7 text-zinc-600 dark:border-zinc-800 dark:bg-zinc-950 dark:text-zinc-400">
                            {{ $isArabic ? 'يجب أن تحتوي كلمة المرور على 8 أحرف على الأقل، وتشمل حروفاً كبيرة وصغيرة وأرقاماً ورموزاً.' : 'Your password must be at least 8 characters long and include uppercase, lowercase, numbers, and symbols.' }}
                        </div>

                        <div class="flex justify-end border-t border-zinc-100 pt-6 dark:border-zinc-800">
                            <button type="submit" class="inline-flex items-center gap-2 rounded-xl bg-zinc-950 px-5 py-3 text-sm font-black text-white transition hover:bg-zinc-800">
                                <i class="fa-solid fa-floppy-disk text-xs"></i>
                                <span>{{ $isArabic ? 'تحديث كلمة المرور' : 'Update Password' }}</span>
                            </button>
                        </div>
                    </form>
                </section>

                <section class="rounded-[1.75rem] border border-zinc-200 bg-white shadow-sm dark:border-zinc-800 dark:bg-zinc-900">
                    <div class="border-b border-zinc-200 px-6 py-5 dark:border-zinc-800">
                        <h2 class="text-lg font-black text-zinc-900 dark:text-white">{{ $isArabic ? 'التحقق الثنائي' : 'Two-Factor Authentication' }}</h2>
                        <p class="mt-2 text-sm text-zinc-500 dark:text-zinc-400">
                            {{ $isArabic ? 'اختر طريقة الحماية الإضافية المناسبة لحسابك.' : 'Choose the additional protection method for your account.' }}
                        </p>
                    </div>

                    <div class="space-y-6 p-6">
                        <div class="grid gap-4 md:grid-cols-2">
                            <form method="POST" action="{{ route('profile.security.two_factor.update') }}" class="rounded-[1.5rem] border border-zinc-200 p-5 dark:border-zinc-800">
                                @csrf
                                <input type="hidden" name="two_factor_method" value="email">
                                <input type="hidden" name="intent" value="{{ $emailTwoFactorEnabled ? 'disable' : 'enable' }}">
                                <div class="text-base font-black text-zinc-900 dark:text-white">{{ $isArabic ? 'البريد الإلكتروني' : 'Email' }}</div>
                                <p class="mt-2 text-sm leading-7 text-zinc-500 dark:text-zinc-400">
                                    {{ $isArabic ? 'استلام رمز تحقق عند كل تسجيل دخول عبر البريد الإلكتروني الموثق.' : 'Receive a verification code on every sign in through your verified email address.' }}
                                </p>
                                <button type="submit" class="mt-5 rounded-xl {{ $emailTwoFactorEnabled ? 'bg-zinc-100 text-zinc-800 dark:bg-zinc-800 dark:text-white' : 'bg-brand-600 text-white' }} px-4 py-3 text-sm font-black">
                                    {{ $emailTwoFactorEnabled ? ($isArabic ? 'إيقاف البريد' : 'Disable Email') : ($isArabic ? 'تفعيل البريد' : 'Enable Email') }}
                                </button>
                            </form>

                            <form method="POST" action="{{ route('profile.security.two_factor.update') }}" class="rounded-[1.5rem] border border-zinc-200 p-5 dark:border-zinc-800">
                                @csrf
                                <input type="hidden" name="two_factor_method" value="authenticator">
                                <input type="hidden" name="intent" value="{{ $authenticatorEnabled ? 'disable' : 'enable' }}">
                                <div class="text-base font-black text-zinc-900 dark:text-white">Authenticator App</div>
                                <p class="mt-2 text-sm leading-7 text-zinc-500 dark:text-zinc-400">
                                    {{ $isArabic ? 'استخدم Google Authenticator أو أي تطبيق مشابه لإنشاء رموز متغيرة.' : 'Use Google Authenticator or a similar app to generate rotating codes.' }}
                                </p>
                                <a href="{{ route('profile.two-factor.show') }}" class="mt-5 inline-block rounded-xl {{ $authenticatorEnabled ? 'bg-zinc-100 text-zinc-800 dark:bg-zinc-800 dark:text-white' : 'bg-emerald-600 text-white' }} px-4 py-3 text-sm font-black">
                                    {{ $authenticatorEnabled ? ($isArabic ? 'إدارة التطبيق' : 'Manage App') : ($isArabic ? 'تفعيل التطبيق' : 'Enable App') }}
                                </a>
                            </form>
                        </div>

                        @if ($pendingEmailTwoFactor)
                            <div class="rounded-[1.5rem] border border-brand-200 bg-brand-50 p-5 dark:border-brand-500/20 dark:bg-brand-500/10">
                                <h3 class="text-base font-black text-zinc-900 dark:text-white">
                                    {{ ($pendingEmailTwoFactor['intent'] ?? 'enable') === 'enable'
                                        ? ($isArabic ? 'تأكيد تفعيل البريد' : 'Confirm Email Activation')
                                        : ($isArabic ? 'تأكيد إيقاف البريد' : 'Confirm Email Disable') }}
                                </h3>
                                <p class="mt-2 text-sm text-zinc-500 dark:text-zinc-400">{{ $isArabic ? 'أدخل الرمز المكوّن من 6 أرقام الذي تم إرساله إلى بريدك الإلكتروني.' : 'Enter the 6-digit code sent to your email address.' }}</p>
                                <form method="POST" action="{{ route('profile.security.two_factor.confirm') }}" class="mt-4 flex flex-col gap-4 sm:flex-row">
                                    @csrf
                                    <input type="hidden" name="two_factor_method" value="email">
                                    <input type="hidden" name="intent" value="{{ $pendingEmailTwoFactor['intent'] ?? 'enable' }}">
                                    <input type="text" name="code" maxlength="6" inputmode="numeric" class="flex-1 rounded-xl border border-zinc-200 bg-white px-4 py-3 text-center text-xl font-black tracking-[0.35em] outline-none focus:border-brand-400 dark:border-zinc-700 dark:bg-zinc-950 dark:text-zinc-100" placeholder="000000" required>
                                    <button type="submit" class="rounded-xl bg-brand-600 px-5 py-3 text-sm font-black text-white">{{ $isArabic ? 'تأكيد' : 'Confirm' }}</button>
                                </form>
                                @error('email_code')<div class="mt-2 text-sm font-bold text-rose-600">{{ $message }}</div>@enderror
                            </div>
                        @endif

                        @if ($pendingAuthenticatorSecret)
                            <div class="grid gap-4 lg:grid-cols-2">
                                <div class="rounded-[1.5rem] border border-zinc-200 bg-zinc-50 p-5 dark:border-zinc-800 dark:bg-zinc-950">
                                    <h3 class="text-base font-black text-zinc-900 dark:text-white">{{ $isArabic ? 'المفتاح السري' : 'Secret Key' }}</h3>
                                    <p class="mt-2 text-sm text-zinc-500 dark:text-zinc-400">{{ $isArabic ? 'امسح رمز QR أو أدخل المفتاح يدوياً في التطبيق.' : 'Scan the QR code or enter the secret key manually in the app.' }}</p>
                                    <div class="mt-4 inline-block rounded-2xl border border-zinc-200 bg-white p-4 dark:border-zinc-800 dark:bg-zinc-900">
                                        {!! QrCode::size(150)->generate($otpAuthUrl) !!}
                                    </div>
                                    <div class="mt-4 rounded-xl border border-zinc-200 bg-white px-4 py-3 font-mono text-sm font-black text-emerald-600 dark:border-zinc-800 dark:bg-zinc-900 dark:text-emerald-400">{{ $pendingAuthenticatorSecret }}</div>
                                </div>

                                <form method="POST" action="{{ route('profile.security.two_factor.confirm') }}" class="rounded-[1.5rem] border border-zinc-200 bg-zinc-50 p-5 dark:border-zinc-800 dark:bg-zinc-950">
                                    @csrf
                                    <input type="hidden" name="two_factor_method" value="authenticator">
                                    <input type="hidden" name="intent" value="enable">
                                    <h3 class="text-base font-black text-zinc-900 dark:text-white">{{ $isArabic ? 'تأكيد التطبيق' : 'Confirm App' }}</h3>
                                    <p class="mt-2 text-sm text-zinc-500 dark:text-zinc-400">{{ $isArabic ? 'أدخل أول رمز يظهر في التطبيق لتفعيل الحماية.' : 'Enter the first code shown in the app to enable protection.' }}</p>
                                    <input type="text" name="code" maxlength="6" inputmode="numeric" class="mt-4 w-full rounded-xl border border-zinc-200 bg-white px-4 py-3 text-center text-xl font-black tracking-[0.35em] outline-none focus:border-emerald-400 dark:border-zinc-800 dark:bg-zinc-900 dark:text-zinc-100" placeholder="000000" required>
                                    @error('authenticator_code')<div class="mt-2 text-sm font-bold text-rose-600">{{ $message }}</div>@enderror
                                    <button type="submit" class="mt-4 rounded-xl bg-emerald-600 px-5 py-3 text-sm font-black text-white">{{ $isArabic ? 'تأكيد وتفعيل' : 'Confirm & Enable' }}</button>
                                </form>
                            </div>
                        @endif

                        @if ($authenticatorEnabled)
                            <div class="rounded-[1.5rem] border border-rose-200 bg-rose-50 p-5 dark:border-rose-500/20 dark:bg-rose-500/10">
                                <h3 class="text-base font-black text-zinc-900 dark:text-white">{{ $isArabic ? 'إيقاف التطبيق' : 'Disable Authenticator' }}</h3>
                                <p class="mt-2 text-sm text-zinc-500 dark:text-zinc-400">{{ $isArabic ? 'أدخل الرمز الحالي من التطبيق لإيقاف التحقق الثنائي.' : 'Enter the current authenticator code to disable two-factor authentication.' }}</p>
                                <form method="POST" action="{{ route('profile.security.two_factor.confirm') }}" class="mt-4 flex flex-col gap-4 sm:flex-row">
                                    @csrf
                                    <input type="hidden" name="two_factor_method" value="authenticator">
                                    <input type="hidden" name="intent" value="disable">
                                    <input type="text" name="code" maxlength="6" inputmode="numeric" class="flex-1 rounded-xl border border-zinc-200 bg-white px-4 py-3 text-center text-xl font-black tracking-[0.35em] outline-none focus:border-rose-400 dark:border-zinc-700 dark:bg-zinc-950 dark:text-zinc-100" placeholder="000000" required>
                                    <button type="submit" class="rounded-xl bg-rose-600 px-5 py-3 text-sm font-black text-white">{{ $isArabic ? 'إيقاف الحماية' : 'Disable' }}</button>
                                </form>
                                @error('disable_authenticator_code')<div class="mt-2 text-sm font-bold text-rose-600">{{ $message }}</div>@enderror
                            </div>
                        @endif
                    </div>
                </section>

                <section class="rounded-[1.75rem] border border-zinc-200 bg-white shadow-sm dark:border-zinc-800 dark:bg-zinc-900">
                    <div class="border-b border-zinc-200 px-6 py-5 dark:border-zinc-800">
                        <h2 class="text-lg font-black text-zinc-900 dark:text-white">{{ $isArabic ? 'الجلسات النشطة' : 'Active Sessions' }}</h2>
                        <p class="mt-2 text-sm text-zinc-500 dark:text-zinc-400">
                            {{ $isArabic ? 'راجع الأجهزة المرتبطة بالحساب حالياً، وسجّل الخروج من أي جهاز غير معروف.' : 'Review devices currently linked to your account and sign out from any unfamiliar one.' }}
                        </p>
                    </div>

                    <div class="space-y-3 p-6">
                        @foreach ($sessions as $session)
                            <div class="flex flex-col gap-4 rounded-[1.5rem] border border-zinc-200 bg-zinc-50 p-4 dark:border-zinc-800 dark:bg-zinc-950 sm:flex-row sm:items-center sm:justify-between">
                                <div>
                                    <div class="flex flex-wrap items-center gap-2">
                                        <div class="text-sm font-black text-zinc-900 dark:text-white">{{ $session->agent->platform }} - {{ $session->agent->browser }}</div>
                                        @if ($session->is_current_device)
                                            <span class="rounded-full bg-emerald-100 px-2.5 py-1 text-[10px] font-black text-emerald-700">{{ $isArabic ? 'هذا الجهاز' : 'This Device' }}</span>
                                        @endif
                                    </div>
                                    <div class="mt-1 text-xs font-semibold text-zinc-500 dark:text-zinc-400">{{ $session->ip_address }} · {{ $isArabic ? 'آخر نشاط' : 'Last active' }} {{ $session->last_active }}</div>
                                </div>

                                @if (!$session->is_current_device)
                                    <form action="{{ route('profile.security.session.destroy', $session->id) }}" method="POST" onsubmit="return confirm('{{ $isArabic ? 'هل أنت متأكد من تسجيل الخروج من هذا الجهاز؟' : 'Are you sure you want to sign out of this device?' }}')">
                                        @csrf
                                        @method('DELETE')
                                        <button type="submit" class="rounded-xl border border-zinc-200 px-4 py-2.5 text-sm font-black text-zinc-700 transition hover:text-rose-600 dark:border-zinc-700 dark:text-zinc-200">
                                            {{ $isArabic ? 'تسجيل الخروج' : 'Sign Out' }}
                                        </button>
                                    </form>
                                @endif
                            </div>
                        @endforeach
                    </div>
                </section>
            </div>

            <aside class="space-y-4">
                <section class="rounded-[1.75rem] border border-zinc-200 bg-white p-5 shadow-sm dark:border-zinc-800 dark:bg-zinc-900">
                    <div class="text-[10px] font-black uppercase tracking-[0.22em] text-zinc-400">{{ $isArabic ? 'البريد المعتمد' : 'Verified Email' }}</div>
                    <div class="mt-3 break-all text-sm font-black text-zinc-900 dark:text-white">{{ $user->email }}</div>
                </section>

                <section class="rounded-[1.75rem] border border-zinc-200 bg-white p-5 shadow-sm dark:border-zinc-800 dark:bg-zinc-900">
                    <div class="text-[10px] font-black uppercase tracking-[0.22em] text-zinc-400">{{ $isArabic ? 'طريقة التحقق' : '2FA Method' }}</div>
                    <div class="mt-3 text-sm font-black text-zinc-900 dark:text-white">{{ $twoFactorLabel }}</div>
                </section>

                @unless ($user->hasVerifiedEmail())
                    <form method="POST" action="{{ route('verification.resend') }}">
                        @csrf
                        <button type="submit" class="inline-flex w-full items-center justify-center gap-2 rounded-xl bg-amber-500 px-4 py-3 text-sm font-black text-white transition hover:bg-amber-600">
                            <i class="fa-solid fa-paper-plane text-xs"></i>
                            <span>{{ $isArabic ? 'إرسال رابط التحقق' : 'Resend Verification Link' }}</span>
                        </button>
                    </form>
                @endunless
            </aside>
        </div>
    </div>
@endsection