<?php
declare(strict_types=1);

require __DIR__ . '/../partials/auth.php';
require_once __DIR__ . '/../../config/database.php';

$pdo = getDbConnection();

$pageTitle = 'Game Library';
$pageSubtitle = 'Browse available game templates. Activities are assigned later in Lesson Planner.';
$activeTeacherNav = 'games';

$setCount = (int)$pdo->query(
    "SELECT COUNT(*) FROM flashcard_sets"
)->fetchColumn();

$playableSetCount = (int)$pdo->query(
    "SELECT COUNT(*) FROM (
        SELECT fs.id
        FROM flashcard_sets fs
        INNER JOIN flashcard_set_words fsw ON fsw.set_id = fs.id
        GROUP BY fs.id
        HAVING COUNT(fsw.id) >= 2
    ) playable_sets"
)->fetchColumn();

$wordCount = (int)$pdo->query(
    "SELECT COUNT(*) FROM words WHERE status = 'active'"
)->fetchColumn();

$templates = [
    [
        'key' => 'memory',
        'icon' => '🧠',
        'title' => 'Memory',
        'description' => 'Find matching picture and word pairs.',
        'status' => 'Ready',
        'href' => '../memory/',
        'class' => 'is-ready',
        'recommended' => '⭐ Most popular',
        'grades' => 'Grades 1–5',
        'duration' => '3–5 minutes',
        'words' => '6, 8 or 10 words',
    ],
    [
        'key' => 'matching',
        'icon' => '🧩',
        'title' => 'Matching',
        'description' => 'Match each picture with the correct word.',
        'status' => 'Ready',
        'href' => '../matching/',
        'class' => 'is-ready',
        'recommended' => '👦 Best for primary',
        'grades' => 'Grades 1–5',
        'duration' => '3–5 minutes',
        'words' => '6, 8 or 10 words',
    ],
    [
        'key' => 'quiz',
        'icon' => '🎯',
        'title' => 'Quiz',
        'description' => 'Choose the correct answer and review vocabulary.',
        'status' => 'Ready',
        'href' => '../quiz/',
        'class' => 'is-ready',
        'recommended' => '📝 Assessment',
        'grades' => 'Grades 2–5',
        'duration' => '5–8 minutes',
        'words' => '5, 10 or All words',
    ],
    [
        'key' => 'word-search',
        'icon' => '🔎',
        'title' => 'Word Search',
        'description' => 'Find hidden vocabulary in a letter grid.',
        'status' => 'Coming next',
        'href' => '#',
        'class' => 'is-coming',
        'recommended' => 'Vocabulary review',
        'grades' => 'Grades 2–5',
        'duration' => '5–8 minutes',
        'words' => '8, 10 or 12 words',
    ],
    [
        'key' => 'unscramble',
        'icon' => '🔤',
        'title' => 'Unscramble',
        'description' => 'Put letters in the correct order to make a word.',
        'status' => 'Coming soon',
        'href' => '#',
        'class' => 'is-coming',
        'recommended' => 'Spelling practice',
        'grades' => 'Grades 2–5',
        'duration' => '3–5 minutes',
        'words' => '6, 8 or 10 words',
    ],
    [
        'key' => 'spin-wheel',
        'icon' => '🎡',
        'title' => 'Spin Wheel',
        'description' => 'Spin, reveal a word, then ask students to say it.',
        'status' => 'Coming soon',
        'href' => '#',
        'class' => 'is-coming',
        'recommended' => 'Whole-class activity',
        'grades' => 'Grades 1–5',
        'duration' => '3–10 minutes',
        'words' => '8, 10 or All words',
    ],
];

ob_start();
?>
<style>
.game-studio-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 24px;
}

.game-studio-head h2 {
    margin: 5px 0 7px;
}

.game-studio-head p {
    max-width: 720px;
    margin: 0;
    color: var(--muted);
    line-height: 1.55;
}

.game-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 28px;
}

.game-summary-card {
    padding: 17px 18px;
    border: 1px solid var(--border);
    border-radius: 17px;
    background: var(--surface);
}

.game-summary-card span {
    display: block;
    margin-bottom: 7px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
}

.game-summary-card strong {
    color: var(--text);
    font-size: 27px;
    line-height: 1;
}

.game-studio-section-head {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 16px;
    margin: 0 0 15px;
}

.game-studio-section-head h3 {
    margin: 0 0 5px;
    font-size: 19px;
}

.game-studio-section-head p {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
}

.game-template-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.game-template-card {
    position: relative;
    display: flex;
    min-height: 330px;
    flex-direction: column;
    padding: 20px;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 20px;
    background: var(--surface);
    transition:
        transform .2s ease,
        box-shadow .2s ease,
        border-color .2s ease;
}

.game-template-card.is-ready {
    cursor: default;
}

.game-template-card.is-ready:hover {
    transform: translateY(-4px);
    border-color: #93c5fd;
    box-shadow: 0 18px 38px rgba(37, 99, 235, .13);
}

.game-template-card.is-coming {
    border-color: #e2e8f0;
    background: #f8fafc;
    opacity: .78;
}

.game-template-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 14px;
}

.game-template-icon {
    display: grid;
    width: 58px;
    height: 58px;
    flex: 0 0 58px;
    place-items: center;
    border-radius: 17px;
    background: #eef4ff;
    font-size: 29px;
    transition: transform .2s ease;
}

.game-template-card.is-ready:hover .game-template-icon {
    transform: scale(1.06);
}

.game-template-card:nth-child(2) .game-template-icon {
    background: #ecfdf5;
}

.game-template-card:nth-child(3) .game-template-icon {
    background: #fff7ed;
}

.game-template-card:nth-child(4) .game-template-icon,
.game-template-card:nth-child(5) .game-template-icon,
.game-template-card:nth-child(6) .game-template-icon {
    background: #f1f5f9;
}

.game-template-status {
    display: inline-flex;
    align-items: center;
    min-height: 27px;
    padding: 5px 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    white-space: nowrap;
}

.game-template-card.is-ready .game-template-status {
    color: #15803d;
    background: #dcfce7;
}

.game-template-card.is-coming .game-template-status {
    color: #64748b;
    background: #e2e8f0;
}

.game-template-card h4 {
    margin: 17px 0 7px;
    font-size: 20px;
}

.game-template-card > p {
    min-height: 44px;
    margin: 0;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.6;
}

.game-template-recommendation {
    display: inline-flex;
    width: fit-content;
    max-width: 100%;
    align-items: center;
    gap: 6px;
    margin: 15px 0 17px;
    padding: 7px 10px;
    border-radius: 999px;
    color: #334155;
    background: #f8fafc;
    font-size: 12px;
    font-weight: 750;
}

.game-template-card:nth-child(1) .game-template-recommendation {
    color: #92400e;
    background: #fffbeb;
}

.game-template-card:nth-child(2) .game-template-recommendation {
    color: #166534;
    background: #f0fdf4;
}

.game-template-card:nth-child(3) .game-template-recommendation {
    color: #9a3412;
    background: #fff7ed;
}


.game-template-details {
    display: grid;
    gap: 7px;
    margin: 13px 0 16px;
}

.game-template-detail {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #475569;
    font-size: 12px;
    font-weight: 650;
}

.game-template-detail span:first-child {
    width: 18px;
    text-align: center;
}

.game-template-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: auto;
}

.game-template-actions .button {
    width: 100%;
    min-height: 44px;
    justify-content: center;
    border-radius: 13px;
}

.game-coming-button {
    display: inline-flex;
    width: 100%;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    padding: 0 14px;
    border: 1px solid var(--border);
    border-radius: 13px;
    color: #94a3b8;
    background: #f8fafc;
    font-size: 13px;
    font-weight: 800;
}

.game-studio-note {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    margin-top: 20px;
    padding: 16px 17px;
    border: 1px solid #bfdbfe;
    border-radius: 16px;
    color: #1e3a8a;
    background: #eff6ff;
}

.game-studio-note strong {
    display: block;
    margin-bottom: 4px;
}

.game-studio-note p {
    margin: 0;
    font-size: 13px;
    line-height: 1.55;
}

@media (max-width: 980px) {
    .game-template-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 700px) {
    .game-studio-head {
        flex-direction: column;
    }

    .game-summary {
        grid-template-columns: 1fr;
        margin-bottom: 22px;
    }

    .game-template-grid {
        grid-template-columns: 1fr;
    }

    .game-template-card {
        min-height: 310px;
    }
}
</style>

<div class="game-studio-head">
    <div>
        <span class="section-kicker">Learning Activities</span>
        <h2>Game Library</h2>
        <p>Choose an activity template. Each game reuses words, images, meanings and audio from your existing Flashcard Sets.</p>
    </div>

    <a class="button button-secondary" href="../flashcards/">
        Manage Flashcards
    </a>
</div>

<div class="game-summary" aria-label="Game Library summary">
    <div class="game-summary-card">
        <span>Flashcard Sets</span>
        <strong><?= $setCount ?></strong>
    </div>
    <div class="game-summary-card">
        <span>Playable Sets</span>
        <strong><?= $playableSetCount ?></strong>
    </div>
    <div class="game-summary-card">
        <span>Active Words</span>
        <strong><?= $wordCount ?></strong>
    </div>
</div>

<div class="game-studio-section-head">
    <div>
        <h3>Game Templates</h3>
        <p>Choose a template, then select a Flashcard Set and one of the ready-made word options.</p>
    </div>
</div>

<div class="game-template-grid">
    <?php foreach ($templates as $template): ?>
        <article class="game-template-card <?= htmlspecialchars($template['class'], ENT_QUOTES, 'UTF-8') ?>">
            <div class="game-template-top">
                <span class="game-template-icon" aria-hidden="true">
                    <?= $template['icon'] ?>
                </span>
                <span class="game-template-status">
                    <?= htmlspecialchars($template['status'], ENT_QUOTES, 'UTF-8') ?>
                </span>
            </div>

            <h4><?= htmlspecialchars($template['title'], ENT_QUOTES, 'UTF-8') ?></h4>
            <p><?= htmlspecialchars($template['description'], ENT_QUOTES, 'UTF-8') ?></p>

            <div class="game-template-recommendation">
                <span>✓</span>
                <span><?= htmlspecialchars($template['recommended'], ENT_QUOTES, 'UTF-8') ?></span>
            </div>

            <div class="game-template-details">
                <div class="game-template-detail">
                    <span>👥</span>
                    <span><?= htmlspecialchars($template['grades'], ENT_QUOTES, 'UTF-8') ?></span>
                </div>
                <div class="game-template-detail">
                    <span>⏱</span>
                    <span><?= htmlspecialchars($template['duration'], ENT_QUOTES, 'UTF-8') ?></span>
                </div>
                <div class="game-template-detail">
                    <span>🔤</span>
                    <span><?= htmlspecialchars($template['words'], ENT_QUOTES, 'UTF-8') ?></span>
                </div>
            </div>

            <div class="game-template-actions">
                <?php if ($template['class'] === 'is-ready'): ?>
                    <a class="button button-primary" href="<?= htmlspecialchars($template['href'], ENT_QUOTES, 'UTF-8') ?>">
                        Preview
                    </a>
                <?php else: ?>
                    <span class="game-coming-button">Coming Soon</span>
                <?php endif; ?>
            </div>
        </article>
    <?php endforeach; ?>
</div>

<div class="game-studio-note">
    <span aria-hidden="true">💡</span>
    <div>
        <strong>EnglishSpeak principle</strong>
        <p>Word Library is the single source of truth. Game templates only read Flashcard Sets, so teachers prepare content once and reuse it across every activity.</p>
    </div>
</div>

<?php
$content = ob_get_clean();
require __DIR__ . '/../layouts/app.php';
