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

// ============== 8. Leaderboard ==============
window.LeaderboardScreen = function LeaderboardScreen({ user, onBack, onHome, onProfile }) {
  const [tab, setTab] = uS4('semana');
  const tabs = ['Hoy','Semana','Global'];

  const top3 = [
    {rank:2, name:'Mateo',   score:18420, initials:'MT', color:'#C0C0C0'},
    {rank:1, name:'Lucía',   score:21380, initials:'LC', color:'#FFD60A'},
    {rank:3, name:'Joaquín', score:16940, initials:'JQ', color:'#CD7F32'},
  ];
  const rest = [
    {rank:4, name:'Valentina', score:15120, initials:'VL', delta:'+2'},
    {rank:5, name:'Diego',     score:14380, initials:'DI', delta:'-1'},
    {rank:6, name:'Sofía',     score:13950, initials:'SF', delta:'+0'},
    {rank:7, name:'Camila',    score:13420, initials:'CL', delta:'+3', isMe:true},
    {rank:8, name:'Tomás',     score:12890, initials:'TM', delta:'-2'},
    {rank:9, name:'Isabella',  score:11760, initials:'IS', delta:'+1'},
    {rank:10,name:'Sebastián', score:10940, initials:'SB', delta:'+0'},
  ];

  return (
    <div className="tr-screen">
      <div style={{position:'absolute',top:-30,left:'50%',transform:'translateX(-50%)',width:340,height:340,borderRadius:999,background:'#FFD60A',opacity:.1,filter:'blur(40px)'}}/>

      <div className="tr-app-bar">
        <button className="icon-btn" onClick={onBack}>‹</button>
        <div style={{fontWeight:700,fontSize:15,color:'white',letterSpacing:'-0.01em'}}>Ranking</div>
        <button className="icon-btn">
          <svg width="18" height="18" viewBox="0 0 24 24" fill="none"><path d="M5 12h14M5 6h14M5 18h14" stroke="white" strokeWidth="2" strokeLinecap="round"/></svg>
        </button>
      </div>

      {/* segmented */}
      <div className="pad" style={{paddingTop:6}}>
        <div style={{display:'flex',background:'rgba(255,255,255,0.08)',borderRadius:14,padding:4,gap:2}}>
          {tabs.map(t=>{
            const id = t.toLowerCase();
            const active = tab===id;
            return (
              <button key={t} onClick={()=>setTab(id)} style={{
                flex:1,padding:'9px 0',border:'none',cursor:'pointer',
                background: active ? 'white' : 'transparent',
                color: active ? '#6C3BFF' : 'white',
                fontWeight: active ? 800 : 600, fontSize:13,
                borderRadius:11,letterSpacing:'-0.01em',
                boxShadow: active ? '0 2px 8px rgba(0,0,0,0.2)' : 'none',
                transition:'all 200ms'
              }}>{t}</button>
            );
          })}
        </div>
      </div>

      {/* podium */}
      <div className="pad" style={{marginTop:18,display:'flex',justifyContent:'center',alignItems:'flex-end',gap:12,height:180}}>
        {top3.map((p,i)=>{
          const heights = {1:140, 2:108, 3:88};
          return (
            <div key={p.rank} style={{flex:1,display:'flex',flexDirection:'column',alignItems:'center'}}>
              <div style={{
                width: p.rank===1 ? 64 : 52, height: p.rank===1 ? 64 : 52,
                borderRadius:999, background:p.color,
                display:'flex',alignItems:'center',justifyContent:'center',
                fontWeight:900,fontSize: p.rank===1 ? 22 : 18, color:'#0E0828',
                boxShadow:`0 0 0 4px ${p.color}55, 0 6px 0 rgba(0,0,0,0.2)`,
                marginBottom:6,
                animation: p.rank===1 ? 'tr-float 2.5s ease-in-out infinite' : 'none'
              }}>{p.initials}</div>
              {p.rank===1 && <div style={{fontSize:18,marginTop:-32,marginBottom:4,zIndex:1}}>👑</div>}
              <div style={{fontWeight:800,fontSize:13,color:'white',letterSpacing:'-0.01em'}}>{p.name}</div>
              <div style={{fontWeight:700,fontSize:11,color:'#FFD60A',marginTop:1,fontVariantNumeric:'tabular-nums'}}>{p.score.toLocaleString('es-ES')}</div>
              <div style={{
                width:'100%',marginTop:8,height:heights[p.rank],
                background: `linear-gradient(180deg, ${p.color} 0%, ${p.color}44 100%)`,
                borderRadius:'14px 14px 0 0',
                display:'flex',alignItems:'flex-start',justifyContent:'center',paddingTop:10,
                boxShadow:`inset 0 0 0 2px ${p.color}88`
              }}>
                <div style={{fontWeight:900,fontSize:28,color:p.rank===1?'#0E0828':'rgba(14,8,40,0.6)',letterSpacing:'-0.05em'}}>{p.rank}</div>
              </div>
            </div>
          );
        })}
      </div>

      {/* list */}
      <div className="pad" style={{marginTop:6,flex:1,overflow:'auto',paddingBottom:0}}>
        <div style={{display:'flex',flexDirection:'column',gap:6}}>
          {rest.map(p=>(
            <div key={p.rank} style={{
              background: p.isMe ? '#FFD60A' : 'rgba(255,255,255,0.08)',
              borderRadius:16,padding:'10px 14px',
              display:'flex',alignItems:'center',gap:12,
              boxShadow: p.isMe ? '0 4px 0 #E6B800, 0 0 0 2px #FF6B35' : 'inset 0 0 0 1px rgba(255,255,255,0.06)',
              color: p.isMe ? '#0E0828' : 'white'
            }}>
              <div style={{width:28,fontWeight:900,fontSize:15,color:p.isMe?'#0E0828':'#D6CFFA',fontVariantNumeric:'tabular-nums',letterSpacing:'-0.02em'}}>{p.rank}</div>
              <div style={{
                width:40,height:40,borderRadius:999,
                background: p.isMe ? '#0E0828' : 'rgba(255,255,255,0.18)',
                color: p.isMe ? '#FFD60A' : 'white',
                display:'flex',alignItems:'center',justifyContent:'center',
                fontWeight:800,fontSize:14
              }}>{p.initials}</div>
              <div style={{flex:1}}>
                <div style={{fontWeight:800,fontSize:14,letterSpacing:'-0.01em'}}>{p.name}{p.isMe&&' (tú)'}</div>
                <div style={{fontWeight:600,fontSize:11,opacity:.7,fontVariantNumeric:'tabular-nums'}}>{p.score.toLocaleString('es-ES')} pts</div>
              </div>
              <div style={{
                fontWeight:800,fontSize:11,
                color: p.delta.startsWith('+') ? (p.isMe?'#00B886':'#00E5A8') : p.delta.startsWith('-') ? (p.isMe?'#E12C6F':'#FF4D8D') : (p.isMe?'rgba(14,8,40,0.5)':'#D6CFFA'),
                background: p.isMe ? 'rgba(14,8,40,0.08)' : 'rgba(255,255,255,0.08)',
                borderRadius:8,padding:'4px 8px',
                fontVariantNumeric:'tabular-nums',
                letterSpacing:'-0.01em'
              }}>{p.delta}</div>
            </div>
          ))}
        </div>
      </div>

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

// ============== 9. Profile ==============
window.ProfileScreen = function ProfileScreen({ user, onBack, onHome, onLeaderboard }) {
  const badges = [
    {emoji:'🔥', label:'Racha 7',   earned:true},
    {emoji:'⚡', label:'Velocista', earned:true},
    {emoji:'🎯', label:'Sin fallar',earned:true},
    {emoji:'🏆', label:'Top 10',    earned:true},
    {emoji:'📚', label:'Sabio',     earned:false},
    {emoji:'💎', label:'Coleccionista', earned:false},
  ];

  const categoryStats = [
    {cat:'Historia',  acc:84, color:'#FFD60A'},
    {cat:'Ciencia',   acc:78, color:'#00E5A8'},
    {cat:'Geografía', acc:72, color:'#8E66FF'},
    {cat:'Música',    acc:65, color:'#38BDF8'},
  ];

  return (
    <div className="tr-screen">
      <div style={{position:'absolute',top:0,left:0,right:0,height:200,background:'linear-gradient(180deg,#FF4D8D 0%, transparent 100%)',opacity:.4}}/>

      <div className="tr-app-bar">
        <button className="icon-btn" onClick={onBack}>‹</button>
        <div style={{fontWeight:700,fontSize:15,color:'white',letterSpacing:'-0.01em'}}>Mi perfil</div>
        <button className="icon-btn">
          <svg width="18" height="18" viewBox="0 0 24 24" fill="none"><circle cx="12" cy="12" r="3" stroke="white" strokeWidth="2"/><path d="M12 1v4M12 19v4M4.2 4.2l2.8 2.8M17 17l2.8 2.8M1 12h4M19 12h4M4.2 19.8L7 17M17 7l2.8-2.8" stroke="white" strokeWidth="2" strokeLinecap="round"/></svg>
        </button>
      </div>

      {/* avatar + name */}
      <div style={{display:'flex',flexDirection:'column',alignItems:'center',padding:'10px 24px 0',position:'relative'}}>
        <div style={{
          width:96,height:96,borderRadius:999,
          background:'linear-gradient(135deg,#FFD60A,#FF6B35)',
          display:'flex',alignItems:'center',justifyContent:'center',
          fontWeight:900,fontSize:38,color:'#0E0828',
          boxShadow:'0 0 0 5px white, 0 8px 24px -6px rgba(255,107,53,0.6)',
          letterSpacing:'-0.02em'
        }}>{user.initials}</div>
        <div style={{fontWeight:900,fontSize:24,color:'white',marginTop:12,letterSpacing:'-0.03em'}}>{user.name} López</div>
        <div style={{display:'flex',alignItems:'center',gap:8,marginTop:4}}>
          <div style={{background:'#6C3BFF',color:'white',borderRadius:999,padding:'3px 10px',fontWeight:800,fontSize:11,letterSpacing:'.04em',textTransform:'uppercase'}}>Nivel {user.level}</div>
          <div style={{fontWeight:600,fontSize:12,color:'#D6CFFA'}}>· Ranking #{user.rank}</div>
        </div>
      </div>

      {/* stats row */}
      <div className="pad" style={{marginTop:18,display:'grid',gridTemplateColumns:'1fr 1fr 1fr',gap:8}}>
        <ProfileStat icon="🎮" label="Partidas" value={user.totalGames}/>
        <ProfileStat icon="🔥" label="Mejor racha" value={user.bestStreak}/>
        <ProfileStat icon="🎯" label="Aciertos" value={`${user.accuracy}%`}/>
      </div>

      {/* tabs / sections */}
      <div className="pad" style={{marginTop:14,flex:1,overflow:'auto'}}>
        <div style={{paddingBottom:14}}>
          {/* Badges */}
          <div style={{display:'flex',justifyContent:'space-between',alignItems:'baseline'}}>
            <div style={{fontWeight:700,fontSize:11,color:'#D6CFFA',letterSpacing:'.06em',textTransform:'uppercase'}}>Logros</div>
            <div style={{fontWeight:700,fontSize:11,color:'#FFD60A'}}>4 / 6</div>
          </div>
          <div style={{display:'grid',gridTemplateColumns:'repeat(6,1fr)',gap:6,marginTop:8}}>
            {badges.map(b=>(
              <div key={b.label} style={{
                aspectRatio:'1',
                background: b.earned ? 'rgba(255,214,10,0.18)' : 'rgba(255,255,255,0.05)',
                borderRadius:14,
                display:'flex',flexDirection:'column',alignItems:'center',justifyContent:'center',
                opacity: b.earned ? 1 : 0.4,
                boxShadow: b.earned ? 'inset 0 0 0 1.5px #FFD60A' : 'inset 0 0 0 1px rgba(255,255,255,0.08)',
                filter: b.earned ? 'none' : 'grayscale(1)'
              }}>
                <div style={{fontSize:22}}>{b.emoji}</div>
              </div>
            ))}
          </div>

          {/* Category accuracy */}
          <div style={{marginTop:18}}>
            <div style={{fontWeight:700,fontSize:11,color:'#D6CFFA',letterSpacing:'.06em',textTransform:'uppercase'}}>Aciertos por categoría</div>
            <div style={{display:'flex',flexDirection:'column',gap:8,marginTop:8}}>
              {categoryStats.map(s=>(
                <div key={s.cat}>
                  <div style={{display:'flex',justifyContent:'space-between',marginBottom:4}}>
                    <div style={{fontWeight:700,fontSize:13,color:'white',letterSpacing:'-0.01em'}}>{s.cat}</div>
                    <div style={{fontWeight:800,fontSize:13,color:s.color,fontVariantNumeric:'tabular-nums'}}>{s.acc}%</div>
                  </div>
                  <div style={{height:8,background:'rgba(255,255,255,0.1)',borderRadius:999,overflow:'hidden'}}>
                    <div style={{height:'100%',width:`${s.acc}%`,background:s.color,borderRadius:999,boxShadow:`0 0 8px ${s.color}66`}}/>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>

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

function ProfileStat({icon,label,value}) {
  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.06)'}}>
      <div style={{fontSize:18}}>{icon}</div>
      <div style={{fontWeight:900,fontSize:18,color:'white',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>
  );
}