// Bellia — Router minimal

const App = () => {
  const [page, setPage] = React.useState(() => {
    try { return localStorage.getItem('bellia-page') || 'login'; } catch { return 'login'; }
  });

  React.useEffect(() => {
    try { localStorage.setItem('bellia-page', page); } catch {}
    window.scrollTo({ top: 0 });
  }, [page]);

  const nav = (id) => setPage(id);

  if (page === 'login') return <LoginScreen onLogin={() => nav('dashboard')} />;
  if (page === 'dashboard') return <DashboardScreen onNav={nav} />;
  if (page === 'ventes') return <VentesScreen onNav={nav} />;
  if (page === 'automation') return <AutomationScreen onNav={nav} />;
  if (page === 'depenses') return <DepensesScreen onNav={nav} />;
  if (page === 'rh') return <RhScreen onNav={nav} />;
  if (page === 'chat') return <ChatAgentScreen onNav={nav} />;
  if (page === 'restaurants') return <RestaurantsScreenWrapper onNav={nav} />;

  // Placeholder pour les modules non encore conçus
  return (
    <PageShell current={page} onNav={nav}>
      <Header title={MODULES.find(m => m.id === page)?.label || 'Module'} subtitle="Cet écran n'est pas encore conçu" />
      <div style={{
        display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center',
        gap: 18, padding: '80px 40px', background: C.cardWash, borderRadius: 22, border: `1px dashed ${C.line}`,
        textAlign: 'center',
      }}>
        <div style={{ width: 64, height: 64, borderRadius: 20, background: C.orangeWh, color: C.orangeDp, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
          <Icon name={MODULES.find(m => m.id === page)?.icon || 'layers'} size={28} />
        </div>
        <div>
          <div style={{ fontSize: 18, fontWeight: 700, color: C.ink, letterSpacing: -0.3 }}>Bientôt disponible</div>
          <div style={{ fontSize: 13, color: C.mute, marginTop: 6, maxWidth: 380 }}>
            Ce module sera conçu lors d'une prochaine itération. Reviens au tableau de bord pour explorer les écrans déjà livrés.
          </div>
        </div>
        <div style={{ display: 'flex', gap: 10 }}>
          <Btn kind="ghost" onClick={() => nav('dashboard')} icon={<Icon name="chevLeft" size={14} color={C.ink2} />}>Tableau de bord</Btn>
          <Btn kind="primary" onClick={() => nav('ventes')}>Voir le module Ventes</Btn>
        </div>
      </div>
    </PageShell>
  );
};

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