"use strict";

const DATA = window.JPLEARN_DATA;
const appEl = document.getElementById("app");
const toastEl = document.getElementById("toast");
const DEVICE_KEY = "jplearn.deviceId.v1";
const STATE_KEY = "jplearn.state.v1";

const LESSON_MAP = new Map(DATA.lessons.map((lesson) => [lesson.id, lesson]));
const KANJI_MAP = new Map(DATA.kanji.map((entry, index) => [index, entry]));

let route = "dashboard";
let routeParam = null;
let kanaScript = "hiragana";
let kanaMode = "glyph-to-romaji";
let kanaQuestion = null;
let kanaAnswered = false;
let selectedKanjiIndex = 0;
let reviewQueue = [];
let reviewIndex = 0;
let reviewRevealed = false;
let speakingIndex = 0;
let mediaRecorder = null;
let mediaChunks = [];
let recordedAudioUrl = null;
let recognition = null;
let saveTimer = null;

function createDeviceId() {
  if (window.crypto && typeof window.crypto.randomUUID === "function") return window.crypto.randomUUID();
  const bytes = new Uint8Array(24);
  window.crypto.getRandomValues(bytes);
  return [...bytes].map((byte) => byte.toString(16).padStart(2, "0")).join("");
}

function getDeviceId() {
  let id = localStorage.getItem(DEVICE_KEY);
  if (!id || !/^[A-Za-z0-9_-]{12,128}$/.test(id)) {
    id = createDeviceId();
    localStorage.setItem(DEVICE_KEY, id);
  }
  return id;
}
const DEVICE_ID = getDeviceId();

function defaultState() {
  return {
    version: 1,
    xp: 0,
    completedLessons: {},
    exerciseResults: {},
    srs: {},
    speakingLog: [],
    speakingBest: {},
    badges: [],
    studyDays: [],
    activityLog: [],
    kanaCorrect: 0,
    reviewCount: 0,
    updatedAt: 0
  };
}

function loadLocalState() {
  try {
    const parsed = JSON.parse(localStorage.getItem(STATE_KEY) || "null");
    if (!parsed || typeof parsed !== "object") return defaultState();
    return { ...defaultState(), ...parsed };
  } catch {
    return defaultState();
  }
}

let state = loadLocalState();

function persistLocal() {
  localStorage.setItem(STATE_KEY, JSON.stringify(state));
}

function saveState() {
  state.updatedAt = Date.now();
  persistLocal();
  window.clearTimeout(saveTimer);
  saveTimer = window.setTimeout(async () => {
    try {
      await fetch("/api/state", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ device: DEVICE_ID, state })
      });
    } catch {
      // The local mirror remains available when the network is offline.
    }
  }, 350);
}

async function loadRemoteState() {
  try {
    const response = await fetch(`/api/state?device=${encodeURIComponent(DEVICE_ID)}`, { headers: { Accept: "application/json" } });
    if (!response.ok) return;
    const payload = await response.json();
    if (payload?.state && Number(payload.state.updatedAt || 0) >= Number(state.updatedAt || 0)) {
      state = { ...defaultState(), ...payload.state };
      persistLocal();
      render();
    } else if (!payload?.state && state.updatedAt) {
      saveState();
    }
  } catch {
    // Offline start uses the local mirror.
  }
}

function esc(value) {
  return String(value ?? "")
    .replaceAll("&", "&")
    .replaceAll("<", "&lt;")
    .replaceAll(">", "&gt;")
    .replaceAll('"', "&quot;")
    .replaceAll("'", "&#039;");
}

function icon(name) {
  return `<svg class="icon" aria-hidden="true"><use href="#icon-${name}"></use></svg>`;
}

function showToast(message) {
  toastEl.textContent = message;
  toastEl.classList.add("show");
  window.clearTimeout(showToast.timer);
  showToast.timer = window.setTimeout(() => toastEl.classList.remove("show"), 2600);
}

function localDateKey(date = new Date()) {
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, "0");
  const day = String(date.getDate()).padStart(2, "0");
  return `${year}-${month}-${day}`;
}

function addDays(date, days) {
  const next = new Date(date);
  next.setDate(next.getDate() + days);
  return next;
}

function recordActivity(type, amount = 1) {
  const date = localDateKey();
  state.activityLog.push({ date, type, amount, at: Date.now() });
  if (state.activityLog.length > 3000) state.activityLog = state.activityLog.slice(-3000);
  if (!state.studyDays.includes(date)) state.studyDays.push(date);
  state.studyDays.sort();
}

function awardXP(amount) {
  state.xp += amount;
}

function dateFromKey(key) {
  const [year, month, day] = key.split("-").map(Number);
  return new Date(year, month - 1, day);
}

function calculateStreak() {
  if (!state.studyDays.length) return 0;
  const days = new Set(state.studyDays);
  let cursor = new Date();
  if (!days.has(localDateKey(cursor))) cursor = addDays(cursor, -1);
  let streak = 0;
  while (days.has(localDateKey(cursor))) {
    streak += 1;
    cursor = addDays(cursor, -1);
  }
  return streak;
}

function weekRange() {
  const now = new Date();
  const day = now.getDay();
  const mondayOffset = day === 0 ? -6 : 1 - day;
  const monday = addDays(now, mondayOffset);
  monday.setHours(0, 0, 0, 0);
  const sunday = addDays(monday, 6);
  sunday.setHours(23, 59, 59, 999);
  return { monday, sunday };
}

function weeklySummary() {
  const { monday, sunday } = weekRange();
  const start = localDateKey(monday);
  const end = localDateKey(sunday);
  const inWeek = state.activityLog.filter((event) => event.date >= start && event.date <= end);
  return {
    days: new Set(inWeek.map((event) => event.date)).size,
    lessons: inWeek.filter((event) => event.type === "lesson").reduce((sum, event) => sum + event.amount, 0),
    reviews: inWeek.filter((event) => event.type === "review").reduce((sum, event) => sum + event.amount, 0),
    speaking: inWeek.filter((event) => event.type === "speaking").reduce((sum, event) => sum + event.amount, 0)
  };
}

function dailyKanji() {
  const now = new Date();
  const start = new Date(now.getFullYear(), 0, 0);
  const day = Math.floor((now - start) / 86_400_000);
  const index = day % DATA.kanji.length;
  return { index, entry: DATA.kanji[index] };
}

function audioButtons(text, labelPrefix = "") {
  const safeText = esc(text);
  return `
    <div class="audio-actions" role="group" aria-label="${esc(labelPrefix)}播放速度">
      <button type="button" class="btn secondary small-btn" data-play="${safeText}" data-speed="slow">${icon("sound")}慢速</button>
      <button type="button" class="btn small-btn" data-play="${safeText}" data-speed="normal">${icon("sound")}原速</button>
    </div>`;
}

const audioObjectUrls = new Map();
let currentAudio = null;

async function playJapanese(text, speed = "normal") {
  const cleanText = String(text || "").trim();
  if (!cleanText) return;
  const rate = speed === "slow" ? 0.55 : 0.95;

  try {
    const cacheKey = `${cleanText}:${speed}`;
    if (!audioObjectUrls.has(cacheKey)) {
      const response = await fetch("/api/tts", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ text: cleanText })
      });
      if (!response.ok) throw new Error("TTS unavailable");
      const blob = await response.blob();
      if (!blob || blob.type.includes("json")) throw new Error("TTS unavailable");
      audioObjectUrls.set(cacheKey, URL.createObjectURL(blob));
    }
    if (currentAudio) currentAudio.pause();
    currentAudio = new Audio(audioObjectUrls.get(cacheKey));
    currentAudio.playbackRate = speed === "slow" ? 0.72 : 1;
    await currentAudio.play();
    return;
  } catch {
    // Fall through to the device voice.
  }

  if (!("speechSynthesis" in window)) {
    showToast("此裝置目前沒有可用的日語語音。");
    return;
  }
  window.speechSynthesis.cancel();
  const utterance = new SpeechSynthesisUtterance(cleanText);
  utterance.lang = "ja-JP";
  utterance.rate = rate;
  const japaneseVoice = window.speechSynthesis.getVoices().find((voice) => voice.lang && voice.lang.toLowerCase().startsWith("ja"));
  if (japaneseVoice) utterance.voice = japaneseVoice;
  window.speechSynthesis.speak(utterance);
}

function rubyWord(word, reading) {
  if (!reading || word === reading) return esc(word);
  return `<ruby>${esc(word)}<rt>${esc(reading)}</rt></ruby>`;
}

function setRoute(nextRoute, param = null) {
  const target = param ? `${nextRoute}/${param}` : nextRoute;
  if (location.hash.replace(/^#/, "") === target) render();
  else location.hash = target;
}

function parseHash() {
  const raw = location.hash.replace(/^#/, "") || "dashboard";
  const [name, param] = raw.split("/");
  const valid = ["dashboard", "kana", "lessons", "lesson", "kanji", "review", "speaking"];
  route = valid.includes(name) ? name : "dashboard";
  routeParam = param || null;
}

function updateNav() {
  const active = route === "lesson" ? "lessons" : route;
  document.querySelectorAll("[data-route]").forEach((button) => {
    button.classList.toggle("active", button.dataset.route === active);
  });
}

function badgeHTML() {
  return `<div class="badge-grid">${DATA.badges.map((badge) => {
    const earned = state.badges.includes(badge.id);
    return `<div class="badge-seal ${earned ? "earned" : ""}" title="${esc(badge.description)}"><strong>${esc(badge.label)}</strong><span>${esc(badge.description)}</span></div>`;
  }).join("")}</div>`;
}

function awardBadge(id) {
  if (state.badges.includes(id)) return;
  const badge = DATA.badges.find((item) => item.id === id);
  state.badges.push(id);
  if (badge) showToast(`獲得徽章：${badge.label}`);
}

function checkBadges() {
  const completed = Object.keys(state.completedLessons);
  const n5Done = DATA.lessons.filter((lesson) => lesson.level === "N5").every((lesson) => completed.includes(lesson.id));
  const n4Lessons = DATA.lessons.filter((lesson) => lesson.level === "N4");
  const n4Done = n4Lessons.every((lesson) => completed.includes(lesson.id));
  if (completed.length >= 1) awardBadge("first-step");
  if (state.kanaCorrect >= 20) awardBadge("kana-reader");
  if (state.speakingLog.length >= 1) awardBadge("first-speak");
  if (state.speakingLog.length >= 20) awardBadge("speaking-master");
  if (n5Done) awardBadge("n5-complete");
  if (n4Lessons.some((lesson) => completed.includes(lesson.id))) awardBadge("n4-first");
  if (n4Done) awardBadge("n4-complete");
  if (completed.length === DATA.lessons.length) awardBadge("all-lessons");
  if (state.reviewCount >= 100) awardBadge("review-100");
}

function renderDashboard() {
  const streak = calculateStreak();
  const weekly = weeklySummary();
  const level = Math.floor(state.xp / 300) + 1;
  const levelProgress = Math.round(((state.xp % 300) / 300) * 100);
  const completedCount = Object.keys(state.completedLessons).length;
  const dueCount = Object.values(state.srs).filter((card) => new Date(card.due) <= new Date()).length;
  const { entry, index } = dailyKanji();

  return `
    <section class="hero">
      <div class="card hero-main" data-watermark="日">
        <p class="eyebrow">Weekly plan · 今週</p>
        <h1>にほんご手帳</h1>
        <p>一天一點，讓日文成為穩定累積的能力。今天先完成一件小事，就很好。</p>
        <div class="hero-stats">
          <div class="stat"><strong>${state.xp}</strong><span>XP 經驗值</span></div>
          <div class="stat"><strong>${streak}</strong><span>連續學習天</span></div>
          <div class="stat"><strong>${completedCount}/20</strong><span>已完成課程</span></div>
        </div>
        <div style="margin-top:1.2rem">
          <div class="progress-meta"><span>Level ${level}</span><span>${state.xp % 300}/300 XP</span></div>
          <div class="progress-line" aria-label="等級進度 ${levelProgress}%"><span style="width:${levelProgress}%"></span></div>
        </div>
      </div>
      <article class="card today-kanji">
        <p class="eyebrow">今日一字 · ${index + 1}/50</p>
        <div class="glyph">${esc(entry[0])}</div>
        <div class="reading">${esc(entry[1])}｜${esc(entry[2])}</div>
        <p class="muted">${esc(entry[5])}</p>
        ${audioButtons(entry[4], "今日一字例句")}
      </article>
    </section>

    <section class="card section">
      <div class="section-title" style="margin-top:0"><h2>本週小結</h2><p>星期一至星期日</p></div>
      <div class="weekly-grid">
        <div class="weekly-cell"><strong>${weekly.days}</strong>學習天數</div>
        <div class="weekly-cell"><strong>${weekly.lessons}</strong>完成課數</div>
        <div class="weekly-cell"><strong>${weekly.reviews}</strong>複習張數</div>
        <div class="weekly-cell"><strong>${weekly.speaking}</strong>開口說句數</div>
      </div>
    </section>

    <section class="section">
      <div class="section-title"><h2>今天的練習</h2><p>${dueCount ? `有 ${dueCount} 張卡片到期` : "從想練的地方開始"}</p></div>
      <div class="quick-grid">
        <button class="card quick-card" type="button" data-nav="lessons">${icon("book")}<h3>繼續課程</h3><p>N5 與 N4 共 20 課，單字、例句、文法與四種練習。</p></button>
        <button class="card quick-card" type="button" data-nav="review">${icon("cards")}<h3>間隔複習</h3><p>依記憶曲線安排卡片，少量但持續。</p></button>
        <button class="card quick-card" type="button" data-nav="speaking">${icon("mic")}<h3>開口說</h3><p>聽範例、跟讀、錄音，並取得寬鬆評分回饋。</p></button>
      </div>
    </section>

    <section class="card section">
      <div class="section-title" style="margin-top:0"><h2>學習徽章</h2><p>簡約印章式紀錄</p></div>
      ${badgeHTML()}
    </section>`;
}

function kanaDisplayEntries(script) {
  const nEntry = DATA[script][45];
  const entries = DATA[script].slice(0, 45);
  // Align the y-row and w-row to the five-column chart.
  const result = [];
  entries.forEach((entry, index) => {
    result.push(entry);
    if (index === 35 || index === 36) result.push(null);
    if (index === 43) result.push(null, null, null);
  });
  result.push(null, null, nEntry, null, null);
  return result;
}

function renderKana() {
  const entries = kanaDisplayEntries(kanaScript);
  return `
    <section class="page-head">
      <p class="eyebrow">Kana · 五十音</p>
      <h1>五十音圖</h1>
      <p>點任何一個假名即可聆聽發音。先熟悉形狀與聲音，再用巨字測驗確認自己真的記得。</p>
      <div class="tabs" aria-label="假名種類">
        <button type="button" data-kana-script="hiragana" class="${kanaScript === "hiragana" ? "active" : ""}">平假名</button>
        <button type="button" data-kana-script="katakana" class="${kanaScript === "katakana" ? "active" : ""}">片假名</button>
      </div>
    </section>
    <section class="card">
      <div class="kana-grid">
        ${entries.map((entry) => entry ? `<button type="button" class="kana-cell" data-play="${esc(entry[0])}" data-speed="normal"><span class="glyph">${esc(entry[0])}</span><span class="romaji">${esc(entry[1])}</span></button>` : `<span class="kana-cell empty" aria-hidden="true"></span>`).join("")}
      </div>
    </section>
    ${renderKanaQuiz()}
  `;
}

function pickRandom(items, count, exclude) {
  const pool = items.filter((item) => item !== exclude);
  const shuffled = [...pool].sort(() => Math.random() - 0.5);
  return shuffled.slice(0, count);
}

function ensureKanaQuestion() {
  if (kanaQuestion) return;
  const source = DATA[kanaScript];
  const answer = source[Math.floor(Math.random() * source.length)];
  const options = [answer, ...pickRandom(source, 3, answer)].sort(() => Math.random() - 0.5);
  kanaQuestion = { answer, options };
  kanaAnswered = false;
}

function renderKanaQuiz() {
  ensureKanaQuestion();
  const { answer, options } = kanaQuestion;
  const isGlyphMode = kanaMode === "glyph-to-romaji";
  const focus = isGlyphMode ? answer[0] : answer[1];
  return `
    <section class="card section focus-card">
      <p class="eyebrow">Kana quiz · 巨字焦點</p>
      <div class="segmented" aria-label="測驗模式">
        <button type="button" data-kana-mode="glyph-to-romaji" class="${isGlyphMode ? "active" : ""}">看假名選羅馬字</button>
        <button type="button" data-kana-mode="romaji-to-glyph" class="${!isGlyphMode ? "active" : ""}">看羅馬字選假名</button>
      </div>
      <p class="focus-prompt">${isGlyphMode ? "這個假名怎麼讀？" : "哪一個是這個音？"}</p>
      <div class="focus-glyph">${esc(focus)}</div>
      <button type="button" class="btn secondary" data-play="${esc(answer[0])}" data-speed="normal">${icon("sound")}聽發音</button>
      <div class="option-grid">
        ${options.map((option) => `<button type="button" class="option-btn" data-kana-answer="${esc(option[0])}">${esc(isGlyphMode ? option[1] : option[0])}</button>`).join("")}
      </div>
      <div id="kana-feedback" class="feedback" aria-live="polite"></div>
      <button type="button" class="btn" data-next-kana ${kanaAnswered ? "" : "disabled"}>下一題</button>
      <p class="small muted">累積答對：${state.kanaCorrect} 題</p>
    </section>`;
}

function renderKanji() {
  const entry = DATA.kanji[selectedKanjiIndex];
  return `
    <section class="page-head">
      <p class="eyebrow">Kanji focus · 漢字</p>
      <h1>漢字焦點卡</h1>
      <p>一次專心看一個字：讀音、意思、筆順提示與例句。共 50 字。</p>
    </section>
    <div class="kanji-strip" aria-label="漢字列表">
      ${DATA.kanji.map((item, index) => `<button type="button" class="kanji-chip ${index === selectedKanjiIndex ? "active" : ""}" data-kanji-index="${index}">${esc(item[0])}</button>`).join("")}
    </div>
    <article class="card kanji-focus">
      <p class="eyebrow">${selectedKanjiIndex + 1} / 50</p>
      <div class="focus-glyph">${esc(entry[0])}</div>
      <h2 class="jp-display">${esc(entry[1])}｜${esc(entry[2])}</h2>
      <div class="stroke-box">
        <strong>筆順提示（簡化）</strong>
        <p>${esc(entry[6])} 畫。${esc(entry[7])}</p>
        <p class="small muted">這裡提供的是幫助記憶的簡化提示，不是完整標準筆順教材。</p>
      </div>
      <div class="sentence-list" style="margin-top:1.2rem;text-align:left">
        <div class="sentence-card" style="border:1px solid var(--line);border-radius:12px;padding:1rem">
          <div><div class="jp">${esc(entry[3])}</div><div class="kana">${esc(entry[4])}</div><div class="zh">${esc(entry[5])}</div></div>
          <div class="sentence-actions"><button type="button" class="btn secondary small-btn" data-play="${esc(entry[4])}" data-speed="slow">慢速</button><button type="button" class="btn small-btn" data-play="${esc(entry[4])}" data-speed="normal">原速</button></div>
        </div>
      </div>
      <div class="kanji-nav">
        <button type="button" class="btn secondary" data-kanji-step="-1">上一個</button>
        <span class="muted">${selectedKanjiIndex + 1} / 50</span>
        <button type="button" class="btn" data-kanji-step="1">下一個</button>
      </div>
    </article>`;
}

const exerciseAttempts = {};
const matchSelections = {};

function lessonResult(lessonId) {
  return state.exerciseResults[lessonId] || {};
}

function exerciseDoneCount(lessonId) {
  return ["mc", "fill", "listen", "match"].filter((type) => lessonResult(lessonId)[type]?.done).length;
}

function renderLessons() {
  const groups = ["N5", "N4"].map((level) => {
    const lessons = DATA.lessons.filter((lesson) => lesson.level === level);
    return `
      <section>
        <div class="level-heading"><h2>${level} ${level === "N5" ? "基礎" : "進階"}</h2><span>${lessons.length} 課</span></div>
        <div class="lesson-grid">
          ${lessons.map((lesson) => {
            const completed = state.completedLessons[lesson.id];
            const done = exerciseDoneCount(lesson.id);
            return `<article class="card lesson-card">
              <header><span class="lesson-no">LESSON ${String(lesson.no).padStart(2, "0")}</span><span class="pill">${esc(lesson.level)}</span></header>
              <div><h3>${esc(lesson.title)}</h3><div class="jp-title">${esc(lesson.jpTitle)}</div></div>
              <div class="lesson-meta">
                <span class="pill">約 ${lesson.minutes} 分鐘</span>
                <span class="pill">練習 ${done}/4</span>
                ${completed ? `<span class="pill done">成績 ${completed.score} 分</span>` : `<span class="pill">未完成</span>`}
              </div>
              <button type="button" class="btn ${completed ? "secondary" : ""}" data-open-lesson="${lesson.id}">${completed ? "複習本課" : "開始學習"} ${icon("arrow")}</button>
            </article>`;
          }).join("")}
        </div>
      </section>`;
  }).join("");

  return `<section class="page-head"><p class="eyebrow">Lessons · 課程</p><h1>二十課的路徑</h1><p>從自我介紹到條件句，每課都包含單字、例句、文法與四種練習。完成後，句子會自動進入複習與開口說。</p></section>${groups}`;
}

function sentenceCard(example) {
  return `<div class="sentence-card card">
    <div><div class="jp">${esc(example[0])}</div><div class="kana">${esc(example[1])}</div><div class="zh">${esc(example[2])}</div></div>
    <div class="sentence-actions">
      <button type="button" class="btn secondary small-btn" data-play="${esc(example[1])}" data-speed="slow">${icon("sound")}慢速</button>
      <button type="button" class="btn small-btn" data-play="${esc(example[1])}" data-speed="normal">${icon("sound")}原速</button>
    </div>
  </div>`;
}

function optionExercise(lesson, type, title, promptHTML, options, answerIndex) {
  const result = lessonResult(lesson.id)[type];
  return `<article class="card exercise" data-exercise-card="${type}">
    <h3>${icon(type === "listen" ? "sound" : "book")}${esc(title)}</h3>
    <div>${promptHTML}</div>
    <div class="option-grid">
      ${options.map((option, index) => {
        const cls = result?.done && index === answerIndex ? "correct" : "";
        return `<button type="button" class="option-btn ${cls}" data-exercise-option data-lesson="${lesson.id}" data-type="${type}" data-index="${index}" data-answer="${answerIndex}" ${result?.done ? "disabled" : ""}>${esc(option)}</button>`;
      }).join("")}
    </div>
    <div class="feedback ${result?.done ? "good" : ""}" data-feedback="${type}">${result?.done ? "已完成，做得好。" : ""}</div>
  </article>`;
}

function seededShuffle(items, seedText) {
  let seed = [...seedText].reduce((sum, char) => sum + char.charCodeAt(0), 0);
  const result = [...items];
  for (let i = result.length - 1; i > 0; i -= 1) {
    seed = (seed * 9301 + 49297) % 233280;
    const j = Math.floor((seed / 233280) * (i + 1));
    [result[i], result[j]] = [result[j], result[i]];
  }
  return result;
}

function matchingExercise(lesson) {
  const pairs = lesson.vocab.slice(0, 4);
  const result = lessonResult(lesson.id).match;
  const right = seededShuffle(pairs, lesson.id);
  return `<article class="card exercise" data-exercise-card="match">
    <h3>${icon("cards")}配對練習</h3>
    <p class="muted">先點日文，再點正確的中文意思。完成四組配對即可。</p>
    <div class="match-grid">
      <div class="match-column">${pairs.map((pair, index) => `<button type="button" class="match-btn ${result?.done ? "matched" : ""}" data-match-side="left" data-lesson="${lesson.id}" data-pair="${index}" ${result?.done ? "disabled" : ""}>${esc(pair[0])}<br><small>${esc(pair[1])}</small></button>`).join("")}</div>
      <div class="match-column">${right.map((pair) => {
        const originalIndex = pairs.indexOf(pair);
        return `<button type="button" class="match-btn ${result?.done ? "matched" : ""}" data-match-side="right" data-lesson="${lesson.id}" data-pair="${originalIndex}" ${result?.done ? "disabled" : ""}>${esc(pair[2])}</button>`;
      }).join("")}</div>
    </div>
    <div class="feedback ${result?.done ? "good" : ""}" data-feedback="match">${result?.done ? "配對完成，做得好。" : ""}</div>
  </article>`;
}

function renderLesson(lesson) {
  const completed = state.completedLessons[lesson.id];
  const mc = lesson.quiz.mc;
  const fill = lesson.quiz.fill;
  const listen = lesson.quiz.listen;
  return `
    <button type="button" class="btn ghost" data-nav="lessons">← 回到課程</button>
    <section class="page-head">
      <p class="eyebrow">${lesson.level} · Lesson ${lesson.no} · 約 ${lesson.minutes} 分鐘</p>
      <h1>${esc(lesson.title)}</h1>
      <p class="jp-display" style="font-size:1.35rem">${esc(lesson.jpTitle)}</p>
      ${completed ? `<div class="result-banner">本課已完成，成績 ${completed.score} 分。可以繼續複習單字與例句。</div>` : ""}
    </section>

    <section>
      <div class="section-title"><h2>單字翻卡</h2><p>點卡片翻面</p></div>
      <div class="vocab-grid">
        ${lesson.vocab.map((vocab) => `<article class="flip-card" data-flip tabindex="0" role="button" aria-label="翻轉單字卡 ${esc(vocab[0])}">
          <div class="flip-inner">
            <div class="flip-face front"><span class="word">${rubyWord(vocab[0], vocab[1])}</span><span class="tap">點一下看意思</span></div>
            <div class="flip-face back"><span class="meaning">${esc(vocab[2])}</span><span>${esc(vocab[1])}</span><span>
              <button type="button" class="btn secondary small-btn" data-play="${esc(vocab[1])}" data-speed="slow">慢速</button>
              <button type="button" class="btn small-btn" data-play="${esc(vocab[1])}" data-speed="normal">原速</button></span><span class="tap">點卡片翻回去</span></div>
          </div>
        </article>`).join("")}
      </div>
    </section>

    <section>
      <div class="section-title"><h2>例句</h2><p>日文在上，中文在下</p></div>
      <div class="sentence-list">${lesson.examples.map(sentenceCard).join("")}</div>
    </section>

    <section class="card section grammar-box">
      <p class="eyebrow">Grammar · 文法</p>
      <h2>${esc(lesson.grammar.title)}</h2>
      <p>${esc(lesson.grammar.body)}</p>
    </section>

    <section>
      <div class="section-title"><h2>練習</h2><p>完成四種練習後，本課即完成</p></div>
      ${optionExercise(lesson, "mc", "選擇題", `<p>${esc(mc[0])}</p>`, mc[1], mc[2])}
      ${optionExercise(lesson, "fill", "填空題", `<p class="jp-display" style="font-size:1.3rem">${esc(fill[0])}</p>`, fill[1], fill[2])}
      ${optionExercise(lesson, "listen", "聽力題", `<p>${esc(listen[1])}</p><div class="audio-actions" style="justify-content:flex-start"><button type="button" class="btn secondary small-btn" data-play="${esc(listen[0])}" data-speed="slow">慢速播放</button><button type="button" class="btn small-btn" data-play="${esc(listen[0])}" data-speed="normal">原速播放</button></div>`, listen[2], listen[3])}
      ${matchingExercise(lesson)}
    </section>`;
}

function createSrsCards(lesson) {
  const now = new Date().toISOString();
  lesson.vocab.forEach((vocab, index) => {
    const id = `${lesson.id}:v:${index}`;
    if (!state.srs[id]) {
      state.srs[id] = { id, lessonId: lesson.id, kind: "vocab", front: vocab[0], kana: vocab[1], back: vocab[2], due: now, interval: 0, ease: 2.5, reps: 0, lapses: 0, mastered: false, lastReviewed: null };
    }
  });
  lesson.examples.forEach((example, index) => {
    const id = `${lesson.id}:s:${index}`;
    if (!state.srs[id]) {
      state.srs[id] = { id, lessonId: lesson.id, kind: "sentence", front: example[0], kana: example[1], back: example[2], due: now, interval: 0, ease: 2.5, reps: 0, lapses: 0, mastered: false, lastReviewed: null };
    }
  });
}

function completeLessonIfReady(lesson) {
  const results = lessonResult(lesson.id);
  const types = ["mc", "fill", "listen", "match"];
  if (!types.every((type) => results[type]?.done) || state.completedLessons[lesson.id]) return;
  const score = Math.round((types.filter((type) => results[type].correctFirstTry).length / types.length) * 100);
  state.completedLessons[lesson.id] = { score, completedAt: Date.now() };
  awardXP(25);
  recordActivity("lesson", 1);
  createSrsCards(lesson);
  checkBadges();
  saveState();
  showToast(`第 ${lesson.no} 課完成，成績 ${score} 分，獲得 25 XP。`);
  render();
}

function markExerciseDone(lesson, type, correctFirstTry) {
  if (!state.exerciseResults[lesson.id]) state.exerciseResults[lesson.id] = {};
  if (state.exerciseResults[lesson.id][type]?.done) return;
  state.exerciseResults[lesson.id][type] = { done: true, correctFirstTry, completedAt: Date.now() };
  awardXP(10);
  recordActivity("exercise", 1);
  saveState();
  completeLessonIfReady(lesson);
}

function prepareReviewQueue() {
  const now = new Date();
  const due = Object.values(state.srs)
    .filter((card) => new Date(card.due) <= now)
    .sort((a, b) => new Date(a.due) - new Date(b.due));
  reviewQueue = due.map((card) => card.id);
  reviewIndex = 0;
  reviewRevealed = false;
}

function renderReview() {
  const cards = Object.values(state.srs);
  const now = new Date();
  const dueCount = cards.filter((card) => new Date(card.due) <= now).length;
  const mastered = cards.filter((card) => card.mastered).length;
  if (!reviewQueue.length || reviewIndex >= reviewQueue.length) prepareReviewQueue();
  const card = state.srs[reviewQueue[reviewIndex]];

  return `
    <section class="page-head">
      <p class="eyebrow">Review · 間隔複習</p>
      <h1>把記得變成真的記得</h1>
      <p>完成課程後，單字與例句會進入這裡。依你的熟悉程度安排下一次出現，不需要一次背完。</p>
    </section>
    <section class="grid three">
      <div class="card stat"><strong>${dueCount}</strong><span>今日到期</span></div>
      <div class="card stat"><strong>${mastered}</strong><span>已掌握</span></div>
      <div class="card stat"><strong>${cards.length}</strong><span>全部卡片</span></div>
    </section>
    ${card ? `<article class="card section focus-card">
      <p class="eyebrow">${card.kind === "sentence" ? "例句" : "單字"} · ${esc(LESSON_MAP.get(card.lessonId)?.title || "")}</p>
      <div class="review-word">${esc(card.front)}</div>
      ${reviewRevealed ? `<div class="review-answer"><p class="jp-display" style="font-size:1.3rem">${esc(card.kana)}</p><p>${esc(card.back)}</p>${audioButtons(card.kana, "複習卡片")}</div>` : `<button type="button" class="btn" data-reveal-review>顯示答案</button>`}
      ${reviewRevealed ? `<div class="rating-grid">
        <button type="button" data-grade="0">不記得<small>1 天後</small></button>
        <button type="button" data-grade="1">有點模糊<small>短間隔</small></button>
        <button type="button" data-grade="2">記得<small>標準階梯</small></button>
        <button type="button" data-grade="3">很熟<small>拉長間隔</small></button>
      </div>` : ""}
      <p class="small muted">本輪進度 ${Math.min(reviewIndex + 1, reviewQueue.length)} / ${reviewQueue.length}</p>
    </article>` : `<section class="card section empty-state"><h2>目前沒有到期卡片</h2><p>先完成一課，或等已排程的卡片到期。</p><button type="button" class="btn" data-nav="lessons">去上課</button></section>`}
  `;
}

function scheduleReview(card, rating) {
  const previousInterval = Number(card.interval || 0);
  const previousReps = Number(card.reps || 0);
  let interval;
  let ease = Number(card.ease || 2.5);

  if (rating === 0) {
    interval = 1;
    card.reps = 0;
    card.lapses = Number(card.lapses || 0) + 1;
    ease = Math.max(1.3, ease - 0.2);
  } else {
    card.reps = previousReps + 1;
    if (rating === 1) {
      interval = previousReps === 0 ? 1 : Math.max(1, Math.round(previousInterval * 0.6));
      ease = Math.max(1.3, ease - 0.05);
    } else if (rating === 2) {
      if (previousReps === 0) interval = 1;
      else if (previousReps === 1) interval = 4;
      else if (previousReps === 2) interval = 9;
      else interval = Math.round(previousInterval * ease);
    } else {
      if (previousReps === 0) interval = 4;
      else if (previousReps === 1) interval = 9;
      else if (previousReps === 2) interval = 30;
      else interval = Math.round(previousInterval * ease * 1.35);
      ease = Math.min(3, ease + 0.1);
    }
  }

  card.interval = Math.min(180, Math.max(1, interval));
  card.ease = Math.round(ease * 100) / 100;
  card.due = addDays(new Date(), card.interval).toISOString();
  card.lastReviewed = new Date().toISOString();
  card.mastered = card.interval >= 30 || card.reps >= 6;
}

function gradeReview(rating) {
  const card = state.srs[reviewQueue[reviewIndex]];
  if (!card) return;
  scheduleReview(card, rating);
  state.reviewCount += 1;
  awardXP(2);
  recordActivity("review", 1);
  checkBadges();
  saveState();
  reviewIndex += 1;
  reviewRevealed = false;
  render();
}

function speakingPool() {
  return Object.keys(state.completedLessons).flatMap((lessonId) => {
    const lesson = LESSON_MAP.get(lessonId);
    if (!lesson) return [];
    return lesson.examples.map((example, index) => ({
      id: `${lesson.id}:s:${index}`,
      jp: example[0],
      kana: example[1],
      zh: example[2],
      lessonTitle: lesson.title
    }));
  });
}

let lastTranscript = "";
let lastSpeakingScore = null;
let lastSpeakingSentenceId = null;
let isRecording = false;
let completedRecognitionKey = "";

function renderSpeaking() {
  const pool = speakingPool();
  if (!pool.length) {
    return `<section class="page-head"><p class="eyebrow">Speaking · 開口說</p><h1>先完成一課，再開口</h1><p>開口說的句子會從你已完成的課程例句中選取，確保每句都學過、看得懂。</p></section><section class="card empty-state"><h2>句子池還是空的</h2><p>完成第一課後，例句會自動加入。</p><button type="button" class="btn" data-nav="lessons">去完成第一課</button></section>`;
  }
  const sentence = pool[speakingIndex % pool.length];
  const recognitionSupported = Boolean(window.SpeechRecognition || window.webkitSpeechRecognition);
  const best = state.speakingBest[sentence.id];
  return `
    <section class="page-head">
      <p class="eyebrow">Speaking · 開口說</p>
      <h1>聽，跟著說</h1>
      <p>句子來自已完成課程：${esc(sentence.lessonTitle)}。先聽慢速，再用原速挑戰。</p>
    </section>
    <article class="card speaking-sentence">
      <p class="eyebrow">${(speakingIndex % pool.length) + 1} / ${pool.length}</p>
      <div class="jp">${esc(sentence.jp)}</div>
      <p class="jp-display" style="color:var(--indigo);font-size:1.25rem">${esc(sentence.kana)}</p>
      <p class="muted">${esc(sentence.zh)}</p>
      ${audioButtons(sentence.kana, "開口說例句")}
      ${best ? `<p class="small muted">本句最佳成績：${best} 分</p>` : ""}
      <div class="recorder-panel">
        ${recognitionSupported ? `<button type="button" class="btn" data-start-speaking>${icon("mic")}開始跟讀評分</button>` : ""}
        <button type="button" class="btn secondary" data-toggle-record>${isRecording ? "停止錄音" : "錄音練習"}</button>
        <button type="button" class="btn ghost" data-next-speaking>換一句</button>
      </div>
      ${recordedAudioUrl ? `<p><audio controls src="${recordedAudioUrl}">你的瀏覽器不支援音訊播放。</audio></p>` : ""}
      ${lastSpeakingSentenceId === sentence.id && lastTranscript ? `<div class="transcript"><strong>辨識結果</strong><p>${esc(lastTranscript)}</p></div>` : ""}
      ${lastSpeakingSentenceId === sentence.id && lastSpeakingScore !== null ? `<div><div class="score">${lastSpeakingScore}</div><p class="muted">分數採寬鬆比對，重點是願意開口與持續練習。</p></div>` : ""}
      ${!recognitionSupported ? `<div class="transcript"><strong>錄音自評模式</strong><p>此瀏覽器不支援日語語音辨識。請先錄下自己的聲音、播放比對，再誠實自評。</p><div class="recorder-panel"><button type="button" class="btn sage" data-self-score="90">很像</button><button type="button" class="btn secondary" data-self-score="70">還可以</button><button type="button" class="btn ghost" data-self-score="45">不太像</button></div></div>` : `<div class="transcript"><strong>辨識不可用時</strong><p>也可以錄音後自評，不會影響練習紀錄。</p><div class="recorder-panel"><button type="button" class="btn sage" data-self-score="90">自評：很像</button><button type="button" class="btn secondary" data-self-score="70">自評：還可以</button><button type="button" class="btn ghost" data-self-score="45">自評：不太像</button></div></div>`}
    </article>
    <section class="card section"><h2>練習紀錄</h2><p>已完成 ${state.speakingLog.length} 次開口說練習。</p></section>`;
}

function normalizeJapanese(text) {
  return String(text || "")
    .normalize("NFKC")
    .replace(/[\s。、！？,.・「」『』（）()]/g, "")
    .replace(/[ァ-ヶ]/g, (char) => String.fromCharCode(char.charCodeAt(0) - 0x60));
}

function editDistance(a, b) {
  const matrix = Array.from({ length: a.length + 1 }, () => Array(b.length + 1).fill(0));
  for (let i = 0; i <= a.length; i += 1) matrix[i][0] = i;
  for (let j = 0; j <= b.length; j += 1) matrix[0][j] = j;
  for (let i = 1; i <= a.length; i += 1) {
    for (let j = 1; j <= b.length; j += 1) {
      matrix[i][j] = Math.min(
        matrix[i - 1][j] + 1,
        matrix[i][j - 1] + 1,
        matrix[i - 1][j - 1] + (a[i - 1] === b[j - 1] ? 0 : 1)
      );
    }
  }
  return matrix[a.length][b.length];
}

function similarity(a, b) {
  const left = normalizeJapanese(a);
  const right = normalizeJapanese(b);
  if (!left || !right) return 0;
  const distance = editDistance(left, right);
  return Math.max(0, 1 - distance / Math.max(left.length, right.length));
}

function scoreTranscript(sentence, transcript) {
  const scores = [similarity(transcript, sentence.jp), similarity(transcript, sentence.kana)];
  return Math.round(Math.max(...scores) * 100);
}

function completeSpeaking(sentence, score, mode, transcript = "") {
  const firstForSentence = !state.speakingBest[sentence.id];
  state.speakingBest[sentence.id] = Math.max(Number(state.speakingBest[sentence.id] || 0), score);
  state.speakingLog.push({ sentenceId: sentence.id, score, mode, transcript, at: Date.now(), date: localDateKey() });
  awardXP(firstForSentence ? 15 : 5);
  recordActivity("speaking", 1);
  lastSpeakingScore = score;
  lastSpeakingSentenceId = sentence.id;
  lastTranscript = transcript;
  checkBadges();
  saveState();
  showToast(`跟讀完成：${score} 分，獲得 ${firstForSentence ? 15 : 5} XP。`);
  render();
}

async function startRecorderOnly() {
  if (!navigator.mediaDevices?.getUserMedia || !window.MediaRecorder) {
    showToast("此瀏覽器不支援錄音，請改用自評。");
    return false;
  }
  try {
    const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
    mediaChunks = [];
    mediaRecorder = new MediaRecorder(stream);
    mediaRecorder.ondataavailable = (event) => { if (event.data.size) mediaChunks.push(event.data); };
    mediaRecorder.onstop = () => {
      stream.getTracks().forEach((track) => track.stop());
      if (recordedAudioUrl) URL.revokeObjectURL(recordedAudioUrl);
      recordedAudioUrl = URL.createObjectURL(new Blob(mediaChunks, { type: mediaRecorder.mimeType || "audio/webm" }));
      isRecording = false;
      render();
    };
    mediaRecorder.start();
    isRecording = true;
    render();
    return true;
  } catch {
    showToast("麥克風未授權，可以使用自評模式繼續練習。");
    return false;
  }
}

function stopRecorderOnly() {
  if (mediaRecorder && mediaRecorder.state !== "inactive") mediaRecorder.stop();
}

function startSpeaking(sentence) {
  const Recognition = window.SpeechRecognition || window.webkitSpeechRecognition;
  if (!Recognition) {
    startRecorderOnly();
    return;
  }
  lastTranscript = "";
  lastSpeakingScore = null;
  lastSpeakingSentenceId = sentence.id;
  try {
    recognition = new Recognition();
  } catch {
    startRecorderOnly();
    return;
  }
  recognition.lang = "ja-JP";
  recognition.interimResults = true;
  recognition.continuous = false;
  recognition.maxAlternatives = 3;
  recognition.onresult = (event) => {
    let interim = "";
    for (let i = event.resultIndex; i < event.results.length; i += 1) {
      const result = event.results[i];
      if (!result.isFinal) {
        interim = result[0]?.transcript || interim;
        continue;
      }
      const alternatives = [...result].map((alt) => alt.transcript).filter(Boolean);
      let bestTranscript = alternatives[0] || "";
      let bestScore = -1;
      alternatives.forEach((candidate) => {
        const candidateScore = scoreTranscript(sentence, candidate);
        if (candidateScore > bestScore) { bestScore = candidateScore; bestTranscript = candidate; }
      });
      const completionKey = `${sentence.id}:${bestTranscript}:${bestScore}`;
      if (completionKey !== completedRecognitionKey) {
        completedRecognitionKey = completionKey;
        completeSpeaking(sentence, bestScore, "recognition", bestTranscript);
      }
    }
    if (interim) {
      lastTranscript = interim;
      const node = document.querySelector(".transcript p");
      if (node) node.textContent = interim;
    }
  };
  recognition.onerror = () => showToast("辨識未成功，可以播放錄音並使用自評。");
  recognition.onend = () => { recognition = null; };
  startRecorderOnly();
  try { recognition.start(); } catch { /* The recorder/self-assessment path remains available. */ }
}

function render() {
  parseHash();
  let html = "";
  if (route === "dashboard") html = renderDashboard();
  else if (route === "kana") html = renderKana();
  else if (route === "lessons") html = renderLessons();
  else if (route === "lesson") {
    const lesson = LESSON_MAP.get(routeParam);
    html = lesson ? renderLesson(lesson) : renderLessons();
  } else if (route === "kanji") html = renderKanji();
  else if (route === "review") html = renderReview();
  else if (route === "speaking") html = renderSpeaking();
  appEl.innerHTML = html;
  updateNav();
}

document.querySelectorAll("[data-route]").forEach((button) => {
  button.addEventListener("click", () => setRoute(button.dataset.route));
});

window.addEventListener("hashchange", render);

document.addEventListener("click", (event) => {
  const playButton = event.target.closest("[data-play]");
  if (playButton) {
    event.preventDefault();
    event.stopPropagation();
    playJapanese(playButton.dataset.play, playButton.dataset.speed || "normal");
    return;
  }

  const navButton = event.target.closest("[data-nav]");
  if (navButton) { setRoute(navButton.dataset.nav); return; }

  const lessonButton = event.target.closest("[data-open-lesson]");
  if (lessonButton) { setRoute("lesson", lessonButton.dataset.openLesson); return; }

  const scriptButton = event.target.closest("[data-kana-script]");
  if (scriptButton) { kanaScript = scriptButton.dataset.kanaScript; kanaQuestion = null; render(); return; }

  const modeButton = event.target.closest("[data-kana-mode]");
  if (modeButton) { kanaMode = modeButton.dataset.kanaMode; kanaQuestion = null; render(); return; }

  const kanaAnswer = event.target.closest("[data-kana-answer]");
  if (kanaAnswer && kanaQuestion && !kanaAnswered) {
    kanaAnswered = true;
    const correct = kanaAnswer.dataset.kanaAnswer === kanaQuestion.answer[0];
    kanaAnswer.classList.add(correct ? "correct" : "wrong");
    document.querySelectorAll("[data-kana-answer]").forEach((button) => { button.disabled = true; });
    const feedback = document.getElementById("kana-feedback");
    if (feedback) {
      feedback.textContent = correct ? `答對了：${kanaQuestion.answer[0]} 讀作 ${kanaQuestion.answer[1]}。` : `這題是 ${kanaQuestion.answer[0]}，讀作 ${kanaQuestion.answer[1]}。`;
      feedback.classList.add(correct ? "good" : "bad");
    }
    const next = document.querySelector("[data-next-kana]");
    if (next) next.disabled = false;
    if (correct) {
      state.kanaCorrect += 1;
      awardXP(2);
      recordActivity("kana", 1);
      checkBadges();
      saveState();
    }
    return;
  }

  if (event.target.closest("[data-next-kana]")) { kanaQuestion = null; render(); return; }

  const kanjiChip = event.target.closest("[data-kanji-index]");
  if (kanjiChip) { selectedKanjiIndex = Number(kanjiChip.dataset.kanjiIndex); render(); return; }

  const kanjiStep = event.target.closest("[data-kanji-step]");
  if (kanjiStep) {
    selectedKanjiIndex = (selectedKanjiIndex + Number(kanjiStep.dataset.kanjiStep) + DATA.kanji.length) % DATA.kanji.length;
    render();
    return;
  }

  const flip = event.target.closest("[data-flip]");
  if (flip) { flip.classList.toggle("flipped"); return; }

  const option = event.target.closest("[data-exercise-option]");
  if (option) {
    const lesson = LESSON_MAP.get(option.dataset.lesson);
    if (!lesson) return;
    const type = option.dataset.type;
    const answer = Number(option.dataset.answer);
    const index = Number(option.dataset.index);
    const key = `${lesson.id}:${type}`;
    if (exerciseAttempts[key] === undefined) exerciseAttempts[key] = true;
    const card = option.closest("[data-exercise-card]");
    const feedback = card?.querySelector(`[data-feedback="${type}"]`);
    if (index !== answer) {
      exerciseAttempts[key] = false;
      option.classList.add("wrong");
      option.disabled = true;
      if (feedback) { feedback.textContent = "再想想看，你可以的。"; feedback.classList.add("bad"); }
      return;
    }
    option.classList.add("correct");
    card?.querySelectorAll("[data-exercise-option]").forEach((button) => { button.disabled = true; });
    if (feedback) { feedback.textContent = "答對了，練習完成。"; feedback.classList.remove("bad"); feedback.classList.add("good"); }
    markExerciseDone(lesson, type, exerciseAttempts[key]);
    return;
  }

  const matchButton = event.target.closest("[data-match-side]");
  if (matchButton) {
    const lesson = LESSON_MAP.get(matchButton.dataset.lesson);
    if (!lesson || lessonResult(lesson.id).match?.done) return;
    const selection = matchSelections[lesson.id] || (matchSelections[lesson.id] = { left: null, matched: new Set(), correctFirstTry: true });
    const pair = Number(matchButton.dataset.pair);
    const card = matchButton.closest("[data-exercise-card]");
    const feedback = card?.querySelector('[data-feedback="match"]');
    if (matchButton.dataset.matchSide === "left") {
      card.querySelectorAll('[data-match-side="left"]').forEach((button) => button.classList.remove("selected"));
      selection.left = pair;
      matchButton.classList.add("selected");
      if (feedback) feedback.textContent = "再選右邊的中文意思。";
      return;
    }
    if (selection.left === null) {
      if (feedback) feedback.textContent = "請先選左邊的日文。";
      return;
    }
    if (selection.left === pair) {
      card.querySelectorAll(".match-btn").forEach((button) => {
        if (Number(button.dataset.pair) === pair) { button.classList.add("matched"); button.classList.remove("selected"); button.disabled = true; }
      });
      selection.matched.add(pair);
      selection.left = null;
      if (feedback) feedback.textContent = `已完成 ${selection.matched.size}/4 組配對。`;
      if (selection.matched.size === 4) {
        if (feedback) { feedback.textContent = "配對完成，做得好。"; feedback.classList.add("good"); }
        markExerciseDone(lesson, "match", selection.correctFirstTry);
      }
    } else {
      selection.correctFirstTry = false;
      matchButton.classList.add("wrong");
      window.setTimeout(() => matchButton.classList.remove("wrong"), 500);
      if (feedback) feedback.textContent = "這兩個不是一組，再試一次。";
    }
    return;
  }

  if (event.target.closest("[data-reveal-review]")) { reviewRevealed = true; render(); return; }

  const gradeButton = event.target.closest("[data-grade]");
  if (gradeButton) { gradeReview(Number(gradeButton.dataset.grade)); return; }

  if (event.target.closest("[data-start-speaking]")) {
    const pool = speakingPool();
    if (pool.length) startSpeaking(pool[speakingIndex % pool.length]);
    return;
  }

  if (event.target.closest("[data-toggle-record]")) {
    if (isRecording) stopRecorderOnly(); else startRecorderOnly();
    return;
  }

  if (event.target.closest("[data-next-speaking]")) {
    speakingIndex += 1;
    if (recordedAudioUrl) { URL.revokeObjectURL(recordedAudioUrl); recordedAudioUrl = null; }
    lastTranscript = "";
    lastSpeakingScore = null;
    render();
    return;
  }

  const selfScore = event.target.closest("[data-self-score]");
  if (selfScore) {
    const pool = speakingPool();
    if (pool.length) completeSpeaking(pool[speakingIndex % pool.length], Number(selfScore.dataset.selfScore), "self", "");
    return;
  }
});

document.addEventListener("keydown", (event) => {
  const flip = event.target.closest?.("[data-flip]");
  if (flip && (event.key === "Enter" || event.key === " ") && event.target === flip) {
    event.preventDefault();
    flip.classList.toggle("flipped");
  }
});

render();
loadRemoteState();

if ("serviceWorker" in navigator && (location.protocol === "https:" || location.hostname === "localhost")) {
  window.addEventListener("load", () => {
    navigator.serviceWorker.register("/sw.js").catch(() => {});
  });
}