@extends('layouts.app')

@section('title', '2FA Verification - ' . 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">
      <!-- Verification 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">
            <svg class="w-8 h-8 text-purple-600" fill="currentColor" viewBox="0 0 20 20">
              <path fill-rule="evenodd"
                d="M18 8A6 6 0 006 8c0 3-2 5-2 5s2 2 2 5a6 6 0 0012 0c0-3 2-5 2-5s-2-2-2-5zM8 8a2 2 0 114 0 2 2 0 01-4 0z"
                clip-rule="evenodd"></path>
            </svg>
          </div>
          <h2 class="text-3xl font-bold text-white mb-2 text-shadow">
            Two-Factor Authentication
          </h2>
          <p class="text-white text-shadow-sm">
            Enter the 6-digit code from your authenticator app
          </p>
        </div>

        <!-- Security Notice -->
        <div class="bg-yellow-50 bg-opacity-20 rounded-lg p-4 mb-6 border border-yellow-200 border-opacity-30">
          <div class="flex items-start space-x-3">
            <div class="flex-shrink-0">
              <svg class="w-5 h-5 text-yellow-400" fill="currentColor" viewBox="0 0 20 20">
                <path fill-rule="evenodd"
                  d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 102 0V6a1 1 0 00-1-1z"
                  clip-rule="evenodd"></path>
              </svg>
            </div>
            <div class="text-sm text-white text-shadow-sm">
              <p class="font-medium mb-1">Security Check</p>
              <p>This extra step helps keep your account secure.</p>
            </div>
          </div>
        </div>

        <!-- Verification Form -->
        <form method="POST" action="{{ route('2fa.verify.post') }}" class="space-y-6">
          @csrf

          <!-- Error Display -->
          @if ($errors->any())
            <div class="bg-red-50 bg-opacity-20 rounded-lg 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-5 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-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

          <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-5 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-10 pr-3 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-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
            </p>
          </div>

          <button type="submit"
            class="group relative w-full flex justify-center py-3 px-4 border border-transparent text-sm font-medium rounded-lg text-purple-600 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-white transition-all duration-200 shadow-lg hover:shadow-xl transform hover:-translate-y-0.5">
            <span class="absolute left-0 inset-y-0 flex items-center pl-3">
              <svg class="h-5 w-5 text-purple-600 group-hover:text-purple-700" fill="none" stroke="currentColor"
                viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                  d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
              </svg>
            </span>
            Verify & Continue
          </button>
        </form>

        <!-- Help Section -->
        <div class="mt-6 bg-blue-50 bg-opacity-20 rounded-lg p-4 border border-blue-200 border-opacity-30">
          <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">Need help?</p>
              <p>Make sure your device's time is synchronized and try again.</p>
            </div>
          </div>
        </div>

        <!-- Development Bypass (remove in production) -->
        @if (config('app.env') === 'local')
          <div class="mt-4 text-center space-y-2">
            <div class="text-white text-shadow-sm text-xs opacity-70 mt-2">
              <p>Development bypass code: <code class="bg-white bg-opacity-20 px-1 rounded">123456</code></p>
              <p>Visit <a href="/debug-codes" target="_blank"
                  class="text-blue-300 hover:text-blue-200 underline">/debug-codes</a> for current TOTP codes</p>
            </div>
          </div>
        @endif
      </div>
    </div>
  </div>

  <script>
    document.getElementById('code').addEventListener('input', function(e) {
      this.value = this.value.replace(/[^0-9]/g, '');

      // Auto-submit when 6 digits are entered
      if (this.value.length === 6) {
        this.form.submit();
      }
    });

    // Focus on input when page loads
    document.addEventListener('DOMContentLoaded', function() {
      document.getElementById('code').focus();
    });
  </script>
@endsection