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

const { useEffect: useEffectOA, useState: useStateOA } = React;

function isReportRoute() {
  return /^#\/report\//.test(window.location.hash || "");
}

function OrApp() {
  const [route, setRoute] = useStateOA(isReportRoute() ? "report" : "canon");
  useEffectOA(() => {
    const onHash = () => setRoute(isReportRoute() ? "report" : "canon");
    window.addEventListener("hashchange", onHash);
    return () => window.removeEventListener("hashchange", onHash);
  }, []);

  const goToReport = () => { window.location.hash = "#/report/david-shepherd"; window.scrollTo({ top: 0 }); };
  const goToCanon  = () => { window.location.hash = "#/";                       window.scrollTo({ top: 0 }); };

  return (
    <React.Fragment>
      <OrAppHeader />
      <main>
        {route === "report"
          ? <AlignmentReport onBack={goToCanon} />
          : <CanonView onJumpToReport={goToReport} />}
      </main>
      <OrAppFooter />
    </React.Fragment>
  );
}

function OrAppHeader() {
  return (
    <nav
      style={{
        position: "sticky", top: 0, zIndex: 20,
        background: "var(--tehom-deep)",
        borderBottom: "1px solid var(--hairline)",
      }}
    >
      <OContainer style={{ height: 64, display: "flex", alignItems: "center", justifyContent: "space-between" }}>
        <OrLockup size={26} />
        <div style={{ display: "flex", gap: 28, alignItems: "center", fontFamily: "var(--font-body)", fontSize: 13, color: "var(--fg-3)" }}>
          <MonoTagO color="var(--fg-4)">canon v{window.OR_DATA.canon.version}</MonoTagO>
          <MonoTagO color="var(--fg-4)">{window.OR_DATA.frameworks.length} frameworks</MonoTagO>
        </div>
      </OContainer>
    </nav>
  );
}

function OrAppFooter() {
  return (
    <footer style={{ padding: "32px 0", borderTop: "1px solid var(--hairline)" }}>
      <OContainer style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 24 }}>
        <OrLockup size={20} />
        <div style={{ fontFamily: "var(--font-body)", fontSize: 12, color: "var(--fg-4)" }}>
          The alignment memory of the Tehom family · by tehom
        </div>
      </OContainer>
    </footer>
  );
}

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