// Standalone app for Prop Arena.
// Handles routing between splash/login/register/dashboard/accounts/account,
// plus a floating "Preview" toolbar to toggle desktop/mobile and demo-login.

const AUTH_PAGES = ['splash', 'login', 'register', 'forgotPassword'];
const PATH_TO_PAGE = {
  '/': 'splash',
  '/splash': 'splash',
  '/login': 'login',
  '/register': 'register',
  '/forgot-password': 'forgotPassword',
  '/dashboard': 'dashboard',
  '/accounts': 'accounts',
  '/account': 'account',
  '/new-account': 'newAccount',
  '/webtrader': 'webtrader',
  '/journal': 'journal',
  '/wallet': 'wallet',
  '/deposit': 'deposit',
  '/deposit/crypto': 'depositCrypto',
  '/deposit/card': 'depositCard',
  '/deposit/wire': 'depositWire',
  '/withdraw': 'withdraw',
  '/withdraw/crypto': 'withdrawCrypto',
  '/withdraw/wire': 'withdrawWire',
  '/withdraw/confirm': 'withdrawConfirm',
  '/profile': 'profile',
  '/profile/edit': 'profileEdit',
  '/security': 'security',
  '/credentials': 'credentials',
  '/inbox': 'inbox',
  '/tiers': 'tiers',
  '/grand-cup': 'grandcup',
  '/education': 'education',
  '/tv': 'tv',
  '/calendar': 'calendar',
  '/affiliates': 'affiliates',
  '/merch': 'merchandise',
  '/notifications': 'notifications',
  '/help': 'help',
  '/settings': 'settings',
};
const PAGE_TO_PATH = Object.fromEntries(Object.entries(PATH_TO_PAGE).map(([path, page]) => [page, path]));

function pageFromPath() {
  const path = window.location.pathname.replace(/\/$/, '') || '/';
  return PATH_TO_PAGE[path] || localStorage.getItem('pa-page') || 'splash';
}

function App() {
  const [view, setView] = useState(() => localStorage.getItem('pa-view') || 'desktop');
  const [page, setPage] = useState(() => pageFromPath());
  const [accountId, setAccountId] = useState(() => localStorage.getItem('pa-acc') || 'a4');
  const [authed, setAuthed] = useState(() => {
    const initialPage = pageFromPath();
    if (AUTH_PAGES.includes(initialPage)) return false;
    if (PATH_TO_PAGE[window.location.pathname.replace(/\/$/, '') || '/']) return true;
    return localStorage.getItem('pa-authed') === '1';
  });

  useEffect(() => { localStorage.setItem('pa-view', view); }, [view]);
  useEffect(() => {
    localStorage.setItem('pa-page', page);
    const nextPath = PAGE_TO_PATH[page] || '/';
    if (window.location.pathname !== nextPath) {
      window.history.replaceState(null, '', nextPath + window.location.search);
    }
  }, [page]);
  useEffect(() => { localStorage.setItem('pa-acc', accountId); }, [accountId]);
  useEffect(() => {
    localStorage.setItem('pa-authed', authed ? '1' : '0');
    if (authed && AUTH_PAGES.includes(page)) setPage('dashboard');
    if (!authed && !AUTH_PAGES.includes(page)) setPage('splash');
  }, [authed]);

  const ctx = {
    view, setView,
    page, setPage,
    accountId, setAccountId,
    authed, setAuthed,
    accounts: window.SEED_ACCOUNTS,
    account: window.SEED_ACCOUNTS.find(a => a.id === accountId) || window.SEED_ACCOUNTS[0],
    go: (p, id) => { setPage(p); if (id) setAccountId(id); window.scrollTo?.(0, 0); },
  };

  const Component = authed ? window.ArenaApp : window.ArenaAuth;

  return (
    <AppContext.Provider value={ctx}>
      <div className="stage" data-view={view}>
        {Component ? <Component/> : <div style={{ padding: 40 }}>Loading…</div>}
      </div>
    </AppContext.Provider>
  );
}

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