(function() {
  var useRef    = React.useRef;
  var useState  = React.useState;
  var useEffect = React.useEffect;

  var RANK_COLOR = function(i) { return ['var(--lime)','var(--violet)','var(--cyan)','var(--text-dim)'][Math.min(i,3)]; };
  var CHIP_TYPE  = { citizen:'c-v', business:'c-l', government:'c-c' };

  function apiToContrib(u, i) {
    var nameParts = (u.name||'').split(' ');
    var initials  = nameParts.map(function(n){ return n[0]||''; }).join('').slice(0,2).toUpperCase();
    var colors    = ['linear-gradient(135deg,var(--violet),var(--cyan))','linear-gradient(135deg,var(--lime),var(--cyan))','linear-gradient(135deg,var(--amber),var(--lime))','linear-gradient(135deg,var(--rose),var(--violet))','linear-gradient(135deg,var(--cyan),var(--violet))'];
    return {
      _id:      u._id,
      name:     u.name,
      initials: initials,
      projects: u.projects ? u.projects.length : 0,
      location: (u.location && u.location.district) || '—',
      type:     u.role || 'citizen',
      rep:      u.reputation || 0,
      color:    colors[i % colors.length],
    };
  }

  function Community() {
    var ref = useRef(null);
    window.useReveal(ref);

    var _contributors = useState((window.USER_CONTRIBUTORS||[]).slice(0,5));
    var contributors = _contributors[0], setContributors = _contributors[1];
    var _stats = useState({ totalRep:84290, activeWeek:12480 });
    var communityStats = _stats[0], setCommunityStats = _stats[1];

    useEffect(function() {
      if (!window.ApiClient) return;
      window.ApiClient.get('/users/leaderboard').then(function(data) {
        if (Array.isArray(data) && data.length) {
          setContributors(data.slice(0,5).map(apiToContrib));
          var totalRep = data.reduce(function(a,u){ return a+(u.reputation||0); }, 0);
          setCommunityStats({ totalRep:totalRep, activeWeek:data.length*30 });
        }
      }).catch(function(){});
    }, []);

    return (
      <div ref={ref} style={{ background:'var(--bg-mid)', borderTop:'1px solid var(--border)', borderBottom:'1px solid var(--border)' }}>
        <div className="section">
          <div style={{ textAlign:'center', marginBottom:64 }}>
            <div className="eyebrow reveal" style={{ justifyContent:'center' }}>Community</div>
            <h2 className="heading-lg reveal rd1">People Building<br /><span className="gradient-text">Tomorrow's City</span></h2>
          </div>

          <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:32 }}>
            {/* Leaderboard */}
            <window.UserHoverCard className="reveal rd1" style={{ padding:0 }}>
              <div style={{ padding:'20px 24px', borderBottom:'1px solid var(--border)', display:'flex', justifyContent:'space-between', alignItems:'center' }}>
                <div style={{ fontFamily:'DM Mono,monospace', fontSize:10, letterSpacing:'.12em', textTransform:'uppercase', color:'var(--text-faint)' }}>Top Contributors · This Month</div>
                <span className="chip c-v" style={{ cursor:'none' }}
                  onMouseEnter={function(){ document.body.classList.add('hov'); }}
                  onMouseLeave={function(){ document.body.classList.remove('hov'); }}
                  onClick={function(){ window.navigate('community'); }}>
                  Full Board →
                </span>
              </div>
              <div style={{ padding:'8px 8px' }}>
                {contributors.map(function(c, i) {
                  return (
                    <div key={c.name} className="contrib-row"
                      onMouseEnter={function(){ document.body.classList.add('hov'); }}
                      onMouseLeave={function(){ document.body.classList.remove('hov'); }}
                      onClick={function(){ window.navigate('profile', { userId: c._id }); }}
                      style={{ cursor:'none', opacity:0, animation:'row-in .5s var(--spring) '+(i*110)+'ms forwards' }}>
                      <window.CBMedal rank={i+1} size={30} />
                      <div className="cr-avatar" style={{ background:c.color }}>{c.initials}</div>
                      <div>
                        <div className="cr-name">{c.name}</div>
                        <div className="cr-stat">{c.projects} projects · {c.location} · <span className={'chip '+(CHIP_TYPE[c.type]||'c-v')} style={{ fontSize:9, padding:'1px 7px' }}>{c.type}</span></div>
                      </div>
                      <div className="cr-rep" style={{ color:RANK_COLOR(i) }}><window.CBCountUp value={c.rep} delay={300 + i*110} /></div>
                    </div>
                  );
                })}
              </div>
            </window.UserHoverCard>

            {/* Activity feed */}
            <div className="reveal rd2">
              <window.UserHoverCard style={{ padding:0 }}>
                <div style={{ padding:'20px 24px', borderBottom:'1px solid var(--border)', display:'flex', justifyContent:'space-between', alignItems:'center' }}>
                  <div style={{ fontFamily:'DM Mono,monospace', fontSize:10, letterSpacing:'.12em', textTransform:'uppercase', color:'var(--text-faint)' }}>Live Platform Activity</div>
                  <div style={{ display:'flex', alignItems:'center', gap:7, fontFamily:'DM Mono,monospace', fontSize:9, color:'var(--lime)' }}>
                    <span className="live-dot" style={{ width:5, height:5 }} />LIVE
                  </div>
                </div>
                <div style={{ padding:'4px 20px 16px' }}>
                  {window.USER_ACTIVITY.map(function(a, i) {
                    return (
                      <div key={i} className="act-item">
                        <div className="act-dot" style={{ background:a.color, boxShadow:'0 0 7px '+a.color }} />
                        <div>
                          <div className="act-text">{a.msg}</div>
                          <div className="act-time">{a.time}</div>
                        </div>
                      </div>
                    );
                  })}
                </div>
              </window.UserHoverCard>

              <div style={{ marginTop:16, display:'grid', gridTemplateColumns:'1fr 1fr', gap:12 }}>
                <window.UserHoverCard style={{ padding:'16px 20px', cursor:'none' }}
                  onMouseEnter={function(){ document.body.classList.add('hov'); }}
                  onMouseLeave={function(){ document.body.classList.remove('hov'); }}
                  onClick={function(){ window.navigate('community'); }}>
                  <div style={{ fontFamily:'DM Mono,monospace', fontSize:9, letterSpacing:'.12em', textTransform:'uppercase', color:'var(--violet)', marginBottom:8 }}>Total Rep Points</div>
                  <div style={{ fontFamily:'Bebas Neue,sans-serif', fontSize:32, letterSpacing:'.02em', color:'var(--text)' }}>
                    {communityStats.totalRep > 1000 ? Math.round(communityStats.totalRep/1000)+'K' : communityStats.totalRep}
                  </div>
                </window.UserHoverCard>
                <window.UserHoverCard style={{ padding:'16px 20px', cursor:'none' }}
                  onMouseEnter={function(){ document.body.classList.add('hov'); }}
                  onMouseLeave={function(){ document.body.classList.remove('hov'); }}
                  onClick={function(){ window.navigate('submit'); }}>
                  <div style={{ fontFamily:'DM Mono,monospace', fontSize:9, letterSpacing:'.12em', textTransform:'uppercase', color:'var(--lime)', marginBottom:8 }}>Submit a Project</div>
                  <div style={{ fontFamily:'Bebas Neue,sans-serif', fontSize:32, letterSpacing:'.02em', color:'var(--text)' }}>Join →</div>
                </window.UserHoverCard>
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  }

  window.UserCommunity = Community;
})();