/* AI 智慧設計課程 — Redmine #12670
 * 依學生程度，用 AI Agent 產出：單字／文章／文法／情境對話／考題
 */

const AI_COURSE_LEVELS = [
  { id: "n5", label: "N5 入門", desc: "五十音已熟，剛開始看短句" },
  { id: "n4", label: "N4 基礎", desc: "能讀簡單對話，句型還不穩" },
  { id: "n3", label: "N3 進階", desc: "想練口語語氣與真實字幕" },
];

const AI_FOCUS_OPTIONS = [
  { id: "vocab", label: "單字" },
  { id: "article", label: "文章" },
  { id: "grammar", label: "文法" },
  { id: "dialogue", label: "情境對話" },
  { id: "quiz", label: "考題" },
];

const AI_GENERATED = {
  n5: {
    title: "便利商店點餐",
    minutes: 12,
    vocab: [
      { term: "温めますか", reading: "あたためますか", meaning: "要加熱嗎？" },
      { term: "袋", reading: "ふくろ", meaning: "袋子" },
      { term: "ポイントカード", reading: "ポイントカード", meaning: "集點卡" },
    ],
    article: "コンビニでおにぎりを買いました。店員さんが「温めますか」と聞きました。",
    grammar: [
      { pattern: "〜ますか", tip: "禮貌形疑問句" },
      { pattern: "をください", tip: "請給我…" },
    ],
    dialogue: [
      { speaker: "店員", jp: "温めますか。", zh: "要加熱嗎？" },
      { speaker: "客", jp: "はい、お願いします。", zh: "好的，麻煩了。" },
    ],
    quiz: [
      { q: "店員問要不要加熱，怎麼說？", a: "温めますか。" },
      { q: "「袋」的意思是？", a: "袋子" },
    ],
  },
  n4: {
    title: "電車誤點與道歉",
    minutes: 14,
    vocab: [
      { term: "遅延", reading: "ちえん", meaning: "延誤" },
      { term: "乗り換え", reading: "のりかえ", meaning: "換乘" },
      { term: "間に合う", reading: "まにあう", meaning: "來得及" },
    ],
    article: "電車が遅延して、会議に間に合いませんでした。駅員さんに乗り換えを聞きました。",
    grammar: [
      { pattern: "てしまう", tip: "結果不如預期／完成" },
      { pattern: "かもしれません", tip: "可能（禮貌）" },
    ],
    dialogue: [
      { speaker: "客", jp: "次の急行は何時ですか。", zh: "下一班急行幾點？" },
      { speaker: "站員", jp: "五分遅延かもしれません。", zh: "可能延誤五分鐘。" },
    ],
    quiz: [
      { q: "「間に合う」意思？", a: "來得及" },
      { q: "表達可能延誤用？", a: "かもしれません" },
    ],
  },
  n3: {
    title: "家庭洗衣語氣（延伸）",
    minutes: 15,
    vocab: [
      { term: "かも", reading: "かも", meaning: "可能、也許" },
      { term: "んじゃない？", reading: "んじゃない？", meaning: "推測看法" },
      { term: "よね", reading: "よね", meaning: "向對方確認" },
    ],
    article: "乾燥機がまたおかしいかも。勝手に直るんじゃない？外に干すのは嫌いだよね。",
    grammar: [
      { pattern: "かも", tip: "不確定" },
      { pattern: "んじゃない？", tip: "提出推測" },
      { pattern: "よね", tip: "確認共識" },
    ],
    dialogue: [
      { speaker: "咲子", jp: "乾燥、またバカになったかも。", zh: "烘乾可能又壞了。" },
      { speaker: "充", jp: "また直るんじゃない？", zh: "應該又會好吧？" },
    ],
    quiz: [
      { q: "表達不確定用哪個？", a: "かも" },
      { q: "「外に干す？」是什麼句型？", a: "普通形疑問句" },
    ],
  },
};

function LessonAiBuilderPage({ navigate, onBack }) {
  const toast = useToast();
  const [step, setStep] = React.useState(0); // 0 setup, 1 generating, 2 result
  const [level, setLevel] = React.useState("n5");
  const [focus, setFocus] = React.useState(["vocab", "dialogue", "grammar", "quiz", "article"]);
  const [topic, setTopic] = React.useState("便利商店");
  const generated = AI_GENERATED[level];

  const toggleFocus = (id) => {
    setFocus((prev) => (prev.includes(id) ? prev.filter((x) => x !== id) : [...prev, id]));
  };

  const runGenerate = () => {
    if (!focus.length) {
      toast.push("至少選一個教材類型", "error");
      return;
    }
    setStep(1);
    setTimeout(() => setStep(2), 1100);
  };

  return (
    <div className="zen-page lesson-page ai-builder-page">
      <PageHeader title="AI 設計課程" onBack={onBack || (() => navigate("/hub"))} />
      <div className="zen-content lesson-content">
        <div className="lesson-hero">
          <div className="lesson-kicker">提案 mockup · #12670</div>
          <h1 className="lesson-title">用 AI Agent 依程度產教材</h1>
          <p className="lesson-meta">
            <span>單字・文章・文法・對話・考題</span>
          </p>
        </div>

        {step === 0 ? (
          <section className="lesson-panel">
            <div className="lesson-panel-head">
              <h2>1. 設定學生程度</h2>
              <p>先選程度與主題，AI 再組一堂課。</p>
            </div>
            <div className="ai-level-grid">
              {AI_COURSE_LEVELS.map((lv) => (
                <button
                  key={lv.id}
                  type="button"
                  className={`ai-level-card${level === lv.id ? " is-active" : ""}`}
                  onClick={() => {
                    setLevel(lv.id);
                    if (lv.id === "n5") setTopic("便利商店");
                    if (lv.id === "n4") setTopic("電車誤點");
                    if (lv.id === "n3") setTopic("家庭洗衣語氣");
                  }}
                >
                  <div className="ai-level-label">{lv.label}</div>
                  <div className="ai-level-desc">{lv.desc}</div>
                </button>
              ))}
            </div>

            <div className="lesson-panel-head" style={{ marginTop: 4 }}>
              <h2>2. 主題</h2>
            </div>
            <input
              className="ai-topic-input"
              value={topic}
              onChange={(e) => setTopic(e.target.value)}
              placeholder="例如：便利商店、家庭洗衣"
            />

            <div className="lesson-panel-head">
              <h2>3. 要產出的教材</h2>
              <p>可多選；正式版由後端 task 控制，前端只傳程度與主題。</p>
            </div>
            <div className="ai-focus-row">
              {AI_FOCUS_OPTIONS.map((f) => (
                <button
                  key={f.id}
                  type="button"
                  className={`ai-focus-chip${focus.includes(f.id) ? " is-active" : ""}`}
                  onClick={() => toggleFocus(f.id)}
                >
                  {f.label}
                </button>
              ))}
            </div>

            <ZenButton variant="primary" block onClick={runGenerate}>
              <Icon name="sparkles" size={16} /> 讓 AI 產一堂課
            </ZenButton>
          </section>
        ) : null}

        {step === 1 ? (
          <section className="lesson-panel ai-loading">
            <div className="ai-loading-mark">ま</div>
            <h2>正在依 {AI_COURSE_LEVELS.find((x) => x.id === level)?.label} 組課…</h2>
            <p>單字 → 文章 → 文法 → 情境對話 → 考題</p>
            <div className="ai-loading-bar" />
          </section>
        ) : null}

        {step === 2 ? (
          <section className="lesson-panel">
            <div className="lesson-panel-head">
              <h2>產出預覽：{generated.title}</h2>
              <p>約 {generated.minutes} 分鐘 · 主題「{topic}」</p>
            </div>

            {focus.includes("vocab") ? (
              <div className="ai-block">
                <div className="lesson-block-label">單字</div>
                <ul className="lesson-vocab-list">
                  {generated.vocab.map((v) => (
                    <li key={v.term}>
                      <strong>{v.term}</strong>
                      <span className="muted">（{v.reading}）</span>
                      <span>{v.meaning}</span>
                    </li>
                  ))}
                </ul>
              </div>
            ) : null}

            {focus.includes("article") ? (
              <div className="ai-block">
                <div className="lesson-block-label">文章</div>
                <p className="ai-article">{generated.article}</p>
              </div>
            ) : null}

            {focus.includes("grammar") ? (
              <div className="ai-block">
                <div className="lesson-block-label">文法</div>
                {generated.grammar.map((g) => (
                  <div key={g.pattern} className="ai-grammar-row">
                    <span className="lesson-grammar-chip">{g.pattern}</span>
                    <span>{g.tip}</span>
                  </div>
                ))}
              </div>
            ) : null}

            {focus.includes("dialogue") ? (
              <div className="ai-block">
                <div className="lesson-block-label">情境對話</div>
                {generated.dialogue.map((d, i) => (
                  <div key={i} className="ai-dialogue-line">
                    <strong>{d.speaker}</strong>
                    <span className="ai-dialogue-jp">{d.jp}</span>
                    <span className="muted">{d.zh}</span>
                  </div>
                ))}
              </div>
            ) : null}

            {focus.includes("quiz") ? (
              <div className="ai-block">
                <div className="lesson-block-label">考題</div>
                <ol className="ai-quiz-list">
                  {generated.quiz.map((q) => (
                    <li key={q.q}>
                      <div>{q.q}</div>
                      <div className="muted">答案示意：{q.a}</div>
                    </li>
                  ))}
                </ol>
              </div>
            ) : null}

            <div className="lesson-finish-actions">
              <ZenButton
                variant="outline"
                block
                onClick={() => {
                  toast.push("（Mock）已重新生成另一版本", "success");
                  runGenerate();
                }}
              >
                再生成一版
              </ZenButton>
              <ZenButton
                variant="primary"
                block
                onClick={() => {
                  toast.push("（Mock）已存成可上課教材", "success");
                  navigate("/lesson/1");
                }}
              >
                存成課程並預覽上課
              </ZenButton>
              <ZenButton variant="ghost" block onClick={() => setStep(0)}>
                回到設定
              </ZenButton>
            </div>
          </section>
        ) : null}
      </div>
    </div>
  );
}

Object.assign(window, { LessonAiBuilderPage });