<div class="auth-content" style="max-width:440px">
    <div class="auth-icon" style="color:var(--color-warning,#f59e0b)">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" width="44" height="44">
            <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/>
        </svg>
    </div>
    <h1 class="auth-title"><?= t('totp_enforce_wizard_title') ?></h1>
    <p class="auth-subtitle"><?= t('totp_enforce_wizard_subtitle') ?></p>

    <?php if (!empty($error)): ?>
    <div class="alert alert-error"><?= Helper::e($error) ?></div>
    <?php endif; ?>

    <!-- Step 1: QR code -->
    <div class="totp-wizard-step">
        <div class="totp-wizard-step-label">
            <span class="step-number">1</span>
            <?= t('totp_scan_desc') ?>
        </div>
        <div id="qrcode" class="totp-qr"></div>

        <div class="totp-secret-box">
            <span class="form-label" style="font-size:.75rem"><?= t('totp_manual_key') ?></span>
            <code class="totp-secret-code" id="totpSecret"><?= Helper::e(chunk_split($user['totp_secret'], 4, ' ')) ?></code>
            <button type="button" class="btn btn-ghost btn-xs" data-click="copySecret"><?= t('totp_copy') ?></button>
        </div>
    </div>

    <!-- Step 2: Confirm -->
    <div class="totp-wizard-step" style="margin-top:1.5rem">
        <div class="totp-wizard-step-label">
            <span class="step-number">2</span>
            <?= t('totp_confirm_hint') ?>
        </div>
        <form method="POST" action="/totp-setup-forced" autocomplete="off">
            <?= Helper::csrf() ?>
            <input type="hidden" name="action" value="totp_enable_forced">
            <input type="hidden" name="totp_secret" value="<?= Helper::e($user['totp_secret']) ?>">
            <div class="form-group" style="margin-top:.75rem">
                <input type="text" name="totp_code" class="form-input totp-input"
                       maxlength="6" pattern="\d{6}" inputmode="numeric"
                       autocomplete="one-time-code" placeholder="000000"
                       required autofocus id="totpCode">
            </div>
            <button type="submit" class="btn btn-primary btn-block"><?= t('totp_enable') ?></button>
        </form>
    </div>

    <p class="totp-enforce-note"><?= t('totp_enforce_note') ?></p>

    <div style="text-align:center;margin-top:1.25rem">
        <a href="/logout" class="totp-back-link"><?= t('logout') ?></a>
    </div>
</div>

<script nonce="<?= csp_nonce() ?>" src="/assets/js/qrcode.min.js"></script>
<script nonce="<?= csp_nonce() ?>">
document.addEventListener('DOMContentLoaded', function() {
    const el = document.getElementById('qrcode');
    if (el && typeof QRCode !== 'undefined') {
        new QRCode(el, {
            text: <?= json_encode($otpUrl) ?>,
            width: 200,
            height: 200,
            colorDark: '#000000',
            colorLight: '#ffffff',
            correctLevel: QRCode.CorrectLevel.M
        });
    }
});

function copySecret() {
    const s = document.getElementById('totpSecret').textContent.replace(/\s/g,'');
    navigator.clipboard.writeText(s).then(() => {
        const btn = event.target;
        const orig = btn.textContent;
        btn.textContent = '✓';
        setTimeout(() => btn.textContent = orig, 1500);
    });
}

// Auto-submit when 6 digits entered
const codeInput = document.getElementById('totpCode');
codeInput.addEventListener('input', function() {
    const digits = this.value.replace(/\D/g,'');
    this.value = digits;
    if (digits.length === 6) this.form.submit();
});
codeInput.addEventListener('keypress', function(e) {
    if (!/\d/.test(e.key)) e.preventDefault();
});
</script>
