/* Lesson Course Proposal — Redmine #12669
 * 第一堂：聽懂日常短句與句尾語氣（洗衣場景）
 * 五步驟同一頁流：對話 → 解析 → 句型 → 練習 → 完成
 */

const LESSON_COURSE_SEED = {
  id: "lesson-1",
  number: 1,
  title: "聽懂日常短句與句尾語氣",
  scene: "家庭洗衣",
  duration: "約 10 分鐘",
  steps: [
    { id: "dialogue", label: "對話" },
    { id: "analyze", label: "解析" },
    { id: "patterns", label: "句型" },
    { id: "practice", label: "練習" },
    { id: "summary", label: "完成" },
  ],
  dialogue: [
    {
      id: "d1",
      speaker: "充",
      side: "left",
      japanese: "あれ？さっき終わらなかった？",
      reading: "あれ？さっきおわらなかった？",
      rubyHtml: "あれ？さっき<ruby>終<rt>お</rt></ruby>わらなかった？",
      translation: "咦？剛才不是洗完了嗎？",
      note: "洗濯",
    },
    {
      id: "d2",
      speaker: "咲子",
      side: "right",
      japanese: "うん……乾燥、またバカになったかも。",
      reading: "うん……かんそう、またバカになったかも。",
      rubyHtml: "うん……<ruby>乾燥<rt>かんそう</rt></ruby>、またバカになったかも。",
      translation: "嗯……烘乾功能可能又故障了。",
    },
    {
      id: "d3",
      speaker: "充",
      side: "left",
      japanese: "また勝手に直るんじゃない？",
      reading: "またかってになおるんじゃない？",
      rubyHtml: "また<ruby>勝手<rt>かって</rt></ruby>に<ruby>直<rt>なお</rt></ruby>るんじゃない？",
      translation: "應該又會自己恢復正常吧？",
    },
    {
      id: "d4",
      speaker: "咲子",
      side: "right",
      japanese: "１回で乾かないの。",
      reading: "いっかいでかわかないの。",
      rubyHtml: "<ruby>１回<rt>いっかい</rt></ruby>で<ruby>乾<rt>かわ</rt></ruby>かないの。",
      translation: "烘一次根本乾不了呢。",
    },
    {
      id: "d5",
      speaker: "充",
      side: "left",
      japanese: "外に干す？",
      reading: "そとにほす？",
      rubyHtml: "<ruby>外<rt>そと</rt></ruby>に<ruby>干<rt>ほ</rt></ruby>す？",
      translation: "要曬在外面嗎？",
    },
    {
      id: "d6",
      speaker: "咲子",
      side: "right",
      japanese: "嫌いだよね。畳むのは？",
      reading: "きらいだよね。たたむのは？",
      rubyHtml: "<ruby>嫌<rt>きら</rt></ruby>いだよね。<ruby>畳<rt>たた</rt></ruby>むのは？",
      translation: "你很討厭吧。那摺衣服呢？",
    },
  ],
  analyses: {
    d1: {
      vocabulary: [
        { word: "さっき", reading: "さっき", meaning: "剛才" },
        { word: "終わる", reading: "おわる", meaning: "結束、做完" },
      ],
      grammar: { pattern: "普通形疑問句", meaning: "用升調提問，不一定要「か」" },
      translation: "剛才不是（已經）結束了嗎？",
    },
    d2: {
      vocabulary: [
        { word: "乾燥", reading: "かんそう", meaning: "烘乾功能" },
        { word: "バカになる", reading: "バカになる", meaning: "故障、不正常" },
        { word: "かも", reading: "かも", meaning: "可能、也許" },
      ],
      grammar: { pattern: "かも", meaning: "可能、也許（不確定語氣）" },
      translation: "烘乾功能可能又故障了。",
    },
    d3: {
      vocabulary: [
        { word: "勝手に", reading: "かってに", meaning: "擅自、自己（就）" },
        { word: "直る", reading: "なおる", meaning: "恢復、修好" },
      ],
      grammar: { pattern: "んじゃない？", meaning: "推測或提出自己的看法" },
      translation: "應該又會自己恢復正常吧？",
    },
    d4: {
      vocabulary: [
        { word: "１回", reading: "いっかい", meaning: "一次" },
        { word: "乾く", reading: "かわく", meaning: "乾" },
        { word: "の", reading: "の", meaning: "語氣助詞（說明／求同意）" },
      ],
      grammar: { pattern: "の", meaning: "口語語氣，帶說明或輕微情緒" },
      translation: "烘一次根本乾不了呢。",
    },
    d5: {
      vocabulary: [
        { word: "外", reading: "そと", meaning: "外面" },
        { word: "干す", reading: "ほす", meaning: "晾曬" },
      ],
      grammar: { pattern: "普通形疑問句", meaning: "省略主詞，靠句尾語調提問" },
      translation: "要曬在外面嗎？",
    },
    d6: {
      vocabulary: [
        { word: "嫌い", reading: "きらい", meaning: "討厭" },
        { word: "よね", reading: "よね", meaning: "向對方確認" },
        { word: "畳む", reading: "たたむ", meaning: "摺（衣服）" },
      ],
      grammar: { pattern: "よね", meaning: "自己已有想法，再向對方確認" },
      translation: "你很討厭吧。那摺衣服呢？",
    },
  },
  patterns: [
    {
      id: "p1",
      pattern: "かも",
      meaning: "表示「可能、也許」。",
      exampleFromLesson: { jp: "壊れたかも。", zh: "可能壞掉了。" },
      newExample: { jp: "雨が降るかも。", zh: "也許會下雨。" },
    },
    {
      id: "p2",
      pattern: "んじゃない？",
      meaning: "表示推測或提出自己的看法。",
      exampleFromLesson: { jp: "また直るんじゃない？", zh: "應該又會恢復正常吧？" },
      newExample: { jp: "もう着くんじゃない？", zh: "該不會快到了吧？" },
    },
    {
      id: "p3",
      pattern: "よね",
      meaning: "自己已經有想法，再向對方確認。",
      exampleFromLesson: { jp: "嫌いだよね。", zh: "你很討厭吧。" },
      newExample: { jp: "今日は寒いよね。", zh: "今天很冷吧。" },
    },
    {
      id: "p4",
      pattern: "普通形疑問句",
      meaning: "日常對話不一定使用「か」，只要提高句尾語調。",
      exampleFromLesson: { jp: "外に干す？", zh: "要曬在外面嗎？" },
      newExample: { jp: "終わった？", zh: "結束了嗎？" },
    },
  ],
  quizzes: [
    {
      id: "q1",
      type: "meaning",
      focus: "かも",
      promptRuby: "<ruby>乾燥<rt>かんそう</rt></ruby>、またバカになったかも。",
      prompt: "乾燥、またバカになったかも。",
      options: [
        { id: "a", text: "烘乾功能可能又故障了", correct: true },
        { id: "b", text: "已經把烘乾功能修好了", correct: false },
        { id: "c", text: "不需要使用烘乾功能", correct: false },
      ],
      explain: "「かも」＝可能、也許，語氣不確定。",
    },
    {
      id: "q2",
      type: "ending",
      focus: "んじゃない？",
      promptRuby: "また<ruby>勝手<rt>かって</rt></ruby>に<ruby>直<rt>なお</rt></ruby>る＿＿。",
      prompt: "また勝手に直る＿＿。",
      options: [
        { id: "a", text: "んじゃない？", correct: true },
        { id: "b", text: "ください", correct: false },
        { id: "c", text: "でしたか", correct: false },
      ],
      explain: "「んじゃない？」用來提出推測／自己的看法。",
    },
    {
      id: "q3",
      type: "ending",
      focus: "よね",
      promptRuby: "<ruby>嫌<rt>きら</rt></ruby>いだ＿＿。",
      prompt: "嫌いだ＿＿。",
      options: [
        { id: "a", text: "かも", correct: false },
        { id: "b", text: "よね", correct: true },
        { id: "c", text: "ください", correct: false },
      ],
      explain: "「よね」是帶著自己的想法，再向對方確認。",
    },
    {
      id: "q4",
      type: "meaning",
      focus: "普通形疑問句",
      promptRuby: "<ruby>終<rt>お</rt></ruby>わった？",
      prompt: "終わった？",
      options: [
        { id: "a", text: "結束了嗎？", correct: true },
        { id: "b", text: "已經結束了（肯定）", correct: false },
        { id: "c", text: "請結束吧", correct: false },
      ],
      explain: "沒有「か」也能靠句尾語調變成疑問句。",
    },
    {
      id: "q5",
      type: "meaning",
      focus: "字幕理解",
      promptRuby: "<ruby>外<rt>そと</rt></ruby>に<ruby>干<rt>ほ</rt></ruby>す？",
      prompt: "外に干す？",
      options: [
        { id: "a", text: "要曬在外面嗎？", correct: true },
        { id: "b", text: "已經曬在外面了", correct: false },
        { id: "c", text: "請不要曬在外面", correct: false },
      ],
      explain: "普通形＋升調＝疑問句，主詞常省略。",
    },
  ],
  takeaways: [
    "用「かも」表達不確定",
    "用「んじゃない？」提出推測",
    "用「よね」向對方確認",
    "聽懂沒有「か」的日常疑問句",
    "理解日語會省略主詞與受詞",
  ],
};

function LessonCoursePage({ navigate, onBack }) {
  const toast = useToast();
  const lesson = LESSON_COURSE_SEED;
  const [step, setStep] = React.useState(0);
  const [showZh, setShowZh] = React.useState(false);
  const [selectedLine, setSelectedLine] = React.useState(lesson.dialogue[1].id);
  const [quizIdx, setQuizIdx] = React.useState(0);
  const [answers, setAnswers] = React.useState({});
  const [maxReached, setMaxReached] = React.useState(0);

  const goStep = (idx) => {
    if (idx < 0 || idx >= lesson.steps.length) return;
    if (idx > maxReached + 1) return;
    setStep(idx);
    setMaxReached((m) => Math.max(m, idx));
  };

  const nextStep = () => goStep(step + 1);

  const selectQuiz = (qid, oid) => {
    if (answers[qid]) return;
    const q = lesson.quizzes.find((x) => x.id === qid);
    const opt = q.options.find((o) => o.id === oid);
    setAnswers((a) => ({ ...a, [qid]: { optionId: oid, correct: !!opt.correct } }));
  };

  const quiz = lesson.quizzes[quizIdx];
  const answered = answers[quiz?.id];
  const correctCount = lesson.quizzes.filter((q) => answers[q.id]?.correct).length;
  const allAnswered = lesson.quizzes.every((q) => answers[q.id]);

  return (
    <div className="zen-page lesson-page">
      <PageHeader
        title="第一堂課程"
        onBack={onBack || (() => navigate("/hub"))}
      />
      <div className="zen-content lesson-content">
        <div className="lesson-hero">
          <div className="lesson-kicker">提案 mockup · 洗衣場景</div>
          <h1 className="lesson-title">{lesson.title}</h1>
          <p className="lesson-meta">
            <span>{lesson.scene}</span>
            <span>·</span>
            <span>{lesson.duration}</span>
          </p>
        </div>

        <div className="lesson-steps" role="tablist" aria-label="課程步驟">
          {lesson.steps.map((s, i) => (
            <button
              key={s.id}
              type="button"
              role="tab"
              aria-selected={step === i}
              className={`lesson-step-chip${step === i ? " is-active" : ""}${i <= maxReached ? " is-reached" : ""}`}
              onClick={() => goStep(i)}
              disabled={i > maxReached + 1}
            >
              <span className="lesson-step-num">{i + 1}</span>
              <span className="lesson-step-label">{s.label}</span>
            </button>
          ))}
        </div>

        {step === 0 ? (
          <section className="lesson-panel">
            <div className="lesson-panel-head">
              <h2>步驟一：先看對話</h2>
              <p>先聽／看對話，不要急著看中文。</p>
            </div>
            <div className="lesson-toolbar">
              <ZenButton
                variant="outline"
                sm
                onClick={() => toast.push("（Mock）播放整段對話", "success")}
              >
                <Icon name="volume" size={14} /> 播放對話
              </ZenButton>
              <ZenButton
                variant={showZh ? "primary" : "outline"}
                sm
                onClick={() => setShowZh((v) => !v)}
              >
                {showZh ? "隱藏中文" : "顯示中文"}
              </ZenButton>
            </div>
            <div className="lesson-dialogue">
              {lesson.dialogue.map((line) => (
                <div key={line.id} className={`lesson-bubble lesson-bubble--${line.side}`}>
                  <div className="lesson-speaker">{line.speaker}</div>
                  <div className="lesson-bubble-body">
                    <div
                      className="lesson-jp"
                      dangerouslySetInnerHTML={{ __html: line.rubyHtml }}
                    />
                    {line.note ? <div className="lesson-note">（{line.note}）</div> : null}
                    {showZh ? <div className="lesson-zh">{line.translation}</div> : null}
                    <button
                      type="button"
                      className="lesson-speak-mini"
                      onClick={() => toast.push(`（Mock）朗讀：${line.japanese}`, "success")}
                    >
                      <Icon name="volume" size={14} />
                    </button>
                  </div>
                </div>
              ))}
            </div>
            <p className="lesson-hint">中文預設隱藏，先靠讀音與語氣判斷意思。</p>
            <ZenButton variant="primary" block onClick={nextStep}>
              下一步：點句子看解析
            </ZenButton>
          </section>
        ) : null}

        {step === 1 ? (
          <section className="lesson-panel">
            <div className="lesson-panel-head">
              <h2>步驟二：點句子看解析</h2>
              <p>每句只看單字、一個核心文法、自然中文意思。</p>
            </div>
            <div className="lesson-line-list">
              {lesson.dialogue.map((line) => (
                <button
                  key={line.id}
                  type="button"
                  className={`lesson-line-btn${selectedLine === line.id ? " is-active" : ""}`}
                  onClick={() => setSelectedLine(line.id)}
                >
                  <span className="lesson-line-speaker">{line.speaker}</span>
                  <span
                    className="lesson-line-jp"
                    dangerouslySetInnerHTML={{ __html: line.rubyHtml }}
                  />
                </button>
              ))}
            </div>
            {(() => {
              const line = lesson.dialogue.find((d) => d.id === selectedLine);
              const analysis = lesson.analyses[selectedLine];
              if (!line || !analysis) return null;
              return (
                <div className="lesson-analysis-card">
                  <div
                    className="lesson-analysis-jp"
                    dangerouslySetInnerHTML={{ __html: line.rubyHtml }}
                  />
                  <div className="lesson-analysis-block">
                    <div className="lesson-block-label">單字</div>
                    <ul className="lesson-vocab-list">
                      {analysis.vocabulary.map((v) => (
                        <li key={v.word}>
                          <strong>{v.word}</strong>
                          <span className="muted">（{v.reading}）</span>
                          <span>{v.meaning}</span>
                        </li>
                      ))}
                    </ul>
                  </div>
                  <div className="lesson-analysis-block">
                    <div className="lesson-block-label">核心文法</div>
                    <div className="lesson-grammar-chip">{analysis.grammar.pattern}</div>
                    <p>{analysis.grammar.meaning}</p>
                  </div>
                  <div className="lesson-analysis-block">
                    <div className="lesson-block-label">完整意思</div>
                    <p className="lesson-full-meaning">{analysis.translation}</p>
                  </div>
                </div>
              );
            })()}
            <ZenButton variant="primary" block onClick={nextStep}>
              下一步：認識今日句型
            </ZenButton>
          </section>
        ) : null}

        {step === 2 ? (
          <section className="lesson-panel">
            <div className="lesson-panel-head">
              <h2>步驟三：認識今天的四個句型</h2>
              <p>第一堂只記這四個就夠了。</p>
            </div>
            <div className="lesson-pattern-list">
              {lesson.patterns.map((p) => (
                <article key={p.id} className="lesson-pattern-card">
                  <div className="lesson-pattern-name">{p.pattern}</div>
                  <p className="lesson-pattern-meaning">{p.meaning}</p>
                  <div className="lesson-ex">
                    <div className="lesson-ex-label">字幕例句</div>
                    <div className="lesson-ex-jp">{p.exampleFromLesson.jp}</div>
                    <div className="lesson-ex-zh">{p.exampleFromLesson.zh}</div>
                  </div>
                  <div className="lesson-ex">
                    <div className="lesson-ex-label">新例句</div>
                    <div className="lesson-ex-jp">{p.newExample.jp}</div>
                    <div className="lesson-ex-zh">{p.newExample.zh}</div>
                  </div>
                </article>
              ))}
            </div>
            <ZenButton variant="primary" block onClick={nextStep}>
              下一步：做五題練習
            </ZenButton>
          </section>
        ) : null}

        {step === 3 ? (
          <section className="lesson-panel">
            <div className="lesson-panel-head">
              <h2>步驟四：做五題簡單練習</h2>
              <p>兩種題型：選意思／選句尾。答錯只給一句解釋。</p>
            </div>
            <div className="lesson-quiz-progress">
              {lesson.quizzes.map((q, i) => (
                <button
                  key={q.id}
                  type="button"
                  className={`lesson-quiz-dot${i === quizIdx ? " is-current" : ""}${answers[q.id] ? (answers[q.id].correct ? " is-ok" : " is-bad") : ""}`}
                  onClick={() => setQuizIdx(i)}
                  aria-label={`第 ${i + 1} 題`}
                >
                  {i + 1}
                </button>
              ))}
            </div>
            <div className="lesson-quiz-card">
              <div className="lesson-quiz-focus">重點：{quiz.focus}</div>
              <div
                className="lesson-quiz-prompt"
                dangerouslySetInnerHTML={{ __html: quiz.promptRuby }}
              />
              <div className="lesson-quiz-options">
                {quiz.options.map((opt) => {
                  const picked = answered?.optionId === opt.id;
                  const showState = !!answered;
                  let cls = "lesson-quiz-opt";
                  if (showState && opt.correct) cls += " is-correct";
                  if (showState && picked && !opt.correct) cls += " is-wrong";
                  if (picked) cls += " is-picked";
                  return (
                    <button
                      key={opt.id}
                      type="button"
                      className={cls}
                      onClick={() => selectQuiz(quiz.id, opt.id)}
                    >
                      {opt.text}
                    </button>
                  );
                })}
              </div>
              {answered ? (
                <div className={`lesson-quiz-explain${answered.correct ? " ok" : " bad"}`}>
                  {answered.correct ? "答對了。" : "再想一下。"}
                  {" "}{quiz.explain}
                </div>
              ) : null}
            </div>
            <div className="lesson-quiz-nav">
              <ZenButton
                variant="outline"
                sm
                disabled={quizIdx === 0}
                onClick={() => setQuizIdx((i) => Math.max(0, i - 1))}
              >
                上一題
              </ZenButton>
              {quizIdx < lesson.quizzes.length - 1 ? (
                <ZenButton
                  variant="primary"
                  sm
                  disabled={!answered}
                  onClick={() => setQuizIdx((i) => i + 1)}
                >
                  下一題
                </ZenButton>
              ) : (
                <ZenButton
                  variant="primary"
                  sm
                  disabled={!allAnswered}
                  onClick={nextStep}
                >
                  看完成摘要
                </ZenButton>
              )}
            </div>
          </section>
        ) : null}

        {step === 4 ? (
          <section className="lesson-panel">
            <div className="lesson-panel-head">
              <h2>步驟五：完成本課</h2>
              <p>今天只要記住這幾條口語規則。</p>
            </div>
            <div className="lesson-summary-card">
              <div className="lesson-summary-score">
                練習結果 <strong>{correctCount}</strong> / {lesson.quizzes.length}
              </div>
              <div className="lesson-block-label">今天學會</div>
              <ul className="lesson-takeaways">
                {lesson.takeaways.map((t) => (
                  <li key={t}>{t}</li>
                ))}
              </ul>
            </div>
            <div className="lesson-finish-actions">
              <ZenButton
                variant="outline"
                block
                onClick={() => {
                  setAnswers({});
                  setQuizIdx(0);
                  setStep(3);
                  setMaxReached(3);
                  toast.push("再練一次練習題", "success");
                }}
              >
                再練一次
              </ZenButton>
              <ZenButton
                variant="primary"
                block
                onClick={() => toast.push("（Mock）已完成本課", "success")}
              >
                完成課程
              </ZenButton>
            </div>
          </section>
        ) : null}
      </div>
    </div>
  );
}

Object.assign(window, { LessonCoursePage, LESSON_COURSE_SEED });