const { Toast: AppToast } = window.OctanexDesignSystem_0e3b75;

function App() {
  const [booting, setBooting] = React.useState(true);
  const [logged, setLogged] = React.useState(false);
  const [user, setUser] = React.useState(null);
  const [screen, setScreen] = React.useState('dashboard');
  const [topUpOpen, setTopUpOpen] = React.useState(false);
  const [balance, setBalance] = React.useState({ rub: 0, ton: 0 });
  const [toasts, setToasts] = React.useState([]);

  const pushToast = (t) => {
    const id = Date.now() + Math.random();
    setToasts((ts) => [...ts, { ...t, id }]);
    setTimeout(() => setToasts((ts) => ts.filter((x) => x.id !== id)), 5200);
  };

  // проверка сессии при загрузке
  React.useEffect(() => {
    window.api.me()
      .then((me) => { setLogged(true); setUser(me); setBalance(me.balance || { rub: 0, ton: 0 }); })
      .catch(() => { /* не авторизован — покажем логин */ })
      .finally(() => setBooting(false));
  }, []);

  const refreshBalance = React.useCallback(() => {
    window.api.balance().then(setBalance).catch(() => {});
  }, []);

  const onLogin = (u) => {
    setLogged(true);
    setUser(u);
    setBalance((u && u.balance) || { rub: 0, ton: 0 });
    setScreen('dashboard');
  };

  const onLogout = () => {
    window.api.logout().catch(() => {}).finally(() => { setLogged(false); setUser(null); setBalance({ rub: 0, ton: 0 }); });
  };

  const onPaid = ({ amount, method }) => {
    setTopUpOpen(false);
    // реальное зачисление придёт с сервера после оплаты — обновляем баланс
    refreshBalance();
    pushToast({ tone: 'green', title: 'пополнение создано', description: `${amount.toLocaleString('ru-RU')} ₽ · ${method} — подтвердите оплату` });
  };

  if (booting) {
    return (
      <div style={{ minHeight: '100vh', display: 'grid', placeItems: 'center', fontFamily: 'var(--font-mono)', color: 'var(--text-muted)' }}>
        загрузка…
      </div>
    );
  }

  if (!logged) {
    return <Login onLogin={onLogin} />;
  }

  const screens = {
    dashboard: <Dashboard balance={balance} setScreen={setScreen} onTopUp={() => setTopUpOpen(true)} />,
    smm: <Smm pushToast={pushToast} onChange={refreshBalance} />,
    market: <Market balance={balance} pushToast={pushToast} onChange={refreshBalance} />,
    ai: <Ai pushToast={pushToast} onChange={refreshBalance} />,
  };

  return (
    <React.Fragment>
      <Shell screen={screen} setScreen={setScreen} balance={balance} user={user}
        onTopUp={() => setTopUpOpen(true)} onLogout={onLogout}>
        <div data-screen-label={screen}>{screens[screen]}</div>
      </Shell>
      <TopUp open={topUpOpen} onClose={() => setTopUpOpen(false)} onPaid={onPaid} payerId={user && user.id} />
      <div style={{ position: 'fixed', right: 20, bottom: 20, zIndex: 200, display: 'flex', flexDirection: 'column', gap: 10 }}>
        {toasts.map((t) => (
          <AppToast key={t.id} tone={t.tone} title={t.title} description={t.description}
            onClose={() => setToasts((ts) => ts.filter((x) => x.id !== t.id))} />
        ))}
      </div>
    </React.Fragment>
  );
}

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