// App root — handles flow state between landing, modals, and dashboard

const CONFIG = {
  depositAmount: 100,
  bonusMult: 3,
  retailPrice: 649,
  accent: "#ff3366",
};

document.documentElement.classList.add('js-ready');

function App() {
  const [stage, setStage] = React.useState('landing'); // landing | dashboard
  const [walletOpen, setWalletOpen] = React.useState(false);
  const [depositOpen, setDepositOpen] = React.useState(false);
  const [wallet, setWallet] = React.useState(null);
  const [confettiOn, setConfettiOn] = React.useState(false);
  const [toasts, setToasts] = React.useState([]);

  function addToast(text) {
    const id = Date.now() + Math.random();
    setToasts(t => [...t, { id, text }]);
    setTimeout(() => setToasts(t => t.filter(x => x.id !== id)), 2400);
  }

  function onConnect() { setWalletOpen(true); }

  function onWalletConnected(w) {
    setWallet(w);
    setWalletOpen(false);
    setTimeout(() => setDepositOpen(true), 280);
  }

  function onDepositSuccess() {
    setDepositOpen(false);
    setConfettiOn(true);
    setTimeout(() => setStage('dashboard'), 280);
  }

  function onLogout() {
    setStage('landing');
    setWallet(null);
    addToast('Wallet disconnected');
  }

  return (
    <>
      {stage === 'landing' && <Landing onConnect={onConnect} tweaks={CONFIG}/>}
      {stage === 'dashboard' && <Dashboard user={window.MOCK_DATA.user} onLogout={onLogout} addToast={addToast}/>}

      <WalletConnectModal open={walletOpen} onClose={() => setWalletOpen(false)} onConnected={onWalletConnected}/>
      <DepositModal open={depositOpen} onClose={() => setDepositOpen(false)} wallet={wallet} amount={CONFIG.depositAmount} onSuccess={onDepositSuccess}/>

      <Confetti active={confettiOn} onDone={() => setConfettiOn(false)}/>
      <Toast messages={toasts}/>
    </>
  );
}

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