<?php
// momentum_timeline.php
// RS Learning Lab – Learning Momentum Timeline (Visual History)

session_start();

/* ===============================
   DB CONFIG
================================ */
$db_host = "localhost";
$db_name = "rs_lab";
$db_user = "root";
$db_pass = "";

try {
    $pdo = new PDO(
        "mysql:host=$db_host;dbname=$db_name;charset=utf8mb4",
        $db_user,
        $db_pass,
        [
            PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION,
            PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC
        ]
    );
} catch (PDOException $e) {
    die("DB connection failed");
}

/* ===============================
   INPUT
================================ */
$roll_no = $_GET['roll'] ?? $_SESSION['roll'] ?? null;
$name    = $_GET['name'] ?? $_SESSION['name'] ?? "Student";

if (!$roll_no) {
    die("Student not specified");
}

/* ===============================
   TABLE ASSUMPTION (RUN ONCE)
================================
learning_momentum_log
- id
- roll_no
- action
- momentum_score
- momentum_state
- created_at
================================ */

/* ===============================
   FETCH MOMENTUM HISTORY
================================ */
$stmt = $pdo->prepare("
    SELECT action, momentum_score, momentum_state, created_at
    FROM learning_momentum_log
    WHERE roll_no = :roll
    ORDER BY created_at ASC
");
$stmt->execute([':roll' => $roll_no]);
$timeline = $stmt->fetchAll();

if (!$timeline) {
    $no_data = true;
} else {
    $no_data = false;
}
?>

<!DOCTYPE html>
<html>
<head>
<title>Momentum Timeline – RS Learning Lab</title>
<style>
body {
    background:#0b1020;
    color:#e5e7eb;
    font-family:Arial;
    padding:30px;
}
.card {
    max-width:900px;
    margin:auto;
    background:#111827;
    padding:25px;
    border-radius:14px;
}
h1 {
    color:#38bdf8;
}
.timeline {
    margin-top:30px;
    border-left:3px solid #1f2937;
    padding-left:20px;
}
.event {
    margin-bottom:25px;
    position:relative;
}
.event::before {
    content:'';
    position:absolute;
    left:-11px;
    top:5px;
    width:14px;
    height:14px;
    background:#38bdf8;
    border-radius:50%;
}
.state {
    display:inline-block;
    padding:4px 10px;
    border-radius:20px;
    font-size:12px;
    margin-left:10px;
}
.Building { background:#1e293b; color:#fde68a; }
.Stabilizing { background:#1e3a8a; color:#bfdbfe; }
.Applying { background:#064e3b; color:#6ee7b7; }
.Reset { background:#450a0a; color:#fca5a5; }

.score-bar {
    margin-top:6px;
    height:8px;
    background:#020617;
    border-radius:6px;
    overflow:hidden;
}
.score-fill {
    height:100%;
    background:#22c55e;
}
.meta {
    font-size:13px;
    color:#94a3b8;
}
.footer-note {
    margin-top:30px;
    font-size:13px;
    color:#94a3b8;
}
</style>
</head>

<body>

<div class="card">
<h1>Learning Momentum Timeline</h1>
<p>
<strong><?php echo htmlspecialchars($name); ?></strong> (Roll No: <?php echo htmlspecialchars($roll_no); ?>)
</p>

<p class="meta">
This timeline shows how learning momentum evolved across practice, reinforcement, and application stages.
</p>

<?php if ($no_data): ?>

<p>No momentum data available yet. Start practicing to build your learning journey.</p>

<?php else: ?>

<div class="timeline">

<?php foreach ($timeline as $event): 
    $width = intval($event['momentum_score']);
?>
    <div class="event">
        <strong><?php echo ucfirst(str_replace("_"," ",$event['action'])); ?></strong>
        <span class="state <?php echo $event['momentum_state']; ?>">
            <?php echo $event['momentum_state']; ?>
        </span>

        <div class="score-bar">
            <div class="score-fill" style="width: <?php echo $width; ?>%;"></div>
        </div>

        <div class="meta">
            Momentum Score: <?php echo $event['momentum_score']; ?> ·
            <?php echo date("d M Y, h:i A", strtotime($event['created_at'])); ?>
        </div>
    </div>
<?php endforeach; ?>

</div>

<?php endif; ?>

<div class="footer-note">
Learning Momentum reflects persistence and recovery, not marks or speed.<br>
© 2026 RS Learning Lab
</div>

</div>

</body>
</html>
