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

  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))'];
  var ROLE_CHIP = { citizen:'c-v', business:'c-l', government:'c-c' };

  function ProfilePage() {
    var params = window.UserRouter.getParams();
    var userId = params.userId;

    var _user     = useState(null);  var user = _user[0], setUser = _user[1];
    var _loading  = useState(true);  var loading = _loading[0], setLoading = _loading[1];
    var _projects = useState([]);    var projects = _projects[0], setProjects = _projects[1];

    useEffect(function() {
      if (!userId) { window.navigate('community'); return; }
      window.ApiClient.get('/users/'+userId).then(function(u) {
        setUser(u);
        setLoading(false);
        if (u.projects && u.projects.length) {
          // fetch a few projects by this user
          window.ApiClient.get('/projects?limit=6').then(function(d) {
            // filter client-side for now
            var byUser = (d.projects||[]).filter(function(p){ return p.submittedBy && p.submittedBy._id === userId; });
            setProjects(byUser);
          }).catch(function(){});
        }
      }).catch(function(){ setLoading(false); window.navigate('community'); });
    }, [userId]);

    if (loading) {
      return (
        <div className="user-screen">
          <div style={{ padding:'80px 64px', textAlign:'center', fontFamily:'DM Mono,monospace', fontSize:11, color:'var(--text-faint)', letterSpacing:'.1em' }}>LOADING PROFILE…</div>
        </div>
      );
    }
    if (!user) return null;

    var nameParts = (user.name||'').split(' ');
    var initials  = nameParts.map(function(n){ return n[0]||''; }).join('').slice(0,2).toUpperCase();
    var grad      = GRAD[user.name ? user.name.charCodeAt(0) % GRAD.length : 0];

    return (
      <div className="user-screen">
        <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.navBack(); }}>
            ← Back to Community
          </button>

          <div style={{ display:'flex', alignItems:'center', gap:20, marginBottom:16 }}>
            <div style={{ width:72, height:72, borderRadius:'50%', background:grad, display:'flex', alignItems:'center', justifyContent:'center', fontFamily:'DM Mono,monospace', fontSize:22, color:'var(--bg)', fontWeight:600, flexShrink:0 }}>{initials}</div>
            <div>
              <div style={{ display:'flex', alignItems:'center', gap:10, marginBottom:6 }}>
                <h1 style={{ fontFamily:'Bebas Neue,sans-serif', fontSize:40, letterSpacing:'.03em', color:'var(--text)', margin:0 }}>{user.name}</h1>
                <span className={'chip '+(ROLE_CHIP[user.role]||'c-v')}>{user.role||'citizen'}</span>
                {user.isVerified && <span className="chip c-c">✓ Verified</span>}
              </div>
              <div style={{ fontFamily:'DM Mono,monospace', fontSize:10, color:'var(--text-faint)' }}>
                {user.location&&user.location.district||'—'}
                {user.email ? ' · '+user.email : ''}
              </div>
            </div>
          </div>

          <div className="stat-chips">
            <div className="stat-chip">
              <div className="stat-chip-val" style={{ color:'var(--violet)' }}>{(user.reputation||0).toLocaleString()}</div>
              <div className="stat-chip-lbl">Reputation</div>
            </div>
            <div className="stat-chip">
              <div className="stat-chip-val" style={{ color:'var(--lime)' }}>{user.projects&&user.projects.length||0}</div>
              <div className="stat-chip-lbl">Projects</div>
            </div>
            {user.createdAt && (
              <div className="stat-chip">
                <div className="stat-chip-val" style={{ color:'var(--amber)', fontSize:14, paddingTop:6 }}>
                  {new Date(user.createdAt).toLocaleDateString('en', { month:'short', year:'numeric' })}
                </div>
                <div className="stat-chip-lbl">Member Since</div>
              </div>
            )}
          </div>
        </div>

        <div className="pg-body">
          {projects.length > 0 && (
            <div>
              <div style={{ fontFamily:'DM Mono,monospace', fontSize:9, letterSpacing:'.12em', textTransform:'uppercase', color:'var(--text-faint)', marginBottom:16 }}>Submitted Projects</div>
              <div className="projects-pg-grid">
                {projects.map(function(p, i) {
                  var raised = p.funding&&p.funding.raised||0;
                  var goal   = p.funding&&p.funding.goal||1;
                  var pct    = Math.min(100, Math.round((raised/goal)*100));
                  return (
                    <div key={p._id} className="proj-card"
                      style={{ opacity:0, animation:'slide-in-left 0.35s var(--spring) '+(i*40)+'ms forwards', cursor:'none' }}
                      onMouseEnter={function(){ document.body.classList.add('hov'); }}
                      onMouseLeave={function(){ document.body.classList.remove('hov'); }}
                      onClick={function(){ window.navigate('project-detail', { id:p._id }); }}>
                      <div className="proj-thumb">
                        <div style={{ fontSize:72 }}>🏗</div>
                        <div className="proj-thumb-overlay" />
                        <div className="proj-ar-hover"><span>→</span> View Detail</div>
                      </div>
                      <div className="proj-body">
                        <div className="proj-title">{p.title}</div>
                        <div className="proj-loc">📍 {p.location&&p.location.district||'—'}</div>
                        <div className="proj-bar">
                          <div style={{ height:4, background:'var(--bg-float)', borderRadius:2, marginTop:8 }}>
                            <div style={{ height:'100%', width:pct+'%', background:'linear-gradient(90deg,var(--violet),var(--cyan))', borderRadius:2 }} />
                          </div>
                        </div>
                        <div className="proj-meta">
                          <div style={{ fontFamily:'DM Mono,monospace', fontSize:10, color:'var(--lime)' }}>${Math.round(raised/1000)}K</div>
                          <div style={{ fontFamily:'DM Mono,monospace', fontSize:10, color:'var(--text-faint)' }}>👁 {(p.ar&&p.ar.views||0).toLocaleString()}</div>
                        </div>
                      </div>
                    </div>
                  );
                })}
              </div>
            </div>
          )}
          {!loading && projects.length === 0 && (
            <div className="pg-empty">
              <span className="pg-empty-icon">📋</span>
              No submitted projects yet
            </div>
          )}
        </div>
      </div>
    );
  }

  window.UserProfilePage = ProfilePage;
})();