@extends('layouts.app')

@section('title', '2FA Settings - ' . config('app.name', 'Laravel 2FA'))

@section('content')
  <div class="min-h-screen flex items-center justify-center px-4">
    <div class="max-w-md w-full">
      <!-- Setup Card -->
      <div class="glass-effect rounded-2xl shadow-2xl p-8">
        <!-- Header -->
        <div class="text-center mb-8">
          <div class="w-16 h-16 bg-white rounded-full flex items-center justify-center mx-auto mb-4 shadow-lg">
            <i class="fas fa-shield-alt text-purple-600 text-2xl"></i>
          </div>
          <h2 class="text-3xl font-bold text-white mb-2 text-shadow">
            @if ($user->is_2fa_enabled)
              2FA Settings
            @else
              Setup 2FA
            @endif
          </h2>
          <p class="text-white text-shadow-sm">
            @if ($user->is_2fa_enabled)
              Manage your two-factor authentication
            @else
              Enhance your account security
            @endif
          </p>
        </div>

        <!-- Setup Instructions -->
        <div class="bg-blue-50 bg-opacity-20 rounded-lg p-4 border border-blue-200 border-opacity-30 mb-6">
          <div class="flex items-start space-x-3">
            <div class="flex-shrink-0">
              <svg class="w-5 h-5 text-blue-400" fill="currentColor" viewBox="0 0 20 20">
                <path fill-rule="evenodd"
                  d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z"
                  clip-rule="evenodd"></path>
              </svg>
            </div>
            <div class="text-sm text-white text-shadow-sm">
              <p class="font-medium mb-1">Setup Instructions</p>
              <p>Click "Setup 2FA" to generate a new QR code. Scan it with your authenticator app (Google Authenticator,
                Authy, etc.) and then enter the 6-digit code to confirm setup.</p>
            </div>
          </div>
        </div>

        @if ($user->is_2fa_enabled)
          <!-- 2FA is Enabled - Show Management Options -->
          <div class="space-y-4">
            <!-- Current Status -->
            <div class="bg-green-500 bg-opacity-20 rounded-lg p-4 border border-green-500 border-opacity-30">
              <div class="flex items-center">
                <i class="fas fa-check-circle text-green-400 mr-3"></i>
                <div>
                  <h4 class="text-white font-medium text-shadow-sm">2FA is Active</h4>
                  <p class="text-white text-shadow-sm text-sm opacity-80">Your account is protected with two-factor
                    authentication</p>
                </div>
              </div>
            </div>

            <!-- Regenerate QR Code -->
            <div class="glass-effect-card rounded-lg p-4">
              <h4 class="text-white font-medium mb-2 text-shadow-sm">Regenerate QR Code</h4>
              <p class="text-white text-shadow-sm text-sm opacity-80 mb-4">
                Generate a new QR code for a different device or app
              </p>
              <form method="POST" action="{{ route('2fa.setup.post') }}">
                @csrf
                <button type="submit" class="btn-glass w-full py-2 rounded text-sm">
                  <i class="fas fa-qrcode mr-2"></i>Generate New QR Code
                </button>
              </form>
            </div>

            <!-- Disable 2FA -->
            <div class="glass-effect-card rounded-lg p-4">
              <h4 class="text-white font-medium mb-2 text-shadow-sm">Disable 2FA</h4>
              <p class="text-white text-shadow-sm text-sm opacity-80 mb-4">
                Remove two-factor authentication from your account
              </p>
              <a href="{{ route('2fa.disable') }}"
                class="btn-glass w-full py-2 rounded text-sm text-center block bg-red-600 hover:bg-red-700">
                <i class="fas fa-times mr-2"></i>Disable 2FA
              </a>
            </div>
          </div>
        @else
          <!-- 2FA is Disabled - Show Setup Info -->
          <div class="bg-white bg-opacity-20 rounded-lg p-6 mb-6 border border-white border-opacity-30">
            <div class="flex items-start space-x-3">
              <div class="flex-shrink-0">
                <i class="fas fa-info-circle text-blue-400 text-xl"></i>
              </div>
              <div>
                <h4 class="text-sm font-medium text-white mb-2 text-shadow-sm">What happens next?</h4>
                <ul class="text-sm text-white text-shadow-sm space-y-1">
                  <li>• Generate a unique 2FA secret</li>
                  <li>• Create a QR code for your app</li>
                  <li>• Verify with a 6-digit code</li>
                </ul>
              </div>
            </div>
          </div>

          <!-- Setup Form -->
          <form method="POST" action="{{ route('2fa.setup.post') }}">
            @csrf
            <button type="submit" class="btn-primary-glass w-full py-3 rounded-lg font-semibold text-lg">
              <i class="fas fa-plus mr-2"></i>Setup 2FA
            </button>
          </form>
        @endif

        <!-- Back Link -->
        <div class="mt-6 text-center">
          <a href="{{ route('dashboard') }}"
            class="text-white text-shadow-sm hover:text-purple-200 transition-colors duration-200 text-sm">
            <i class="fas fa-arrow-left mr-1"></i>Back to Dashboard
          </a>
        </div>
      </div>
    </div>
  </div>
@endsection