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

  var API_BASE = function() { return window.CITYBUILDR_API_URL || 'http://localhost:5001/api/v1'; };

  function AuthModal(props) {
    var mode    = props.mode    || 'user';   // 'admin' | 'user'
    var onClose = props.onClose || null;
    var variant = mode === 'admin' ? '' : ' auth-box--user';
    var hoverCls = mode === 'admin' ? 'hovering' : 'hov';

    var _tab = useState('login');  var tab = _tab[0], setTab = _tab[1];
    var _err = useState('');       var err = _err[0], setErr = _err[1];
    var _ldg = useState(false);    var ldg = _ldg[0], setLdg = _ldg[1];
    var _ogl = useState(false);    var ogl = _ogl[0], setOgl = _ogl[1];
    var hoverDepth = useRef(0);
    var boxRef     = useRef(null);

    // login fields
    var _em  = useState('');  var em  = _em[0],  setEm  = _em[1];
    var _pw  = useState('');  var pw  = _pw[0],  setPw  = _pw[1];
    // register fields
    var _nm  = useState('');  var nm  = _nm[0],  setNm  = _nm[1];
    var _rem = useState('');  var rem = _rem[0], setRem = _rem[1];
    var _rpw = useState('');  var rpw = _rpw[0], setRpw = _rpw[1];
    var _rol = useState('citizen'); var rol = _rol[0], setRol = _rol[1];

    function setHover(on) {
      document.body.classList.toggle(hoverCls, on);
    }

    var hover = function() {
      hoverDepth.current += 1;
      setHover(true);
    };
    var leave = function() {
      hoverDepth.current = Math.max(0, hoverDepth.current - 1);
      if (hoverDepth.current === 0) setHover(false);
    };
    var onFocus = function() { setHover(true); };
    var onBlur  = function(e) {
      var next = e.relatedTarget;
      if (next && boxRef.current && boxRef.current.contains(next)) return;
      hoverDepth.current = 0;
      setHover(false);
    };

    useEffect(function() {
      return function() {
        hoverDepth.current = 0;
        document.body.classList.remove(hoverCls);
      };
    }, []);

    function switchTab(t) { setTab(t); setErr(''); }

    async function handleLogin(e) {
      e.preventDefault();
      setErr(''); setLdg(true);
      try {
        var user = await window.AuthState.login(em, pw);
        if (mode === 'admin' && user.role !== 'admin') {
          window.AuthState.logout();
          throw new Error('Admin access required. Use an admin account.');
        }
        if (onClose) onClose(user);
      } catch(ex) {
        setErr(ex.message);
      } finally {
        setLdg(false);
      }
    }

    async function handleRegister(e) {
      e.preventDefault();
      if (rpw.length < 8) { setErr('Password must be at least 8 characters'); return; }
      setErr(''); setLdg(true);
      try {
        var user = await window.AuthState.register(nm, rem, rpw, rol);
        if (mode === 'admin' && user.role !== 'admin') {
          window.AuthState.logout();
          throw new Error('Admin access required. Use an admin account.');
        }
        if (onClose) onClose(user);
      } catch(ex) {
        setErr(ex.message);
      } finally {
        setLdg(false);
      }
    }

    async function handleGoogle() {
      if (mode === 'admin') { setErr('Google sign-in is not available for admin accounts.'); return; }
      setOgl(true); setErr('');
      try {
        var status = await window.AuthState.googleStatus();
        if (!status.configured) {
          setErr('Google sign-in is not configured on the server yet.');
          setOgl(false);
          return;
        }
        var url   = window.AuthState.googleAuthUrl();
        var popup = window.open(url, 'google-oauth', 'width=500,height=620,left=' + Math.round((screen.width-500)/2) + ',top=' + Math.round((screen.height-620)/2));
        if (!popup) {
          window.location.href = url;
          return;
        }
        var timer = setInterval(function() {
          if (popup.closed) { clearInterval(timer); setOgl(false); }
        }, 500);
      } catch(ex) {
        setErr(ex.message || 'Could not start Google sign-in');
        setOgl(false);
      }
    }

    useEffect(function() {
      function onMessage(e) {
        if (!e.data || (e.data.type !== 'OAUTH_SUCCESS' && e.data.type !== 'OAUTH_ERROR')) return;
        setOgl(false);
        if (e.data.type === 'OAUTH_ERROR') {
          setErr(e.data.error || 'Google sign-in failed. Please try again.');
          return;
        }
        window.AuthState.setSession(e.data.token, e.data.user);
        if (mode === 'admin' && e.data.user.role !== 'admin') {
          window.AuthState.logout();
          setErr('Admin access required. Use an admin account.');
          return;
        }
        if (onClose) onClose(e.data.user);
      }
      window.addEventListener('message', onMessage);
      return function() { window.removeEventListener('message', onMessage); };
    }, [mode, onClose]);

    var overlayClick = function(e) {
      if (mode === 'user' && onClose && e.target === e.currentTarget) onClose(null);
    };

    return (
      <div className="auth-overlay" onClick={overlayClick}>
        <div ref={boxRef} className={'auth-box' + variant}>
          {mode === 'user' && onClose && (
            <button className="auth-close" onClick={function() { onClose(null); }} onMouseEnter={hover} onMouseLeave={leave}>✕</button>
          )}

          <div className="auth-logo">CityBuildR</div>
          <div className="auth-sub">
            {mode === 'admin' ? 'Admin Intelligence Platform' : 'Build the city you imagine'}
          </div>

          <div className="auth-tabs">
            {['login','register'].map(function(t) {
              return (
                <button key={t} className={'auth-tab' + (tab === t ? ' active' : '')}
                  onClick={function() { switchTab(t); }}
                  onMouseEnter={hover} onMouseLeave={leave}>{t}</button>
              );
            })}
          </div>

          {err && <div className="auth-error">{err}</div>}

          {tab === 'login' ? (
            <form onSubmit={handleLogin}>
              <div className="auth-field">
                <label className="auth-label">Email</label>
                <input className="auth-input" type="email" value={em} onChange={function(e) { setEm(e.target.value); }} placeholder={mode === 'admin' ? 'admin@citybuildR.com' : 'you@example.com'} required
                  onMouseEnter={hover} onMouseLeave={leave} onFocus={onFocus} onBlur={onBlur} />
              </div>
              <div className="auth-field">
                <label className="auth-label">Password</label>
                <input className="auth-input" type="password" value={pw} onChange={function(e) { setPw(e.target.value); }} placeholder="••••••••" required
                  onMouseEnter={hover} onMouseLeave={leave} onFocus={onFocus} onBlur={onBlur} />
              </div>
              <button className="auth-submit" type="submit" disabled={ldg} onMouseEnter={hover} onMouseLeave={leave}>
                {ldg ? 'Signing in…' : 'Sign In'}
              </button>
              {mode === 'admin' && (
                <div className="auth-hint">Demo: admin@citybuildR.com · Admin123!</div>
              )}
            </form>
          ) : (
            <form onSubmit={handleRegister}>
              <div className="auth-field">
                <label className="auth-label">Full Name</label>
                <input className="auth-input" type="text" value={nm} onChange={function(e) { setNm(e.target.value); }} placeholder="Your name" required
                  onMouseEnter={hover} onMouseLeave={leave} onFocus={onFocus} onBlur={onBlur} />
              </div>
              <div className="auth-field">
                <label className="auth-label">Email</label>
                <input className="auth-input" type="email" value={rem} onChange={function(e) { setRem(e.target.value); }} placeholder="you@example.com" required
                  onMouseEnter={hover} onMouseLeave={leave} onFocus={onFocus} onBlur={onBlur} />
              </div>
              <div className="auth-field">
                <label className="auth-label">Password</label>
                <input className="auth-input" type="password" value={rpw} onChange={function(e) { setRpw(e.target.value); }} placeholder="Min 8 characters" required
                  onMouseEnter={hover} onMouseLeave={leave} onFocus={onFocus} onBlur={onBlur} />
              </div>
              {mode !== 'admin' && (
                <div className="auth-field">
                  <label className="auth-label">Account Type</label>
                  <select className="auth-select" value={rol} onChange={function(e) { setRol(e.target.value); }}
                    onMouseEnter={hover} onMouseLeave={leave} onFocus={onFocus} onBlur={onBlur}>
                    <option value="citizen">Citizen</option>
                    <option value="business">Business</option>
                    <option value="government">Government</option>
                  </select>
                </div>
              )}
              <button className="auth-submit" type="submit" disabled={ldg} onMouseEnter={hover} onMouseLeave={leave}>
                {ldg ? 'Creating account…' : 'Create Account'}
              </button>
            </form>
          )}

          {mode !== 'admin' && (
            <>
              <div className="auth-divider"><span>or</span></div>
              <button className="auth-google" onClick={handleGoogle} disabled={ogl}
                onMouseEnter={hover} onMouseLeave={leave}>
                <svg width="18" height="18" viewBox="0 0 48 48" style={{flexShrink:0}}>
                  <path fill="#EA4335" d="M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z"/>
                  <path fill="#4285F4" d="M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z"/>
                  <path fill="#FBBC05" d="M10.53 28.59c-.48-1.45-.76-2.99-.76-4.59s.27-3.14.76-4.59l-7.98-6.19C.92 16.46 0 20.12 0 24c0 3.88.92 7.54 2.56 10.78l7.97-6.19z"/>
                  <path fill="#34A853" d="M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.18 1.48-4.97 2.31-8.16 2.31-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z"/>
                </svg>
                {ogl ? 'Opening Google…' : 'Continue with Google'}
              </button>
            </>
          )}
        </div>
      </div>
    );
  }

  window.AuthModal = AuthModal;
})();