const { useState: uSA, useEffect: uEA } = React;

function App() {
  const isLoggedIn = !!window.LEXIA.getToken();
  const [view, setView] = uSA(() => {
    if (!window.LEXIA.getToken()) return 'login';
    return localStorage.getItem('lexia-view') || 'dashboard';
  });
  const [toast, setToast] = uSA(null);
  const [unread, setUnread] = uSA(0);

  uEA(() => {
    if (view !== 'login' && view !== 'onboard') localStorage.setItem('lexia-view', view);
  }, [view]);

  uEA(() => {
    if (toast) { const t = setTimeout(() => setToast(null), 2400); return () => clearTimeout(t); }
  }, [toast]);

  uEA(() => {
    const update = () => {
      const n = (window.CONVERSATIONS || []).reduce((s, c) => s + (c.unread || 0), 0);
      setUnread(n);
    };
    update();
    window.addEventListener('lexia-data-loaded', update);
    return () => window.removeEventListener('lexia-data-loaded', update);
  }, []);

  const showToast = (m) => setToast(m);

  const logout = () => {
    window.LEXIA.clearToken();
    localStorage.removeItem('lexia-view');
    setView('login');
  };

  if (view === 'login') return (
    <>
      <LoginPage onLogin={(n) => setView(n === 'onboard' ? 'onboard' : 'dashboard')}/>
      {toast && <div className="toast"><span className="dot"></span>{toast}</div>}
    </>
  );

  if (view === 'onboard') return (
    <>
      <OnboardingPage onDone={() => setView('dashboard')}/>
      {toast && <div className="toast"><span className="dot"></span>{toast}</div>}
    </>
  );

  const adv = window._advogado || {};
  const nomeExib = adv.nome ? adv.nome.split(' ').slice(0,2).join(' ') : 'Usuário';
  const oab = adv.oab || '';

  const navItems = [
    ['dashboard', 'Início', 'chart'],
    ['inbox', 'Inbox', 'inbox'],
    ['clients', 'Clientes', 'users'],
    ['processes', 'Processos', 'file'],
    ['agenda', 'Agenda', 'cal'],
    ['reports', 'Relatórios', 'chart'],
  ];

  return (
    <div className="shell">
      <aside className="sidebar">
        <div className="brand">
          <img src="assets/logo-mark.svg" width="28" height="28" alt=""/>
          <div className="wm">LEXIA<em>AI</em></div>
        </div>
        <div className="section">Trabalho</div>
        {navItems.map(([k,l,ic]) => (
          <button key={k} className={`nav ${view===k?'active':''}`} onClick={()=>setView(k)}>
            <Icon name={ic}/>
            <span>{l}</span>
            {k === 'inbox' && unread > 0 && <span className="count">{unread}</span>}
          </button>
        ))}
        <div className="section">Sistema</div>
        <button className={`nav ${view==='agent'?'active':''}`} onClick={()=>setView('agent')}>
          <Icon name="sparkle"/><span>Agente LEXIA</span>
        </button>
        <button className={`nav ${view==='notifications'?'active':''}`} onClick={()=>setView('notifications')}>
          <Icon name="bell"/><span>Notificações</span>
        </button>
        <button className={`nav ${view==='settings'?'active':''}`} onClick={()=>setView('settings')}>
          <Icon name="settings"/><span>Configurações</span>
        </button>
        <div className="user">
          <div className="av">{nomeExib[0] || 'U'}</div>
          <div style={{flex:1,minWidth:0}}>
            <div className="nm">{nomeExib}</div>
            <div className="role">{oab ? `OAB ${oab}` : adv.escritorio?.nome || 'Escritório'}</div>
          </div>
          <button className="nav" style={{padding:6,width:28}} onClick={logout} title="Sair">
            <Icon name="logout"/>
          </button>
        </div>
      </aside>
      <main style={{overflow:'hidden',display:'flex',flexDirection:'column'}}>
        {view === 'dashboard' && <DashboardPage go={setView}/>}
        {view === 'inbox' && <InboxPage toast={showToast}/>}
        {view === 'clients' && <ClientsPage go={setView}/>}
        {view === 'processes' && <ProcessesPage/>}
        {view === 'agenda' && <AgendaPage/>}
        {view === 'reports' && <ReportsPage/>}
        {view === 'agent' && <AgentPage toast={showToast}/>}
        {view === 'notifications' && <NotificationsPage toast={showToast}/>}
        {view === 'settings' && <SettingsPage toast={showToast}/>}
      </main>
      {toast && <div className="toast"><span className="dot"></span>{toast}</div>}
    </div>
  );
}

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