<?php
/**
 * OTP Setup View — Scan QR code and save backup codes
 */
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Set Up Two-Factor Authentication — Helmyx</title>
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@600;700&family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
    <link rel="icon" type="image/png" sizes="32x32" href="<?= APP_URL ?>/assets/brand/favicon/helmyx-icon-32.png">
    <link rel="stylesheet" href="<?= APP_URL ?>/assets/css/hx-tokens.css">
    <link rel="stylesheet" href="<?= APP_URL ?>/assets/css/style.css">
    <link rel="stylesheet" href="<?= APP_URL ?>/assets/css/auth.css">
    <style>
        .step-indicator { display: flex; gap: 0; margin-bottom: 32px; }
        .step { display: flex; align-items: center; gap: 8px; font-size: 0.8rem; font-weight: 500; color: var(--text-muted); }
        .step.active { color: var(--primary); }
        .step.done { color: var(--success); }
        .step-num { width: 24px; height: 24px; border-radius: 50%; border: 2px solid currentColor; display: flex; align-items: center; justify-content: center; font-size: 0.7rem; font-weight: 700; flex-shrink: 0; }
        .step-connector { width: 40px; height: 2px; background: var(--border-color); margin: 0 4px; }
        .secret-box { font-family: 'Courier New', monospace; letter-spacing: 4px; font-size: 1rem; font-weight: 700; padding: 12px 20px; background: var(--page-bg); border-radius: 8px; border: 1.5px dashed var(--border-color); text-align: center; word-break: break-all; color: var(--text-primary); }
        .backup-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
        .backup-code { font-family: 'Courier New', monospace; font-size: 0.9rem; font-weight: 600; padding: 8px 12px; background: var(--page-bg); border: 1px solid var(--border-color); border-radius: 6px; text-align: center; letter-spacing: 2px; }
        .instruction-step { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 16px; }
        .instruction-num { width: 28px; height: 28px; border-radius: 50%; background: var(--primary); color: white; display: flex; align-items: center; justify-content: center; font-size: 0.75rem; font-weight: 700; flex-shrink: 0; }
    </style>
</head>
<body class="auth-body">

<div class="auth-wrapper">
    <div class="auth-shapes">
        <div class="shape shape-1"></div>
        <div class="shape shape-2"></div>
    </div>

    <div class="auth-card" style="max-width:520px;">
        <div class="auth-logo">
            <img src="<?= APP_URL ?>/assets/brand/logo/helmyx-horizontal-notag.svg" alt="Helmyx" style="height:36px;">
        </div>

        <!-- Step Indicator -->
        <div class="step-indicator">
            <div class="step active">
                <div class="step-num">1</div>
                <span>Scan QR Code</span>
            </div>
            <div class="step-connector"></div>
            <div class="step active">
                <div class="step-num">2</div>
                <span>Save Backup Codes</span>
            </div>
            <div class="step-connector"></div>
            <div class="step">
                <div class="step-num">3</div>
                <span>Verify Setup</span>
            </div>
        </div>

        <h1 class="auth-title" style="font-size:1.3rem;">Secure Your Account</h1>
        <p class="auth-subtitle">Set up two-factor authentication for added security</p>

        <?php if (!empty($_SESSION['flash'])): ?>
            <?php foreach ($_SESSION['flash'] as $type => $message): ?>
                <div class="alert alert-<?= htmlspecialchars($type) ?>" style="margin-bottom:16px;">
                    <?= htmlspecialchars($message) ?>
                </div>
            <?php endforeach; unset($_SESSION['flash']); ?>
        <?php endif; ?>

        <!-- Step 1: App Download Instructions -->
        <div style="margin-bottom:24px;">
            <div class="instruction-step">
                <div class="instruction-num">1</div>
                <div style="font-size:0.875rem;color:var(--text-secondary);">
                    Download <strong>Google Authenticator</strong> or <strong>Authy</strong> on your mobile device
                </div>
            </div>
            <div class="instruction-step">
                <div class="instruction-num">2</div>
                <div style="font-size:0.875rem;color:var(--text-secondary);">
                    Open the app and scan the QR code below, or enter the key manually
                </div>
            </div>
            <div class="instruction-step">
                <div class="instruction-num">3</div>
                <div style="font-size:0.875rem;color:var(--text-secondary);">
                    Enter the 6-digit code shown in the app to verify setup
                </div>
            </div>
        </div>

        <!-- QR Code -->
        <div style="text-align:center;margin-bottom:20px;">
            <div style="display:inline-block;padding:16px;background:white;border-radius:12px;border:2px solid var(--border-color);">
                <img src="<?= htmlspecialchars($qrCodeUrl ?? '') ?>" alt="QR Code for OTP setup" style="width:200px;height:200px;display:block;">
            </div>
            <p style="font-size:0.75rem;color:var(--text-muted);margin-top:8px;">Scan with your authenticator app</p>
        </div>

        <!-- Manual Entry -->
        <div style="margin-bottom:24px;">
            <p style="font-size:0.8rem;font-weight:500;color:var(--text-secondary);margin-bottom:8px;">Or enter this key manually:</p>
            <div class="secret-box" id="secretKey"><?= htmlspecialchars(chunk_split($secret ?? '', 4, ' ')) ?></div>
            <button type="button" onclick="copySecret()" style="display:block;margin:8px auto 0;font-size:0.75rem;color:var(--primary);background:none;border:none;cursor:pointer;font-weight:500;" id="copySecretBtn">
                📋 Copy key
            </button>
        </div>

        <!-- Backup Codes -->
        <div style="background:var(--hx-drifting-tint);border:1px solid rgba(232,163,23,0.35);border-radius:12px;padding:16px;margin-bottom:24px;">
            <div style="display:flex;align-items:center;gap:8px;margin-bottom:12px;">
                <svg width="18" height="18" fill="var(--hx-drifting)" viewBox="0 0 24 24"><path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/></svg>
                <strong style="font-size:0.875rem;color:var(--hx-drifting-text);">Save Your Backup Codes</strong>
            </div>
            <p style="font-size:0.78rem;color:var(--hx-drifting-text);margin-bottom:12px;">
                Store these codes safely. Each can be used once if you lose access to your authenticator app.
            </p>
            <div class="backup-grid" id="backupCodesGrid">
                <?php foreach ($backupCodes ?? [] as $code): ?>
                    <div class="backup-code"><?= htmlspecialchars($code) ?></div>
                <?php endforeach; ?>
            </div>
            <button type="button" onclick="copyBackupCodes()" style="display:block;margin:12px auto 0;font-size:0.75rem;color:var(--hx-drifting-text);background:none;border:1px solid rgba(232,163,23,0.5);border-radius:6px;padding:6px 16px;cursor:pointer;font-weight:500;">
                📋 Copy all backup codes
            </button>
        </div>

        <!-- Verification Form -->
        <form method="POST" action="<?= APP_URL ?>/otp/setup" id="otpSetupForm">
            <input type="hidden" name="csrf_token" value="<?= htmlspecialchars($_SESSION[CSRF_TOKEN_NAME] ?? '') ?>">

            <div class="form-group">
                <label class="form-label" for="otp_code" style="text-align:center;display:block;">
                    Enter the 6-digit code from your app to confirm setup
                </label>
                <input
                    type="text"
                    id="otp_code"
                    name="otp_code"
                    class="form-control"
                    placeholder="000000"
                    maxlength="6"
                    inputmode="numeric"
                    pattern="[0-9]{6}"
                    autocomplete="one-time-code"
                    style="text-align:center;font-size:1.5rem;font-weight:700;letter-spacing:8px;"
                    required
                >
            </div>

            <button type="submit" class="btn btn-primary w-full btn-lg" style="justify-content:center;">
                Enable Two-Factor Authentication
            </button>
        </form>

        <p style="text-align:center;margin-top:16px;">
            <a href="<?= APP_URL ?>/dashboard" style="font-size:0.8rem;color:var(--text-muted);text-decoration:none;">
                Skip for now (not recommended)
            </a>
        </p>
    </div>
</div>

<script>
function copySecret() {
    const key = '<?= $secret ?? '' ?>';
    navigator.clipboard.writeText(key).then(() => {
        const btn = document.getElementById('copySecretBtn');
        btn.textContent = '✅ Copied!';
        setTimeout(() => btn.textContent = '📋 Copy key', 2000);
    });
}
function copyBackupCodes() {
    const codes = [...document.querySelectorAll('.backup-code')].map(el => el.textContent.trim()).join('\n');
    navigator.clipboard.writeText(codes).then(() => alert('Backup codes copied to clipboard!'));
}
document.getElementById('otp_code').addEventListener('input', function() {
    this.value = this.value.replace(/\D/g, '').slice(0, 6);
    if (this.value.length === 6) {
        document.getElementById('otpSetupForm').submit();
    }
});
</script>
</body>
</html>
