@extends('user.layouts.app')

@section('title', 'إدارة التحقق بالبصمة')

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

@section('content')
    <div class="content-wrapper">
        <div class="page-header">
            <x-lucide-fingerprint width="28" height="28" />
            <div class="page-header--title">
                <h1>إدارة التحقق بالبصمة</h1>
                <p>حماية متقدمة باستخدام البيانات الحيوية</p>
            </div>
        </div>

        <!-- معلومات عن التحقق بالبصمة -->
        <div class="security-info">
            <h5><x-lucide-info width="16" height="16" class="me-2" />ما هو التحقق بالبصمة؟</h5>
            <p class="mb-2">التحقق بالبصمة هو طريقة أمان متقدمة تتيح لك تأكيد هويتك باستخدام بصمة إصبعك أو الوجه.</p>
            <ul class="mb-0">
                <li>أمان عالي وحماية إضافية لحسابك</li>
                <li>سرعة في الدخول دون الحاجة لكتابة كلمات مرور</li>
                <li>يعمل فقط مع المتصفحات والأجهزة التي تدعم هذه التقنية</li>
            </ul>
        </div>

        <!-- تحذير للمتصفحات غير المدعومة -->
        <div class="biometric-warning" id="not-supported-warning" style="display: none;">
            <h5><x-lucide-triangle-alert width="16" height="16" class="me-2" />متصفحك لا يدعم التحقق بالبصمة</h5>
            <p class="mb-0">للاستفادة من هذه الميزة، يرجى استخدام متصفح حديث مثل Chrome أو Firefox أو Safari،
                والتأكد من تفعيل البصمة في إعدادات نظام التشغيل.</p>
        </div>

        <div class="row gy-3">
            <!-- بطاقة التحقق بالبصمة -->
            <div class="col-lg-8 col-md-10 mx-auto">
                <div class="security-card">
                    <div class="security-header">
                        <div class="security-icon">
                            <x-lucide-fingerprint width="24" height="24" />
                        </div>
                        <div class="flex-grow-1">
                            <h4 class="mb-2">التحقق بالبصمة</h4>
                            <div class="biometric-status">
                                <span class="status-text">جاري التحقق من الحالة...</span>
                                <span class="status-badge" id="biometric-status-badge">غير معروف</span>
                            </div>
                            <p class="security-muted-text mb-3" id="biometric-description">
                                استخدم بصمة إصبعك أو الوجه للدخول السريع والآمن لحسابك
                            </p>
                            <div class="biometric-actions" id="biometric-actions">
                                <!-- الأزرار ستظهر هنا حسب الحالة -->
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal لتفعيل البصمة -->
    <div class="modal fade" id="enableBiometricModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">
                        <x-lucide-fingerprint class="me-2" width="18" height="18" />
                        تفعيل التحقق بالبصمة
                    </h5>
                    <button type="button" class="btn-close" data-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <form id="enableBiometricForm">
                        <div class="mb-3">
                            <label class="form-label">كلمة المرور الحالية *</label>
                            <input type="password" class="form-control" id="enable-password" required>
                            <div class="form-text">أدخل كلمة المرور لتأكيد التفعيل</div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">إلغاء</button>
                    <button type="button" class="btn btn-primary" id="confirmEnableBiometric">
                        <span class="loading-spinner"></span>
                        تفعيل البصمة
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal لإلغاء تفعيل البصمة -->
    <div class="modal fade" id="disableBiometricModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">
                        <x-lucide-x-circle class="me-2" width="18" height="18" />
                        إلغاء تفعيل التحقق بالبصمة
                    </h5>
                    <button type="button" class="btn-close " data-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="alert alert-warning">
                        <x-lucide-triangle-alert class="me-2" width="16" height="16" />
                        سيتم إلغاء تفعيل التحقق بالبصمة نهائياً. ستحتاج لإعادة تفعيلها من جديد إذا كنت تريد استخدامها مرة
                        أخرى.
                    </div>
                    <form id="disableBiometricForm">
                        <div class="mb-3">
                            <label class="form-label">كلمة المرور الحالية *</label>
                            <input type="password" class="form-control" id="disable-password" required>
                            <div class="form-text">أدخل كلمة المرور لتأكيد الإلغاء</div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">إلغاء</button>
                    <button type="button" class="btn btn-danger" id="confirmDisableBiometric">
                        <span class="loading-spinner"></span>
                        إلغاء التفعيل
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal للتحقق بالبصمة -->
    <div class="modal fade" id="verifyBiometricModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">
                        <x-lucide-fingerprint class="me-2" width="18" height="18" />
                        التحقق بالبصمة
                    </h5>
                    <button type="button" class="btn-close" data-dismiss="modal"></button>
                </div>
                <div class="modal-body text-center">
                    <div class="mb-4">
                        <div class="security-icon mx-auto mb-3"
                            style="background: linear-gradient(135deg, #00d4aa, #00cec9);">
                            <x-lucide-fingerprint width="24" height="24" />
                        </div>
                        <h5>المس مستشعر البصمة</h5>
                        <p class="text-muted">ضع إصبعك على مستشعر البصمة للتحقق من هويتك</p>
                    </div>
                    <div class="d-flex justify-content-center">
                        <div class="loading-spinner" style="display: block; width: 40px; height: 40px;"></div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">إلغاء</button>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('js')
    <script src="{{ url('js/biometric-auth.js') }}"></script>
    <script>
        class BiometricManager {
            constructor() {
                this.biometricAPI = new BiometricAuthAPI();
                this.init();
            }

            async init() {
                await this.checkSupport();
                await this.loadStatus();
                this.bindEvents();
            }
            async checkSupport() {
                try {
                    const support = await this.biometricAPI.checkSupport();

                    if (!support.clientSupported) {
                        document.getElementById('not-supported-warning').style.display = 'block';
                        this.updateUI('not-supported', 'المتصفح لا يدعم التحقق بالبصمة');
                        return;
                    }
                } catch (error) {
                    console.error('خطأ في التحقق من الدعم:', error);
                    this.showError('خطأ في التحقق من الدعم: ' + error.message);
                }
            }
            async loadStatus() {
                try {
                    const status = await this.biometricAPI.getStatus();

                    if (status.err) {
                        throw new Error(status.msg);
                    }

                    if (status.biometric_enabled) {
                        const isVerified = status.biometric_verified;
                        this.updateUI(isVerified ? 'verified' : 'enabled',
                            isVerified ? 'مفعل ومُتحقق منه' : 'مفعل');
                    } else {
                        this.updateUI('disabled', 'غير مفعل');
                    }

                } catch (error) {
                    console.error('خطأ في جلب حالة البصمة:', error);
                    this.showError('حدث خطأ في جلب حالة البصمة: ' + error.message);
                }
            }

            updateUI(status, statusText) {
                const statusBadge = document.getElementById('biometric-status-badge');
                const statusTextElement = document.querySelector('.status-text');
                const actionsContainer = document.getElementById('biometric-actions');

                statusTextElement.textContent = statusText;

                // تحديث شارة الحالة
                statusBadge.className = 'status-badge';
                actionsContainer.innerHTML = '';

                switch (status) {
                    case 'not-supported':
                        statusBadge.classList.add('status-not-supported');
                        statusBadge.textContent = 'غير مدعوم';
                        break;

                    case 'disabled':
                        statusBadge.classList.add('status-inactive');
                        statusBadge.textContent = 'غير مفعل';
                        actionsContainer.innerHTML = `
                            <button class="btn-biometric btn-enable" id="enableBiometricBtn">
                                {!! svg('lucide-plus', ['width' => 16, 'height' => 16])->toHtml() !!}
                                تفعيل البصمة
                            </button>
                        `;
                        break;

                    case 'enabled':
                        statusBadge.classList.add('status-active');
                        statusBadge.textContent = 'مفعل';
                        actionsContainer.innerHTML = `
                            <button class="btn-biometric btn-verify" id="verifyBiometricBtn">
                                {!! svg('lucide-fingerprint', ['width' => 16, 'height' => 16])->toHtml() !!}
                                التحقق الآن
                            </button>
                            <button class="btn-biometric btn-disable" id="disableBiometricBtn">
                                {!! svg('lucide-x', ['width' => 16, 'height' => 16])->toHtml() !!}
                                إلغاء التفعيل
                            </button>
                        `;
                        break;

                    case 'verified':
                        statusBadge.classList.add('status-active');
                        statusBadge.textContent = 'مُتحقق منه';
                        actionsContainer.innerHTML = `
                            <button class="btn-biometric btn-verify" id="logoutBiometricBtn">
                                {!! svg('lucide-log-out', ['width' => 16, 'height' => 16])->toHtml() !!}
                                إلغاء التحقق
                            </button>
                            <button class="btn-biometric btn-disable" id="disableBiometricBtn">
                                {!! svg('lucide-x', ['width' => 16, 'height' => 16])->toHtml() !!}
                                إلغاء التفعيل
                            </button>
                        `;
                        break;
                }

                this.bindActionEvents();
            }

            bindEvents() {
                // تفعيل البصمة
                document.getElementById('confirmEnableBiometric')?.addEventListener('click', () => {
                    this.enableBiometric();
                });

                // إلغاء تفعيل البصمة
                document.getElementById('confirmDisableBiometric')?.addEventListener('click', () => {
                    this.disableBiometric();
                });
            }

            bindActionEvents() {
                // تفعيل البصمة
                document.getElementById('enableBiometricBtn')?.addEventListener('click', () => {
                    const modal = document.getElementById('enableBiometricModal');
                    if (bootstrap && bootstrap.Modal) {
                        const modalInstance = new bootstrap.Modal(modal);
                        modalInstance.show();
                    } else if (window.$ && $(modal).modal) {
                        $(modal).modal('show');
                    } else {
                        modal.style.display = 'block';
                        modal.classList.add('show');
                        document.body.classList.add('modal-open');
                    }
                });

                // التحقق بالبصمة
                document.getElementById('verifyBiometricBtn')?.addEventListener('click', () => {
                    this.verifyBiometric();
                });

                // إلغاء تفعيل البصمة
                document.getElementById('disableBiometricBtn')?.addEventListener('click', () => {
                    const modal = document.getElementById('disableBiometricModal');
                    if (bootstrap && bootstrap.Modal) {
                        const modalInstance = new bootstrap.Modal(modal);
                        modalInstance.show();
                    } else if (window.$ && $(modal).modal) {
                        $(modal).modal('show');
                    } else {
                        modal.style.display = 'block';
                        modal.classList.add('show');
                        document.body.classList.add('modal-open');
                    }
                });

                // إلغاء التحقق من الجلسة
                document.getElementById('logoutBiometricBtn')?.addEventListener('click', () => {
                    this.logoutBiometric();
                });
            }

            async enableBiometric() {
                const password = document.getElementById('enable-password').value;
                const button = document.getElementById('confirmEnableBiometric');
                const spinner = button.querySelector('.loading-spinner');

                if (!password) {
                    this.showError('يرجى إدخال كلمة المرور');
                    return;
                }

                button.disabled = true;
                spinner.style.display = 'inline-block';

                try {
                    const userId = {{ auth()->user()->id }};
                    const userName = "{{ auth()->user()->name }}";

                    await this.biometricAPI.enableBiometric(password, userId, userName);

                    this.showSuccess('تم تفعيل التحقق بالبصمة بنجاح');

                    // Hide modal using jQuery or direct DOM method
                    const modal = document.getElementById('enableBiometricModal');
                    if (bootstrap && bootstrap.Modal && bootstrap.Modal.getInstance) {
                        bootstrap.Modal.getInstance(modal).hide();
                    } else if (window.$ && $(modal).modal) {
                        $(modal).modal('hide');
                    } else {
                        modal.style.display = 'none';
                        modal.classList.remove('show');
                        document.body.classList.remove('modal-open');
                        const backdrop = document.querySelector('.modal-backdrop');
                        if (backdrop) backdrop.remove();
                    }

                    await this.loadStatus();

                } catch (error) {
                    this.showError(error.message);
                } finally {
                    button.disabled = false;
                    spinner.style.display = 'none';
                    document.getElementById('enable-password').value = '';
                }
            }

            async disableBiometric() {
                const password = document.getElementById('disable-password').value;
                const button = document.getElementById('confirmDisableBiometric');
                const spinner = button.querySelector('.loading-spinner');

                if (!password) {
                    this.showError('يرجى إدخال كلمة المرور');
                    return;
                }

                button.disabled = true;
                spinner.style.display = 'inline-block';

                try {
                    await this.biometricAPI.disableBiometric(password);

                    this.showSuccess('تم إلغاء تفعيل التحقق بالبصمة');

                    // Hide modal using jQuery or direct DOM method
                    const modal = document.getElementById('disableBiometricModal');
                    if (bootstrap && bootstrap.Modal && bootstrap.Modal.getInstance) {
                        bootstrap.Modal.getInstance(modal).hide();
                    } else if (window.$ && $(modal).modal) {
                        $(modal).modal('hide');
                    } else {
                        modal.style.display = 'none';
                        modal.classList.remove('show');
                        document.body.classList.remove('modal-open');
                        const backdrop = document.querySelector('.modal-backdrop');
                        if (backdrop) backdrop.remove();
                    }

                    await this.loadStatus();

                } catch (error) {
                    this.showError(error.message);
                } finally {
                    button.disabled = false;
                    spinner.style.display = 'none';
                    document.getElementById('disable-password').value = '';
                }
            }

            async verifyBiometric() {
                const modalElement = document.getElementById('verifyBiometricModal');
                let modal;

                // Show modal using compatible method
                if (bootstrap && bootstrap.Modal) {
                    modal = new bootstrap.Modal(modalElement);
                    modal.show();
                } else if (window.$ && $(modalElement).modal) {
                    $(modalElement).modal('show');
                    modal = {
                        hide: () => $(modalElement).modal('hide')
                    };
                } else {
                    modalElement.style.display = 'block';
                    modalElement.classList.add('show');
                    document.body.classList.add('modal-open');
                    modal = {
                        hide: () => {
                            modalElement.style.display = 'none';
                            modalElement.classList.remove('show');
                            document.body.classList.remove('modal-open');
                            const backdrop = document.querySelector('.modal-backdrop');
                            if (backdrop) backdrop.remove();
                        }
                    };
                }

                try {
                    await this.biometricAPI.verifyBiometric();

                    modal.hide();
                    this.showSuccess('تم التحقق بالبصمة بنجاح');

                    await this.loadStatus();

                } catch (error) {
                    modal.hide();
                    this.showError(error.message);
                }
            }

            async logoutBiometric() {
                try {
                    await this.biometricAPI.logout();
                    this.showSuccess('تم إلغاء التحقق من الجلسة');
                    await this.loadStatus();
                } catch (error) {
                    this.showError(error.message);
                }
            }

            showSuccess(message) {
                // يمكن استخدام نظام الإشعارات الموجود في المشروع
                alert('نجح: ' + message);
            }

            showError(message) {
                // يمكن استخدام نظام الإشعارات الموجود في المشروع
                alert('خطأ: ' + message);
            }
        }

        // تهيئة المدير عند تحميل الصفحة
        document.addEventListener('DOMContentLoaded', () => {
            new BiometricManager();
        });
    </script>
@endsection