// ─── LEADERBOARD view ─────────────────────────────────────────────────

const LeaderboardView = ({ user, totalUniqueSpots, totalVisits, onBack, onProfile, onClaim }) => {
  const t = useT();
  const plt = usePLT();
  const z = localStorage.getItem('helixZone') || 'la-paz';
  const cacheKey = `helixLB_${z}`;

  const [board, setBoard] = useState(() => {
    try { return JSON.parse(sessionStorage.getItem(cacheKey + '_board') || '[]'); } catch { return []; }
  });
  const [prize, setPrize] = useState(() => {
    try { return JSON.parse(sessionStorage.getItem(cacheKey + '_prize') || 'null'); } catch { return null; }
  });
  const [lastWinner, setLastWinner] = useState(() => {
    try { return JSON.parse(sessionStorage.getItem(cacheKey + '_winner') || 'null'); } catch { return null; }
  });
  const [loading, setLoading] = useState(() => !sessionStorage.getItem(cacheKey + '_board'));
  const [showPrizeModal, setShowPrizeModal] = useState(false);
  const sponsor = BUSINESSES?.find(b => b.id === prize?.sponsor_id);

  useEffect(() => {
    Promise.all([
      fetch(`${API}/prizes?zone=${z}`).then(r => r.json()).catch(() => null),
      fetch(`${API}/winners?zone=${z}`).then(r => r.json()).catch(() => null),
      fetch(`${API}/leaderboard?zone=${z}`).then(r => r.json()).catch(() => null),
    ]).then(([p, w, data]) => {
      if (p) {
        setPrize(p);
        try { sessionStorage.setItem(cacheKey + '_prize', JSON.stringify(p)); } catch {}
      }
      if (w && w.length > 0) {
        setLastWinner(w[0]);
        try { sessionStorage.setItem(cacheKey + '_winner', JSON.stringify(w[0])); } catch {}
      }
      if (data && data.length > 0) {
        const mapped = data.map((r, i) => ({
          rank: i + 1, name: r.name,
          uniqueSpots: r.unique_spots, totalVisits: r.total_visits,
          badge: i === 0 ? '🏆' : i === 1 ? '🥈' : i === 2 ? '🥉' : ''
        }));
        setBoard(mapped);
        try { sessionStorage.setItem(cacheKey + '_board', JSON.stringify(mapped)); } catch {}
      }
      setLoading(false);
    }).catch(() => setLoading(false));
  }, []);

  const userInTop = user && board.some(r => r.name.toLowerCase().startsWith(user.name.trim().toLowerCase().split(' ')[0]));
  const userRow = user
    ? { name: `${user.name.split(' ')[0]} (${t('lb_you').toLowerCase()})`, uniqueSpots: totalUniqueSpots, totalVisits, badge:'' }
    : null;

  if (loading && board.length === 0) {
    return (
      <div className="view-enter">
        <HeaderBar title={t('nav_ranking')} onBack={onBack} onProfile={onProfile}/>
        <div style={{ display:'flex', flexDirection:'column', alignItems:'center', justifyContent:'center', minHeight:320, gap:14, padding:40 }}>
          <div style={{
            width:36, height:36, borderRadius:'50%',
            border:'3px solid var(--fog)', borderTopColor:'var(--teal)',
            animation:'spin .75s linear infinite'
          }}/>
          <div style={{ fontSize:13, color:'var(--muted)', fontWeight:500 }}>{t('lb_loading') || 'Cargando ranking…'}</div>
        </div>
      </div>
    );
  }

  return (
    <div className="view-enter">
      <HeaderBar title={t('nav_ranking')} onBack={onBack} onProfile={onProfile}/>

      <div style={{ padding:'20px 24px 0' }}>
        <div className="label-eyebrow" style={{ marginBottom:4 }}>{prize ? `${t('lb_cycle_prefix')} ${plt(prize.cycle)}` : t('lb_active_month')}</div>
        <h2 className="h-section" style={{ fontSize:26, margin:'0 0 4px' }}>
          {t('lb_title_a')}<br/>{t('lb_title_b')}
        </h2>
        <p className="body-soft" style={{ fontSize:13.5, margin:'0 0 22px' }}>
          {t('lb_subtitle')} {ZONES.find(z => z.id === (localStorage.getItem('helixZone') || 'la-paz'))?.label || 'La Paz'}.
        </p>

        {lastWinner && (
          <div style={{
            background:'linear-gradient(135deg, #0F172A 0%, #1e293b 100%)',
            borderRadius:14, padding:'16px 18px', marginBottom:22,
            border:'1px solid rgba(13,148,136,0.3)',
            display:'flex', alignItems:'center', gap:14
          }}>
            <div style={{ fontSize:32 }}>👑</div>
            <div>
              <div className="label-eyebrow" style={{ color:'var(--cyan)', marginBottom:4 }}>{t('home_champion')} · {lastWinner.cycle}</div>
              <div style={{ fontWeight:800, fontSize:16, color:'white', letterSpacing:'-0.02em' }}>{lastWinner.user_name}</div>
              <div style={{ fontSize:12, color:'rgba(255,255,255,0.5)', marginTop:2 }}>{lastWinner.unique_spots} spots · {lastWinner.total_visits} {t('home_visits')}</div>
            </div>
          </div>
        )}

        {/* Podium for top 3 */}
        <div style={{
          display:'grid', gridTemplateColumns:'1fr 1.15fr 1fr',
          gap:8, alignItems:'end',
          marginBottom:22
        }}>
          {[board[1], board[0], board[2]].filter(Boolean).map((row, i) => {
            const heights = [88, 116, 72];
            const tags = [t('lb_silver'), t('lb_gold'), t('lb_bronze')];
            const colors  = ['#94a3b8','var(--teal)','#b45309'];
            return (
              <div key={row.rank} style={{ textAlign:'center' }}>
                <div style={{ fontSize:32, lineHeight:1, marginBottom:4 }}>{row.badge}</div>
                <div style={{
                  fontWeight:700, fontSize:13, letterSpacing:'-0.01em',
                  marginBottom:4,
                  whiteSpace:'nowrap', overflow:'hidden', textOverflow:'ellipsis'
                }}>{row.name}</div>
                <div style={{
                  fontSize:11, color:'var(--muted)', marginBottom:8,
                  fontWeight:500
                }}>{row.uniqueSpots} spots</div>
                <div style={{
                  background:'var(--fog)',
                  border:'1px solid rgba(15,23,42,0.06)',
                  borderTop: `3px solid ${colors[i]}`,
                  borderRadius:'10px 10px 4px 4px',
                  height:heights[i],
                  display:'flex', alignItems:'flex-start', justifyContent:'center',
                  padding:'10px 6px',
                  fontSize:24, fontWeight:900,
                  color:'var(--ink)', letterSpacing:'-0.02em',
                  fontVariantNumeric:'tabular-nums'
                }}>
                  {row.rank}
                </div>
                <div style={{
                  marginTop:4, fontSize:9.5, fontWeight:700,
                  letterSpacing:'.16em', textTransform:'uppercase',
                  color: colors[i]
                }}>{tags[i]}</div>
              </div>
            );
          })}
        </div>

        {/* Banner */}
        <div onClick={() => prize && setShowPrizeModal(true)} style={{
          marginBottom:22,
          background:'var(--ink)',
          color:'white',
          borderRadius:16,
          padding:'22px 22px 24px',
          position:'relative', overflow:'hidden',
          cursor: prize ? 'pointer' : 'default'
        }}>
          <div aria-hidden style={{
            position:'absolute', right:-40, top:-40,
            width:160, height:160, borderRadius:'50%',
            background:'rgba(13,148,136,0.22)'
          }}/>
          <div className="label-eyebrow" style={{ color:'var(--cyan)', marginBottom:10, opacity:1 }}>
            {t('lb_prize_eyebrow')}
          </div>
          <div style={{
            fontSize:20, fontWeight:800, letterSpacing:'-0.02em',
            lineHeight:1.2, marginBottom:8
          }}>
            {prize ? `${t('lb_prize_text')} ${plt(prize.title)}` : t('lb_prize_soon')}
          </div>
          <div style={{ fontSize:13, opacity:.75 }}>
            {prize ? plt(prize.description) : ''}
          </div>
          {prize && (
            <div style={{ marginTop:12, display:'flex', alignItems:'center', gap:6, fontSize:12, fontWeight:700, color:'var(--cyan)' }}>
              {t('prize_see_details')} <IconChevronRight size={13}/>
            </div>
          )}
        </div>

        {/* Full list */}
        <SectionLabel style={{ padding:0 }}>{t('lb_full_table')}</SectionLabel>
        <div style={{
          background:'var(--fog)',
          borderRadius:14,
          border:'1px solid rgba(15,23,42,0.06)',
          overflow:'hidden'
        }}>
          {board.slice(0, 10).map((row, idx) => (
            <div key={row.rank} style={{
              display:'grid', gridTemplateColumns:'40px 1fr auto',
              gap:12, alignItems:'center',
              padding:'14px 16px',
              borderBottom: idx < board.length - 1 ? '1px solid rgba(15,23,42,0.06)' : 'none'
            }}>
              <div style={{
                fontWeight:800, fontSize:16, color:'var(--ink)',
                fontVariantNumeric:'tabular-nums',
                display:'flex', alignItems:'center', gap:6
              }}>
                {row.badge ? <span style={{ fontSize:16 }}>{row.badge}</span> : (
                  <span style={{ color:'var(--muted)', fontWeight:700 }}>{row.rank}</span>
                )}
              </div>
              <div style={{ fontWeight:600, fontSize:14 }}>{row.name}</div>
              <div style={{
                fontVariantNumeric:'tabular-nums',
                fontSize:13, fontWeight:700, color:'var(--teal)'
              }}>{row.uniqueSpots} spots · {row.totalVisits} {t('home_visits')}</div>
            </div>
          ))}

          {/* User row if not in top */}
          {userRow && !userInTop && (
            <div style={{
              display:'grid', gridTemplateColumns:'40px 1fr auto',
              gap:12, alignItems:'center',
              padding:'14px 16px',
              background:'rgba(13,148,136,0.10)',
              borderLeft:'3px solid var(--teal)',
              borderTop:'1px solid rgba(15,23,42,0.06)'
            }}>
              <div style={{
                fontWeight:700, fontSize:13, color:'var(--teal)',
                letterSpacing:'.06em', textTransform:'uppercase'
              }}>{t('lb_you')}</div>
              <div style={{ fontWeight:700, fontSize:14 }}>{userRow.name}</div>
              <div style={{
                fontVariantNumeric:'tabular-nums',
                fontSize:13, fontWeight:700, color:'var(--teal)'
              }}>{userRow.uniqueSpots} spots · {userRow.totalVisits} {t('home_visits')}</div>
            </div>
          )}
        </div>
      </div>
    {showPrizeModal && prize && ReactDOM.createPortal(
        <div onClick={() => setShowPrizeModal(false)} style={{
          position:'fixed', inset:0, zIndex:999,
          background:'rgba(15,23,42,0.7)', backdropFilter:'blur(4px)',
          display:'flex', alignItems:'flex-end', justifyContent:'center',
          animation:'overlayIn .2s ease both'
        }}>
          <div onClick={e => e.stopPropagation()} style={{
            background:'var(--canvas)', borderRadius:'24px 24px 0 0',
            width:'100%', maxWidth:430, maxHeight:'85vh', overflowY:'auto',
            animation:'slideUp .3s cubic-bezier(.2,.8,.2,1) both'
          }}>
            <div onClick={() => setShowPrizeModal(false)} style={{ display:'flex', justifyContent:'center', padding:'14px 0 0', cursor:'pointer' }}>
              <div style={{ width:40, height:4, borderRadius:99, background:'rgba(15,23,42,0.12)' }}/>
            </div>
            {sponsor?.img_prize && (
              <div style={{
                height:200, borderRadius:'24px 24px 0 0', overflow:'hidden',
                background:`url(${sponsor.img_prize || sponsor.img}) center/cover no-repeat`
              }}/>
            )}
            <div style={{ padding:'24px 24px 40px' }}>
              <div className="label-eyebrow" style={{ color:'var(--teal)', marginBottom:8 }}>{t('home_prize_badge')}</div>
              <h2 className="h-section" style={{ fontSize:22, margin:'0 0 8px' }}>{plt(prize.title)}</h2>
              <div style={{ fontSize:13, color:'var(--teal)', fontWeight:700, marginBottom:12 }}>
                {t('prize_value')} ${Number(String(prize.value).replace(/[^0-9.]/g,'')).toLocaleString('es-MX')} MXN
              </div>
              <p className="body-soft" style={{ fontSize:15, fontWeight:500, margin:'0 0 16px' }}>{plt(prize.description)}</p>
              <p style={{ fontSize:12, color:'var(--muted)', margin:'0 0 20px' }}>{t('prize_date_note')}</p>
              {sponsor && (
                <button onClick={() => { setShowPrizeModal(false); onClaim(sponsor); }} style={{
                  width:'100%', background:'var(--teal)', color:'white',
                  border:0, borderRadius:14, padding:'14px',
                  fontSize:14, fontWeight:700, cursor:'pointer',
                  display:'flex', alignItems:'center', justifyContent:'center', gap:8
                }}>
                  {t('prize_meet')} {sponsor.name} <IconChevronRight size={16}/>
                </button>
              )}
            </div>
          </div>
        </div>,
        document.body
      )}
    </div>
  );
};

Object.assign(window, { LeaderboardView });