// lobby.jsx — game list + daily bonus + ad

const GAMES = [
  { id: 'coin',        name: 'Coin Flip',    pay: '1 : 1',          num: 'I' },
  { id: 'roulette',    name: 'Roulette',     pay: '1× — 36×',       num: 'II' },
  { id: 'blackjack',   name: 'Blackjack',    pay: '3 : 2',          num: 'III' },
  { id: 'slots',       name: 'Slot Machine', pay: 'jackpot 5 000×', num: 'IV' },
  { id: 'craps',       name: 'Dice',         pay: '2 : 1',          num: 'V' },
  { id: 'poker',       name: 'Video Poker',  pay: '250×',           num: 'VI' },
  { id: 'baccarat',    name: 'Baccarat',     pay: '8 : 1',          num: 'VII' },
  { id: 'hilo',        name: 'Hi-Lo',        pay: 'streak',         num: 'VIII' },
  { id: 'crash',       name: 'Crash',        pay: '∞',              num: 'IX' },
  { id: 'mines',       name: 'Mines',        pay: 'streak',         num: 'X' },
  { id: 'dragontiger', name: 'Dragon · Tiger', pay: '8 : 1',        num: 'XI' },
  { id: 'limbo',       name: 'Limbo',        pay: '∞',              num: 'XII' },
  { id: 'war',         name: 'War',          pay: '1 : 1',          num: 'XIII' },
  { id: 'towers',      name: 'Towers',       pay: 'climb',          num: 'XIV' },
  { id: 'plinko',      name: 'Plinko',       pay: '5.6×',           num: 'XV' },
  { id: 'keno',        name: 'Keno',         pay: '400×',           num: 'XVI' },
];

const DAILY_KEY = 'mahamon.dailyClaim';
const AD_KEY = 'mahamon.adClaim';
const UNLOCKED_KEY = 'mahamon.unlocked';
const UNLOCK_PRICE = 2000;

function fmtCountdown(ms) {
  if (ms <= 0) return 'ready';
  const s = Math.floor(ms / 1000);
  const h = Math.floor(s / 3600);
  const m = Math.floor((s % 3600) / 60);
  const sec = s % 60;
  return `${String(h).padStart(2,'0')}:${String(m).padStart(2,'0')}:${String(sec).padStart(2,'0')}`;
}

function Lobby({ onPick, onHistory, onSettings, onRanking, onTip }) {
  const t = useT();
  const { balance, history, adjust, tipped, tipCredits, spendCredits } = useStore();
  const [now, setNow] = React.useState(Date.now());
  const [adWatching, setAdWatching] = React.useState(false);
  const [adProgress, setAdProgress] = React.useState(0);
  const [unlocked, setUnlocked] = React.useState(() => {
    try {
      const v = JSON.parse(localStorage.getItem(UNLOCKED_KEY) || 'null');
      return Array.isArray(v) && v.length > 0 ? v : ['coin'];
    } catch (e) { return ['coin']; }
  });
  const [unlockTarget, setUnlockTarget] = React.useState(null);
  const isUnlocked = (id) => unlocked.includes(id);
  const openCount = unlocked.length;

  const handlePick = (g) => {
    if (isUnlocked(g.id)) onPick(g.id);
    else setUnlockTarget(g);
  };

  const confirmUnlock = () => {
    if (!unlockTarget) return;
    if (tipCredits < UNLOCK_PRICE) return;
    spendCredits(UNLOCK_PRICE);
    const next = [...unlocked, unlockTarget.id];
    setUnlocked(next);
    localStorage.setItem(UNLOCKED_KEY, JSON.stringify(next));
    const target = unlockTarget;
    setUnlockTarget(null);
    // open the freshly-unlocked table
    setTimeout(() => onPick(target.id), 200);
  };

  React.useEffect(() => {
    const id = setInterval(() => setNow(Date.now()), 1000);
    return () => clearInterval(id);
  }, []);

  const lastDaily = parseInt(localStorage.getItem(DAILY_KEY) || '0');
  const dailyCooldown = 24 * 3600 * 1000;
  const dailyRemaining = Math.max(0, lastDaily + dailyCooldown - now);
  const dailyReady = dailyRemaining === 0;

  const lastAd = parseInt(localStorage.getItem(AD_KEY) || '0');
  const adCooldown = 30 * 60 * 1000; // 30 minutes between ads
  const adRemaining = Math.max(0, lastAd + adCooldown - now);
  const adReady = adRemaining === 0 && !adWatching;

  const claimDaily = () => {
    if (!dailyReady) return;
    localStorage.setItem(DAILY_KEY, String(Date.now()));
    setNow(Date.now());
    adjust(500);
  };

  const watchAd = () => {
    if (!adReady) return;
    setAdWatching(true); setAdProgress(0);
    const start = Date.now();
    const tick = setInterval(() => {
      const k = Math.min(1, (Date.now() - start) / 4000);
      setAdProgress(k);
      if (k >= 1) {
        clearInterval(tick);
        localStorage.setItem(AD_KEY, String(Date.now()));
        adjust(100);
        setAdWatching(false);
        setNow(Date.now());
      }
    }, 60);
  };

  return (
    <>
      <TopBar onRanking={onRanking} onHistory={onHistory} onSettings={onSettings} onTip={onTip} />
      <div style={{ flex: 1, overflowY: 'auto', display: 'flex', flexDirection: 'column' }}>
        <div style={{
          padding: '48px 24px 36px',
          display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 14,
        }}>
          <div className="eyebrow">{t('lobby.balance')}</div>
          <div className="mono" style={{
            fontSize: 56, fontWeight: 300, letterSpacing: '-0.02em',
            fontVariantNumeric: 'tabular-nums', lineHeight: 1,
          }}>
            <Ticker value={balance} />
          </div>
          <div className="eyebrow" style={{ marginTop: 8 }}>
            {history.length === 0
              ? t('lobby.lounge_open')
              : `${history.length} ${history.length === 1 ? t('lobby.round') : t('lobby.rounds')} · ${(() => {
                  const sum = history.reduce((a, h) => a + h.delta, 0);
                  return (sum >= 0 ? '+' : '') + sum.toLocaleString('en-US');
                })()}`}
          </div>
          {(tipped > 0 || tipCredits > 0) && (
            <div className="tipped-row" onClick={onTip}>
              <span className="tipped-cell"><span className="tc-eye">{t('lobby.tipped')}</span><span className="mono tc-num">{tipped.toLocaleString('en-US')}</span></span>
              <span className="tipped-sep" />
              <span className="tipped-cell"><span className="tc-eye">{t('lobby.credits')}</span><span className="mono tc-num">{tipCredits.toLocaleString('en-US')}</span></span>
            </div>
          )}
        </div>

        {/* Daily bonus + ad reward */}
        <div className="bonus-row">
          <button className="bonus-cell press" onClick={claimDaily} disabled={!dailyReady}>
            <div>
              <div className="bc-eye">{t('lobby.daily')}</div>
              <div className="bc-amt">+ 500</div>
              <div className="bc-meta">{dailyReady ? t('lobby.daily_claim') : fmtCountdown(dailyRemaining)}</div>
            </div>
            <div className="bc-icon"><IconGift size={16}/></div>
          </button>
          <button className="bonus-cell press" onClick={watchAd} disabled={!adReady}>
            <div>
              <div className="bc-eye">{adWatching ? t('lobby.opening') : t('lobby.gift')}</div>
              <div className="bc-amt">+ 100</div>
              <div className="bc-meta">
                {adWatching
                  ? `${Math.round(adProgress * 100)}%`
                  : adReady ? t('lobby.gift_tap') : fmtCountdown(adRemaining)}
              </div>
            </div>
            <div className="bc-icon"><IconGift size={14}/></div>
          </button>
        </div>

        <div style={{
          padding: '24px 24px 12px', display: 'flex', justifyContent: 'space-between',
          alignItems: 'baseline',
        }}>
          <div className="eyebrow">{t('lobby.tables')}</div>
          <div className="eyebrow" style={{ color: 'var(--text-4)' }}>
            {openCount} · {t('lobby.open')}
          </div>
        </div>

        <div>
          {GAMES.map((g) => {
            const locked = !isUnlocked(g.id);
            return (
              <div
                key={g.id}
                className={'lobby-row press' + (locked ? ' locked' : '')}
                onClick={() => handlePick(g)}
              >
                <div className="num">{g.num}</div>
                <div className="name">{t('game.' + g.id)}</div>
                {locked ? (
                  <div className="lock-pay">
                    <IconLock size={11} />
                    <span className="mono">{UNLOCK_PRICE.toLocaleString('en-US')}</span>
                  </div>
                ) : (
                  <div className="pay">{g.pay}</div>
                )}
                <div className="arrow"><ChevRight size={14}/></div>
              </div>
            );
          })}
        </div>

        <div style={{ flex: 1, minHeight: 24 }} />
      </div>

      {/* Unlock confirmation overlay */}
      {unlockTarget && (
        <div className="unlock-sheet fade-in">
          <div className="unlock-card">
            <div className="eyebrow" style={{ marginBottom: 14 }}>{t('lobby.locked_table')}</div>
            <div className="serif" style={{
              fontSize: 36, fontStyle: 'italic', letterSpacing: '-0.01em',
              lineHeight: 1.05, marginBottom: 18, color: 'var(--text)',
            }}>
              {t('lobby.unlock_q', { game: t('game.' + unlockTarget.id) })}
            </div>
            <div style={{
              display: 'flex', alignItems: 'baseline', gap: 12,
              padding: '18px 0', borderTop: '1px solid var(--line)',
              borderBottom: '1px solid var(--line)', marginBottom: 22,
            }}>
              <div style={{ color: 'var(--text-3)', fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase' }}>
                {t('lobby.cost')}
              </div>
              <div className="mono" style={{
                marginLeft: 'auto', fontSize: 22, color: 'var(--text)',
                fontVariantNumeric: 'tabular-nums', letterSpacing: '0.02em',
              }}>
                {UNLOCK_PRICE.toLocaleString('en-US')}
              </div>
              <div style={{ fontSize: 11, color: 'var(--text-3)' }}>{t('lobby.tip_credits_label')}</div>
            </div>
            <div style={{ fontSize: 12, color: tipCredits < UNLOCK_PRICE ? '#d1786e' : 'var(--text-3)', lineHeight: 1.55, marginBottom: 26 }}>
              {tipCredits < UNLOCK_PRICE
                ? t('lobby.short_msg', { have: tipCredits.toLocaleString('en-US'), short: (UNLOCK_PRICE - tipCredits).toLocaleString('en-US') })
                : t('lobby.remaining_msg', { remaining: (tipCredits - UNLOCK_PRICE).toLocaleString('en-US') })}
            </div>
            <div style={{ display: 'flex', gap: 10 }}>
              <button className="btn" onClick={() => setUnlockTarget(null)}>{t('lobby.cancel')}</button>
              <button
                className="btn primary"
                onClick={confirmUnlock}
                disabled={tipCredits < UNLOCK_PRICE}
              >{t('lobby.unlock')}</button>
            </div>
          </div>
          <div className="unlock-scrim" onClick={() => setUnlockTarget(null)} />
        </div>
      )}
    </>
  );
}

Object.assign(window, { Lobby, GAMES });