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

  function OpportunityDetailPage() {
    var params = window.UserRouter.getParams() || {};
    var id = params.id;
    var _opp = useState(null); var opp = _opp[0], setOpp = _opp[1];
    var _loading = useState(true); var loading = _loading[0], setLoading = _loading[1];
    var _fundAmt = useState('5'); var fundAmt = _fundAmt[0], setFundAmt = _fundAmt[1];
    var _busy = useState(''); var busy = _busy[0], setBusy = _busy[1];
    var user = window.AuthState && window.AuthState.getUser();

    function reload() {
      return window.CBOpportunities.getOne(id).then(function(o) {
        setOpp(o);
        setLoading(false);
      }).catch(function() {
        setLoading(false);
        window.navigate('opportunities');
      });
    }

    useEffect(function() {
      if (!id) { window.navigate('opportunities'); return; }
      setLoading(true);
      reload();
    }, [id]);

    if (loading) {
      return (
        <div className="sites-detail">
          <div className="sites-detail__fx" aria-hidden="true"><div className="sites-detail__aurora" /></div>
          <div className="sites-detail__inner"><div className="sites-feed__loading">Loading site…</div></div>
        </div>
      );
    }
    if (!opp) return null;

    var raised = (opp.funding && opp.funding.raised) || 0;
    var goal = (opp.funding && opp.funding.goal) || 0;
    var pct = goal ? Math.min(100, Math.round((raised / goal) * 100)) : 0;
    var isOwner = user && (user.role === 'admin' || String(user._id) === String(opp.owner && (opp.owner._id || opp.owner)));
    var canTake = window.CBOpportunities.canTakeover(user);
    var hero = opp.media && opp.media[0] && opp.media[0].url;
    var side = (opp.media || []).slice(1, 3);
    var hover = function(){ document.body.classList.add('hov'); };
    var leave = function(){ document.body.classList.remove('hov'); };

    function handleFund() {
      if (!window.AuthState || !window.AuthState.isLoggedIn()) {
        window.showUserToast('Sign in to fund', 'rose'); return;
      }
      var amt = Number(fundAmt) * 1000;
      if (!amt) { window.showUserToast('Enter amount in $K', 'rose'); return; }
      setBusy('fund');
      window.CBOpportunities.fund(id, amt, user.role || 'citizen').then(function() {
        window.showUserToast('Thanks for funding this opportunity!', 'lime');
        return reload();
      }).catch(function(e) {
        window.showUserToast(e.message || 'Funding failed', 'rose');
      }).finally(function(){ setBusy(''); });
    }

    function handleTakeover() {
      if (!canTake) { window.showUserToast('Municipality or developer verification required', 'rose'); return; }
      setBusy('takeover');
      window.CBOpportunities.takeover(id, '').then(function() {
        window.showUserToast('Construction takeover claimed', 'lime');
        return reload();
      }).catch(function(e) {
        window.showUserToast(e.message || 'Takeover failed', 'rose');
      }).finally(function(){ setBusy(''); });
    }

    function review(projectId, action) {
      setBusy(action + projectId);
      window.CBOpportunities.reviewSubmission(id, projectId, action).then(function() {
        window.showUserToast('Submission ' + action, 'lime');
        return reload();
      }).catch(function(e) {
        window.showUserToast(e.message || 'Review failed', 'rose');
      }).finally(function(){ setBusy(''); });
    }

    return (
      <div className="sites-detail">
        <div className="sites-detail__fx" aria-hidden="true">
          <div className="sites-detail__aurora" />
        </div>
        <div className="sites-detail__inner">
          <header className="sites-hero" data-tour="opp-detail-hero">
            <div className="sites-hero__top">
              <button type="button" className="sites-hero__back"
                onMouseEnter={hover} onMouseLeave={leave}
                onClick={function(){ window.navBack(); }}>
                ← Sites
              </button>
              <div className="sites-hero__badge">
                <span className="sites-hero__badge-dot" />
                Site detail
              </div>
            </div>
            <div className="sites-detail__chips">
              <span className="sites-chip sites-chip--blue">{opp.status}</span>
              <span className="sites-chip">{opp.propertyType}</span>
              {opp.owner && opp.owner.verificationStatus === 'verified' && (
                <span className="sites-chip sites-chip--mint">Verified owner</span>
              )}
              {opp.urgency === 'urgent' && <span className="sites-chip sites-chip--amber">Urgent</span>}
            </div>
            <h1 className="sites-hero__title">{opp.name}</h1>
            <p className="sites-hero__sub">
              {(opp.owner && opp.owner.name) || 'Owner'} · {opp.location && opp.location.address}
              {opp.challenge && opp.challenge.deadline ? ' · Deadline ' + new Date(opp.challenge.deadline).toLocaleDateString() : ''}
            </p>
          </header>

          <div className="sites-gallery">
            {hero
              ? <img className="sites-gallery__hero" src={hero} alt={opp.name} />
              : <div className="sites-gallery__hero" aria-hidden="true" />}
            <div className="sites-gallery__side">
              {side.map(function(m, i) { return <img key={i} src={m.url} alt="" />; })}
              {!side.length && (
                <>
                  <div aria-hidden="true" />
                  <div aria-hidden="true" />
                </>
              )}
            </div>
          </div>

          <div className="sites-detail-grid">
            <div>
              <div className="sites-panel">
                <h3>About this site</h3>
                <p>{opp.description || 'No description yet.'}</p>
              </div>
              <div className="sites-panel">
                <h3>Owner requirements</h3>
                <p style={{ whiteSpace: 'pre-wrap', color: 'var(--c-label)' }}>
                  {opp.requirements || 'Owner has not added specific requirements yet.'}
                </p>
              </div>
              <div className="sites-panel">
                <h3>Challenge rules</h3>
                <div className="sites-panel__meta">
                  Reward: {(opp.challenge && (opp.challenge.reward || ('$' + (opp.challenge.rewardAmount || 0)))) || '—'}
                  {' · '}Max submissions: {(opp.challenge && opp.challenge.maxSubmissions) || '—'}
                  {' · '}Voting: {opp.challenge && opp.challenge.allowVoting === false ? 'Off' : 'On'}
                </div>
                <div className="sites-panel__actions">
                  <button type="button" className="sites-btn sites-btn--primary"
                    onMouseEnter={hover} onMouseLeave={leave}
                    onClick={function(){ window.navigate('submit', { opportunityId: opp._id }); }}>
                    Start concept
                  </button>
                  <button type="button" className="sites-btn sites-btn--ghost" onClick={function(){
                    var c = opp.location && opp.location.coordinates && opp.location.coordinates.coordinates;
                    if (c) window.open('https://www.google.com/maps/dir/?api=1&destination=' + c[1] + ',' + c[0], '_blank');
                  }}>Navigate</button>
                  <button type="button" className="sites-btn sites-btn--ghost" onClick={function(){
                    if (!window.AuthState.isLoggedIn()) { window.showUserToast('Sign in first', 'rose'); return; }
                    window.CBOpportunities.bookmark(opp._id).then(function(r) {
                      window.showUserToast(r.bookmarked ? 'Bookmarked' : 'Removed', 'lime');
                    });
                  }}>Save</button>
                </div>
              </div>

              <div className="sites-panel">
                <h3>Concepts ({(opp.submissions || []).length})</h3>
                {(opp.submissions || []).length === 0 && (
                  <p>No concepts yet — be the first to redesign this site.</p>
                )}
                {(opp.submissions || []).map(function(s) {
                  return (
                    <div key={s._id} className="sites-submission">
                      <div style={{ flex: 1, minWidth: 0 }}>
                        <div className="sites-submission__title">{s.title}</div>
                        <div className="sites-submission__meta">
                          {(s.submittedBy && s.submittedBy.name) || 'Designer'} · {s.submissionStatus} · votes {s.voteScore || 0}
                        </div>
                        <div className="sites-submission__blurb">
                          {(s.proposalText || s.vision || '').slice(0, 160)}
                        </div>
                        <div className="sites-submission__actions">
                          <button type="button" className="sites-btn sites-btn--ghost"
                            onClick={function(){ window.navigate('project-detail', { id: s._id }); }}>
                            Open / AR
                          </button>
                          <button type="button" className="sites-btn sites-btn--ghost"
                            onClick={function(){
                              if (!window.AuthState.isLoggedIn()) return window.showUserToast('Sign in to vote', 'rose');
                              window.CBOpportunities.vote(opp._id, s._id, 1).then(reload);
                            }}>Vote</button>
                          {isOwner && (
                            <>
                              <button type="button" className="sites-btn sites-btn--ghost" disabled={busy}
                                onClick={function(){ review(s._id, 'shortlisted'); }}>Shortlist</button>
                              <button type="button" className="sites-btn sites-btn--primary" disabled={busy}
                                onClick={function(){ review(s._id, 'winner'); }}>Accept</button>
                              <button type="button" className="sites-btn sites-btn--ghost" disabled={busy}
                                onClick={function(){ review(s._id, 'rejected'); }}>Reject</button>
                            </>
                          )}
                        </div>
                      </div>
                      {s.ar && s.ar.enhancedPhotoUrl && (
                        <img
                          className="sites-submission__thumb"
                          src={window.cbAssetUrl ? window.cbAssetUrl(s.ar.enhancedPhotoUrl) : s.ar.enhancedPhotoUrl}
                          alt=""
                        />
                      )}
                    </div>
                  );
                })}
              </div>
            </div>

            <div>
              <div className="sites-panel">
                <h3>Crowdfunding</h3>
                <div className="sites-fund-amt">${Math.round(raised / 1000)}K</div>
                <div className="sites-panel__meta">of ${Math.round(goal / 1000)}K goal · {pct}%</div>
                <div className="sites-fund-track">
                  <div className="sites-fund-fill" style={{ width: pct + '%' }} />
                </div>
                <label className="sites-field-label">Contribute ($K)</label>
                <input
                  className="sites-field"
                  value={fundAmt}
                  onChange={function(e){ setFundAmt(e.target.value); }}
                  type="number"
                  min="0.1"
                  step="0.5"
                />
                <button type="button" className="sites-btn sites-btn--primary" style={{ width: '100%' }}
                  disabled={busy === 'fund'} onClick={handleFund}>
                  {busy === 'fund' ? 'Processing…' : 'Fund this site'}
                </button>
              </div>

              <div className="sites-panel">
                <h3>Construction takeover</h3>
                {opp.takeover ? (
                  <div>
                    <span className="sites-chip sites-chip--mint" style={{ marginBottom: 10 }}>Under construction</span>
                    <p>
                      Claimed by {(opp.takeover.claimedBy && opp.takeover.claimedBy.name) || 'Partner'}
                      {' '}({opp.takeover.actorType})
                    </p>
                  </div>
                ) : (
                  <div>
                    <p style={{ marginBottom: 12 }}>
                      After a winning concept, municipalities or private developers can claim construction.
                    </p>
                    <button type="button" className="sites-btn sites-btn--ghost" style={{ width: '100%' }}
                      disabled={!canTake || busy === 'takeover'} onClick={handleTakeover}>
                      {busy === 'takeover' ? 'Claiming…' : 'Claim construction'}
                    </button>
                  </div>
                )}
              </div>

              <div className="sites-panel">
                <h3>Owner</h3>
                <div style={{ color: 'var(--c-label)', fontWeight: 650, marginBottom: 4 }}>
                  {(opp.owner && opp.owner.name) || '—'}
                </div>
                <div className="sites-panel__meta" style={{ marginBottom: 0 }}>
                  {(opp.owner && opp.owner.role) || ''} · {(opp.owner && opp.owner.organizationName) || opp.publisherType}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  }

  window.UserOpportunityDetailPage = OpportunityDetailPage;
})();