/* 閒暇背單字 — Redmine #12671
 * 碎片時間：背單字 + 聽力，取代 Duolingo 的「打開就刷」節奏
 */

const IDLE_SESSION = {
  title: "3 分鐘碎片複習",
  goal: "今天複習 8 個洗衣場景單字",
  cards: [
    { id: "c1", term: "乾燥", reading: "かんそう", meaning: "烘乾、乾燥", audio: "かんそう" },
    { id: "c2", term: "干す", reading: "ほす", meaning: "晾曬", audio: "ほす" },
    { id: "c3", term: "畳む", reading: "たたむ", meaning: "摺（衣服）", audio: "たたむ" },
    { id: "c4", term: "洗濯", reading: "せんたく", meaning: "洗衣", audio: "せんたく" },
    { id: "c5", term: "勝手に", reading: "かってに", meaning: "擅自、自己就", audio: "かってに" },
    { id: "c6", term: "直る", reading: "なおる", meaning: "恢復、修好", audio: "なおる" },
    { id: "c7", term: "嫌い", reading: "きらい", meaning: "討厭", audio: "きらい" },
    { id: "c8", term: "終わる", reading: "おわる", meaning: "結束", audio: "おわる" },
  ],
};

function shuffle(arr) {
  const a = [...arr];
  for (let i = a.length - 1; i > 0; i -= 1) {
    const j = Math.floor(Math.random() * (i + 1));
    [a[i], a[j]] = [a[j], a[i]];
  }
  return a;
}

function buildIdleQueue(cards) {
  // mix: meaning choice + listening choice
  return shuffle(cards).flatMap((card, idx) => {
    const distractors = shuffle(cards.filter((c) => c.id !== card.id)).slice(0, 2);
    if (idx % 2 === 0) {
      return [{
        type: "meaning",
        card,
        prompt: card.term,
        reading: card.reading,
        options: shuffle([card.meaning, ...distractors.map((d) => d.meaning)]),
        answer: card.meaning,
      }];
    }
    return [{
      type: "listen",
      card,
      prompt: "（聽音）選出意思",
      reading: card.reading,
      options: shuffle([card.meaning, ...distractors.map((d) => d.meaning)]),
      answer: card.meaning,
    }];
  }).slice(0, 8);
}

function LessonIdleVocabPage({ navigate, onBack }) {
  const toast = useToast();
  const [phase, setPhase] = React.useState("home"); // home | play | done
  const [queue, setQueue] = React.useState([]);
  const [idx, setIdx] = React.useState(0);
  const [picked, setPicked] = React.useState(null);
  const [correctCount, setCorrectCount] = React.useState(0);
  const [streak, setStreak] = React.useState(3);

  const start = () => {
    setQueue(buildIdleQueue(IDLE_SESSION.cards));
    setIdx(0);
    setPicked(null);
    setCorrectCount(0);
    setPhase("play");
  };

  const q = queue[idx];

  const choose = (opt) => {
    if (picked || !q) return;
    const ok = opt === q.answer;
    setPicked(opt);
    if (ok) setCorrectCount((n) => n + 1);
  };

  const next = () => {
    if (idx >= queue.length - 1) {
      setPhase("done");
      setStreak((s) => s + 1);
      return;
    }
    setIdx((i) => i + 1);
    setPicked(null);
  };

  return (
    <div className="zen-page lesson-page idle-vocab-page">
      <PageHeader title="閒暇複習" onBack={onBack || (() => navigate("/hub"))} />
      <div className="zen-content lesson-content">
        {phase === "home" ? (
          <>
            <div className="lesson-hero">
              <div className="lesson-kicker">提案 mockup · #12671</div>
              <h1 className="lesson-title">碎片時間背單字・練聽力</h1>
              <p className="lesson-meta">
                <span>取代「打開就刷」的空轉</span>
                <span>·</span>
                <span>每次 3 分鐘</span>
              </p>
            </div>
            <section className="lesson-panel">
              <div className="idle-stat-row">
                <div className="idle-stat">
                  <div className="idle-stat-num">{streak}</div>
                  <div className="idle-stat-label">連續天</div>
                </div>
                <div className="idle-stat">
                  <div className="idle-stat-num">8</div>
                  <div className="idle-stat-label">本次張數</div>
                </div>
                <div className="idle-stat">
                  <div className="idle-stat-num">2</div>
                  <div className="idle-stat-label">題型</div>
                </div>
              </div>
              <div className="lesson-panel-head">
                <h2>{IDLE_SESSION.title}</h2>
                <p>{IDLE_SESSION.goal}</p>
              </div>
              <div className="idle-mode-list">
                <div className="idle-mode-card">
                  <strong>看字選義</strong>
                  <span>看到日文，選正確中文</span>
                </div>
                <div className="idle-mode-card">
                  <strong>聽音選義</strong>
                  <span>先聽讀音，再選意思（練聽力）</span>
                </div>
              </div>
              <p className="lesson-hint">不上路徑、不扣愛心，專心把這 8 個記住就好。</p>
              <ZenButton variant="primary" block onClick={start}>
                開始 3 分鐘
              </ZenButton>
            </section>
          </>
        ) : null}

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

            <div className="idle-prompt-card">
              <div className="idle-type-tag">{q.type === "listen" ? "聽力" : "單字"}</div>
              {q.type === "listen" ? (
                <>
                  <button
                    type="button"
                    className="idle-listen-btn"
                    onClick={() => toast.push(`（Mock）播放「${q.reading}」`, "success")}
                  >
                    <Icon name="volume" size={28} />
                  </button>
                  <div className="idle-prompt-sub">聽完選意思</div>
                </>
              ) : (
                <>
                  <div className="idle-term">{q.prompt}</div>
                  <div className="idle-reading">{q.reading}</div>
                </>
              )}
            </div>

            <div className="lesson-quiz-options">
              {q.options.map((opt) => {
                let cls = "lesson-quiz-opt";
                if (picked) {
                  if (opt === q.answer) cls += " is-correct";
                  else if (opt === picked) cls += " is-wrong";
                }
                return (
                  <button key={opt} type="button" className={cls} onClick={() => choose(opt)}>
                    {opt}
                  </button>
                );
              })}
            </div>

            {picked ? (
              <ZenButton variant="primary" block onClick={next}>
                {idx >= queue.length - 1 ? "看結果" : "下一題"}
              </ZenButton>
            ) : null}
          </section>
        ) : null}

        {phase === "done" ? (
          <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> / {queue.length}
              </div>
              <div className="lesson-block-label">建議下一步</div>
              <ul className="lesson-takeaways">
                <li>錯過的字，明天同一時段再刷一輪</li>
                <li>想練完整語氣，去上「第一堂課程」</li>
                <li>通勤／排隊時再開一次即可</li>
              </ul>
            </div>
            <div className="lesson-finish-actions">
              <ZenButton variant="outline" block onClick={start}>再來一輪</ZenButton>
              <ZenButton variant="primary" block onClick={() => navigate("/lesson/1")}>
                去上完整課程
              </ZenButton>
              <ZenButton variant="ghost" block onClick={() => setPhase("home")}>回閒暇首頁</ZenButton>
            </div>
          </section>
        ) : null}
      </div>
    </div>
  );
}

Object.assign(window, { LessonIdleVocabPage });