@extends('layouts.user')

@section('page-title', __('2FA Setup'))

@section('content')
<div class="max-w-md mx-auto">
    <div class="bg-white rounded-xl border border-gray-200 p-6 text-center">
        <h2 class="font-bold text-xl mb-2">{{ __('Scan the QR code') }}</h2>
        <p class="text-sm text-gray-500 mb-5">{{ __('Use an authenticator app to scan this code, then enter the 6-digit code to finish setup.') }}</p>
        <img src="{{ $qrUrl }}" alt="{{ __('2FA QR code') }}" class="w-56 h-56 mx-auto border border-gray-200 rounded-lg"
             onerror="this.style.display='none';document.getElementById('qr-fallback').style.display='block'">
        <div id="qr-fallback" class="hidden mt-4 p-4 bg-gray-50 rounded-lg">
            <p class="text-xs text-gray-500 mb-2">{{ __('QR unavailable. Enter this secret into your app manually:') }}</p>
            <code class="text-sm font-mono break-all">{{ $secret }}</code>
        </div>

        <form action="{{ route('user.two-factor-verify') }}" method="POST" class="mt-6">
            @csrf
            <label class="block text-sm font-medium text-gray-700 mb-2 text-left">{{ __('Verification code') }}</label>
            <input type="text" name="code" required pattern="[0-9]{6}" maxlength="6" inputmode="numeric"
                   class="w-full px-4 py-3 text-center text-xl tracking-widest font-mono border border-gray-300 rounded-lg focus:ring-indigo-500 focus:border-indigo-500">
            <button type="submit" class="mt-4 w-full py-3 text-white font-semibold bg-indigo-600 rounded-lg hover:bg-indigo-700">{{ __('Verify & Finish') }}</button>
        </form>
        <a href="{{ route('user.profile') }}" class="mt-3 block text-sm text-gray-500 hover:text-gray-700">{{ __('Back to profile') }}</a>
    </div>
</div>
@endsection