<x-app-layout>
    <x-slot name="header">
        <div class="flex justify-between items-center">
            <div>
                <h2 class="font-semibold text-lg text-gray-800 dark:text-gray-200 leading-tight">
                    <i class="fas fa-shield-alt mr-2"></i>
                    {{ __('profile.2fa_title') }}
                </h2>
                <p class="mt-1 text-sm text-gray-600 dark:text-gray-400">
                    <a href="{{ route('dashboard') }}" class="text-blue-600 dark:text-blue-400 hover:underline">{{ __('menu.dashboard') }}</a>
                    <span class="mx-2">/</span>
                    <span>{{ __('menu.two_factor_auth') }}</span>
                </p>
            </div>
            <a href="{{ route('dashboard') }}" class="text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-200">
                <i class="fas fa-arrow-left mr-2"></i>
                {{ __('menu.back') }}
            </a>
        </div>
    </x-slot>

    <div class="space-y-6">
        <!-- Status Card -->
        <div class="bg-white dark:bg-gray-800 shadow-sm rounded-lg">
            <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
                <div class="flex items-center justify-between">
                    <h3 class="text-lg font-medium text-gray-900 dark:text-gray-100">
                        <i class="fas fa-shield-alt mr-2 text-green-500"></i>
                        {{ __('profile.2fa_status') }}
                    </h3>
                    @if($two_factor_enabled)
                        <button onclick="showDisable2FAModal()"
                                class="px-4 py-2 bg-red-600 hover:bg-red-700 text-white rounded-lg transition text-sm">
                            <i class="fas fa-times mr-2"></i>{{ __('profile.disable') }}
                        </button>
                    @else
                        <button onclick="enable2FA()"
                                class="px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg transition text-sm">
                            <i class="fas fa-shield-alt mr-2"></i>{{ __('profile.enable_2fa') }}
                        </button>
                    @endif
                </div>
            </div>
            <div class="p-6">
                <div class="flex items-center">
                    <div class="flex-shrink-0">
                        @if($two_factor_enabled)
                            <div class="w-12 h-12 bg-green-100 dark:bg-green-900/30 rounded-full flex items-center justify-center">
                                <i class="fas fa-check-circle text-2xl text-green-600 dark:text-green-400"></i>
                            </div>
                        @else
                            <div class="w-12 h-12 bg-gray-100 dark:bg-gray-700 rounded-full flex items-center justify-center">
                                <i class="fas fa-shield-alt text-2xl text-gray-400 dark:text-gray-500"></i>
                            </div>
                        @endif
                    </div>
                    <div class="ml-4">
                        <h4 class="text-base font-semibold text-gray-900 dark:text-white">
                            @if($two_factor_enabled)
                                {{ __('profile.2fa_enabled') }}
                            @else
                                {{ __('profile.2fa_disabled') }}
                            @endif
                        </h4>
                        <p class="text-sm text-gray-600 dark:text-gray-400 mt-1">
                            @if($two_factor_enabled)
                                {{ __('profile.2fa_protected') }}
                            @else
                                {{ __('profile.2fa_enable_for_security') }}
                            @endif
                        </p>
                    </div>
                </div>
            </div>
        </div>

        @if($two_factor_enabled)
            <!-- Recovery Codes Card -->
            <div class="bg-white dark:bg-gray-800 shadow-sm rounded-lg">
                <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
                    <div class="flex items-center justify-between">
                        <h3 class="text-lg font-medium text-gray-900 dark:text-gray-100">
                            <i class="fas fa-key mr-2 text-yellow-500"></i>
                            {{ __('profile.recovery_codes') }}
                            @if(isset($recovery_codes_count))
                                <span class="ml-2 px-2 py-1 text-xs font-medium rounded-full
                                    {{ $recovery_codes_count > 5 ? 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200' :
                                       ($recovery_codes_count > 2 ? 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200' :
                                       'bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200') }}">
                                    {{ $recovery_codes_count }} rămase
                                </span>
                            @endif
                        </h3>
                        <button onclick="showRegenerateCodesModal()"
                                class="px-4 py-2 bg-gray-600 hover:bg-gray-700 text-white rounded-lg transition text-sm">
                            <i class="fas fa-sync-alt mr-2"></i>{{ __('profile.regenerate_codes') }}
                        </button>
                    </div>
                </div>
                <div class="p-6">
                    <p class="text-sm text-gray-600 dark:text-gray-400 mb-4">
                        {{ __('profile.recovery_codes_info') }}
                    </p>

                    @if($has_recovery_codes)
                        <div class="bg-yellow-50 dark:bg-yellow-900/20 border-l-4 border-yellow-400 p-4 rounded">
                            <div class="flex">
                                <div class="flex-shrink-0">
                                    <i class="fas fa-exclamation-triangle text-yellow-400"></i>
                                </div>
                                <div class="ml-3">
                                    <p class="text-sm text-yellow-700 dark:text-yellow-300">
                                        {{ __('profile.keep_codes_safe') }}
                                    </p>
                                </div>
                            </div>
                        </div>
                    @endif
                </div>
            </div>

            <!-- Trusted Devices Card -->
            <div class="bg-white dark:bg-gray-800 shadow-sm rounded-lg">
                <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
                    <div class="flex items-center justify-between">
                        <h3 class="text-lg font-medium text-gray-900 dark:text-gray-100">
                            <i class="fas fa-laptop mr-2 text-blue-500"></i>
                            Dispozitive de încredere
                            @if(isset($trusted_devices) && $trusted_devices->count() > 0)
                                <span class="ml-2 px-2 py-1 text-xs font-medium bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200 rounded-full">
                                    {{ $trusted_devices->count() }}
                                </span>
                            @endif
                        </h3>
                        @if(isset($trusted_devices) && $trusted_devices->count() > 0)
                            <button onclick="revokeAllDevices()"
                                    class="px-4 py-2 bg-red-600 hover:bg-red-700 text-white rounded-lg transition text-sm">
                                <i class="fas fa-trash mr-2"></i>Revocă toate
                            </button>
                        @endif
                    </div>
                </div>
                <div class="p-6">
                    @if(isset($trusted_devices) && $trusted_devices->count() > 0)
                        <p class="text-sm text-gray-600 dark:text-gray-400 mb-4">
                            Aceste dispozitive nu necesită verificare 2FA pentru 30 de zile.
                        </p>
                        <div class="space-y-3">
                            @foreach($trusted_devices as $device)
                                <div class="flex items-center justify-between p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg" id="device-{{ $device->id }}">
                                    <div class="flex items-center">
                                        <div class="w-10 h-10 bg-blue-100 dark:bg-blue-900 rounded-full flex items-center justify-center mr-4">
                                            @if(str_contains($device->device_name, 'Chrome'))
                                                <i class="fab fa-chrome text-blue-600 dark:text-blue-400"></i>
                                            @elseif(str_contains($device->device_name, 'Firefox'))
                                                <i class="fab fa-firefox text-orange-600 dark:text-orange-400"></i>
                                            @elseif(str_contains($device->device_name, 'Safari'))
                                                <i class="fab fa-safari text-blue-600 dark:text-blue-400"></i>
                                            @elseif(str_contains($device->device_name, 'Edge'))
                                                <i class="fab fa-edge text-blue-600 dark:text-blue-400"></i>
                                            @else
                                                <i class="fas fa-globe text-gray-600 dark:text-gray-400"></i>
                                            @endif
                                        </div>
                                        <div>
                                            <p class="font-medium text-gray-900 dark:text-white">{{ $device->device_name }}</p>
                                            <p class="text-xs text-gray-500 dark:text-gray-400">
                                                IP: {{ $device->ip_address }} •
                                                Ultima utilizare: {{ $device->last_used_at ? $device->last_used_at->diffForHumans() : 'Niciodată' }} •
                                                Expiră: {{ $device->expires_at->format('d M Y') }}
                                            </p>
                                        </div>
                                    </div>
                                    <button onclick="revokeDevice({{ $device->id }})"
                                            class="px-3 py-1 text-sm text-red-600 hover:text-red-800 dark:text-red-400 dark:hover:text-red-300 transition">
                                        <i class="fas fa-times mr-1"></i>Revocă
                                    </button>
                                </div>
                            @endforeach
                        </div>
                    @else
                        <div class="text-center py-8">
                            <i class="fas fa-laptop text-4xl text-gray-300 dark:text-gray-600 mb-4"></i>
                            <p class="text-gray-500 dark:text-gray-400">Nu ai dispozitive de încredere salvate.</p>
                            <p class="text-sm text-gray-400 dark:text-gray-500 mt-2">
                                La următoarea verificare 2FA, bifează "Ține minte acest dispozitiv" pentru a-l adăuga.
                            </p>
                        </div>
                    @endif
                </div>
            </div>
        @else
            <!-- Info Card -->
            <div class="bg-blue-50 dark:bg-blue-900/20 border-l-4 border-blue-400 p-6 rounded-lg">
                <div class="flex">
                    <div class="flex-shrink-0">
                        <i class="fas fa-info-circle text-2xl text-blue-400"></i>
                    </div>
                    <div class="ml-4">
                        <h3 class="text-lg font-semibold text-blue-900 dark:text-blue-300 mb-2">
                            {{ __('profile.what_is_2fa') }}
                        </h3>
                        <p class="text-sm text-blue-800 dark:text-blue-200 mb-4">
                            {{ __('profile.2fa_explanation') }}
                        </p>
                        <h4 class="font-semibold text-blue-900 dark:text-blue-300 mb-2">{{ __('profile.compatible_apps') }}</h4>
                        <div class="grid grid-cols-2 md:grid-cols-3 gap-2 mb-3">
                            <div class="text-center p-3 bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700">
                                <div class="w-10 h-10 mx-auto mb-2 bg-blue-100 dark:bg-blue-900 rounded-lg flex items-center justify-center">
                                    <i class="fab fa-google text-xl text-blue-600 dark:text-blue-400"></i>
                                </div>
                                <p class="text-xs font-medium text-blue-800 dark:text-blue-200">Google</p>
                                <p class="text-xs text-blue-700 dark:text-blue-300">Authenticator</p>
                            </div>
                            <div class="text-center p-3 bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700">
                                <div class="w-10 h-10 mx-auto mb-2 bg-blue-100 dark:bg-blue-900 rounded-lg flex items-center justify-center">
                                    <i class="fab fa-microsoft text-xl text-blue-600 dark:text-blue-400"></i>
                                </div>
                                <p class="text-xs font-medium text-blue-800 dark:text-blue-200">Microsoft</p>
                                <p class="text-xs text-blue-700 dark:text-blue-300">Authenticator</p>
                            </div>
                            <div class="text-center p-3 bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700">
                                <div class="w-10 h-10 mx-auto mb-2 bg-red-100 dark:bg-red-900 rounded-lg flex items-center justify-center">
                                    <i class="fas fa-mobile-alt text-xl text-red-600 dark:text-red-400"></i>
                                </div>
                                <p class="text-xs font-medium text-blue-800 dark:text-blue-200">Authy</p>
                                <p class="text-xs text-blue-700 dark:text-blue-300">2FA</p>
                            </div>
                            <div class="text-center p-3 bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700">
                                <div class="w-10 h-10 mx-auto mb-2 bg-blue-100 dark:bg-blue-900 rounded-lg flex items-center justify-center">
                                    <i class="fas fa-key text-xl text-blue-600 dark:text-blue-400"></i>
                                </div>
                                <p class="text-xs font-medium text-blue-800 dark:text-blue-200">1Password</p>
                                <p class="text-xs text-blue-700 dark:text-blue-300">Authenticator</p>
                            </div>
                            <div class="text-center p-3 bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700">
                                <div class="w-10 h-10 mx-auto mb-2 bg-red-100 dark:bg-red-900 rounded-lg flex items-center justify-center">
                                    <i class="fas fa-lock text-xl text-red-600 dark:text-red-400"></i>
                                </div>
                                <p class="text-xs font-medium text-blue-800 dark:text-blue-200">LastPass</p>
                                <p class="text-xs text-blue-700 dark:text-blue-300">Authenticator</p>
                            </div>
                            <div class="text-center p-3 bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700">
                                <div class="w-10 h-10 mx-auto mb-2 bg-blue-100 dark:bg-blue-900 rounded-lg flex items-center justify-center">
                                    <i class="fas fa-shield-alt text-xl text-blue-600 dark:text-blue-400"></i>
                                </div>
                                <p class="text-xs font-medium text-blue-800 dark:text-blue-200">Bitwarden</p>
                                <p class="text-xs text-blue-700 dark:text-blue-300">Authenticator</p>
                            </div>
                        </div>
                        <h4 class="font-semibold text-blue-900 dark:text-blue-300 mb-2">{{ __('profile.how_it_works') }}</h4>
                        <ol class="list-decimal list-inside space-y-1 text-sm text-blue-800 dark:text-blue-200">
                            <li>{{ __('profile.step_1') }}</li>
                            <li>{{ __('profile.step_2') }}</li>
                            <li>{{ __('profile.step_3') }}</li>
                            <li>{{ __('profile.step_4') }}</li>
                            <li>{{ __('profile.step_5') }}</li>
                        </ol>
                    </div>
                </div>
            </div>
        @endif
    </div>

    <!-- Modal: Enable 2FA -->
    <div id="enable2FAModal" class="fixed inset-0 bg-gray-600 bg-opacity-50 hidden overflow-y-auto h-full w-full z-50">
        <div class="relative top-20 mx-auto p-5 border w-full max-w-2xl shadow-lg rounded-lg bg-white dark:bg-gray-800">
            <div class="mt-3">
                <h3 class="text-lg font-medium text-gray-900 dark:text-white mb-4">
                    <i class="fas fa-shield-alt mr-2"></i>Activează Autentificare cu Doi Factori
                </h3>

                <!-- Step 1: Choose App -->
                <div class="mb-6">
                    <h4 class="text-sm font-semibold text-gray-700 dark:text-gray-300 mb-3">
                        Pasul 1: Alege o aplicație de autentificare
                    </h4>
                    <div class="grid grid-cols-2 md:grid-cols-3 gap-3">
                        <!-- Google Authenticator -->
                        <div class="auth-app-card p-4 border-2 border-gray-200 dark:border-gray-700 rounded-lg hover:border-blue-500 dark:hover:border-blue-400 cursor-pointer transition">
                            <div class="text-center">
                                <div class="w-12 h-12 mx-auto mb-2 bg-blue-100 dark:bg-blue-900 rounded-lg flex items-center justify-center">
                                    <i class="fab fa-google text-2xl text-blue-600 dark:text-blue-400"></i>
                                </div>
                                <p class="text-sm font-medium text-gray-900 dark:text-white">Google</p>
                                <p class="text-xs text-gray-500 dark:text-gray-400">Authenticator</p>
                            </div>
                        </div>

                        <!-- Microsoft Authenticator -->
                        <div class="auth-app-card p-4 border-2 border-gray-200 dark:border-gray-700 rounded-lg hover:border-blue-500 dark:hover:border-blue-400 cursor-pointer transition">
                            <div class="text-center">
                                <div class="w-12 h-12 mx-auto mb-2 bg-blue-100 dark:bg-blue-900 rounded-lg flex items-center justify-center">
                                    <i class="fab fa-microsoft text-2xl text-blue-600 dark:text-blue-400"></i>
                                </div>
                                <p class="text-sm font-medium text-gray-900 dark:text-white">Microsoft</p>
                                <p class="text-xs text-gray-500 dark:text-gray-400">Authenticator</p>
                            </div>
                        </div>

                        <!-- Authy -->
                        <div class="auth-app-card p-4 border-2 border-gray-200 dark:border-gray-700 rounded-lg hover:border-blue-500 dark:hover:border-blue-400 cursor-pointer transition">
                            <div class="text-center">
                                <div class="w-12 h-12 mx-auto mb-2 bg-red-100 dark:bg-red-900 rounded-lg flex items-center justify-center">
                                    <i class="fas fa-mobile-alt text-2xl text-red-600 dark:text-red-400"></i>
                                </div>
                                <p class="text-sm font-medium text-gray-900 dark:text-white">Authy</p>
                                <p class="text-xs text-gray-500 dark:text-gray-400">2FA</p>
                            </div>
                        </div>

                        <!-- 1Password -->
                        <div class="auth-app-card p-4 border-2 border-gray-200 dark:border-gray-700 rounded-lg hover:border-blue-500 dark:hover:border-blue-400 cursor-pointer transition">
                            <div class="text-center">
                                <div class="w-12 h-12 mx-auto mb-2 bg-blue-100 dark:bg-blue-900 rounded-lg flex items-center justify-center">
                                    <i class="fas fa-key text-2xl text-blue-600 dark:text-blue-400"></i>
                                </div>
                                <p class="text-sm font-medium text-gray-900 dark:text-white">1Password</p>
                                <p class="text-xs text-gray-500 dark:text-gray-400">Authenticator</p>
                            </div>
                        </div>

                        <!-- LastPass -->
                        <div class="auth-app-card p-4 border-2 border-gray-200 dark:border-gray-700 rounded-lg hover:border-blue-500 dark:hover:border-blue-400 cursor-pointer transition">
                            <div class="text-center">
                                <div class="w-12 h-12 mx-auto mb-2 bg-red-100 dark:bg-red-900 rounded-lg flex items-center justify-center">
                                    <i class="fas fa-lock text-2xl text-red-600 dark:text-red-400"></i>
                                </div>
                                <p class="text-sm font-medium text-gray-900 dark:text-white">LastPass</p>
                                <p class="text-xs text-gray-500 dark:text-gray-400">Authenticator</p>
                            </div>
                        </div>

                        <!-- Bitwarden -->
                        <div class="auth-app-card p-4 border-2 border-gray-200 dark:border-gray-700 rounded-lg hover:border-blue-500 dark:hover:border-blue-400 cursor-pointer transition">
                            <div class="text-center">
                                <div class="w-12 h-12 mx-auto mb-2 bg-blue-100 dark:bg-blue-900 rounded-lg flex items-center justify-center">
                                    <i class="fas fa-shield-alt text-2xl text-blue-600 dark:text-blue-400"></i>
                                </div>
                                <p class="text-sm font-medium text-gray-900 dark:text-white">Bitwarden</p>
                                <p class="text-xs text-gray-500 dark:text-gray-400">Authenticator</p>
                            </div>
                        </div>
                    </div>
                    <p class="mt-3 text-xs text-gray-500 dark:text-gray-400 text-center">
                        <i class="fas fa-info-circle mr-1"></i>
                        Toate aplicațiile de mai sus sunt compatibile cu codul QR generat
                    </p>
                </div>

                <!-- Step 2: Scan QR -->
                <div class="mb-6">
                    <h4 class="text-sm font-semibold text-gray-700 dark:text-gray-300 mb-3">
                        Pasul 2: Scanează codul QR
                    </h4>
                    <div class="bg-gray-50 dark:bg-gray-900 rounded-lg p-4">
                        <div id="qrCodeContainer" class="flex justify-center items-center mb-4"></div>
                        <div id="secretKeyContainer" class="text-center"></div>
                    </div>
                    <p class="mt-2 text-xs text-gray-500 dark:text-gray-400">
                        <i class="fas fa-lightbulb mr-1"></i>
                        Deschide aplicația aleasă și scanează codul QR sau introdu manual cheia secretă
                    </p>
                </div>

                <!-- Step 3: Verify -->
                <div class="mb-4">
                    <h4 class="text-sm font-semibold text-gray-700 dark:text-gray-300 mb-3">
                        Pasul 3: Verifică configurarea
                    </h4>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                        Cod de verificare din aplicație
                    </label>
                    <input type="text" id="verificationCode" maxlength="6"
                           class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white text-center text-2xl tracking-widest"
                           placeholder="000000">
                    <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">
                        Introdu codul de 6 cifre afișat în aplicația ta de autentificare
                    </p>
                </div>
                <div id="verificationError" class="hidden bg-red-50 dark:bg-red-900/20 border-l-4 border-red-400 p-3 rounded mb-4">
                    <p class="text-sm text-red-700 dark:text-red-300"></p>
                </div>
                <div class="flex gap-3">
                    <button onclick="hideEnable2FAModal()"
                            class="flex-1 px-4 py-2 bg-gray-500 hover:bg-gray-600 text-white rounded-lg transition">
                        Anulează
                    </button>
                    <button onclick="confirm2FA()"
                            class="flex-1 px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg transition">
                        Confirmă
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal: Recovery Codes -->
    <div id="recoveryCodesModal" class="fixed inset-0 bg-gray-600 bg-opacity-50 hidden overflow-y-auto h-full w-full z-50">
        <div class="relative top-20 mx-auto p-5 border w-96 shadow-lg rounded-lg bg-white dark:bg-gray-800">
            <div class="mt-3">
                <h3 class="text-lg font-medium text-gray-900 dark:text-white mb-4">
                    <i class="fas fa-key mr-2"></i>Coduri de Recuperare
                </h3>
                <div class="bg-yellow-50 dark:bg-yellow-900/20 border-l-4 border-yellow-400 p-4 rounded mb-4">
                    <p class="text-sm text-yellow-700 dark:text-yellow-300">
                        Salvează aceste coduri într-un loc sigur! Fiecare cod poate fi folosit o singură dată.
                    </p>
                </div>
                <div id="recoveryCodesList" class="bg-gray-50 dark:bg-gray-900 p-4 rounded-lg mb-4 font-mono text-sm"></div>
                <div class="flex gap-3">
                    <button onclick="downloadRecoveryCodes()"
                            class="flex-1 px-4 py-2 bg-gray-600 hover:bg-gray-700 text-white rounded-lg transition">
                        <i class="fas fa-download mr-2"></i>Descarcă
                    </button>
                    <button onclick="hideRecoveryCodesModal()"
                            class="flex-1 px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg transition">
                        Am salvat
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal: Disable 2FA -->
    <div id="disable2FAModal" class="fixed inset-0 bg-gray-600 bg-opacity-50 hidden overflow-y-auto h-full w-full z-50">
        <div class="relative top-20 mx-auto p-5 border w-96 shadow-lg rounded-lg bg-white dark:bg-gray-800">
            <div class="mt-3">
                <h3 class="text-lg font-medium text-gray-900 dark:text-white mb-4">
                    <i class="fas fa-exclamation-triangle mr-2 text-red-500"></i>Dezactivează 2FA
                </h3>
                <p class="text-sm text-gray-600 dark:text-gray-400 mb-4">
                    Ești sigur că vrei să dezactivezi autentificarea cu doi factori? Contul tău va fi mai puțin securizat.
                </p>
                <div class="mb-4">
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                        Confirmă cu parola ta
                    </label>
                    <input type="password" id="disablePassword"
                           class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
                           placeholder="Parola ta">
                </div>
                <div id="disableError" class="hidden bg-red-50 dark:bg-red-900/20 border-l-4 border-red-400 p-3 rounded mb-4">
                    <p class="text-sm text-red-700 dark:text-red-300"></p>
                </div>
                <div class="flex gap-3">
                    <button onclick="hideDisable2FAModal()"
                            class="flex-1 px-4 py-2 bg-gray-500 hover:bg-gray-600 text-white rounded-lg transition">
                        Anulează
                    </button>
                    <button onclick="disable2FA()"
                            class="flex-1 px-4 py-2 bg-red-600 hover:bg-red-700 text-white rounded-lg transition">
                        Dezactivează
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal: Regenerate Codes -->
    <div id="regenerateCodesModal" class="fixed inset-0 bg-gray-600 bg-opacity-50 hidden overflow-y-auto h-full w-full z-50">
        <div class="relative top-20 mx-auto p-5 border w-96 shadow-lg rounded-lg bg-white dark:bg-gray-800">
            <div class="mt-3">
                <h3 class="text-lg font-medium text-gray-900 dark:text-white mb-4">
                    <i class="fas fa-sync-alt mr-2"></i>Regenerează Coduri
                </h3>
                <p class="text-sm text-gray-600 dark:text-gray-400 mb-4">
                    Codurile de recuperare vechi vor fi invalide. Asigură-te că salvezi noile coduri.
                </p>
                <div class="mb-4">
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                        Confirmă cu parola ta
                    </label>
                    <input type="password" id="regeneratePassword"
                           class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
                           placeholder="Parola ta">
                </div>
                <div id="regenerateError" class="hidden bg-red-50 dark:bg-red-900/20 border-l-4 border-red-400 p-3 rounded mb-4">
                    <p class="text-sm text-red-700 dark:text-red-300"></p>
                </div>
                <div class="flex gap-3">
                    <button onclick="hideRegenerateCodesModal()"
                            class="flex-1 px-4 py-2 bg-gray-500 hover:bg-gray-600 text-white rounded-lg transition">
                        Anulează
                    </button>
                    <button onclick="regenerateRecoveryCodes()"
                            class="flex-1 px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg transition">
                        Regenerează
                    </button>
                </div>
            </div>
        </div>
    </div>

    @push('scripts')
    <script>
    let recoveryCodes = [];

    // Enable 2FA
    async function enable2FA() {
        try {
            const response = await fetch('{{ route("auth.two-factor.enable") }}', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                }
            });

            const data = await response.json();

            if (data.success) {
                document.getElementById('qrCodeContainer').innerHTML = data.qr_code;
                document.getElementById('secretKeyContainer').innerHTML = `
                    <p class="text-sm text-gray-600 dark:text-gray-400 mb-2">Sau introdu manual:</p>
                    <code class="block p-2 bg-gray-100 dark:bg-gray-700 rounded text-xs break-all">${data.secret}</code>
                `;
                document.getElementById('enable2FAModal').classList.remove('hidden');
            }
        } catch (error) {
            console.error('Error:', error);
        }
    }

    // Confirm 2FA
    async function confirm2FA() {
        const code = document.getElementById('verificationCode').value;

        if (code.length !== 6) {
            showError('verificationError', 'Codul trebuie să aibă 6 cifre');
            return;
        }

        try {
            const response = await fetch('{{ route("auth.two-factor.confirm") }}', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                },
                body: JSON.stringify({ code })
            });

            const data = await response.json();

            if (data.success) {
                recoveryCodes = data.recovery_codes;
                hideEnable2FAModal();
                showRecoveryCodesModal();
            } else {
                // Verifică dacă QR code a expirat
                if (data.expired) {
                    hideEnable2FAModal();
                    alert('QR code-ul a expirat. Te rugăm să generezi unul nou.');
                } else {
                    showError('verificationError', data.message);
                }
            }
        } catch (error) {
            showError('verificationError', 'A apărut o eroare');
        }
    }

    // Disable 2FA
    async function disable2FA() {
        const password = document.getElementById('disablePassword').value;

        if (!password) {
            showError('disableError', 'Te rugăm să introduci parola');
            return;
        }

        try {
            const response = await fetch('{{ route("auth.two-factor.disable") }}', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                },
                body: JSON.stringify({ password })
            });

            const data = await response.json();

            if (data.success) {
                window.location.reload();
            } else {
                showError('disableError', data.message);
            }
        } catch (error) {
            showError('disableError', 'A apărut o eroare');
        }
    }

    // Regenerate Recovery Codes
    async function regenerateRecoveryCodes() {
        const password = document.getElementById('regeneratePassword').value;

        if (!password) {
            showError('regenerateError', 'Te rugăm să introduci parola');
            return;
        }

        try {
            const response = await fetch('{{ route("auth.two-factor.regenerate") }}', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                },
                body: JSON.stringify({ password })
            });

            const data = await response.json();

            if (data.success) {
                recoveryCodes = data.recovery_codes;
                hideRegenerateCodesModal();
                showRecoveryCodesModal();
            } else {
                showError('regenerateError', data.message);
            }
        } catch (error) {
            showError('regenerateError', 'A apărut o eroare');
        }
    }

    // Show/Hide Modals
    function showRecoveryCodesModal() {
        const codesList = recoveryCodes.map(code => `<div class="py-1">${code}</div>`).join('');
        document.getElementById('recoveryCodesList').innerHTML = codesList;
        document.getElementById('recoveryCodesModal').classList.remove('hidden');
    }

    function hideRecoveryCodesModal() {
        document.getElementById('recoveryCodesModal').classList.add('hidden');
        window.location.reload();
    }

    function showDisable2FAModal() {
        document.getElementById('disable2FAModal').classList.remove('hidden');
    }

    function hideDisable2FAModal() {
        document.getElementById('disable2FAModal').classList.add('hidden');
        document.getElementById('disablePassword').value = '';
        hideError('disableError');
    }

    function showRegenerateCodesModal() {
        document.getElementById('regenerateCodesModal').classList.remove('hidden');
    }

    function hideRegenerateCodesModal() {
        document.getElementById('regenerateCodesModal').classList.add('hidden');
        document.getElementById('regeneratePassword').value = '';
        hideError('regenerateError');
    }

    function hideEnable2FAModal() {
        document.getElementById('enable2FAModal').classList.add('hidden');
        document.getElementById('verificationCode').value = '';
        hideError('verificationError');
    }

    // Download Recovery Codes
    function downloadRecoveryCodes() {
        const text = 'Coduri de Recuperare 2FA - {{ config("app.name") }}\n' +
                     'Generare: ' + new Date().toLocaleString() + '\n\n' +
                     recoveryCodes.join('\n');

        const blob = new Blob([text], { type: 'text/plain' });
        const url = window.URL.createObjectURL(blob);
        const a = document.createElement('a');
        a.href = url;
        a.download = '2fa-recovery-codes.txt';
        a.click();
        window.URL.revokeObjectURL(url);
    }

    // Show/Hide Error
    function showError(elementId, message) {
        const element = document.getElementById(elementId);
        element.querySelector('p').textContent = message;
        element.classList.remove('hidden');
    }

    function hideError(elementId) {
        document.getElementById(elementId).classList.add('hidden');
    }

    // Auto-format verification code
    document.getElementById('verificationCode')?.addEventListener('input', function(e) {
        this.value = this.value.replace(/[^0-9]/g, '');
        if (this.value.length === 6) {
            hideError('verificationError');
        }
    });

    // Revoke single trusted device
    async function revokeDevice(deviceId) {
        if (!confirm('Ești sigur că vrei să revoci acest dispozitiv? Va trebui să introduci codul 2FA la următoarea conectare de pe acest dispozitiv.')) {
            return;
        }

        try {
            const response = await fetch(`{{ url('auth/two-factor/devices') }}/${deviceId}`, {
                method: 'DELETE',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                }
            });

            const data = await response.json();

            if (data.success) {
                // Remove device from DOM
                document.getElementById('device-' + deviceId)?.remove();

                // Show success toast
                if (typeof showToast === 'function') {
                    showToast('success', data.message);
                } else {
                    alert(data.message);
                }
            } else {
                alert(data.message || 'A apărut o eroare');
            }
        } catch (error) {
            console.error(error);
            alert('A apărut o eroare la revocare');
        }
    }

    // Revoke all trusted devices
    async function revokeAllDevices() {
        if (!confirm('Ești sigur că vrei să revoci TOATE dispozitivele de încredere? Va trebui să introduci codul 2FA pe fiecare dispozitiv la următoarea conectare.')) {
            return;
        }

        try {
            const response = await fetch('{{ route("auth.two-factor.revoke-all-devices") }}', {
                method: 'DELETE',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                }
            });

            const data = await response.json();

            if (data.success) {
                // Reload page to refresh the list
                window.location.reload();
            } else {
                alert(data.message || 'A apărut o eroare');
            }
        } catch (error) {
            console.error(error);
            alert('A apărut o eroare la revocare');
        }
    }
    </script>
    @endpush
</x-app-layout>
