// Summary — 課後摘要 / 複習卡（四障別版本）

const SummaryPage = ({ setPage }) => {
  const [variant, setVariant] = React.useState("standard");
  const variants = [
    { k: "standard", l: "一般版" },
    { k: "VI", l: "視障（純文字＋語音）" },
    { k: "HI", l: "聽障（視覺結構化）" },
    { k: "CI", l: "易讀版（短句＋圖示）" },
    { k: "LD", l: "學習障礙（分段）" },
  ];

  return (
    <Page screen="05 課後摘要與複習卡" title="課後摘要與複習卡" summary="這是 AI 為您整理的本次學習重點，您可以聆聽或產生複習題。">
      <div style={{ marginBottom: 14, fontSize: "var(--fs-sm)", color: "var(--muted)", display: "flex", gap: 6, alignItems: "center" }}>
        <a onClick={() => setPage("home")} style={{ cursor: "pointer" }}>首頁</a>
        <Icon name="chevronR" size={12} />
        <a onClick={() => setPage("player")} style={{ cursor: "pointer" }}>學習中</a>
        <Icon name="chevronR" size={12} />
        <span style={{ color: "var(--ink-2)" }}>課後摘要</span>
      </div>

      <SectionHeader
        eyebrow="第 2 單元完成"
        title="AI 為你整理的學習摘要"
        desc="系統自動產出四種障別適配版本，你也可以切換觀看"
        action={<Button variant="ghost" icon="download">下載 PDF</Button>}
      />

      {/* Variant switcher */}
      <div style={{ display: "flex", gap: 8, marginBottom: 22, flexWrap: "wrap" }}>
        {variants.map(v => (
          <button key={v.k} onClick={() => setVariant(v.k)} style={{
            padding: "8px 14px", borderRadius: 8,
            background: variant === v.k ? "var(--ink)" : "var(--paper)",
            color: variant === v.k ? "#fff" : "var(--ink-2)",
            border: `1.5px solid ${variant === v.k ? "var(--ink)" : "var(--border)"}`,
            fontSize: "var(--fs-sm)", fontWeight: 600, fontFamily: "inherit",
          }}>{v.l}</button>
        ))}
      </div>

      <div style={{ display: "grid", gridTemplateColumns: "1.5fr 1fr", gap: 24 }}>
        {/* Main summary */}
        <Card style={{ padding: 32 }}>
          {variant === "standard" && <StandardSummary />}
          {variant === "VI" && <VISummary />}
          {variant === "HI" && <HISummary />}
          {variant === "CI" && <EasyReadSummary />}
          {variant === "LD" && <LDSummary />}
        </Card>

        {/* Sidebar: review cards + next action */}
        <div style={{ display: "flex", flexDirection: "column", gap: 20 }}>
          <Card style={{ padding: 22 }}>
            <div style={{ fontSize: "var(--fs-xs)", color: "var(--accent-600)", fontWeight: 700, letterSpacing: "0.1em", marginBottom: 6, textTransform: "uppercase" }}>
              複習卡 · 間隔重複
            </div>
            <h3 style={{ margin: "0 0 14px", fontSize: "var(--fs-lg)", fontWeight: 700 }}>三張複習卡已生成</h3>
            {[
              { q: "RAG 的三層是什麼？", due: "今天" },
              { q: "為什麼 AI 要標註來源？", due: "明天" },
              { q: "本地索引的延遲？", due: "3 天後" },
            ].map((c, i) => (
              <div key={i} style={{
                padding: "10px 12px", marginBottom: 8,
                background: "var(--bg)", borderRadius: 8,
                border: "1px solid var(--border)",
                display: "flex", justifyContent: "space-between", alignItems: "center", gap: 10,
              }}>
                <div>
                  <div style={{ fontSize: "var(--fs-sm)", fontWeight: 600 }}>{c.q}</div>
                  <div style={{ fontSize: "var(--fs-xs)", color: "var(--muted)", marginTop: 2 }}>下次複習：{c.due}</div>
                </div>
                <Button size="sm" variant="ghost">開始</Button>
              </div>
            ))}
          </Card>

          <Card style={{ padding: 22, background: "linear-gradient(135deg, var(--accent-100), #fff)", border: "1.5px solid var(--accent)" }}>
            <div style={{ display: "flex", gap: 10, alignItems: "center", marginBottom: 10 }}>
              <Icon name="sparkle" size={18} color="var(--accent)" />
              <div style={{ fontSize: "var(--fs-sm)", fontWeight: 700, color: "var(--accent-600)" }}>AI 建議下一步</div>
            </div>
            <div style={{ fontSize: "var(--fs-base)", fontWeight: 600, marginBottom: 8 }}>
              建議你接著學「第 3 單元：Prompt 工程基礎」
            </div>
            <p style={{ margin: 0, color: "var(--ink-soft)", fontSize: "var(--fs-sm)", lineHeight: 1.6 }}>
              你已掌握 RAG 基礎，下一單元會教你如何撰寫有效的 Prompt 與 AI 互動，約 10 分鐘。
            </p>
            <Button style={{ marginTop: 14, width: "100%" }} variant="accent" onClick={() => setPage("player")}>繼續下一單元</Button>
          </Card>

          <Card style={{ padding: 22 }}>
            <div style={{ fontSize: "var(--fs-sm)", fontWeight: 700, marginBottom: 10 }}>這個摘要有幫助嗎？</div>
            <div style={{ display: "flex", gap: 8 }}>
              <Button size="sm" variant="ghost" style={{ flex: 1 }}>👍 很有幫助</Button>
              <Button size="sm" variant="ghost" style={{ flex: 1 }}>👎 需調整</Button>
            </div>
            <div style={{ marginTop: 12, fontSize: "var(--fs-xs)", color: "var(--muted)", lineHeight: 1.6 }}>
              你的回饋會幫助 AI 在下個單元提供更貼近你的摘要版本
            </div>
          </Card>
        </div>
      </div>
    </Page>
  );
};

const StandardSummary = () => (
  <div>
    <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 10 }}>
      <Tag color="brand">第 2 單元</Tag>
      <Tag>12 分鐘</Tag>
      <Tag color="ok">已完成</Tag>
    </div>
    <h2 style={{ margin: "0 0 16px", fontSize: "var(--fs-2xl)", fontWeight: 800, letterSpacing: "-0.02em" }}>
      RAG 三層檢索架構
    </h2>
    <p style={{ fontSize: "var(--fs-base)", color: "var(--ink-2)", lineHeight: 1.8 }}>
      本單元介紹 AI 助教採用的「檢索增強生成」（RAG）架構。與直接讓 AI 回答不同，RAG 讓 AI 每次回答前都先從教材庫找資料，確保答案有憑有據。
    </p>
    <h3 style={{ marginTop: 28, fontSize: "var(--fs-lg)", fontWeight: 700, color: "var(--ink)" }}>核心概念</h3>
    <ul style={{ lineHeight: 2, color: "var(--ink-2)", paddingLeft: 22 }}>
      <li><strong>語義快取</strong>：常見問題直接命中，延遲 &lt;50ms</li>
      <li><strong>Metadata 檢索</strong>：依單元、標籤、難度做結構化過濾</li>
      <li><strong>向量語意</strong>：HNSW 索引做深度比對，延遲 &lt;20ms</li>
    </ul>
    <h3 style={{ marginTop: 24, fontSize: "var(--fs-lg)", fontWeight: 700 }}>實務啟示</h3>
    <p style={{ color: "var(--ink-2)", lineHeight: 1.8 }}>
      當 AI 找不到足夠教材支持時，會主動告知並轉接人工助教，而不是編造答案。這是課程中「可解釋、可追溯」原則的核心。
    </p>
    <div style={{ marginTop: 20, padding: 16, background: "var(--brand-50)", borderRadius: 10, border: "1px solid var(--brand-100)" }}>
      <div style={{ fontSize: "var(--fs-xs)", color: "var(--brand-600)", fontWeight: 700, marginBottom: 4, letterSpacing: "0.08em" }}>KEY TAKEAWAY</div>
      <div style={{ fontSize: "var(--fs-base)", fontWeight: 600, color: "var(--ink)" }}>
        RAG = 有根據的 AI。每個回答都可以點開看到它「從哪裡學到的」。
      </div>
    </div>
  </div>
);

const VISummary = () => (
  <div style={{ fontSize: "var(--fs-lg)", lineHeight: 1.9 }}>
    <div style={{ padding: "8px 14px", background: "var(--ink)", color: "#fff", borderRadius: 8, display: "inline-flex", gap: 8, alignItems: "center", marginBottom: 20 }}>
      <Icon name="volume" size={18} color="#fff" />
      <span style={{ fontSize: "var(--fs-sm)", fontWeight: 600 }}>點此播放語音摘要（2 分 40 秒）</span>
    </div>
    <h2 style={{ margin: "0 0 16px", fontSize: "var(--fs-2xl)", fontWeight: 800 }}>
      第二單元摘要：RAG 三層檢索
    </h2>
    <p style={{ color: "var(--ink-2)" }}>
      這一段影片長度十二分鐘。重點有三個。
    </p>
    <ol style={{ paddingLeft: 28, color: "var(--ink-2)" }}>
      <li>第一層叫「語義快取」。常見問題直接命中。反應很快，不到五十毫秒。</li>
      <li>第二層叫「資料欄位檢索」。依照單元、標籤、難度過濾。</li>
      <li>第三層叫「向量語意」。這是最深入的比對方式，反應不到二十毫秒。</li>
    </ol>
    <p style={{ color: "var(--ink-2)" }}>
      如果 AI 找不到足夠資料，它會告訴你「找不到」，並轉給人工助教。
    </p>
    <p style={{ color: "var(--ink-2)" }}>
      這個設計的核心，是「可解釋、可追溯」。AI 的回答都要有出處。
    </p>
  </div>
);

const HISummary = () => (
  <div>
    <h2 style={{ margin: "0 0 8px", fontSize: "var(--fs-2xl)", fontWeight: 800 }}>RAG 三層檢索架構</h2>
    <div style={{ color: "var(--muted)", fontSize: "var(--fs-sm)", marginBottom: 20 }}>視覺化摘要 · 結構圖主導</div>
    <div style={{ display: "flex", flexDirection: "column", gap: 10, marginBottom: 24 }}>
      {[
        { l: "第一層", n: "語義快取", t: "<50ms", color: "var(--ok)" },
        { l: "第二層", n: "Metadata 檢索", t: "~100ms", color: "var(--brand)" },
        { l: "第三層", n: "向量語意 (HNSW)", t: "<20ms", color: "var(--accent)" },
      ].map((r, i) => (
        <div key={i} style={{
          display: "grid", gridTemplateColumns: "60px 1fr auto",
          alignItems: "center", gap: 14,
          padding: 14, background: "var(--bg)",
          borderLeft: `4px solid ${r.color}`, borderRadius: 8,
        }}>
          <div style={{ fontWeight: 900, fontFamily: "JetBrains Mono, monospace", color: r.color }}>{r.l}</div>
          <div style={{ fontWeight: 700, fontSize: "var(--fs-lg)" }}>{r.n}</div>
          <div style={{ fontSize: "var(--fs-sm)", color: "var(--muted)", fontFamily: "JetBrains Mono, monospace" }}>{r.t}</div>
        </div>
      ))}
    </div>
    <div style={{ padding: 16, background: "#def0f5", borderRadius: 10 }}>
      <div style={{ fontWeight: 700, marginBottom: 4 }}>關鍵結論</div>
      <div>RAG = 有根據的 AI。每個回答都可以點開看到它從哪裡學到的。</div>
    </div>
  </div>
);

const EasyReadSummary = () => (
  <div style={{ fontSize: "var(--fs-xl)", lineHeight: 2 }}>
    <h2 style={{ margin: "0 0 20px", fontSize: "var(--fs-3xl)", fontWeight: 800 }}>這一課在講什麼？</h2>
    <div style={{ display: "flex", flexDirection: "column", gap: 18 }}>
      {[
        { ic: "search", t: "AI 會先去找資料。", c: "var(--brand)" },
        { ic: "check", t: "它找到的資料，都會寫下來。", c: "var(--ok)" },
        { ic: "users", t: "找不到的時候，會給真人來幫忙。", c: "var(--accent)" },
      ].map((p, i) => (
        <div key={i} style={{
          display: "flex", alignItems: "center", gap: 20,
          padding: "22px 24px", background: "var(--bg)",
          borderRadius: 16, border: "2px solid var(--border)",
        }}>
          <div style={{
            width: 64, height: 64, borderRadius: 16, flexShrink: 0,
            background: p.c, color: "#fff",
            display: "flex", alignItems: "center", justifyContent: "center",
          }}>
            <Icon name={p.ic} size={32} color="#fff" />
          </div>
          <div style={{ fontSize: "var(--fs-xl)", fontWeight: 700, color: "var(--ink)" }}>{p.t}</div>
        </div>
      ))}
    </div>
    <div style={{
      marginTop: 28, padding: 22,
      background: "var(--accent-100)", borderRadius: 16,
      borderLeft: "6px solid var(--accent)",
    }}>
      <div style={{ fontSize: "var(--fs-xl)", fontWeight: 800, color: "var(--accent-600)" }}>
        記住一句話
      </div>
      <div style={{ fontSize: "var(--fs-2xl)", fontWeight: 700, marginTop: 6 }}>
        AI 的答案，都要有出處。
      </div>
    </div>
  </div>
);

const LDSummary = () => (
  <div>
    <h2 style={{ margin: "0 0 8px", fontSize: "var(--fs-2xl)", fontWeight: 800 }}>學習重點 · 分段版</h2>
    <div style={{ color: "var(--muted)", marginBottom: 24 }}>每個概念獨立一張卡片，循序漸進</div>
    {[
      { n: "01", h: "什麼是 RAG？", b: "RAG 是「先找資料，再回答」的意思。就像考試可以翻書作答，而不是憑記憶回答。", est: "30 秒" },
      { n: "02", h: "為什麼要三層？", b: "因為不同問題需要不同方式找。簡單的問題用快取，複雜的用語意比對。", est: "40 秒" },
      { n: "03", h: "找不到怎麼辦？", b: "AI 會說「我不確定」，然後交給真人助教。這很重要，不編造答案。", est: "20 秒" },
    ].map((c, i) => (
      <div key={i} style={{
        padding: 20, marginBottom: 14,
        background: "var(--bg)", borderRadius: 12,
        borderLeft: "4px solid var(--brand)",
      }}>
        <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 8 }}>
          <span style={{ fontFamily: "JetBrains Mono, monospace", fontSize: "var(--fs-sm)", color: "var(--muted)", fontWeight: 700 }}>{c.n}</span>
          <Tag>閱讀約 {c.est}</Tag>
        </div>
        <div style={{ fontSize: "var(--fs-lg)", fontWeight: 700, marginBottom: 6 }}>{c.h}</div>
        <p style={{ margin: 0, color: "var(--ink-2)", lineHeight: 1.8 }}>{c.b}</p>
      </div>
    ))}
  </div>
);

Object.assign(window, { SummaryPage });