/* Curio — Rewards: badges, points & bonuses. window.RewardsScreen */
const {useState:useRwState} = React;

/* tier visual language (light theme) */
const TIER = {
  bronze:    {c:'#A4703A', bg:'#F6ECE0', line:'#E3C9A8', label:{en:'Bronze',de:'Bronze'}},
  silver:    {c:'#6E7A8A', bg:'#EEF1F5', line:'#CDD6E0', label:{en:'Silver',de:'Silber'}},
  gold:      {c:'#A9762A', bg:'#FBF1DE', line:'#EACE9B', label:{en:'Gold',de:'Gold'}},
  legendary: {c:'#8A4DD0', bg:'#F1E9FB', line:'#D9C2F2', label:{en:'Legendary',de:'Legendär'}},
};

function RewardsScreen(){
  const{t,lang,state,user,nav,actions}=useApp();
  const L=(v)=>pick(v,lang);
  const info=window.CurioStore.levelInfo(state.xp);
  const[tab,setTab]=useRwState('badges');
  const[sel,setSel]=useRwState(null);

  /* state-derived metrics powering badge progress */
  const qp=state.questProgress||{};
  const metrics={
    stops: Object.values(qp).reduce((a,p)=>a+(p.stop||0),0),
    connections:(state.connections||[]).length,
    streak: state.streak||0,
    saved:(state.savedObjects||[]).length,
    level: info.level,
    started: Object.keys(qp).length,
    quests: Object.values(qp).filter(p=>p.completed).length,
  };
  const badges=window.DATA.BADGES.map(b=>{
    const cur=b.metric?(metrics[b.metric]||0):(state.badges.includes(b.id)?1:0);
    const tgt=b.metric?b.target:1;
    const earned=state.badges.includes(b.id)||(b.metric&&cur>=tgt);
    return {...b, earned, cur:Math.min(cur,tgt), tgt, pct:Math.max(4,Math.min(100,cur/tgt*100))};
  });
  const earnedCount=badges.filter(b=>b.earned).length;

  const tabs=[L({en:'Badges',de:'Abzeichen'}),L({en:'Points',de:'Punkte'}),L({en:'Bonuses',de:'Boni'})];
  const tabKey=['badges','points','bonuses'];

  /* circular level ring */
  const R=50, C=2*Math.PI*R, off=C*(1-info.pct/100);
  const perks=window.DATA.LEVEL_PERKS||[];
  const curTitle=(perks[Math.min(info.level-1,perks.length-1)]||{}).title||{en:'Explorer',de:'Entdecker:in'};

  /* level ladder thresholds (mirrors the XP curve) */
  const ladder=(()=>{ let out=[],need=400,acc=0; for(let lvl=1;lvl<=5;lvl++){ out.push({lvl,at:acc}); acc+=need; need=Math.round(need*1.28);} return out; })();

  const today=window.CurioStore.todayKey();
  const claimed=state.claimedBonuses||{};

  function bonusStatus(bo){
    if(bo.id==='daily') return claimed.daily===today?'done':'ready';
    if(bo.kind==='streak') return claimed[bo.id]?'done':(metrics.streak>=bo.need?'ready':'locked');
    if(bo.kind==='progress') return claimed[bo.id]?'done':(metrics.quests>=bo.need?'ready':'locked');
    if(bo.kind==='status') return state.crews&&state.crews.length?'active':'locked';
    return 'locked';
  }

  return <div data-screen-label="Rewards" className="cu-scroll" style={{flex:1,overflowY:'auto',background:T.bg,position:'relative'}}>
    
    <BackRow title={L({en:'Rewards',de:'Belohnungen'})}/>

    {/* ── level hero ── */}
    <div style={{padding:'8px 20px 0'}}>
      <div style={{borderRadius:24,padding:'22px 22px',background:GRAD,boxShadow:SHmd,position:'relative',overflow:'hidden',display:'flex',alignItems:'center',gap:20}}>
        <div aria-hidden="true" style={{position:'absolute',top:-50,right:-40,width:170,height:170,borderRadius:'50%',background:'rgba(255,255,255,.13)'}}></div>
        <div style={{position:'relative',width:124,height:124,flexShrink:0}}>
          <svg width="124" height="124" viewBox="0 0 124 124">
            <circle cx="62" cy="62" r={R} fill="none" stroke="rgba(255,255,255,.28)" strokeWidth="9"/>
            <circle cx="62" cy="62" r={R} fill="none" stroke="#fff" strokeWidth="9" strokeLinecap="round" strokeDasharray={C} strokeDashoffset={off} transform="rotate(-90 62 62)"/>
          </svg>
          <div style={{position:'absolute',inset:0,display:'flex',flexDirection:'column',alignItems:'center',justifyContent:'center'}}>
            <span style={{color:'#fff',fontSize:fz(34),fontWeight:800,fontFamily:FD,lineHeight:1}}>{info.level}</span>
            <span style={{color:'rgba(255,255,255,.85)',fontSize:fz(10),fontWeight:800,letterSpacing:'1.5px',fontFamily:F,marginTop:2}}>{L({en:'LEVEL',de:'LEVEL'})}</span>
          </div>
        </div>
        <div style={{position:'relative',flex:1,minWidth:0}}>
          <div style={{color:'rgba(255,255,255,.85)',fontSize:fz(12.5),fontWeight:700,fontFamily:F,letterSpacing:'.3px'}}>{L(curTitle)}</div>
          <div style={{color:'#fff',fontSize:fz(30),fontWeight:800,fontFamily:FD,letterSpacing:'-0.6px',lineHeight:1.05,margin:'2px 0 10px'}}>{(state.xp||0).toLocaleString()} <span style={{fontSize:fz(16),fontWeight:700}}>XP</span></div>
          <div style={{display:'flex',alignItems:'center',gap:8}}>
            <span style={{display:'inline-flex',alignItems:'center',gap:5,padding:'5px 10px',borderRadius:100,background:'rgba(255,255,255,.18)',color:'#fff',fontSize:fz(12),fontWeight:800,fontFamily:F}}>🔥 {state.streak}</span>
            <span style={{color:'rgba(255,255,255,.9)',fontSize:fz(12.5),fontWeight:600,fontFamily:F}}>{info.toNext.toLocaleString()} {L({en:'XP to Level',de:'XP bis Level'})} {info.level+1}</span>
          </div>
        </div>
      </div>
    </div>
    <Gap n={18}/>

    <Tabs tabs={tabs} active={tabs[tabKey.indexOf(tab)]} onChange={(v)=>setTab(tabKey[tabs.indexOf(v)])}/>
    <Gap n={18}/>

    {/* ───────── BADGES ───────── */}
    {tab==='badges'&&<div>
      <div style={{padding:'0 20px',display:'flex',gap:8,marginBottom:18}}>
        <div style={{flex:1,padding:'14px 4px',borderRadius:16,background:tint(9),border:`1.5px solid ${tint(24)}`,boxShadow:SH,textAlign:'center'}}>
          <div style={{color:'var(--ink-deep)',fontSize:fz(20),fontWeight:800,fontFamily:FD}}>{earnedCount}/{badges.length}</div>
          <div style={{color:T.muted,fontSize:fz(11),fontFamily:F,marginTop:2}}>{L({en:'Unlocked',de:'Freigeschaltet'})}</div>
        </div>
        {['gold','silver','bronze'].map(tr=>{ const n=badges.filter(b=>b.earned&&b.tier===tr).length; const TI=TIER[tr];
          return <div key={tr} style={{flex:1,padding:'14px 4px',borderRadius:16,background:TI.bg,border:`1.5px solid ${TI.line}`,boxShadow:SH,textAlign:'center'}}>
            <div style={{color:TI.c,fontSize:fz(20),fontWeight:800,fontFamily:FD}}>{n}</div>
            <div style={{color:T.muted,fontSize:fz(11),fontFamily:F,marginTop:2}}>{L(TI.label)}</div>
          </div>;})}
      </div>
      <div style={{padding:'0 20px',display:'grid',gridTemplateColumns:'repeat(3,1fr)',gap:11}}>
        {badges.map(b=>{ const TI=TIER[b.tier]||TIER.bronze;
          return <button key={b.id} type="button" onClick={()=>setSel(b)} className="cu-press" style={{textAlign:'center',padding:'18px 8px 14px',borderRadius:18,cursor:'pointer',background:b.earned?TI.bg:T.cardAlt,border:b.earned?`1.5px solid ${TI.line}`:`1.5px dashed ${T.lineMd}`,boxShadow:b.earned?SH:'none',position:'relative',display:'flex',flexDirection:'column',alignItems:'center',gap:7}}>
            {b.earned&&b.tier==='legendary'&&<span aria-hidden="true" style={{position:'absolute',inset:0,borderRadius:18,background:'linear-gradient(135deg,rgba(138,77,208,.12),rgba(255,93,162,.10))'}}></span>}
            <span style={{position:'relative',width:54,height:54,borderRadius:'50%',display:'flex',alignItems:'center',justifyContent:'center',fontSize:26,background:b.earned?'#fff':'transparent',boxShadow:b.earned?`0 4px 12px ${TI.line}`:'none',filter:b.earned?'none':'grayscale(1)',opacity:b.earned?1:.45,border:b.earned?`2px solid ${TI.line}`:'none'}}>{b.icon}</span>
            <span style={{position:'relative',color:b.earned?T.text:T.muted,fontSize:fz(11.5),fontWeight:800,fontFamily:F,lineHeight:1.15}}>{L(b.name)}</span>
            {b.earned
              ?<span style={{position:'relative',color:TI.c,fontSize:fz(10),fontWeight:800,fontFamily:F,letterSpacing:'.4px',textTransform:'uppercase'}}>{L(TI.label)}</span>
              :<span style={{position:'relative',width:'100%',padding:'0 4px'}}>
                <span style={{display:'block',height:5,borderRadius:100,background:T.lineMd,overflow:'hidden'}}><span style={{display:'block',height:'100%',width:`${b.pct}%`,background:'var(--ink)',borderRadius:100}}></span></span>
                <span style={{display:'block',color:T.muted,fontSize:fz(9.5),fontWeight:700,fontFamily:F,marginTop:4}}>{b.cur}/{b.tgt}</span>
              </span>}
          </button>;})}
      </div>
      <Gap n={34}/>
    </div>}

    {/* ───────── POINTS ───────── */}
    {tab==='points'&&<div>
      <SecTitle c={L({en:'How you earn XP',de:'So verdienst du XP'})}/>
      <div style={{padding:'0 20px',display:'flex',flexDirection:'column',gap:10,marginBottom:26}}>
        {(window.DATA.XP_RULES||[]).map((r,i)=><div key={i} style={{display:'flex',alignItems:'center',gap:13,padding:'13px 15px',borderRadius:16,background:T.card,border:`1.5px solid ${T.line}`,boxShadow:SH}}>
          <span style={{width:44,height:44,borderRadius:13,background:tint(10),display:'inline-flex',alignItems:'center',justifyContent:'center',fontSize:21,flexShrink:0}}>{r.icon}</span>
          <span style={{flex:1,color:T.text,fontSize:fz(14.5),fontWeight:700,fontFamily:F}}>{L(r.label)}</span>
          <span style={{color:r.mult?T.gold:'var(--ink-deep)',fontSize:fz(15),fontWeight:800,fontFamily:FD}}>{r.mult?r.mult:`+${r.xp}`}</span>
        </div>)}
      </div>
      <SecTitle c={L({en:'Level ladder',de:'Level-Leiter'})}/>
      <div style={{padding:'0 20px',display:'flex',flexDirection:'column',gap:10}}>
        {ladder.map((lv)=>{ const isCur=lv.lvl===info.level, done=lv.lvl<info.level; const p=perks[lv.lvl-1]||{};
          return <div key={lv.lvl} style={{display:'flex',alignItems:'center',gap:14,padding:'14px 15px',borderRadius:16,background:isCur?tint(8):T.card,border:`1.5px solid ${isCur?tint(40):T.line}`,boxShadow:SH,opacity:lv.lvl>info.level?.62:1}}>
            <span style={{width:42,height:42,borderRadius:'50%',flexShrink:0,display:'inline-flex',alignItems:'center',justifyContent:'center',fontSize:fz(16),fontWeight:800,fontFamily:FD,background:done?'var(--ink)':isCur?GRAD:T.cardAlt,color:done||isCur?'#fff':T.muted,border:done||isCur?'none':`1.5px solid ${T.lineMd}`}}>{done?'✓':lv.lvl}</span>
            <div style={{flex:1,minWidth:0}}>
              <div style={{color:T.text,fontSize:fz(14.5),fontWeight:800,fontFamily:F}}>{L(p.title)} <span style={{color:T.muted,fontWeight:600,fontSize:fz(12)}}>· {L({en:'Lv',de:'Lv'})} {lv.lvl}</span></div>
              <div style={{color:T.muted,fontSize:fz(12.5),fontFamily:F,marginTop:1}}>{L(p.perk)}</div>
            </div>
            <span style={{color:isCur?'var(--ink-deep)':T.muted,fontSize:fz(12),fontWeight:800,fontFamily:F,flexShrink:0}}>{lv.at.toLocaleString()}<span style={{fontWeight:600,fontSize:fz(10)}}> XP</span></span>
          </div>;})}
      </div>
      <Gap n={34}/>
    </div>}

    {/* ───────── BONUSES ───────── */}
    {tab==='bonuses'&&<div>
      <div style={{padding:'0 20px',display:'flex',flexDirection:'column',gap:12}}>
        {(window.DATA.BONUSES||[]).map(bo=>{ const st=bonusStatus(bo);
          const amount=bo.mult?bo.mult:`+${bo.xp} XP`;
          return <div key={bo.id} style={{padding:'16px',borderRadius:18,background:st==='ready'?tint(7):T.card,border:`1.5px solid ${st==='ready'?tint(34):st==='active'?T.greenLine:T.line}`,boxShadow:SH,display:'flex',alignItems:'center',gap:14}}>
            <span style={{width:52,height:52,borderRadius:15,flexShrink:0,display:'inline-flex',alignItems:'center',justifyContent:'center',fontSize:26,background:st==='active'?T.greenBg:tint(10)}}>{bo.icon}</span>
            <div style={{flex:1,minWidth:0}}>
              <div style={{display:'flex',alignItems:'center',gap:8}}>
                <span style={{color:T.text,fontSize:fz(15),fontWeight:800,fontFamily:F}}>{L(bo.name)}</span>
                <span style={{color:bo.mult?T.gold:'var(--ink-deep)',fontSize:fz(13),fontWeight:800,fontFamily:FD}}>{amount}</span>
              </div>
              <div style={{color:T.muted,fontSize:fz(12.5),fontFamily:F,marginTop:2}}>{L(bo.desc)}</div>
              {bo.kind==='progress'&&st!=='done'&&<div style={{marginTop:9,maxWidth:200}}><PBar val={Math.min(100,metrics.quests/bo.need*100)} grad label="bonus"/><span style={{display:'block',color:T.muted,fontSize:fz(10.5),fontWeight:700,fontFamily:F,marginTop:4}}>{Math.min(metrics.quests,bo.need)}/{bo.need} {L({en:'quests',de:'Quests'})}</span></div>}
            </div>
            <div style={{flexShrink:0}}>
              {st==='ready'&&<Btn label={L({en:'Claim',de:'Holen'})} variant="primary" sm full={false} onClick={()=>{actions.claimBonus(bo.id,bo.xp||0); showToast(`${t('claimedToast')} · ${amount}`,{icon:<Ic k="check" size={15} color="#34C759"/>});}}/>}
              {st==='done'&&<span style={{display:'inline-flex',alignItems:'center',gap:5,color:T.green,fontSize:fz(12.5),fontWeight:800,fontFamily:F}}>✓ {L({en:'Claimed',de:'Geholt'})}</span>}
              {st==='active'&&<span style={{display:'inline-flex',alignItems:'center',gap:5,color:T.green,fontSize:fz(12.5),fontWeight:800,fontFamily:F}}>● {L({en:'Active',de:'Aktiv'})}</span>}
              {st==='locked'&&<span style={{color:T.muted,fontSize:fz(18)}}>🔒</span>}
            </div>
          </div>;})}
      </div>
      <Gap n={34}/>
    </div>}

    {/* ── badge detail sheet ── */}
    {sel&&(()=>{ const TI=TIER[sel.tier]||TIER.bronze;
      return <div style={{position:'absolute',inset:0,zIndex:60,display:'flex',flexDirection:'column',justifyContent:'flex-end'}}>
        <button type="button" aria-label="Close" onClick={()=>setSel(null)} style={{position:'absolute',inset:0,background:'rgba(16,12,28,.45)',border:'none',cursor:'pointer'}}></button>
        <div className="cu-sheet" style={{position:'relative',background:T.bg,borderTopLeftRadius:26,borderTopRightRadius:26,padding:'12px 24px 30px',boxShadow:'0 -16px 50px rgba(16,12,28,.4)'}}>
          <div style={{width:42,height:5,borderRadius:100,background:T.lineMd,margin:'0 auto 18px'}}></div>
          <div style={{display:'flex',flexDirection:'column',alignItems:'center',textAlign:'center'}}>
            <span style={{width:92,height:92,borderRadius:'50%',display:'flex',alignItems:'center',justifyContent:'center',fontSize:44,background:sel.earned?'#fff':T.cardAlt,border:`2.5px solid ${sel.earned?TI.line:T.lineMd}`,boxShadow:sel.earned?`0 8px 22px ${TI.line}`:'none',filter:sel.earned?'none':'grayscale(1)',opacity:sel.earned?1:.5}}>{sel.icon}</span>
            <span style={{display:'inline-flex',alignItems:'center',gap:6,marginTop:14,padding:'5px 14px',borderRadius:100,background:TI.bg,border:`1px solid ${TI.line}`,color:TI.c,fontSize:fz(11.5),fontWeight:800,fontFamily:F,letterSpacing:'.5px',textTransform:'uppercase'}}>{L(TI.label)} · +{sel.xp} XP</span>
            <h2 style={{color:T.text,fontSize:fz(22),fontWeight:800,fontFamily:FD,letterSpacing:'-0.4px',margin:'14px 0 6px'}}>{L(sel.name)}</h2>
            <p style={{color:T.sub,fontSize:fz(14),fontFamily:F,lineHeight:1.5,margin:0,maxWidth:300}}>{L(sel.desc)}</p>
          </div>
          <div style={{marginTop:20,padding:'15px 16px',borderRadius:16,background:T.card,border:`1.5px solid ${T.line}`}}>
            <div style={{color:T.muted,fontSize:fz(11),fontWeight:800,fontFamily:F,textTransform:'uppercase',letterSpacing:'.5px',marginBottom:8}}>{L({en:'How to earn it',de:'So bekommst du es'})}</div>
            <div style={{color:T.text,fontSize:fz(14),fontFamily:F,lineHeight:1.45,fontWeight:600}}>{L(sel.how)}</div>
            {!sel.earned&&sel.metric&&<div style={{marginTop:12}}>
              <PBar val={sel.pct} grad label="progress"/>
              <div style={{display:'flex',justifyContent:'space-between',marginTop:7}}>
                <span style={{color:T.muted,fontSize:fz(12),fontWeight:700,fontFamily:F}}>{L({en:'Progress',de:'Fortschritt'})}</span>
                <span style={{color:'var(--ink-deep)',fontSize:fz(12.5),fontWeight:800,fontFamily:F}}>{sel.cur}/{sel.tgt}</span>
              </div>
            </div>}
            {sel.earned&&<div style={{marginTop:10,display:'inline-flex',alignItems:'center',gap:6,color:T.green,fontSize:fz(13),fontWeight:800,fontFamily:F}}>✓ {L({en:'Unlocked',de:'Freigeschaltet'})}</div>}
          </div>
          <Btn label={L({en:'Got it',de:'Verstanden'})} onClick={()=>setSel(null)} style={{marginTop:16}}/>
        </div>
      </div>;
    })()}
  </div>;
}

Object.assign(window,{RewardsScreen});