<?php
error_reporting(E_ALL);
ini_set('display_errors', 1);

session_start();

// Redirect to login if no OTP session exists
if (!isset($_SESSION['otp']) || !isset($_SESSION['otp_user_id'])) {
    header("Location: login.php");
    exit;
}

$message = '';

if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $entered_otp = trim($_POST['otp']);

    // Check expiration
    if (time() > $_SESSION['otp_expires']) {
        $message = 'OTP has expired. Please login again.';
        // Clear OTP session
        unset($_SESSION['otp'], $_SESSION['otp_user_id'], $_SESSION['otp_expires']);
    } elseif ($entered_otp == $_SESSION['otp']) {
        // OTP is correct - mark user as logged in
        $_SESSION['user_id'] = $_SESSION['otp_user_id'];
        // Optionally fetch username & role from DB
        require_once __DIR__ . '/../config/db.php';
        $stmt = $pdo->prepare("SELECT username, role FROM users WHERE id = ?");
        $stmt->execute([$_SESSION['user_id']]);
        $user = $stmt->fetch(PDO::FETCH_ASSOC);

        $_SESSION['username'] = $user['username'] ?? 'User';
        $_SESSION['role'] = $user['role'] ?? 'user';

        // Clear OTP session variables
        unset($_SESSION['otp'], $_SESSION['otp_user_id'], $_SESSION['otp_expires']);

        // Redirect to dashboard
        header("Location: ../public/");
        exit;
    } else {
        $message = 'Invalid OTP. Please try again.';
    }
}
?>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>OTP Verification - Custora CRM</title>
<link rel="icon" href="../public/assets/img/custora_logo.png" type="image/png">
<style>
body {
    font-family: Arial, sans-serif;
    background: #f4f7fa;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    padding: 10px;
    box-sizing: border-box;
}
.otp-container {
    background: #fff;
    padding: 35px;
    width: 100%;
    max-width: 400px;
    border-radius: 10px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.1);
    text-align: center;
}
.otp-container h2 { margin-bottom: 20px; color: #005f8d; }
form { text-align: left; }
label { display: block; margin-bottom: 6px; font-weight: bold; color: #444; }
input[type="text"] {
    width: 100%;
    padding: 10px;
    margin-bottom: 18px;
    border: 1px solid #ccc;
    border-radius: 6px;
    outline: none;
    font-size: 14px;
}
input[type="text"]:focus { border-color: #005f8d; box-shadow: 0 0 5px rgba(0,95,141,0.3); }
button, .btn-link {
    width: 100%;
    padding: 12px;
    border: none;
    border-radius: 6px;
    font-size: 16px;
    cursor: pointer;
    margin-bottom: 15px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    transition: background 0.3s;
}
button { background: #005f8d; color: #fff; }
button:hover { background: #004466; }
.btn-link { background: #17a2b8; color: #fff; }
.btn-link:hover { background: #005f8d; }
.error {
    background: #f8d7da;
    color: #842029;
    padding: 10px;
    border-radius: 6px;
    margin-bottom: 15px;
    font-size: 14px;
    text-align: center;
}
img { width: 100%; max-width: 180px; height: auto; margin-bottom: 15px; }
/* Responsive Design */
@media (max-width: 500px) {
    .otp-container { padding: 25px 20px; }
    h2 { font-size: 20px; }
    button, .btn-link { font-size: 15px; padding: 10px; }
}
</style>
</head>
<body>
<div class="otp-container">
    <h1><img src="../public/assets/img/custora_logo.png" alt="Custora CRM"></h1>
    <h2>OTP Verification</h2>
    <p>Enter the OTP sent to your email to complete login.</p>

    <?php if ($message): ?>
        <p class="error"><?= htmlspecialchars($message) ?></p>
    <?php endif; ?>

    <form method="POST">
        <label>OTP:</label>
        <input type="text" name="otp" placeholder="Enter OTP" required>
        <button type="submit">Verify OTP</button>
        <a href="login.php" class="btn-link">Back to Login</a>
    </form>
</div>
</body>
</html>