/* ============================================================
   Área do Cooperado — app shell
   ============================================================ */
const { useState:useStateA, useEffect:useEffectA } = React;

const SCREENS = {
  overview:  {Comp:OverviewScreen,  title:"Visão geral",          sub:"Olá, Marina — o resumo da sua produção e dos seus créditos."},
  extrato:   {Comp:ExtratoScreen,   title:"Extrato & Notas",      sub:"O histórico financeiro das suas entregas, nota a nota."},
  romaneios: {Comp:RomaneiosScreen, title:"Romaneios",            sub:"Pesagem do bruto úmido até virar pagamento."},
  analise:   {Comp:AnaliseScreen,   title:"Análise & Teor",       sub:"Quanto de estanho tem no seu minério — e o que isso vale."},
  simulador: {Comp:SimuladorScreen, title:"Simulador de venda",   sub:"Estime quanto vai receber por lote antes de entregar."},
  royalties: {Comp:RoyaltiesScreen, title:"Royalties & créditos", sub:"O crédito que você acumula sobre cada entrega."},
  insumos:   {Comp:InsumosScreen,   title:"Insumos & requisições",sub:"Insumos adiantados pela cooperativa, descontados no acerto."},
};

function App(){
  const params = new URLSearchParams(location.search);
  const urlTheme = params.get("theme");
  const urlScreen = params.get("screen");
  const embed = params.get("embed")==="1";

  const [theme,setThemeRaw]=useStateA(()=> urlTheme || localStorage.getItem("coop-theme") || "light");
  const [active,setActiveRaw]=useStateA(()=> urlScreen || localStorage.getItem("coop-screen") || "overview");

  useEffectA(()=>{ document.documentElement.setAttribute("data-theme",theme); if(!embed) localStorage.setItem("coop-theme",theme); },[theme]);
  useEffectA(()=>{ if(!embed) localStorage.setItem("coop-screen",active); },[active]);

  const setTheme=(t)=>setThemeRaw(t);
  const onNav=(id)=>{ setActiveRaw(id); window.scrollTo({top:0}); };
  const [help,setHelp]=useStateA(false);

  const cur = SCREENS[active] || SCREENS.overview;
  const Comp = cur.Comp;

  return (
    <div className="app">
      <Sidebar active={active} onNav={onNav}/>
      <MobileTop title={cur.title} theme={theme} setTheme={setTheme}/>
      <main className="main">
        <Topbar title={cur.title} subtitle={cur.sub} theme={theme} setTheme={setTheme}/>
        <div className="page">
          <Comp key={active} onNav={onNav}/>
        </div>
      </main>
      <BottomNav active={active} onNav={onNav}/>
      <HelpButton onClick={()=>setHelp(true)}/>
      <HelpSheet open={help} onClose={()=>setHelp(false)}/>
    </div>
  );
}

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