/* global React */
const { useState: uS3 } = React;

// ============== 6. Results / Match Summary ==============
window.ResultsScreen = function ResultsScreen({ category, correctCount, total, points, bestStreak, xpEarned, coinsEarned, onPlayAgain, onHome, onShare }) {
  const accuracy = Math.round((correctCount/total)*100);
  const tier = accuracy>=80 ? {label:'¡Imparable!', color:'#FFD60A', emoji:'🏆'}
              : accuracy>=60 ? {label:'¡Buen trabajo!', color:'#00E5A8', emoji:'⭐'}
              : accuracy>=40 ? {label:'Puedes mejorar', color:'#38BDF8', emoji:'💪'}
              : {label:'Sigue practicando', color:'#FF4D8D', emoji:'🎯'};

  return (
    <div className="tr-screen" style={{background:'#0E0828'}}>
      <div style={{position:'absolute',top:0,left:0,right:0,height:280,background:`radial-gradient(ellipse at center top, ${tier.color}33, transparent 70%)`}}/>

      <div style={{padding:'60px 20px 0',display:'flex',justifyContent:'space-between',alignItems:'center',position:'relative'}}>
        <button className="icon-btn" onClick={onHome}>‹</button>
        <button onClick={onShare} style={{background:'rgba(255,255,255,0.12)',border:'none',borderRadius:999,padding:'8px 14px',color:'white',fontWeight:700,fontSize:13,cursor:'pointer',display:'flex',alignItems:'center',gap:6}}>
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none"><path d="M4 12v8a2 2 0 002 2h12a2 2 0 002-2v-8M16 6l-4-4-4 4M12 2v14" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/></svg>
          Compartir
        </button>
      </div>

      <div style={{display:'flex',flexDirection:'column',alignItems:'center',padding:'18px 24px 0',position:'relative'}}>
        <div className="tr-bounce-in" style={{fontSize:64,animation:'tr-bounce-in 500ms cubic-bezier(.34,1.56,.64,1) both, tr-float 3s ease-in-out 500ms infinite'}}>{tier.emoji}</div>
        <div className="tr-bounce-in" style={{fontWeight:900,fontSize:32,color:'white',letterSpacing:'-0.035em',marginTop:8,animationDelay:'140ms'}}>{tier.label}</div>
        <div className="tr-bounce-in" style={{fontWeight:600,fontSize:14,color:'#D6CFFA',marginTop:2,animationDelay:'200ms',display:'flex',alignItems:'center',gap:6}}>
          <img src={category.icon} width="18" height="18" alt=""/>
          {category.name}
        </div>

        {/* big score */}
        <div className="tr-bounce-in" style={{
          marginTop:22,
          background:'linear-gradient(180deg,rgba(255,255,255,0.14),rgba(255,255,255,0.06))',
          borderRadius:28,padding:'22px 28px',
          textAlign:'center',
          boxShadow:'inset 0 0 0 1px rgba(255,255,255,0.12)',
          animationDelay:'280ms'
        }}>
          <div style={{fontWeight:700,fontSize:11,color:'#D6CFFA',letterSpacing:'.08em',textTransform:'uppercase'}}>Puntuación final</div>
          <div style={{fontWeight:900,fontSize:64,color:tier.color,letterSpacing:'-0.05em',lineHeight:1,marginTop:6,fontVariantNumeric:'tabular-nums',textShadow:`0 0 30px ${tier.color}55`}}>{points.toLocaleString('es-ES')}</div>
          <div style={{fontWeight:700,fontSize:13,color:'#D6CFFA',marginTop:4,fontVariantNumeric:'tabular-nums'}}>
            {correctCount} de {total} correctas · {accuracy}%
          </div>
        </div>
      </div>

      {/* stats grid */}
      <div className="pad" style={{marginTop:20,display:'grid',gridTemplateColumns:'1fr 1fr 1fr',gap:8}}>
        <StatCard icon="⚡" label="XP" value={`+${xpEarned}`} color="#FFD60A"/>
        <StatCard icon="🪙" label="Monedas" value={`+${coinsEarned}`} color="#FFD60A"/>
        <StatCard icon="🔥" label="Mejor racha" value={bestStreak} color="#FF6B35"/>
      </div>

      {/* per-question recap */}
      <div className="pad" style={{marginTop:14,flex:1,overflow:'auto'}}>
        <div style={{fontWeight:700,fontSize:11,color:'#D6CFFA',letterSpacing:'.06em',textTransform:'uppercase',marginBottom:8}}>Resumen</div>
        <div style={{display:'flex',gap:6}}>
          {Array.from({length:total}).map((_,i)=>{
            const ok = i < correctCount;
            return (
              <div key={i} style={{
                flex:1,height:36,borderRadius:10,
                background: ok ? '#00E5A8' : '#FF4D8D',
                display:'flex',alignItems:'center',justifyContent:'center',
                color: ok?'#0E0828':'white',fontWeight:900,fontSize:13,
                boxShadow: `0 3px 0 ${ok?'#00B886':'#E12C6F'}`,
              }}>{ok?'✓':'✗'}</div>
            );
          })}
        </div>
      </div>

      <div className="pad" style={{paddingBottom:24,display:'flex',flexDirection:'column',gap:10}}>
        <button className="tr-btn yellow full lg" onClick={onPlayAgain}>Jugar de nuevo</button>
        <button className="tr-btn ghost full" onClick={onHome}>Volver al inicio</button>
      </div>
    </div>
  );
};

function StatCard({icon, label, value, color}) {
  return (
    <div style={{background:'rgba(255,255,255,0.08)',borderRadius:16,padding:'12px 8px',textAlign:'center',boxShadow:'inset 0 0 0 1px rgba(255,255,255,0.08)'}}>
      <div style={{fontSize:20}}>{icon}</div>
      <div style={{fontWeight:900,fontSize:18,color:color,marginTop:2,letterSpacing:'-0.02em',fontVariantNumeric:'tabular-nums'}}>{value}</div>
      <div style={{fontWeight:600,fontSize:10,color:'#D6CFFA',letterSpacing:'.04em',textTransform:'uppercase',marginTop:1}}>{label}</div>
    </div>
  );
}

// ============== 7. Rewards / Daily Chests ==============
window.RewardsScreen = function RewardsScreen({ user, onBack, onClaim, onLeaderboard, onProfile }) {
  const [opened, setOpened] = uS3([false, false, false]);
  const chests = [
    {tier:'bronze', name:'Bronce',  prize:'+50 🪙',  color:'#CD7F32', shadow:'#8B4513', ready:true},
    {tier:'silver', name:'Plata',   prize:'+5 💎',   color:'#C0C0C0', shadow:'#808080', ready:true},
    {tier:'gold',   name:'Oro',     prize:'+250 🪙 + Avatar', color:'#FFD60A', shadow:'#E6B800', ready:true,big:true},
  ];
  const open = (i)=>{
    setOpened(o=>{ const n=[...o]; n[i]=true; return n; });
  };

  return (
    <div className="tr-screen">
      <div style={{position:'absolute',top:-40,right:-40,width:200,height:200,borderRadius:999,background:'#FFD60A',opacity:.15,filter:'blur(30px)'}}/>

      <div className="tr-app-bar">
        <button className="icon-btn" onClick={onBack}>‹</button>
        <div style={{fontWeight:700,fontSize:15,color:'white',letterSpacing:'-0.01em'}}>Recompensas diarias</div>
        <Pill icon="🪙" value={user.coins} bg="#FFD60A" fg="#0E0828" sm/>
      </div>

      <div className="pad" style={{paddingTop:8}}>
        <div style={{fontWeight:700,fontSize:11,color:'#FFD60A',letterSpacing:'.06em',textTransform:'uppercase'}}>Día {user.streakDays} de racha</div>
        <h1 style={{fontWeight:900,fontSize:26,color:'white',marginTop:4,letterSpacing:'-0.03em',lineHeight:1.1}}>3 cofres listos para abrir</h1>
      </div>

      {/* week strip */}
      <div className="pad" style={{marginTop:14}}>
        <div style={{display:'flex',gap:6,background:'rgba(255,255,255,0.08)',borderRadius:16,padding:10}}>
          {Array.from({length:7}).map((_,i)=>{
            const isToday = i===user.streakDays;
            const done = i<user.streakDays;
            return (
              <div key={i} style={{flex:1,textAlign:'center'}}>
                <div style={{
                  width:30,height:30,margin:'0 auto',borderRadius:10,
                  background: isToday ? '#FF6B35' : done ? '#FFD60A' : 'rgba(255,255,255,0.12)',
                  display:'flex',alignItems:'center',justifyContent:'center',
                  fontWeight:900,fontSize:11,color:done||isToday?'#0E0828':'#D6CFFA',
                  boxShadow: isToday ? '0 0 0 4px rgba(255,107,53,0.3)' : 'none'
                }}>
                  {i===6 ? '🎁' : done ? '✓' : i+1}
                </div>
                <div style={{fontWeight:600,fontSize:9,color:'#D6CFFA',marginTop:4}}>Día {i+1}</div>
              </div>
            );
          })}
        </div>
      </div>

      {/* chests */}
      <div className="pad" style={{marginTop:14,flex:1,overflow:'auto'}}>
        <div style={{display:'flex',flexDirection:'column',gap:10,paddingBottom:14}}>
          {chests.map((c,i)=>(
            <div key={c.tier} style={{
              background: opened[i] ? `linear-gradient(135deg, ${c.color}33, ${c.shadow}22)` : `linear-gradient(135deg, ${c.color}, ${c.shadow})`,
              borderRadius:20,padding:'14px 16px',
              display:'flex',alignItems:'center',gap:14,
              boxShadow: opened[i] ? 'inset 0 0 0 2px rgba(255,255,255,0.15)' : `0 6px 0 ${c.shadow}, inset 0 1px 0 rgba(255,255,255,0.3)`,
              transition:'all 300ms cubic-bezier(.34,1.56,.64,1)',
              transform: opened[i] ? 'scale(0.98)' : 'scale(1)'
            }}>
              <div style={{
                width:64,height:64,borderRadius:16,
                background: opened[i] ? 'rgba(255,255,255,0.1)' : 'rgba(14,8,40,0.25)',
                display:'flex',alignItems:'center',justifyContent:'center',
                fontSize:34,
                animation: !opened[i] ? 'tr-pulse 2s ease-in-out infinite' : 'none'
              }}>{opened[i] ? '✨' : c.big ? '🎁' : '📦'}</div>
              <div style={{flex:1,color: opened[i] ? 'white' : '#0E0828'}}>
                <div style={{fontWeight:700,fontSize:11,letterSpacing:'.06em',textTransform:'uppercase',opacity:.7}}>Cofre {c.name}</div>
                <div style={{fontWeight:900,fontSize:18,marginTop:2,letterSpacing:'-0.02em'}}>{opened[i] ? '¡Abierto!' : c.prize}</div>
                <div style={{fontWeight:600,fontSize:12,marginTop:2,opacity:.65}}>{opened[i] ? c.prize : 'Toca para reclamar'}</div>
              </div>
              {!opened[i] && (
                <button onClick={()=>open(i)} style={{
                  background:'#0E0828',color:'#FFD60A',border:'none',borderRadius:14,
                  padding:'10px 14px',fontWeight:900,fontSize:13,cursor:'pointer',
                  boxShadow:'0 4px 0 rgba(0,0,0,0.4)',letterSpacing:'-0.01em'
                }}>Abrir</button>
              )}
              {opened[i] && (
                <div style={{
                  background:'rgba(255,255,255,0.18)',color:'white',borderRadius:14,
                  padding:'8px 12px',fontWeight:800,fontSize:12,letterSpacing:'.04em',textTransform:'uppercase'
                }}>✓ Listo</div>
              )}
            </div>
          ))}
        </div>
      </div>

      <BottomNav active="home" onChange={(id)=>{
        if (id==='home') onBack();
        else if (id==='play') onBack();
        else if (id==='rank') onLeaderboard();
        else if (id==='me') onProfile();
      }}/>
    </div>
  );
};