/* Main App */
const { useState: ause, useEffect: auef } = React;

function App() {
  const [screen, setScreen] = ause("riepilogo");
  const [filters, setFilters] = ause(() => window.DATA.defaultFilters());

  function navigate(id) { setScreen(id); }
  function goToDettagli(extra) {
    setFilters(f => ({ ...f, ...extra }));
    setScreen("dettagli");
  }
  function editFilters() { setScreen("filtri"); }

  const crumbsMap = {
    riepilogo: ["Direzione Sanitaria", "Analytics chirurgico", "M1 · Riepilogo"],
    filtri:    ["Direzione Sanitaria", "Analytics chirurgico", "M2 · Filtri & ricerche"],
    dettagli:  ["Direzione Sanitaria", "Analytics chirurgico", "M3 · Dettagli & drill-down"],
    ia:        ["Direzione Sanitaria", "Analytics chirurgico", "M4 · Intelligenza Artificiale"],
    consumi:   ["Direzione Sanitaria", "Analytics chirurgico", "M5 · Consumi DM"]
  };

  return (
    <div className="app">
      <Sidebar active={screen} onNavigate={navigate} />
      <main className="main">
        <Topbar crumbs={crumbsMap[screen]} />
        <div className="content">
          {screen === "riepilogo" && <Mask1Riepilogo filters={filters} onEditFilters={editFilters} onGoToDettagli={goToDettagli} />}
          {screen === "filtri" && <Mask2Filtri filters={filters} onChange={setFilters} onApply={() => setScreen("riepilogo")} />}
          {screen === "dettagli" && <Mask3Dettagli filters={filters} onEditFilters={editFilters} />}
          {screen === "ia" && <Mask4IA filters={filters} onEditFilters={editFilters} />}
          {screen === "consumi" && <Mask5DM filters={filters} onEditFilters={editFilters} />}
        </div>
      </main>
      <ChatAssistant currentScreen={screen} />
    </div>
  );
}

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