// App root — routing, state, desktop/mobile view
function App() {
  const [route, setRoute] = useState('splash');
  const [params, setParams] = useState({});
  const [toastMsg, setToastMsg] = useState(null);
  const [user, setUser] = useState({ name: 'Jane Cooper', email: 'jane@aitrader.io', country: 'GB' });

  // View mode — auto by viewport, persisted override
  const detectAuto = () => window.innerWidth >= 1024 ? 'desktop' : 'mobile';
  const [view, setViewState] = useState(() => localStorage.getItem('aitr-view') || detectAuto());

  useEffect(() => {
    if (!localStorage.getItem('aitr-view')) {
      const onResize = () => setViewState(detectAuto());
      window.addEventListener('resize', onResize);
      return () => window.removeEventListener('resize', onResize);
    }
  }, []);

  const setView = v => { setViewState(v); localStorage.setItem('aitr-view', v); };

  const [accounts, setAccounts] = useState([
    { id: 'a1', number: '8420193', type: 'live', platform: 'WebTrader', kind: 'Pro', leverage: '1:200', currency: 'USD', balance: 18420.67, equity: 18802.13 },
    { id: 'a2', number: '8420194', type: 'live', platform: 'WebTrader', kind: 'Standard', leverage: '1:100', currency: 'USD', balance: 2150.00, equity: 2150.00 },
    { id: 'a3', number: '8420195', type: 'demo', platform: 'WebTrader', kind: 'Pro', leverage: '1:500', currency: 'USD', balance: 10000.00, equity: 9852.40 },
  ]);

  const [txns] = useState([
    { id: 't1', type: 'deposit', label: 'Deposit · USDT', method: 'TRC-20', date: 'Today', amount: 1500, status: 'completed' },
    { id: 't2', type: 'trade', label: 'Trade P/L · BTC/USD', method: '#8420193', date: 'Today', amount: 319.20, status: 'completed' },
    { id: 't3', type: 'transfer', label: 'Transfer to #8420194', method: 'Internal', date: 'Yesterday', amount: -500, status: 'completed' },
    { id: 't4', type: 'withdraw', label: 'Withdraw · BTC', method: 'Bitcoin', date: 'Yesterday', amount: -800, status: 'pending' },
    { id: 't5', type: 'bonus', label: 'Welcome bonus', method: 'Promotion', date: 'May 4', amount: 100, status: 'completed' },
    { id: 't6', type: 'deposit', label: 'Deposit · ETH', method: 'ERC-20', date: 'May 3', amount: 2400, status: 'completed' },
    { id: 't7', type: 'withdraw', label: 'Withdraw · USDT', method: 'TRC-20', date: 'May 1', amount: -300, status: 'failed' },
    { id: 't8', type: 'trade', label: 'Trade P/L · EUR/USD', method: '#8420193', date: 'Apr 30', amount: -85.50, status: 'completed' },
  ]);

  const totalEquity = accounts.filter(a => a.type === 'live').reduce((s, a) => s + a.equity, 0);

  const go = (r, p = {}) => { setRoute(r); setParams(p); window.scrollTo?.(0, 0); document.querySelector('.screen')?.scrollTo?.(0, 0); };
  const toast = msg => setToastMsg(msg);
  const login = u => { setUser({ ...user, ...u }); };
  const logout = () => {};
  const updateUser = u => setUser(prev => ({ ...prev, ...u }));
  const addAccount = a => setAccounts(prev => [...prev, a]);

  // Set body class
  useEffect(() => {
    document.body.className = view === 'desktop' ? 'is-desktop' : 'is-mobile';
  }, [view]);

  const ctx = { route, params, go, user, login, logout, updateUser, accounts, addAccount, txns, totalEquity, toast, view, setView, desktop: view === 'desktop' };

  if (view === 'desktop') {
    return <AppCtx.Provider value={ctx}><DesktopApp /><Toast msg={toastMsg} onClose={() => setToastMsg(null)} /></AppCtx.Provider>;
  }

  let screen;
  switch (route) {
    case 'splash': screen = <Splash />; break;
    case 'register': screen = <Register />; break;
    case 'login': screen = <Login />; break;
    case 'dashboard': screen = <Dashboard />; break;
    case 'accounts': screen = <Accounts />; break;
    case 'account': screen = <AccountDetail />; break;
    case 'newAccount': screen = <NewAccount />; break;
    case 'deposit': screen = <Deposit />; break;
    case 'withdraw': screen = <Withdraw />; break;
    case 'transfer': screen = <Transfer />; break;
    case 'history': screen = <History />; break;
    case 'wallet': screen = <History />; break;
    case 'profile': screen = <Profile />; break;
    case 'settings': screen = <Settings />; break;
    case 'security': screen = <Security />; break;
    case 'promotions': screen = <Promotions />; break;
    default: screen = <Splash />;
  }

  return (
    <AppCtx.Provider value={ctx}>
      <div className="phone">
        {screen}
        {/* Mobile-only: View desktop link at bottom of splash/auth */}
        {['splash','login','register'].includes(route) && (
          <div style={{ position: 'absolute', bottom: 16, left: 0, right: 0, textAlign: 'center', fontSize: 12, color: 'var(--text-dim)', zIndex: 5 }}>
            <a onClick={() => setView('desktop')} style={{ color: 'var(--green)', cursor: 'pointer', textDecoration: 'none' }}>View desktop version →</a>
          </div>
        )}
        {/* Mobile-only: View desktop link in profile */}
      </div>
      <Toast msg={toastMsg} onClose={() => setToastMsg(null)} />
    </AppCtx.Provider>
  );
}

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