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

  var ZONES = [
    { key: 'residential', label: 'Residential', color: '#35d0e0' },
    { key: 'commercial',  label: 'Commercial',  color: '#b06cff' },
    { key: 'civic',       label: 'Civic',       color: '#ff5aa0' },
    { key: 'industrial',  label: 'Industrial',  color: '#f2b23a' },
    { key: 'parks',       label: 'Parks',       color: '#9be23a' },
  ];

  /**
   * The whole town, in 3D. Every live project is a zone-coloured block placed
   * by its coordinates; click one to open its full 3D / AR model.
   */
  function CityMapPage() {
    var hostRef  = useRef(null);
    var apiRef   = useRef(null);

    var _data  = useState(null);   var data = _data[0], setData = _data[1];
    var _load  = useState(true);   var loading = _load[0], setLoading = _load[1];
    var _err   = useState(null);   var err = _err[0], setErr = _err[1];
    var _hover = useState(null);   var hover = _hover[0], setHover = _hover[1];

    // Fetch the city feed.
    useEffect(function() {
      var alive = true;
      setLoading(true); setErr(null);
      window.ApiClient.get('/projects/city-map')
        .then(function(res) { if (alive) { setData(res); setLoading(false); } })
        .catch(function(e) { if (alive) { setErr((e && e.message) || 'Could not load the city'); setLoading(false); } });
      return function() { alive = false; };
    }, []);

    // Mount the Three.js scene once data is in.
    useEffect(function() {
      if (!data || !data.buildings || !data.buildings.length || !hostRef.current) return;
      var cancelled = false;

      import('../../services/cityMapScene.js').then(function(mod) {
        if (cancelled || !hostRef.current) return;
        return mod.mountCityScene(hostRef.current, {
          buildings: data.buildings,
          center: data.center,
          onPick: function(id) { window.navigate('project-detail', { id: id }); },
          onHover: function(h) { if (!cancelled) setHover(h); },
        }).then(function(api) {
          if (cancelled) { api.dispose(); return; }
          apiRef.current = api;
        });
      }).catch(function(e) {
        if (!cancelled) setErr((e && e.message) || 'Could not render the city');
      });

      return function() {
        cancelled = true;
        if (apiRef.current) { try { apiRef.current.dispose(); } catch (e) {} apiRef.current = null; }
      };
    }, [data]);

    var hover0 = function() { document.body.classList.add('hov'); };
    var leave0 = function() { document.body.classList.remove('hov'); };

    var count = data ? data.count : 0;
    var geoCount = data ? (data.geoCount || 0) : 0;

    return React.createElement('div', { className: 'city-map-page', style: { animation: 'pg-in .25s ease both' } },
      // Header
      React.createElement('div', { className: 'city-map-head' },
        React.createElement('div', null,
          React.createElement('div', { className: 'city-map-eyebrow' }, '◈ CITY VIEW'),
          React.createElement('h1', { className: 'city-map-title' }, 'The whole city, in 3D'),
          React.createElement('p', { className: 'city-map-sub' },
            'Tap any building to step inside it.')
        ),
        React.createElement('div', { className: 'city-map-stats' },
          React.createElement('div', { className: 'city-stat' },
            React.createElement('div', { className: 'city-stat-n' }, String(count)),
            React.createElement('div', { className: 'city-stat-l' }, 'Buildings live')),
          React.createElement('div', { className: 'city-stat' },
            React.createElement('div', { className: 'city-stat-n' }, String(geoCount)),
            React.createElement('div', { className: 'city-stat-l' }, 'Geo-located'))
        )
      ),

      // Legend
      React.createElement('div', { className: 'city-legend' },
        ZONES.map(function(z) {
          return React.createElement('span', { key: z.key, className: 'city-legend-chip' },
            React.createElement('span', { className: 'city-legend-dot', style: { background: z.color } }),
            z.label);
        })
      ),

      // Stage
      React.createElement('div', { className: 'city-stage', 'data-tour': 'city-map' },
        React.createElement('div', { className: 'city-stage-canvas', ref: hostRef }),

        loading && React.createElement('div', { className: 'city-stage-overlay' },
          React.createElement('div', { className: 'ar-model-spinner' }),
          React.createElement('div', { style: { marginTop: 12, fontFamily: 'DM Mono,monospace', fontSize: 12 } }, 'Assembling the city…')),

        err && React.createElement('div', { className: 'city-stage-overlay err' },
          React.createElement('div', null, err)),

        !loading && !err && data && (!data.buildings || !data.buildings.length) &&
          React.createElement('div', { className: 'city-stage-overlay' },
            React.createElement('div', { style: { fontSize: 34, marginBottom: 10 } }, '🏗'),
            React.createElement('div', { style: { fontFamily: 'DM Mono,monospace', fontSize: 12, maxWidth: 320, lineHeight: 1.6, color: 'var(--text-dim)' } },
              'No buildings yet. Create one and it appears here.'),
            React.createElement('button', {
              type: 'button', className: 'btn btn-v', style: { marginTop: 16, fontSize: 12 },
              onClick: function() { window.navigate('submit'); },
              onMouseEnter: hover0, onMouseLeave: leave0,
            }, '✨ Generate a vision')),

        hover && React.createElement('div', {
          className: 'city-tooltip',
          style: { left: hover.x + 14, top: hover.y + 14 },
        },
          React.createElement('div', { className: 'city-tooltip-title' }, hover.title),
          React.createElement('div', { className: 'city-tooltip-meta' },
            hover.zone + (hover.district ? ' · ' + hover.district : ''))
        )
      ),

      React.createElement('p', { className: 'city-map-foot' },
        'Tap a block to open its full 3D model.')
    );
  }

  window.UserCityMapPage = CityMapPage;
})();