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

  function ToolBtn(props) {
    return (
      <button
        type="button"
        className={'ar-tool-btn' + (props.active ? ' ar-tool-btn--on' : '') + (props.wide ? ' ar-tool-btn--wide' : '')}
        title={props.title || ''}
        onClick={props.onClick}
        disabled={props.disabled}
      >
        <span className="ar-tool-icon">{props.icon}</span>
        <span className="ar-tool-label">{props.label}</span>
      </button>
    );
  }

  function ARPlacementView(props) {
    var open      = props.open;
    var modelUrl  = props.modelUrl;
    var parts     = props.parts || [];
    var title     = props.title || 'Project';
    var location  = props.location || '';
    var onClose   = props.onClose || function() {};

    var canvasRef  = useRef(null);
    var overlayRef = useRef(null);
    var _status    = useState('Starting AR…'); var status = _status[0], setStatus = _status[1];
    var _error     = useState(''); var error = _error[0], setError = _error[1];
    var _placed    = useState(false); var placed = _placed[0], setPlaced = _placed[1];
    var _ready     = useState(false); var ready = _ready[0], setReady = _ready[1];
    var _walk      = useState(false); var walkMode = _walk[0], setWalkMode = _walk[1];

    useEffect(function() {
      if (!open || !modelUrl) return;

      setError('');
      setPlaced(false);
      setReady(false);
      setWalkMode(false);
      setStatus('Starting live AR camera…');

      var timer = setTimeout(function() {
        if (!window.CBARSession) {
          setError('AR engine failed to load. Refresh and try again.');
          return;
        }
        window.CBARSession.start({
          container: canvasRef.current,
          overlayRoot: overlayRef.current,
          modelUrl: modelUrl,
          parts: parts,
          title: title,
          onStatus: function(msg) { setStatus(msg); setReady(true); },
          onPlaced: function() { setPlaced(true); },
          onModeChange: function(info) { setWalkMode(!!(info && info.walkMode)); },
          onError: function(msg) { setError(msg || 'AR failed to start'); },
          onClose: function() { onClose(); },
        });
      }, 50);

      return function() {
        clearTimeout(timer);
        if (window.CBARSession) window.CBARSession.stop();
      };
    }, [open, modelUrl]);

    function runTool(fn) {
      var session = window.CBARSession && window.CBARSession.getActive();
      if (session && fn) fn(session);
    }

    if (!open) return null;

    return (
      <div className="ar-session-root">
        <div ref={canvasRef} className="ar-session-stage" />

        <div ref={overlayRef} className="ar-session-overlay">
          <div className="ar-session-top">
            <div className="ar-session-title">{title}</div>
            <div className="ar-session-sub">
              {location ? ('📍 ' + location + ' · ') : ''}
              {walkMode ? '🚶 LIFE-SIZE WALK · ' : ''}
              {status}
            </div>
          </div>

          {!placed && !error && (
            <div className="ar-session-reticle">
              <div className="ar-session-reticle-ring" />
              <div className="ar-session-reticle-dot" />
            </div>
          )}

          {walkMode && !error && (
            <div className="ar-walk-banner">
              Hold phone up · walk around outside · step into the model · drag to move · pinch to go deeper
            </div>
          )}

          {error && (
            <div className="ar-session-error">
              <div>{error}</div>
              <button type="button" className="ar-tool-btn ar-tool-btn--wide" onClick={onClose}>Close</button>
            </div>
          )}

          <div className="ar-session-toolbar">
            {!walkMode && (
              <ToolBtn icon="📍" label="Place" title="Place model on a real surface"
                disabled={!ready || !!error}
                onClick={function(){ runTool(function(s){ s.placeModel(); }); }} />
            )}
            <ToolBtn
              icon={walkMode ? '⌂' : '🚶'}
              label={walkMode ? 'Exit Walk' : 'Walk'}
              title={walkMode ? 'Exit life-size walk mode' : 'Life-size — walk around & inside with your phone'}
              active={walkMode}
              disabled={!ready || !!error}
              onClick={function(){
                runTool(function(s) {
                  if (s.toggleWalkMode) s.toggleWalkMode();
                  else if (s.enterWalkMode) s.enterWalkMode();
                });
              }}
            />
            <ToolBtn icon="↺" label="Rotate" title="Rotate left"
              disabled={!ready || !!error}
              onClick={function(){ runTool(function(s){ s.rotateLeft(); }); }} />
            <ToolBtn icon="↻" label="Turn" title="Rotate right"
              disabled={!ready || !!error}
              onClick={function(){ runTool(function(s){ s.rotateRight(); }); }} />
            <ToolBtn icon="＋" label="Bigger" title="Scale up"
              disabled={!ready || !!error}
              onClick={function(){ runTool(function(s){ s.scaleUp(); }); }} />
            <ToolBtn icon="－" label="Smaller" title="Scale down"
              disabled={!ready || !!error}
              onClick={function(){ runTool(function(s){ s.scaleDown(); }); }} />
            <ToolBtn icon="↑" label="Raise" title="Raise model"
              disabled={!ready || !!error || walkMode}
              onClick={function(){ runTool(function(s){ s.raiseModel(); }); }} />
            <ToolBtn icon="↓" label="Lower" title="Lower model"
              disabled={!ready || !!error || walkMode}
              onClick={function(){ runTool(function(s){ s.lowerModel(); }); }} />
            <ToolBtn icon="⟲" label="Reset" title="Reset placement"
              disabled={!ready || !!error}
              onClick={function(){ runTool(function(s){ s.resetPlacement(); setPlaced(false); setWalkMode(false); }); }} />
            <ToolBtn icon="✕" label="Exit" title="Exit AR"
              onClick={function(){ runTool(function(s){ s.exit(); }); onClose(); }} />
          </div>
        </div>
      </div>
    );
  }

  window.ARPlacementView = ARPlacementView;
})();