/* global React, GAMES, COLLECTIONS, Icon, CoinIcon, Countup, t, useAchievements, useCoins */

function RewardsPage({ auth, setPage }) {
  const isGuest = auth.name === '';
  if (isGuest) {
    return (
      <div className="container fade-in" style={{ maxWidth: 560 }}>
        <div className="card" style={{ textAlign: 'center', padding: 40, marginTop: 32 }}>
          <div className="eyebrow" style={{ color: 'var(--pink)' }}>{t('rewards.locked_eyebrow')}</div>
          <h2 className="h-display" style={{ fontSize: 32, marginTop: 10 }}>{t('rewards.locked_title')}</h2>
          <p style={{ color: 'var(--muted)', margin: '10px 0 22px' }}>{t('rewards.locked_sub')}</p>
          <button className="btn btn--primary btn--lg" onClick={()=>setPage('login')}>{t('action.login_free')}<Icon name="arrow" size={14}/></button>
        </div>
      </div>
    );
  }

  const { data: achievementsData } = useAchievements();
  const { data: coinsData } = useCoins();

  const gamesFromApi = achievementsData && achievementsData.games && typeof achievementsData.games === 'object'
    ? achievementsData.games
    : null;

  const orderedSlugs = gamesFromApi
    ? Object.keys(gamesFromApi).sort((a, b) => {
        const ai = GAMES.findIndex((game) => game.slug === a);
        const bi = GAMES.findIndex((game) => game.slug === b);
        const aSort = ai === -1 ? Number.MAX_SAFE_INTEGER : ai;
        const bSort = bi === -1 ? Number.MAX_SAFE_INTEGER : bi;
        return aSort - bSort;
      })
    : [];

  const perGame = orderedSlugs.map((slug) => {
    const gameData = gamesFromApi[slug] || {};
    const summary = gameData.summary || {};
    const unlocked = Number.isFinite(summary.unlocked) ? summary.unlocked : 0;
    const total = Number.isFinite(summary.total) ? summary.total : 0;
    const coinsEarned = Number.isFinite(summary.coins_earned) ? summary.coins_earned : 0;
    const g = GAMES.find((game) => game.slug === slug);
    return {
      slug,
      title: g ? g.title : slug,
      unlocked,
      total,
      coinsEarned,
    };
  });

  const totalUnlocked = perGame.reduce((s, p) => s + p.unlocked, 0);
  const totalAch = perGame.reduce((s, p) => s + p.total, 0);

  const coinTotal = Number.isFinite(coinsData && coinsData.balance)
    ? coinsData.balance
    : (Number.isFinite(auth.coins) ? auth.coins : 0);

  return (
    <div className="container fade-in">
      <div style={{ marginTop: 12, display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', flexWrap: 'wrap', gap: 16 }}>
        <div>
          <div className="eyebrow">{t('rewards.eyebrow')}</div>
          <h1 className="h-display" style={{ fontSize: 'clamp(34px, 4vw, 46px)', marginTop: 6 }}>{t('rewards.title')}</h1>
        </div>
        <button className="btn btn--ghost" onClick={() => setPage('shop')}><CoinIcon size={14}/> {t('action.open_shop')}<Icon name="arrow" size={13}/></button>
      </div>

      <div className="ach-head" style={{ marginTop: 24 }}>
        <div className="ach-stat">
          <div className="ach-stat__num ach-stat__num--coin"><Countup to={coinTotal} /></div>
          <div className="ach-stat__lbl">{t('rewards.coins_earned')}</div>
        </div>
        <div className="ach-stat">
          <div className="ach-stat__num ach-stat__num--unlock"><Countup to={totalUnlocked} /></div>
          <div className="ach-stat__lbl">{t('rewards.unlocked')}</div>
        </div>
        <div className="ach-stat">
          <div className="ach-stat__num ach-stat__num--rare">{totalAch}</div>
          <div className="ach-stat__lbl">{t('rewards.total')}</div>
        </div>
      </div>

      <div style={{ marginTop: 18 }}>
        {perGame.map(({ slug, title, unlocked, total, coinsEarned }) => {
          const pct = total > 0 ? (unlocked / total) * 100 : 0;
          return (
            <div key={slug} className="ach-row">
              <div>
                <h4 className="ach-row__name">{title}</h4>
                <div className="ach-row__bar"><div className="ach-row__fill" style={{ width: `${pct}%` }}/></div>
              </div>
              <div className="ach-row__meta">
                <div className="ach-row__count">{unlocked}/{total}</div>
                <div className="ach-row__coin"><CoinIcon size={12}/> {coinsEarned}</div>
              </div>
            </div>
          );
        })}
      </div>

      {auth.supporter === 'none' && (
        <div className="upsell upsell--patreon" style={{ marginTop: 28 }}>
          <div className="upsell__ic"><Icon name="support" size={20}/></div>
          <div>
            <p className="upsell__ttl">{t('rewards.2x_title')}</p>
            <p className="upsell__sub">{t('rewards.2x_sub')}</p>
          </div>
          <button className="btn btn--primary btn--sm" onClick={()=>setPage('support')}>{t('action.support')}<Icon name="arrow" size={13}/></button>
        </div>
      )}
    </div>
  );
}

Object.assign(window, { RewardsPage });