<?php
declare(strict_types=1);

/*
|--------------------------------------------------------------------------
| Vocabulary Page
|--------------------------------------------------------------------------
*/

require_once __DIR__ . '/../includes/config.php';
require_once __DIR__ . '/../includes/db.php';
require_once __DIR__ . '/../includes/functions.php';
require_once __DIR__ . '/../includes/student-auth.php';

$pdo = db();
requireStudent();

$student = currentStudent($pdo);
$courseId = (int)($_GET['course_id'] ?? 0);

if ($courseId <= 0) {
    redirectTo('student/my-courses.php');
}

$stmt = $pdo->prepare("
    SELECT c.*
    FROM core_courses c
    INNER JOIN core_course_students cs
        ON cs.course_id = c.id
    WHERE c.id = ?
      AND cs.student_id = ?
      AND cs.status = 'active'
    LIMIT 1
");

$stmt->execute([
    $courseId,
    (int)$student['id']
]);

$course = $stmt->fetch(PDO::FETCH_ASSOC);

if (!$course) {
    redirectTo('student/my-courses.php');
}

$vocabulary = [];

if (tableExists($pdo, 'core_vocabulary')) {

    $stmt = $pdo->prepare("
    SELECT *
    FROM core_vocabulary
    WHERE course_id = ?
    ORDER BY id DESC
");

    $stmt->execute([$courseId]);
    $vocabulary = $stmt->fetchAll();
}

?>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Vocabulary</title>

<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800;900&display=swap" rel="stylesheet">

<style>
*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    font-family:'Inter',sans-serif;
    background:#f3f6fb;
    color:#0f172a;
}

.page{
    padding:35px;
}

.topbar{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:30px;
}

.page-title{
    font-size:42px;
    font-weight:900;
}

.back-btn{
    text-decoration:none;
    background:#eff6ff;
    color:#2563eb;
    padding:14px 20px;
    border-radius:18px;
    font-weight:800;
}

.hero{
    background:linear-gradient(135deg,#0f172a,#1d4ed8);
    color:#fff;
    border-radius:34px;
    padding:42px;
    margin-bottom:30px;
    box-shadow:0 35px 70px rgba(37,99,235,0.18);
}

.hero h1{
    font-size:46px;
    margin-bottom:16px;
    font-weight:900;
}

.hero p{
    color:#dbeafe;
    line-height:2;
}

.grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
    gap:22px;
}

.word-card{
    background:#fff;
    border-radius:28px;
    padding:28px;
    border:1px solid #e2e8f0;
    box-shadow:0 15px 40px rgba(15,23,42,0.05);
}

.word{
    font-size:32px;
    font-weight:900;
    color:#2563eb;
    margin-bottom:12px;
}

.meaning{
    color:#0f172a;
    font-size:18px;
    font-weight:700;
    margin-bottom:18px;
}

.example{
    color:#64748b;
    line-height:1.9;
    background:#f8fafc;
    padding:18px;
    border-radius:18px;
}

.badge{
    display:inline-block;
    margin-top:18px;
    background:#eff6ff;
    color:#2563eb;
    padding:10px 16px;
    border-radius:999px;
    font-size:12px;
    font-weight:900;
}

.empty{
    background:#fff;
    border-radius:30px;
    padding:70px;
    text-align:center;
    border:1px dashed #cbd5e1;
}

.empty h2{
    font-size:34px;
    margin-bottom:18px;
}

.empty p{
    color:#64748b;
    line-height:1.9;
}

@media(max-width:700px){
    .page{
        padding:20px;
    }

    .page-title{
        font-size:32px;
    }

    .hero h1{
        font-size:34px;
    }
}
</style>
</head>

<body>

<div class="page">

    <div class="topbar">
        <h1 class="page-title">Vocabulary</h1>

        <a href="my-courses.php" class="back-btn">
          ← My Courses
        </a>
    </div>

  <div class="hero">

    <h1>

        Cognitive Vocabulary System

    </h1>

    <p>

        Review and reinforce the vocabulary of
        <?php echo e((string)$course['title']); ?>.
        Train your memory,
        recall speed,
        comprehension,
        and vocabulary retention through the SMI Cognitive System.

    </p>

</div>
    <?php if($vocabulary): ?>

        <div class="grid">

            <?php foreach($vocabulary as $word): ?>

                <div class="word-card">

                    <div class="word">
                        <?php echo e($word['word'] ?? '-'); ?>
                    </div>

                    <div class="meaning">
                        <?php echo e($word['meaning'] ?? '-'); ?>
                    </div>

                    <div class="example">
                        <?php echo e($word['example_sentence'] ?? 'No example sentence available.'); ?>
                    </div>

                    <span class="badge">
                        <?php echo e(ucfirst($word['level'] ?? 'general')); ?>
                    </span>

                </div>

            <?php endforeach; ?>

        </div>

    <?php else: ?>

        <div class="empty">
            <h2>No Vocabulary Yet</h2>

            <p>
                Vocabulary items will appear here after your teacher adds them
                to the course.
            </p>
        </div>

    <?php endif; ?>

</div>

</body>
</html>