// App entry — handles screen + selected-entity state
const { useState: useStateApp } = React;

function App(){
  // Allow ?screen=projects or #projects to set initial screen
  const initial = (() => {
    try {
      const qs = new URLSearchParams(window.location.search);
      const fromQuery = qs.get("screen");
      if (fromQuery) return fromQuery;
      const h = window.location.hash.replace(/^#/, "");
      if (h) return h;
    } catch (e) {}
    return "overview";
  })();
  const [screen, setScreen]   = useStateApp(initial);
  const [project, setProject] = useStateApp("contract-ai");
  const [cluster, setCluster] = useStateApp("halton-labs");
  const [report,  setReport]  = useStateApp("r-2026-05-01-pers");
  const [member,  setMember]  = useStateApp("vk");

  // Going to a project-section from the sidebar should land you in detail context too.
  // Sidebar will only set the top screen; sub-pages reach by clicking rows.
  return (
    <Shell screen={screen} setScreen={setScreen}>
      {screen === "overview"        && <Overview       setScreen={setScreen} setProject={setProject}/>}
      {screen === "projects"        && <Projects       setScreen={setScreen} setProject={setProject}/>}
      {screen === "project-detail"  && <ProjectDetail  slug={project} setScreen={setScreen}/>}
      {screen === "clusters"        && <Clusters       setScreen={setScreen} setCluster={setCluster}/>}
      {screen === "cluster-detail"  && <ClusterDetail  id={cluster}  setScreen={setScreen} setProject={setProject}/>}
      {screen === "reports"         && <Reports        setScreen={setScreen} setReport={setReport}/>}
      {screen === "report-detail"   && <ReportDetail   id={report}   setScreen={setScreen}/>}
      {screen === "team"            && <Team/>}
      {screen === "optimisation"    && <Optimisation/>}
      {screen === "members"         && <Members        setScreen={setScreen} setMember={setMember}/>}
      {screen === "member-detail"   && <MemberDetail   id={member}   setScreen={setScreen}/>}
    </Shell>
  );
}

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