// Main app shell · routing, sidebar, topbar.

function App() {
  const [page, setPage] = React.useState(() => {
    const hash = window.location.hash.replace("#", "");
    return NAV_ITEMS.find(i => i.id === hash) ? hash : "dashboard";
  });
  const [mobileNav, setMobileNav] = React.useState(false);

  React.useEffect(() => {
    window.location.hash = page;
  }, [page]);

  React.useEffect(() => {
    const onHash = () => {
      const h = window.location.hash.replace("#", "");
      if (NAV_ITEMS.find(i => i.id === h)) setPage(h);
    };
    window.addEventListener("hashchange", onHash);
    return () => window.removeEventListener("hashchange", onHash);
  }, []);

  const Page = pageMap[page] ?? Dashboard;

  return (
    <div className="app">
      <Sidebar current={page} onChange={setPage} mobileOpen={mobileNav} onMobileClose={() => setMobileNav(false)} />
      <main className="exos-main">
        <Topbar onMenu={() => setMobileNav(true)} onNavigate={setPage} />
        <div className="exos-main-scroll">
          <Page navigate={setPage} />
        </div>
      </main>
      <TweaksPanel />
    </div>
  );
}

const pageMap = {
  dashboard: () => <Dashboard navigate={p => window.location.hash = p} />,
  portfolio: Portfolio,
  planner: Planner,
  simulator: Simulator,
  regret: Regret,
  reports: Reports,
  settings: Settings,
};

// Fix dashboard navigate prop wiring
pageMap.dashboard = ({ navigate }) => <Dashboard navigate={navigate} />;

// Main scroll area styles
(function() {
  if (document.getElementById("exos-app-styles")) return;
  const t = document.createElement("style");
  t.id = "exos-app-styles";
  t.textContent = `
    .exos-main { display: flex; flex-direction: column; min-height: 100vh; background: var(--bg); min-width: 0; }
    .exos-main-scroll { flex: 1; }
  `;
  document.head.appendChild(t);
})();

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <StoreProvider>
    <LicenseGate>
      <WelcomeGate>
        <App />
      </WelcomeGate>
    </LicenseGate>
  </StoreProvider>
);

// Hide boot splash
requestAnimationFrame(() => {
  const boot = document.getElementById("boot");
  if (boot) {
    boot.classList.add("fade");
    setTimeout(() => boot.remove(), 300);
  }
});