/* AORYN Portal — root app + view switching */

const { useState: rS, useEffect: rE } = React;

function PortalApp() {
  const [user, setUser] = rS(() => {
    try { return JSON.parse(localStorage.getItem('aoryn_user') || 'null'); } catch { return null; }
  });
  const [view, setView] = rS(() => localStorage.getItem('aoryn_view') || 'dashboard');
  const [theme, setTheme] = rS(() => localStorage.getItem('aoryn_theme') || 'dark');

  rE(() => {
    if (user) localStorage.setItem('aoryn_user', JSON.stringify(user));
    else localStorage.removeItem('aoryn_user');
  }, [user]);

  rE(() => { localStorage.setItem('aoryn_view', view); }, [view]);

  rE(() => {
    document.documentElement.setAttribute('data-theme', theme);
    localStorage.setItem('aoryn_theme', theme);
  }, [theme]);

  const toggleTheme = () => setTheme(t => t === 'dark' ? 'light' : 'dark');

  if (!user) return <LoginPage onLogin={setUser} theme={theme} onToggleTheme={toggleTheme}/>;

  return (
    <>
      <div className="bg-grid"></div>
      <div className="bg-glow g1"></div>
      <div className="bg-glow g2"></div>
      <div className="app">
        <Sidebar view={view} setView={setView} onLogout={() => setUser(null)}/>
        <div className="main">
          <Topbar view={view} user={user} theme={theme} onToggleTheme={toggleTheme}/>
          {view === 'dashboard' && <Dashboard setView={setView}/>}
          {view === 'project' && <ProjectView/>}
          {view === 'timeline' && <ProjectView/>}
          {view === 'files' && <FilesView/>}
          {view === 'deliverables' && <FilesView/>}
          {view === 'messages' && <MessagesView/>}
          {view === 'proposals' && <ProposalsView/>}
          {view === 'settings' && <SettingsView user={user}/>}
        </div>
        <MobileNav view={view} setView={setView}/>
      </div>
    </>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<PortalApp/>);