<?php
declare(strict_types=1);

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

$id = filter_input(INPUT_GET, 'id', FILTER_VALIDATE_INT);
if (!$id) {
    header('Location: index.php');
    exit;
}

$pdo = getDbConnection();

$setStmt = $pdo->prepare(
    'SELECT id, title, description
     FROM flashcard_sets
     WHERE id = ?
     LIMIT 1'
);
$setStmt->execute([$id]);
$set = $setStmt->fetch(PDO::FETCH_ASSOC);

if (!$set) {
    header('Location: index.php');
    exit;
}

$wordStmt = $pdo->prepare(
    'SELECT
        w.word,
        w.meaning_vi,
        w.phonetic,
        w.image_path,
        w.audio_us_path
     FROM flashcard_set_words fsw
     INNER JOIN words w ON w.id = fsw.word_id
     WHERE fsw.set_id = ?
     ORDER BY fsw.order_no ASC, fsw.id ASC'
);
$wordStmt->execute([$id]);
$words = $wordStmt->fetchAll(PDO::FETCH_ASSOC);

$cards = array_map(
    static fn(array $word): array => [
        'word' => (string)$word['word'],
        'meaning' => (string)($word['meaning_vi'] ?? ''),
        'ipa' => (string)($word['phonetic'] ?? ''),
        'image' => !empty($word['image_path']) ? es_url((string)$word['image_path']) : '',
        'audio' => !empty($word['audio_us_path']) ? es_url((string)$word['audio_us_path']) : '',
    ],
    $words
);
?>
<!doctype html>
<html lang="vi">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
    <meta name="theme-color" content="#edf4ff">
    <title><?= htmlspecialchars((string)$set['title'], ENT_QUOTES, 'UTF-8') ?> | Listen &amp; Repeat</title>
    <link rel="stylesheet" href="../assets/css/listen-repeat.css?v=1">
</head>
<body class="lr-player-body">
<main class="lr-player-shell">
    <header class="lr-player-header">
        <a href="index.php" class="lr-player-back" aria-label="Back">←</a>

        <div>
            <span>Listen &amp; Repeat</span>
            <h1><?= htmlspecialchars((string)$set['title'], ENT_QUOTES, 'UTF-8') ?></h1>
        </div>

        <span class="lr-player-header-space"></span>
    </header>

    <?php if (!$cards): ?>
        <section class="lr-player-empty">
            <div>🔊</div>
            <h2>This set has no words</h2>
            <p>Add words to the Flashcard Set before starting practice.</p>
            <a href="../flashcards/edit.php?id=<?= (int)$id ?>">Add Words</a>
        </section>
    <?php else: ?>
        <section
            class="lr-player"
            id="listenRepeatPlayer"
            data-cards='<?= htmlspecialchars(json_encode($cards, JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES), ENT_QUOTES, 'UTF-8') ?>'
        >
            <div class="lr-progress-row">
                <span id="lrProgressLabel">1 / <?= count($cards) ?></span>
                <div class="lr-progress-track">
                    <i id="lrProgressBar"></i>
                </div>
            </div>

            <div class="lr-practice-card">
                <button class="lr-image-button" id="lrImageButton" type="button" aria-label="Listen">
                    <img id="lrImage" alt="" hidden>
                </button>

                <div class="lr-answer" id="lrAnswer" hidden>
                    <h2 id="lrWord"></h2>
                    <div id="lrIpa"></div>
                    <p id="lrMeaning"></p>
                </div>
            </div>

            <button class="lr-listen-button" id="lrListenButton" type="button">
                <span>🔊</span>
                Listen
            </button>

            <button class="lr-show-button" id="lrShowButton" type="button">
                Show Answer
            </button>

            <div class="lr-player-controls">
                <button id="lrPreviousButton" type="button">← Previous</button>
                <button id="lrNextButton" type="button">Next →</button>
            </div>
        </section>
    <?php endif; ?>
</main>

<?php if ($cards): ?>
<script src="../assets/js/listen-repeat.js?v=1"></script>
<?php endif; ?>
</body>
</html>
