// 關卡列表 — 10 關入口
(() => {
const { Panel, Badge, SectionTitle } = window.WCATalentGameDesignSystem_377d00;

const STATUS_LABEL = {
  not_started: { text: "未啟動", tone: "neutral" },
  in_progress: { text: "進行中", tone: "gold" },
  complete: { text: "已完成", tone: "success" },
  locked: { text: "已鎖定", tone: "info" },
};

function Quests() {
  const [mods, setMods] = React.useState(null);
  React.useEffect(() => {
    api("/api/overview").then((d) => setMods(d.modules)).catch(() => {});
  }, []);
  if (!mods) return <div style={{ color: "var(--text-muted)", padding: 40, textAlign: "center" }}>關卡載入中…</div>;
  return (
    <div>
      <SectionTitle eyebrow="QUESTS" align="left" size="h2" subtitle="十關主線，步步為營">關卡工作區</SectionTitle>
      <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(280px, 1fr))", gap: 16, marginTop: 18 }}>
        {mods.map((m) => {
          const st = STATUS_LABEL[m.status] || STATUS_LABEL.not_started;
          return (
            <a key={m.id} href={`#/quests/${m.id}`} style={{ textDecoration: "none", color: "inherit" }}>
              <Panel glow={m.status === "in_progress"}>
                <div style={{ display: "flex", alignItems: "baseline", gap: 10 }}>
                  <span style={{ fontFamily: "Cinzel,serif", fontSize: 26, color: "var(--gold-500)" }}>{m.id}</span>
                  <div style={{ flex: 1 }}>
                    <div style={{ fontFamily: '"Noto Serif TC",serif', fontWeight: 900, fontSize: 17, color: "var(--gold-300)", letterSpacing: ".06em" }}>{m.title}</div>
                    <div style={{ fontFamily: "Cinzel,serif", fontSize: 9, letterSpacing: ".25em", color: "var(--text-muted)" }}>{m.en}</div>
                  </div>
                  <Badge tone={st.tone} size="sm">{st.text}</Badge>
                </div>
                <div style={{ marginTop: 12, fontSize: 12, color: "var(--text-muted)", lineHeight: 1.7 }}>
                  交付物：{m.deliverable}
                </div>
                <div style={{ marginTop: 8, fontSize: 12, color: "var(--text-secondary)" }}>
                  必填 {m.required_done}/{m.required_total}
                </div>
              </Panel>
            </a>
          );
        })}
      </div>
    </div>
  );
}

window.Quests = Quests;
})();