@extends('layouts.app')

@section('content')
<style>
    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

    .ff-2fa-page {
        min-height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        background: url("{{ asset('assets/background.png') }}");
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        padding: 20px;
        font-family: 'Inter', sans-serif;
    }

    .ff-2fa-card {
        width: 100%;
        max-width: 520px;
        border-radius: 20px;
        padding: 40px 35px 35px 35px;
        background: rgba(30, 30, 30, 0.4);
        border: 1px solid rgba(255, 255, 255, 0.2);
        backdrop-filter: blur(15px);
        -webkit-backdrop-filter: blur(15px);
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
        color: #fff;
        text-align: center;
    }

    .ff-2fa-title {
        font-size: 22px;
        font-weight: 700;
        margin-bottom: 8px;
    }

    .ff-2fa-subtitle {
        color: rgba(255, 255, 255, 0.6);
        font-size: 14px;
        margin-bottom: 25px;
        line-height: 1.5;
    }

    .ff-shield-icon {
        width: 70px;
        height: 70px;
        margin: 0 auto 20px;
        background: linear-gradient(135deg, rgba(255, 193, 7, 0.2), rgba(255, 152, 0, 0.2));
        border: 2px solid rgba(255, 193, 7, 0.4);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        animation: pulse2fa 2s ease-in-out infinite;
    }

    @keyframes pulse2fa {
        0%, 100% { box-shadow: 0 0 0 0 rgba(255, 193, 7, 0.3); }
        50% { box-shadow: 0 0 20px 10px rgba(255, 193, 7, 0.1); }
    }

    .ff-shield-icon i {
        font-size: 28px;
        color: #FFC107;
    }

    .ff-qr-container {
        background: #fff;
        border-radius: 16px;
        padding: 20px;
        display: inline-block;
        margin-bottom: 20px;
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
    }

    .ff-qr-container svg {
        width: 200px;
        height: 200px;
    }

    .ff-secret-key {
        background: rgba(255, 255, 255, 0.08);
        border: 1px solid rgba(255, 255, 255, 0.15);
        border-radius: 10px;
        padding: 14px 18px;
        margin-bottom: 20px;
        font-family: 'Courier New', monospace;
        font-size: 16px;
        letter-spacing: 3px;
        color: #FFC107;
        font-weight: 600;
        word-break: break-all;
        user-select: all;
    }

    .ff-secret-label {
        font-size: 12px;
        color: rgba(255, 255, 255, 0.5);
        text-transform: uppercase;
        letter-spacing: 1px;
        margin-bottom: 6px;
    }

    .ff-steps {
        text-align: left;
        margin-bottom: 25px;
    }

    .ff-step {
        display: flex;
        align-items: flex-start;
        gap: 12px;
        margin-bottom: 14px;
    }

    .ff-step-num {
        min-width: 28px;
        height: 28px;
        border-radius: 50%;
        background: linear-gradient(135deg, #FFC107, #F57F17);
        color: #000;
        font-size: 13px;
        font-weight: 700;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }

    .ff-step-text {
        font-size: 14px;
        color: rgba(255, 255, 255, 0.75);
        line-height: 1.5;
        padding-top: 3px;
    }

    .ff-otp-input {
        width: 100%;
        height: 56px;
        border-radius: 12px;
        border: 1px solid rgba(255, 255, 255, 0.3);
        background: rgba(255, 255, 255, 0.05);
        color: #fff;
        font-size: 24px;
        font-weight: 600;
        text-align: center;
        letter-spacing: 12px;
        transition: all 0.3s ease;
    }

    .ff-otp-input:focus {
        outline: none;
        border-color: #FFC107;
        background: rgba(255, 255, 255, 0.08);
        box-shadow: 0 0 15px rgba(255, 193, 7, 0.2);
    }

    .ff-otp-input::placeholder {
        color: rgba(255, 255, 255, 0.3);
        letter-spacing: 4px;
        font-size: 16px;
    }

    .ff-otp-input:-webkit-autofill,
    .ff-otp-input:-webkit-autofill:hover,
    .ff-otp-input:-webkit-autofill:focus,
    .ff-otp-input:-webkit-autofill:active {
        -webkit-text-fill-color: white !important;
        transition: background-color 5000s ease-in-out 0s;
    }

    .ff-2fa-submit {
        width: 100%;
        height: 52px;
        border: none;
        border-radius: 10px;
        background: linear-gradient(to right, #FFC107, #F57F17);
        color: #000;
        font-size: 16px;
        font-weight: 700;
        cursor: pointer;
        transition: all 0.3s ease;
        margin-top: 20px;
    }

    .ff-2fa-submit:hover {
        transform: translateY(-2px);
        background: linear-gradient(to right, #FFCA28, #FF8F00);
        box-shadow: 0 5px 15px rgba(255, 193, 7, 0.3);
    }

    .ff-alert-error {
        background: rgba(220, 53, 69, 0.2);
        border: 1px solid rgba(220, 53, 69, 0.4);
        color: #ff8c8c;
        padding: 12px 16px;
        border-radius: 10px;
        font-size: 14px;
        margin-bottom: 20px;
        text-align: left;
    }

    .ff-alert-success {
        background: rgba(40, 167, 69, 0.2);
        border: 1px solid rgba(40, 167, 69, 0.4);
        color: #67e6ab;
        padding: 12px 16px;
        border-radius: 10px;
        font-size: 14px;
        margin-bottom: 20px;
        text-align: left;
    }

    .ff-2fa-back {
        display: inline-block;
        margin-top: 20px;
        color: rgba(255, 255, 255, 0.5);
        text-decoration: none;
        font-size: 13px;
        transition: color 0.3s;
    }

    .ff-2fa-back:hover {
        color: #FFB300;
    }

    .ff-divider {
        border: none;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        margin: 25px 0;
    }

    @media (max-width: 500px) {
        .ff-2fa-card { padding: 30px 20px; }
        .ff-2fa-title { font-size: 20px; }
        .ff-qr-container svg { width: 160px; height: 160px; }
        .ff-otp-input { letter-spacing: 8px; }
    }
</style>

<div class="ff-2fa-page">
    <div class="ff-2fa-card">
        <div class="ff-shield-icon">
            <i class="fa-solid fa-shield-halved"></i>
        </div>

        <h1 class="ff-2fa-title">Setup Two-Factor Authentication</h1>
        <p class="ff-2fa-subtitle">
            Secure your account by enabling 2FA with Google Authenticator
        </p>

        @if(session('error'))
            <div class="ff-alert-error">
                <i class="fa-solid fa-circle-exclamation me-1"></i> {{ session('error') }}
            </div>
        @endif

        <div class="ff-steps">
            <div class="ff-step">
                <div class="ff-step-num">1</div>
                <div class="ff-step-text">Download and install <strong>Google Authenticator</strong> from your app store.</div>
            </div>
            <div class="ff-step">
                <div class="ff-step-num">2</div>
                <div class="ff-step-text">Scan the QR code below or manually enter the secret key into the app.</div>
            </div>
            <div class="ff-step">
                <div class="ff-step-num">3</div>
                <div class="ff-step-text">Enter the <strong>6-digit code</strong> generated by the app to verify and enable 2FA.</div>
            </div>
        </div>

        <hr class="ff-divider">

        <div class="ff-qr-container">
            {!! $qrCodeSvg !!}
        </div>

        <div class="ff-secret-label">Or enter this key manually</div>
        <div class="ff-secret-key">{{ $secret }}</div>

        <hr class="ff-divider">

        <form method="POST" action="{{ route('2fa.enable') }}">
            @csrf

            <div class="mb-3">
                <input id="otp" type="text" class="ff-otp-input" name="otp"
                    maxlength="6" inputmode="numeric" pattern="[0-9]*" autocomplete="one-time-code"
                    placeholder="• • • • • •" autofocus required>
                @error('otp')
                    <div class="text-danger mt-2" style="font-size: 13px;">{{ $message }}</div>
                @enderror
            </div>

            <button type="submit" class="ff-2fa-submit">
                <i class="fa-solid fa-lock me-2"></i> Verify & Enable 2FA
            </button>
        </form>

        <a class="ff-2fa-back" href="{{ route('home') }}">
            <i class="fa-solid fa-arrow-left me-1"></i> Back to Dashboard
        </a>
    </div>
</div>
@endsection