/* App shell — router de pantallas, persiste la pantalla activa */

function App() {
  const [screen, setScreen] = React.useState(() => localStorage.getItem('phlou-screen') || 'login');
  const [order, setOrder] = React.useState(null);
  const hist = React.useRef([]);

  React.useEffect(() => { localStorage.setItem('phlou-screen', screen); }, [screen]);

  function go(s) { if (s !== screen) hist.current.push(screen); setScreen(s); }
  function openOrder(o) { setOrder(o); go('detail'); }
  function goBack() { setScreen(hist.current.length ? hist.current.pop() : 'dashboard'); }
  function close() { hist.current = []; setScreen('login'); }

  if (screen === 'login') return <Login onEnter={() => go('dashboard')} />;

  const nav = { onBack: goBack, onClose: close };
  let view;
  if (screen === 'dashboard') view = <Dashboard go={go} openOrder={openOrder} {...nav} />;
  else if (screen === 'board') view = <Board go={go} openOrder={openOrder} {...nav} />;
  else if (screen === 'orders') view = <OrdersList openOrder={openOrder} {...nav} />;
  else if (screen === 'detail') view = <OrderDetail order={order} {...nav} />;
  else if (screen === 'settings') view = <Settings {...nav} />;
  else view = <Dashboard go={go} openOrder={openOrder} {...nav} />;

  return (
    <div className="app">
      <Sidebar screen={screen} go={go} onLogout={() => go('login')} />
      <div className="stage">{view}</div>
    </div>
  );
}

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