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

  var ImmersiveStage = React.memo(function ImmersiveStage(props) {
    return React.createElement('div', {
      className: 'cb-360-stage',
      ref: props.stageRef,
    });
  }, function() { return true; });

  /**
   * Virtual showroom CTA — live camera + 3D building (Ferrari-filter style).
   */
  function ShowroomViewer(props) {
    var src = props.src;
    var iosSrc = props.iosSrc || null;
    var alt = props.alt || 'Virtual showroom';

    var stageRef = useRef(null);
    var apiRef = useRef(null);
    var pausedRef = useRef(false);
    var streamPromiseRef = useRef(null);

    var _open = useState(false); var open = _open[0], setOpen = _open[1];
    var _phase = useState('idle'); var phase = _phase[0], setPhase = _phase[1];
    var _pct = useState(0); var pct = _pct[0], setPct = _pct[1];
    var _err = useState(null); var err = _err[0], setErr = _err[1];
    var _engine = useState(''); var engine = _engine[0], setEngine = _engine[1];
    var _status = useState(''); var status = _status[0], setStatus = _status[1];

    function runCleanup() {
      if (apiRef.current) {
        try { apiRef.current.dispose(); } catch (e) {}
        apiRef.current = null;
      }
      if (stageRef.current) stageRef.current.innerHTML = '';
    }

    function close() {
      runCleanup();
      setOpen(false);
      setPhase('idle');
      setPct(0);
      setErr(null);
      setEngine('');
      setStatus('');
      pausedRef.current = false;
      streamPromiseRef.current = null;
    }

    function openView() {
      if (!src) {
        window.showUserToast && window.showUserToast('Generate 3D first, then tap Walk In', 'rose');
        return;
      }
      try {
        if (window.requestShowroomCamera) {
          streamPromiseRef.current = window.requestShowroomCamera();
        } else if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
          streamPromiseRef.current = navigator.mediaDevices.getUserMedia({
            video: { facingMode: { ideal: 'environment' } },
            audio: false,
          });
        }
      } catch (e) {
        streamPromiseRef.current = null;
      }
      if (streamPromiseRef.current) {
        streamPromiseRef.current.catch(function() {});
      }
      setErr(null);
      setPct(0);
      setStatus('Opening live camera…');
      setPhase('loading');
      setOpen(true);
    }

    useEffect(function() {
      if (!open) return;
      function onKey(e) {
        if (e.key === 'Escape') close();
      }
      window.addEventListener('keydown', onKey);
      var prevOverflow = document.body.style.overflow;
      document.documentElement.classList.add('cb-360-open');
      document.body.classList.add('cb-360-open');
      document.body.style.overflow = 'hidden';
      return function() {
        window.removeEventListener('keydown', onKey);
        document.documentElement.classList.remove('cb-360-open');
        document.body.classList.remove('cb-360-open');
        document.body.style.overflow = prevOverflow;
      };
    }, [open]);

    useEffect(function() {
      if (!open) return;
      function onVis() { pausedRef.current = document.hidden; }
      document.addEventListener('visibilitychange', onVis);
      return function() { document.removeEventListener('visibilitychange', onVis); };
    }, [open]);

    useEffect(function() {
      if (!open || !src) return;
      var cancelled = false;
      var tries = 0;

      function boot() {
        if (cancelled) return;
        if (!stageRef.current) {
          tries += 1;
          if (tries < 60) window.requestAnimationFrame(boot);
          else {
            setErr('Viewer failed to mount — refresh and try again');
            setPhase('error');
          }
          return;
        }
        if (!window.mountImmersive360) {
          setErr('Showroom engine not loaded. Refresh and try again.');
          setPhase('error');
          return;
        }
        setPhase('loading');
        window.mountImmersive360(stageRef.current, src, {
          iosSrc: iosSrc,
          alt: alt,
          streamPromise: streamPromiseRef.current,
          shouldPause: function() { return cancelled || pausedRef.current; },
          onProgress: function(p) { if (!cancelled) setPct(p); },
          onStatus: function(msg) { if (!cancelled && msg) setStatus(msg); },
          onEngine: function(name) { if (!cancelled) setEngine(name); },
          onReady: function() { if (!cancelled) { setPct(100); setPhase('ready'); } },
          onError: function(msg) { if (!cancelled) { setErr(msg); setPhase('error'); } },
        }).then(function(api) {
          streamPromiseRef.current = null;
          if (cancelled) {
            if (api && api.dispose) api.dispose();
            return;
          }
          apiRef.current = api;
        }).catch(function() {
          streamPromiseRef.current = null;
        });
      }

      boot();
      return function() {
        cancelled = true;
        runCleanup();
      };
    }, [open, src, iosSrc, alt]);

    function hovOn() { document.body.classList.add('hov'); }
    function hovOff() { document.body.classList.remove('hov'); }

    var overlay = open ? React.createElement('div', {
      className: 'cb-360-overlay cb-360-overlay--camera',
      role: 'dialog',
      'aria-modal': 'true',
      'aria-label': alt + ' virtual showroom',
    },
      React.createElement(ImmersiveStage, { stageRef: stageRef }),
      React.createElement('div', { className: 'cb-360-chrome' },
        React.createElement('div', { className: 'cb-360-brand' },
          React.createElement('span', { className: 'cb-showroom-badge-dot' }),
          'Virtual Showroom'
        ),
        React.createElement('div', { className: 'cb-360-title' }, alt),
        React.createElement('div', { className: 'cb-360-status' },
          phase === 'error' ? ''
            : (status || (pct ? 'Loading… ' + pct + '%' : 'Opening camera…'))
        )
      ),
      phase === 'loading' && React.createElement('div', { className: 'cb-showroom-load' },
        React.createElement('div', { className: 'cb-showroom-load-track' },
          React.createElement('div', {
            className: 'cb-showroom-load-fill',
            style: { width: Math.max(pct, 6) + '%' },
          })
        )
      ),
      React.createElement('div', { className: 'cb-360-actions' },
        engine && phase === 'ready' && React.createElement('span', { className: 'cb-360-engine' },
          engine === 'camera-showroom' ? 'Live camera' : 'Orbit fallback'
        ),
        React.createElement('button', {
          type: 'button',
          className: 'studio-btn studio-btn--primary',
          onClick: close,
          onMouseEnter: hovOn,
          onMouseLeave: hovOff,
        }, 'Done')
      ),
      err && React.createElement('div', { className: 'cb-showroom-err' },
        React.createElement('div', null, err),
        React.createElement('button', {
          type: 'button',
          className: 'studio-btn studio-btn--ghost',
          style: { marginTop: 12 },
          onClick: function() {
            close();
            window.setTimeout(openView, 50);
          },
        }, 'Retry')
      )
    ) : null;

    return React.createElement(React.Fragment, null,
      React.createElement('button', {
        type: 'button',
        className: 'studio-btn studio-btn--primary cb-showroom-cta',
        onClick: openView,
        onMouseEnter: hovOn,
        onMouseLeave: hovOff,
        disabled: !src,
      }, 'Virtual Showroom'),
      React.createElement('p', { className: 'cb-showroom-hint' },
        'Live camera + your 3D building — Instagram-filter style orbit'),
      open && createPortal(overlay, document.body)
    );
  }

  window.ShowroomViewer = ShowroomViewer;
})();