/* global React, Icon, CoinIcon, Ring, t, useReferrals, SHASTE_API */

function ReferralPage({ auth, setPage }) {
  const isGuest = auth.name === '';
  const [copied, setCopied] = React.useState(false);
  const { data: referralsData } = useReferrals();

  const initialReferralCode = auth.referralCode || auth.referral_code || '';
  const [referralCode, setReferralCode] = React.useState(initialReferralCode);

  React.useEffect(() => {
    if (referralCode || isGuest) return undefined;

    let cancelled = false;
    let attempts = 0;
    let timeoutId = null;

    const pollProfile = async () => {
      attempts += 1;
      try {
        if (SHASTE_API && typeof SHASTE_API.getProfile === 'function') {
          const profile = await SHASTE_API.getProfile();
          const nextCode = (profile && (profile.referral_code || profile.referralCode)) || '';
          if (!cancelled && nextCode) {
            setReferralCode(nextCode);
            return;
          }
        }
      } catch (e) {}

      if (!cancelled && attempts < 5) {
        timeoutId = window.setTimeout(pollProfile, 2000);
      }
    };

    timeoutId = window.setTimeout(pollProfile, 2000);

    return () => {
      cancelled = true;
      if (timeoutId) window.clearTimeout(timeoutId);
    };
  }, [isGuest, referralCode]);

  const link = (referralsData && typeof referralsData.referral_url === 'string') ? referralsData.referral_url : '';
  const invited = Number.isFinite(referralsData && referralsData.invited_count) ? referralsData.invited_count : 0;
  const joined = Number.isFinite(referralsData && referralsData.joined_count) ? referralsData.joined_count : 0;
  const converted = Number.isFinite(referralsData && referralsData.converted_count) ? referralsData.converted_count : 0;

  const milestone3Done = joined >= 3 || auth.supporter !== 'none';
  const milestone5Done = joined >= 5;
  const milestone10Done = joined >= 10;

  const tiers = [
    { n: 1, label: t('ref.tier_1_label'), sub: t('ref.tier_1_sub'), ref: '+10 coins · +100 XP', inv: '+5 coins · +50 XP',
      state: isGuest ? 'locked' : (joined >= 1 ? 'done' : 'active') },
    { n: 3, label: t('ref.tier_3_label'), sub: t('ref.tier_3_sub'), ref: '+40 coins · +300 XP', inv: '+15 coins · +150 XP',
      state: isGuest ? 'locked' : (milestone3Done ? 'done' : (joined >= 1 ? 'active' : 'locked')) },
    { n: 5, label: t('ref.tier_5_label'), sub: t('ref.tier_5_sub'), ref: '+20 coins · +200 XP', inv: '—',
      state: isGuest ? 'locked' : (milestone5Done ? 'done' : (milestone3Done ? 'active' : 'locked')) },
    { n: 10, label: t('ref.tier_10_label'), sub: t('ref.tier_10_sub'), ref: '+200 coins · +2000 XP', inv: '—',
      state: isGuest ? 'locked' : (milestone10Done ? 'done' : (milestone5Done ? 'active' : 'locked')) },
  ];

  return (
    <div className="container fade-in">
      <div style={{ marginTop: 12 }}>
        <div className="eyebrow">{t('ref.program')}</div>
        <h1 className="h-display" style={{ fontSize: 'clamp(36px, 4.5vw, 52px)', marginTop: 6 }}>
          {t('ref.title_1')}<br/>{t('ref.title_2')}&nbsp;<span style={{ color: 'oklch(0.92 0.13 80)' }}>ShasteCoins</span>{t('ref.title_3')}
        </h1>
      </div>

      <div className="ref-grid">
        <div className="ref-hero">
          <h2 className="ref-hero__title">{t('ref.your_link')}</h2>
          <p className="ref-hero__lede">
            {t('ref.lede')}
          </p>

          {isGuest ? (
            <div className="ref-link" style={{ gridTemplateColumns: '1fr auto' }}>
              <input readOnly placeholder={t('ref.placeholder')} />
              <button className="btn btn--primary btn--sm" onClick={()=>setPage('login')}>{t('action.login')}</button>
            </div>
          ) : !referralCode ? (
            <div className="ref-link" style={{ gridTemplateColumns: '1fr auto', alignItems: 'center' }}>
              <div style={{ height: 40, borderRadius: 10, background: 'var(--bg-elev)', opacity: 0.75 }} />
              <div style={{ fontSize: 12, color: 'var(--muted)' }}>generating…</div>
            </div>
          ) : (
            <div className="ref-link">
              <input readOnly value={link} />
              <button className="btn btn--ghost btn--sm" onClick={()=>{navigator.clipboard?.writeText(link); setCopied(true); setTimeout(()=>setCopied(false), 1800);}}>
                <Icon name={copied?'check':'copy'} size={13}/> {copied?t('action.copied'):t('action.copy')}
              </button>
            </div>
          )}

          <div className="ref-stats">
            <div className="stat"><div className="stat__lbl">{t('ref.invited')}</div><div className="stat__num">{invited}</div><div className="stat__hint">{t('ref.link_opened')}</div></div>
            <div className="stat"><div className="stat__lbl">{t('ref.joined')}</div><div className="stat__num">{joined}</div><div className="stat__hint">{t('ref.signed_up')}</div></div>
            <div className="stat"><div className="stat__lbl">{t('ref.converted')}</div><div className="stat__num" style={{ color: 'oklch(0.86 0.14 155)' }}>{converted}</div><div className="stat__hint">{t('ref.reached_lv5')}</div></div>
          </div>

          <div className="row" style={{ marginTop: 22 }}>
            <a className="btn btn--ghost btn--sm" target="_blank" rel="noopener"
               href={`https://twitter.com/intent/tweet?url=${encodeURIComponent(link||'https://shastes.com')}&text=${encodeURIComponent('Play 7 free NSFW games at ShasteGames:')}`}>{t('ref.share_x')}</a>
            <a className="btn btn--ghost btn--sm" target="_blank" rel="noopener"
               href="https://discord.gg/shaste">{t('ref.share_discord')}</a>
            <a className="btn btn--ghost btn--sm" target="_blank" rel="noopener"
               href={`https://www.reddit.com/submit?url=${encodeURIComponent(link||'https://shastes.com')}&title=${encodeURIComponent('ShasteGames, 7 free NSFW games')}`}>{t('ref.share_reddit')}</a>
            <a className="btn btn--ghost btn--sm"
               href={`mailto:?subject=${encodeURIComponent('Join me on ShasteGames')}&body=${encodeURIComponent('Play 7 free NSFW games: '+(link||'https://shastes.com'))}`}>{t('ref.share_email')}</a>
          </div>
        </div>

        <div className="ref-ring-card">
          <div className="eyebrow">{t('ref.next_milestone')}</div>
          <Ring value={joined} max={3} label={t('ref.joined_lbl')} sub={t('ref.of', { n: 3 })} />
          <div style={{ fontSize: 13, color: 'var(--muted)', maxWidth: 220 }}>
            {isGuest ? t('ref.login_start') :
             joined >= 3 ? t('ref.next_friend_lv5') :
             t('ref.more_joins', { n: 3 - joined })}
          </div>
          {!isGuest && (
            <button className="btn btn--primary btn--full" style={{ marginTop: 8 }}>
              {t('action.share_link')}<Icon name="arrow" size={13}/>
            </button>
          )}
        </div>
      </div>

      <div className="card" style={{ marginTop: 28 }}>
        <h3 className="h-section">{t('ref.milestone_rewards')}</h3>
        <div className="tier-table" style={{ marginTop: 14 }}>
          {tiers.map(tier => (
            <div key={tier.n} className={`tier-row tier-row--${tier.state}`}>
              <div className="tier-row__icon">
                {tier.state === 'done' ? <Icon name="check" size={18}/> : tier.state === 'locked' ? <Icon name="lock" size={16}/> : tier.n}
              </div>
              <div className="tier-row__body">
                <h4>{tier.label}</h4>
                <p>{tier.sub}</p>
              </div>
              <div className="tier-row__reward">
                <span className="coin">{t('ref.you')} {tier.ref}</span>
                <span style={{ color: 'var(--subtle)' }}>{t('ref.them')} {tier.inv}</span>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { ReferralPage });