const { useState, useEffect, useCallback } = React;

/* ── App ─────────────────────────────────────────────────────────────────── */
function App() {
  const [token, setToken] = useState(localStorage.getItem('archebet_token'));
  const [username, setUsername] = useState('');
  const [balance, setBalance] = useState(0);
  const [isAdmin, setIsAdmin] = useState(false);
  const [game, setGame] = useState(null);
  const [showAdmin, setShowAdmin] = useState(false);
  const [muted, setMuted] = useState(() => localStorage.getItem('archebet_muted') === 'true');

  useEffect(() => {
    window.SoundFX?.setMuted(muted);
  }, [muted]);

  // Refresh balance every 30 s while on the lobby (handles admin top-ups, etc.)
  useEffect(() => {
    if (!token || game !== null) return;
    const t = setInterval(() => {
      fetch('/api/me', { headers: { Authorization: `Bearer ${token}` } })
        .then(r => r.json())
        .then(d => { if (!d.error) setBalance(d.balance); })
        .catch(() => {});
    }, 30000);
    return () => clearInterval(t);
  }, [token, game]);

  useEffect(() => {
    if (!token) return;
    fetch('/api/me', { headers: { Authorization: `Bearer ${token}` } })
      .then(r => r.json())
      .then(d => {
        if (d.error) { logout(); return; }
        setUsername(d.username);
        setBalance(d.balance);
        setIsAdmin(d.is_admin || false);
      })
      .catch(logout);
  }, [token]);

  function handleLogin(tok, user, bal, admin) {
    localStorage.setItem('archebet_token', tok);
    setToken(tok);
    setUsername(user);
    setBalance(bal);
    setIsAdmin(admin || false);
  }

  function logout() {
    localStorage.removeItem('archebet_token');
    setToken(null);
    setUsername('');
    setBalance(0);
    setIsAdmin(false);
    setGame(null);
    setShowAdmin(false);
  }

  const apiFetch = useCallback(async (path, body) => {
    const res = await fetch(path, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json', Authorization: `Bearer ${token}` },
      body: JSON.stringify(body),
    });
    const data = await res.json();
    if (!res.ok) throw new Error(data.error || 'Request failed');
    return data;
  }, [token]);

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

  if (showAdmin) return <Admin onBack={() => setShowAdmin(false)} token={token} />;

  const gameProps = { balance, apiFetch, token, onBack: () => setGame(null), onBalanceChange: setBalance };

  const gameView = {
    blackjack: <Blackjack {...gameProps} />,
    slots:     <Slots     {...gameProps} />,
    roulette:  <Roulette  {...gameProps} />,
    crash:     <Crash     {...gameProps} />,
    crate:     <Crate     {...gameProps} />,
    poker:     <Poker     {...gameProps} />,
    group_bj:  <GroupBJ   {...gameProps} />,
    plinko:    <Plinko    {...gameProps} />,
    minesweeper: <Minesweeper {...gameProps} />,
    keno:        <Keno        {...gameProps} />,
  };

  return (
    <div className="app">
      <header className="topbar">
        <div className="brand" onClick={() => { window.SoundFX?.chip(); setGame(null); }} style={{ cursor: 'pointer' }}>
          <BrandCrest size={38} />
          <span className="brand-name">ArcheBet</span>
          <span className="brand-motto">Fortune Favours the Bold</span>
        </div>
        <div className="topbar-right">
          <div className="balance-chip">
            <span className="balance-label">Balance</span>
            <span className="balance-amount">{balance.toLocaleString()}</span>
            <span className="balance-g">G</span>
          </div>
          <span className="topbar-username">{username}</span>
          <button
            className="btn"
            onClick={() => setMuted(m => !m)}
            style={{ opacity: muted ? 0.45 : 1, minWidth: 36 }}
            title={muted ? 'Sound off — click to unmute' : 'Sound on — click to mute'}
          >
            {muted ? '♪ Off' : '♪ On'}
          </button>
          {isAdmin && <button className="btn" onClick={() => setShowAdmin(true)}>Admin</button>}
          <button className="btn" onClick={logout}>Logout</button>
        </div>
      </header>

      <main className="main-content">
        {game ? gameView[game] : <Lobby onSelect={setGame} token={token} />}
      </main>
    </div>
  );
}

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