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

  var RADIUS_OPTS = [
    { label: '1 km', m: 1000 },
    { label: '5 km', m: 5000 },
    { label: '10 km', m: 10000 },
    { label: '25 km', m: 25000 },
    { label: '50 km', m: 50000 },
  ];

  function OpportunitiesPage() {
    var _items = useState([]); var items = _items[0], setItems = _items[1];
    var _loading = useState(true); var loading = _loading[0], setLoading = _loading[1];
    var _radius = useState(10000); var radius = _radius[0], setRadius = _radius[1];
    var _type = useState(''); var type = _type[0], setType = _type[1];
    var _sort = useState('nearby'); var sort = _sort[0], setSort = _sort[1];
    var _center = useState(null); var center = _center[0], setCenter = _center[1];
    var _selected = useState(null); var selected = _selected[0], setSelected = _selected[1];
    var _err = useState(''); var err = _err[0], setErr = _err[1];
    var _mapReady = useState(false); var mapReady = _mapReady[0], setMapReady = _mapReady[1];
    var _mapError = useState(''); var mapError = _mapError[0], setMapError = _mapError[1];
    var _search = useState(''); var search = _search[0], setSearch = _search[1];
    var mapRef = useRef(null);
    var searchRef = useRef(null);
    var browseRef = useRef(null);

    useEffect(function() {
      if (!navigator.geolocation) {
        setCenter({ lat: 40.7128, lng: -74.006 });
        return;
      }
      navigator.geolocation.getCurrentPosition(
        function(pos) {
          setCenter({ lat: pos.coords.latitude, lng: pos.coords.longitude, accuracy: pos.coords.accuracy });
        },
        function() { setCenter({ lat: 40.7128, lng: -74.006 }); },
        { enableHighAccuracy: true, timeout: 10000 }
      );
    }, []);

    useEffect(function() {
      if (!center) return;
      setLoading(true);
      setErr('');
      var svc = window.CBOpportunities;
      var extra = {};
      if (type) extra.propertyType = type;

      var req = sort === 'nearby'
        ? svc.nearby(center.lat, center.lng, radius, extra)
        : svc.list(Object.assign({
            sort: sort === 'closing' ? 'closing' : sort === 'popular' ? 'popular' : 'newest',
            propertyType: type || undefined,
            limit: 50,
          }, {}));

      req.then(function(res) {
        setItems(res.opportunities || []);
        setLoading(false);
      }).catch(function(e) {
        setErr(e.message || 'Failed to load opportunities');
        setLoading(false);
      });
    }, [center, radius, type, sort]);

    // Init interactive Google Map once (Maps-app style)
    useEffect(function() {
      if (!mapRef.current || !window.CBMaps || browseRef.current) return;
      var cancelled = false;
      var startCenter = center || { lat: 40.7128, lng: -74.006 };

      window.CBMaps.createBrowseMap(mapRef.current, {
        center: { lat: startCenter.lat, lng: startCenter.lng },
        zoom: 13,
        searchInput: searchRef.current,
        fitBounds: true,
        onSelect: function(opp) { setSelected(opp); },
        onSearchPlace: function(place) {
          var loc = place.geometry.location;
          setCenter({ lat: loc.lat(), lng: loc.lng() });
          setSort('nearby');
        },
      }).then(function(browse) {
        if (cancelled) return;
        browseRef.current = browse;
        setMapReady(true);
        setMapError('');
        if (navigator.geolocation) {
          browse.goToMyLocation().then(function(pos) {
            setCenter({ lat: pos.lat, lng: pos.lng, accuracy: pos.accuracy });
          }).catch(function() {});
        }
      }).catch(function(e) {
        if (cancelled) return;
        setMapReady(false);
        setMapError(e.message || 'Google Maps unavailable');
      });

      return function() { cancelled = true; };
    }, []);

    // Keep map center / user blue-dot in sync
    useEffect(function() {
      if (!browseRef.current || !center) return;
      browseRef.current.setUserLocation(center.lat, center.lng, center.accuracy || 0);
    }, [center]);

    // Sync opportunity pins when list changes
    useEffect(function() {
      if (!browseRef.current || !mapReady) return;
      browseRef.current.setOpportunities(items, window.CBOpportunities.MARKER_COLORS);
    }, [items, mapReady]);

    function openDetail(id) {
      window.navigate('opportunity-detail', { id: id });
    }

    function recenterMe() {
      if (!browseRef.current) return;
      browseRef.current.goToMyLocation().then(function(pos) {
        setCenter({ lat: pos.lat, lng: pos.lng, accuracy: pos.accuracy });
        setSort('nearby');
        window.showUserToast('Centered on your location', 'lime');
      }).catch(function() {
        window.showUserToast('Could not get your location — allow location access', 'rose');
      });
    }

    var hover = function(){ document.body.classList.add('hov'); };
    var leave = function(){ document.body.classList.remove('hov'); };
    var canPublish = window.CBOpportunities.canPublish(window.AuthState && window.AuthState.getUser());

    return (
      <div className="sites-studio">
        <div className="sites-studio__fx" aria-hidden="true">
          <div className="sites-studio__aurora" />
        </div>
        <div className="sites-studio__inner">
          <header className="sites-hero">
            <div className="sites-hero__top">
              <button type="button" className="sites-hero__back"
                onMouseEnter={hover} onMouseLeave={leave}
                onClick={function(){ window.navigate('home'); }}>
                ← Back
              </button>
              <div className="sites-hero__badge">
                <span className="sites-hero__badge-dot" />
                Sites
              </div>
            </div>
            <div className="sites-hero__row">
              <div className="sites-hero__copy">
                <h1 className="sites-hero__title">
                  {items.length ? items.length + ' sites near you' : 'Sites near you'}
                </h1>
                <p className="sites-hero__sub">
                  Explore open redesign plots on the live map. Tap a pin, claim a site, and shape the city.
                </p>
              </div>
              <div className="sites-hero__actions">
                {canPublish && (
                  <button type="button" className="sites-btn sites-btn--primary"
                    onMouseEnter={hover} onMouseLeave={leave}
                    onClick={function(){ window.navigate('owner-dashboard', { tab: 'publish' }); }}>
                    Publish site
                  </button>
                )}
                <button type="button" className="sites-btn sites-btn--ghost"
                  onMouseEnter={hover} onMouseLeave={leave}
                  onClick={function(){ window.navigate('owner-dashboard'); }}>
                  Dashboard
                </button>
              </div>
            </div>
          </header>

          <div className="sites-seg" role="toolbar" aria-label="Distance and sort" data-tour="opp-filters">
            {RADIUS_OPTS.map(function(r) {
              return (
                <button key={r.m} type="button"
                  className={'sites-seg__btn' + (radius === r.m && sort === 'nearby' ? ' on' : '')}
                  onClick={function(){ setSort('nearby'); setRadius(r.m); }}>
                  {r.label}
                </button>
              );
            })}
            <span className="sites-seg__divider" aria-hidden="true" />
            <button type="button" className={'sites-seg__btn' + (sort === 'newest' ? ' on' : '')} onClick={function(){ setSort('newest'); }}>Newest</button>
            <button type="button" className={'sites-seg__btn' + (sort === 'popular' ? ' on' : '')} onClick={function(){ setSort('popular'); }}>Popular</button>
            <button type="button" className={'sites-seg__btn' + (sort === 'closing' ? ' on' : '')} onClick={function(){ setSort('closing'); }}>Closing</button>
          </div>

          <div className="sites-types" aria-label="Property types">
            <button type="button" className={'sites-type' + (!type ? ' on' : '')} onClick={function(){ setType(''); }}>All</button>
            {window.CBOpportunities.PROPERTY_TYPES.slice(0, 8).map(function(t) {
              return (
                <button key={t.id} type="button"
                  className={'sites-type' + (type === t.id ? ' on' : '')}
                  onClick={function(){ setType(t.id); }}>
                  {t.label}
                </button>
              );
            })}
          </div>

          <div className="sites-layout">
            <section className="sites-map-col">
              <div className="sites-map" data-tour="opp-map">
                <div className="sites-map__toolbar">
                  <input
                    ref={searchRef}
                    className="sites-map__search"
                    value={search}
                    onChange={function(e){ setSearch(e.target.value); }}
                    placeholder="Search places, streets, landmarks…"
                    aria-label="Search map"
                  />
                  <button type="button" className="sites-map__loc" title="My location" aria-label="My location"
                    onMouseEnter={hover} onMouseLeave={leave}
                    onClick={recenterMe}>
                    ◎
                  </button>
                </div>
                <div className="sites-map__canvas" ref={mapRef} />
                {!mapReady && (
                  <div className="sites-map__fallback">
                    {mapError
                      ? <div><strong>Map unavailable</strong><p>{mapError}</p></div>
                      : <div className="sites-map__loading"><span className="sites-map__orb" /> Loading map…</div>}
                  </div>
                )}
                {selected && (
                  <div className="sites-sheet">
                    <div className="sites-sheet__meta">
                      {(selected.markerColor || 'blue').toUpperCase()} · {selected.propertyType}
                      {selected.distanceMeters != null ? ' · ' + window.CBOpportunities.formatDistance(selected.distanceMeters) : ''}
                    </div>
                    <div className="sites-sheet__title">{selected.name}</div>
                    <div className="sites-sheet__desc">{selected.requirements || selected.description || 'Open redesign opportunity'}</div>
                    <div className="sites-sheet__actions">
                      <button type="button" className="sites-btn sites-btn--primary" onClick={function(){ openDetail(selected._id); }}>View</button>
                      <button type="button" className="sites-btn sites-btn--ghost" onClick={function(){
                        window.navigate('submit', { opportunityId: selected._id });
                      }}>Design</button>
                      <button type="button" className="sites-btn sites-btn--ghost" onClick={function(){
                        var c = selected.location && selected.location.coordinates && selected.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 || !window.AuthState.isLoggedIn()) {
                          window.showUserToast('Sign in to bookmark', 'rose'); return;
                        }
                        window.CBOpportunities.bookmark(selected._id).then(function(r) {
                          window.showUserToast(r.bookmarked ? 'Bookmarked' : 'Removed bookmark', 'lime');
                        });
                      }}>Save</button>
                      <button type="button" className="sites-sheet__close" aria-label="Close" onClick={function(){ setSelected(null); }}>✕</button>
                    </div>
                  </div>
                )}
              </div>
              <p className="sites-map__hint">Pinch to zoom · drag to pan · tap a pin · ◎ recenters on you</p>
            </section>

            <aside className="sites-feed-col">
              <div className="sites-feed__head">
                <h2 className="sites-feed__title">Available sites</h2>
                <span className="sites-feed__count">{loading ? '…' : items.length}</span>
              </div>
              {loading && <div className="sites-feed__loading">Loading sites…</div>}
              {err && <div className="sites-feed__err">{err}</div>}
              <div className="sites-feed">
                {!loading && items.length === 0 && (
                  <div className="sites-feed__empty">
                    No open sites in this range yet. Be the first to publish.
                  </div>
                )}
                {items.map(function(opp, oppIdx) {
                  var thumb = (opp.media && opp.media[0] && opp.media[0].url) || null;
                  return (
                    <article
                      key={opp._id}
                      className={'sites-card' + (selected && selected._id === opp._id ? ' is-selected' : '')}
                      data-tour={oppIdx === 0 ? 'opp-card' : undefined}
                      onMouseEnter={hover} onMouseLeave={leave}
                      onClick={function(){
                        setSelected(opp);
                        var c = opp.location && opp.location.coordinates && opp.location.coordinates.coordinates;
                        if (c && browseRef.current) browseRef.current.panTo(c[1], c[0], 16);
                      }}
                    >
                      {thumb
                        ? <img className="sites-card__thumb" src={thumb} alt="" />
                        : <div className="sites-card__thumb sites-card__thumb--empty" aria-hidden="true" />}
                      <div className="sites-card__body">
                        <div className="sites-card__meta">
                          {opp.distanceMeters != null ? window.CBOpportunities.formatDistance(opp.distanceMeters) + ' · ' : ''}
                          {opp.propertyType} · {(opp.stats && opp.stats.submissions) || 0} concepts
                        </div>
                        <div className="sites-card__title">{opp.name}</div>
                        <div className="sites-card__req">{opp.requirements || opp.description || ''}</div>
                        <button
                          type="button"
                          className="sites-card__open"
                          onClick={function(e){ e.stopPropagation(); openDetail(opp._id); }}
                        >
                          Open →
                        </button>
                      </div>
                    </article>
                  );
                })}
              </div>
            </aside>
          </div>
        </div>
      </div>
    );
  }

  window.UserOpportunitiesPage = OpportunitiesPage;
})();