{% extends 'account/base_account.html.twig' %}

{% block title %}Configurer l'authentification 2FA — NUM-ECARD Admin{% endblock %}

{% block body %}
<style>
    .setup-page {
        min-height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        background: linear-gradient(180deg, #f5f5f7 0%, #ffffff 50%);
        padding: 40px 20px;
        font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Helvetica Neue', Arial, sans-serif;
    }
    .setup-card {
        width: 100%;
        max-width: 480px;
        background: white;
        border-radius: 20px;
        box-shadow: 0 4px 40px rgba(0,0,0,0.08);
        padding: 48px 40px;
        position: relative;
        overflow: hidden;
    }
    .setup-card::before {
        content: '';
        position: absolute;
        top: 0; left: 0; right: 0;
        height: 4px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    }
    .setup-title {
        font-size: 26px;
        font-weight: 700;
        color: #1d1d1f;
        text-align: center;
        margin-bottom: 8px;
    }
    .setup-subtitle {
        font-size: 14px;
        color: #86868b;
        text-align: center;
        margin-bottom: 32px;
    }
    .setup-step {
        display: flex;
        gap: 12px;
        align-items: flex-start;
        margin-bottom: 20px;
    }
    .setup-step-num {
        width: 28px;
        height: 28px;
        background: linear-gradient(135deg, #667eea, #764ba2);
        color: white;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 13px;
        font-weight: 700;
        flex-shrink: 0;
        margin-top: 2px;
    }
    .setup-step-text {
        font-size: 14px;
        color: #1d1d1f;
        line-height: 1.5;
    }
    .qr-wrapper {
        text-align: center;
        margin: 24px 0;
        padding: 20px;
        background: #f5f5f7;
        border-radius: 12px;
    }
    .qr-wrapper img {
        width: 200px;
        height: 200px;
        border-radius: 8px;
    }
    .secret-box {
        background: #1d1d1f;
        color: #34c759;
        font-family: 'SF Mono', 'Courier New', monospace;
        font-size: 15px;
        letter-spacing: 3px;
        padding: 12px 16px;
        border-radius: 8px;
        text-align: center;
        margin: 12px 0;
        word-break: break-all;
    }
    .confirm-input {
        width: 100%;
        padding: 16px;
        border: 1.5px solid #d2d2d7;
        border-radius: 12px;
        font-size: 28px;
        font-weight: 700;
        letter-spacing: 12px;
        text-align: center;
        color: #1d1d1f;
        background: #fafafa;
        box-sizing: border-box;
        font-family: 'SF Mono', monospace;
        outline: none;
        transition: all 0.2s;
    }
    .confirm-input:focus {
        border-color: #667eea;
        background: #fff;
        box-shadow: 0 0 0 3px rgba(102,126,234,0.12);
    }
    .confirm-btn {
        width: 100%;
        padding: 16px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        border: none;
        border-radius: 12px;
        font-size: 16px;
        font-weight: 600;
        cursor: pointer;
        margin-top: 16px;
        font-family: inherit;
        transition: all 0.3s;
    }
    .confirm-btn:hover { opacity: 0.9; transform: translateY(-1px); }
    .setup-warning {
        background: #fff3cd;
        border-left: 4px solid #ff9500;
        border-radius: 8px;
        padding: 12px 16px;
        font-size: 13px;
        color: #7a4f00;
        margin-top: 20px;
    }
</style>

<div class="setup-page">
    <div class="setup-card">

        <h1 class="setup-title">🔐 Configuration 2FA</h1>
        <p class="setup-subtitle">Sécurisez l'accès back-office NUM-ECARD</p>

        {# Flash messages #}
        {% for msg in app.flashes('error') %}
            <div style="background:#fff2f2;border-left:4px solid #ff3b30;border-radius:8px;padding:12px 16px;margin-bottom:16px;font-size:14px;color:#c92a2a;">❌ {{ msg }}</div>
        {% endfor %}

        <div class="setup-step">
            <div class="setup-step-num">1</div>
            <div class="setup-step-text">
                Installez <strong>Google Authenticator</strong>, <strong>Authy</strong> ou toute app compatible TOTP sur votre téléphone.
            </div>
        </div>

        <div class="setup-step">
            <div class="setup-step-num">2</div>
            <div class="setup-step-text">
                Scannez ce QR code avec l'application :
                <div class="qr-wrapper">
                    {% if qr_code_uri %}
                        <img src="{{ qr_code_uri }}" alt="QR Code 2FA NUM-ECARD" style="width:200px;height:200px;border-radius:8px;">
                    {% else %}
                        <div style="width:200px;height:200px;display:flex;align-items:center;justify-content:center;background:#f5f5f7;border-radius:8px;font-size:13px;color:#86868b;text-align:center;padding:16px;">
                            QR code indisponible.<br>Utilisez le secret manuel ci-dessous.
                        </div>
                    {% endif %}
                </div>
                <div style="font-size:12px;color:#86868b;text-align:center;margin-bottom:6px;">
                    Ou saisissez manuellement le secret :
                </div>
                <div class="secret-box">{{ totp_secret }}</div>
            </div>
        </div>

        <div class="setup-step">
            <div class="setup-step-num">3</div>
            <div class="setup-step-text">
                Saisissez le code à 6 chiffres affiché par l'app pour confirmer la configuration :
            </div>
        </div>

        <form method="post" action="{{ path('admin_2fa_confirm') }}" autocomplete="off">
            <input
                type="text"
                name="_auth_code"
                id="confirm-code"
                class="confirm-input"
                maxlength="6"
                pattern="[0-9]{6}"
                inputmode="numeric"
                placeholder="000000"
                autofocus
                required
            >
            <input type="hidden" name="_csrf_token" value="{{ csrf_token('2fa_confirm') }}">
            <button type="submit" class="confirm-btn">✅ Confirmer et activer le 2FA</button>
        </form>

        <div class="setup-warning">
            ⚠️ <strong>Conservez le secret en lieu sûr.</strong>
            Si vous perdez votre téléphone, ce code vous permettra de récupérer l'accès.
            Ne le partagez jamais.
        </div>

    </div>
</div>

<script>
document.getElementById('confirm-code').addEventListener('keypress', function(e) {
    if (!/[0-9]/.test(e.key)) e.preventDefault();
});
</script>
{% endblock %}