<x-app-layout>

    <x-module-hero
        title="OTP Settings"
        description="Configure system-wide OTP verification for all user logins"
        icon="fa-shield-alt"
    >
        <x-slot name="tabs">
            <a href="{{ route('profile.edit') }}"
               class="module-hero-tab {{ request()->routeIs('profile.edit') ? 'border-b-2 border-[#1e293b]' : 'opacity-70 hover:opacity-100 transition-opacity' }}
                      inline-flex items-center gap-2 px-4 py-3 text-[#1e293b] text-sm font-medium
                      md:w-auto w-full border-b border-[#cbd5e1] md:border-b-0">
                <i class="fas fa-user text-sm"></i> Profile
            </a>
            <a href="{{ route('settings.security') }}"
               class="module-hero-tab {{ request()->routeIs('settings.security') ? 'border-b-2 border-[#1e293b]' : 'opacity-70 hover:opacity-100 transition-opacity' }}
                      inline-flex items-center gap-2 px-4 py-3 text-[#1e293b] text-sm font-medium
                      md:w-auto w-full border-b border-[#cbd5e1] md:border-b-0">
                <i class="fas fa-lock text-sm"></i> Security
            </a>
            <a href="{{ route('otp.settings') }}"
               class="module-hero-tab {{ request()->routeIs('otp.settings') ? 'border-b-2 border-[#1e293b]' : 'opacity-70 hover:opacity-100 transition-opacity' }}
                      inline-flex items-center gap-2 px-4 py-3 text-[#1e293b] text-sm font-medium
                      md:w-auto w-full border-b border-[#cbd5e1] md:border-b-0">
                <i class="fas fa-shield-alt text-sm"></i> OTP Settings
            </a>
            <a href="{{ route('settings.sessions') }}"
               class="module-hero-tab {{ request()->routeIs('settings.sessions') ? 'border-b-2 border-[#1e293b]' : 'opacity-70 hover:opacity-100 transition-opacity' }}
                      inline-flex items-center gap-2 px-4 py-3 text-[#1e293b] text-sm font-medium
                      md:w-auto w-full border-b border-[#cbd5e1] md:border-b-0">
                <i class="fas fa-desktop text-sm"></i> Sessions
            </a>
        </x-slot>
    </x-module-hero>

    <div class="p-6 space-y-6">

        {{-- OTP Status Card --}}
        <div class="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden">
            <div class="p-6">
                <div class="flex items-center justify-between">
                    <div class="flex items-center gap-4">
                        <div class="w-14 h-14 rounded-full {{ $otpEnabled ? 'bg-green-100' : 'bg-gray-100' }} flex items-center justify-center flex-shrink-0">
                            <i class="fas fa-shield-alt text-2xl {{ $otpEnabled ? 'text-green-600' : 'text-gray-400' }}"></i>
                        </div>
                        <div>
                            <h2 class="text-xl font-semibold text-gray-800">OTP Verification</h2>
                            <p class="text-gray-500 text-sm">
                                {{ $otpEnabled ? 'Currently enabled for all user logins' : 'Currently disabled — users login directly' }}
                            </p>
                        </div>
                    </div>
                    <span class="px-3 py-1 rounded-full text-sm font-medium {{ $otpEnabled ? 'bg-green-100 text-green-700' : 'bg-gray-100 text-gray-600' }}">
                        {{ $otpEnabled ? 'Active' : 'Inactive' }}
                    </span>
                </div>
            </div>
            <div class="px-6 py-4 bg-gray-50 border-t border-gray-100">
                <button
                    type="button"
                    onclick="toggleOtp({{ $otpEnabled ? 'false' : 'true' }})"
                    class="px-6 py-2 {{ $otpEnabled ? 'bg-red-600 hover:bg-red-700' : 'bg-green-600 hover:bg-green-700' }} text-white font-medium rounded-lg transition flex items-center gap-2"
                >
                    <i class="fas {{ $otpEnabled ? 'fa-toggle-off' : 'fa-toggle-on' }}"></i>
                    {{ $otpEnabled ? 'Disable OTP' : 'Enable OTP' }}
                </button>
            </div>
        </div>

        {{-- How it Works --}}
        <div class="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden">
            <div class="bg-gray-50 px-6 py-4 border-b border-gray-200">
                <h2 class="text-lg font-semibold text-gray-800 flex items-center gap-2">
                    <i class="fas fa-info-circle text-blue-600"></i> How OTP Works
                </h2>
            </div>
            <div class="p-6">
                <div class="space-y-4">
                    @foreach([
                        ['1', 'blue', 'User Enters Credentials', 'User submits login credentials (email/username and password)'],
                        ['2', 'blue', 'OTP Generated & Sent', 'A 6-digit code is generated and sent to the user\'s email address'],
                        ['3', 'blue', 'User Verifies OTP', 'User enters the 6-digit code within 10 minutes before expiration'],
                        ['✓', 'green', 'Access Granted', 'After successful verification, user is redirected to their dashboard'],
                    ] as [$step, $color, $title, $desc])
                        <div class="flex items-start gap-4">
                            <div class="w-8 h-8 rounded-full bg-{{ $color }}-100 flex items-center justify-center flex-shrink-0 mt-0.5">
                                <span class="text-{{ $color }}-600 font-semibold text-sm">{{ $step }}</span>
                            </div>
                            <div>
                                <h3 class="font-medium text-gray-800">{{ $title }}</h3>
                                <p class="text-gray-500 text-sm">{{ $desc }}</p>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        </div>

        {{-- Security Notice --}}
        <div class="bg-amber-50 border border-amber-200 rounded-lg p-6 flex items-start gap-4">
            <div class="w-10 h-10 rounded-full bg-amber-100 flex items-center justify-center flex-shrink-0">
                <i class="fas fa-exclamation-triangle text-amber-600"></i>
            </div>
            <div>
                <h3 class="font-semibold text-amber-800 mb-1">Security Notice</h3>
                <p class="text-amber-700 text-sm">
                    Enabling OTP adds an extra layer of security to all user accounts. Users will be required to verify
                    their identity via email on every login attempt. Make sure your email configuration is properly set
                    up before enabling this feature.
                </p>
            </div>
        </div>

    </div>

    <script>
    function toggleOtp(enable) {
        if (!confirm(enable ? 'Enable OTP for all user logins?' : 'Disable OTP for all user logins?')) {
            return;
        }
        fetch('{{ route('otp.toggle') }}', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
            },
            body: JSON.stringify({ enabled: enable })
        })
        .then(r => r.json())
        .then(data => {
            if (data.success) {
                window.showToast ? window.showToast(data.message, 'success') : alert(data.message);
                setTimeout(() => window.location.reload(), 1000);
            } else {
                window.showToast ? window.showToast('Failed to update OTP settings.', 'error') : alert('Failed to update OTP settings.');
            }
        })
        .catch(() => {
            window.showToast ? window.showToast('An error occurred. Please try again.', 'error') : alert('An error occurred.');
        });
    }
    </script>

</x-app-layout>
