/* global React, Icon, CoinIcon, XPBar, t, useProfile, useProgression, useOnboarding, SHASTE_API */

function ProfilePage({ auth, setPage }) {
  const [tab, setTab] = React.useState('progression');
  const isGuest = auth.name === '';
  const { loading: profileLoading, error: profileError, data: profileData } = useProfile();
  const { loading: progressionLoading, error: progressionError, data: progressionData } = useProgression();
  const { loading: onboardingLoading, error: onboardingError, data: onboardingData } = useOnboarding();

  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('profile.locked_eyebrow')}</div>
          <h2 className="h-display" style={{ fontSize: 32, marginTop: 10 }}>{t('profile.locked_title')}</h2>
          <p style={{ color: 'var(--muted)', margin: '10px 0 22px' }}>{t('profile.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 profile = profileData || {};
  const level = Number(profile.level || 0);
  const xp = Number(profile.xp || 0);
  const coins = Number(profile.coins || 0);
  const supporter = profile.supporter || 'none';
  const follower = !!profile.follower;
  const displayName = profile.name || auth.name || '';

  const nextXP = 100;
  const curXP = xp % 100;
  const supporterPill = supporter === 'none' ? ['pill--nonfollower', t('profile.nonsupporter')] :
                        supporter === 'bronze' ? ['pill--supporter-bronze', t('profile.supporter_bronze')] :
                        supporter === 'silver' ? ['pill--supporter-silver', t('profile.supporter_silver')] :
                        ['pill--supporter-gold', t('profile.supporter_gold')];

  return (
    <div className="container fade-in">
      <div className="profile-head">
        <div className={`profile-head__av ${supporter!=='none'?'profile-head__av--ring':''}`}>
          {supporter !== 'none' ? <span>{displayName[0]}</span> : displayName[0]}
        </div>
        <div>
          <h2 className="profile-head__name">
            {displayName}
            <span className="pill" style={{ fontSize: 11 }}>LV {level}</span>
          </h2>
          <div className="profile-head__xprow">
            <XPBar value={curXP} max={nextXP} />
            <span className="mono" style={{ fontSize: 12, color: 'var(--subtle)' }}>{curXP}/{nextXP} XP</span>
          </div>
          <div className="profile-head__meta">
            <span className={`pill ${follower?'pill--follower':'pill--nonfollower'}`}>
              <Icon name={follower?'check':'plus'} size={11}/> {follower?t('profile.follower'):t('profile.nonfollower')}
            </span>
            <span className={`pill ${supporterPill[0]}`}><Icon name="heart" size={11}/> {supporterPill[1]}</span>
            <span className="pill"><CoinIcon size={11}/> {t('profile.coins_pill', { n: coins.toLocaleString() })}</span>
          </div>
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 8, alignItems: 'stretch' }}>
          {!follower && <button className="btn btn--primary" onClick={() => window.open('https://discord.gg/shaste', '_blank', 'noopener')}><Icon name="heart" size={13}/> {t('action.follow')}</button>}
          {supporter === 'none' && <button className="btn btn--ghost" onClick={()=>setPage('support')}><Icon name="support" size={13}/> {t('action.support')}</button>}
        </div>
      </div>

      {(profileLoading || progressionLoading || onboardingLoading) && (
        <div className="card" style={{ marginBottom: 14, color: 'var(--muted)' }}>
          Loading…
        </div>
      )}

      {(profileError || progressionError || onboardingError) && (
        <div className="card" style={{ marginBottom: 14, color: 'var(--danger, #ff6b6b)' }}>
          {(profileError || progressionError || onboardingError).message || 'Failed to load account data.'}
        </div>
      )}

      <div className="tabs">
        {[['onboarding',t('profile.tab_onboarding')],['progression',t('profile.tab_progression')],['rewards',t('profile.tab_rewards')],['settings',t('profile.tab_settings')]].map(([id,l])=>(
          <button key={id} className={`tab ${tab===id?'tab--active':''}`} onClick={()=>setTab(id)}>{l}</button>
        ))}
      </div>

      {tab === 'progression' && <Progression profile={profile} progression={progressionData} setPage={setPage} />}
      {tab === 'onboarding' && <Onboarding onboarding={onboardingData} />}
      {tab === 'rewards' && <RewardsTab auth={auth} />}
      {tab === 'settings' && <Settings setPage={setPage} />}
    </div>
  );
}

function Progression({ profile, progression, setPage }) {
  const level = Number((profile && profile.level) || 0);
  const xp = Number((profile && profile.xp) || 0);
  const next5 = Array.from({ length: 5 }, (_, i) => level + i + 1);

  const unlockedPerksRaw = Array.isArray(progression && progression.unlocked) ? progression.unlocked : [];
  const lockedPerksRaw = Array.isArray(progression && progression.locked) ? progression.locked : [];
  const perks = unlockedPerksRaw.map(function (p) {
    return Object.assign({}, p, { unlocked: true });
  }).concat(lockedPerksRaw.map(function (p) {
    return Object.assign({}, p, { unlocked: false });
  }));

  const gameProgress = Array.isArray(progression && progression.gameProgress)
    ? progression.gameProgress
    : [];

  return (
    <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
      <div className="card">
        <h3 className="h-section">{t('profile.progression_details')}</h3>
        <div style={{ marginTop: 16, display: 'grid', gap: 10 }}>
          <div style={{ display: 'flex', justifyContent: 'space-between' }}>
            <span style={{ color: 'var(--muted)' }}>{t('profile.current_level')}</span>
            <strong className="tabular">Lv {level}</strong>
          </div>
          <div style={{ display: 'flex', justifyContent: 'space-between' }}>
            <span style={{ color: 'var(--muted)' }}>{t('profile.xp_total')}</span>
            <strong className="tabular">{xp.toLocaleString()}</strong>
          </div>
          <div style={{ display: 'flex', justifyContent: 'space-between' }}>
            <span style={{ color: 'var(--muted)' }}>{t('profile.xp_to_next')}</span>
            <strong className="tabular">{100 - (xp % 100)} XP</strong>
          </div>
          <div style={{ display: 'flex', justifyContent: 'space-between' }}>
            <span style={{ color: 'var(--muted)' }}>{t('profile.next_5_levels')}</span>
            <span className="mono" style={{ color: 'var(--subtle)', fontSize: 12 }}>{next5.join(' · ')}</span>
          </div>
        </div>
      </div>

      <div className="card">
        <h3 className="h-section">{t('profile.game_progress')}</h3>
        <div style={{ marginTop: 16, display: 'grid', gap: 10 }}>
          {(() => {
            if (!gameProgress.length) {
              return <p style={{ color: 'var(--muted)', margin: 0 }}>{t('profile.launch_first')}</p>;
            }
            return gameProgress.map((row, index) => {
              const pct = Math.round((row.progress || 0) * 100);
              const label = row.title || row.slug || row.game || row.id || 'Game';
              const meta = row.chapter ? `${pct}% · Ch. ${row.chapter}` : `${pct}%`;
              return (
                <div key={row.slug || row.id || index}>
                  <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 13, marginBottom: 4 }}>
                    <span>{label}</span>
                    <span className="mono" style={{ color: 'var(--subtle)' }}>{meta}</span>
                  </div>
                  <div className="profile-head__bar" style={{ height: 6 }}>
                    <span style={{ width: `${pct}%`, background: 'linear-gradient(90deg, var(--pink), var(--pink-hot))' }}/>
                  </div>
                </div>
              );
            });
          })()}
        </div>
      </div>


      <div className="card" style={{ gridColumn: '1 / -1', display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 12, flexWrap: 'wrap' }}>
        <div>
          <h3 className="h-section" style={{ marginBottom: 6 }}>Game Tokens</h3>
          <p style={{ margin: 0, color: 'var(--muted)' }}>Assign supporter tokens to games or sell them for coins / XP.</p>
        </div>
        <button className="btn btn--ghost btn--sm" onClick={() => setPage('tokens')}>
          Manage tokens <Icon name="arrow" size={12}/>
        </button>
      </div>

      <div className="card" style={{ gridColumn: '1 / -1' }}>
        <h3 className="h-section">{t('profile.level_perks')}</h3>
        <div style={{ marginTop: 14 }}>
          {perks.map((p, index) => {
            const reqLevel = p.level || p.lv || p.requiredLevel || 0;
            const name = p.name || p.title || p.slug || t('progression.unknown_perk');
            const sub = p.sub || p.description || '';
            const icon = p.icon || 'lock';
            return (
            <div key={p.slug || p.id || reqLevel || index} className={`perk ${p.unlocked?'perk--unlocked':''}`}>
              <div className="perk__ic"><Icon name={p.unlocked?'check':icon} size={18}/></div>
              <div>
                <p className="perk__ttl">{name}</p>
                <p className="perk__sub">{sub}</p>
              </div>
              <span className="perk__req">LV {reqLevel}</span>
            </div>
          )})}
          {!perks.length && <p style={{ color: 'var(--muted)', margin: 0 }}>{t('profile.launch_first')}</p>}
        </div>
      </div>
    </div>
  );
}

function Onboarding({ onboarding }) {
  const canonical = Array.isArray(onboarding && onboarding.steps) ? onboarding.steps.slice(0, 5) : [];
  const [steps, setSteps] = React.useState(canonical);
  const [savingStep, setSavingStep] = React.useState(null);

  React.useEffect(() => {
    setSteps(canonical);
  }, [onboarding]);

  async function completeStep(stepId) {
    if (!stepId || !SHASTE_API || typeof SHASTE_API.completeOnboardingStep !== 'function') return;
    setSavingStep(stepId);
    try {
      await SHASTE_API.completeOnboardingStep(stepId);
      setSteps((prev) => prev.map((step) => (step.id === stepId || step.step === stepId)
        ? Object.assign({}, step, { completed: true, done: true })
        : step));
    } finally {
      setSavingStep(null);
    }
  }

  const doneCount = steps.filter((s) => s.completed || s.done).length;

  return (
    <div className="card">
      <h3 className="h-section">{t('profile.getting_started')} <span className="dim">— {doneCount} / {steps.length}</span></h3>
      <div style={{ marginTop: 18 }}>
        {steps.map((s, i) => (
          <div key={i} style={{ display: 'grid', gridTemplateColumns: '32px 1fr auto', gap: 12, alignItems: 'center', padding: '14px 0', borderTop: i? '1px solid var(--hairline)' : 'none' }}>
            <div style={{ width: 32, height: 32, borderRadius: '50%', background: (s.completed || s.done) ? 'var(--good-soft)' : 'rgba(255,255,255,0.04)', display: 'grid', placeItems: 'center', color: (s.completed || s.done) ? 'oklch(0.86 0.14 155)' : 'var(--subtle)' }}>
              {(s.completed || s.done) ? <Icon name="check" size={14}/> : (i+1)}
            </div>
            <div>
              <div style={{ fontWeight: 600, fontSize: 14, color: (s.completed || s.done) ? 'var(--muted)' : 'var(--text)' }}>{s.title || s.t || s.label || s.id || `Step ${i + 1}`}</div>
              <div style={{ fontSize: 13, color: 'var(--subtle)' }}>{s.description || s.d || ''}</div>
            </div>
            {!(s.completed || s.done) && (
              <button
                className="btn btn--ghost btn--sm"
                disabled={savingStep === (s.id || s.step)}
                onClick={() => completeStep(s.id || s.step)}
              >
                {t('action.start')}<Icon name="arrow" size={12}/>
              </button>
            )}
          </div>
        ))}
        {!steps.length && <p style={{ color: 'var(--muted)', margin: 0 }}>Loading…</p>}
      </div>
    </div>
  );
}

function RewardsTab() { return null; } // rendered by RewardsPage
function Settings({ setPage }) {
  const [toast, setToast] = React.useState('');

  React.useEffect(() => {
    try {
      const pendingRaw = sessionStorage.getItem('shaste-discord-link-pending');
      if (!pendingRaw) return;
      const pending = JSON.parse(pendingRaw);
      const startedAt = Number(pending && pending.startedAt);
      const ageMs = Date.now() - startedAt;
      // Only show the success toast for fresh return trips.
      if (Number.isFinite(startedAt) && ageMs >= 0 && ageMs <= 10 * 60 * 1000) {
        setToast('Discord connected successfully.');
      }
      sessionStorage.removeItem('shaste-discord-link-pending');
    } catch (e) {}
  }, []);

  React.useEffect(() => {
    if (!toast) return undefined;
    const id = window.setTimeout(() => setToast(''), 3500);
    return () => window.clearTimeout(id);
  }, [toast]);

  const connectDiscord = React.useCallback(() => {
    try {
      sessionStorage.setItem('shaste-discord-link-pending', JSON.stringify({
        startedAt: Date.now(),
        href: window.location.href,
      }));
    } catch (e) {}

    let token = '';
    try {
      token = window.SHASTE_AUTH_TOKEN
        || localStorage.getItem('shaste_jwt')
        || localStorage.getItem('shaste_token')
        || '';
    } catch (e) {}

    const base = '/auth/discord?return_to=' + encodeURIComponent(window.location.href);
    window.location.href = token ? `${base}&token=${encodeURIComponent(token)}` : base;
  }, []);

  return (
    <div className="card">
      <h3 className="h-section">{t('profile.settings_title')}</h3>
      <p style={{ color: 'var(--muted)', marginTop: 14 }}>{t('profile.settings_sub')}</p>

      <div style={{ marginTop: 16, borderTop: '1px solid var(--hairline)' }}>
        <button
          className="btn btn--ghost"
          onClick={() => setPage('codes')}
          style={{
            marginTop: 12,
            width: '100%',
            justifyContent: 'space-between',
            borderColor: 'var(--hairline)',
          }}
        >
          <span>Redeem codes</span>
          <Icon name="arrow" size={14} />
        </button>
      </div>
      <div style={{ marginTop: 16, borderTop: '1px solid var(--hairline)' }}>
        <button
          className="btn btn--ghost"
          onClick={connectDiscord}
          style={{
            marginTop: 12,
            width: '100%',
            justifyContent: 'space-between',
            borderColor: 'var(--hairline)',
          }}
        >
          <span>Connect Discord</span>
          <Icon name="arrow" size={14} />
        </button>
      </div>
      {toast && (
        <div
          role="status"
          aria-live="polite"
          style={{
            marginTop: 12,
            padding: '10px 12px',
            borderRadius: 10,
            border: '1px solid color-mix(in oklab, #22c55e 60%, var(--hairline))',
            background: 'color-mix(in oklab, #22c55e 14%, transparent)',
            color: '#8ff0b4',
            fontSize: 13,
            fontWeight: 600,
          }}
        >
          {toast}
        </div>
      )}
    </div>
  );
}

Object.assign(window, { ProfilePage });