// ui_kits/yehi/app.jsx — hash-routed shell

const { useEffect: useEffectApp, useState: useStateApp } = React;

function getBetFromHash() {
  const h = window.location.hash || "";
  const m = h.match(/^#\/bet\/(BET-\d+)/);
  return m ? m[1] : null;
}

function App() {
  const [betId, setBetId] = useStateApp(getBetFromHash());
  useEffectApp(() => {
    const onHash = () => setBetId(getBetFromHash());
    window.addEventListener("hashchange", onHash);
    return () => window.removeEventListener("hashchange", onHash);
  }, []);

  const goToBet = (id) => {
    window.location.hash = `#/bet/${id}`;
    window.scrollTo({ top: 0 });
  };
  const goToCycle = () => {
    window.location.hash = "#/";
    window.scrollTo({ top: 0 });
  };

  return (
    <React.Fragment>
      <YehiAppHeader />
      <main>
        {betId
          ? <BetView betId={betId} onBack={goToCycle} />
          : <CycleView onSelectBet={goToBet} />}
      </main>
      <YehiAppFooter />
    </React.Fragment>
  );
}

function YehiAppHeader() {
  return (
    <nav
      style={{
        position: "sticky",
        top: 0,
        zIndex: 20,
        background: "var(--tehom-deep)",
        borderBottom: "1px solid var(--hairline)",
      }}
    >
      <YContainer
        style={{
          height: 64,
          display: "flex",
          alignItems: "center",
          justifyContent: "space-between",
        }}
      >
        <YehiLockup size={28} />
        <div style={{ display: "flex", alignItems: "center", gap: 28, fontFamily: "var(--font-body)", fontSize: 13, color: "var(--fg-3)" }}>
          <MonoTag color="var(--fg-4)">cl-dev-standards</MonoTag>
          <MonoTag color="var(--fg-4)">{window.YEHI_DATA.cycle.id}</MonoTag>
        </div>
      </YContainer>
    </nav>
  );
}

function YehiAppFooter() {
  return (
    <footer style={{ padding: "32px 0", borderTop: "1px solid var(--hairline)" }}>
      <YContainer style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 24 }}>
        <YehiLockup size={20} />
        <div style={{ fontFamily: "var(--font-body)", fontSize: 12, color: "var(--fg-4)" }}>
          The bet-driven cadence for agentic teams · by tehom
        </div>
      </YContainer>
    </footer>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);