<?php
/**
 * OTP Verification View — Enter 6-digit code during login
 */
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Verify Identity — 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">
</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:440px;">
        <div class="auth-logo">
            <img src="<?= APP_URL ?>/assets/brand/logo/helmyx-horizontal-notag.svg" alt="Helmyx" style="height:36px;">
        </div>

        <div style="text-align:center;margin-bottom:28px;">
            <div style="width:60px;height:60px;background:linear-gradient(135deg,var(--primary),var(--primary-light));border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 16px;">
                <svg width="28" height="28" fill="none" stroke="white" stroke-width="2" viewBox="0 0 24 24">
                    <rect x="5" y="11" width="14" height="10" rx="2"/>
                    <path d="M8 11V7a4 4 0 0 1 8 0v4"/>
                    <circle cx="12" cy="16" r="1" fill="white" stroke="none"/>
                </svg>
            </div>
            <h1 style="font-size:1.4rem;font-weight:700;color:var(--text-primary);margin-bottom:8px;">Two-Factor Verification</h1>
            <p style="font-size:0.875rem;color:var(--text-secondary);">
                Enter the 6-digit code from your authenticator app
            </p>
        </div>

        <?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; ?>

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

            <!-- 6 Individual OTP Input Boxes -->
            <div class="otp-inputs" id="otpInputGroup">
                <input type="text" class="otp-input" maxlength="1" inputmode="numeric" pattern="[0-9]" autocomplete="off" id="otp_0">
                <input type="text" class="otp-input" maxlength="1" inputmode="numeric" pattern="[0-9]" autocomplete="off" id="otp_1">
                <input type="text" class="otp-input" maxlength="1" inputmode="numeric" pattern="[0-9]" autocomplete="off" id="otp_2">
                <input type="text" class="otp-input" maxlength="1" inputmode="numeric" pattern="[0-9]" autocomplete="off" id="otp_3">
                <input type="text" class="otp-input" maxlength="1" inputmode="numeric" pattern="[0-9]" autocomplete="off" id="otp_4">
                <input type="text" class="otp-input" maxlength="1" inputmode="numeric" pattern="[0-9]" autocomplete="off" id="otp_5">
            </div>
            <input type="hidden" name="otp_code" id="otpHidden">

            <button type="submit" class="btn btn-primary w-full btn-lg" id="verifyBtn" style="justify-content:center;margin-top:8px;" disabled>
                <span id="verifyBtnText">Verify Code</span>
                <span id="verifySpinner" class="spinner spinner-sm" style="display:none;border-color:rgba(255,255,255,0.3);border-top-color:white;"></span>
            </button>
        </form>

        <!-- Divider -->
        <div style="display:flex;align-items:center;gap:12px;margin:20px 0;color:var(--text-muted);font-size:0.8rem;">
            <div style="flex:1;height:1px;background:var(--border-color);"></div>
            <span>or use a backup code</span>
            <div style="flex:1;height:1px;background:var(--border-color);"></div>
        </div>

        <!-- Backup Code Form -->
        <form method="POST" action="<?= APP_URL ?>/otp/verify" id="backupForm" style="display:none;">
            <input type="hidden" name="csrf_token" value="<?= htmlspecialchars($_SESSION[CSRF_TOKEN_NAME] ?? '') ?>">
            <div class="form-group">
                <label class="form-label" for="backup_code">Backup Code</label>
                <input
                    type="text"
                    id="backup_code"
                    name="backup_code"
                    class="form-control"
                    placeholder="e.g. A1B2C3D4"
                    maxlength="8"
                    style="text-transform:uppercase;letter-spacing:3px;text-align:center;"
                >
            </div>
            <button type="submit" class="btn btn-outline-primary w-full" style="justify-content:center;">
                Use Backup Code
            </button>
        </form>

        <div style="text-align:center;margin-top:16px;">
            <button type="button" onclick="toggleBackupForm()" id="backupToggle" style="background:none;border:none;cursor:pointer;font-size:0.8rem;color:var(--primary);text-decoration:underline;font-weight:500;">
                Use a backup code instead
            </button>
        </div>

        <div style="text-align:center;margin-top:16px;">
            <a href="<?= APP_URL ?>/logout" style="font-size:0.8rem;color:var(--text-muted);text-decoration:none;">
                ← Back to login
            </a>
        </div>
    </div>
</div>

<script src="<?= APP_URL ?>/assets/js/otp.js"></script>
<script>
let backupVisible = false;
function toggleBackupForm() {
    backupVisible = !backupVisible;
    document.getElementById('backupForm').style.display = backupVisible ? 'block' : 'none';
    document.getElementById('backupToggle').textContent = backupVisible
        ? 'Use authenticator app instead'
        : 'Use a backup code instead';
}

document.getElementById('otpForm').addEventListener('submit', function(e) {
    const code = [...document.querySelectorAll('.otp-input')].map(i => i.value).join('');
    document.getElementById('otpHidden').value = code;
    if (code.length !== 6) { e.preventDefault(); return; }
    document.getElementById('verifyBtnText').textContent = 'Verifying...';
    document.getElementById('verifySpinner').style.display = 'inline-block';
    document.getElementById('verifyBtn').disabled = true;
});
</script>
</body>
</html>
