function Admin({ onBack, token }) {
  const { useState, useEffect, useRef } = React;

  const [users,        setUsers]        = useState([]);
  const [loading,      setLoading]      = useState(true);
  const [search,       setSearch]       = useState('');
  const [selected,     setSelected]     = useState(null);
  const [amount,       setAmount]       = useState('');
  const [feedback,     setFeedback]     = useState(null);
  const [history,      setHistory]      = useState(null);
  const [histLoading,  setHistLoading]  = useState(false);
  const [liveTables,   setLiveTables]   = useState([]);
  const [liveLoading,  setLiveLoading]  = useState(false);
  const [closeMsg,     setCloseMsg]     = useState(null);
  const amountRef = useRef(null);

  const authHeaders = { 'Content-Type': 'application/json', Authorization: `Bearer ${token}` };

  useEffect(() => { loadUsers(); loadLiveTables(); }, []);

  async function loadUsers() {
    setLoading(true);
    try {
      const res = await fetch('/api/admin/users', { headers: { Authorization: `Bearer ${token}` } });
      setUsers(await res.json());
    } finally { setLoading(false); }
  }

  async function loadLiveTables() {
    setLiveLoading(true);
    try {
      const res = await fetch('/api/admin/live-tables', { headers: { Authorization: `Bearer ${token}` } });
      if (res.ok) setLiveTables(await res.json());
    } finally { setLiveLoading(false); }
  }

  async function closeTable(game, tableId) {
    setCloseMsg(null);
    const endpoint = game === 'poker' ? '/api/admin/close-poker-table' : '/api/admin/close-bj-table';
    const res = await fetch(endpoint, {
      method: 'POST', headers: authHeaders,
      body: JSON.stringify({ tableId }),
    });
    const data = await res.json();
    if (!res.ok) { setCloseMsg({ ok: false, msg: data.error }); return; }
    const refundLines = data.refunds.map(r => `${r.username}: +${r.refunded.toLocaleString()} G`).join(', ');
    setCloseMsg({ ok: true, msg: `Table closed.${refundLines ? ' Refunds — ' + refundLines : ' No active bets.'}` });
    await loadLiveTables();
    await loadUsers();
  }

  async function loadPlayerHistory(username) {
    setHistLoading(true);
    const res = await fetch(`/api/admin/transactions/${username}`, {
      headers: { Authorization: `Bearer ${token}` },
    });
    setHistory(await res.json());
    setHistLoading(false);
  }

  function selectPlayer(username) {
    setSelected(username);
    setAmount('');
    setFeedback(null);
    setHistory(null);
    setTimeout(() => amountRef.current?.focus(), 50);
    loadPlayerHistory(username);
  }

  function closeDetail() {
    setSelected(null);
    setAmount('');
    setFeedback(null);
    setHistory(null);
  }

  async function applyBalance() {
    const parsed = parseInt(amount);
    if (!parsed || parsed === 0) return;
    const res = await fetch('/api/admin/add-balance', {
      method: 'POST', headers: authHeaders,
      body: JSON.stringify({ username: selected, amount: parsed }),
    });
    const data = await res.json();
    if (!res.ok) { setFeedback({ msg: data.error, ok: false }); return; }
    setFeedback({ msg: `Balance updated to ${data.balance.toLocaleString()} G`, ok: true });
    setAmount('');
    await loadUsers();
  }

  async function toggleAdmin(username, current) {
    const res = await fetch('/api/admin/set-admin', {
      method: 'POST', headers: authHeaders,
      body: JSON.stringify({ username, is_admin: !current }),
    });
    if (res.ok) await loadUsers();
  }

  function computeStats(txs) {
    const game = txs.filter(tx => tx.bet > 0);
    if (game.length === 0) return null;
    const totalWagered = game.reduce((s, tx) => s + tx.bet, 0);
    const totalNet     = game.reduce((s, tx) => s + tx.result, 0);
    const wins         = game.filter(tx => tx.result > 0).length;
    const winRate      = Math.round((wins / game.length) * 100);
    const biggestWin   = Math.max(0, ...game.map(tx => tx.result));
    const biggestLoss  = Math.min(0, ...game.map(tx => tx.result));

    const byGame = {};
    for (const tx of game) {
      if (!byGame[tx.game]) byGame[tx.game] = { played: 0, wagered: 0, net: 0, wins: 0 };
      byGame[tx.game].played++;
      byGame[tx.game].wagered += tx.bet;
      byGame[tx.game].net     += tx.result;
      if (tx.result > 0) byGame[tx.game].wins++;
    }
    return { totalWagered, totalNet, winRate, biggestWin, biggestLoss, byGame, totalGames: game.length };
  }

  function fmtDate(iso) {
    const d = new Date(iso);
    return d.toLocaleDateString('en-US', { month: 'short', day: 'numeric' }) +
      ' ' + d.toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit' });
  }

  const filtered   = users.filter(u => u.username.toLowerCase().includes(search.toLowerCase()));
  const detailUser = selected ? users.find(u => u.username === selected) : null;

  // ── Player detail ───────────────────────────────────────────────────────────
  if (selected && detailUser) {
    const stats = history ? computeStats(history) : null;

    const statCards = [
      { label: 'Balance',       value: `${detailUser.balance.toLocaleString()} G`, color: 'var(--gold)' },
      stats && { label: 'Net P&L',      value: `${stats.totalNet >= 0 ? '+' : ''}${stats.totalNet.toLocaleString()} G`, color: stats.totalNet >= 0 ? 'var(--emerald)' : 'var(--garnet)' },
      stats && { label: 'Win Rate',     value: `${stats.winRate}%`, color: stats.winRate >= 50 ? 'var(--emerald)' : 'var(--parch-3)' },
      stats && { label: 'Biggest Win',  value: `+${stats.biggestWin.toLocaleString()} G`, color: 'var(--sapphire)' },
      stats && { label: 'Biggest Loss', value: `${stats.biggestLoss.toLocaleString()} G`, color: 'var(--garnet)' },
      stats && { label: 'Wagered',      value: `${stats.totalWagered.toLocaleString()} G`, color: 'var(--parch-3)' },
    ].filter(Boolean);

    return (
      <div className="main-content">
        <div className="admin-panel">
          <div className="game-panel-header">
            <button className="btn-back" onClick={closeDetail}>← Players</button>
            <div>
              <h1 className="game-panel-title">
                {detailUser.username}
                {detailUser.is_admin && (
                  <span style={{ fontSize: 10, letterSpacing: '0.18em', color: 'var(--gold)', marginLeft: 10, textTransform: 'uppercase', fontFamily: 'Inter, sans-serif', fontWeight: 500 }}>Admin</span>
                )}
              </h1>
              <div className="game-panel-subtitle" style={{ fontStyle: 'normal', fontSize: 11, color: 'var(--muted)', letterSpacing: '0.04em' }}>
                Member since {new Date(detailUser.created_at).toLocaleDateString()}
                {stats ? ` · ${stats.totalGames} rounds played` : ''}
              </div>
            </div>
            <button className="btn" onClick={loadUsers}>Refresh</button>
          </div>

          {/* Stat cards */}
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(140px, 1fr))', gap: 10, marginBottom: 24 }}>
            {statCards.map((card, i) => (
              <div key={i} style={{ background: 'var(--bg-card)', border: '1px solid var(--line)', borderRadius: 6, padding: '14px 18px' }}>
                <div style={{ fontSize: 9, letterSpacing: '0.22em', textTransform: 'uppercase', color: 'var(--muted)', marginBottom: 6 }}>{card.label}</div>
                <div style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 17, color: card.color, fontWeight: 500, lineHeight: 1.2 }}>{card.value}</div>
              </div>
            ))}
          </div>

          {/* Adjust balance */}
          <div className="section-header" style={{ marginBottom: 12 }}>
            <span className="section-title">Adjust Balance</span>
            <div className="section-line" />
          </div>
          <div style={{ display: 'flex', gap: 8, alignItems: 'center', marginBottom: 8, flexWrap: 'wrap' }}>
            <input ref={amountRef} className="form-input" type="number"
              placeholder="Amount (negative to deduct)"
              value={amount} onChange={e => setAmount(e.target.value)}
              onKeyDown={e => e.key === 'Enter' && applyBalance()}
              style={{ maxWidth: 260 }} />
            <button className="btn btn-primary" onClick={applyBalance}>Apply</button>
          </div>
          <div style={{ display: 'flex', gap: 6, marginBottom: 20, flexWrap: 'wrap' }}>
            {[500, 1000, 5000, 10000, -500, -1000].map(n => (
              <button key={n} className="btn" onClick={() => setAmount(String(n))}
                style={{ fontSize: 10, padding: '6px 12px', color: n < 0 ? 'var(--garnet)' : 'var(--emerald)' }}>
                {n > 0 ? '+' : ''}{n.toLocaleString()}
              </button>
            ))}
          </div>
          {feedback && (
            <p style={{ fontSize: 12, color: feedback.ok ? 'var(--emerald)' : 'var(--garnet)', marginBottom: 16 }}>
              {feedback.msg}
            </p>
          )}

          {/* Per-game breakdown */}
          {stats && Object.keys(stats.byGame).length > 0 && (
            <>
              <div className="section-header" style={{ marginBottom: 12 }}>
                <span className="section-title">Game Breakdown</span>
                <div className="section-line" />
              </div>
              <div style={{ overflowX: 'auto', marginBottom: 24 }}>
                <table style={{ width: '100%', borderCollapse: 'collapse', fontSize: 12 }}>
                  <thead>
                    <tr>
                      {['Game', 'Rounds', 'Wagered', 'Net', 'Win%'].map(h => (
                        <th key={h} style={{
                          padding: '6px 10px',
                          textAlign: h === 'Game' ? 'left' : 'right',
                          fontWeight: 400,
                          fontSize: 9,
                          letterSpacing: '0.18em',
                          textTransform: 'uppercase',
                          color: 'var(--muted)',
                          borderBottom: '1px solid var(--line)',
                        }}>{h}</th>
                      ))}
                    </tr>
                  </thead>
                  <tbody>
                    {Object.entries(stats.byGame)
                      .sort((a, b) => b[1].played - a[1].played)
                      .map(([game, g]) => (
                        <tr key={game} style={{ borderBottom: '1px solid rgba(255,255,255,0.04)' }}>
                          <td style={{ padding: '8px 10px', color: 'var(--parch-3)', fontFamily: 'Cormorant Garamond, serif', fontSize: 13, textTransform: 'capitalize' }}>{game}</td>
                          <td style={{ padding: '8px 10px', textAlign: 'right', color: 'var(--parch-mute)', fontFamily: 'JetBrains Mono, monospace' }}>{g.played}</td>
                          <td style={{ padding: '8px 10px', textAlign: 'right', color: 'var(--parch-mute)', fontFamily: 'JetBrains Mono, monospace' }}>{g.wagered.toLocaleString()} G</td>
                          <td style={{ padding: '8px 10px', textAlign: 'right', fontFamily: 'JetBrains Mono, monospace', color: g.net >= 0 ? 'var(--emerald)' : 'var(--garnet)' }}>
                            {g.net >= 0 ? '+' : ''}{g.net.toLocaleString()} G
                          </td>
                          <td style={{ padding: '8px 10px', textAlign: 'right', fontFamily: 'JetBrains Mono, monospace', color: 'var(--parch-mute)' }}>
                            {Math.round((g.wins / g.played) * 100)}%
                          </td>
                        </tr>
                      ))}
                  </tbody>
                </table>
              </div>
            </>
          )}

          {/* Transaction history */}
          <div className="section-header" style={{ marginBottom: 12 }}>
            <span className="section-title">Transaction History</span>
            <div className="section-line" />
            <span style={{ fontSize: 10, color: 'var(--muted)', letterSpacing: '0.12em', whiteSpace: 'nowrap' }}>
              {history ? `${history.length} entries` : ''}
            </span>
            {selected && (
              <button className="btn" onClick={() => loadPlayerHistory(selected)}
                style={{ fontSize: 10, padding: '4px 10px', marginLeft: 4 }}>↺</button>
            )}
          </div>
          {histLoading && <p style={{ color: 'var(--muted)', fontSize: 13 }}>Loading…</p>}
          {history && (
            history.length === 0
              ? <p style={{ color: 'var(--muted)', fontSize: 13 }}>No transactions yet.</p>
              : <div style={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
                  {history.map((tx, i) => (
                    <div key={i} style={{
                      display: 'grid',
                      gridTemplateColumns: '108px 100px 1fr auto auto',
                      gap: 8,
                      padding: '7px 10px',
                      background: i % 2 === 0 ? 'transparent' : 'rgba(255,255,255,0.018)',
                      borderRadius: 4,
                      alignItems: 'center',
                      fontSize: 12,
                    }}>
                      <span style={{ color: 'var(--muted)', fontSize: 10, fontFamily: 'JetBrains Mono, monospace' }}>{fmtDate(tx.created_at)}</span>
                      <span style={{ fontFamily: 'Cormorant Garamond, serif', fontSize: 13, color: 'var(--parch-3)', textTransform: 'capitalize' }}>{tx.game}</span>
                      <span style={{ color: 'var(--parch-mute)', fontFamily: 'JetBrains Mono, monospace', fontSize: 11 }}>
                        {tx.bet > 0 ? `bet ${tx.bet.toLocaleString()} G` : 'admin adj.'}
                      </span>
                      <span style={{ fontFamily: 'JetBrains Mono, monospace', textAlign: 'right', color: tx.result > 0 ? 'var(--emerald)' : tx.result < 0 ? 'var(--garnet)' : 'var(--muted)' }}>
                        {tx.result > 0 ? '+' : ''}{tx.result.toLocaleString()} G
                      </span>
                      <span style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 10, color: 'var(--muted)', textAlign: 'right', minWidth: 96 }}>
                        → {tx.balance_after.toLocaleString()} G
                      </span>
                    </div>
                  ))}
                </div>
          )}

          {/* Role */}
          <div className="section-header" style={{ marginBottom: 12, marginTop: 28 }}>
            <span className="section-title">Role</span>
            <div className="section-line" />
          </div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
            <span style={{ fontSize: 12, color: 'var(--muted)' }}>
              {detailUser.is_admin ? 'This account has admin access.' : 'Standard player account.'}
            </span>
            <button className="btn" onClick={() => toggleAdmin(detailUser.username, detailUser.is_admin)}
              style={{ color: detailUser.is_admin ? 'var(--garnet)' : 'var(--emerald)', whiteSpace: 'nowrap' }}>
              {detailUser.is_admin ? 'Revoke Admin' : 'Grant Admin'}
            </button>
          </div>
        </div>
      </div>
    );
  }

  // ── Player list ─────────────────────────────────────────────────────────────
  return (
    <div className="main-content">
      <div className="admin-panel">
        <div className="game-panel-header">
          <button className="btn-back" onClick={onBack}>← Back</button>
          <h1 className="game-panel-title">Admin Panel</h1>
          <button className="btn" onClick={() => { loadUsers(); loadLiveTables(); }}>Refresh</button>
        </div>

        <div style={{ marginBottom: 18 }}>
          <input className="form-input" type="text" placeholder="Search players…"
            value={search} onChange={e => setSearch(e.target.value)} autoFocus />
        </div>

        {/* Live Tables */}
        <div className="section-header" style={{ marginBottom: 12 }}>
          <span className="section-title">Live Tables</span>
          <div className="section-line" />
          <span style={{ fontSize: 10, color: 'var(--muted)', letterSpacing: '0.15em', whiteSpace: 'nowrap' }}>
            {liveTables.length} active
          </span>
          <button className="btn" onClick={loadLiveTables}
            style={{ fontSize: 10, padding: '4px 10px', marginLeft: 4 }}>↺</button>
        </div>
        {closeMsg && (
          <p style={{ fontSize: 12, color: closeMsg.ok ? 'var(--emerald)' : 'var(--garnet)', marginBottom: 12 }}>
            {closeMsg.msg}
          </p>
        )}
        {liveLoading && <p style={{ color: 'var(--muted)', fontSize: 13, marginBottom: 16 }}>Loading…</p>}
        {!liveLoading && liveTables.length === 0 && (
          <p style={{ color: 'var(--muted)', fontSize: 13, marginBottom: 20 }}>No active tables.</p>
        )}
        {liveTables.length > 0 && (
          <div style={{ display: 'flex', flexDirection: 'column', gap: 6, marginBottom: 28 }}>
            {liveTables.map(t => (
              <div key={`${t.game}-${t.id}`} style={{
                display: 'flex', alignItems: 'center', gap: 12,
                background: 'var(--bg-card)', border: '1px solid var(--line)',
                borderRadius: 6, padding: '10px 14px',
              }}>
                <span style={{ fontSize: 9, letterSpacing: '0.18em', textTransform: 'uppercase', color: 'var(--gold)', background: 'rgba(212,169,96,0.1)', padding: '2px 6px', borderRadius: 2, border: '1px solid rgba(212,169,96,0.25)', whiteSpace: 'nowrap' }}>
                  {t.game === 'poker' ? 'Poker' : 'Blackjack'}
                </span>
                <span style={{ fontFamily: 'Cormorant Garamond, serif', fontSize: 14, color: 'var(--parch-3)', flex: 1 }}>{t.name}</span>
                <span style={{ fontSize: 10, color: 'var(--muted)', letterSpacing: '0.1em', whiteSpace: 'nowrap' }}>
                  {t.phase} · {t.seats.length} seat{t.seats.length !== 1 ? 's' : ''}
                  {t.seats.length > 0 ? ` (${t.seats.map(s => s.username).join(', ')})` : ''}
                </span>
                <button className="btn"
                  onClick={() => closeTable(t.game, t.id)}
                  style={{ fontSize: 10, padding: '5px 12px', color: 'var(--garnet)', borderColor: 'rgba(180,50,50,0.35)', whiteSpace: 'nowrap' }}>
                  Close Room
                </button>
              </div>
            ))}
          </div>
        )}

        <div className="section-header" style={{ marginBottom: 12 }}>
          <span className="section-title">Players</span>
          <div className="section-line" />
          <span style={{ fontSize: 10, color: 'var(--muted)', letterSpacing: '0.15em', whiteSpace: 'nowrap' }}>
            {filtered.length} / {users.length}
          </span>
        </div>

        {loading && <p style={{ color: 'var(--muted)', textAlign: 'center', fontSize: 13, padding: 24 }}>Loading…</p>}

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(180px, 1fr))', gap: 10 }}>
          {filtered.map(user => (
            <button key={user.username} onClick={() => selectPlayer(user.username)}
              style={{ background: 'var(--bg-card)', border: '1px solid var(--line)', borderRadius: 6, padding: '14px 16px', textAlign: 'left', cursor: 'pointer', transition: 'border-color 0.15s, box-shadow 0.15s', color: 'var(--parch)' }}
              onMouseEnter={e => { e.currentTarget.style.borderColor = 'var(--gold-soft)'; e.currentTarget.style.boxShadow = '0 0 10px rgba(212,169,96,0.12)'; }}
              onMouseLeave={e => { e.currentTarget.style.borderColor = 'var(--line)'; e.currentTarget.style.boxShadow = 'none'; }}
            >
              <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 6 }}>
                <span style={{ fontFamily: 'Cormorant Garamond, serif', fontSize: 15, fontWeight: 500 }}>{user.username}</span>
                {user.is_admin && (
                  <span style={{ fontSize: 8, letterSpacing: '0.18em', color: 'var(--gold)', textTransform: 'uppercase', background: 'rgba(212,169,96,0.1)', padding: '1px 5px', borderRadius: 2, border: '1px solid rgba(212,169,96,0.25)' }}>Admin</span>
                )}
              </div>
              <div style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 13, color: 'var(--gold)' }}>
                {user.balance.toLocaleString()} G
              </div>
            </button>
          ))}
        </div>

        {!loading && filtered.length === 0 && (
          <p style={{ color: 'var(--muted)', textAlign: 'center', fontSize: 13, padding: 24 }}>
            {search ? `No players matching "${search}"` : 'No players registered yet.'}
          </p>
        )}
      </div>
    </div>
  );
}