/* app.jsx - production route shell for Laurel's Bakehouse. */

function PageScreen({ children, scroll = false, bg }) {
  return (
    <div style={{
      height: '100vh',
      height: '100dvh',
      minHeight: '100vh',
      width: '100%',
      paddingTop: 'env(safe-area-inset-top)',
      paddingBottom: 'env(safe-area-inset-bottom)',
      boxSizing: 'border-box',
      background: bg,
      overflow: scroll ? 'auto' : 'hidden',
      position: 'relative',
    }}>
      {children}
    </div>
  );
}

function LandingApp({ initialModal }) {
  const [modalStep, setModalStep] = React.useState(initialModal || null);
  return (
    <PageScreen bg="var(--lb-blush)">
      <LandingPage onOrderClick={() => setModalStep('sizes')} />
      <OrderModal open={modalStep !== null} initialStep={modalStep || 'sizes'} onClose={() => setModalStep(null)} />
    </PageScreen>
  );
}

function AdminApp() {
  const [checking, setChecking] = React.useState(true);
  const [authed, setAuthed] = React.useState(false);
  const [orders, setOrders] = React.useState([]);
  const [loading, setLoading] = React.useState(false);
  const [error, setError] = React.useState('');

  const loadOrders = React.useCallback(async () => {
    setLoading(true);
    setError('');
    try {
      const next = await window.LaurelAPI.adminOrders();
      setOrders(next);
    } catch (err) {
      setError('Could not load orders.');
    } finally {
      setLoading(false);
    }
  }, []);

  React.useEffect(() => {
    let cancelled = false;
    window.LaurelAPI.adminMe()
      .then(() => { if (!cancelled) { setAuthed(true); loadOrders(); } })
      .catch(() => { if (!cancelled) setAuthed(false); })
      .finally(() => { if (!cancelled) setChecking(false); });
    return () => { cancelled = true; };
  }, [loadOrders]);

  const login = async (password) => {
    await window.LaurelAPI.adminLogin(password);
    setAuthed(true);
    await loadOrders();
  };

  const signOut = async () => {
    try { await window.LaurelAPI.adminLogout(); }
    finally { setAuthed(false); setOrders([]); }
  };

  const onUpdateStatus = async (id, status) => {
    setError('');
    try {
      const updated = await window.LaurelAPI.adminUpdateOrder(id, { status });
      setOrders((prev) => prev.map((o) => (o.id === id ? updated : o)));
    } catch {
      setError('Could not update that order.');
    }
  };

  if (checking) {
    return <PageScreen bg="var(--lb-blush)"><div className="lb-login"><div className="lb-login__title">Bakehouse</div><div className="lb-login__sub">Checking session.</div></div></PageScreen>;
  }

  return (
    <PageScreen scroll={authed} bg={authed ? 'var(--lb-cream)' : 'var(--lb-blush)'}>
      {authed ? <AdminDashboard orders={orders} onUpdateStatus={onUpdateStatus} onSignOut={signOut} loading={loading} error={error} /> : <AdminLogin onLogin={login} />}
    </PageScreen>
  );
}

function App() {
  const path = window.location.pathname.replace(/\/+$/, '') || '/';
  React.useEffect(() => {
    document.title = path === '/admin' || path.startsWith('/admin/') ? 'Laurel Admin' : 'Laurel’s Bakehouse';
  }, [path]);
  if (path === '/admin' || path.startsWith('/admin/')) return <AdminApp />;
  return <LandingApp />;
}

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