/* Dump — oauth-sim.jsx: simulated OAuth flows for demo mode.
   window.AuthSim.open('google' | 'slack') → Promise<boolean> */

let __authResolve = null;

const AuthSim = {
  open(provider) {
    return new Promise((resolve) => {
      __authResolve = resolve;
      DumpStore.set({ authSim: { provider, phase: 'choose' } });
    });
  },
  finish(ok) {
    DumpStore.set({ authSim: null });
    if (__authResolve) { __authResolve(ok); __authResolve = null; }
  }
};
window.AuthSim = AuthSim;

function GoogleG({ size = 20 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 48 48">
      <path fill="#FFC107" d="M43.6 20.1H42V20H24v8h11.3c-1.6 4.7-6.1 8-11.3 8-6.6 0-12-5.4-12-12s5.4-12 12-12c3.1 0 5.9 1.2 8 3l5.7-5.7C34 6.1 29.3 4 24 4 13 4 4 13 4 24s9 20 20 20 20-9 20-20c0-1.3-.1-2.6-.4-3.9z"></path>
      <path fill="#FF3D00" d="M6.3 14.7l6.6 4.8C14.7 15.1 19 12 24 12c3.1 0 5.9 1.2 8 3l5.7-5.7C34 6.1 29.3 4 24 4 16.3 4 9.7 8.3 6.3 14.7z"></path>
      <path fill="#4CAF50" d="M24 44c5.2 0 9.9-2 13.4-5.2l-6.2-5.2C29.2 35.1 26.7 36 24 36c-5.2 0-9.6-3.3-11.3-8l-6.5 5C9.5 39.6 16.2 44 24 44z"></path>
      <path fill="#1976D2" d="M43.6 20.1H42V20H24v8h11.3c-.8 2.2-2.2 4.2-4.1 5.6l6.2 5.2C37 39.2 44 34 44 24c0-1.3-.1-2.6-.4-3.9z"></path>
    </svg>
  );
}

function AuthSimModal() {
  const state = useDumpStore();
  const sim = state.authSim;
  const [phase, setPhase] = useState('choose');

  useEffect(() => { if (sim) setPhase('choose'); }, [sim && sim.provider]);

  if (!sim) return null;
  const isGoogle = sim.provider === 'google';
  const p = DumpDemo.persona;

  const approve = () => {
    setPhase('signing');
    setTimeout(() => AuthSim.finish(true), 1300);
  };
  const cancel = () => AuthSim.finish(false);

  return (
    <React.Fragment>
      <div className="overlay" style={{ zIndex: 80 }} onClick={phase === 'choose' ? cancel : undefined}></div>
      <div className="auth-modal" role="dialog" aria-label={isGoogle ? 'Sign in with Google' : 'Connect Slack'}>
        {phase === 'signing' ? (
          <div className="auth-signing">
            {isGoogle ? <GoogleG size={26} /> : Icons.slack(26)}
            <span className="spinner dark" style={{ width: 18, height: 18 }}></span>
            <p>{isGoogle ? 'Signing in to Dump…' : 'Connecting Brightline to Dump…'}</p>
          </div>
        ) : isGoogle ? (
          <div>
            <div className="auth-head">
              <GoogleG size={20} />
              <span>Sign in with Google</span>
            </div>
            <h3 className="auth-title">Choose an account</h3>
            <p className="auth-sub">to continue to <strong>Dump</strong></p>
            <button className="auth-account" onClick={approve}>
              <span className="auth-avatar">{p.initial}</span>
              <span className="auth-acc-text">
                <span className="auth-acc-name">{p.name}</span>
                <span className="auth-acc-email">{p.email}</span>
              </span>
            </button>
            <button className="auth-account alt" onClick={cancel}>
              <span className="auth-avatar ghost">+</span>
              <span className="auth-acc-text"><span className="auth-acc-name" style={{ fontWeight: 500 }}>Use another account</span></span>
            </button>
            <p className="auth-fine">To continue, Google will share your name, email address and profile picture with Dump. Before using this app, review its privacy policy and terms of service.</p>
          </div>
        ) : (
          <div>
            <div className="auth-head">
              {Icons.slack(20)}
              <span>Slack</span>
            </div>
            <h3 className="auth-title">Enstow is requesting access to the <strong>Brightline</strong> workspace</h3>
            <ul className="auth-perms">
              <li>View messages in channels you choose</li>
              <li>View your name and profile</li>
            </ul>
            <div className="auth-actions">
              <button className="btn" onClick={cancel}>Cancel</button>
              <button className="btn auth-allow" onClick={approve}>Allow</button>
            </div>
          </div>
        )}
      </div>
    </React.Fragment>
  );
}

window.AuthSimModal = AuthSimModal;