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

  var FILTERS = ['All','Near Goal','Just Started','Fully Funded'];
  var EMOJIS  = ['🏙','🌳','🚲','🏗','🎭','🌿','🏛','💡','🛤','🎪','🌁','🏞'];
  var FILLS   = ['linear-gradient(90deg,var(--lime),var(--cyan))','linear-gradient(90deg,var(--violet),var(--cyan))','linear-gradient(90deg,var(--amber),var(--lime))','linear-gradient(90deg,var(--cyan),var(--violet))'];

  function FundModal(props) {
    var project = props.project, onClose = props.onClose, onSuccess = props.onSuccess;
    var raised  = project.funding && project.funding.raised || 0;
    var goal    = project.funding && project.funding.goal   || 1;
    var pct     = Math.min(100, Math.round((raised/goal)*100));

    var _amount  = useState('');    var amount = _amount[0], setAmount = _amount[1];
    var _preset  = useState(null);  var preset = _preset[0], setPreset = _preset[1];
    var _loading = useState(false); var loadingF = _loading[0], setLoadingF = _loading[1];
    var _done    = useState(false);  var done = _done[0], setDone = _done[1];

    function selectPreset(v) { setPreset(v); setAmount(String(v)); }

    async function handleFund() {
      if (!window.AuthState || !window.AuthState.isLoggedIn()) {
        window.showUserToast('Sign in to fund projects', 'rose');
        return;
      }
      var amt = parseFloat(amount);
      if (!amt || amt <= 0) { window.showUserToast('Enter a valid amount', 'rose'); return; }
      setLoadingF(true);
      try {
        var user = window.AuthState.getUser();
        await window.ApiClient.post('/funding', {
          project: project._id,
          amount:  amt * 1000,
          source:  user.role || 'citizen',
        });
        setDone(true);
        window.showUserToast('Funded $'+amt+'K — thank you! 🎉', 'lime');
        if (onSuccess) onSuccess(amt * 1000);
      } catch(e) {
        window.showUserToast(e.message || 'Funding failed', 'rose');
      } finally {
        setLoadingF(false);
      }
    }

    return (
      <div className="ar-preview-overlay" onClick={function(e){ if(e.target===e.currentTarget) onClose(); }}>
        <div style={{ width:'min(480px, 95vw)', background:'var(--bg-raised)', border:'1px solid oklch(0.4 0.2 295 / 0.4)', borderRadius:20, overflow:'hidden', animation:'pg-in .25s ease both' }}>
          {done ? (
            <div style={{ padding:'48px 32px', textAlign:'center' }}>
              <div style={{ fontSize:56, marginBottom:16 }}>🎉</div>
              <div style={{ fontFamily:'Bebas Neue,sans-serif', fontSize:36, color:'var(--lime)', marginBottom:8 }}>Thank You!</div>
              <div style={{ fontFamily:'DM Mono,monospace', fontSize:11, color:'var(--text-faint)', marginBottom:24 }}>Your contribution is making this city better.</div>
              <button className="btn btn-v" style={{ margin:'0 auto', padding:'12px 32px' }}
                onMouseEnter={function(){ document.body.classList.add('hov'); }}
                onMouseLeave={function(){ document.body.classList.remove('hov'); }}
                onClick={onClose}>
                Continue Exploring
              </button>
            </div>
          ) : (
            <div style={{ padding:'28px 32px' }}>
              <div style={{ display:'flex', justifyContent:'space-between', alignItems:'flex-start', marginBottom:20 }}>
                <div>
                  <div style={{ fontFamily:'DM Mono,monospace', fontSize:9, letterSpacing:'.1em', textTransform:'uppercase', color:'var(--violet)', marginBottom:6 }}>Fund Project</div>
                  <div style={{ fontSize:18, fontWeight:600, color:'var(--text)' }}>{project.title}</div>
                </div>
                <button style={{ background:'transparent', border:'none', color:'var(--text-faint)', fontSize:18, cursor:'none' }}
                  onMouseEnter={function(){ document.body.classList.add('hov'); }}
                  onMouseLeave={function(){ document.body.classList.remove('hov'); }}
                  onClick={onClose}>✕</button>
              </div>

              {/* Progress */}
              <div style={{ background:'var(--bg)', border:'1px solid var(--border)', borderRadius:12, padding:'16px', marginBottom:20 }}>
                <div style={{ display:'flex', justifyContent:'space-between', marginBottom:8 }}>
                  <span style={{ fontFamily:'Bebas Neue,sans-serif', fontSize:28, color:'var(--lime)' }}>${Math.round(raised/1000)}K</span>
                  <span style={{ fontFamily:'DM Mono,monospace', fontSize:10, color:'var(--text-faint)', alignSelf:'flex-end', paddingBottom:4 }}>of ${Math.round(goal/1000)}K</span>
                </div>
                <div className="fund-bar-track">
                  <div className="fund-bar-fill-v" style={{ width:pct+'%' }} />
                </div>
                <div style={{ fontFamily:'DM Mono,monospace', fontSize:9, color:'var(--text-faint)', marginTop:6 }}>{pct}% funded</div>
              </div>

              <div style={{ fontFamily:'DM Mono,monospace', fontSize:9, letterSpacing:'.1em', textTransform:'uppercase', color:'var(--text-faint)', marginBottom:8 }}>Your Contribution ($K)</div>
              <div className="fund-presets" style={{ marginBottom:8 }}>
                {[1,5,10,25].map(function(v) {
                  return (
                    <button key={v} className={'fund-preset'+(preset===v?' on':'')}
                      onMouseEnter={function(){ document.body.classList.add('hov'); }}
                      onMouseLeave={function(){ document.body.classList.remove('hov'); }}
                      onClick={function(){ selectPreset(v); }}>
                      ${v}K
                    </button>
                  );
                })}
              </div>
              <input className="fund-amount-input" type="number" min="0.1" step="0.5"
                placeholder="Custom amount…"
                value={amount}
                onChange={function(e){ setAmount(e.target.value); setPreset(null); }}
                onMouseEnter={function(){ document.body.classList.add('hov'); }}
                onMouseLeave={function(){ document.body.classList.remove('hov'); }}
              />
              <button className="btn btn-v" style={{ width:'100%', justifyContent:'center', padding:'14px', marginTop:4 }}
                disabled={loadingF}
                onMouseEnter={function(){ document.body.classList.add('hov'); }}
                onMouseLeave={function(){ document.body.classList.remove('hov'); }}
                onClick={handleFund}>
                {loadingF ? 'Processing…' : '💚 Fund $'+(amount||'0')+'K →'}
              </button>
              <div style={{ marginTop:10, fontFamily:'DM Mono,monospace', fontSize:9, color:'var(--text-faint)', textAlign:'center' }}>Free to contribute · Secure · Transparent</div>
            </div>
          )}
        </div>
      </div>
    );
  }

  function FundingPage() {
    var initProject = window.UserRouter.getParams().openProject || null;
    var _projects = useState([]); var projects = _projects[0], setProjects = _projects[1];
    var _loading  = useState(true); var loading = _loading[0], setLoading = _loading[1];
    var _filter   = useState('All'); var filter = _filter[0], setFilter = _filter[1];
    var _modal    = useState(null);  var modal = _modal[0], setModal = _modal[1];
    var _totalRaised = useState(0); var totalRaised = _totalRaised[0], setTotalRaised = _totalRaised[1];

    useEffect(function() {
      window.ApiClient.get('/projects?sort=-funding.raised&limit=30').then(function(d) {
        var projs = d.projects || [];
        setProjects(projs);
        setTotalRaised(projs.reduce(function(a,p){ return a+(p.funding&&p.funding.raised||0); }, 0));
        setLoading(false);
        // If we came here with openProject param, open that modal
        if (initProject) {
          var found = projs.find(function(p){ return p._id === initProject; });
          if (found) setModal(found);
        }
      }).catch(function(){ setLoading(false); });
    }, []);

    var filtered = projects.filter(function(p) {
      var raised = p.funding&&p.funding.raised||0;
      var goal   = p.funding&&p.funding.goal||1;
      var pct    = (raised/goal)*100;
      if (filter === 'Near Goal')      return pct >= 70 && pct < 100;
      if (filter === 'Just Started')   return pct < 20;
      if (filter === 'Fully Funded')   return pct >= 100;
      return true;
    });

    var activeCount  = projects.filter(function(p){ var r=p.funding&&p.funding.raised||0, g=p.funding&&p.funding.goal||1; return r<g; }).length;
    var fundedCount  = projects.filter(function(p){ var r=p.funding&&p.funding.raised||0, g=p.funding&&p.funding.goal||1; return r>=g; }).length;

    function onFundSuccess(projectId, amtAdded) {
      setProjects(function(prev){ return prev.map(function(p){ return p._id===projectId ? Object.assign({}, p, { funding: Object.assign({}, p.funding, { raised:(p.funding&&p.funding.raised||0)+amtAdded }) }) : p; }); });
      setTotalRaised(function(t){ return t + amtAdded; });
      setModal(null);
    }

    var displayTotal = totalRaised >= 1000000 ? '$'+(totalRaised/1000000).toFixed(1)+'M' : '$'+Math.round(totalRaised/1000)+'K';

    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">Community Funding</div>
          <h1 className="pg-title">Fund the Future<br /><span style={{ color:'var(--lime)' }}>of Your City</span></h1>
          <p className="pg-sub">Back the projects that matter to your community. Every contribution moves the city forward.</p>
          <div className="stat-chips" style={{ marginTop:24 }}>
            <div className="stat-chip">
              <div className="stat-chip-val" style={{ color:'var(--lime)' }}>{displayTotal}</div>
              <div className="stat-chip-lbl">Total Raised</div>
            </div>
            <div className="stat-chip">
              <div className="stat-chip-val" style={{ color:'var(--violet)' }}>{activeCount}</div>
              <div className="stat-chip-lbl">Active Campaigns</div>
            </div>
            <div className="stat-chip">
              <div className="stat-chip-val" style={{ color:'var(--amber)' }}>{fundedCount}</div>
              <div className="stat-chip-lbl">Fully Funded</div>
            </div>
          </div>
        </div>

        {/* Filter */}
        <div className="community-filter-wrap" style={{ padding:'24px 64px 0' }}>
          <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>
        </div>

        {/* Cards */}
        <div className="pg-body">
          {loading && <div className="pg-empty"><span className="pg-empty-icon">💰</span>Loading campaigns…</div>}
          <div className="funding-pg-grid">
            {filtered.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));
              var emoji  = EMOJIS[i % EMOJIS.length];
              var fill   = FILLS[i % FILLS.length];
              return (
                <div key={p._id} className="funding-pg-card"
                  style={{ opacity:0, animation:'slide-in-left 0.35s var(--spring) '+(i*35)+'ms forwards' }}>
                  <div style={{ fontSize:44, marginBottom:12 }}>{emoji}</div>
                  <div style={{ fontSize:15, fontWeight:600, color:'var(--text)', marginBottom:6 }}>{p.title}</div>
                  <div style={{ fontFamily:'DM Mono,monospace', fontSize:9, color:'var(--text-faint)', marginBottom:12 }}>
                    📍 {p.location&&p.location.district||'—'} · 👁 {(p.ar&&p.ar.views||0).toLocaleString()} views
                  </div>
                  {p.description && (
                    <div style={{ fontSize:13, color:'var(--text-dim)', lineHeight:1.6, marginBottom:14 }}>
                      {p.description.slice(0,80)}{p.description.length>80?'…':''}
                    </div>
                  )}
                  <div style={{ display:'flex', justifyContent:'space-between', marginBottom:6, fontFamily:'DM Mono,monospace', fontSize:10 }}>
                    <span style={{ color:'var(--lime)' }}>${Math.round(raised/1000)}K raised</span>
                    <span style={{ color:'var(--text-faint)' }}>of ${Math.round(goal/1000)}K</span>
                  </div>
                  <div style={{ height:6, background:'var(--bg-float)', borderRadius:3, overflow:'hidden', marginBottom:10 }}>
                    <div style={{ height:'100%', width:pct+'%', background:fill, borderRadius:3, transition:'width 1s ease' }} />
                  </div>
                  <div style={{ fontFamily:'DM Mono,monospace', fontSize:9, color:'var(--text-faint)', marginBottom:16 }}>
                    {pct}% funded
                  </div>
                  <div style={{ display:'flex', gap:8 }}>
                    <button className="btn btn-v" style={{ flex:1, justifyContent:'center', padding:'10px', fontSize:11 }}
                      onMouseEnter={function(){ document.body.classList.add('hov'); }}
                      onMouseLeave={function(){ document.body.classList.remove('hov'); }}
                      onClick={function(){ setModal(p); }}>
                      💚 Fund This →
                    </button>
                    <button className="btn btn-o" style={{ padding:'10px 14px', fontSize:11 }}
                      onMouseEnter={function(){ document.body.classList.add('hov'); }}
                      onMouseLeave={function(){ document.body.classList.remove('hov'); }}
                      onClick={function(){ window.navigate('project-detail', { id: p._id }); }}>
                      Details
                    </button>
                  </div>
                </div>
              );
            })}
          </div>
          {!loading && filtered.length === 0 && (
            <div className="pg-empty"><span className="pg-empty-icon">💰</span>No campaigns match this filter</div>
          )}
        </div>

        {/* Fund Modal */}
        {modal && (
          <FundModal
            project={modal}
            onClose={function(){ setModal(null); }}
            onSuccess={function(amt){ onFundSuccess(modal._id, amt); }}
          />
        )}
      </div>
    );
  }

  window.UserFundingPage = FundingPage;
})();