<?php
session_start();

// === INCLUDES ===
require_once 'includes/functions.php';

// === VARIABLE INITIALIZATION ===
$msg = '';
$status = '';
$userEmail = $_SESSION['user'] ?? 'your@email.com';
$demoOtp = $_SESSION['otp_hint'] ?? null;
$resent = false;
$cooldown = 60;
$now = time();
$lastResend = $_SESSION['otp_last_resend'] ?? 0;
$hasOtp = isset($_SESSION['otp']) || isset($_SESSION['otp_hint']);
if ($lastResend === 0 && $hasOtp) {
    $_SESSION['otp_last_resend'] = $now;
    $lastResend = $now;
}
$remaining = max(0, $cooldown - ($now - $lastResend));

// Resend OTP logic (demo or configured send)
if (isset($_GET['resend']) && !empty($_SESSION['user'])) {
    if ($remaining > 0) {
        $msg = "Please wait {$remaining}s before resending.";
        $status = 'error';
    } else {
        $user = $_SESSION['user'];
        $otp = rand(100000, 999999);
        $_SESSION['otp'] = $otp;
        $_SESSION['otp_last_resend'] = $now;
        $remaining = $cooldown;
        if ($demoOtp !== null) {
            $_SESSION['otp_hint'] = $otp;
            $demoOtp = $otp;
        }
        $resent = true;
        $msg = "OTP resent successfully.";
        $status = 'success';
    }
}

// === FORM PROCESSING ===
if (isset($_POST['verify'])) {
    $user_otp = trim($_POST['otp'] ?? '');
    $real_otp = $_SESSION['otp'] ?? null;

    if ($real_otp !== null && $user_otp === (string)$real_otp) {
        $_SESSION['authenticated'] = true;
        unset($_SESSION['otp_hint']);
        header("Location: dashboard.php");
        exit();
    } else {
        $msg = "Invalid OTP. Please try again.";
        $status = 'error';
    }
}

// === HTML OUTPUT ===
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
<base href="<?php echo billing_escape(billing_base_href()); ?>">
    <title>Verify OTP</title>
    <link rel="stylesheet" href="signin.css">
    <link rel="stylesheet" href="assets/fontawesome/css/all.min.css">
</head>
<body>

<div class="otp-banner"><i class="fa-solid fa-check"></i> OTP sent to <?php echo htmlspecialchars(mask_email($userEmail)); ?><?php echo $resent ? ' (resent)' : ''; ?></div>

<main class="auth-shell">
    <div class="auth-card" id="authCard">
        <section class="signin-pane">
            <div class="top-row">
                <img src="images/zoho-logo.svg" alt="Zoho" class="zoho-logo">
                <button type="button" class="smart-btn">
                    <i class="fa-solid fa-qrcode"></i>
                    <span>Try smart sign-in</span>
                </button>
            </div>

            <h1>Sign in</h1>
            <p class="subtitle">to access Zoho Payroll</p>

            <div class="email-chip">
                <span><?php echo htmlspecialchars($userEmail); ?></span>
                <a href="signin.php">Change</a>
            </div>

            <form action="" method="POST" novalidate class="signin-form">
                <label for="otp" class="sr-only">Enter OTP</label>
                <div class="otp-input-row">
                    <input type="text" id="otp" name="otp" placeholder="Enter OTP" maxlength="6" required>
                    <?php if ($remaining > 0): ?>
                        <span class="resend disabled" aria-disabled="true">Resend in <?php echo (int)$remaining; ?>s</span>
                    <?php else: ?>
                        <a href="otp.php?resend=1" class="resend">Resend OTP</a>
                    <?php endif; ?>
                </div>
                <button type="submit" name="verify" class="primary-btn verify-btn">Verify</button>
            </form>

            <?php if (!empty($msg)): ?>
                <div class="status <?php echo $status; ?>"><?php echo htmlspecialchars($msg); ?></div>
            <?php elseif ($demoOtp): ?>
                <div class="status success">Demo OTP: <?php echo htmlspecialchars($demoOtp); ?></div>
            <?php endif; ?>

            <div class="social-signin otp-social">
                <p>Sign in using</p>
                <div class="social-icons">
                    <button type="button" class="icon-btn linkedin"><i class="fa-brands fa-linkedin-in"></i></button>
                </div>
            </div>

            <div class="inline-note">
                <i class="fa-solid fa-lightbulb"></i>
                <div>You have not set a password for this account. <a href="#" class="inline-note-link">Set password now.</a></div>
            </div>
        </section>

        <section class="promo-pane">
            <img src="images/passwordless_signin.svg" alt="Passwordless sign-in illustration" class="promo-illustration">
            <h3>MFA for all accounts</h3>
            <p>Secure online accounts with OneAuth 2FA. Back up OTP secrets and never lose access to your accounts.</p>
            <button type="button" class="secondary-btn">Learn more</button>
            <div class="dot-indicator">
                <span class="dot active"></span>
                <span class="dot"></span>
            </div>
        </section>
    </div>
</main>

</body>
</html>



