/* Course proposals redesign — Story / Studio / Pulse / Trail */

const REDESIGN_PATTERNS = [
  { name: "かも", caption: "不確定", jp: "壊れたかも。", zh: "可能壞掉了。" },
  { name: "んじゃない？", caption: "提出推測", jp: "また直るんじゃない？", zh: "應該又會恢復吧？" },
  { name: "よね", caption: "確認共識", jp: "嫌いだよね。", zh: "你很討厭吧。" },
  { name: "普通形疑問", caption: "只用升調", jp: "外に干す？", zh: "要曬在外面嗎？" },
];

const REDESIGN_LINES = [
  { who: "充", side: "left", jp: "あれ？さっき終わらなかった？", ruby: "あれ？さっき<ruby>終<rt>お</rt></ruby>わらなかった？", zh: "咦？剛才不是洗完了嗎？" },
  { who: "咲子", side: "right", jp: "乾燥、またバカになったかも。", ruby: "<ruby>乾燥<rt>かんそう</rt></ruby>、またバカになったかも。", zh: "烘乾功能可能又故障了。" },
  { who: "充", side: "left", jp: "また勝手に直るんじゃない？", ruby: "また<ruby>勝手<rt>かって</rt></ruby>に<ruby>直<rt>なお</rt></ruby>るんじゃない？", zh: "應該又會自己恢復吧？" },
  { who: "咲子", side: "right", jp: "外に干す？嫌いだよね。", ruby: "<ruby>外<rt>そと</rt></ruby>に<ruby>干<rt>ほ</rt></ruby>す？<ruby>嫌<rt>きら</rt></ruby>いだよね。", zh: "要曬外面嗎？你很討厭吧。" },
];

const STORY_STEPS = ["聽", "拆", "懂", "練", "收"];

function CourseShell({ title, mode, progress, onBack, children, footer }) {
  return (
    <div className={`zen-page course-v2 course-v2--${mode}`}>
      <div className="course-v2-head">
        <button type="button" className="course-v2-back" onClick={onBack}>
          <Icon name="chevronBack" size={17} /> 上一頁
        </button>
        <div className="course-v2-head-title">{title}</div>
        <div className="course-v2-head-progress">{progress}</div>
      </div>
      <div className="zen-content course-v2-content">{children}</div>
      {footer ? <div className="course-v2-footer">{footer}</div> : null}
    </div>
  );
}

function StoryRail({ step }) {
  return (
    <div className="story-rail" aria-label="課程進度">
      {STORY_STEPS.map((label, idx) => (
        <React.Fragment key={label}>
          {idx ? <span className={`story-rail-line${idx <= step ? " done" : ""}`} /> : null}
          <span className={`story-rail-node${idx === step ? " active" : ""}${idx < step ? " done" : ""}`}>
            {idx < step ? "✓" : idx + 1}
            <small>{label}</small>
          </span>
        </React.Fragment>
      ))}
    </div>
  );
}

function LessonCoursePageV2({ navigate, onBack }) {
  const toast = useToast();
  const [step, setStep] = React.useState(0);
  const [showZh, setShowZh] = React.useState(false);
  const [playing, setPlaying] = React.useState(false);
  const [line, setLine] = React.useState(1);
  const [pattern, setPattern] = React.useState(0);
  const [answer, setAnswer] = React.useState(null);

  const next = () => {
    setStep((s) => Math.min(4, s + 1));
    setAnswer(null);
  };

  const footerLabel = ["開始拆解", "看四個語氣", "開始小測驗", "完成本課", "去複習本課單字"][step];
  const footerAction = step === 4 ? () => navigate("/lesson/idle") : next;

  return (
    <CourseShell
      title="家庭洗衣 · 口語氣"
      mode="story"
      progress={`${step + 1}/5`}
      onBack={onBack || (() => navigate("/hub"))}
      footer={<ZenButton variant="primary" block disabled={step === 3 && !answer} onClick={footerAction}>{footerLabel}</ZenButton>}
    >
      <StoryRail step={step} />

      {step === 0 ? (
        <div className="story-stage">
          <div className="story-scene">
            <div className="story-scene-art">
              <span className="story-washer">ま</span>
              <span className="story-spin">↻</span>
            </div>
            <div>
              <div className="story-eyebrow">SCENE 01 · 先只用耳朵</div>
              <h1>洗衣機又壞了？</h1>
              <p>4 句 · 42 秒 · N4</p>
            </div>
          </div>
          <button
            type="button"
            className={`story-player${playing ? " playing" : ""}`}
            onClick={() => {
              setPlaying((v) => !v);
              toast.push(playing ? "（Mock）已暫停" : "（Mock）播放整段對話", "success");
            }}
          >
            <span className="story-play-icon">{playing ? "Ⅱ" : "▶"}</span>
            <span>
              <strong>{playing ? "正在播放對話" : "播放整段對話"}</strong>
              <small>{playing ? "00:18 / 00:42" : "先不要看中文"}</small>
            </span>
            <span className="story-wave">▂▅▃▇▅▂</span>
          </button>
          <div className="story-chat">
            {REDESIGN_LINES.map((item, idx) => (
              <div key={item.jp} className={`story-chat-row ${item.side}`}>
                <span className="story-avatar">{item.who.slice(0, 1)}</span>
                <div className="story-chat-body">
                  <span className="story-who">{item.who}</span>
                  <div className="story-chat-bubble" dangerouslySetInnerHTML={{ __html: item.ruby }} />
                  {showZh ? <div className="story-chat-zh">{item.zh}</div> : null}
                </div>
              </div>
            ))}
          </div>
          <button type="button" className="story-reveal" onClick={() => setShowZh((v) => !v)}>
            {showZh ? "收起中文" : "我聽完了，顯示中文"}
          </button>
        </div>
      ) : null}

      {step === 1 ? (
        <div className="story-stage">
          <div className="story-stage-title">
            <span>02</span><div><h1>點一句，抓住關鍵</h1><p>不畫文法樹，只留下真正要記的。</p></div>
          </div>
          <div className="story-line-tabs">
            {REDESIGN_LINES.map((item, idx) => (
              <button key={item.jp} type="button" className={line === idx ? "active" : ""} onClick={() => setLine(idx)}>
                {idx + 1}
              </button>
            ))}
          </div>
          <div className="story-focus-card">
            <div className="story-focus-jp" dangerouslySetInnerHTML={{ __html: REDESIGN_LINES[line].ruby }} />
            <button type="button" className="story-audio-dot" onClick={() => toast.push(`（Mock）朗讀第 ${line + 1} 句`, "success")}>
              <Icon name="volume" size={18} />
            </button>
            <div className="story-key-grid">
              <div><small>關鍵詞</small><strong>{line === 1 ? "バカになる" : line === 2 ? "勝手に" : line === 3 ? "よね" : "終わる"}</strong><span>{line === 1 ? "故障、不正常" : line === 2 ? "自己就…" : line === 3 ? "向對方確認" : "結束"}</span></div>
              <div><small>一句文法</small><strong>{["普通形疑問", "かも", "んじゃない？", "よね"][line]}</strong><span>{["用升調提問", "不確定", "提出推測", "確認共識"][line]}</span></div>
            </div>
            <div className="story-natural"><small>自然中文</small>{REDESIGN_LINES[line].zh}</div>
          </div>
        </div>
      ) : null}

      {step === 2 ? (
        <div className="story-stage">
          <div className="story-stage-title">
            <span>03</span><div><h1>今天只帶走四個語氣</h1><p>左右滑，一次記一個。</p></div>
          </div>
          <div className="story-pattern-counter">{pattern + 1} / 4</div>
          <div className="story-pattern-card">
            <div className="story-pattern-mark">語氣 {String(pattern + 1).padStart(2, "0")}</div>
            <h2>{REDESIGN_PATTERNS[pattern].name}</h2>
            <p>{REDESIGN_PATTERNS[pattern].caption}</p>
            <div className="story-pattern-example"><strong>{REDESIGN_PATTERNS[pattern].jp}</strong><span>{REDESIGN_PATTERNS[pattern].zh}</span></div>
          </div>
          <div className="story-swipe-controls">
            <button type="button" disabled={!pattern} onClick={() => setPattern((p) => p - 1)}>←</button>
            <div>{REDESIGN_PATTERNS.map((_, idx) => <i key={idx} className={idx === pattern ? "active" : ""} />)}</div>
            <button type="button" disabled={pattern === 3} onClick={() => setPattern((p) => p + 1)}>→</button>
          </div>
        </div>
      ) : null}

      {step === 3 ? (
        <div className="story-stage">
          <div className="story-stage-title">
            <span>04</span><div><h1>聽懂了嗎？</h1><p>最後一題，選出最自然的句尾。</p></div>
          </div>
          <div className="story-quiz-card">
            <div className="story-quiz-audio"><Icon name="volume" size={22} /></div>
            <div className="story-quiz-jp">また<ruby>勝手<rt>かって</rt></ruby>に<ruby>直<rt>なお</rt></ruby>る＿＿</div>
            <div className="story-answer-grid">
              {["かも", "んじゃない？", "よね"].map((opt) => (
                <button
                  key={opt}
                  type="button"
                  className={answer ? (opt === "んじゃない？" ? "correct" : answer === opt ? "wrong" : "") : ""}
                  onClick={() => setAnswer(opt)}
                >{opt}</button>
              ))}
            </div>
            {answer ? <div className={`story-feedback ${answer === "んじゃない？" ? "ok" : "bad"}`}>{answer === "んじゃない？" ? "✓ 提出推測，很自然。" : "再聽一次：這裡是在提出推測。"}</div> : null}
          </div>
        </div>
      ) : null}

      {step === 4 ? (
        <div className="story-stage story-finish">
          <div className="story-finish-seal">済</div>
          <div className="story-eyebrow">LESSON COMPLETE</div>
          <h1>你已經聽得出<br />日常句尾的「態度」</h1>
          <p>不是背四條規則，而是知道什麼時候說哪一句。</p>
          <div className="story-earned">
            {REDESIGN_PATTERNS.map((item) => <span key={item.name}>{item.name}</span>)}
          </div>
          <div className="story-next-card"><span>下一步</span><strong>用 3 分鐘，把本課 8 個詞壓進記憶</strong><small>已為你建立碎片複習</small></div>
        </div>
      ) : null}
    </CourseShell>
  );
}

const STUDIO_MODULES = [
  { id: "vocab", icon: "字", label: "核心單字", count: "8" },
  { id: "story", icon: "文", label: "短篇情境", count: "1" },
  { id: "grammar", icon: "型", label: "文法焦點", count: "3" },
  { id: "dialogue", icon: "話", label: "角色對話", count: "4" },
  { id: "quiz", icon: "問", label: "理解考題", count: "5" },
];

function LessonAiBuilderPageV2({ navigate, onBack }) {
  const toast = useToast();
  const [phase, setPhase] = React.useState("brief");
  const [level, setLevel] = React.useState("N4");
  const [topic, setTopic] = React.useState("家庭洗衣");
  const [modules, setModules] = React.useState(["vocab", "story", "grammar", "dialogue", "quiz"]);
  const [tab, setTab] = React.useState("lesson");

  const generate = () => {
    setPhase("building");
    setTimeout(() => setPhase("preview"), 1200);
  };

  const footer = phase === "brief"
    ? <ZenButton variant="accent" block onClick={generate}><Icon name="sparkles" size={16} /> 生成課程藍圖</ZenButton>
    : phase === "preview"
      ? <ZenButton variant="primary" block onClick={() => { toast.push("已存入「我的課程」", "success"); navigate("/lesson/1"); }}>存成可上課版本</ZenButton>
      : null;

  return (
    <CourseShell title="Maho 課程工作室" mode="studio" progress={phase === "brief" ? "BRIEF" : phase === "building" ? "BUILD" : "PREVIEW"} onBack={onBack || (() => navigate("/hub"))} footer={footer}>
      {phase === "brief" ? (
        <div className="studio-v2">
          <div className="studio-v2-hero">
            <span className="studio-spark">✦</span>
            <div><small>AI COURSE STUDIO</small><h1>把一個教學想法<br />變成能上課的內容</h1></div>
          </div>
          <section className="studio-brief-card">
            <div className="studio-section-label"><span>01</span>學生程度</div>
            <div className="studio-levels">{["N5", "N4", "N3"].map((x) => <button key={x} className={level === x ? "active" : ""} onClick={() => setLevel(x)}>{x}<small>{x === "N5" ? "入門" : x === "N4" ? "生活短句" : "真實素材"}</small></button>)}</div>
          </section>
          <section className="studio-brief-card">
            <div className="studio-section-label"><span>02</span>這堂課要解決什麼？</div>
            <div className="studio-topic">
              <Icon name="edit" size={18} />
              <input value={topic} onChange={(e) => setTopic(e.target.value)} />
            </div>
            <div className="studio-topic-suggest">{["便利商店", "電車誤點", "家庭洗衣"].map((x) => <button key={x} onClick={() => setTopic(x)}>{x}</button>)}</div>
          </section>
          <section className="studio-brief-card">
            <div className="studio-section-label"><span>03</span>課程藍圖</div>
            <div className="studio-module-grid">
              {STUDIO_MODULES.map((item) => (
                <button key={item.id} className={modules.includes(item.id) ? "active" : ""} onClick={() => setModules((m) => m.includes(item.id) ? m.filter((x) => x !== item.id) : [...m, item.id])}>
                  <span>{item.icon}</span><strong>{item.label}</strong><small>{item.count} 項</small><i>{modules.includes(item.id) ? "✓" : "+"}</i>
                </button>
              ))}
            </div>
          </section>
        </div>
      ) : null}

      {phase === "building" ? (
        <div className="studio-building">
          <div className="studio-orbit"><span>ま</span><i /><i /><i /></div>
          <h1>正在搭建「{topic}」</h1>
          <p>{level} · 依照記憶負荷安排教材順序</p>
          <div className="studio-build-list">{STUDIO_MODULES.filter((x) => modules.includes(x.id)).map((item, idx) => <div key={item.id} className={idx < 3 ? "done" : ""}><span>{idx < 3 ? "✓" : "·"}</span>{item.label}</div>)}</div>
        </div>
      ) : null}

      {phase === "preview" ? (
        <div className="studio-preview">
          <div className="studio-preview-hero">
            <div><small>READY TO TEACH</small><h1>{topic}：聽懂真實短句</h1><p>{level} · 12 分鐘 · 5 個學習活動</p></div>
            <button onClick={() => setPhase("brief")}><Icon name="edit" size={16} /></button>
          </div>
          <div className="studio-preview-tabs">{[["lesson", "課程"], ["dialogue", "對話"], ["quiz", "測驗"]].map(([id, label]) => <button key={id} className={tab === id ? "active" : ""} onClick={() => setTab(id)}>{label}</button>)}</div>
          {tab === "lesson" ? (
            <div className="studio-outline">
              {["先聽：家庭洗衣對話", "拆解：かも／んじゃない？", "看懂：句尾語氣", "挑戰：5 題理解", "收尾：8 字碎片複習"].map((x, i) => <div key={x}><span>{i + 1}</span><strong>{x}</strong><small>{[2, 3, 3, 4, 3][i]} 分鐘</small></div>)}
            </div>
          ) : null}
          {tab === "dialogue" ? <div className="studio-dialogue-preview">{REDESIGN_LINES.slice(0, 3).map((x) => <div key={x.jp} className={x.side}><small>{x.who}</small><strong>{x.jp}</strong></div>)}</div> : null}
          {tab === "quiz" ? <div className="studio-quiz-preview"><small>QUESTION 1 / 5</small><h2>「かも」最接近哪個語氣？</h2>{["命令", "不確定", "確認"].map((x, i) => <button key={x} className={i === 1 ? "correct" : ""}>{x}</button>)}</div> : null}
          <button type="button" className="studio-regenerate" onClick={generate}>↻ 重產這一版</button>
        </div>
      ) : null}
    </CourseShell>
  );
}

const PULSE_CARDS = [
  ["乾燥", "かんそう", "烘乾、乾燥", "乾燥、またバカになったかも。"],
  ["干す", "ほす", "晾曬", "外に干す？"],
  ["畳む", "たたむ", "摺衣服", "洗濯物を畳む。"],
  ["直る", "なおる", "恢復、修好", "また勝手に直る。"],
];

function LessonIdleVocabPageV2({ navigate, onBack }) {
  const toast = useToast();
  const [phase, setPhase] = React.useState("start");
  const [idx, setIdx] = React.useState(0);
  const [picked, setPicked] = React.useState(null);
  const [missed, setMissed] = React.useState([]);
  const card = PULSE_CARDS[idx];

  const options = [card[2], ...PULSE_CARDS.filter((_, i) => i !== idx).slice(0, 2).map((x) => x[2])];
  const choose = (opt) => {
    setPicked(opt);
    if (opt !== card[2]) setMissed((m) => [...new Set([...m, card[0]])]);
  };
  const next = () => {
    if (idx === PULSE_CARDS.length - 1) setPhase("done");
    else { setIdx((i) => i + 1); setPicked(null); }
  };

  return (
    <CourseShell title="3 分鐘 Pulse" mode="pulse" progress={phase === "play" ? `${idx + 1}/${PULSE_CARDS.length}` : "TODAY"} onBack={onBack || (() => navigate("/hub"))}
      footer={phase === "start"
        ? <ZenButton variant="accent" block onClick={() => setPhase("play")}>開始今日 Pulse</ZenButton>
        : phase === "play" && picked
          ? <ZenButton variant="primary" block onClick={next}>{idx === PULSE_CARDS.length - 1 ? "看今日成果" : "下一張"}</ZenButton>
          : null}
    >
      {phase === "start" ? (
        <div className="pulse-start">
          <div className="pulse-ring"><span>3</span><small>DAY STREAK</small></div>
          <div className="pulse-start-copy"><small>只要三分鐘</small><h1>把昨天學的<br />留在腦裡</h1><p>今天只複習「家庭洗衣」的 4 個關鍵詞。</p></div>
          <div className="pulse-plan"><div><span>字</span><strong>看字辨義</strong><small>2 張</small></div><div><span>♪</span><strong>聽音辨義</strong><small>2 張</small></div></div>
          <div className="pulse-no-pressure">無愛心 · 無排名 · 做完就走</div>
        </div>
      ) : null}
      {phase === "play" ? (
        <div className="pulse-play">
          <div className="pulse-progress"><i style={{ width: `${((idx + (picked ? 1 : 0)) / PULSE_CARDS.length) * 100}%` }} /></div>
          <div className="pulse-card">
            <button type="button" className="pulse-sound" onClick={() => toast.push(`（Mock）播放 ${card[1]}`, "success")}><Icon name="volume" size={22} /></button>
            <small>{idx % 2 ? "先聽，再選意思" : "這個詞是什麼意思？"}</small>
            {idx % 2 ? <button className="pulse-big-audio" onClick={() => toast.push(`（Mock）播放 ${card[1]}`, "success")}><Icon name="volume" size={32} /></button> : <><h1>{card[0]}</h1><p>{card[1]}</p></>}
          </div>
          <div className="pulse-options">
            {options.map((opt) => <button key={opt} className={picked ? (opt === card[2] ? "correct" : picked === opt ? "wrong" : "") : ""} onClick={() => choose(opt)}>{opt}</button>)}
          </div>
          {picked ? <div className={`pulse-memory ${picked === card[2] ? "ok" : "bad"}`}><strong>{picked === card[2] ? "記住了 ✓" : `答案是「${card[2]}」`}</strong><span>{card[3]}</span></div> : null}
        </div>
      ) : null}
      {phase === "done" ? (
        <div className="pulse-done">
          <div className="pulse-done-mark">✓</div><small>PULSE COMPLETE</small><h1>三分鐘，完成。</h1><p>今天的記憶已經補強；明天會再挑最容易忘的。</p>
          <div className="pulse-score"><span><strong>{PULSE_CARDS.length - missed.length}</strong>熟悉</span><span><strong>{missed.length}</strong>待加強</span></div>
          {missed.length ? <div className="pulse-missed"><small>明天優先</small>{missed.map((x) => <span key={x}>{x}</span>)}</div> : null}
          <ZenButton variant="outline" block onClick={() => { setIdx(0); setPicked(null); setPhase("play"); }}>只重練錯字</ZenButton>
          <ZenButton variant="ghost" block onClick={() => navigate("/lesson/unit")}>回課程路徑</ZenButton>
        </div>
      ) : null}
    </CourseShell>
  );
}

const TRAIL_NODES = [
  { icon: "耳", title: "先聽情境", sub: "家庭洗衣", state: "done", side: "left" },
  { icon: "＿", title: "句尾填空", sub: "你在這裡", state: "current", side: "right" },
  { icon: "♪", title: "聽力辨義", sub: "4 題", state: "locked", side: "left" },
  { icon: "↻", title: "個人化複習", sub: "依錯題調整", state: "locked", side: "right" },
  { icon: "印", title: "單元驗收", sub: "完成取得朱印", state: "locked", side: "left" },
];

function LessonUnitPathPageV2({ navigate, onBack }) {
  const [view, setView] = React.useState("trail");
  const [idx, setIdx] = React.useState(0);
  const [selected, setSelected] = React.useState(null);
  const [checked, setChecked] = React.useState(false);
  const questions = [
    ["乾燥、またバカになった", "。", ["かも", "よね", "ください"], "かも", "可能、也許"],
    ["また勝手に直る", "", ["んじゃない？", "でした", "なさい"], "んじゃない？", "提出推測"],
    ["嫌いだ", "。", ["よね", "かも", "ます"], "よね", "向對方確認"],
  ];
  const q = questions[idx];

  const next = () => {
    if (idx === questions.length - 1) setView("unlock");
    else { setIdx((i) => i + 1); setSelected(null); setChecked(false); }
  };

  return (
    <CourseShell title={view === "trail" ? "日常口語 · Unit 1" : "句尾填空"} mode="trail" progress={view === "trail" ? "38%" : `${idx + 1}/${questions.length}`} onBack={view === "trail" ? (onBack || (() => navigate("/hub"))) : () => setView("trail")}
      footer={view === "fill"
        ? !checked
          ? <ZenButton variant="primary" block disabled={!selected} onClick={() => setChecked(true)}>檢查答案</ZenButton>
          : <ZenButton variant="primary" block onClick={next}>{idx === questions.length - 1 ? "完成關卡" : "下一題"}</ZenButton>
        : null}
    >
      {view === "trail" ? (
        <div className="trail-v2">
          <div className="trail-unit-card">
            <div><small>SECTION 1 · UNIT 1</small><h1>聽懂句尾語氣</h1><p>學會不確定、推測與確認</p></div>
            <button type="button">課程指南 <span>›</span></button>
          </div>
          <div className="trail-map">
            <div className="trail-path-line" />
            {TRAIL_NODES.map((node, i) => (
              <button key={node.title} type="button" disabled={node.state === "locked"} className={`trail-node ${node.side} ${node.state}`} onClick={() => node.state === "current" ? setView("fill") : node.state === "done" ? navigate("/lesson/1") : null}>
                <span className="trail-node-orb">{node.state === "done" ? "✓" : node.icon}</span>
                <span className="trail-node-copy"><strong>{node.title}</strong><small>{node.sub}</small></span>
                {node.state === "current" ? <i>START</i> : null}
              </button>
            ))}
          </div>
          <div className="trail-today"><span>今日建議</span><strong>完成「句尾填空」</strong><small>約 4 分鐘 · 3 題</small><button onClick={() => setView("fill")}>繼續學習 →</button></div>
        </div>
      ) : null}
      {view === "fill" ? (
        <div className="fill-v2">
          <div className="fill-v2-progress"><i style={{ width: `${((idx + (checked ? 1 : 0)) / questions.length) * 100}%` }} /></div>
          <div className="fill-v2-kicker">選擇最自然的句尾</div>
          <div className="fill-v2-sentence"><span>{q[0]}</span><button className={selected ? "filled" : ""}>{selected || "放入詞塊"}</button><span>{q[1]}</span></div>
          <div className="fill-v2-bank">{q[2].map((opt) => <button key={opt} disabled={checked} className={`${selected === opt ? "selected" : ""}${checked && opt === q[3] ? " correct" : ""}${checked && selected === opt && opt !== q[3] ? " wrong" : ""}`} onClick={() => setSelected(opt)}>{opt}</button>)}</div>
          {checked ? <div className={`fill-v2-feedback ${selected === q[3] ? "ok" : "bad"}`}><strong>{selected === q[3] ? "很自然 ✓" : `正解：${q[3]}`}</strong><span>{q[4]}</span><small>中文在答題後才出現：{["烘乾可能又壞了。", "應該又會自己恢復吧？", "你很討厭吧。"][idx]}</small></div> : <div className="fill-v2-hint">先把詞塊放進句子，再檢查。</div>}
        </div>
      ) : null}
      {view === "unlock" ? (
        <div className="trail-unlock"><div className="trail-unlock-orb">♪</div><small>NEW NODE UNLOCKED</small><h1>聽力辨義<br />已解鎖</h1><p>填空完成後，馬上用耳朵確認自己真的聽得懂。</p><ZenButton variant="primary" block onClick={() => setView("trail")}>回路徑看進度</ZenButton><ZenButton variant="ghost" block onClick={() => navigate("/lesson/idle")}>先做 3 分鐘複習</ZenButton></div>
      ) : null}
    </CourseShell>
  );
}

Object.assign(window, {
  LessonCoursePage: LessonCoursePageV2,
  LessonAiBuilderPage: LessonAiBuilderPageV2,
  LessonIdleVocabPage: LessonIdleVocabPageV2,
  LessonUnitPathPage: LessonUnitPathPageV2,
});