(function() {
  var useState = React.useState;
  var useEffect = React.useEffect;

  var A = window.CBAssets;

  function WalletPage() {
    var useRef = React.useRef;
    var _data = useState(null); var data = _data[0], setData = _data[1];
    var balRef = useRef(null);
    var prevBalRef = useRef(0);
    var _pkgs = useState([]); var pkgs = _pkgs[0], setPkgs = _pkgs[1];
    var _tab = useState('overview'); var tab = _tab[0], setTab = _tab[1];
    var _loading = useState(true); var loading = _loading[0], setLoading = _loading[1];
    var _busy = useState(false); var busy = _busy[0], setBusy = _busy[1];

    function requireAuth() {
      if (!window.AuthState || !window.AuthState.isLoggedIn()) {
        window.showUserToast('Sign in to open your BuildCoins wallet', 'rose');
        return false;
      }
      return true;
    }

    function load() {
      if (!requireAuth()) { setLoading(false); return; }
      setLoading(true);
      Promise.all([
        window.CBBuildCoins.getWallet(),
        window.CBBuildCoins.listPackages(),
      ]).then(function(res) {
        setData(res[0]);
        setPkgs((res[1] && res[1].packages) || []);
        setLoading(false);
      }).catch(function(e) {
        window.showUserToast(e.message || 'Could not load wallet', 'rose');
        setLoading(false);
      });
    }

    useEffect(function() {
      load();
      if (window.AuthState && window.AuthState.isLoggedIn()) {
        window.CBBuildCoins.dailyLogin().then(function(r) {
          var coins = r && r.rule && r.rule.coins;
          if (r && !r.skipped && coins) {
            if (window.CBGameFX && window.CBAssets) {
              window.CBGameFX.celebrate({
                art: window.CBAssets.rewardIcon('daily_login'),
                title: 'Daily Streak!',
                sub: 'You showed up — the city noticed',
                coins: coins,
              }).then(load);
            } else {
              window.showUserToast('Daily login +' + coins + ' BuildCoins', 'lime');
              load();
            }
          }
        }).catch(function() {});
      }
    }, []);

    // Roll the balance number whenever it changes (Duolingo-style count-up)
    var balance = (data && data.wallet && data.wallet.balance) || 0;
    useEffect(function() {
      if (balRef.current && window.CBGameFX) {
        window.CBGameFX.countUp(balRef.current, balance, { from: prevBalRef.current });
      }
      prevBalRef.current = balance;
    }, [balance]);

    async function buyPkg(pkg, srcEl) {
      if (!requireAuth() || busy) return;
      setBusy(true);
      try {
        await window.CBBuildCoins.purchasePackage(pkg._id, 'web', 'web-' + Date.now(), pkg.appleProductId);
        var total = pkg.coins + (pkg.bonusCoins || 0);
        window.showUserToast('+' + total + ' BuildCoins added', 'lime');
        if (window.CBHaptics) window.CBHaptics.play('xp');
        if (window.CBGameFX && srcEl) {
          // fire-and-forget: balance refresh must not wait on the animation
          window.CBGameFX.coinFly({
            from: srcEl,
            count: Math.min(14, 5 + Math.round(total / 400)),
          });
        }
        load();
      } catch (e) {
        window.showUserToast(e.message || 'Purchase failed', 'rose');
      } finally {
        setBusy(false);
      }
    }

    var w = data && data.wallet;
    var txs = (data && data.transactions) || [];

    return (
      <div className="bc-screen">
        <div className="bc-hero">
          <button className="back-btn"
            onMouseEnter={function(){ document.body.classList.add('hov'); }}
            onMouseLeave={function(){ document.body.classList.remove('hov'); }}
            onClick={function(){ window.navBack(); }}>← Back</button>
          <h1>BuildCoins Wallet</h1>
          <p>Virtual in-app credits for marketplace assets, premium AI tools, gifts, and visibility spotlights — never votes or rankings.</p>
        </div>

        {loading ? (
          <div className="pg-loading">LOADING WALLET…</div>
        ) : !w ? (
          <div className="bc-hero"><p>Sign in to view your wallet.</p></div>
        ) : (
          <>
            <div className="bc-wallet-card" data-tour="wallet-balance">
              <div>
                <div className="bc-balance" data-gfx-coin-target="true">
                  <span>CURRENT BALANCE</span>
                  {A && <img className="bc-coin-img" src={A.coin()} alt="BuildCoin" />}
                  <span className="gfx-count" ref={balRef}>{(w.balance || 0).toLocaleString()}</span>
                </div>
                <div className="bc-stat-row">
                  <div className="bc-stat"><div className="v">{(w.lifetimeEarned || 0).toLocaleString()}</div><div className="l">Lifetime Earned</div></div>
                  <div className="bc-stat"><div className="v">{(w.lifetimeSpent || 0).toLocaleString()}</div><div className="l">Lifetime Spent</div></div>
                  <div className="bc-stat"><div className="v">{(w.pendingRewards || 0).toLocaleString()}</div><div className="l">Pending</div></div>
                </div>
                <p className="bc-disclaimer">{(data && data.disclaimer) || window.CBBuildCoins.DISCLAIMER}</p>
                <p className="bc-disclaimer">Wallet ID · {w.walletId}</p>
              </div>
              <div style={{ display:'flex', flexDirection:'column', gap:10, justifyContent:'center' }}>
                <button className="btn btn-v" disabled={busy} onClick={function(){ setTab('buy'); }}>Buy BuildCoins</button>
                <button className="btn btn-o" onClick={function(){ window.navigate('marketplace'); }}>Open Marketplace</button>
                <button className="btn btn-o" onClick={function(){ window.navigate('inventory'); }}>My Inventory</button>
              </div>
            </div>

            <div className="bc-tabs bc-tabs--primary" data-tour="wallet-tabs" role="tablist" aria-label="Wallet sections">
              {['overview', 'buy', 'history', 'gifts'].map(function(t) {
                var marks = { overview: '◈', buy: '+', history: '⇄', gifts: '✦' };
                return (
                  <button
                    key={t}
                    type="button"
                    role="tab"
                    aria-selected={tab === t}
                    className={'bc-tab' + (tab === t ? ' on' : '')}
                    onClick={function(){ setTab(t); }}
                  >
                    <span className="play-tab-mark" aria-hidden="true">{marks[t]}</span>
                    {t}
                  </button>
                );
              })}
            </div>

            {tab === 'buy' && (
              <div className="bc-grid gfx-stagger">
                {pkgs.map(function(pkg, idx) {
                  return (
                    <div key={pkg._id} className="bc-card bc-pkg" style={{ '--gfx-i': idx }}>
                      {A && <img className="bc-pkg-img" src={A.pkgTile(pkg.coins)} alt="" />}
                      {pkg.badge && <div className="bc-card-meta">{pkg.badge}</div>}
                      <div className="coins">{pkg.coins.toLocaleString()}</div>
                      {pkg.bonusCoins > 0 && <div className="bc-card-meta">+{pkg.bonusCoins} bonus</div>}
                      <div className="bc-price">${Number(pkg.priceUsd).toFixed(2)}</div>
                      <button className="btn btn-v" style={{ marginTop:12, width:'100%' }} disabled={busy}
                        onClick={function(e){ buyPkg(pkg, e.currentTarget.closest('.bc-card')); }}>
                        Purchase
                      </button>
                    </div>
                  );
                })}
              </div>
            )}

            {tab === 'history' && (
              <div className="bc-tx">
                {txs.length === 0 && <p style={{ color:'var(--text-dim)' }}>No transactions yet.</p>}
                {txs.map(function(tx) {
                  return (
                    <div key={tx._id} className="bc-tx-row">
                      <div>
                        <div style={{ color:'var(--text)' }}>{tx.description || tx.type}</div>
                        <div className="bc-card-meta">{tx.type} · {new Date(tx.createdAt).toLocaleString()}</div>
                      </div>
                      <div className={'amt ' + (tx.direction === 'credit' ? 'credit' : 'debit')}>
                        {tx.direction === 'credit' ? '+' : '−'}{(tx.amount || 0).toLocaleString()}
                      </div>
                    </div>
                  );
                })}
              </div>
            )}

            {tab === 'gifts' && data && data.giftHistory && (
              <div className="bc-tx">
                <div className="bc-card-meta" style={{ marginBottom:12 }}>Sent</div>
                {(data.giftHistory.sent || []).map(function(tx) {
                  return (
                    <div key={tx._id} className="bc-tx-row">
                      <div>{tx.description}</div>
                      <div className="amt debit">−{(tx.amount || 0).toLocaleString()}</div>
                    </div>
                  );
                })}
                <div className="bc-card-meta" style={{ margin:'20px 0 12px' }}>Received</div>
                {(data.giftHistory.received || []).map(function(tx) {
                  return (
                    <div key={tx._id} className="bc-tx-row">
                      <div>{tx.description}</div>
                      <div className="amt credit">Gift</div>
                    </div>
                  );
                })}
              </div>
            )}

            {tab === 'overview' && (
              <div className="bc-tx">
                <p style={{ color:'var(--text-dim)', marginBottom:16 }}>
                  Earn coins via daily login, publishing designs, challenges, and verification.
                  Spend on assets, AI unlocks, gifts, and spotlights (visibility only — never rankings).
                </p>
                <div style={{ display:'flex', gap:10, flexWrap:'wrap' }}>
                  <button className="btn btn-o" onClick={function(){ window.navigate('marketplace'); }}>Browse Assets</button>
                  <button className="btn btn-o" onClick={function(){ window.navigate('inventory'); }}>Inventory</button>
                </div>
              </div>
            )}
          </>
        )}
      </div>
    );
  }

  window.UserWalletPage = WalletPage;
})();