function useOnlineCount() {
  const [count, setCount] = useState(null);
  useEffect(() => {
    if (!ONLINE_COUNT_ENABLED || !MP_CONFIGURED || !sb) return;
    const key = window.crypto && crypto.randomUUID ? crypto.randomUUID() : "t" + Date.now() + "_" + Math.random().toString(36).slice(2);
    const ch = sb.channel(ONLINE_PRESENCE_CHANNEL, {
      config: {
        presence: {
          key
        }
      }
    });
    const recount = () => {
      try {
        setCount(Object.keys(ch.presenceState()).length);
      } catch (e) {}
    };
    ch.on("presence", {
      event: "sync"
    }, recount);
    ch.subscribe(st => {
      if (st === "SUBSCRIBED") ch.track({});
    });
    return () => {
      try {
        sb.removeChannel(ch);
      } catch (e) {}
    };
  }, []);
  return count;
}
function OnlinePill() {
  const count = useOnlineCount();
  if (count == null) return null;
  return <div className="online-pill" title="지금 사이트에 접속해 있는 인원 (실시간)">
      <span className="online-dot"></span>
      <span className="online-num">{count}</span>
      <span className="online-label">접속중</span>
    </div>;
}
function App() {
  const [meta, setMeta] = useState(undefined);
  const [tab, setTab] = useState("draft");
  useEffect(() => {
    loadMeta().then(setMeta);
  }, []);
  const eng = useMemo(() => meta ? makeEngine(meta) : null, [meta]);
  const md = meta && meta.metadata || {};
  return <React.Fragment>
      <div className="topbar">
        <div className="topbar-inner">
          <div className="brand"><span className="mark"></span> LoL Draft WinRate</div>
          <div className="spacer"></div>
          <OnlinePill />
        </div>
      </div>

      <div className="wrap">
        <div className="intro">
          <div className="eyebrow">프로 8시즌 데이터 기반 승률 예측</div>
          <h1>LoL 드래프트 승률 예측 — 밴픽 최적화 게임</h1>
          <div className="lead">
            프로 경기 데이터를 PySpark로 분석해 학습한 모델로, 밴픽(드래프트) 단계만의 정보로 승률을 예측합니다.
            챔피언 기본 강함·라인 상성·팀 궁합·밴 가치·패치 적합도 5가지 요소를 가산해 산출합니다.
          </div>
          <div className="badges">
            {meta === undefined && <span className="badge"><span className="dotmark"></span>데이터 확인 중…</span>}
            {meta === null && <span className="badge warn"><span className="dotmark"></span>meta.json 미연결 · 디자인 미리보기</span>}
          </div>
        </div>

        <div className="tabs">
          <button className={"tab" + (tab === "draft" ? " active" : "")} onClick={() => setTab("draft")}>밴픽 대전 (vs NPC)</button>
          <button className={"tab" + (tab === "pvp" ? " active" : "")} onClick={() => setTab("pvp")}>멀티 대전 (1v1)</button>
          <button className={"tab" + (tab === "rank" ? " active" : "")} onClick={() => setTab("rank")}>랭킹</button>
          <button className={"tab" + (tab === "sim" ? " active" : "")} onClick={() => setTab("sim")}>자유 시뮬레이션</button>
        </div>

        {tab === "draft" ? <DraftGame eng={eng} /> : tab === "pvp" ? <MultiplayerPage eng={eng} /> : tab === "rank" ? <RankingPage /> : <FreeSim eng={eng} />}

        <div className="footer">
          <div className="footer-links">
            <span className="footer-item"><span className="footer-label">데이터</span><a href="https://oracleselixir.com" target="_blank" rel="noopener">Oracle's Elixir</a> · Tim Sevenhuysen</span>
            <span className="footer-item"><span className="footer-label">문의</span><a href="mailto:dldmstn0409@gmail.com">dldmstn0409@gmail.com</a></span>
            <span className="footer-item"><span className="footer-label">피드백</span><a href="https://discord.gg/YBxNaZeZ3P" target="_blank" rel="noopener">Discord</a></span>
          </div>
          <div className="footer-note">{md.honesty_note || "드래프트-only 예측은 본질적으로 어려우며, AUC는 가공 없이 보고됩니다."}</div>
        </div>
      </div>
    </React.Fragment>;
}
ReactDOM.createRoot(document.getElementById("root")).render(<App />);