/* 單元路徑 + 填空題 — Redmine #12672
 * 對照 Duolingo Path：Section → Unit → Level → Lesson
 * Maho 改良：振假名、一句文法提示、答後才給中文、路徑更乾淨
 */

const UNIT_PATH_SEED = {
  section: "Section 1 · 日常口語",
  unit: {
    id: "u1",
    no: 1,
    title: "聽懂句尾語氣",
    guidebook: "かも／んじゃない？／よね／普通形疑問",
  },
  nodes: [
    { id: "n1", kind: "learn", label: "認識", status: "done", tip: "看字幕對話" },
    { id: "n2", kind: "fill", label: "填空", status: "current", tip: "選詞完成句子" },
    { id: "n3", kind: "listen", label: "聽力", status: "locked", tip: "聽完選意思" },
    { id: "n4", kind: "review", label: "複習", status: "locked", tip: "混題加強" },
    { id: "n5", kind: "checkpoint", label: "關卡", status: "locked", tip: "本單元驗收" },
  ],
};

const FILL_QUESTIONS = [
  {
    id: "f1",
    promptBefore: "乾燥、またバカになった",
    promptAfter: "。",
    rubyBefore: "<ruby>乾燥<rt>かんそう</rt></ruby>、またバカになった",
    tiles: ["かも", "ください", "でした"],
    answer: "かも",
    tip: "「かも」＝可能、也許",
    translation: "烘乾功能可能又故障了。",
  },
  {
    id: "f2",
    promptBefore: "また勝手に直る",
    promptAfter: "",
    rubyBefore: "また<ruby>勝手<rt>かって</rt></ruby>に<ruby>直<rt>なお</rt></ruby>る",
    tiles: ["んじゃない？", "ましょう", "ください"],
    answer: "んじゃない？",
    tip: "提出自己的推測看法",
    translation: "應該又會自己恢復正常吧？",
  },
  {
    id: "f3",
    promptBefore: "嫌いだ",
    promptAfter: "。",
    rubyBefore: "<ruby>嫌<rt>きら</rt></ruby>いだ",
    tiles: ["よね", "かも", "なさい"],
    answer: "よね",
    tip: "自己有想法，再跟對方確認",
    translation: "你很討厭吧。",
  },
  {
    id: "f4",
    promptBefore: "外に干す",
    promptAfter: "",
    rubyBefore: "<ruby>外<rt>そと</rt></ruby>に<ruby>干<rt>ほ</rt></ruby>す",
    tiles: ["？", "か。", "よ。"],
    answer: "？",
    tip: "日常疑問常靠語調，不一定加「か」",
    translation: "要曬在外面嗎？",
  },
];

function LessonUnitPathPage({ navigate, onBack }) {
  const toast = useToast();
  const [view, setView] = React.useState("path"); // path | fill | result
  const [qIdx, setQIdx] = React.useState(0);
  const [selected, setSelected] = React.useState(null);
  const [checked, setChecked] = React.useState(false);
  const [score, setScore] = React.useState(0);
  const [nodes, setNodes] = React.useState(UNIT_PATH_SEED.nodes);

  const q = FILL_QUESTIONS[qIdx];
  const isCorrect = selected === q?.answer;

  const openFill = () => {
    setView("fill");
    setQIdx(0);
    setSelected(null);
    setChecked(false);
    setScore(0);
  };

  const checkAnswer = () => {
    if (!selected) return;
    setChecked(true);
    if (selected === q.answer) setScore((s) => s + 1);
  };

  const nextFill = () => {
    if (qIdx >= FILL_QUESTIONS.length - 1) {
      setNodes((prev) => prev.map((n) => {
        if (n.id === "n2") return { ...n, status: "done" };
        if (n.id === "n3") return { ...n, status: "current" };
        return n;
      }));
      setView("result");
      return;
    }
    setQIdx((i) => i + 1);
    setSelected(null);
    setChecked(false);
  };

  return (
    <div className="zen-page lesson-page unit-path-page">
      <PageHeader
        title={view === "path" ? "單元路徑" : "填空練習"}
        onBack={
          view === "path"
            ? (onBack || (() => navigate("/hub")))
            : () => setView("path")
        }
      />
      <div className="zen-content lesson-content">
        {view === "path" ? (
          <>
            <div className="unit-banner">
              <div className="unit-banner-section">{UNIT_PATH_SEED.section}</div>
              <div className="unit-banner-title">
                Unit {UNIT_PATH_SEED.unit.no} · {UNIT_PATH_SEED.unit.title}
              </div>
              <p className="unit-banner-guide">Guidebook：{UNIT_PATH_SEED.unit.guidebook}</p>
            </div>

            <section className="lesson-panel">
              <div className="lesson-panel-head">
                <h2>比 Duolingo 更貼日文學習</h2>
                <p>保留 Path 節奏，但每關都有振假名、一句文法、答後才給中文。</p>
              </div>

              <div className="unit-compare">
                <div>
                  <div className="unit-compare-label">Duolingo</div>
                  <ul>
                    <li>Path：Section→Unit→Level</li>
                    <li>關卡混題、愛心／XP</li>
                    <li>說明偏短、漢字支援弱</li>
                  </ul>
                </div>
                <div>
                  <div className="unit-compare-label">Maho 提案</div>
                  <ul>
                    <li>同樣一條路徑，關卡語意清楚</li>
                    <li>填空為主，聽力／複習穿插</li>
                    <li>振假名＋文法 tip＋答後翻譯</li>
                  </ul>
                </div>
              </div>

              <div className="unit-path">
                {nodes.map((n, i) => (
                  <React.Fragment key={n.id}>
                    {i > 0 ? <div className="unit-path-line" /> : null}
                    <button
                      type="button"
                      className={`unit-node unit-node--${n.kind} is-${n.status}`}
                      disabled={n.status === "locked"}
                      onClick={() => {
                        if (n.kind === "fill" && n.status !== "locked") openFill();
                        else if (n.kind === "learn" && n.status === "done") navigate("/lesson/1");
                        else toast.push(`（Mock）${n.label}：${n.tip}`, "success");
                      }}
                    >
                      <span className="unit-node-icon">
                        {n.kind === "learn" ? "あ" : n.kind === "fill" ? "＿" : n.kind === "listen" ? "♪" : n.kind === "review" ? "↻" : "★"}
                      </span>
                      <span className="unit-node-label">{n.label}</span>
                      <span className="unit-node-tip">{n.tip}</span>
                    </button>
                  </React.Fragment>
                ))}
              </div>

              <ZenButton variant="primary" block onClick={openFill}>
                開始目前關卡：填空
              </ZenButton>
            </section>
          </>
        ) : null}

        {view === "fill" && q ? (
          <section className="lesson-panel">
            <div className="idle-progress">
              <div className="idle-progress-track">
                <div
                  className="idle-progress-fill"
                  style={{ width: `${((qIdx + (checked ? 1 : 0)) / FILL_QUESTIONS.length) * 100}%` }}
                />
              </div>
              <span>{qIdx + 1} / {FILL_QUESTIONS.length}</span>
            </div>

            <div className="fill-prompt">
              <div className="fill-label">選詞填空</div>
              <div className="fill-sentence">
                <span dangerouslySetInnerHTML={{ __html: q.rubyBefore }} />
                <span className={`fill-blank${selected ? " has-value" : ""}`}>
                  {selected || "＿＿"}
                </span>
                <span>{q.promptAfter}</span>
              </div>
            </div>

            <div className="fill-tiles">
              {q.tiles.map((tile) => (
                <button
                  key={tile}
                  type="button"
                  className={`fill-tile${selected === tile ? " is-selected" : ""}`}
                  disabled={checked}
                  onClick={() => setSelected(tile)}
                >
                  {tile}
                </button>
              ))}
            </div>

            {checked ? (
              <div className={`lesson-quiz-explain${isCorrect ? " ok" : " bad"}`}>
                <div>{isCorrect ? "答對了。" : `正解：${q.answer}`}</div>
                <div>{q.tip}</div>
                <div className="fill-zh">中文：{q.translation}</div>
              </div>
            ) : null}

            {!checked ? (
              <ZenButton variant="primary" block disabled={!selected} onClick={checkAnswer}>
                檢查答案
              </ZenButton>
            ) : (
              <ZenButton variant="primary" block onClick={nextFill}>
                {qIdx >= FILL_QUESTIONS.length - 1 ? "完成本關" : "下一題"}
              </ZenButton>
            )}
          </section>
        ) : null}

        {view === "result" ? (
          <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>{score}</strong> / {FILL_QUESTIONS.length}
              </div>
              <ul className="lesson-takeaways">
                <li>填空只練句尾／關鍵詞，不堆長翻譯題</li>
                <li>答錯立刻給一句 tip，不開長文法頁</li>
                <li>中文在檢查後才出現，避免偷看</li>
              </ul>
            </div>
            <div className="lesson-finish-actions">
              <ZenButton variant="outline" block onClick={openFill}>再練填空</ZenButton>
              <ZenButton variant="primary" block onClick={() => setView("path")}>回到單元路徑</ZenButton>
              <ZenButton variant="ghost" block onClick={() => navigate("/lesson/idle")}>
                碎片時間背單字
              </ZenButton>
            </div>
          </section>
        ) : null}
      </div>
    </div>
  );
}

Object.assign(window, { LessonUnitPathPage });