// 創業地圖 — 10 節點征途
(() => {
const { Panel, Badge, SectionTitle } = window.WCATalentGameDesignSystem_377d00;

const STATUS_STYLE = {
  not_started: { text: "未啟動", tone: "neutral", border: "rgba(212,175,55,.2)", glow: "none" },
  in_progress: { text: "進行中", tone: "gold", border: "var(--gold-500)", glow: "0 0 14px rgba(212,175,55,.45)" },
  complete: { text: "已完成", tone: "success", border: "var(--success,#7fc97f)", glow: "none" },
  locked: { text: "已鎖定", tone: "info", border: "var(--info,#4db6e8)", glow: "none" },
};

function Map() {
  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>;

  const doneCount = mods.filter((m) => m.status === "complete" || m.status === "locked").length;

  return (
    <div>
      <SectionTitle eyebrow="CAMPAIGN MAP" align="left" size="h2" subtitle={`征服進度 ${doneCount} / ${mods.length}`}>創業地圖</SectionTitle>
      <div style={{ marginTop: 20 }}>
        <Panel>
          <div style={{ display: "flex", flexWrap: "wrap", alignItems: "stretch", gap: 0, justifyContent: "center" }}>
            {mods.map((m, i) => {
              const st = STATUS_STYLE[m.status] || STATUS_STYLE.not_started;
              return (
                <React.Fragment key={m.id}>
                  {i > 0 && (
                    <div style={{ display: "flex", alignItems: "center", padding: "0 6px", color: "var(--gold-700)", fontSize: 14 }}>◆</div>
                  )}
                  <a href={`#/quests/${m.id}`} style={{ textDecoration: "none", color: "inherit", margin: "8px 0" }}>
                    <div style={{
                      width: 132, minHeight: 116, background: "var(--navy-950)",
                      border: "1.5px solid " + st.border, boxShadow: st.glow, borderRadius: 8,
                      padding: "12px 10px", display: "flex", flexDirection: "column", alignItems: "center", gap: 6,
                      transition: "transform .15s",
                    }}
                      onMouseEnter={(e) => e.currentTarget.style.transform = "translateY(-3px)"}
                      onMouseLeave={(e) => e.currentTarget.style.transform = "none"}
                    >
                      <div style={{
                        width: 34, height: 34, transform: "rotate(45deg)", border: "1.5px solid " + st.border,
                        display: "flex", alignItems: "center", justifyContent: "center", margin: "4px 0 6px",
                        background: m.status === "in_progress" ? "rgba(212,175,55,.15)" : "transparent",
                      }}>
                        <span style={{ transform: "rotate(-45deg)", fontFamily: "Cinzel,serif", color: "var(--gold-300)", fontSize: 15 }}>{m.id}</span>
                      </div>
                      <div style={{ fontWeight: 700, fontSize: 13, color: "var(--gold-100,#f2ead2)", textAlign: "center", letterSpacing: ".05em" }}>{m.title}</div>
                      <div style={{ fontFamily: "Cinzel,serif", fontSize: 8, letterSpacing: ".2em", color: "var(--text-muted)" }}>{m.en}</div>
                      <Badge tone={st.tone} size="sm">{st.text}</Badge>
                    </div>
                  </a>
                </React.Fragment>
              );
            })}
          </div>
          <div style={{ textAlign: "center", marginTop: 16, fontSize: 12, color: "var(--text-muted)", lineHeight: 1.8 }}>
            不知道也正常——每一關都會先教你需要的概念。<br />順序是建議路線；卡住時可以先跳下一關，回頭再補。
          </div>
        </Panel>
      </div>
    </div>
  );
}

window.MapPage = Map;
})();