@extends('user.layouts.app')

@section('title', 'مركز الأمان')

@section('css')
    <link rel="stylesheet" href="{{ vasset('assest/front2/css/pages/security-index.css') }}">
@endsection

@section('content')
    <div class="content-wrapper" x-data="securityCenter()">
        <!-- Header -->
        <div class="security-center">
            <div class="row align-items-center">
                <div class="col-md-8">
                    <h1 class="mb-3">
                        <x-lucide-shield width="28" height="28" class="me-3" />
                        مركز الأمان والحماية
                    </h1>
                    <p class="mb-0 fs-5">احمِ حسابك بأحدث تقنيات الأمان المتاحة</p>
                </div>
                <div class="col-md-4 text-md-end">
                    <div class="security-stats">
                        <div class="stat-item">
                            <div class="stat-number" x-text="activeMethods">0</div>
                            <div class="stat-label">طرق نشطة</div>
                        </div>
                        <div class="stat-item">
                            <div class="stat-number" x-text="Math.round(activeMethods / maxActiveMethods * 100 , 2) + '%'">
                                0%</div>
                            <div class="stat-label">مستوى الأمان</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Security Options Grid -->
        <div class="security-options">
            <!-- PIN Code Card -->
            <div class="security-option-card">
                <div class="card-header">
                    <div class="option-icon">
                        <x-lucide-key width="24" height="24" />
                    </div>
                    <div class="card-title-section">
                        <h3 class="option-title">البين كود</h3>
                        <div class="option-status" :class="pinStatus.enabled ? 'status-enabled' : 'status-disabled'">
                            @svg('lucide-circle', ['class' => 'status-dot'])
                            <span x-text="pinStatus.text">جاري التحقق...</span>
                        </div>
                    </div>
                </div>
                <p class="option-description">
                    رمز سري مكون من 4 أرقام لحماية إضافية سريعة وسهلة الاستخدام
                </p>
                <a href="{{ route('security.pin.index') }}" class="option-button">
                    <x-lucide-settings width="16" height="16" class="me-2" />
                    إدارة البين كود
                </a>
            </div>

            <!-- Biometric Card -->
            @if (false)
                <div class="security-option-card">
                    <div class="card-header">
                        <div class="option-icon">
                            @svg('lucide-fingerprint', ['width' => '24', 'height' => '24'])
                        </div>
                        {{-- <div class="card-title-section">
                            <h3 class="option-title">التحقق بالبصمة</h3>
                            <div class="option-status"
                                :class="biometricStatus.enabled ? 'status-enabled' : 'status-disabled'">
                                <i class="bi bi-circle-fill"></i>
                                <span x-text="biometricStatus.text">جاري التحقق...</span>
                            </div>
                        </div> --}}
                    </div>
                    <p class="option-description">
                        استخدم بصمة إصبعك أو الوجه للدخول السريع والآمن دون كلمات مرور
                    </p>
                    <a href="{{ route('security.biometric.index') }}" class="option-button">
                        @svg('lucide-fingerprint', ['class' => 'me-2', 'width' => '16', 'height' => '16'])
                        إدارة البصمة
                    </a>
                </div>
            @endif

            <!-- Two Factor Authentication Card -->
            <div class="security-option-card">
                <div class="card-header">
                    <div class="option-icon">
                        <x-lucide-shield-check width="24" height="24" />
                    </div>
                    <div class="card-title-section">
                        <h3 class="option-title">المصادقة الثنائية</h3>
                        <div class="option-status" :class="google2faStatus.enabled ? 'status-enabled' : 'status-disabled'">
                            @svg('lucide-circle', ['class' => 'status-dot'])
                            <span x-text="google2faStatus.text"></span>
                        </div>
                    </div>
                </div>
                <p class="option-description">
                    طبقة حماية إضافية باستخدام Google Authenticator أو تطبيقات مشابهة
                </p>
                <a href="{{ route('security.google2fa.show') }}" class="option-button">
                    <x-lucide-shield-check width="16" height="16" class="me-2" />
                    إدارة المصادقة الثنائية
                </a>
            </div>

            <!-- Login Logs Card -->
            <div class="security-option-card">
                <div class="card-header">
                    <div class="option-icon">
                        <x-lucide-activity width="24" height="24" />
                    </div>
                    <div class="card-title-section">
                        <h3 class="option-title">سجلات الدخول</h3>
                        <div class="option-status ">
                            @svg('lucide-circle', ['class' => 'status-dot'])
                            متاح دائماً
                        </div>
                    </div>
                </div>
                <p class="option-description">
                    راقب عمليات الدخول والأجهزة المتصلة بحسابك وتحكم في الجلسات النشطة
                </p>
                <a href="{{ route('security.logs.welcome') }}" class="option-button">
                    <x-lucide-list width="16" height="16" class="me-2" />
                    عرض السجلات
                </a>
            </div>

        </div>

        <!-- Security Tips -->
        <div class="security-tips">
            <h4 class="mb-4">
                <x-lucide-lightbulb width="18" height="18" class="text-warning me-2" />
                نصائح الأمان
            </h4>
            <div class="row">
                <div class="col-md-6">
                    <div class="tip-item">
                        <div class="tip-icon">
                            <x-lucide-check width="16" height="16" />
                        </div>
                        <div>
                            <strong>استخدم طرق متعددة:</strong>
                            فعّل البين كود والمصادقة الثنائيه معاً للحصول على أفضل حماية
                        </div>
                    </div>
                    <div class="tip-item">
                        <div class="tip-icon">
                            <x-lucide-check width="16" height="16" />
                        </div>
                        <div>
                            <strong>راقب نشاط حسابك:</strong>
                            تحقق من سجلات الدخول بانتظام للتأكد من عدم وجود نشاط مشبوه
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="tip-item">
                        <div class="tip-icon">
                            <x-lucide-check width="16" height="16" />
                        </div>
                        <div>
                            <strong>أبقِ معلوماتك محدثة:</strong>
                            تأكد من صحة بريدك الإلكتروني ورقم هاتفك
                        </div>
                    </div>
                    <div class="tip-item">
                        <div class="tip-icon">
                            <x-lucide-check width="16" height="16" />
                        </div>
                        <div>
                            <strong>لا تشارك بياناتك:</strong>
                            لا تعطِ أي شخص رمز البين كود
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('js')
    <script>
        document.addEventListener('alpine:init', () => {

            Alpine.data('securityCenter', () => ({
                activeMethods: 0,
                maxActiveMethods: 3, // الحد الأقصى لطرق الأمان المفعلة
                pinStatus: {
                    enabled: false,
                    confirmed: false,
                    text: 'جاري التحقق...'
                },
                biometricStatus: {
                    enabled: false,
                    text: 'جاري التحقق...'
                },
                google2faStatus: {
                    enabled: {{ auth()->user()->google2fa_enabled ? 'true' : 'false' }},
                    text: '{{ auth()->user()->google2fa_enabled ? 'مفعل' : 'غير مفعل' }}'
                },

                async init() {
                    await this.checkPinStatus();
                    await this.checkBiometricStatus();
                    this.updateActiveMethods();
                },

                async checkPinStatus() {
                    try {
                        const response = await fetch('/security/pin-status', {
                            method: 'GET',
                            headers: {
                                'Content-Type': 'application/json',
                                'Accept': 'application/json',
                                'X-CSRF-TOKEN': document.querySelector(
                                        'meta[name="csrf-token"]')
                                    .content,
                                'X-Requested-With': 'XMLHttpRequest'
                            },
                            credentials: 'same-origin'
                        });

                        if (response.ok) {
                            const data = await response.json();
                            const enabled = !!(data.enabled ?? data.has_pin_code ?? data
                                .hasPinCode);
                            const confirmed = !!(data.is_confirmed ?? data.pin_confirmed ?? data
                                .confirmed ?? data.isConfirmed ?? false);
                            this.pinStatus = {
                                enabled,
                                confirmed,
                                text: enabled ? (confirmed ? 'مفعل' : 'غير مؤكد') : 'غير مفعل'
                            };
                        }
                    } catch (error) {
                        console.error('خطأ في فحص حالة البين كود:', error);
                        this.pinStatus = {
                            enabled: false,
                            confirmed: false,
                            text: 'خطأ في التحقق'
                        };
                    }
                },

                async checkBiometricStatus() {
                    try {
                        const response = await fetch('/security/biometric/status', {
                            method: 'GET',
                            headers: {
                                'Content-Type': 'application/json',
                                'Accept': 'application/json',
                                'X-CSRF-TOKEN': document.querySelector(
                                        'meta[name="csrf-token"]')
                                    .content,
                                'X-Requested-With': 'XMLHttpRequest'
                            },
                            credentials: 'same-origin'
                        });

                        if (response.ok) {
                            const data = await response.json();

                            if (data.err === false && data.biometric_enabled) {
                                this.biometricStatus = {
                                    enabled: true,
                                    text: 'مفعل'
                                };
                            } else {
                                this.biometricStatus = {
                                    enabled: false,
                                    text: 'غير مفعل'
                                };
                            }
                        } else {
                            // إذا فشل طلب API، فالبصمة غير مدعومة أو غير متاحة
                            this.biometricStatus = {
                                enabled: false,
                                text: 'غير متاح'
                            };

                            // طباعة تفاصيل الخطأ للتطوير
                            const errorText = await response.text();
                            console.error('خطأ في الحصول على حالة البصمة:', response.status,
                                errorText);
                        }
                    } catch (error) {
                        console.error('خطأ في فحص حالة البصمة:', error);
                        this.biometricStatus = {
                            enabled: false,
                            text: 'غير متاح'
                        };
                    }
                },

                updateActiveMethods() {
                    // حساب عدد طرق الأمان المفعلة
                    let activeMethods = 1;

                    // Google 2FA
                    if (this.google2faStatus.enabled) {
                        activeMethods++;
                    }

                    // PIN Code
                    if (this.pinStatus.enabled && this.pinStatus.confirmed) {
                        activeMethods++;
                    }

                    // // Biometric
                    // if (this.biometricStatus.enabled) {
                    //     activeMethods++;
                    // }

                    // تحديث العداد
                    this.activeMethods = activeMethods;
                },

                getAuthToken() {
                    return localStorage.getItem('auth_token') ||
                        document.querySelector('meta[name="api-token"]')?.content ||
                        '{{ auth()->user()->api_token ?? '' }}';
                }
            }))
        });
    </script>
@endsection