@extends('layouts.app')

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

@section('content')
  <div class="min-h-screen flex items-center justify-center px-4 py-8">
    <div class="max-w-2xl w-full">
      <div class="text-center mb-6">
        <div
          class="w-12 h-12 sm:w-16 sm:h-16 bg-white rounded-2xl flex items-center justify-center mx-auto mb-4 shadow-lg glow-effect">
          <i class="fas fa-qrcode text-purple-600 text-xl sm:text-2xl"></i>
        </div>
        <h1 class="text-2xl sm:text-3xl font-bold text-white mb-2 text-shadow">Complete 2FA Setup</h1>
        <p class="text-white text-shadow-sm text-sm sm:text-base">Scan the QR code with your authenticator app and enter
          the verification code</p>
      </div>

      <div class="glass-effect rounded-xl p-4 sm:p-8">
        <!-- QR Code Section -->
        <div class="mb-6 sm:mb-8">
          <h2 class="text-lg sm:text-xl font-semibold text-white mb-4 text-shadow-sm">Step 1: Scan QR Code</h2>
          <div class="qr-container mx-auto w-fit">
            <img src="data:image/png;base64,{{ $qrCode }}" alt="QR Code" class="qr-code w-40 h-40 sm:w-48 sm:h-48">
          </div>
          <p class="text-center text-white text-shadow-sm mt-4 text-xs sm:text-sm">
            Scan this QR code with Google Authenticator, Authy, or similar apps
          </p>
        </div>

        <!-- Manual Entry Section -->
        <div class="mb-6 sm:mb-8">
          <h2 class="text-lg sm:text-xl font-semibold text-white mb-4 text-shadow-sm">Step 2: Manual Entry (Optional)</h2>
          <div class="glass-effect-card rounded-lg p-3 sm:p-4">
            <p class="text-white text-shadow-sm mb-3 text-xs sm:text-sm">If you can't scan the QR code, manually enter
              this secret key:</p>
            <div class="flex flex-col sm:flex-row items-stretch sm:items-center space-y-2 sm:space-y-0 sm:space-x-3">
              <code
                class="bg-gray-800 text-green-400 px-3 py-2 rounded-lg font-mono text-xs sm:text-sm break-all">{{ $secret }}</code>
              <button onclick="copyToClipboard('{{ $secret }}')"
                class="btn-glass px-3 py-2 rounded-lg text-xs sm:text-sm whitespace-nowrap">
                <i class="fas fa-copy mr-1"></i>Copy
              </button>
            </div>
          </div>
        </div>

        <!-- Confirmation Form -->
        <form method="POST" action="{{ route('2fa.confirm.post') }}" class="space-y-4 sm:space-y-6">
          @csrf

          <!-- Error Display -->
          @if ($errors->any())
            <div class="bg-red-50 bg-opacity-20 rounded-lg p-3 sm:p-4 border border-red-200 border-opacity-30">
              <div class="flex items-start space-x-3">
                <div class="flex-shrink-0">
                  <svg class="w-4 h-4 sm:w-5 sm:h-5 text-red-400" fill="currentColor" viewBox="0 0 20 20">
                    <path fill-rule="evenodd"
                      d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z"
                      clip-rule="evenodd"></path>
                  </svg>
                </div>
                <div class="text-xs sm:text-sm text-white text-shadow-sm">
                  <p class="font-medium mb-1">Verification Failed</p>
                  <ul class="list-disc list-inside space-y-1">
                    @foreach ($errors->all() as $error)
                      <li>{{ $error }}</li>
                    @endforeach
                  </ul>
                </div>
              </div>
            </div>
          @endif

          <!-- Development Bypass (remove in production) -->
          @if (config('app.env') === 'local')
            <div class="mt-4 text-center space-y-2">
              <div class="bg-blue-50 bg-opacity-20 rounded-lg p-3 sm:p-4 border border-blue-200 border-opacity-30">
                <div class="text-xs sm:text-sm text-white text-shadow-sm">
                  <p class="font-medium mb-2">Development Information</p>
                  <p class="mb-2">Secret: <code
                      class="bg-white bg-opacity-20 px-1 rounded text-xs">{{ $secret }}</code></p>
                  <p class="mb-2">Expected Code: <code
                      class="bg-white bg-opacity-20 px-1 rounded text-xs font-bold text-lg">{{ (new \App\TOTPService())->generateTOTP($secret) }}</code>
                  </p>
                  <p class="mb-2">Development bypass code: <code
                      class="bg-white bg-opacity-20 px-1 rounded text-xs">123456</code></p>
                  <p class="mt-3 text-yellow-300 font-bold">⚠️ Use the Expected Code above in your authenticator app for
                    testing!</p>
                </div>
              </div>
            </div>
          @endif

          <div>
            <label for="code" class="block text-sm font-medium text-white mb-2 text-shadow-sm">
              Authentication Code
            </label>
            <div class="relative">
              <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                <svg class="h-4 w-4 sm:h-5 sm:w-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                    d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z">
                  </path>
                </svg>
              </div>
              <input id="code" name="code" type="text" required maxlength="6" pattern="[0-9]{6}"
                class="input-glass block w-full pl-8 sm:pl-10 pr-3 py-3 sm:py-4 rounded-lg text-white placeholder-white placeholder-opacity-70 focus:outline-none focus:ring-2 focus:ring-white focus:ring-opacity-50 focus:border-transparent transition-all duration-200 text-center text-2xl sm:text-3xl tracking-widest font-mono @error('code') border-red-300 focus:ring-red-300 @enderror"
                placeholder="000000" autocomplete="off" autofocus value="{{ old('code') }}">
            </div>
            <p class="text-xs text-white text-shadow-sm mt-2 text-center">
              Enter the 6-digit code from your authenticator app to confirm setup
            </p>
          </div>

          <div class="text-center">
            <button type="submit"
              class="btn-primary-glass px-6 sm:px-8 py-3 rounded-lg font-semibold text-base sm:text-lg w-full sm:w-auto">
              <i class="fas fa-check mr-2"></i>Verify & Enable 2FA
            </button>
          </div>
        </form>

        <!-- Instructions -->
        <div class="mt-6 sm:mt-8 glass-effect-card rounded-lg p-4 sm:p-6">
          <h3 class="text-white font-semibold mb-3 text-shadow-sm text-sm sm:text-base">Need Help?</h3>
          <div class="space-y-2 text-white text-shadow-sm text-xs sm:text-sm">
            <p><i class="fas fa-info-circle mr-2 text-blue-400"></i>Make sure your device's time is synchronized</p>
            <p><i class="fas fa-clock mr-2 text-yellow-400"></i>Codes are valid for 30 seconds</p>
            <p><i class="fas fa-mobile-alt mr-2 text-green-400"></i>Try refreshing your authenticator app if needed</p>
          </div>
        </div>
      </div>
    </div>
  </div>

  <script>
    function copyToClipboard(text) {
      navigator.clipboard.writeText(text).then(function() {
        // Show success message
        const button = event.target.closest('button');
        const originalText = button.innerHTML;
        button.innerHTML = '<i class="fas fa-check mr-1"></i>Copied!';
        button.classList.add('bg-green-500');

        setTimeout(() => {
          button.innerHTML = originalText;
          button.classList.remove('bg-green-500');
        }, 2000);
      }).catch(function(err) {
        console.error('Could not copy text: ', err);
      });
    }

    // Auto-submit when 6 digits are entered
    document.addEventListener('DOMContentLoaded', function() {
      const codeInput = document.getElementById('code');

      codeInput.addEventListener('input', function(e) {
        // Only allow numbers
        this.value = this.value.replace(/[^0-9]/g, '');

        // Auto-submit when 6 digits are entered
        if (this.value.length === 6) {
          setTimeout(() => {
            this.closest('form').submit();
          }, 500);
        }
      });

      // Focus on input when page loads
      codeInput.focus();
    });
  </script>
@endsection