/* eslint-disable */
// App.jsx — top-level router for the clickable prototype.

const PrototypeApp = () => {
  const { flow, screen } = useHashRoute();
  const [data, setData] = React.useState({});
  // Merge updater: callers pass { key: value }
  const set = React.useCallback((patch) => {
    setData(prev => ({ ...prev, ...patch }));
  }, []);

  const ctx = React.useMemo(() => ({ data, set, flow, screen }), [data, set, flow, screen]);

  // Reset transient flow state when returning to menu
  React.useEffect(() => {
    if (flow === 'menu') {
      // Keep onboarding data (so re-entering after approval still shows the name);
      // but clear mint/burn typing state so each demo starts fresh.
      setData(prev => {
        const next = { ...prev };
        ['mintAmount','burnAmount'].forEach(k => delete next[k]);
        return next;
      });
    }
  }, [flow]);

  // Auto-scroll to top of the main pane on screen change
  React.useEffect(() => {
    const el = document.querySelector('main');
    if (el) el.scrollTop = 0;
    window.scrollTo(0, 0);
  }, [flow, screen]);

  return (
    <PrototypeContext.Provider value={ctx}>
      <LangProvider>
        {flow === 'menu' && <Launcher />}
        {flow === 'onboarding' && <OnboardingFlow screen={screen || 'signup'} />}
        {flow === 'mint'       && <MintFlow screen={screen || 'initiate'} />}
        {flow === 'burn'       && <BurnFlow screen={screen || 'initiate'} />}
        {flow === 'dashboard'  && <DashboardFlow screen={screen || 'home'} />}
        {flow !== 'menu' && <PrototypeMenuButton />}
      </LangProvider>
    </PrototypeContext.Provider>
  );
};

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