// app.jsx — root, routing, tweaks, mounts inside Android frame

const APP_TWEAKS = /*EDITMODE-BEGIN*/{
  "accent": "#ffffff",
  "darkLevel": "obsidian",
  "density": "regular",
  "startBalance": 1000
}/*EDITMODE-END*/;

const USER_KEY = 'mahamon.user';
const SETTINGS_KEY = 'mahamon.settings';

function App() {
  const [t, setTweak] = useTweaks(APP_TWEAKS);
  const [user, setUser] = React.useState(() => {
    try { return JSON.parse(localStorage.getItem(USER_KEY) || 'null'); } catch (e) { return null; }
  });
  const [settings, setSettingsState] = React.useState(() => {
    try {
      const s = JSON.parse(localStorage.getItem(SETTINGS_KEY) || 'null');
      return s || { lang: 'en', notif: true };
    } catch (e) { return { lang: 'en', notif: true }; }
  });
  const setSettings = (s) => {
    setSettingsState(s);
    localStorage.setItem(SETTINGS_KEY, JSON.stringify(s));
  };

  const [screen, setScreen] = React.useState('lobby');
  const [showHistory, setShowHistory] = React.useState(false);
  const [showSettings, setShowSettings] = React.useState(false);
  const [showTip, setShowTip] = React.useState(false);
  const [rulesKey, setRulesKey] = React.useState(null);

  React.useEffect(() => {
    if (typeof setSoundEnabled === 'function') {
      setSoundEnabled(settings.sound !== false);
    }
  }, [settings.sound]);

  React.useEffect(() => {
    const root = document.documentElement;
    root.style.setProperty('--accent', t.accent);
    if (t.darkLevel === 'true-black') {
      root.style.setProperty('--bg', '#000');
      root.style.setProperty('--surface', '#080808');
    } else if (t.darkLevel === 'soft') {
      root.style.setProperty('--bg', '#121212');
      root.style.setProperty('--surface', '#1a1a1a');
    } else {
      root.style.setProperty('--bg', '#050505');
      root.style.setProperty('--surface', '#0d0d0d');
    }
    root.style.setProperty('--pad', t.density === 'compact' ? '18px' : t.density === 'comfy' ? '30px' : '24px');
  }, [t]);

  const goto = (id) => setScreen(id);
  const back = () => setScreen('lobby');
  const openRules = () => setRulesKey(screen);

  const signIn = (u) => { localStorage.setItem(USER_KEY, JSON.stringify(u)); setUser(u); };
  const updateUser = (u) => { localStorage.setItem(USER_KEY, JSON.stringify(u)); setUser(u); };
  const signOut = () => { localStorage.removeItem(USER_KEY); setUser(null); setShowSettings(false); setScreen('lobby'); };
  const deleteAcc = () => {
    localStorage.removeItem(USER_KEY);
    localStorage.removeItem('mahamon.account');
    localStorage.removeItem('mahamon.dailyClaim');
    localStorage.removeItem('mahamon.adClaim');
    localStorage.removeItem('mahamon.unlocked');
    localStorage.removeItem('mahamon.tipped');
    localStorage.removeItem('mahamon.tipCredits');
    localStorage.removeItem(SETTINGS_KEY);
    setUser(null); setScreen('lobby');
  };

  let view = null;
  const props = { onBack: back, onHistory: () => setShowHistory(true), onRules: openRules, onTip: () => setShowTip(true) };
  switch (screen) {
    case 'lobby':     view = <Lobby onPick={goto} onHistory={() => setShowHistory(true)} onSettings={() => setShowSettings(true)} onRanking={() => setScreen('ranking')} onTip={() => setShowTip(true)} />; break;
    case 'ranking':   view = <Ranking user={user} onBack={back} />; break;
    case 'roulette':  view = <Roulette {...props} />; break;
    case 'blackjack': view = <Blackjack {...props} />; break;
    case 'slots':     view = <Slots {...props} />; break;
    case 'craps':     view = <Craps {...props} />; break;
    case 'poker':     view = <VideoPoker {...props} />; break;
    case 'coin':      view = <CoinFlip {...props} />; break;
    case 'baccarat':    view = <Baccarat {...props} />; break;
    case 'hilo':        view = <HiLo {...props} />; break;
    case 'crash':       view = <Crash {...props} />; break;
    case 'mines':       view = <Mines {...props} />; break;
    case 'dragontiger': view = <DragonTiger {...props} />; break;
    case 'limbo':       view = <Limbo {...props} />; break;
    case 'war':         view = <CasinoWar {...props} />; break;
    case 'towers':      view = <Towers {...props} />; break;
    case 'plinko':      view = <Plinko {...props} />; break;
    case 'keno':        view = <Keno {...props} />; break;
    default: view = <Lobby onPick={goto} onHistory={() => setShowHistory(true)} onSettings={() => setShowSettings(true)} onRanking={() => setScreen('ranking')} onTip={() => setShowTip(true)} />;
  }

  return (
    <LangProvider lang={settings.lang}>
    <div className="phone-wrap">
      <div className="app">
        {!user ? (
          <LoginScreen onSignIn={signIn} />
        ) : (
          <>
            {view}
            {showHistory && <HistoryOverlay onClose={() => setShowHistory(false)} />}
            {showTip && <TipSheet onClose={() => setShowTip(false)} />}
            {rulesKey && <RulesOverlay rulesKey={rulesKey} onClose={() => setRulesKey(null)} />}
            {showSettings && (
              <SettingsOverlay
                user={user}
                onClose={() => setShowSettings(false)}
                onSignOut={signOut}
                onDelete={deleteAcc}
                onUpdateUser={updateUser}
                settings={settings}
                setSettings={setSettings}
              />
            )}
          </>
        )}
      </div>

      <TweaksPanel>
        <TweakSection label="Appearance" />
        <TweakColor label="Accent" value={t.accent}
          options={['#ffffff', '#d4af37', '#c8b88a', '#7d9b6a', '#b85450']}
          onChange={(v) => setTweak('accent', v)} />
        <TweakRadio label="Background" value={t.darkLevel}
          options={['true-black', 'obsidian', 'soft']}
          onChange={(v) => setTweak('darkLevel', v)} />
        <TweakRadio label="Density" value={t.density}
          options={['compact', 'regular', 'comfy']}
          onChange={(v) => setTweak('density', v)} />
        <TweakSection label="Lounge" />
        <TweakSlider label="Starting balance" value={t.startBalance}
          min={500} max={50000} step={250}
          onChange={(v) => setTweak('startBalance', v)} />
      </TweaksPanel>
    </div>
    </LangProvider>
  );
}

function Root() {
  const [t] = useTweaks(APP_TWEAKS);
  return (
    <StoreProvider initialBalance={t.startBalance}>
      <App />
    </StoreProvider>
  );
}

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