/* Hierarchy.jsx — 組織架構 (alliance org chart)
   pyramid:
     SUPREME  盟主
        |
     VICE 副盟主    |    STRATEGIST 軍師團
        \           |          /
   six officers: 攻城官 · 外交官 · 司倉官 · 情報官 · 招募官 · 活動官
                       |
   bottom band: 盟員 · 主公 · 兄弟 — 同袍同甲 · 共逐山河

   Member names per role are live-synced from admin (sw_hierarchy_names_v1).
   The big middle line (.role-cn) shows the MEMBER NAME when set, else the
   role title as a fallback. */

const HIER_LS_KEY = "sw_hierarchy_names_v1";
const loadHierNames = () => {
  try {
    const v = JSON.parse(localStorage.getItem(HIER_LS_KEY) || "{}");
    return v && typeof v === "object" ? v : {};
  } catch { return {}; }
};

const Hierarchy = () => {
  const [names, setNames] = React.useState(loadHierNames);

  React.useEffect(() => {
    const refresh = () => setNames(loadHierNames());
    const onStorage = (e) => { if (e.key === HIER_LS_KEY) refresh(); };
    window.addEventListener("storage", onStorage);
    const t = setInterval(refresh, 8000);
    return () => { window.removeEventListener("storage", onStorage); clearInterval(t); };
  }, []);

  // Big middle line — name if set, else fallback role title
  const Title = ({ k, fallback }) => (
    <div className="role-cn">{names[k] || fallback}</div>
  );

  return (
    <div className="wrap">
      <div className="hier">
        <span className="hier__ghost">階</span>
        <div className="hier__tree">

          {/* Supreme */}
          <div className="hier__node hier__node--supreme">
            <div className="role-en">SUPREME·盟主</div>
            <Title k="supreme" fallback="盟  主" />
            <div className="role-sub">統籌全局 · 終裁決策</div>
          </div>

          <div className="hier__conn" />

          {/* Vice + Strategist */}
          <div className="hier__pair">
            <div className="hier__node">
              <div className="role-en">VICE·副盟主</div>
              <Title k="vice" fallback="副盟主" />
              <div className="role-sub">輔佐盟主 · 統御戰局</div>
            </div>
            <div className="hier__node">
              <div className="role-en">STRATEGIST·軍師團</div>
              <Title k="strategist" fallback="軍師團" />
              <div className="role-sub">運籌帷幄 · 決勝千里</div>
            </div>
          </div>

          <div className="hier__conn" />

          {/* Six officers */}
          <div className="hier__six">
            <div className="hier__node">
              <div className="role-en">SIEGE·攻城官</div>
              <Title k="siege" fallback="攻城官" />
              <div className="role-sub">前線指揮</div>
            </div>
            <div className="hier__node">
              <div className="role-en">DIPLOMACY·外交官</div>
              <Title k="diplomacy" fallback="外交官" />
              <div className="role-sub">縱橫聯盟</div>
            </div>
            <div className="hier__node">
              <div className="role-en">LOGISTICS·司倉官</div>
              <Title k="logistics" fallback="司倉官" />
              <div className="role-sub">糧道編籌</div>
            </div>
            <div className="hier__node">
              <div className="role-en">INTEL·情報官</div>
              <Title k="intel" fallback="情報官" />
              <div className="role-sub">敵我偵察</div>
            </div>
            <div className="hier__node">
              <div className="role-en">RECRUIT·招募官</div>
              <Title k="recruit" fallback="招募官" />
              <div className="role-sub">廣納賢才</div>
            </div>
            <div className="hier__node">
              <div className="role-en">MORALE·活動官</div>
              <Title k="morale" fallback="活動官" />
              <div className="role-sub">士氣凝聚</div>
            </div>
          </div>

          <div className="hier__conn" />

          {/* Members band */}
          <div className="hier__bottom">
            <div className="role-cn">
              盟員<span className="dot" />主公<span className="dot" />兄弟
            </div>
            <div className="role-sub">同袍同甲 · 共逐山河</div>
          </div>
        </div>
      </div>
    </div>
  );
};

window.Hierarchy = Hierarchy;