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

  var RANK_COLOR = function(i) { return ['var(--lime)','var(--violet)','var(--cyan)','var(--amber)','var(--text-dim)'][Math.min(i,4)]; };
  var ROLE_CHIP  = { citizen:'c-v', business:'c-l', government:'c-c' };
  var GRAD = ['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))','linear-gradient(135deg,var(--amber),var(--rose))'];

  function CommunityPage() {
    var _contributors = useState([]); var contributors = _contributors[0], setContributors = _contributors[1];
    var _loading      = useState(true); var loading = _loading[0], setLoading = _loading[1];
    var _filter       = useState('All'); var filter = _filter[0], setFilter = _filter[1];
    var _totalUsers   = useState(0);  var totalUsers = _totalUsers[0], setTotalUsers = _totalUsers[1];
    var _ceremony     = useState(0);  var ceremony = _ceremony[0], setCeremony = _ceremony[1];

    var replayCeremony = function() {
      window.CBSfx && window.CBSfx.play('whoosh');
      setCeremony(function(k) { return k + 1; });
    };

    useEffect(function() {
      window.ApiClient.get('/users/leaderboard').then(function(data) {
        if (Array.isArray(data)) {
          setContributors(data);
          setTotalUsers(data.length);
        }
        setLoading(false);
      }).catch(function(){ setLoading(false); });
    }, []);

    var ROLE_FILTERS = ['All','Citizen','Business','Government'];
    var filtered = contributors.filter(function(u) {
      if (filter === 'All') return true;
      return u.role === filter.toLowerCase();
    });

    var totalRep     = contributors.reduce(function(a,u){ return a+(u.reputation||0); }, 0);
    var topContrib   = contributors[0];
    var citizenCount = contributors.filter(function(u){ return u.role==='citizen'; }).length;

    var ACTIVITY = window.USER_ACTIVITY || [
      { msg:'West Square AR viewed 42 times', time:'2m ago', color:'var(--lime)'   },
      { msg:'New project submitted: Harbor Walk', time:'5m ago', color:'var(--violet)' },
      { msg:'$12K funded for Bike Path',          time:'9m ago', color:'var(--amber)'  },
      { msg:'Ava M. reached 9,500 reputation',    time:'14m ago',color:'var(--cyan)'   },
      { msg:'Tech District Plaza now live in AR',  time:'22m ago',color:'var(--lime)'   },
      { msg:'Green Corridor: 100 new backers',     time:'31m ago',color:'var(--amber)'  },
    ];

    return (
      <div className="user-screen">
        {/* Hero */}
        <div className="pg-hero">
          <button className="back-btn"
            onMouseEnter={function(){ document.body.classList.add('hov'); }}
            onMouseLeave={function(){ document.body.classList.remove('hov'); }}
            onClick={function(){ window.navigate('home'); }}>
            ← Back to Home
          </button>
          <div className="pg-eyebrow">The People</div>
          <h1 className="pg-title">Community</h1>
          <p className="pg-sub">Citizens, businesses, and governments building tomorrow's city — together.</p>
          <div className="stat-chips" style={{ marginTop:24 }}>
            <div className="stat-chip">
              <div className="stat-chip-val" style={{ color:'var(--violet)' }}>{totalRep > 1000 ? Math.round(totalRep/1000)+'K' : totalRep}</div>
              <div className="stat-chip-lbl">Total Rep Points</div>
            </div>
            <div className="stat-chip">
              <div className="stat-chip-val" style={{ color:'var(--lime)' }}>{totalUsers}</div>
              <div className="stat-chip-lbl">Contributors</div>
            </div>
            {topContrib && (
              <div className="stat-chip">
                <div className="stat-chip-val" style={{ color:'var(--amber)', fontSize:16, paddingTop:4 }}>
                  {topContrib.name.split(' ')[0]}
                </div>
                <div className="stat-chip-lbl">Top Contributor</div>
              </div>
            )}
            <div className="stat-chip">
              <div className="stat-chip-val" style={{ color:'var(--cyan)' }}>{citizenCount}</div>
              <div className="stat-chip-lbl">Citizens Active</div>
            </div>
          </div>
        </div>

        {/* Filters */}
        <div className="community-filter-wrap" style={{ padding:'24px 64px 0' }}>
          <div className="tab-bar">
            {ROLE_FILTERS.map(function(f) {
              return (
                <button key={f} className={'tab-btn'+(filter===f?' on':'')}
                  onMouseEnter={function(){ document.body.classList.add('hov'); }}
                  onMouseLeave={function(){ document.body.classList.remove('hov'); }}
                  onClick={function(){ setFilter(f); }}>
                  {f}
                </button>
              );
            })}
          </div>
        </div>

        {/* Main layout */}
        <div className="pg-body">
          <div className="community-pg-grid">
            {/* Leaderboard */}
            <div>
              <div style={{ display:'flex', justifyContent:'space-between', alignItems:'center', marginBottom:16, gap:12, flexWrap:'wrap' }}>
                <div style={{ fontFamily:'DM Mono,monospace', fontSize:9, letterSpacing:'.12em', textTransform:'uppercase', color:'var(--text-faint)' }}>
                  Top Contributors · Ranked by Reputation
                </div>
                <div style={{ display:'flex', alignItems:'center', gap:10 }}>
                  <button className="lb-replay" aria-label="Replay ranking ceremony" title="Replay ceremony"
                    onMouseEnter={function(){ document.body.classList.add('hov'); }}
                    onMouseLeave={function(){ document.body.classList.remove('hov'); }}
                    onClick={replayCeremony}>
                    <window.CBIcon name="refresh" size={14} />
                  </button>
                  <window.CBRewardChest />
                </div>
              </div>
              {loading && <div className="pg-empty"><window.CBIcon name="trophy" size={36} style={{ display:'block', margin:'0 auto 14px', color:'var(--amber)' }} />Loading contributors…</div>}

              {/* Podium — top 3 (full board view only). Keyed by ceremony
                  counter so Replay fully remounts and re-runs everything. */}
              <div key={'ceremony-' + ceremony}>
              {!loading && filter === 'All' && <window.CBPodium users={contributors} />}

              <div style={{ display:'flex', flexDirection:'column', gap:4 }}>
                {(function() {
                  var showPodium = !loading && filter === 'All' && contributors.length >= 3;
                  var rows = showPodium ? filtered.slice(3) : filtered;
                  var maxRep = contributors.length ? (contributors[0].reputation || 1) : 1;
                  var out = [];
                  rows.forEach(function(u, i) {
                    var nameParts = (u.name||'').split(' ');
                    var initials  = nameParts.map(function(n){ return n[0]||''; }).join('').slice(0,2).toUpperCase();
                    var grad      = GRAD[i % GRAD.length];
                    var globalRank = contributors.indexOf(u);
                    var repPct     = Math.max(6, Math.round(((u.reputation||0) / maxRep) * 100));

                    // Duolingo-style zone dividers (full board only)
                    if (showPodium && i === 0) {
                      out.push(<div key="zone-up" className="lb-zone lb-zone-up">Promotion Zone</div>);
                    }
                    if (showPodium && rows.length >= 4 && i === rows.length - 1) {
                      out.push(<div key="zone-down" className="lb-zone lb-zone-down">Demotion Zone</div>);
                    }

                    out.push(
                      <div key={u._id} className="community-lb-row"
                        style={{ opacity:0, animation:'row-in 0.5s var(--spring) '+(400 + i*80)+'ms forwards' }}
                        onMouseEnter={function(){ document.body.classList.add('hov'); }}
                        onMouseLeave={function(){ document.body.classList.remove('hov'); }}
                        onClick={function(){ window.navigate('profile', { userId: u._id }); }}>
                        <window.CBMedal rank={globalRank + 1} size={34} />
                        <div style={{ width:40, height:40, borderRadius:'50%', background:grad, display:'flex', alignItems:'center', justifyContent:'center', fontFamily:'DM Mono,monospace', fontSize:11, color:'var(--bg)', fontWeight:600, flexShrink:0 }}>{initials}</div>
                        <div style={{ flex:1, minWidth:0 }}>
                          <div style={{ fontSize:14, color:'var(--text)', fontWeight:500 }}>{u.name}</div>
                          <div style={{ fontFamily:'DM Mono,monospace', fontSize:9, color:'var(--text-faint)', marginTop:2 }}>
                            {u.projects&&u.projects.length||0} projects
                            {u.location&&u.location.district ? ' · '+u.location.district : ''}
                          </div>
                          <div className="lb-bar-track"><div className="lb-bar-fill" style={{ width: repPct + '%', animationDelay: (500 + i*80) + 'ms' }} /></div>
                        </div>
                        <span className={'chip '+(ROLE_CHIP[u.role]||'c-v')}>{u.role||'citizen'}</span>
                        <div style={{ fontFamily:'Bebas Neue,sans-serif', fontSize:22, color:RANK_COLOR(globalRank), minWidth:60, textAlign:'right' }}>
                          <window.CBCountUp value={u.reputation||0} delay={500 + i*80} />
                        </div>
                      </div>
                    );
                  });
                  return out;
                })()}
                {!loading && filtered.length === 0 && (
                  <div className="pg-empty"><window.CBIcon name="trophy" size={36} style={{ display:'block', margin:'0 auto 14px', color:'var(--amber)' }} />No contributors in this category</div>
                )}
              </div>
              </div>
            </div>

            {/* Right column — activity + stats */}
            <div style={{ display:'flex', flexDirection:'column', gap:16 }}>
              {/* Live activity */}
              <div style={{ background:'var(--bg-raised)', border:'1px solid var(--border)', borderRadius:16, overflow:'hidden' }}>
                <div style={{ padding:'16px 20px', borderBottom:'1px solid var(--border)', display:'flex', justifyContent:'space-between', alignItems:'center' }}>
                  <div style={{ fontFamily:'DM Mono,monospace', fontSize:10, letterSpacing:'.1em', textTransform:'uppercase', color:'var(--text-faint)' }}>Live Activity</div>
                  <div style={{ display:'flex', alignItems:'center', gap:6, fontFamily:'DM Mono,monospace', fontSize:9, color:'var(--lime)' }}>
                    <span className="live-dot" style={{ width:5, height:5 }} />LIVE
                  </div>
                </div>
                <div style={{ padding:'8px 16px 16px' }}>
                  {ACTIVITY.map(function(a, i) {
                    return (
                      <div key={i} style={{ display:'flex', alignItems:'flex-start', gap:10, padding:'10px 0', borderBottom: i < ACTIVITY.length-1 ? '1px solid var(--border)' : 'none' }}>
                        <div style={{ width:7, height:7, borderRadius:'50%', background:a.color, boxShadow:'0 0 6px '+a.color, flexShrink:0, marginTop:5 }} />
                        <div>
                          <div style={{ fontSize:13, color:'var(--text)' }}>{a.msg}</div>
                          <div style={{ fontFamily:'DM Mono,monospace', fontSize:9, color:'var(--text-faint)', marginTop:3 }}>{a.time}</div>
                        </div>
                      </div>
                    );
                  })}
                </div>
              </div>

              {/* CTA */}
              <div style={{ background:'linear-gradient(135deg, oklch(0.18 0.04 295 / 0.4), oklch(0.16 0.03 188 / 0.4))', border:'1px solid oklch(0.35 0.1 295 / 0.4)', borderRadius:16, padding:'24px 20px', textAlign:'center' }}>
                <div style={{ fontFamily:'Bebas Neue,sans-serif', fontSize:24, color:'var(--text)', marginBottom:8 }}>Join the Movement</div>
                <p style={{ fontFamily:'DM Mono,monospace', fontSize:10, color:'var(--text-faint)', lineHeight:1.6, marginBottom:16 }}>
                  Submit your city vision, earn reputation, and shape the places you love.
                </p>
                <button className="btn btn-v" style={{ margin:'0 auto', padding:'10px 24px', fontSize:11 }}
                  onMouseEnter={function(){ document.body.classList.add('hov'); }}
                  onMouseLeave={function(){ document.body.classList.remove('hov'); }}
                  onClick={function(){ window.navigate('submit'); }}>
                  <window.CBIcon name="camera" size={14} /> Submit a Project
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  }

  window.UserCommunityPage = CommunityPage;
})();