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

  var FILTERS  = ['All','Live in AR','Completed','Pending','In Review','AI Processing'];
  var SORTS    = [
    { val:'-ar.views',       label:'Most Viewed'  },
    { val:'-funding.raised', label:'Most Funded'  },
    { val:'-createdAt',      label:'Newest First' },
    { val:'aiScore',         label:'AI Score'     },
  ];
  var STATUS_LABEL = { live:'Live in AR', completed:'Completed', pending:'Pending', in_review:'In Review', ar_processing:'AI Processing', archived:'Archived' };
  var STAGE_CLASS  = { live:'c-l', completed:'c-c', pending:'c-r', in_review:'c-a', ar_processing:'c-v' };
  var FILL = ['linear-gradient(90deg,var(--violet),var(--cyan))','linear-gradient(90deg,var(--lime),var(--cyan))','linear-gradient(90deg,var(--amber),var(--lime))','linear-gradient(90deg,var(--cyan),var(--violet))','linear-gradient(90deg,var(--rose),var(--violet))'];
  var EMOJIS = ['🏙','🌳','🚲','🏗','🎭','🌿','🏛','💡','🛤','🎪','🌁','🏞','🏟','🌉','🎡'];

  function ProjectCard(props) {
    var p = props.project, i = props.index;
    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));
    var emoji  = EMOJIS[i % EMOJIS.length];
    var fill   = FILL[i % FILL.length];
    var stageLabel = STATUS_LABEL[p.status] || p.status || 'Pending';
    var stageClass = STAGE_CLASS[p.status]  || 'c-r';

    return (
      <div className="proj-card"
        style={{ opacity:0, animation:'slide-in-left 0.35s var(--spring) '+(i*30)+'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, zIndex:0 }}>{emoji}</div>
          <div className="proj-thumb-overlay" />
          <div className="proj-ar-hover"><span>→</span> View Detail</div>
          <div className="proj-stage-badge"><span className={'chip '+stageClass}>{stageLabel}</span></div>
        </div>
        <div className="proj-body">
          <div className="proj-title">{p.title}</div>
          <div className="proj-loc">📍 {p.location&&p.location.district||'—'} · <span className={'chip '+(p.submittedBy&&p.submittedBy.role==='government'?'c-c':p.submittedBy&&p.submittedBy.role==='business'?'c-l':'c-v')} style={{ fontSize:9, padding:'2px 7px' }}>{p.submittedBy&&p.submittedBy.role||'citizen'}</span></div>
          <div className="proj-bar">
            <div style={{ display:'flex', justifyContent:'space-between', marginBottom:5, fontFamily:'DM Mono,monospace', fontSize:9, color:'var(--text-faint)' }}>
              <span>{pct}% funded</span><span>${Math.round(goal/1000)}K goal</span>
            </div>
            <div className="proj-bar-track">
              <div className="proj-bar-fill" style={{ width:pct+'%', background:fill }} />
            </div>
          </div>
          <div className="proj-meta">
            <div className="proj-funded" style={{ color:'var(--lime)' }}>${Math.round(raised/1000)}K</div>
            <div className="proj-views">👁 {(p.ar&&p.ar.views||0).toLocaleString()} views</div>
          </div>
        </div>
      </div>
    );
  }

  function ProjectsPage() {
    var initFilter = (window.UserRouter.getParams().filter) || 'All';
    var _filter = useState(initFilter === 'live' ? 'Live in AR' : initFilter);
    var filter = _filter[0], setFilter = _filter[1];
    var _sort   = useState('-ar.views'); var sort = _sort[0], setSort = _sort[1];
    var _search = useState('');          var search = _search[0], setSearch = _search[1];
    var _projects = useState([]);        var projects = _projects[0], setProjects = _projects[1];
    var _loading  = useState(true);      var loading = _loading[0],  setLoading  = _loading[1];
    var _total    = useState(0);         var total = _total[0], setTotal = _total[1];
    var _page     = useState(1);         var page = _page[0],   setPage  = _page[1];

    useEffect(function() {
      setLoading(true);
      var qs = '/projects?limit=50&sort='+sort;
      window.ApiClient.get(qs).then(function(d) {
        setProjects(d.projects || []);
        setTotal(d.total || 0);
        setLoading(false);
      }).catch(function(){ setLoading(false); });
    }, [sort]);

    var STATUS_FOR_FILTER = { 'Live in AR':'live', 'Completed':'completed', 'Pending':'pending', 'In Review':'in_review', 'AI Processing':'ar_processing' };
    var filtered = projects.filter(function(p) {
      var matchFilter = filter === 'All' || p.status === STATUS_FOR_FILTER[filter];
      var q = search.trim().toLowerCase();
      var matchSearch = !q || (p.title||'').toLowerCase().includes(q) || (p.location&&p.location.district||'').toLowerCase().includes(q);
      return matchFilter && matchSearch;
    });

    var liveCount = projects.filter(function(p){ return p.status==='live'; }).length;
    var totalRaised = projects.reduce(function(a,p){ return a+(p.funding&&p.funding.raised||0); }, 0);

    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">Civic AR Platform</div>
          <h1 className="pg-title">Explore Projects</h1>
          <p className="pg-sub">Browse all city improvement proposals — live in AR, funded by the community.</p>

          {/* Stats chips */}
          <div className="stat-chips" style={{ marginTop:24 }}>
            <div className="stat-chip">
              <div className="stat-chip-val" style={{ color:'var(--violet)' }}>{total}</div>
              <div className="stat-chip-lbl">Total Projects</div>
            </div>
            <div className="stat-chip">
              <div className="stat-chip-val" style={{ color:'var(--lime)' }}>{liveCount}</div>
              <div className="stat-chip-lbl">Live in AR</div>
            </div>
            <div className="stat-chip">
              <div className="stat-chip-val" style={{ color:'var(--amber)' }}>${Math.round(totalRaised/1000)}K</div>
              <div className="stat-chip-lbl">Total Raised</div>
            </div>
          </div>
        </div>

        {/* Controls */}
        <div className="community-filter-wrap" style={{ padding:'24px 64px 0', display:'flex', alignItems:'center', gap:16, flexWrap:'wrap' }}>
          <div className="pg-search">
            <span className="pg-search-icon">🔍</span>
            <input placeholder="Search projects or districts…" value={search}
              onChange={function(e){ setSearch(e.target.value); }}
              onMouseEnter={function(){ document.body.classList.add('hov'); }}
              onMouseLeave={function(){ document.body.classList.remove('hov'); }}
            />
          </div>
          <div className="tab-bar">
            {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>
          <select value={sort} onChange={function(e){ setSort(e.target.value); }}
            style={{ fontFamily:'DM Mono,monospace', fontSize:10, padding:'7px 12px', background:'var(--bg-raised)', border:'1px solid var(--border)', borderRadius:8, color:'var(--text-dim)', cursor:'none', outline:'none' }}>
            {SORTS.map(function(s){ return <option key={s.val} value={s.val}>{s.label}</option>; })}
          </select>
        </div>

        {/* Grid */}
        <div className="pg-body">
          {loading && (
            <div style={{ textAlign:'center', padding:'60px 0', fontFamily:'DM Mono,monospace', fontSize:11, letterSpacing:'.1em', color:'var(--text-faint)' }}>LOADING PROJECTS…</div>
          )}
          {!loading && filtered.length === 0 && (
            <div className="pg-empty">
              <span className="pg-empty-icon">🔍</span>
              No projects match your filters
            </div>
          )}
          <div className="projects-pg-grid">
            {filtered.map(function(p, i){ return <ProjectCard key={p._id} project={p} index={i} />; })}
          </div>
        </div>
      </div>
    );
  }

  window.UserProjectsPage = ProjectsPage;
})();